:root {
  --ink:        oklch(22% 0.02 260);
  --ink-soft:   oklch(48% 0.02 260);
  --surface:    oklch(98.5% 0.004 260);
  --panel:      oklch(100% 0 0);
  --line:       oklch(90% 0.01 260);
  --accent:     oklch(52% 0.16 258);
  --ok:         oklch(56% 0.14 152);
  --warn:       oklch(68% 0.15 75);
  --danger:     oklch(55% 0.19 25);
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  --sans: ui-sans-serif, system-ui, "Inter", sans-serif;
  --step-0: 0.9375rem;
  --step-1: 1.125rem;
  --step-3: 2.25rem;
  --gap: 1.25rem;
  --radius: 6px;
  --duration-fast: 150ms;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink:      oklch(94% 0.01 260);
    --ink-soft: oklch(70% 0.02 260);
    --surface:  oklch(18% 0.02 260);
    --panel:    oklch(22% 0.02 260);
    --line:     oklch(32% 0.02 260);
    --accent:   oklch(72% 0.14 258);
  }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font: var(--step-0)/1.5 var(--sans);
  color: var(--ink);
  background: var(--surface);
}

.bar {
  display: flex; align-items: center; gap: var(--gap);
  padding: 0 var(--gap); height: 52px;
  background: var(--panel); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 5;
}
.mark { font-weight: 600; letter-spacing: -0.02em; text-decoration: none; color: var(--ink); }
.mark span { color: var(--accent); }
.bar nav { display: flex; gap: 1rem; margin-right: auto; }
.bar nav a { color: var(--ink-soft); text-decoration: none; padding: 4px 0; border-bottom: 2px solid transparent; }
.bar nav a:hover { color: var(--ink); }
.bar nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }

main { padding: calc(var(--gap) * 1.5) var(--gap); max-width: 1180px; margin: 0 auto; }
.page-title { font-size: var(--step-3); letter-spacing: -0.03em; margin: 0 0 var(--gap); }
h2 { font-size: var(--step-1); margin: calc(var(--gap) * 1.5) 0 0.5rem; }

.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 2px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.figures article { background: var(--panel); padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: 2px; }
.figure { font: 600 var(--step-3)/1 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.04em; }
.label { color: var(--ink-soft); text-transform: uppercase; font-size: 0.6875rem; letter-spacing: 0.08em; }

table { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
thead th { position: sticky; top: 52px; background: var(--panel); text-align: left; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--line); }
td { padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--line); }
tbody tr:hover { background: color-mix(in oklch, var(--accent) 7%, transparent); }
.num, .key, .fingerprint { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.num { text-align: right; }
.empty { color: var(--ink-soft); font-style: italic; }

.status { font: 600 0.6875rem/1 var(--mono); letter-spacing: 0.04em; padding: 4px 7px; border-radius: 999px; border: 1px solid currentColor; }
.status-ACTIVE { color: var(--ok); }
.status-EXPIRED, .status-NOT_YET_VALID, .status-SEAT_LIMIT_EXCEEDED { color: var(--warn); }
.status-REVOKED, .status-SUSPENDED, .status-NOT_FOUND, .status-PRODUCT_NOT_FOUND, .status-MISSING_FIELD { color: var(--danger); }

button, .button { font: 600 var(--step-0) var(--sans); color: var(--panel); background: var(--accent); border: 0; border-radius: var(--radius); padding: 0.5rem 0.9rem; cursor: pointer; }
button:hover { filter: brightness(1.08); }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button.link { background: none; color: var(--ink-soft); padding: 0; font-weight: 400; }
button.danger { background: var(--danger); }

input, select { font: var(--step-0) var(--sans); padding: 0.45rem 0.6rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); color: var(--ink); }
label { display: block; font-size: 0.8125rem; color: var(--ink-soft); margin: 0.75rem 0 0.25rem; }

.centred { display: grid; place-items: center; min-height: 100vh; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem; width: min(360px, 90vw); }
.panel h1 { font-size: var(--step-1); margin: 0 0 1rem; }
.panel button { width: 100%; margin-top: 1.25rem; }
.flash { background: color-mix(in oklch, var(--ok) 12%, transparent); border-left: 3px solid var(--ok); padding: 0.6rem 0.9rem; border-radius: 0 var(--radius) var(--radius) 0; }
.error { color: var(--danger); }
.count { font: 400 var(--step-0) var(--mono); color: var(--ink-soft); }
.page-title .button { float: right; font-size: var(--step-0); text-decoration: none; }
.filters { display: flex; gap: 0.75rem; margin-bottom: 0.5rem; flex-wrap: wrap; align-items: end; }
.filters input { min-width: 260px; }
/* Each control carries its own label: "Status" and "Verdict" are different
   questions about the same row, and an unlabelled dropdown beside a Verdict
   column invites reading one as the other. */
.filter { display: flex; flex-direction: column; gap: 0.2rem; margin: 0; }
.filter > span { font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft); }
.filters button { align-self: end; }
.hint { margin: 0 0 var(--gap); font-size: 0.8125rem; color: var(--ink-soft); max-width: 78ch; }
.field-row { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.field-row input { flex: 1; }
.inline { display: flex; gap: 0.5rem; align-items: center; margin: 0.5rem 0; flex-wrap: wrap; }
.panel.issued { width: min(720px, 92vw); }
.raw-key { font-size: clamp(1.125rem, 0.6rem + 1.6vw, 1.75rem); line-height: 1.35; letter-spacing: 0.04em; background: color-mix(in oklch, var(--accent) 10%, transparent); border: 1px solid color-mix(in oklch, var(--accent) 35%, transparent); padding: 1rem 1.1rem; border-radius: var(--radius); user-select: all; overflow-wrap: anywhere; }
.copy { margin-top: 0.75rem; }
.choice { display: inline-flex; align-items: center; gap: 0.35rem; margin: 0; font-size: 0.8125rem; color: var(--ink-soft); }
.choice input { margin: 0; }

/* The status hues were tuned against the light surface; on the dark panel they
   need lifting or the pill text falls below a readable contrast. */
@media (prefers-color-scheme: dark) {
  :root {
    --ok:     oklch(72% 0.15 152);
    --warn:   oklch(80% 0.15 75);
    --danger: oklch(70% 0.19 25);
  }
}

/* Hover and focus are states the operator should feel land, not snap. */
a, button, .status, tbody tr, input, select {
  transition: background-color var(--duration-fast) var(--ease),
              color var(--duration-fast) var(--ease),
              border-color var(--duration-fast) var(--ease),
              filter var(--duration-fast) var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  a, button, .status, tbody tr, input, select { transition: none; }
}

.brief {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  margin: 0.75rem 0; padding: 1.1rem 1.25rem; max-height: 70vh; overflow-y: auto;
  font-family: var(--mono); font-size: 0.8125rem; line-height: 1.6;
  white-space: pre-wrap; overflow-wrap: anywhere;
}