/* PayChain receipt verification.

   This stylesheet is served to anyone, so it says nothing about what a
   credential unlocks here.
   Design system inherited from apps/landing/styles.css: Modern Treasury
   restraint. White base, hairline borders, editorial type, mono labels, light
   only. Tokens, type stack, radius and component shapes are copied from there
   rather than invented, so the console does not read as a different product.

   The landing pages load DM Sans from a font CDN. This surface does not: its
   CSP is `default-src 'none'`, and widening it to admit an external origin for
   a typeface would trade the tightest boundary in the service for decoration.
   The same stack is declared and the system fallback carries it, which is the
   fallback the landing pages already ship for anyone without the webfont. */

:root {
  /* ink */
  --ink: #0f172a;
  --ink-2: #334155;
  --muted: #64748b;
  --faint: #94a3b8;
  /* accent — interactive only */
  --accent: #2563eb;
  --accent-ink: #1e40af;
  --accent-soft: #eff4ff;
  --accent-line: #d3e0fb;
  /* surfaces */
  --bg: #ffffff;
  --bg-alt: #f8fafc;
  --navy: #0f172a;
  --text-on-dark: #e2e8f0;
  /* hairline system */
  --line: #e5e9f0;
  --line-strong: #cbd5e1;
  --line-on-dark: rgba(255, 255, 255, 0.12);

  /* status — the ledger needs three outcomes the marketing pages never show.
     Kept in the same slate/blue family so they read as one product. */
  --ok: #15803d;
  --ok-soft: #f0fdf4;
  --ok-line: #bbf7d0;
  --warn: #b45309;
  --warn-soft: #fffbeb;
  --warn-line: #fde68a;
  --bad: #b91c1c;
  --bad-soft: #fef2f2;
  --bad-line: #fecaca;

  --font: 'DM Sans', 'SUIT Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, 'Cascadia Mono', Consolas, 'Liberation Mono', monospace;

  --fs-body: 0.9375rem;
  --fs-small: 0.875rem;
  --fs-mono: 0.8125rem;
  --radius: 10px;
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

/*
 * An author `display` rule outranks the user-agent `[hidden] { display: none }`
 * rule, so anything the script hides would stay on screen. The script sets
 * `hidden` and trusts it; make that trust true.
 */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  background: var(--bg-alt);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

.mono {
  font-family: var(--mono);
  font-size: var(--fs-mono);
}

/* ---------------- public face ---------------- */

/*
 * The gate is the whole page now, so it sits in the middle of the viewport
 * rather than at the top of a document that has nothing under it.
 *
 * `min-height: 100vh` on the wrap and not on `body`: `#app-root` is a sibling,
 * and a body-level centering context would keep pushing the console's own
 * layout around after the gate hides.
 */
.wrap {
  max-width: 26rem;
  margin: 0 auto;
  padding: 2rem 1.25rem;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

/*
 * `display: flex` above outranks the user-agent rule that `hidden` relies on,
 * so without this the public face would stay on screen underneath the console
 * after a successful handoff. The attribute selector, not `display: revert`:
 * revert would also throw away the author `display` this file sets elsewhere.
 */
.wrap[hidden] { display: none; }

/* The input row stays a row; only the surrounding text is centred. */
.wrap .row { text-align: left; }

/*
 * The wordmark is type, not an image.
 *
 * `img-src 'none'` is not a limitation to work around here: a logo file would
 * be one more unauthenticated request from a page whose whole job is to take
 * a credential. Letter-spaced small caps carry the same signal at no cost.
 */
.head .mark {
  margin: 0 0 0.75rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.head h1 {
  margin: 0 0 0.4rem;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.025em;
}

.head p {
  margin: 0 0 2rem;
  color: var(--muted);
  font-size: var(--fs-small);
}

/* The purpose line sits under the title; the footer owns the bottom margin. */
.head p { margin-bottom: 1.75rem; }

/* The footer carries the one thing a reader without a key needs: a way to
   find out how to get one. */
.foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.foot a {
  font-size: var(--fs-small);
  color: var(--muted);
}

.foot a:hover { color: var(--accent-ink); }

.row { display: flex; gap: 0.5rem; }
.row input { flex: 1; min-width: 0; font-family: var(--mono); }
.row button { flex: none; }

.note:empty { display: none; }
.note.ok { padding: 0.7rem 0.85rem; border: 1px solid var(--ok-line); border-radius: var(--radius); background: var(--ok-soft); color: var(--ok); }
.note.bad { padding: 0.7rem 0.85rem; border: 1px solid var(--bad-line); border-radius: var(--radius); background: var(--bad-soft); color: var(--bad); }

form {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

label {
  font-size: var(--fs-mono);
  color: var(--muted);
}

input,
select,
button {
  font: inherit;
  font-size: var(--fs-small);
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--ink);
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

input::placeholder {
  color: var(--faint);
}

input:focus-visible,
select:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

input:focus,
select:focus {
  outline: none;
  border-color: var(--accent);
}

button {
  cursor: pointer;
  font-weight: 500;
}

button:hover:not(:disabled) {
  border-color: var(--ink);
}

input:disabled,
button:disabled,
select:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

#gate-form button {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}

#gate-form button:hover:not(:disabled) {
  background: var(--accent-ink);
  border-color: var(--accent-ink);
}

#gate-message:not(:empty) {
  margin-top: 1.1rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--bad-line);
  border-radius: var(--radius);
  background: var(--bad-soft);
  color: var(--bad);
  font-size: var(--fs-small);
}

/* ---------------- shell ---------------- */

.shell {
  display: grid;
  /* topbar, status, body. Naming fewer rows than children hands the 1fr to the
     wrong element and pushes content off screen. */
  grid-template-rows: auto auto 1fr;
  min-height: 100vh;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.75rem;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

.topbar h1 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.topbar .spacer { flex: 1; }

/* mirrors .status-pill on the marketing pages */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0.3rem 0.8rem;
  font-family: var(--mono);
  font-size: var(--fs-mono);
  color: var(--ink-2);
}

.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--muted);
  flex: none;
}

.dot.ok { background: #22c55e; }
.dot.warn { background: #f59e0b; }
.dot.bad { background: #ef4444; }

#app-status:empty { display: none; }

#app-status {
  padding: 0.7rem 1.75rem;
  background: var(--bad-soft);
  border-bottom: 1px solid var(--bad-line);
  color: var(--bad);
  font-size: var(--fs-small);
}

.body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 27rem;
  min-height: 0;
}

@media (max-width: 1180px) {
  .body { grid-template-columns: minmax(0, 1fr); }
  .detail { border-left: none; border-top: 1px solid var(--line); }
}

.main {
  min-width: 0;
  padding: 1.5rem 1.75rem 4rem;
}

/* ---------------- stat cards (mirrors .summary-strip__item) ---------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.75rem;
}

.stat {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  background: var(--bg);
}

.stat .k {
  font-family: var(--font);
  font-size: var(--fs-mono);
  letter-spacing: 0.01em;
  color: var(--muted);
}

.stat .v {
  display: block;
  margin-top: 0.3rem;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.stat .v.ok { color: var(--ok); }
.stat .v.warn { color: var(--warn); }
.stat .v.bad { color: var(--bad); }

/* ---------------- tabs + filters ---------------- */

.tabs {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--line);
}

.tab {
  padding: 0.5rem 0.9rem;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: none;
  color: var(--muted);
  font-size: var(--fs-small);
  font-weight: 500;
}

.tab:hover { border-color: transparent; color: var(--ink); }

.tab[aria-selected='true'] {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.7rem;
  margin-bottom: 1.1rem;
}

.filters .field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.filters input,
.filters select { min-width: 11rem; }

/* ---------------- table (mirrors .table-wrap) ---------------- */

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
}

table {
  width: 100%;
  border-collapse: collapse;
}

thead th {
  text-align: left;
  font-family: var(--font);
  font-size: var(--fs-mono);
  font-weight: 500;
  color: var(--muted);
  padding: 0.65rem 0.95rem;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

tbody td {
  padding: 0.7rem 0.95rem;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 20rem;
  font-size: var(--fs-small);
  color: var(--ink-2);
}

tbody tr:last-child td { border-bottom: none; }
tbody tr { cursor: pointer; transition: background 0.12s; }
tbody tr:hover td { background: var(--bg-alt); }

/* The selected row is marked by its background alone. A left rule was tried
   and read as a defect: it lands on a single cell edge and looks like a
   rendering artefact rather than a selection. */
tbody tr[aria-selected='true'] td { background: var(--accent-soft); }

td .sub {
  display: block;
  margin-top: 0.1rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--faint);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.6875rem;
  border: 1px solid var(--line-strong);
  color: var(--ink-2);
  background: var(--bg);
  white-space: nowrap;
}

.badge.ok { color: var(--ok); border-color: var(--ok-line); background: var(--ok-soft); }
.badge.warn { color: var(--warn); border-color: var(--warn-line); background: var(--warn-soft); }
.badge.bad { color: var(--bad); border-color: var(--bad-line); background: var(--bad-soft); }

.pager {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  color: var(--muted);
  font-size: var(--fs-small);
}

.pager button { padding: 0.35rem 0.8rem; }

.empty {
  padding: 3.5rem 1rem;
  text-align: center;
  color: var(--faint);
  font-size: var(--fs-small);
}

/* ---------------- stage tracker ---------------- */

.stage-head {
  padding: 1rem 1.1rem 0.35rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  margin-bottom: 1.5rem;
}

.stage-head .headline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.1rem;
  flex-wrap: wrap;
}

.stage-head .headline strong {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.stages {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.stages li {
  position: relative;
  padding-top: 1.55rem;
  text-align: center;
  min-width: 0;
}

.stages li::before {
  content: '';
  position: absolute;
  top: 6px;
  left: -50%;
  width: 100%;
  height: 2px;
  background: var(--line-strong);
}

.stages li:first-child::before { display: none; }
.stages li.done::before,
.stages li.now::before { background: var(--ok); }
.stages li.fail::before { background: var(--bad); }

.stages li::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--line-strong);
  background: var(--bg);
}

.stages li.done::after { border-color: var(--ok); background: var(--ok); }
.stages li.now::after { border-color: var(--warn); background: var(--bg); box-shadow: 0 0 0 4px var(--warn-soft); }
.stages li.fail::after { border-color: var(--bad); background: var(--bad); }

.stages .name {
  display: block;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--ink-2);
}

.stages li.done .name { color: var(--ink); }
.stages li.now .name { color: var(--warn); }
.stages li.fail .name { color: var(--bad); }
.stages li.wait .name { color: var(--faint); }

.stages .note {
  display: block;
  margin-top: 0.1rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--faint);
  overflow: hidden;
  text-overflow: ellipsis;
}

.stage-verdict {
  margin: 0 0 0.9rem;
  font-size: var(--fs-small);
  color: var(--ink-2);
}

.stage-verdict.bad { color: var(--bad); }
.stage-verdict.warn { color: var(--warn); }
.stage-verdict.ok { color: var(--ok); }

/* ---------------- detail ---------------- */

.detail {
  border-left: 1px solid var(--line);
  background: var(--bg-alt);
  padding: 1.5rem 1.5rem 4rem;
  min-width: 0;
  overflow-wrap: anywhere;
}

.detail > h2 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.detail h3 {
  margin: 1.75rem 0 0.6rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}

.kv {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 0.45rem 0.8rem;
  margin: 0;
}

.kv dt { color: var(--muted); font-size: var(--fs-small); }
.kv dd { margin: 0; font-size: var(--fs-small); color: var(--ink); }

.steps { list-style: none; margin: 0; padding: 0; }

.steps li {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr);
  gap: 0.6rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--line);
}

.steps li:last-child { border-bottom: none; }
.steps .n { color: var(--faint); font-family: var(--mono); font-size: var(--fs-mono); font-variant-numeric: tabular-nums; }
.steps .who { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; font-size: var(--fs-small); color: var(--ink); }
.steps .meta { margin-top: 0.15rem; font-family: var(--mono); font-size: 0.6875rem; color: var(--faint); }

.diff { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.5rem; }

.diff pre {
  margin: 0;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  font-family: var(--mono);
  font-size: 0.6875rem;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--ink-2);
}

.diff .before { border-left: 2px solid var(--bad); }
.diff .after { border-left: 2px solid var(--ok); }

.actions { display: flex; gap: 0.5rem; margin-top: 1.75rem; }

.actions button {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}

.actions button:hover:not(:disabled) {
  background: var(--accent-ink);
  border-color: var(--accent-ink);
}

.actions button:disabled {
  background: var(--bg);
  border-color: var(--line-strong);
  color: var(--faint);
}

.note { margin: 0.7rem 0 0; color: var(--muted); font-size: var(--fs-mono); }
.note.bad { color: var(--bad); }

/* ---------------- auditor face ----------------
 *
 * Scoped under `.aud` so none of it can reach the operator console, which has
 * its own density and its own reader. Class names here are structural on
 * purpose: this stylesheet is served unauthenticated, so naming a record field
 * in a selector would publish the shape of a projection that sits behind a key.
 */

.aud .topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.aud .brand h1 { margin: 0; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.02em; }
.aud .brand .scope { margin: 0.2rem 0 0; color: var(--muted); font-size: 0.75rem; }

.aud .badges { display: flex; align-items: center; gap: 0.4rem; }

.aud .badge {
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--muted);
  white-space: nowrap;
}
.aud .badge.ok { border-color: var(--ok-line); background: var(--ok-soft); color: var(--ok); }
.aud .badge.warn { border-color: var(--warn-line); background: var(--warn-soft); color: var(--warn); }

/*
 * The status row, as ONE grid child. See the payload for why: `.shell` names
 * exactly three rows, so a second top-level status element would take the 1fr
 * meant for the body.
 */
.aud .band { padding: 0.75rem 1.75rem 0; }
.aud .band:empty { display: none; }
.aud .band .status { margin: 0; font-size: 0.8125rem; color: var(--ink-2); }
.aud .band .status:empty { display: none; }
.aud .band .note { margin: 0.35rem 0 0; font-size: 0.75rem; color: var(--warn); }

/*
 * Two panes that scroll independently, which requires a BOUNDED height.
 *
 * `.shell` is `min-height: 100vh`, so its 1fr body row grows with its content
 * and `overflow-y: auto` on a child never has anything to overflow - the
 * declaration reads as if it works and does nothing. The compound `.aud.shell`
 * pins the height instead, and only for this face: the operator console keeps
 * the global rule.
 *
 * The verdict has to stay put while the list is scanned, which is the whole
 * reason the panes are separate.
 */
.aud.shell { height: 100vh; min-height: 0; }
/* The detail pane tracks the viewport rather than sitting at a fixed 30rem.
   The list is six short columns and stops needing width early, while the
   record is where every long hash, sentence and before/after pair lands, so
   on a wide screen the spare pixels belong to the record. */
.aud .body { display: grid; grid-template-columns: minmax(0, 1fr) clamp(24rem, 40%, 48rem); min-height: 0; }
.aud .main { padding: 1.25rem 1.75rem; min-width: 0; overflow-y: auto; }
.aud .detail { padding: 1.25rem 1.75rem 2.5rem; border-left: 1px solid var(--line); background: var(--bg-alt); overflow-y: auto; }

.aud .filter { align-items: center; margin-bottom: 0.75rem; }
.aud .filter label { flex: none; font-size: var(--fs-mono); color: var(--muted); }

/* ---- finding controls ---- */

/*
 * The date, verdict and reset controls sit on one wrapping row under the
 * search field. They wrap rather than scroll, because a filter a reader
 * cannot see is a filter they forget is applied.
 */
.aud .find {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}

.aud .find-field { display: flex; flex-direction: column; gap: 0.2rem; }
.aud .find-field label { font-size: var(--fs-mono); color: var(--muted); }
.aud .find-field input { width: 8.5rem; font-family: var(--mono); }
.aud .find-field select { min-width: 8.5rem; }
.aud .find .reset { align-self: flex-end; color: var(--muted); }
.aud .find .reset:hover { color: var(--ink); }

.aud .find-note { margin: 0 0 0.6rem; font-size: 0.75rem; color: var(--warn); }

/*
 * "Showing 25 of 400" is load-bearing rather than decorative: it is what
 * stops one page being read as the whole answer, so it sits directly above
 * the table instead of below it where a reader meets it only after scrolling.
 */
.aud .summary {
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.aud .summary:empty { display: none; }

/* A sortable heading is a real button so a keyboard can reach it. */
.aud .list th .sort {
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  font: inherit;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
}

.aud .list th .sort:hover { color: var(--ink); }
.aud .list th[aria-sort='ascending'] .sort,
.aud .list th[aria-sort='descending'] .sort { color: var(--ink); }

/* Figures line up down the page; that alignment is the only reason a column
   of amounts can be compared at a glance. */
.aud .list td.figure { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.aud .list th:nth-child(3) { text-align: right; }

.aud .paging {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  font-size: 0.75rem;
  color: var(--muted);
}

.aud .paging button { padding: 0.25rem 0.7rem; font-size: 0.75rem; }
.aud .paging .page { font-variant-numeric: tabular-nums; }

/* ---- list ---- */

.aud .list { width: 100%; border-collapse: collapse; }
.aud .list th {
  padding: 0.5rem 0.65rem;
  border-bottom: 1px solid var(--line-strong);
  text-align: left;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}
.aud .list td { padding: 0.7rem 0.65rem; border-bottom: 1px solid var(--line); font-size: 0.8125rem; vertical-align: middle; }
.aud .list tbody tr { cursor: pointer; }
.aud .list tbody tr:hover { background: var(--bg-alt); }
/*
 * The open record is marked by a tint, not by a rule or a ring.
 *
 * A 2px accent outline around the row was what a click used to draw. It reads
 * as an error state on a screen whose only other strong colour is a verdict,
 * and it is a line the eye keeps returning to while the reader is trying to
 * read the panel beside it. The tint says the same thing quietly and stays
 * put while the list is scrolled.
 */
.aud .list tbody tr[aria-selected='true'],
.aud .list tbody tr[aria-selected='true']:hover { background: var(--accent-soft); }
/* The keyboard ring stays: a reader tabbing through rows has nothing else to
   go on. It is neutral rather than accent so a mouse reader who never sees it
   is not the only one served by the colour choice. */
.aud .list tbody tr:focus-visible { outline: 2px solid var(--ink-2); outline-offset: -2px; }
.aud .list td.strong { font-weight: 600; color: var(--ink); }

/* One glance, not one read: the outcome column is a shape before it is a word. */
.aud .chip {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.6875rem;
  white-space: nowrap;
}
.aud .chip.ok { border-color: var(--ok-line); background: var(--ok-soft); color: var(--ok); }
.aud .chip.wait { border-color: var(--warn-line); background: var(--warn-soft); color: var(--warn); }
.aud .chip.bad { border-color: var(--bad-line); background: var(--bad-soft); color: var(--bad); }

/* ---- detail ---- */
/* ---- evidence certificate ---- */
.aud .aud-cert { margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line-strong); }
.aud .aud-cert-facts { display: grid; grid-template-columns: minmax(7rem, 10rem) 1fr; gap: 0.25rem 0.75rem; margin: 0; }
.aud .aud-cert-facts dt { color: var(--muted); font-size: 0.75rem; }
.aud .aud-cert-facts dd { margin: 0; font-size: 0.8125rem; font-weight: 600; overflow-wrap: anywhere; }
.aud .aud-cert-disclosure { margin: 0.85rem 0 0; padding: 0.65rem 0.75rem; border-left: 3px solid var(--line-strong); background: var(--bg); font-size: 0.75rem; line-height: 1.5; color: var(--ink-2); }
/* Printed-only notes: hidden on screen, where the sections they refer to are
   visible a few centimetres further down. */
.aud .print-only { display: none; }
/*
 * The copy affordance sits beside the value it copies, small and quiet. It is
 * an aid for carrying a hash somewhere else, not a primary action, so it must
 * not compete with the value itself for attention.
 */
.aud .copy {
  margin-left: 0.4rem;
  padding: 0.05rem 0.35rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  font-size: 0.625rem;
  line-height: 1.4;
  cursor: pointer;
  vertical-align: middle;
}

.aud .copy:hover { border-color: var(--ink); color: var(--ink); }
.aud .copy:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* The outbound-link notice: stated next to the link, not after the click. */
.aud .link-note { display: block; margin-top: 0.2rem; font-size: 0.6875rem; line-height: 1.45; color: var(--faint); }
.aud .aud-print { margin-top: 0.85rem; }
.aud .aud-export { align-self: flex-end; }



/*
 * The verdict is the only thing on this panel allowed to be loud. It answers
 * the question the reader arrived with, so it precedes every field and is
 * sized to be read before them rather than among them.
 */
.aud .verdict {
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: var(--radius);
  background: var(--bg-alt);
}
.aud .verdict.ok { border-color: var(--ok-line); border-left-color: var(--ok); background: var(--ok-soft); }
.aud .verdict.wait { border-color: var(--warn-line); border-left-color: var(--warn); background: var(--warn-soft); }
.aud .verdict.bad { border-color: var(--bad-line); border-left-color: var(--bad); background: var(--bad-soft); }
.aud .verdict-title { margin: 0; font-size: 0.9375rem; font-weight: 600; color: var(--ink); }
.aud .verdict-body { margin: 0.35rem 0 0; font-size: 0.8125rem; line-height: 1.55; color: var(--ink-2); }
.aud .verdict-code { margin: 0.55rem 0 0; font-size: 0.6875rem; color: var(--muted); }

.aud .block { margin-top: 1.75rem; }
.aud .block h2 { margin: 0; font-size: 0.8125rem; font-weight: 600; color: var(--ink); }
.aud .block-note { margin: 0.2rem 0 0.85rem; font-size: 0.75rem; line-height: 1.5; color: var(--muted); }

/* ---- flow ----
 *
 * Deliberately not `.stages` and not `.steps`. The operator console already
 * owns both: `.stages` is a horizontal `grid-auto-flow: column` tracker with
 * its own ::before/::after dots, and `.steps` is its approval list. Reusing
 * either name inherited that layout wholesale - five columns of
 * one-character-per-line text with stray markers - and overriding `display`
 * would have hidden the collision rather than removed it, leaving the
 * pseudo-elements still painting.
 *
 * Same reason `.kv.delta` is not `.kv.diff`: `.diff` is the operator's
 * two-column grid. Classes that carry a LAYOUT contract are not shared. Ones
 * that carry only a look - `.chip`, `.badge`, `.kv`, `.mono` - are, on
 * purpose, so both faces read as one product.
 */

.aud .flow { margin: 0; padding: 0; list-style: none; }
.aud .step {
  display: grid;
  grid-template-columns: 5.5rem 1fr auto;
  gap: 0.75rem;
  align-items: baseline;
  padding: 0.5rem 0 0.5rem 0.9rem;
  border-left: 2px solid var(--line);
  position: relative;
}
.aud .step::before {
  content: '';
  position: absolute;
  left: -0.3rem;
  top: 0.85rem;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--line-strong);
}
.aud .step.done { border-left-color: var(--ok-line); }
.aud .step.done::before { background: var(--ok); }
.aud .step.pending { border-left-color: var(--line-strong); }
.aud .step.pending::before { background: var(--muted); }
.aud .step.reverted { border-left-color: var(--bad-line); }
.aud .step.reverted::before { background: var(--bad); }
.aud .step-name { font-size: 0.8125rem; font-weight: 600; color: var(--ink); }
.aud .step-note { font-size: 0.75rem; color: var(--muted); }
.aud .step-state { font-size: 0.6875rem; color: var(--muted); white-space: nowrap; }
.aud .step.done .step-state { color: var(--ok); }
.aud .step.reverted .step-state { color: var(--bad); }
.aud .step.unknown .step-name { color: var(--muted); font-weight: 500; }

/* ---- field lists ---- */

.aud .kv { display: grid; grid-template-columns: minmax(9rem, 14rem) 1fr; gap: 0.15rem 1rem; margin: 0; }
.aud .kv dt { padding: 0.5rem 0; }
.aud .kv dd { margin: 0; padding: 0.5rem 0; font-size: 0.8125rem; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.aud .kv dt .label { display: block; font-size: 0.8125rem; color: var(--ink-2); }
/*
 * The explanation lives with the field. A glossary elsewhere is a glossary
 * nobody opens, and these terms are ours - the reader never agreed to learn
 * what a root or a reorg is in order to read their own settlement.
 */
.aud .kv dt .hint { display: block; margin-top: 0.15rem; font-size: 0.6875rem; line-height: 1.45; color: var(--faint); }

.aud .kv.delta dd { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; font-family: var(--mono); font-size: var(--fs-mono); }
.aud .kv.delta .from { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line-strong); }
.aud .kv.delta .arrow { color: var(--faint); }
.aud .kv.delta .to { color: var(--ink); font-weight: 600; }

/*
 * Evidence folds. Both ends stay visible because those are what a reader
 * compares against a public chain lookup, and the whole value is one click away
 * with no network call behind it.
 */
.aud .reveal {
  padding: 0.15rem 0.4rem;
  border: 1px dashed var(--line-strong);
  border-radius: 4px;
  background: transparent;
  font-family: var(--mono);
  font-size: var(--fs-mono);
  color: var(--ink-2);
  text-align: left;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.aud .reveal:hover { border-color: var(--accent); color: var(--accent-ink); }
.aud .reveal[aria-expanded='true'] { border-style: solid; }

/* ---- empty state ---- */

.aud .orient { padding: 1.25rem 1.35rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-alt); }
.aud .orient h2 { margin: 0 0 0.5rem; font-size: 0.9375rem; font-weight: 600; }
.aud .orient > p { margin: 0 0 1.1rem; font-size: 0.8125rem; line-height: 1.6; color: var(--ink-2); }
.aud .orient-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.7rem; }
.aud .orient-list li { display: grid; grid-template-columns: 5.5rem 1fr; gap: 0.75rem; align-items: baseline; }
.aud .orient-list strong { font-size: 0.75rem; font-weight: 600; color: var(--ink); }
.aud .orient-list span { font-size: 0.75rem; line-height: 1.5; color: var(--muted); }

/*
 * The printed certificate.
 *
 * WHAT is printed is decided in script, not here: the payload bounds the
 * composition and says on the page when it has left something out. This block
 * only removes the interactive chrome around it.
 *
 * `max-height` with `overflow: hidden` used to sit on the change block to
 * force one page. That silently truncated evidence, which is worse than a
 * second page: a reader cannot tell a short change from a clipped one, and an
 * auditor would quote the visible part as the whole change. Bounding is now
 * explicit and counted, so anything omitted is named in words.
 */
@media print {
  .aud.shell { height: auto; }
  .aud .topbar, .aud .band, .aud .main, .aud .orient, .aud .aud-print { display: none; }
  .aud .body { display: block; }
  .aud .detail { padding: 0; border: 0; overflow: visible; background: var(--bg); }
  .aud .reveal { display: inline; border: 0; padding: 0; color: var(--ink); text-decoration: none; }

  /*
   * Explanatory prose is a reading aid, not evidence.
   *
   * Field hints, block notes and stage descriptions exist so a first-time
   * reader can interpret the screen. On paper they triple the length of the
   * document without adding a single fact an auditor can check, and a
   * three-page certificate is not a certificate. The facts, the verdict, the
   * stages and the on-chain values all stay.
   */
  /*
   * The certificate is not the whole detail panel.
   *
   * The approved print contract enumerates exactly what the printed page
   * carries: the certificate facts, the non-disclosure line, the verdict with
   * its raw code, the five stages with their states, and the on-chain
   * evidence. The change delta, the handling group and the covered range are
   * screen sections; printing them was the implementation exceeding its own
   * contract, and it is what made the certificate three pages long.
   *
   * They are named on the page rather than dropped in silence, so a reader
   * holding the paper knows what the screen has that this does not.
   */
  .aud .aud-change,
  .aud .block-who,
  .aud .block-what { display: none; }

  /*
   * Explanatory prose is a reading aid, not evidence. Field hints, block
   * notes and stage descriptions exist so a first-time reader can interpret
   * the screen; on paper they add length without adding a fact an auditor
   * can check.
   */
  .aud .kv dt .hint,
  .aud .block-note,
  .aud .step-note { display: none; }

  /* Named on paper, not hidden from it. */
  .aud .print-only { display: block; }

  /*
   * Paper typography: denser than the screen, because vertical space is
   * finite and scrolling is not an option. The certificate is read as a
   * document, not scanned as an interface, so it can carry smaller type than
   * the screen without becoming harder to check.
   */
  .aud .detail { font-size: 9pt; line-height: 1.3; }
  .aud .block { margin-top: 0.5rem; }
  .aud .block h2 { font-size: 9.5pt; }
  /*
   * Field lists run two pairs to a line on paper.
   *
   * The screen puts one label/value pair per row because a narrow panel has
   * no horizontal room to spare. A printed page does, and the alternative to
   * using it is dropping sections of evidence to fit - which is the silent
   * omission this whole surface exists to avoid. Four columns means two pairs
   * per line and roughly half the height, with nothing removed.
   *
   * The proof group is exempt: its values are 66-character hashes that need
   * the full width to stay checkable against an outside source.
   */
  .aud .kv { grid-template-columns: minmax(5rem, 7rem) 1fr minmax(5rem, 7rem) 1fr; gap: 0 0.6rem; }
  .aud .block-proof .kv { grid-template-columns: minmax(6rem, 9rem) 1fr; }
  .aud .kv dt, .aud .kv dd { padding: 0.05rem 0; }
  .aud .kv dt .label { font-size: 8.5pt; }
  .aud .kv dd { overflow-wrap: anywhere; }
  .aud .flow .step { padding: 0.05rem 0 0.05rem 0.7rem; grid-template-columns: 5rem 1fr auto; }
  .aud .step-name, .aud .step-state { font-size: 8.5pt; }
  .aud .verdict { padding: 0.4rem 0.5rem; }
  .aud .verdict-title { font-size: 10pt; }
  .aud .verdict-body { margin-top: 0.1rem; font-size: 8.5pt; }
  .aud .aud-cert { margin-bottom: 0.5rem; }
  .aud .aud-cert, .aud .verdict, .aud .block { break-inside: avoid; }
}
@media (max-width: 60rem) {
  .aud .body { display: block; }
  .aud .detail { padding: 1.5rem 0 2rem; }
  .aud .kv { grid-template-columns: 1fr; gap: 0 0; }
  .aud .kv dd { padding-top: 0; }
}