/* Tokens (palette, type, spacing, motion) come from /static/shared/tokens.css.
   This sheet is components only. */

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.55;
  letter-spacing: 0.001em;
  -webkit-font-smoothing: antialiased;
}

button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--stamp); outline-offset: 3px; }
/* On dark surfaces the paper-blue ring disappears into the ink; swap it for
   the ink-safe variant so focus stays visible everywhere. */
.rail :focus-visible,
.viewer-bar :focus-visible,
.drawer-head :focus-visible { outline-color: var(--stamp-ink); }
::selection { background: var(--ink); color: var(--paper); }
a { color: var(--stamp); }

/* ── the gate: sign in, set a password, or the machine-credential route ─ */

/* The unconditional `display: grid` below would otherwise outrank the
   browser's own [hidden] default, since an author rule beats a user-agent
   one at equal specificity regardless of which is more specific. */
.gate[hidden], .app[hidden] { display: none; }

.gate {
  display: grid;
  min-height: 100vh;
}
@media (min-width: 56rem) { .gate { grid-template-columns: minmax(20rem, 1fr) minmax(24rem, 1.1fr); } }

.gate-left {
  background: var(--ink);
  color: var(--on-ink);
  padding: var(--s-7) var(--s-6);
  display: flex;
  flex-direction: column;
}
.gate-brand {
  font-family: var(--mono);
  font-size: var(--t-small);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: var(--s-6);
}
.gate-left h1 {
  font-weight: 620;
  letter-spacing: -0.022em;
  font-size: var(--t-h1);
  line-height: 1.25;
  max-width: 22ch;
  margin: 0 0 var(--s-3);
}
.gate-left > p {
  margin: 0 0 var(--s-6);
  color: var(--muted-ink);
  max-width: 46ch;
  font-size: var(--t-small);
}
.gate-left .ledger { max-width: 34rem; }
.gate-foot {
  margin: var(--s-6) 0 0;
  padding-top: var(--s-4);
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.04em;
  color: var(--faint-ink);
  line-height: 1.7;
}

.gate-right {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-6) var(--s-5);
  background: var(--paper);
  position: relative;
}
.gate-pane { display: none; width: 100%; max-width: 24rem; }
.gate[data-pane="signin"] #pane-signin,
.gate[data-pane="setup"] #pane-setup,
.gate[data-pane="connect"] #pane-connect { display: block; }
.gate-pane h2 {
  font-family: var(--sans);
  font-weight: 620;
  letter-spacing: -0.02em;
  font-size: var(--t-h2);
  text-transform: none;
  color: var(--ink);
  margin: 0 0 var(--s-2);
}
.gate-sub { margin: 0 0 var(--s-5); color: var(--muted); font-size: var(--t-small); }
.gate-pane .grid { gap: var(--s-4); }
.gate-pane .actions { margin-top: var(--s-2); }
.gate-pane form button[type="submit"] { width: 100%; }

.gate-alt {
  margin: var(--s-6) 0 0;
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
  font-size: var(--t-small);
  color: var(--faint);
  max-width: 30ch;
}

.linklike {
  display: block;
  margin-top: var(--s-2);
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: var(--t-small);
  color: var(--stamp);
  text-decoration: underline;
  cursor: pointer;
}
.linklike:hover { color: var(--stamp); opacity: 0.85; }

/* ── shell ──────────────────────────────────────────────────────────── */

.app { display: grid; grid-template-columns: var(--rail) 1fr; height: 100vh; }

.rail {
  background: var(--ink);
  color: var(--paper);
  display: flex;
  flex-direction: column;
  padding: var(--s-5) var(--s-4);
  overflow: auto;
}
.brand { margin-bottom: var(--s-5); }
.brand-mark {
  display: block;
  font-family: var(--mono);
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.brand-sub { font-size: var(--t-small); color: var(--muted-ink); }

.rail-new {
  width: 100%;
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  padding: var(--s-2) var(--s-3);
  color: var(--paper);
  background: transparent;
  border: 1px solid var(--ink-3);
  border-radius: var(--r-control);
  cursor: pointer;
  margin-bottom: var(--s-5);
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.rail-new:hover { background: var(--ink-2); border-color: var(--on-ink); }
.rail-new:active { background: var(--on-ink); color: var(--ink); border-color: var(--on-ink); }
.rail-new:disabled { opacity: 0.4; cursor: not-allowed; }

.rail-group {
  display: block;
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--faint-ink);
  padding: 0 var(--s-2) var(--s-2);
}
.rail-nav { display: flex; flex-direction: column; gap: 1px; }
.rail-item {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  width: 100%;
  background: none;
  border: 0;
  border-radius: 0;
  padding: var(--s-2);
  text-align: left;
  color: var(--muted-ink);
  cursor: pointer;
  font-size: var(--t-body);
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.rail-item:hover { background: var(--ink-2); color: var(--paper); }
.rail-item:active { background: var(--ink-3); }
.rail-item[aria-current="page"] { background: var(--ink-3); color: var(--paper); }
.rail-count {
  margin-left: auto;
  font-family: var(--mono);
  font-size: var(--t-small);
  font-style: normal;
  font-variant-numeric: tabular-nums;
  color: var(--muted-ink);
}

/* Before a token exists there is nowhere to navigate to, so the rail is a
   masthead and nothing more. */
.app[data-connected="false"] .rail-new,
.app[data-connected="false"] .rail-nav,
.app[data-connected="false"] .rail-disconnect,
.app[data-connected="false"] .topbar { display: none; }
.app[data-connected="false"] .rail-foot { border-top: 0; }

/* Which identity block shows in the rail depends on how this tab
   authenticated: a bearer token or a signed-in person, never both. */
.app[data-mode="bearer"] .cookie-only,
.app:not([data-mode="cookie"]) .cookie-only { display: none; }
.app[data-mode="cookie"] .bearer-only,
.app:not([data-mode="bearer"]) .bearer-only { display: none; }

.role-note { margin: var(--s-2) 0 0; font-size: var(--t-small); color: var(--faint-ink); }
#role-note-queue { color: var(--muted); }
.role-note:empty { display: none; }

/* The session receipt: a dismissible ledger, not a screen between an
   operator and their queue. */
.receipt { margin-bottom: var(--s-4); }
.receipt:not([hidden]) { padding-bottom: var(--s-2); }
.receipt-dismiss {
  margin-top: var(--s-2);
  background: none;
  border: 1px solid var(--ink-3);
  border-radius: var(--r-control);
  color: var(--muted-ink);
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.15rem var(--s-2);
  cursor: pointer;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.receipt-dismiss:hover { background: var(--ink-3); color: var(--on-ink); }

.rail-foot {
  margin-top: auto;
  padding-top: var(--s-3);
  border-top: 1px solid var(--ink-3);
}
.rail-line {
  display: flex;
  justify-content: space-between;
  gap: var(--s-2);
  font-family: var(--mono);
  font-size: var(--t-small);
  color: var(--muted-ink);
  padding: var(--s-1) var(--s-2);
}
.rail-line b { color: var(--paper); font-weight: 500; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.rail-disconnect {
  margin-top: var(--s-2);
  width: 100%;
  background: none;
  border: 1px solid var(--ink-3);
  border-radius: var(--r-control);
  color: var(--muted-ink);
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: var(--s-2);
  cursor: pointer;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
/* Destructive, but not a verdict: weight and inversion do the work instead
   of borrowing the flag colour that means "differs". */
.rail-disconnect:hover { color: var(--on-ink); background: var(--ink-3); border-color: var(--on-ink); }
.rail-disconnect:active { background: var(--ink-2); }
.rail-disconnect:disabled { opacity: 0.4; cursor: not-allowed; }

.main { display: flex; flex-direction: column; min-width: 0; }

.topbar {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex: 0 0 auto;
  padding: 0 var(--s-6);
  height: 3.2rem;
  background: var(--paper-3);
  border-bottom: 1px solid var(--rule);
}
.crumb { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-body); }
.crumb b { font-weight: 600; }
.crumb .sep, .crumb .soft { color: var(--faint); font-weight: 400; }
.crumb .back {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  background: none;
  border: 1px solid var(--rule);
  border-radius: var(--r-control);
  cursor: pointer;
  padding: 0.25rem 0.55rem 0.25rem 0.45rem;
  font: inherit;
  font-size: var(--t-small);
  line-height: 1.2;
  color: var(--muted);
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease),
    color var(--fast) var(--ease);
}
.crumb .back svg { flex: none; display: block; }
.crumb .back:hover { background: var(--paper-2); border-color: var(--ink); color: var(--text); }
.crumb .back:focus-visible { outline: 2px solid var(--stamp); outline-offset: 2px; }
.crumb .ref {
  font-family: var(--mono);
  font-size: var(--t-small);
  border: 1px solid var(--rule);
  border-radius: var(--r-control);
  padding: 0.05rem var(--s-1);
  color: var(--faint);
}

.session {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-small);
  color: var(--faint);
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
.session[data-state="on"] .dot { background: var(--pass); }
.session[data-state="on"] { color: var(--pass); }

.banner-slot:empty { display: none; }
.banner {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-6);
  background: var(--flag-wash);
  border-bottom: 1px solid var(--flag);
  color: var(--flag);
  font-size: var(--t-small);
}
.banner p { margin: 0; flex: 1; color: var(--text); }
.banner button {
  background: none;
  border: 1px solid var(--flag);
  border-radius: var(--r-control);
  color: var(--flag);
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.15rem var(--s-2);
  cursor: pointer;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.banner button:hover { background: var(--flag); color: var(--paper); }

.body { flex: 1; overflow: auto; }
.view { display: none; }
.view.on { display: block; }
.page { padding: var(--s-6) var(--s-5) var(--s-7); max-width: 66rem; }
.page.narrow { max-width: 48rem; }

.foot {
  flex: 0 0 auto;
  border-top: 1px solid var(--rule);
  background: var(--paper-3);
  padding: var(--s-3) var(--s-6);
}
.foot p { margin: 0; max-width: 78ch; color: var(--faint); font-size: var(--t-small); }

/* ── headings, forms ────────────────────────────────────────────────── */

.pagehead { display: flex; align-items: flex-start; gap: var(--s-5); margin-bottom: var(--s-5); }
.pagehead > div { min-width: 0; }
.page-title { font-weight: 620; letter-spacing: -0.022em; font-size: var(--t-h1); margin: 0; }
.page-sub { margin: var(--s-1) 0 0; color: var(--muted); font-size: var(--t-small); max-width: 68ch; }
.pagehead .primary { margin-left: auto; flex: none; }

/* The thesis and the legend teach someone who has just arrived. That lesson
   belongs on the queue's empty state, not on the login screen. */
.thesis { padding-bottom: var(--s-6); margin-bottom: var(--s-6); border-bottom: 1px solid var(--rule); text-align: left; }
.thesis h1 {
  font-weight: 620; letter-spacing: -0.022em;
  font-size: var(--t-h1);
  line-height: 1.25;
  margin: 0 0 var(--s-2);
  max-width: 30ch;
}
.thesis > p { margin: 0 0 var(--s-5); color: var(--muted); max-width: 58ch; }
.legend { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (min-width: 40rem) { .legend { grid-template-columns: repeat(3, 1fr); } }
.legend div { background: var(--paper-2); padding: var(--s-3) var(--s-4) var(--s-3) var(--s-5); position: relative; }
.legend div::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.legend .agrees::before { background: var(--pass); }
.legend .differs::before { background: var(--flag); }
.legend .none::before {
  background: repeating-linear-gradient(135deg, var(--hold) 0 2px, transparent 2px 5px);
}
.legend b {
  display: block;
  font-size: var(--t-small);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: var(--mono);
  font-weight: 600;
}
.legend span { font-size: var(--t-small); color: var(--muted); }

h2 {
  font-family: var(--mono);
  font-size: var(--t-small);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 600;
  margin: 0 0 var(--s-5);
}

.grid { display: grid; gap: var(--s-4) var(--s-5); }
@media (min-width: 40rem) { .grid.two { grid-template-columns: 1fr 1fr; } }
.span { grid-column: 1 / -1; }

label { display: block; }
.lab { display: block; font-size: var(--t-small); color: var(--muted); margin-bottom: var(--s-1); }
.hint { font-family: var(--mono); font-size: var(--t-micro); color: var(--faint); }

input, select {
  width: 100%;
  font-family: var(--mono);
  font-size: var(--t-lede);
  padding: var(--s-2) var(--s-3);
  background: var(--paper-2);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: var(--r-control);
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
input:hover, select:hover { border-color: var(--muted); }
input:focus-visible, select:focus-visible { border-color: var(--stamp); background: var(--paper-3); }
input:disabled, select:disabled { opacity: 0.45; cursor: not-allowed; background: var(--paper-2); }
input[type="file"] { font-family: var(--sans); font-size: var(--t-small); padding: var(--s-2); }
/* A typed name is chrome the operator is entering, not an identifier a
   machine returned, so it takes the interface's own voice, not mono. */
input[name="name"] { font-family: var(--sans); font-weight: 500; font-size: var(--t-lede); }

button.primary, form button[type="submit"] {
  font-family: var(--mono);
  font-size: var(--t-small);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  padding: var(--s-3) var(--s-5);
  color: var(--paper);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: var(--r-control);
  cursor: pointer;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
button.primary:hover:not(:disabled),
form button[type="submit"]:hover:not(:disabled) { background: var(--ink-2); border-color: var(--ink-2); }
button.primary:active:not(:disabled),
form button[type="submit"]:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: 0.4; cursor: not-allowed; }

/* A minimal in-button spinner for the one moment work is actually running;
   the rest of the console uses skeletons, never a page-centred spinner. */
.spinner {
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  margin-right: var(--s-2);
  border: 2px solid var(--ink-3);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 700ms linear infinite;
  vertical-align: -0.1em;
}
@keyframes spin { to { transform: rotate(360deg); } }

.actions { display: flex; align-items: center; gap: var(--s-4); margin-top: var(--s-1); flex-wrap: wrap; }
.actions p { margin: 0; font-size: var(--t-small); color: var(--muted); }
.advice { margin: 0; font-size: var(--t-small); color: var(--faint); max-width: 72ch; }

/* A reusable inline error, under the field or form it belongs to. */
.field-error { color: var(--flag); font-size: var(--t-small); margin: var(--s-4) 0 0; }
.field-error:empty { display: none; }

/* which fields belong to which kind of check */
.only-document { display: none; }
.app[data-kind="document"] .only-name { display: none; }
.app[data-kind="document"] .only-document { display: block; }
.app[data-kind="document"] .only-document.grid { display: grid; }

.eyebrow {
  font-family: var(--mono);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.19em;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 var(--s-2);
}

.kinds { display: grid; gap: var(--s-3); margin-bottom: var(--s-6); }
@media (min-width: 40rem) { .kinds { grid-template-columns: 1fr 1fr; } }
/* Reads as a choice, not as two notices: the unpicked card recedes and the
   picked one carries the ink border. Operators were missing the second one. */
.kind {
  position: relative;
  text-align: left;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: var(--r-control);
  padding: var(--s-3) var(--s-4) var(--s-3) 2.1rem;
  cursor: pointer;
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.kind::before {
  content: "";
  position: absolute;
  left: var(--s-3);
  top: 1.05rem;
  width: 0.7rem;
  height: 0.7rem;
  border: 1px solid var(--faint);
  border-radius: 50%;
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.kind:hover { border-color: var(--muted); background: var(--paper-3); }
.kind:active { background: var(--paper-2); }
.kind b { display: block; font-size: var(--t-body); margin-bottom: var(--s-1); }
.kind span { font-size: var(--t-small); color: var(--muted); }
.kind[aria-pressed="true"] { border-color: var(--ink); background: var(--paper-3); }
.kind[aria-pressed="true"]::before {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 3px var(--ink);
}
.kind:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── queue ──────────────────────────────────────────────────────────── */

.filters { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-4); }
.chip {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  border: 1px solid var(--rule);
  background: var(--paper-2);
  border-radius: var(--r-control);
  padding: var(--s-2) var(--s-3);
  font-size: var(--t-small);
  cursor: pointer;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.chip b { font-family: var(--mono); font-size: var(--t-micro); font-weight: 500; color: var(--faint); font-variant-numeric: tabular-nums; }
.chip:hover { border-color: var(--muted); }
.chip:active { background: var(--paper-3); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.chip[aria-pressed="true"] b { color: var(--muted-ink); }
.chip:disabled { opacity: 0.4; cursor: not-allowed; }

table { width: 100%; border-collapse: collapse; background: var(--paper-2); border: 1px solid var(--rule); }
th {
  text-align: left;
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 600;
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--rule);
  background: var(--paper-3);
}
td { padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--rule-soft); font-size: var(--t-small); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tbody tr { cursor: pointer; transition: background var(--fast) var(--ease); }
tbody tr:hover { background: var(--paper-3); }
tbody tr:focus-visible { outline: 2px solid var(--stamp); outline-offset: -2px; }
tbody tr:active { background: var(--paper); }
td.m { font-family: var(--mono); font-size: var(--t-small); color: var(--muted); font-variant-numeric: tabular-nums; }
td.ref { font-family: var(--mono); font-size: var(--t-small); }
td.ref .none { color: var(--faint); font-style: italic; }

/* a row from this tab still has its detail; an older one never will. The
   mark carries that meaning, not a fourth hue. */
tbody tr.live td.ref { border-left: 3px solid var(--ink); padding-left: calc(var(--s-3) - 3px); }
.live-mark {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  margin-left: var(--s-2);
}

.tally { display: flex; gap: 3px; align-items: flex-end; height: 14px; }
.tally i { width: 4px; border-radius: 0; height: 14px; display: block; }
.tally i.agrees { background: var(--pass); }
.tally i.differs { background: var(--flag); }
.tally i.silent { background: var(--hold); opacity: 0.55; height: 7px; }

.pill {
  display: inline-block;
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  padding: 0.14rem var(--s-2);
  border-radius: 0;
  background: var(--faint-wash);
  color: var(--faint);
  white-space: nowrap;
}
.pill.ok { background: var(--pass-wash); color: var(--pass); }
.pill.bad { background: var(--flag-wash); color: var(--flag); }

.empty {
  border: 1px dashed var(--rule);
  padding: var(--s-6) var(--s-5);
  max-width: 60ch;
  color: var(--muted);
  font-size: var(--t-small);
}
.empty b { display: block; font-weight: 620; letter-spacing: -0.022em; font-size: var(--t-h3); margin-bottom: var(--s-2); color: var(--ink); }

.more { margin-top: var(--s-4); }
.more button {
  background: none;
  border: 1px solid var(--rule);
  border-radius: var(--r-control);
  padding: var(--s-2) var(--s-4);
  font-family: var(--mono);
  font-size: var(--t-small);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  color: var(--muted);
  transition: border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.more button:hover { border-color: var(--ink); color: var(--ink); }
.more button:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── skeletons ──────────────────────────────────────────────────────── */

.skel { background: var(--rule-soft); border-radius: var(--r-control); overflow: hidden; position: relative; }
.skel::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--paper-3), transparent);
  animation: shimmer 1400ms var(--ease) infinite;
}
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

.skel-table { border: 1px solid var(--rule); background: var(--paper-2); }
.skel-row { display: flex; gap: var(--s-4); align-items: center; padding: var(--s-3); border-bottom: 1px solid var(--rule-soft); }
.skel-row:last-child { border-bottom: 0; }
.skel-row .skel { height: var(--s-4); }
.skel-row .skel:nth-child(1) { width: 22%; }
.skel-row .skel:nth-child(2) { width: 16%; }
.skel-row .skel:nth-child(3) { width: 10%; }
.skel-row .skel:nth-child(4) { width: 18%; }
.skel-row .skel:nth-child(5) { flex: 1; }

.skel-case .skel { height: var(--s-5); margin-bottom: var(--s-3); }
.skel-case .skel:nth-child(1) { width: 40%; height: var(--s-6); }
.skel-case .skel:nth-child(2) { width: 60%; }
.skel-case .skel:nth-child(3) { width: 90%; }

/* ── case ───────────────────────────────────────────────────────────── */

.casehead { margin-bottom: var(--s-5); }
/* Reference, request, timing and the actors involved: this is the console
   making an audit statement, so it takes the shared ledger. */
.casehead .ledger { margin-bottom: var(--s-4); }
.case-name {
  font-family: var(--serif); font-weight: 500; letter-spacing: 0;
  font-size: var(--t-h1); margin: 0 0 var(--s-3);
}

.summary {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  flex-wrap: wrap;
  background: var(--ink);
  color: var(--paper);
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-5);
}
.summary-name { font-family: var(--serif); font-weight: 500; font-size: var(--t-lede); color: var(--on-ink); }
.summary .n { font-family: var(--mono); font-weight: 620; letter-spacing: 0; font-size: var(--t-h2); line-height: 1.1; font-variant-numeric: tabular-nums; }
.summary .n small {
  display: block;
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-ink);
  margin-top: var(--s-1);
}
.summary .said { margin-left: auto; font-family: var(--mono); font-size: var(--t-small); color: var(--muted-ink); text-align: right; }

/* ── the register table: one row per register, expandable in place ───── */

.regtable {
  --regcols: minmax(9rem, 1.15fr) minmax(7.5rem, 0.9fr) minmax(9.5rem, 1.25fr)
    minmax(6.5rem, 0.85fr) minmax(6.5rem, 0.85fr) 1.4rem;
  border: 1px solid var(--rule);
  background: var(--paper-2);
  margin-bottom: var(--s-5);
}
.regtable-head {
  display: grid;
  grid-template-columns: var(--regcols);
  align-items: center;
  column-gap: var(--s-4);
  padding: var(--s-2) var(--s-4) var(--s-2) calc(var(--s-4) + 4px);
  background: var(--paper-3);
  border-bottom: 1px solid var(--rule);
}
.regtable-head .c {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 600;
}

.regrow-wrap { position: relative; border-bottom: 1px solid var(--rule-soft); }
.regtable-body .regrow-wrap:last-child { border-bottom: 0; }
.regrow-wrap::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.regrow-wrap[data-state="agrees"]::before { background: var(--pass); }
.regrow-wrap[data-state="near"]::before { background: var(--hold); }
.regrow-wrap[data-state="differs"]::before { background: var(--flag); }
/* Amber belongs to Near miss now. "We could not look" is not a failure, so
   No verdict is deliberately unalarming grey, kept legible by the hatch. */
.regrow-wrap[data-state="none"]::before {
  background: repeating-linear-gradient(135deg, var(--faint) 0 2px, transparent 2px 5px);
}

.regrow {
  display: grid;
  grid-template-columns: var(--regcols);
  align-items: center;
  column-gap: var(--s-4);
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  border-radius: 0;
  padding: var(--s-3) var(--s-4) var(--s-3) calc(var(--s-4) + 4px);
  cursor: pointer;
  transition: background var(--fast) var(--ease);
}
.regrow:hover { background: var(--paper-3); }
.regrow:active { background: var(--paper); }
.regrow:focus-visible { outline: 2px solid var(--stamp); outline-offset: -2px; }
.regrow .c { min-width: 0; }

.c-register b { display: block; font-size: var(--t-small); font-weight: 600; }
.c-register small {
  display: block;
  font-family: var(--mono);
  font-size: var(--t-micro);
  color: var(--faint);
  letter-spacing: 0;
  margin-top: 1px;
}

/* A name is the one serif on the page. A status token or an identifier
   standing in for one is a machine's word and takes mono instead. */
.c-claimed .name, .c-record .name { font-family: var(--serif); font-weight: 500; font-size: var(--t-body); }
.c-claimed .mono, .c-record .mono { font-family: var(--mono); font-size: var(--t-small); font-variant-numeric: tabular-nums; }
.c-claimed .faint, .c-record .faint { color: var(--faint); }
mark.extra { background: var(--hold-wash); color: var(--hold); font-weight: 600; padding: 0 2px; border-radius: 2px; }

.sim { display: flex; flex-direction: column; gap: 2px; }
/* The fallback sits in the same column as the figures, so it matches them. */
.sim .faint { font-size: var(--t-small); }
.sim-num { font-size: var(--t-small); font-variant-numeric: tabular-nums; }
.sim-bar { height: 3px; background: var(--rule); max-width: 6rem; }
.sim-bar i { display: block; height: 100%; background: var(--faint); }
.regrow-wrap[data-state="agrees"] .sim-bar i { background: var(--pass); }
.regrow-wrap[data-state="near"] .sim-bar i { background: var(--hold); }
.regrow-wrap[data-state="differs"] .sim-bar i { background: var(--flag); }

/* baseline, not centre: a status long enough to wrap must not leave its dot
   stranded on the first line. */
.verdict-pill { display: inline-flex; align-items: baseline; gap: var(--s-2); font-family: var(--mono); font-size: var(--t-small); letter-spacing: 0.04em; }
.verdict-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); flex: none;
  align-self: center; }
.verdict-pill.agrees { color: var(--pass); }
.verdict-pill.agrees .dot { background: var(--pass); }
.verdict-pill.near { color: var(--hold); }
.verdict-pill.near .dot { background: var(--hold); }
.verdict-pill.differs { color: var(--flag); }
.verdict-pill.differs .dot { background: var(--flag); }
.verdict-pill.none { color: var(--faint); }
.verdict-pill.none .dot { background: var(--faint); }

.chev { color: var(--faint); transition: transform var(--fast) var(--ease); }
.regrow[aria-expanded="true"] .chev { transform: rotate(180deg); }

.regpanel { padding: 0 var(--s-4) var(--s-4) calc(var(--s-4) + 4px); background: var(--paper-3); border-bottom: 1px solid var(--rule-soft); }
.regpanel[hidden] { display: none; }
.regpanel-reason { margin: var(--s-3) 0 0; font-size: var(--t-small); color: var(--muted); max-width: 68ch; }
.regpanel-meta {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin-top: var(--s-3);
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}
.regpanel-evidence {
  margin-left: auto;
  background: none;
  border: 1px solid var(--rule);
  border-radius: var(--r-control);
  padding: 0.2rem var(--s-3);
  font: inherit;
  font-size: var(--t-small);
  color: var(--muted);
  padding: 0.25rem var(--s-3);
  cursor: pointer;
  transition: border-color var(--fast) var(--ease), color var(--fast) var(--ease),
    background var(--fast) var(--ease);
}
.regpanel-evidence:hover { border-color: var(--ink); color: var(--text); background: var(--paper); }
.regpanel-evidence:focus-visible { outline: 2px solid var(--stamp); outline-offset: 2px; }
.regpanel-evidence:active { background: var(--paper-2); }
.regpanel-evidence:disabled { opacity: 0.4; cursor: not-allowed; }

/* Narrower than this, "As claimed" is the first to go: the claimed name
   already sits at the top of the case page, so repeating it in every row
   costs more room than it earns back. "On record" stays, since the marked
   token it carries is the one thing unique to each row. */
@media (max-width: 60rem) {
  .regtable {
    --regcols: minmax(8rem, 1.2fr) minmax(9rem, 1.35fr) minmax(6rem, 0.85fr) minmax(6rem, 0.85fr) 1.3rem;
  }
  .c-claimed { display: none; }
}

/* Narrower still, the similarity bar goes next: the number beside it says
   the same thing, and the verdict pill already carries the colour. */
@media (max-width: 38rem) {
  .regtable {
    --regcols: minmax(7rem, 1.2fr) minmax(9rem, 1.35fr) 3.6rem minmax(5.5rem, 0.85fr) 1.2rem;
  }
  .sim-bar { display: none; }
}

.thin {
  border-left: 3px solid var(--rule);
  background: var(--paper-2);
  padding: var(--s-4) var(--s-5);
  margin-bottom: var(--s-5);
  font-size: var(--t-small);
  color: var(--muted);
  max-width: 72ch;
}
.thin b { color: var(--ink); font-weight: 600; }

/* ── the card, beside its verdicts ──────────────────────────────────── */

#view-case .page { max-width: 84rem; }

.split { display: grid; gap: var(--s-5); align-items: start; }
@media (min-width: 64rem) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(22rem, 26rem); }
  /* The card outlives the scroll: an operator reads a verdict, looks up,
     and the serial they are checking it against is still on screen. */
  .viewer { position: sticky; top: 0; }
}
/* Below that width the columns stack, and the card leads: you look at it
   first and read the verdicts against what you saw. */
@media (max-width: 63.99rem) {
  .split { grid-template-areas: "card" "checks"; }
  .checks { grid-area: checks; }
  .viewer { grid-area: card; }
}
.checks { min-width: 0; }

.viewer { border: 1px solid var(--rule); background: var(--paper-2); min-width: 0; }
.viewer-bar {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
  padding: var(--s-2);
  background: var(--ink);
}
.viewer-tabs { display: flex; gap: 1px; }
.viewer-tab {
  background: none;
  border: 1px solid var(--ink-3);
  border-radius: var(--r-control);
  color: var(--muted-ink);
  font-family: var(--mono);
  font-size: var(--t-small);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: var(--s-1) var(--s-3);
  cursor: pointer;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.viewer-tab:hover { border-color: var(--on-ink); color: var(--on-ink); }
.viewer-tab:active { background: var(--ink-3); }
.viewer-tab[aria-pressed="true"] { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.viewer-label {
  font-family: var(--mono);
  font-size: var(--t-small);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-ink);
  padding: var(--s-1) 0.2rem;
}
.gone {
  margin: 0;
  padding: 0 var(--s-5);
  text-align: center;
  align-self: center;
  font-size: var(--t-small);
  color: var(--muted-ink);
}
.viewer-stage:has(.gone) { display: grid; place-items: center; }

.viewer-tools { display: flex; gap: 1px; margin-left: auto; }
.viewer-tools[hidden] { display: none; }
.tool {
  background: none;
  border: 1px solid var(--ink-3);
  border-radius: var(--r-control);
  color: var(--muted-ink);
  font-family: var(--mono);
  font-size: var(--t-small);
  line-height: 1;
  min-width: 1.75rem;
  padding: var(--s-2) 0.4rem;
  cursor: pointer;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.tool:hover { background: var(--on-ink); border-color: var(--on-ink); color: var(--ink); }
.tool:active { background: var(--muted-ink); }
.tool:disabled { opacity: 0.35; cursor: not-allowed; }

.viewer-stage {
  position: relative;
  overflow: hidden;
  height: min(58vh, 30rem);
  /* Dark, so a washed-out phone photo of a pale card still has an edge. */
  background: var(--ink-2);
  touch-action: none;
}
.viewer-stage[data-grab="true"] { cursor: grab; }
.viewer-stage[data-dragging="true"] { cursor: grabbing; }
.viewer-stage:fullscreen { height: 100vh; background: var(--ink); }

.card { display: none; width: 100%; height: 100%; border: 0; }
.card.on { display: block; }
img.card { object-fit: contain; transform-origin: center; user-select: none; -webkit-user-drag: none; }
.viewer-foot {
  margin: 0;
  padding: var(--s-2) var(--s-3);
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: var(--t-small);
  color: var(--faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── what was picked, before it is sent ─────────────────────────────── */

.pick { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-2); min-height: 1px; }
.pick img {
  width: 4.5rem;
  height: 3rem;
  object-fit: cover;
  border: 1px solid var(--rule);
  background: var(--paper-3);
}
.pick-kind {
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 3rem;
  border: 1px solid var(--rule);
  background: var(--paper-3);
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  color: var(--faint);
}
.pick-name {
  font-family: var(--mono);
  font-size: var(--t-small);
  color: var(--faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pick-warn { margin: 0; font-size: var(--t-small); color: var(--hold); }
.pick-warn:empty { display: none; }

/* ── evidence drawer ────────────────────────────────────────────────── */

.drawer {
  position: fixed;
  top: 0; right: 0;
  height: 100vh;
  width: min(34rem, 94vw);
  background: var(--paper-3);
  border-left: 1px solid var(--rule);
  transform: translateX(101%);
  transition: transform var(--base) var(--ease);
  z-index: 50;
  display: flex;
  flex-direction: column;
}
.drawer.on { transform: none; }
.drawer-head {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-4);
  background: var(--ink);
  color: var(--paper);
}
.drawer-head-top { display: flex; align-items: center; gap: var(--s-3); }
.drawer-head h3 { margin: 0; font-family: var(--mono); font-size: var(--t-small); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; }
.drawer-head .ledger { width: 100%; }
.drawer-x {
  margin-left: auto;
  background: none;
  border: 1px solid var(--ink-3);
  color: var(--paper);
  border-radius: var(--r-control);
  width: 1.6rem;
  height: 1.6rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.drawer-x:hover { background: var(--ink-3); border-color: var(--on-ink); }
.drawer-body { overflow: auto; padding: var(--s-4); flex: 1; }
.drawer pre {
  margin: 0;
  font-family: var(--mono);
  font-size: var(--t-small);
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--ink);
}
.drawer-foot {
  margin: 0;
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--rule);
  font-size: var(--t-small);
  color: var(--faint);
}
.scrim {
  position: fixed;
  inset: 0;
  background: rgba(22, 33, 29, 0.4);
  display: none;
  z-index: 45;
}
.scrim.on { display: block; }

/* ── three breakpoints, and no more: small, the rail collapse, the split ── */

@media (max-width: 56rem) {
  .app { grid-template-columns: 1fr; height: auto; }
  .rail { flex-direction: row; align-items: center; flex-wrap: wrap; gap: var(--s-2); padding: var(--s-3) var(--s-4); }
  .brand, .rail-new { margin-bottom: 0; }
  .rail-group, .rail-foot .rail-line { display: none; }
  .rail-nav { flex-direction: row; margin-left: auto; }
  .rail-foot { margin-top: 0; padding-top: 0; border-top: 0; }
  .rail-disconnect { margin-top: 0; width: auto; padding: var(--s-2) var(--s-4); }
  .body { overflow: visible; }
  .page { padding: var(--s-5) var(--s-4) var(--s-6); }
}

@media (prefers-reduced-motion: reduce) {
  .spinner, .skel::after { animation: none; }
}