/* result.css — The result dossier, the facts grid, findings and the multi-model blocks.
   Cascade position 15 of 18. Order is load-bearing and is asserted by
   verify-fixtures.mjs; index.html links these explicitly (never @import) because Caddy's
   try_files turns a missing file into a 200 text/html SPA shell.
   Owner after Step 1: section (j). */
/* measured facts */
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border-radius: var(--sn-radius-md); overflow: hidden; }
.facts div { background: var(--panel); padding: 10px 12px; }
.facts dt { font-size: 11.5px; color: var(--dim2); }
.facts dd { margin: 3px 0 0; font-size: 15px; font-variant-numeric: tabular-nums; font-family: Gabarito, sans-serif; font-weight: 700; }

/* findings, in plain words */
.findings { display: grid; gap: var(--sn-space-2); margin-top: 12px; }
.finding { display: grid; grid-template-columns: 16px 1fr; gap: var(--sn-space-2); align-items: start; font-size: 13.5px; color: var(--dim); }
.finding i { width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 10px; margin-top: 1px; }
.finding--ok i { background: rgb(var(--sn-accent-rgb) / 0.14901960784313725); color: var(--signal); }
.finding--fix i { background: rgb(var(--sn-warn-rgb) / 0.14901960784313725); color: var(--warn); }
.finding b { color: var(--ink); font-weight: 600; }
/* The simple view's one quiet mesh line: reassurance, not an alarm (declutter item 4). */
.finding--note i { background: rgb(var(--sn-accent-rgb) / 0.14901960784313725); color: var(--signal); }

/* Result panel: measured orientation summary + expert feedback (density-first). */
/* UI Quiet: the result is part of the pane's scroll, not a card inside it — separation by
   space and one surface step, not borders (DESIGN §1.5). */
.result {
  display: none; margin: 0; padding: var(--sn-space-1) var(--sn-space-3) var(--sn-space-4);
}
.result.on { display: block; }
.result__head {
  display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px;
}
.result__head h3 { font-size: 15px; letter-spacing: -.01em; flex: 1 1 auto; min-width: 0; }
.result__source {
  flex: 0 0 auto; font-size: 11px; font-weight: 700; letter-spacing: .02em;
  padding: .2em .55em; border-radius: 999px; color: var(--signal);
  background: rgb(var(--sn-accent-rgb) / 0.09411764705882353); box-shadow: inset 0 0 0 1px rgb(var(--sn-accent-rgb) / 0.25098039215686274);
}
.result__source.is-geo { color: var(--dim); background: rgb(var(--sn-white-rgb) / 0.0392156862745098); box-shadow: inset 0 0 0 1px var(--line); }
.result__applied {
  display: none; margin-bottom: 10px; padding: 9px 11px; border-radius: var(--sn-radius-sm);
  font-size: 12.5px; line-height: 1.4; color: var(--sn-ink-soft);
  background: rgb(var(--sn-accent-rgb) / 0.0784313725490196); box-shadow: inset 0 0 0 1px rgb(var(--sn-accent-rgb) / 0.25098039215686274);
}
.result__applied.on { display: block; }
.result__applied b { color: var(--signal); font-weight: 700; }
/* ITEM 93 — PROVEN LIVE, do not delete. Every selector in the block below is created or
   populated at runtime, so a markup-only search finds nothing and reads them as dead. The
   evidence, measured on 2026-09-05 (grep over apps/web/app):
     #multiResult          index.html:436   js/result.js (renderMultiModelResult)
     .plate-picker         index.html:437   js/result.js writes #platePicker
     .plate-downloads      index.html:438   js/result.js writes #plateDownloads
     .plate-download       index.html:438   js/result.js creates the rows
     .model-results        index.html:439   js/result.js writes #modelResults
     .model-result         index.html:439   js/result.js creates the rows
     .result__multi-note   index.html:440   js/result.js writes #multiPreviewNote
   Three of the seven have no class-name hit in the JS because the JS reaches them by ID
   and the class is on the static wrapper. That asymmetry is exactly why this comment
   exists: "no JS reference to the class" does NOT mean the block is dead.
   The comment below is the original one and it records that this block was ALREADY
   fixed once, after shipping with no styles at all. */
/* The multi-model block had no styles at all and rendered as raw text. It reuses
   the panel's own tokens so a 3-model result reads like a single-model one. */
#multiResult { display: grid; gap: 8px; margin-bottom: 10px; }
.plate-picker { display: flex; flex-wrap: wrap; gap: 6px; }
.plate-picker label {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: .4em .7em; border-radius: var(--sn-radius-sm); font-size: 12.5px; font-weight: 600;
  color: var(--dim); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
}
.plate-picker label:has(input:checked) {
  color: var(--signal); background: rgb(var(--sn-accent-rgb) / 0.12549019607843137); box-shadow: inset 0 0 0 1px rgb(var(--sn-accent-rgb) / 0.3607843137254902);
}
.plate-picker input { accent-color: var(--signal); margin: 0; }
.plate-downloads, .model-results { display: grid; gap: 6px; }
/* ITEM 131 — `.plate-download` was a SECOND download control for the file the dock is
   already offering, 1,300 px away and with a different label. It is now a caption: it
   names the file and says how many models are in it, and it has no control of its own. */
.plate-caption {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sn-space-2); min-width: 0;
  margin: 0; padding: var(--sn-space-2) var(--sn-space-3); border-radius: var(--sn-radius-sm);
  background: var(--sn-surface-2); box-shadow: inset 0 0 0 1px var(--sn-line);
}
.plate-caption b { flex: 0 0 auto; font-size: var(--sn-text-xs); font-weight: 600; color: var(--sn-ink); }
.plate-caption small {
  flex: 1 1 140px; min-width: 0; font-size: var(--sn-text-2xs); line-height: 1.35; color: var(--sn-ink-mute);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.plate-caption .plate-caption__status { color: var(--sn-ink-dim); }
.plate-caption .plate-caption__reason {
  flex: 1 0 100%; white-space: normal; color: var(--sn-ink-soft);
}

.result__estimate,
.result__risks {
  margin-top: var(--sn-space-4); padding-top: var(--sn-space-4);
  border-top: 1px solid var(--sn-line);
}
.result__estimate-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; margin: 0; overflow: hidden;
  border-radius: var(--sn-radius-md); background: var(--sn-line);
}
.result__estimate-grid > div,
.result__estimate-quality {
  padding: var(--sn-space-3); background: var(--sn-surface-2);
}
.result__estimate-grid dt,
.result__estimate-quality dt {
  font-size: var(--sn-text-2xs); color: var(--sn-ink-mute);
}
.result__estimate-grid dd,
.result__estimate-quality dd {
  margin: var(--sn-space-1) 0 0; font-size: var(--sn-text-sm); font-weight: 700; color: var(--sn-ink);
}
.result__estimate-grid .is-unavailable dd,
.result__estimate-quality.is-unavailable dd { color: var(--sn-ink-mute); }
.result__estimate-note,
.result__estimate-refused {
  margin: var(--sn-space-3) 0 0; font-size: var(--sn-text-xs); line-height: var(--sn-lh-xs); color: var(--sn-ink-dim);
}
.result__estimate-refused {
  padding: var(--sn-space-3); border-radius: var(--sn-radius-sm);
  border: 1px solid var(--sn-warn-edge); background: var(--sn-warn-tint); color: var(--sn-warn-ink);
}
.result__estimate-quality { margin: var(--sn-space-3) 0 0; border-radius: var(--sn-radius-sm); }
.result__estimate-quality small {
  display: block; margin-top: var(--sn-space-1); font-size: var(--sn-text-2xs); font-weight: 400; color: var(--sn-ink-dim);
}
.result__estimate-assumptions { margin-top: var(--sn-space-3); }
.result__estimate-assumptions > summary {
  cursor: pointer; font-size: var(--sn-text-xs); font-weight: 600; color: var(--sn-ink-dim);
}
.result__estimate-assumptions ul {
  display: grid; gap: var(--sn-space-2); margin: var(--sn-space-2) 0 0; padding-left: var(--sn-space-4);
  font-size: var(--sn-text-xs); line-height: var(--sn-lh-xs); color: var(--sn-ink-mute);
}
.result__score-list { display: grid; gap: var(--sn-space-2); }
.result__score {
  padding: var(--sn-space-3); border-radius: var(--sn-radius-md);
  background: var(--sn-surface-2); box-shadow: inset 0 0 0 1px var(--sn-line-raised);
}
.result__score[data-tone="good"] { box-shadow: inset 0 0 0 1px var(--sn-accent-edge); }
.result__score[data-tone="caution"] { box-shadow: inset 0 0 0 1px var(--sn-warn-edge); }
.result__score[data-tone="poor"] { box-shadow: inset 0 0 0 1px var(--sn-bad-edge); }
.result__score-head { display: flex; align-items: start; justify-content: space-between; gap: var(--sn-space-3); }
.result__score-head > div { display: grid; gap: var(--sn-space-1); min-width: 0; }
.result__score-head b { font-size: var(--sn-text-xs); color: var(--sn-ink); }
.result__score-head span { font-size: var(--sn-text-2xs); color: var(--sn-ink-mute); }
.result__score-head strong { flex: 0 0 auto; font-size: var(--sn-text-lg); line-height: var(--sn-lh-lg); color: var(--sn-ink); }
.result__score[data-tone="good"] .result__score-head strong { color: var(--sn-ok); }
.result__score[data-tone="caution"] .result__score-head strong { color: var(--sn-warn); }
.result__score[data-tone="poor"] .result__score-head strong { color: var(--sn-bad); }
.result__score-breakdown {
  display: grid; gap: var(--sn-space-1); margin: var(--sn-space-3) 0 0; padding: 0; list-style: none;
}
.result__score-breakdown li {
  display: flex; justify-content: space-between; gap: var(--sn-space-3);
  font-size: var(--sn-text-2xs); line-height: var(--sn-lh-2xs); color: var(--sn-ink-dim);
}
.result__score-breakdown b { flex: 0 0 auto; font-weight: 650; color: var(--sn-ink); }
.result__score-refused { margin: var(--sn-space-3) 0 0; font-size: var(--sn-text-xs); color: var(--sn-warn-ink); }
.result__score-method { margin-top: var(--sn-space-3); }
.result__score-method summary { cursor: pointer; font-size: var(--sn-text-xs); font-weight: 600; color: var(--sn-ink-dim); }
.result__score-method p { margin: var(--sn-space-2) 0 0; font-size: var(--sn-text-2xs); line-height: var(--sn-lh-2xs); color: var(--sn-ink-mute); }
.result__risk-list { display: grid; gap: var(--sn-space-2); }
.result__score-list + .result__risk-list { margin-top: var(--sn-space-3); }
.result__risk {
  padding: var(--sn-space-3); border: 1px solid var(--sn-line); border-radius: var(--sn-radius-sm);
  background: var(--sn-surface-2);
}
.result__risk-head { display: flex; justify-content: space-between; gap: var(--sn-space-3); margin: 0; }
.result__risk-head b { font-size: var(--sn-text-xs); color: var(--sn-ink); }
.result__risk-head span { font-size: var(--sn-text-2xs); font-weight: 700; color: var(--sn-ink-mute); }
.result__risk[data-severity="caution"] { border-color: var(--sn-warn-edge); }
.result__risk[data-severity="caution"] .result__risk-head span { color: var(--sn-warn); }
.result__risk[data-severity="warning"] { border-color: var(--sn-bad-edge); }
.result__risk[data-severity="warning"] .result__risk-head span { color: var(--sn-bad); }
.result__risk > p:not(.result__risk-head) {
  margin: var(--sn-space-2) 0 0; font-size: var(--sn-text-xs); line-height: var(--sn-lh-xs); color: var(--sn-ink-dim);
}
.result__risk dl { display: grid; gap: var(--sn-space-2); margin: var(--sn-space-3) 0 0; }
.result__risk dl > div { display: grid; gap: var(--sn-space-1); }
.result__risk dt { font-size: var(--sn-text-2xs); font-weight: 600; color: var(--sn-ink-mute); }
.result__risk dd { margin: 0; font-size: var(--sn-text-xs); line-height: var(--sn-lh-xs); color: var(--sn-ink-dim); }
.result__settings-decision {
  display: grid; gap: var(--sn-space-2); margin-top: var(--sn-space-4); padding: var(--sn-space-3);
  border-radius: var(--sn-radius-sm); background: var(--sn-surface-2);
  box-shadow: inset 0 0 0 1px var(--sn-line-raised);
}
.result__settings-decision[data-state="success"] { box-shadow: inset 0 0 0 1px var(--sn-accent-edge); }
.result__settings-assessment,
.result__settings-priority,
.result__settings-fallback {
  margin: 0; font-size: var(--sn-text-xs); line-height: var(--sn-lh-xs); color: var(--sn-ink-dim);
}
.result__settings-priority[data-status="applied"] { color: var(--sn-ok-ink); }
.result__settings-priority[data-status="constrained"] { color: var(--sn-warn-ink); }
.result__settings-reasons { display: grid; gap: var(--sn-space-2); margin: 0; }
.result__settings-reasons > div { display: grid; gap: var(--sn-space-1); }
.result__settings-reasons dt { font-size: var(--sn-text-2xs); font-weight: 650; color: var(--sn-ink-mute); }
.result__settings-reasons dd { display: grid; gap: var(--sn-space-1); margin: 0; }
.result__settings-reasons dd b { font-size: var(--sn-text-xs); color: var(--sn-ink); }
.result__settings-reasons dd span { font-size: var(--sn-text-2xs); line-height: var(--sn-lh-2xs); color: var(--sn-ink-dim); }
.result__settings-notices {
  display: grid; gap: var(--sn-space-1); margin: 0; padding-left: var(--sn-space-4);
  font-size: var(--sn-text-2xs); line-height: var(--sn-lh-2xs); color: var(--sn-warn-ink);
}
.result__settings-fallback {
  padding: var(--sn-space-2); border-radius: var(--sn-radius-sm);
  background: var(--sn-warn-tint); color: var(--sn-warn-ink);
}
.plate-caption__download {
  flex: 0 0 auto; min-height: 32px; display: inline-flex; align-items: center;
  color: var(--signal); font-size: var(--sn-text-xs); font-weight: 600;
  text-underline-offset: 3px;
}
.plate-caption__download:hover { color: var(--sn-accent-hover); }
.model-result {
  display: flex; align-items: baseline; gap: 8px; min-width: 0;
  padding: 8px 10px; border-radius: var(--sn-radius-sm);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
}
.model-result b {
  flex: 0 1 auto; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.model-result small {
  flex: 1 1 auto; min-width: 0; font-size: 11.5px; line-height: 1.35; color: var(--dim2);
}
.result__multi-note { font-size: 12px; line-height: 1.4; color: var(--dim2); }
.result__multi-note:empty { display: none; }
/* Regression review B2: the caveat about what the bed shows. Amber at full strength
   (DESIGN §2: never dimmed with opacity), quiet in size, never behind the toggle. */
.result__multi-note.is-warn { margin: var(--sn-space-2) 0 0; color: var(--sn-warn); }
.result__pose {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: baseline;
  margin-bottom: 10px; padding: 10px 12px; border-radius: var(--sn-radius-md);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
}
.result__pose dt { font-size: 11.5px; color: var(--dim2); }
.result__pose dd { margin: 0; font-size: 14px; font-weight: 700; font-family: Gabarito, sans-serif; letter-spacing: -.01em; }
.result__pose dd.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; font-weight: 600; color: var(--dim); }

/* ══ ITEMS 109 / 111 — the dossier: one cell grammar for every fact on this panel ══════
   DESIGN-SPEC §4.13 and REFERENCE-STUDY §10: label above value, `--sn-surface-2` fill,
   `--sn-radius-md`, `--sn-space-3` padding, and the hairline as an inset ring rather than
   a border so no element ever carries both.
   NO `font-variant-numeric: tabular-nums` anywhere here: mocks/NOTES.md B4 MEASURED
   Schibsted Grotesk giving the comma and the full stop a full digit advance, so `130.6`
   renders as `130 . 6`. None of these values is a column being compared. */
.result__group { display: grid; gap: var(--sn-space-2); margin-bottom: var(--sn-space-3); }
.result__eyebrow {
  font-size: var(--sn-text-2xs); font-weight: 600; letter-spacing: .02em; color: var(--sn-ink-mute);
}
.result__cells,
.result__metrics,
.result__pose--plain { display: grid; gap: var(--sn-space-2); }
/* `.result__pose--plain` still carries `.result__pose` in the frozen markup, so the box
   that class draws is undone here: the CELLS carry the surface now, not the list. */
.result__pose--plain {
  grid-template-columns: none; padding: 0; border-radius: 0;
  background: none; box-shadow: none; margin-bottom: var(--sn-space-3);
  /* MEASURED 2026-09-06: `.result__pose` sets `align-items: baseline`, which this element
     also matches, and a baseline-aligned grid item sizes to its CONTENT. The two
     orientation cells came out 60.90 px and 99.15 px on the same row — the ragged edge
     REFERENCE-STUDY §10 says a row of tiles must never have. Stretch puts them level. */
  align-items: stretch;
}
.result__metrics { margin-bottom: var(--sn-space-3); }
.result__cell,
.result__pose--plain > div {
  display: grid; gap: var(--sn-space-1); min-width: 0;
  padding: var(--sn-space-3); border-radius: var(--sn-radius-md);
  background: var(--sn-surface-2); box-shadow: inset 0 0 0 1px var(--sn-line);
}
.result__cell dt,
.result__pose--plain dt {
  font-size: var(--sn-text-2xs); font-weight: 600; letter-spacing: .02em; color: var(--sn-ink-mute);
}
.result__cell dd,
.result__pose--plain dd {
  margin: 0; font-family: var(--sn-font-display); font-weight: 700;
  font-size: var(--sn-text-md); line-height: 1.3; letter-spacing: -.01em;
  color: var(--sn-ink); overflow-wrap: anywhere;
}
.result__cell dd small,
.result__pose--plain dd small {
  display: block; margin-top: 2px; font-family: inherit; font-weight: 400;
  font-size: var(--sn-text-xs); line-height: 1.45; letter-spacing: normal; color: var(--sn-ink-mute);
}
.result__cell.is-warn dd { color: var(--warn); }
/* The engine's own label and the raw vectors still exist, one tier down, for
   the expert who has to reconcile our answer with a slicer. */
.result__pose--expert { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sn-space-1) var(--sn-space-3); padding: 8px 12px; margin-bottom: 10px; }
.result__pose--expert dt { font-size: var(--sn-text-2xs); }
.result__pose--expert dd.mono { font-size: 11px; overflow-wrap: anywhere; }
.result__preview {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sn-space-1) var(--sn-space-2);
  font-size: 12.5px; line-height: 1.4; color: var(--dim); margin-bottom: 10px;
}
.result__preview-dot {
  flex: 0 0 auto; width: 9px; height: 9px; border-radius: 2px; background: var(--signal);
  align-self: center;
}
.result__preview span:not(.result__preview-dot) { flex: 1 1 150px; min-width: 0; }
.link-btn {
  flex: 0 0 auto; background: none; border: 0; padding: 0; color: var(--signal);
  font-size: 12.5px; font-weight: 700; text-decoration: underline; cursor: pointer;
}
.link-btn:hover { filter: brightness(1.15); }
.result__reason { font-size: 13.5px; color: var(--sn-ink-soft-2); line-height: 1.4; margin-bottom: 10px; }
.result__settings { margin-bottom: 10px; }

/* ══ ITEM 67 — the verdict, in the palette that means it worked ════════════════════════
   The box itself is `.notice-c` from the frozen css/notices.css, whose geometry (flex,
   gap, padding, radius, 1 px border) is IDENTICAL across `.is-ok`, `.is-warn` and
   `.is-bad`; only the colours change. That is REFERENCE-STUDY §11 applied to a notice and
   it is why this file adds no box of its own — only the body's two lines. */
.result__verdict { margin-bottom: var(--sn-space-3); }
.result__verdict-body { display: grid; gap: var(--sn-space-1); min-width: 0; }
.result__verdict-detail { font-size: var(--sn-text-xs); line-height: 1.45; }

/* ══ ITEM 109 — "Technical detail": one closed disclosure, the browser's own ═══════════ */
.techdetail {
  margin-bottom: var(--sn-space-3); border-radius: var(--sn-radius-sm);
  background: var(--sn-surface-2); box-shadow: inset 0 0 0 1px var(--sn-line);
}
.techdetail > summary {
  display: flex; align-items: center; gap: var(--sn-space-2);
  min-height: 36px; padding: 0 var(--sn-space-3); list-style: none; cursor: pointer;
  font-size: var(--sn-text-xs); font-weight: 600; color: var(--sn-ink);
  border-radius: var(--sn-radius-sm);
}
.techdetail > summary::-webkit-details-marker { display: none; }
.techdetail > summary::before {
  content: ""; flex: 0 0 auto; width: 0; height: 0;
  border: 4px solid transparent; border-left-color: var(--sn-ink-mute);
  transition: transform var(--sn-dur-fast) var(--sn-ease-out);
}
.techdetail[open] > summary::before { transform: rotate(90deg) translateX(-1px); }
.techdetail > summary:hover { background: var(--sn-surface-2-alt); }
.techdetail > .result__pose,
.techdetail > .result__kv { margin: 0 var(--sn-space-3) var(--sn-space-3); }
.result__kv { display: grid; gap: var(--sn-space-1); }
.result__kv > div { display: flex; gap: var(--sn-space-3); justify-content: space-between; }
.result__kv dt { font-size: var(--sn-text-xs); color: var(--sn-ink-mute); }
.result__kv dd { margin: 0; font-size: var(--sn-text-xs); color: var(--sn-ink-dim); text-align: right; overflow-wrap: anywhere; }

.result__filament {
  display: grid; gap: var(--sn-space-2); margin: var(--sn-space-3) 0;
  padding: var(--sn-space-3); border: 1px solid var(--sn-line);
  border-radius: var(--sn-radius-md); background: var(--sn-surface-1);
}
.result__filament .result__head { margin: 0; }
.result__filament-identity {
  margin: 0; font-family: var(--sn-font-mono); font-size: var(--sn-text-2xs);
  line-height: var(--sn-lh-xs); color: var(--sn-ink-mute); overflow-wrap: anywhere;
}
.result__filament-rows { display: grid; gap: var(--sn-space-2); }
.result__filament-row {
  padding: var(--sn-space-2); border: 1px solid var(--sn-line);
  border-radius: var(--sn-radius-sm); background: var(--sn-surface-2);
}
.result__filament-row h4 {
  margin: 0 0 var(--sn-space-2); font-size: var(--sn-text-xs); color: var(--sn-ink);
}
.result__filament-notices {
  display: grid; gap: var(--sn-space-1); margin: 0; padding-left: var(--sn-space-4);
  font-size: var(--sn-text-xs); line-height: var(--sn-lh-xs); color: var(--sn-warn-ink);
}
.result__filament-notices b { color: var(--sn-warn); text-transform: capitalize; }

/* ══ ITEM 70 — the route back after a reload, above step 1 ════════════════════════════ */
.recent {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--sn-space-2);
  margin: var(--sn-space-3) var(--sn-space-4) 0;
  padding: var(--sn-space-3); border-radius: var(--sn-radius-md);
  background: var(--sn-surface-2); box-shadow: inset 0 0 0 1px var(--sn-line);
}
.recent > b { flex: 0 0 100%; font-size: var(--sn-text-xs); font-weight: 700; color: var(--sn-ink); }
.recent__meta { flex: 0 0 100%; font-size: var(--sn-text-2xs); line-height: 1.45; color: var(--sn-ink-mute); }
.recent__download,
.recent__dismiss {
  min-height: 32px; display: inline-flex; align-items: center; margin-top: var(--sn-space-1);
  padding: 0 var(--sn-space-3); border: 0; border-radius: var(--sn-radius-sm);
  font: inherit; font-size: var(--sn-text-xs); font-weight: 600; text-decoration: none; cursor: pointer;
  transition: background var(--sn-dur-fast) var(--sn-ease-out);
}
.recent__download {
  color: var(--signal); background: var(--sn-accent-tint); box-shadow: inset 0 0 0 1px var(--sn-accent-edge);
}
.recent__download:hover { background: var(--sn-accent-tint-hi); }
.recent__dismiss { color: var(--sn-ink-dim); background: none; box-shadow: inset 0 0 0 1px var(--sn-line); }
.recent__dismiss:hover { background: var(--sn-surface-2-alt); }
.recent__status.is-warn { color: var(--sn-warn); }
.result__review {
  display: none; margin-bottom: 10px; padding: 9px 11px; border-radius: var(--sn-radius-sm);
  font-size: 12.5px; line-height: 1.4; color: var(--sn-warn-ink);
  background: rgb(var(--sn-warn-rgb) / 0.10196078431372549); box-shadow: inset 0 0 0 1px rgb(var(--sn-warn-rgb) / 0.25098039215686274);
}
.result__review.on { display: block; }
.result__review b { color: var(--warn); }
/* Informational, not a fault: same block, no amber alarm. */
.result__review.is-neutral {
  color: var(--dim); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
}
.result__review.is-neutral b { color: var(--ink); }
/* A real slicer sliced this file. The one claim in the product that is proof. */
.result__review.is-good {
  color: var(--sn-ok-ink); background: rgb(var(--sn-accent-rgb) / 0.10196078431372549); box-shadow: inset 0 0 0 1px rgb(var(--sn-accent-rgb) / 0.25098039215686274);
}
.result__review.is-good b { color: var(--signal); }
/* A real slicer refused it. Louder than a caveat, because it is not one. */
.result__review.is-refused {
  color: var(--sn-bad-ink); background: rgb(var(--sn-bad-legacy-rgb) / 0.10196078431372549); box-shadow: inset 0 0 0 1px rgb(var(--sn-bad-legacy-rgb) / 0.25098039215686274);
}
.result__review.is-refused b { color: var(--sn-bad-title); }
.slicer-quote { display: inline; font-style: italic; }
.result__actions {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 2px;
}
/* ══ ITEM 115 — navigation looks like navigation ═══════════════════════════════════════
   MEASURED before the change: `#resultTrace` was an `<a>` wearing the same 12.5 px label,
   the same `#16161a` fill and the same 1 px ring as the two BUTTONS beside it, with no
   underline, no external glyph and nothing saying it opens a new tab. It is now the only
   underlined thing in the row and it carries the glyph, so it reads as a link from across
   the screen without reading the words. */
.result__actions .result__link {
  display: inline-flex; align-items: center; gap: 6px; margin-right: auto;
  min-height: 32px; padding: 0; border: 0;
  background: none; box-shadow: none; color: var(--signal);
  font-size: var(--sn-text-xs); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
}
.result__actions .result__link:hover { background: none; box-shadow: none; color: var(--sn-accent-hover); }
.result__actions .result__link svg { flex: 0 0 auto; }
/* ══ ITEM 114 — the chosen verdict says so, and the other one stays live ═══════════════ */
.result__actions .is-recorded { color: var(--signal); background: var(--sn-accent-tint); box-shadow: inset 0 0 0 1px var(--sn-accent-edge); }
.result__actions .is-recorded:hover:not(:disabled) { background: var(--sn-accent-tint-hi); }
.result__actions button svg { flex: 0 0 auto; margin-right: 5px; vertical-align: -2px; }
.result__actions a,
.result__actions button {
  border: 0; border-radius: var(--sn-radius-sm); font: inherit; font-size: 12.5px; font-weight: 600;
  padding: .55em .85em; text-decoration: none; color: var(--ink);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
  /* REFERENCE-STUDY §18: at most two non-linear easings in the whole sheet, and ours are
     --sn-ease-out / --sn-ease-in-out. The literal `ease` here was a third. */
  transition: background var(--sn-dur-fast) var(--sn-ease-out), box-shadow var(--sn-dur-fast) var(--sn-ease-out), color var(--sn-dur-fast) var(--sn-ease-out);
}
.result__actions a:hover,
.result__actions button:hover:not(:disabled) {
  background: rgb(var(--sn-white-rgb) / 0.06274509803921569); box-shadow: inset 0 0 0 1px var(--line-strong);
}
.result__actions a:focus-visible,
.result__actions button:focus-visible {
  outline: 2px solid var(--signal); outline-offset: 2px;
}
.result__actions .btn-ok {
  background: rgb(var(--sn-accent-rgb) / 0.12549019607843137); color: var(--signal); box-shadow: inset 0 0 0 1px rgb(var(--sn-accent-rgb) / 0.3607843137254902);
}
.result__actions .btn-ok:hover:not(:disabled) { background: rgb(var(--sn-accent-rgb) / 0.18823529411764706); }
.result__actions .btn-change {
  background: rgb(var(--sn-warn-rgb) / 0.09411764705882353); color: var(--warn); box-shadow: inset 0 0 0 1px rgb(var(--sn-warn-rgb) / 0.30196078431372547);
}
.result__actions .btn-change:hover:not(:disabled) { background: rgb(var(--sn-warn-rgb) / 0.1568627450980392); }
.result__actions button:disabled,
.result__actions a[aria-disabled="true"] {
  opacity: .4; cursor: not-allowed; pointer-events: none;
}

/* mocks/NOTES.md B9 — the two-up breakpoint is 1024, NOT 1280. MEASURED in the mock: at
   1280 the finished rail came to 2.14 x clientHeight at 1024x768, over DESIGN-SPEC §3.5's
   "< 2x" target; two-up from 1024 with `minmax(180px, 1fr)` fits a 420 px rail
   (2 x 180 + 8 = 368 <= 388 of content width) and brings 1024 to 1.71x. */
@media (min-width: 1024px) {
  .result__cells,
  .result__metrics,
  .result__pose--plain { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
}

@media (max-width: 940px) {
  .result__cells,
  .result__metrics,
  .result__pose--plain { grid-template-columns: 1fr; }
  .result__actions { flex-direction: column; align-items: stretch; }
  .result__actions a, .result__actions button { text-align: center; }
  .result__actions .result__link { justify-content: center; margin-right: 0; }
  .result__estimate-grid { grid-template-columns: 1fr; }
}

/* ══ UI Quiet — the simple result (DESIGN §4.4, §5.6, §5.10) ════════════════════════════
   Verdict (or the amber notice that replaces it) · three figures · proof line · three
   checks · the print-outcome disclosure · Details (tester view only) · Prepare another.
   Tokens only; the figure sizes are the three DESIGN §2 names (34 / 30 / 28 px). */

/* The verdict. Green line when it is ready; the same element becomes the amber notice. */
.result__verdict.is-ok {
  gap: var(--sn-space-2); padding: 0; border: 0; background: none;
  margin: var(--sn-space-2) 0 var(--sn-space-5); color: var(--sn-ink);
}
.result__verdict.is-ok .notice-c__icon { color: var(--sn-ok); margin-top: 2px; }
.result__verdict.is-ok .notice-c__title { color: var(--sn-ink); font-size: var(--sn-text-md); line-height: var(--sn-lh-md); font-weight: 600; }
.result__verdict.is-ok .result__verdict-detail { color: var(--sn-ink-dim); }
.result__verdict.is-warn { margin: var(--sn-space-2) 0 var(--sn-space-2); }
.result__verdict.is-warn .notice-c__title { font-size: var(--sn-text-sm); }
/* When an amber note below already carries the explanation, the verdict is its headline:
   the same line as the green verdict, in amber, and the box is the note's. A slicer's
   PASS or a neutral note is not that explanation (and the simple view hides both), so
   it does not take the verdict's box away (a warning-level risk, review B1, has no note). */
.result__verdict.is-warn:has(+ .result__notes .result__review.on:not(.is-good):not(.is-neutral):not(.is-restated)) {
  gap: var(--sn-space-2); padding: 0; border: 0; background: none; margin-bottom: var(--sn-space-3);
}
.result__verdict.is-warn:has(+ .result__notes .result__review.on:not(.is-good):not(.is-neutral):not(.is-restated)) .notice-c__icon { margin-top: 2px; }
.result__verdict.is-warn:has(+ .result__notes .result__review.on:not(.is-good):not(.is-neutral):not(.is-restated)) .notice-c__title {
  color: var(--sn-ink); font-size: var(--sn-text-md); line-height: var(--sn-lh-md); font-weight: 600;
}
/* The simple view says the verdict; the pose sentence behind it is tester detail. */
html:not([data-detail="full"]) .result__verdict.is-ok .result__verdict-detail { display: none; }

/* The caveats under an amber verdict are amber too, and are never behind the toggle.
   A slicer refusal was drawn in the "bad" palette; in the Quiet result every caveat that
   replaces the verdict is amber (owner's placement decision, 23 Sep). */
.result__notes { display: grid; gap: var(--sn-space-2); }
.result__notes .result__review { margin: 0; border-radius: var(--sn-radius-md); padding: var(--sn-space-3); }
.result__notes .result__review.is-refused {
  color: var(--sn-warn-ink); background: var(--sn-warn-tint); box-shadow: inset 0 0 0 1px var(--sn-warn-edge);
}
.result__notes .result__review.is-refused b { color: var(--sn-warn); }
.result__notes:has(.result__review.on) { margin-bottom: var(--sn-space-5); }
/* A slicer's PASS and a neutral review note are proof and commentary, not caveats: the
   figures' source line already says "Sliced by …". Tester view shows both in full. */
html:not([data-detail="full"]) .result__notes .result__review.is-good,
html:not([data-detail="full"]) .result__notes .result__review.is-neutral { display: none; }
/* Declutter (one statement per fact): a note whose whole content the amber verdict already
   says ("not test-sliced", "prepared anyway") is the tester's. js/result.js marks it. */
html:not([data-detail="full"]) .result__notes .result__review.is-restated { display: none; }
html:not([data-detail="full"]) .result__notes:not(:has(.result__review.on.is-refused:not(.is-restated), .result__review.on:not(.is-good):not(.is-neutral):not(.is-restated))) { margin-bottom: 0; }

/* The figures: Gabarito 800, the only tabular figures in the app (DESIGN §2 Type). */
.result__figs {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sn-space-5) var(--sn-space-4); margin: 0 0 var(--sn-space-3);
}
/* Final polish: under the boxed amber verdict (8 px bottom margin) the print time sat 8 px
   from the box, a third of the gap the green verdict leaves. The top margin collapses with
   the green verdict's larger one, so only the amber case moves. */
.result__figs { margin-top: var(--sn-space-4); }
.result__fig { display: grid; gap: var(--sn-space-1); min-width: 0; }
.result__fig--wide { grid-column: 1 / -1; }
.result__fig b {
  font-family: var(--sn-font-display); font-weight: 800; font-size: 34px; line-height: 1;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--sn-ink);
}
.result__fig span { font-size: var(--sn-text-xs); color: var(--sn-ink-mute); }
.result__figs-source { margin: 0 0 var(--sn-space-2); font-size: var(--sn-text-2xs); line-height: var(--sn-lh-2xs); color: var(--sn-ink-mute); }
.result__figs-source.is-refused { font-size: var(--sn-text-xs); color: var(--sn-ink-dim); margin-bottom: var(--sn-space-4); }
.result__proof { margin: 0 0 var(--sn-space-5); font-size: var(--sn-text-xs); color: var(--sn-ink-dim); }

/* Three short checks. */
.result__checks { list-style: none; margin: 0 0 var(--sn-space-5); padding: 0; display: grid; gap: var(--sn-space-4); }
.result__check { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; column-gap: var(--sn-space-3); align-items: start; }
.result__check-icon { color: var(--sn-ink-dim); padding-top: 2px; }
.result__check[data-tone="warn"] .result__check-icon { color: var(--sn-warn); }
.result__check-copy { display: grid; gap: 2px; min-width: 0; }
.result__check-copy b { font-size: var(--sn-text-sm); line-height: var(--sn-lh-sm); font-weight: 500; color: var(--sn-ink); }
.result__check-copy span { font-size: var(--sn-text-xs); line-height: var(--sn-lh-xs); color: var(--sn-ink-dim); }
.result__check-toggle {
  align-self: center; min-height: 32px; padding: 0 var(--sn-space-2);
  color: var(--sn-ink-dim); font-size: var(--sn-text-xs); font-weight: 500; text-decoration: none;
}
.result__check-toggle:hover { color: var(--sn-ink); filter: none; }

/* Disclosure rows (DESIGN §5.6): the print outcome, and the testers' Details. */
.disclosure {
  display: flex; align-items: center; gap: var(--sn-space-3); width: 100%;
  min-height: 44px; padding: var(--sn-space-2) var(--sn-space-2) var(--sn-space-2) var(--sn-space-3);
  border: 0; border-radius: var(--sn-radius-md); background: var(--sn-surface-2);
  color: var(--sn-ink-soft); font: inherit; font-size: var(--sn-text-sm); text-align: left; cursor: pointer;
  transition: background-color var(--sn-dur-fast) var(--sn-ease-out);
}
.disclosure:hover { background: var(--sn-surface-3); }
.disclosure__icon { flex: 0 0 16px; width: 16px; height: 16px; color: var(--sn-ink-dim); }
.disclosure__label { flex: 1 1 auto; min-width: 0; }
.disclosure__chev { flex: 0 0 14px; width: 14px; height: 14px; color: var(--sn-ink-dim); transition: rotate var(--sn-dur-base) var(--sn-ease-out); }
.disclosure[aria-expanded="true"] .disclosure__chev { rotate: 90deg; }
.disclosure--quiet { min-height: 36px; background: none; font-size: var(--sn-text-xs); color: var(--sn-ink-dim); padding-left: var(--sn-space-2); }
.disclosure--quiet:hover { background: var(--sn-surface-2); }
.disclosure--quiet .disclosure__label { flex: 0 0 auto; }
.disclosure--quiet .disclosure__chev { margin-left: auto; }
.disclosure__pill {
  padding: 2px var(--sn-space-2); border-radius: var(--sn-radius-sm);
  background: var(--sn-surface-2); color: var(--sn-ink-dim); font-size: var(--sn-text-2xs);
}
/* The panel opens with grid rows 0fr -> 1fr and is `inert` while closed (DESIGN §6). */
.disclosure__panel {
  display: grid; grid-template-rows: 0fr; opacity: 0;
  transition: grid-template-rows var(--sn-dur-slow) var(--sn-ease-out), opacity var(--sn-dur-base) var(--sn-ease-out);
}
.disclosure__inner { min-height: 0; overflow: hidden; }
.is-open > .disclosure__panel { grid-template-rows: 1fr; opacity: 1; }
.result__outcome { margin: 0 0 var(--sn-space-4); }
.result__outcome .disclosure__inner { padding: 0 var(--sn-space-3); }
.result__outcome.is-open .disclosure__inner { padding-top: var(--sn-space-3); }
.result__outcome .print-outcome { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
.result__details { margin: 0 0 var(--sn-space-3); }
.result__details-body { padding: 0 var(--sn-space-2); }
.result__details.is-open .result__details-body { padding-top: var(--sn-space-3); }
.result__details-body > .result__head h3 { font-size: var(--sn-text-sm); }

/* "+ Prepare another file". */
.result__again {
  display: inline-flex; align-items: center; gap: var(--sn-space-2); min-height: 36px;
  padding: 0 var(--sn-space-2); border: 0; border-radius: var(--sn-radius-sm);
  background: none; color: var(--sn-ink-dim); font: inherit; font-size: var(--sn-text-sm); cursor: pointer;
}
.result__again svg { width: 14px; height: 14px; }
.result__again:hover { color: var(--sn-ink); background: var(--sn-surface-2); }

/* The run's own notice, in the simple view on the result: the verdict above already says
   what #notice's success headline says, so it is not SHOWN twice. It is hidden visually
   only (the .sr-only construction, css/base.css), never display:none: #notice is the
   polite live region js/progress.js writes the outcome into, and a region taken out of the
   accessibility tree a microtask after it was written may never be announced (review
   minor 4). Its content is text, nothing focusable.
   The generation feedback form and the run log are testing surfaces: `data-testing`
   (css/layout.css §5) alone decides them, not the detail toggle (regression review M2). */
html:not([data-detail="full"])[data-route="result"] #paneBody:has(> #resultPanel:not([hidden])) > #notice {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
/* The tester row ("Looks right" / "Needs change" / "View full analysis") and its form. */
.result__tester { margin-bottom: var(--sn-space-3); }
html:not([data-testing]) .result__tester { display: none; }

@media (max-width: 1500px) { .result__fig b { font-size: 30px; } }
@media (max-height: 940px) {
  .result__verdict.is-ok { margin-bottom: var(--sn-space-4); }
  .result__figs { gap: var(--sn-space-4); margin-bottom: var(--sn-space-3); }
  .result__fig b { font-size: 28px; }
  .result__checks { gap: 10px; margin-bottom: var(--sn-space-4); }
  .result__outcome { margin-bottom: var(--sn-space-3); }
}
/* A multi-model result's verdict line says how the models were split into files. */
#resultPanel:has(> #multiResult:not([hidden])) .result__verdict.is-ok .result__verdict-detail { display: block; }

/* ══ Declutter (24 Sep): the simple result says each fact once ══════════════════════════ */
/* The pose line: what we did with the model, in one sentence (DESIGN §4.4 caption). */
.result__pose-line { margin: 0 0 var(--sn-space-4); font-size: var(--sn-text-sm); line-height: var(--sn-lh-sm); color: var(--sn-ink-soft); }
/* "Prepared in 23 s · 5 steps" is engine timing: the tester view keeps the run list. */
html:not([data-detail="full"])[data-route="result"] :is(#prepRunToggle, #prepStages) { display: none; }
/* "Showing 1,200 of 26,951 affected faces." is mesh-sampling detail. */
html:not([data-detail="full"]) .support-preview-legend small { display: none; }
/* The slicer tip (57-60 words on every result) folds to its title in the simple view;
   "Show how" opens the steps. The tester view reads it in full, as before. */
#loadNoticeHow { display: none; }
html:not([data-detail="full"]) #loadNoticeHow { display: inline-block; margin-right: var(--sn-space-3); }
html:not([data-detail="full"]) #loadNotice:not(.is-open) #loadNoticeBody { display: none; }
/* The expired result's way on (STAGE-AUDIT S4). */
.result__expired-again { display: inline-block; margin-top: var(--sn-space-2); font-size: var(--sn-text-xs); }