/* ==========================================================================
   AoD operator surface — reference stylesheet
   Copy-and-adapt annex material (doctrine 04). Change the accent block on
   :root; change nothing else in the tokens. Delete unused components.
   No build step, no external assets, no JavaScript required.
   ========================================================================== */

/* --- tokens --------------------------------------------------------------- */

:root {
  /* accent — THE ONE LINE A PRODUCT CHANGES (indigo = invoice-dispatch) */
  --accent:       #3f4fb8;
  --accent-ink:   #2c3a92;
  --accent-wash:  #eef0fb;

  /* neutrals */
  --bg:           #f5f6f8;
  --surface:      #ffffff;
  --surface-2:    #fafbfc;
  --line:         #e3e6ea;
  --line-strong:  #cfd4da;
  --ink:          #171a1f;
  --ink-2:        #4a5159;
  --ink-3:        #767e88;

  /* semantic — information only, never decoration */
  --ok-bg:      #e8f5ec;  --ok-line:    #b7ddc3;  --ok-ink:    #1d6b39;
  --warn-bg:    #fdf3e2;  --warn-line:  #eed8a8;  --warn-ink:  #8a5d0c;
  --bad-bg:     #fdecec;  --bad-line:   #f2c3c3;  --bad-ink:   #a32626;
  --mute-bg:    #f0f1f3;  --mute-line:  #e3e6ea;  --mute-ink:  #767e88;
  /* violet is reserved, in every product, for "a model touched this" */
  --agent-bg:   #f2eefc;  --agent-line: #d9cdf3;  --agent-ink: #5b3fa8;

  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
          "Liberation Mono", monospace;

  --r-sm: 6px;
  --r-md: 10px;
  --shadow: 0 1px 2px rgba(16, 20, 28, .05);
}

/* --- base ----------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 15px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
/* A link inside a sheet must LOOK clickable. The global `text-decoration:none`
   above is right for nav and buttons and WRONG here: in a dense table of mono
   text, colour alone is not an affordance — sitting beside mono invoice
   numbers that are NOT links, an indigo filename reads as data. Build 003
   shipped 82 working PDF links that the operator could not find. Keep the
   underline quiet (hairline, offset) and let hover promote it to the accent. */
table.sheet a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--line-strong);
}
table.sheet a:hover { text-decoration-color: var(--accent); }

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.01em; }

p { margin: 0 0 12px; }
p:last-child { margin-bottom: 0; }

code, .mono, .id {
  font-family: var(--mono);
  font-size: .92em;
  font-variant-numeric: tabular-nums;
}

.num, td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

/* --- app bar -------------------------------------------------------------- */

.appbar {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.appbar-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

.brand-mark {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -.01em;
}
.brand-mark a { color: inherit; }
.brand-mark a:hover { text-decoration: none; }

.brand-sub {
  font-size: 13px;
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.appbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* --- primary nav ---------------------------------------------------------- */

.nav {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.nav-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  gap: 4px;
  overflow-x: auto;
}

.nav a {
  display: block;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.nav a:hover { color: var(--ink); text-decoration: none; }
.nav a.is-active { color: var(--accent-ink); border-bottom-color: var(--accent); }

/* --- demonstration banner (honest framing, designed in, never dismissed) --- */

.banner {
  background: var(--warn-bg);
  border-bottom: 1px solid var(--warn-line);
  color: var(--warn-ink);
}

.banner-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 9px 24px;
  font-size: 13px;
  line-height: 1.45;
  display: flex;
  gap: 8px;
  align-items: baseline;
}

.banner strong { font-weight: 600; }

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

.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 24px 24px 64px;
}

.page-head {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 20px;
}

.page-head h1 { font-size: 21px; line-height: 1.25; }

.page-head .sub {
  margin-top: 4px;
  font-size: 13px;
  color: var(--ink-3);
}

.page-head-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }

.section { margin-bottom: 24px; }
.section:last-child { margin-bottom: 0; }

.section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  letter-spacing: .01em;
  margin-bottom: 10px;
}

.grid { display: grid; gap: 16px; }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* --- cards ---------------------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
}

.card-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
}

.card-head h2 { font-size: 15px; }

.card-head .caption {
  font-size: 12px;
  color: var(--ink-3);
}

.card-head-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.card-body { padding: 20px; }
.card-body > :first-child { margin-top: 0; }

.card-foot {
  padding: 12px 20px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
  border-radius: 0 0 var(--r-md) var(--r-md);
  font-size: 13px;
  color: var(--ink-2);
}

/* --- stat tiles ----------------------------------------------------------- */

.stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
  padding: 14px 16px;
}

.stat-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.stat-value {
  margin-top: 6px;
  font-size: 27px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

.stat-note { margin-top: 4px; font-size: 12px; color: var(--ink-3); }

.stat-ok   .stat-value { color: var(--ok-ink); }
.stat-warn .stat-value { color: var(--warn-ink); }

/* --- the sheet (tables) --------------------------------------------------- */

.sheet-wrap { overflow-x: auto; }

table.sheet {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.35;
}

table.sheet thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  padding: 9px 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: left;
  white-space: nowrap;
}

table.sheet thead th.num { text-align: right; }
table.sheet thead th.mid { text-align: center; }

table.sheet tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
  vertical-align: top;
}

table.sheet tbody td.mid { text-align: center; }
table.sheet tbody td strong { color: var(--ink); font-weight: 600; }
table.sheet tbody tr:last-child td { border-bottom: 0; }
table.sheet tbody tr:hover td { background: var(--surface-2); }

/* pad the outer edges to the card, not the cell */
table.sheet th:first-child, table.sheet td:first-child { padding-left: 20px; }
table.sheet th:last-child,  table.sheet td:last-child  { padding-right: 20px; }

/* long values truncate rather than wrap the row to three lines */
.truncate {
  display: block;
  max-width: 34ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.truncate-wide { max-width: 52ch; }
.truncate-xs { max-width: 10ch; }
.truncate-sm { max-width: 16ch; }

/* The deliberate exception to "long values truncate": a cell that carries the
   REASON a system did or refused to do something is the cell a client would
   photograph, and ellipsing it ("multiple DISTINCT invoices for the sam…")
   throws away the argument. Two lines, never three, full text in title=. */
.clamp-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.truncate-md { max-width: 20ch; }

/* enough room for INV-YYYY-NNNN.pdf on the second line, so the common case
   reads whole; the two filenames that differ from their invoice number are
   longer than any column should be and ellipse with the value in title= */
.cell-file { max-width: 17ch; }

/* money sheets close with totals */
table.sheet tfoot td {
  padding: 11px 12px;
  border-top: 2px solid var(--line-strong);
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
table.sheet tfoot td:first-child { padding-left: 20px; }
table.sheet tfoot td:last-child  { padding-right: 20px; }

.row-muted td { color: var(--ink-3); }

/* --- chips ---------------------------------------------------------------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--mute-line);
  background: var(--mute-bg);
  color: var(--mute-ink);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.6;
  white-space: nowrap;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}

.chip-ok    { background: var(--ok-bg);    border-color: var(--ok-line);    color: var(--ok-ink); }
.chip-warn  { background: var(--warn-bg);  border-color: var(--warn-line);  color: var(--warn-ink); }
.chip-bad   { background: var(--bad-bg);   border-color: var(--bad-line);   color: var(--bad-ink); }
.chip-mute  { background: var(--mute-bg);  border-color: var(--mute-line);  color: var(--mute-ink); }
.chip-agent { background: var(--agent-bg); border-color: var(--agent-line); color: var(--agent-ink); }

/* provenance chips carry a leading dot so they read as a family */
.chip-prov::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: .8;
}


/* --- buttons -------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  font: 500 14px/1.2 var(--font);
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { background: var(--surface-2); text-decoration: none; }

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn-primary:hover { background: var(--accent-ink); border-color: var(--accent-ink); }

.btn-danger { color: var(--bad-ink); border-color: var(--bad-line); }
.btn-danger:hover { background: var(--bad-bg); }

.btn-sm { padding: 5px 10px; font-size: 13px; }

.btn[disabled] {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}

/* --- forms ---------------------------------------------------------------- */

.field { display: flex; flex-direction: column; gap: 5px; }

.field label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.field select, .field input[type="text"], .field textarea {
  padding: 8px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font: 400 14px/1.3 var(--font);
}

.field .hint { font-size: 12px; color: var(--ink-3); }

.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-end;
}

/* --- metadata block (run summaries) --------------------------------------- */

.meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px 24px;
}

.meta dt {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.meta dd {
  margin: 4px 0 0;
  font-size: 15px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* --- step timeline -------------------------------------------------------- */

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

.steps li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 11px 20px;
  border-bottom: 1px solid var(--line);
}
.steps li:last-child { border-bottom: 0; }

.step-name { font-weight: 500; color: var(--ink); }
.step-meta { margin-left: auto; font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* --- agent call ledger ---------------------------------------------------- */

.agent-call {
  border: 1px solid var(--agent-line);
  border-left: 3px solid var(--agent-ink);
  border-radius: var(--r-sm);
  background: var(--agent-bg);
  padding: 12px 14px;
  margin-bottom: 12px;
}
.agent-call:last-child { margin-bottom: 0; }

.agent-call-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--agent-ink);
}

.agent-call-meta {
  margin-left: auto;
  font-size: 12px;
  font-weight: 400;
  color: var(--agent-ink);
  opacity: .85;
  font-variant-numeric: tabular-nums;
}

.agent-call-body { font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.agent-call-body .answer { color: var(--ink); font-weight: 500; }

/* --- exception queue ------------------------------------------------------ */

.exc {
  border: 1px solid var(--line);
  border-left: 3px solid var(--warn-line);
  border-radius: var(--r-sm);
  background: var(--surface);
  padding: 14px 16px;
  margin-bottom: 12px;
}
.exc:last-child { margin-bottom: 0; }
.exc-open   { border-left-color: var(--warn-ink); }
.exc-closed { border-left-color: var(--line-strong); opacity: .72; }

.exc-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.exc-head .who { font-weight: 600; font-size: 14px; color: var(--ink); }
.exc-head-right { margin-left: auto; display: flex; gap: 8px; align-items: center; }

.exc-msg { font-size: 14px; color: var(--ink-2); line-height: 1.5; }

.exc-evidence {
  margin-top: 8px;
  padding: 8px 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-2);
  white-space: pre-wrap;
  word-break: break-word;
}

/* --- empty states --------------------------------------------------------- */

.empty {
  padding: 48px 24px;
  text-align: center;
}

.empty-title { font-size: 15px; color: var(--ink-2); }
.empty-note { margin-top: 6px; font-size: 13px; color: var(--ink-3); }
.empty-action { margin-top: 16px; }

/* --- notices -------------------------------------------------------------- */

.notice {
  padding: 11px 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
  font-size: 14px;
  color: var(--ink-2);
  margin-bottom: 16px;
}
.notice-warn { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn-ink); }
.notice-bad  { background: var(--bad-bg);  border-color: var(--bad-line);  color: var(--bad-ink); }

/* --- footer --------------------------------------------------------------- */

.foot {
  max-width: 1180px;
  margin: 0 auto;
  padding: 24px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--ink-3);
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* --- utilities (kept deliberately few) ------------------------------------ */

.muted { color: var(--ink-3); }
.nowrap { white-space: nowrap; }
.stack > * + * { margin-top: 12px; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.right { margin-left: auto; }

/* ==========================================================================
   Product additions — invoice-dispatch
   Everything above this line is the shared reference stylesheet, re-accented
   indigo and otherwise untouched. Everything below is a component this
   product needed and the reference did not have. A second product needing
   any of these promotes it back into the reference (doctrine 05).
   ========================================================================== */

/* A wider shell than the reference's 1180px. This product's audit sheets are
   eight columns of real data (client, status, via, invoice, amount, pdf,
   recipient, reason); at 1180px they either overflow the card or wrap rows to
   three lines, which the pattern forbids outright. Widening the shell alone
   would make the prose blocks unreadably long, so prose gets a measure cap
   below. Overrides the reference rather than editing it — the block above
   stays byte-identical to patterns/reference/visual/style.css. */
.appbar-inner, .nav-inner, .banner-inner, .wrap, .foot { max-width: 1360px; }

/* measure control: text a human reads in sentences never exceeds ~78
   characters, however wide the shell gets. Sheets are exempt — they are read
   by column, not by line. */
.hint, .exc-msg, .agent-call-body { max-width: 78ch; }
.empty-title, .empty-note { max-width: 78ch; margin-inline: auto; }
.page-head .sub { max-width: 96ch; }
/* for text inside a block whose BACKGROUND must still span the full width
   (.card-foot) — cap the line, not the band */
.measure { display: block; max-width: 92ch; }

/* status chips render the stored token (succeeded, would_send, match) and are
   uppercased HERE, not in the template — see _macros.html. Only the status
   family: uppercasing "82 rows" or a filename would be shouting. */
.chip-status { text-transform: uppercase; }

/* the deterministic half of the Via column: the stored token, at chip size,
   with no chip around it — see the via_chip macro for why it has no fill */
.via-quiet {
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: .02em;
  white-space: nowrap;
}

/* open-exception count carried on the nav link itself */
.nav-count {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--warn-bg);
  border: 1px solid var(--warn-line);
  color: var(--warn-ink);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* one-line consequence note under an action row ("dry-run writes nothing") */
.hint { font-size: 12px; color: var(--ink-3); }
.hint-strong { color: var(--ink-2); }

/* second line inside a table cell: the untrusted filename's claim, under the
   value the system actually trusted */
.cell-note {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.cell-note b { font-weight: 600; color: var(--ink-2); }

/* several flag chips in one cell */
.chips { display: flex; gap: 4px; flex-wrap: wrap; }

/* a sheet nested inside a card body (exception evidence) rather than filling
   the card — its outer cells pad like cells, not like the card edge */
table.sheet-inline th:first-child, table.sheet-inline td:first-child { padding-left: 10px; }
table.sheet-inline th:last-child,  table.sheet-inline td:last-child  { padding-right: 10px; }
table.sheet-inline { font-size: 13px; }
.exc-sheet {
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
}

/* the resolve / re-attempt row at the foot of an exception card */
.exc-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.exc-actions form { display: flex; gap: 8px; align-items: center; }
.exc-actions input[type="text"] {
  min-width: 320px;
  padding: 6px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font: 400 13px/1.3 var(--font);
}

/* --- the message view ------------------------------------------------------
   One sent email, rendered as an email. The operator's question is "what
   landed in my client's inbox?", so the page answers in the shape they are
   picturing: subject, header rows, body, attachment. It is a reading surface,
   not a sheet — hence the wider leading and the capped measure. */

.mail { padding: 20px; }

.mail-subject {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -.01em;
  max-width: 78ch;
  margin-bottom: 14px;
}

.mail-head {
  margin: 0 0 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.mail-row { display: flex; gap: 12px; align-items: baseline; padding: 3px 0; }

.mail-row dt {
  flex: none;
  width: 56px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.mail-row dd { margin: 0; min-width: 0; font-size: 14px; color: var(--ink); }

.mail-addr { font-variant-numeric: tabular-nums; }

/* the clamp, said out loud, under the address it clamped */
.mail-note {
  display: block;
  margin-top: 3px;
  max-width: 78ch;
  font-size: 12px;
  color: var(--warn-ink);
}

.mail-note-inline { font-size: 13px; color: var(--ink-2); max-width: 78ch; }

/* the body is the message's own text: its line breaks are the sender's, so
   they are preserved, and the font is the page's rather than the monospace an
   .eml would suggest — a client reads prose, not a payload */
.mail-body {
  margin: 0;
  font: 400 14px/1.65 var(--font);
  color: var(--ink);
  white-space: pre-wrap;
  word-break: break-word;
  max-width: 78ch;
}

.mail-attach {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.mail-attach-bare { margin-top: 0; padding-top: 0; border-top: 0; }

.mail-attach-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* the attachment chip: a real affordance, sized like a file and not like a
   status pill — this is the one thing on the page a viewer will click */
.attach {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  padding: 8px 14px 8px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--ink);
}
a.attach:hover { background: var(--accent-wash); border-color: var(--accent); text-decoration: none; }

.attach-kind {
  flex: none;
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--bad-bg);
  border: 1px solid var(--bad-line);
  color: var(--bad-ink);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
}

.attach-name {
  font-family: var(--mono);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
a.attach .attach-name { text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
a.attach:hover .attach-name { text-decoration-color: var(--accent); }

.attach-size { flex: none; font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.attach-gone { opacity: .7; }
.attach-gone .attach-kind { background: var(--mute-bg); border-color: var(--mute-line); color: var(--mute-ink); }

/* a hash or a message id has to be readable, and it is longer than any column */
.breakable { word-break: break-all; }

/* step timeline: the audited detail sentence sits between name and timing */
.step-detail {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  color: var(--ink-3);
}
.steps li .chip { flex: none; }

/* --- narrow screens: one collapse, no breakpoint system ------------------- */

@media (max-width: 860px) {
  .grid-4 { grid-template-columns: minmax(0, 1fr); }
  .page-head { flex-direction: column; align-items: flex-start; }
  .page-head-actions { margin-left: 0; }
  .wrap, .appbar-inner, .nav-inner, .banner-inner, .foot { padding-left: 16px; padding-right: 16px; }
  table.sheet th:first-child, table.sheet td:first-child { padding-left: 16px; }
  table.sheet th:last-child,  table.sheet td:last-child  { padding-right: 16px; }
}

/* --- print ---------------------------------------------------------------- */

@media print {
  body { background: #fff; }
  .nav, .page-head-actions, .btn { display: none; }
  .card, .stat { box-shadow: none; break-inside: avoid; }
}