/* ADE Product Alpha. Calm light frame with Linear-like navigation and Stripe-like evidence rows.
   No green anywhere: nothing in this UI may read as purchase clearance. Neutral, blue (process), amber (caution), red (flags). */
:root {
  --bg: #f4f4f2; --panel: #ffffff; --ink: #1b1c1f; --ink-2: #41444b; --ink-3: #5c6069;
  --line: #e2e2de; --line-2: #ecece8; --slate-bg: #f3f4f6;
  --amber: #b76e00; --amber-ink: #6e4200; --amber-bg: #fff6e5; --amber-line: #efd3a0;
  --red: #b3261e; --red-ink: #8c1d17; --red-bg: #fdf0ef; --red-line: #f3c9c5;
  --blue: #2f5bd3; --blue-ink: #2449b0; --blue-bg: #eef2fd; --blue-line: #cfdaf8;
  --radius: 10px; --focus: #2f5bd3;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
/* Local buyer plan and private listing VIN. Long identifiers wrap instead of widening a 390px screen. */
.value-vin code.vin { font-family: var(--mono); overflow-wrap: anywhere; word-break: break-all; }
.plan-now-title { font-weight: 600; }
.plan-gate { border-left: 3px solid var(--amber-line); padding-left: 8px; }
.plan-group, .plan-now, .value-vin { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.plan-group .buyer-task { margin-left: 8px; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.55 var(--sans); -webkit-font-smoothing: antialiased; overflow-wrap: anywhere; }
h1, h2, h3, h4, p { margin: 0; }
a { color: var(--blue-ink); text-underline-offset: 2px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 8px; top: -64px; z-index: 30; background: var(--ink); color: #fff; padding: 12px 16px; border-radius: 8px; text-decoration: none; }
.skip:focus { top: 8px; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: .93em; }
.muted { color: var(--ink-3); }
img { max-width: 100%; }

/* ---------- buyer value (read-only organisation of a saved version; mobile first, no clearance colour) ---------- */
.value h3 { font-size: 15px; margin: 18px 0 6px; }
.value .value-next { padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); margin-top: 10px; }
.value .value-work { margin-top: 6px; color: var(--ink-2); }
.value .value-prepared, .value > details.disclosure { margin-top: 12px; }
.value .value-next { border-color: var(--blue-line); background: var(--blue-bg); }
.value .value-next h3 { margin-top: 0; }
.value .value-stage-label { font-size: 12px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.value .value-finding { padding: 10px 0; border-top: 1px solid var(--line-2); }
.value .value-finding p + p { margin-top: 4px; }
.value .value-tag { display: inline-block; font-size: 12px; padding: 1px 6px; border-radius: 6px; background: var(--slate-bg); color: var(--ink-2); margin-right: 6px; }
.value .value-tag-unknown { background: var(--amber-bg); color: var(--amber-ink); }
.value .value-uncertain { margin: 6px 0 0; padding-left: 18px; }
.value .value-photos { font-size: 13px; color: var(--ink-3); }
.value .value-gaps { border-left: 3px solid var(--amber-line); padding-left: 10px; }
.value .value-origin { margin-top: 12px; }
.value .value-questions { white-space: pre-wrap; }

/* ---------- frame ---------- */
.layout { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; align-self: start; height: 100vh; overflow-y: auto; padding: 16px 12px; display: flex; flex-direction: column; gap: 2px; }
.brand { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 8px; margin-bottom: 8px; color: var(--ink); font-weight: 650; letter-spacing: -.01em; text-decoration: none; }
.brand-mark { width: 18px; height: 18px; border-radius: 5px; background: var(--ink); display: inline-block; }
.nav-link { display: flex; align-items: center; min-height: 44px; padding: 0 10px; border-radius: 8px; color: var(--ink-2); text-decoration: none; font-size: 14px; }
.nav-link:hover, .nav-case:hover { background: #ebebe8; color: var(--ink); }
.nav-new { border: 1px solid var(--line); background: var(--panel); color: var(--ink); font-weight: 550; margin-bottom: 4px; box-shadow: 0 1px 0 rgba(27, 28, 31, .04); }
.nav-new:hover { background: var(--panel); border-color: #c4c6cc; }
/* Selected: one quiet fill, the same for top links and case rows. */
.nav-link[aria-current="page"], .nav-case[aria-current="page"] { background: #e4e5e8; color: var(--ink); font-weight: 600; }
.nav-new[aria-current="page"] { border-color: #c4c6cc; }
/* The sidebar scrolls, so outlines are drawn inside the item and never clipped. */
.sidebar :focus-visible { outline-offset: -2px; }
.navlabel { font-size: 12px; color: var(--ink-3); padding: 20px 10px 4px; font-weight: 600; }
.nav-cases { list-style: none; margin: 0; padding: 0; }
.nav-case { display: grid; grid-template-columns: 14px minmax(0, 1fr); align-items: baseline; min-height: 44px; padding: 7px 10px; border-radius: 8px; color: var(--ink-2); text-decoration: none; font-size: 13.5px; line-height: 1.35; }
.nav-case[aria-current="page"] .nav-case-title { font-weight: 600; }
.nav-case-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-case small { grid-column: 2; color: var(--ink-3); font-size: 12px; font-weight: 400; }
.nav-empty, .nav-foot { font-size: 12.5px; color: var(--ink-3); padding: 4px 10px; }
.nav-foot { margin-top: auto; padding-top: 16px; }
.main { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; margin: 10px 10px 10px 0; padding: 28px 40px 80px; min-width: 0; }
.main:focus { outline: none; }
.main > * { max-width: 1120px; }

.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: var(--ink-3); flex: none; }
.dot-progress { background: var(--blue); } .dot-warn { background: var(--amber); } .dot-neutral { background: var(--ink-2); }

/* ---------- shared ---------- */
.kicker { font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); font-weight: 650; margin-bottom: 6px; }
h1 { font-size: 24px; line-height: 1.25; letter-spacing: -.015em; font-weight: 650; text-wrap: balance; }
.lede { color: var(--ink-2); font-size: 16px; max-width: 640px; margin-top: 8px; }
.loading { padding: 24px 0; }
.note { font-size: 13px; color: var(--ink-3); margin-top: 8px; }
.callout { background: var(--amber-bg); border: 1px solid var(--amber-line); color: #4d2f00; border-radius: 8px; padding: 10px 12px; margin-top: 10px; }
.muted-box { background: var(--slate-bg); border-radius: 8px; padding: 10px 12px; color: var(--ink-2); margin-top: 8px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 14px; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 16px; border: 1px solid #c4c6cc; border-radius: 8px; background: var(--panel); color: var(--ink); font: inherit; font-size: 14px; font-weight: 550; text-decoration: none; cursor: pointer; }
.btn:hover { background: #f5f5f3; }
.btn-primary { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn-primary:hover { background: #33353b; }
.btn-quiet { border-color: transparent; background: transparent; color: var(--ink-2); }
.btn-quiet:hover { background: var(--slate-bg); }
.btn-small { min-height: 44px; padding: 4px 12px; font-size: 13px; }
.btn-block { width: 100%; margin-top: 12px; justify-content: flex-start; }
.btn:disabled { opacity: .6; cursor: progress; }
/* Feedback is a short colour change only. Focus rings appear at once, and nothing slides, grows or fades in. */
.btn, .nav-link, .nav-case, .tab, .fchip, .case-row, .toc a, .src-toc a, .disclosure > summary { transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease; }
.tag { display: inline-block; font-size: 12px; font-weight: 650; border: 1px solid var(--amber-line); background: var(--amber-bg); color: var(--amber-ink); border-radius: 5px; padding: 0 7px; vertical-align: 1px; }
.tag-quiet { border-color: var(--line); background: var(--slate-bg); color: var(--ink-2); }
.chip { display: inline-flex; align-items: center; border: 1px solid var(--line); background: var(--panel); border-radius: 999px; padding: 3px 10px; font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.chip-progress { border-color: var(--blue-line); background: var(--blue-bg); color: var(--blue-ink); }
.chip-warn { border-color: var(--amber-line); background: var(--amber-bg); color: var(--amber-ink); }
/* Notices: tinted with one accent edge. The demo notice keeps its full dashed frame so it is never mistaken for a real analysis. */
.banner { border: 0; border-left: 3px solid; border-radius: 8px; padding: 10px 14px; margin-top: 14px; font-size: 14.5px; }
.banner .plain { margin-top: 4px; }
.banner .plain li + li { margin-top: 2px; }
.banner-progress { background: var(--blue-bg); border-left-color: var(--blue); color: #1d2f66; }
.banner-warn { background: var(--amber-bg); border-left-color: var(--amber); color: #4d2f00; }
.banner-demo { background: repeating-linear-gradient(135deg, #fbfaf6 0 10px, #f5f3ec 10px 20px); border: 1px dashed #a9a39a; border-left: 3px solid #6f6a62; color: var(--ink); }
.banner-info { background: var(--slate-bg); border-left-color: #9a9ea6; color: var(--ink-2); }
/* Header notices sit close together under the title as one group; each keeps its full text and its own frame. */
.banners { display: grid; gap: 6px; margin-top: 12px; }
.banners .banner { margin-top: 0; }
.banner .stages { margin-top: 8px; }
ul.plain { margin: 0; padding-left: 18px; }
ul.plain li + li { margin-top: 6px; }

/* Status badges: the text label is always present, colour is secondary. */
.st { display: inline-block; font-size: 12px; font-weight: 600; line-height: 1.6; border-radius: 5px; padding: 1px 7px; white-space: nowrap; border: 1px solid; }
.st-verified { color: var(--blue-ink); background: var(--blue-bg); border-color: var(--blue-line); }
.st-reported { color: var(--amber-ink); background: var(--amber-bg); border-color: var(--amber-line); }
.st-inferred { color: var(--ink-2); background: #fff; border-color: #a9acb3; border-style: dashed; }
.st-unknown { color: var(--ink-2); background: var(--slate-bg); border-color: var(--line); }

/* ---------- forms ---------- */
.field { margin-top: 20px; }
.field label { display: block; font-weight: 600; font-size: 14.5px; margin-bottom: 4px; }
.optional { font-weight: 400; color: var(--ink-3); font-size: 13px; margin-left: 4px; }
.hint { font-size: 13px; line-height: 1.45; color: var(--ink-3); margin-top: 6px; max-width: 60ch; }
/* Guidance placed between the label and the field is read before typing. */
.field label + .hint { margin: 0 0 8px; }
input[type="url"], input[type="text"], textarea { display: block; width: 100%; min-height: 44px; border: 1px solid #b9bcc3; border-radius: 8px; background: #fff; padding: 10px 12px; color: var(--ink); font: inherit; font-size: 15px; }
textarea { resize: vertical; }
input:focus-visible, textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--focus); }
input[readonly], textarea[readonly] { background: var(--slate-bg); }
.form-error { color: var(--red-ink); background: var(--red-bg); border: 1px solid var(--red-line); border-radius: 8px; padding: 10px 12px; margin-top: 12px; font-weight: 550; }
.form-status, .copy-status { font-size: 13px; color: var(--ink-2); }

/* ---------- intake ---------- */
.intake { max-width: 680px; padding-top: 32px; }
.intake h1 { font-size: 28px; }
.intake-form { margin-top: 24px; border: 1px solid var(--line); border-radius: 12px; padding: 4px 24px 24px; background: var(--panel); box-shadow: 0 1px 2px rgba(27, 28, 31, .04); }
.intake-form .actions { margin-top: 20px; }
.intake-facts { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line-2); }
.intake-facts h2 { font-size: 13px; font-weight: 650; color: var(--ink-2); margin-bottom: 8px; }
.intake-facts ul { margin: 0; padding-left: 18px; color: var(--ink-3); font-size: 13.5px; }
.intake-facts li + li { margin-top: 6px; }

/* ---------- case list ---------- */
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
/* The list measures its own width, so the row layout follows the space beside the sidebar, not only the window. */
.case-rows { list-style: none; margin: 24px 0 0; padding: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; container-type: inline-size; }
.case-rows li + li { border-top: 1px solid var(--line-2); }
/* Wide list: title on the left; state and date in fixed columns so a long list scans down one edge. */
.case-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 24px; min-height: 52px; padding: 12px 16px; color: var(--ink); text-decoration: none; }
.case-row:hover { background: #fafaf8; }
.case-row:focus-visible { outline-offset: -2px; border-radius: 0; }
.case-row-main { display: flex; align-items: baseline; min-width: 0; }
/* 500, not 550: system faces round 550 up to semibold, which made every title in a long list read as bold. */
.case-row-title { font-weight: 500; }
.case-row-meta { display: grid; grid-template-columns: 11rem 9rem; gap: 0 16px; color: var(--ink-3); font-size: 13px; }
.case-row-meta time { text-align: right; font-variant-numeric: tabular-nums; }
.case-row-state { color: var(--ink-2); }
/* Narrower list (a phone, a tablet, or a 900 to 1100 px window beside the sidebar): the title gets the whole first
   line and state and date move under it, aligned with the title text, instead of squeezing the name. */
@container (max-width: 760px) {
  .case-row { grid-template-columns: minmax(0, 1fr); }
  .case-row-meta { display: flex; flex-wrap: wrap; gap: 0 14px; padding-left: 14px; }
  .case-row-meta time { text-align: left; }
}
.empty-state { margin-top: 24px; border: 1px dashed #c9cbd0; border-radius: 12px; padding: 32px 28px; display: grid; gap: 10px; justify-items: start; background: #fcfcfb; }
.empty-state h2 { font-size: 16px; font-weight: 650; }
.empty-state p { color: var(--ink-2); max-width: 56ch; }
.empty-state .btn { margin-top: 6px; }
.legacy-block { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--line-2); }
.legacy-block h2 { font-size: 16px; margin-bottom: 4px; }
.block-solo { padding-top: 32px; max-width: 640px; }

/* ---------- case header and tabs ---------- */
/* Compact case header: path, title, one meta line, the notices, then the tabs, without extra air between them. */
.crumbs { font-size: 13px; color: var(--ink-3); margin-bottom: 4px; }
.crumbs a { color: var(--ink-3); }
.case-head h1 { margin-bottom: 6px; }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 13px; color: var(--ink-3); }
/* The refresh button keeps its 44 px target; the negative margins only stop it from making the meta line 44 px tall. */
.meta .btn { margin: -6px 0 -6px auto; }
.tabs { display: flex; gap: 4px; margin: 18px 0 16px; box-shadow: inset 0 -1px 0 var(--line); overflow-x: auto; overflow-y: hidden; }
.tab { min-height: 44px; padding: 8px 12px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--ink-3); font: inherit; font-size: 14px; cursor: pointer; white-space: nowrap; }
.tab:hover { color: var(--ink); }
.tab:focus-visible { outline-offset: -2px; }
.tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); font-weight: 600; }
.tab .count { display: inline-block; min-width: 20px; margin-left: 4px; padding: 0 6px; border-radius: 999px; background: var(--slate-bg); color: var(--ink-3); font-size: 12px; font-weight: 500; text-align: center; }
.panel:focus { outline: none; }
.panel-title { font-size: 20px; letter-spacing: -.01em; margin-bottom: 8px; }

/* ---------- report ---------- */
.grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; align-items: start; }
.col-main { min-width: 0; }
.col-side { border-left: 1px solid var(--line-2); padding-left: 24px; min-width: 0; align-self: stretch; }
/* Main-column sections carry real headings; the side rail keeps small labels because it is secondary. */
.block { border-top: 1px solid var(--line-2); padding: 28px 0 20px; }
.block h2 { font-size: 18px; line-height: 1.3; letter-spacing: -.01em; color: var(--ink); font-weight: 650; margin-bottom: 12px; text-wrap: balance; }
.side-card h2 { font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); font-weight: 650; margin-bottom: 12px; }
.block p + p { margin-top: 10px; }
.block h3 { font-size: 15px; margin: 16px 0 6px; }
.block h2, .summary h2, .src-group h3 { scroll-margin-top: 16px; }
.block h2:focus:not(:focus-visible), .summary h2:focus:not(:focus-visible), .src-group h3:focus:not(:focus-visible) { outline: none; }
/* Readable line length for long reports on wide screens. */
.col-main .block > p, .col-main .plain li, .flag > p, .check > p, .step-text, .prose p, .changes p { max-width: 72ch; }
/* Summary hierarchy: heading, then the report's own opening at body weight, then the stop sentence (the only
   highlight), then the first step in its own framed panel. Only emphasis written into the text is bold, so a long
   opening never turns into a block of bold type. */
.summary { border: 1px solid var(--line); background: #fcfcfb; border-radius: var(--radius); padding: 20px 28px; margin-bottom: 12px; }
.summary-label { font-size: 18px; line-height: 1.3; letter-spacing: -.01em; color: var(--ink); font-weight: 650; margin-bottom: 10px; }
.summary-text p { font-size: 16px; line-height: 1.65; white-space: pre-line; max-width: 68ch; text-wrap: pretty; }
.summary-text p:first-child { font-size: 17px; line-height: 1.6; font-weight: 400; letter-spacing: -.005em; }
.summary-text p + p, .summary-stop { margin-top: 12px; }
.stop-line { font-weight: 600; color: #3d2600; background: var(--amber-bg); box-shadow: inset 0 -2px 0 var(--amber-line); padding: 0 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* Ink accent, not amber: the step is what to do next, the amber stop sentence is what not to do yet. */
.summary-next { margin-top: 16px; background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--ink); border-radius: 8px; padding: 12px 16px; }
.summary-next-label { font-size: 12px; font-weight: 600; color: var(--ink-2); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
.summary-next-text { white-space: pre-line; max-width: 68ch; font-size: 16px; line-height: 1.6; color: var(--ink); text-wrap: pretty; }
/* The link keeps its 44px target; the negative margin only removes the doubled space under it. */
.summary-more { margin-bottom: -8px; }
.summary-more a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; }
.summary-note { font-size: 13px; color: var(--ink-3); margin-top: 14px; }
/* Report disclosures: one quiet 44 px row each, never nested; the content opens in place, without motion, and keeps
   its full text (no clamp or fade). */
.more > summary { width: fit-content; }
.more[open] > summary { margin-bottom: 4px; }
/* Contents: inline under the summary on narrow screens, sticky in the side column on wide ones. */
.toc-label { font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); font-weight: 650; margin-bottom: 6px; }
.toc ul, .src-toc ul { list-style: none; margin: 0; padding: 0; }
.toc a, .src-toc a { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 6px 10px; border-radius: 8px; color: var(--ink-2); text-decoration: none; font-size: 14px; line-height: 1.3; }
.toc a:hover, .src-toc a:hover { background: var(--slate-bg); color: var(--ink); }
.toc-count { color: var(--ink-3); font-size: 12px; flex: none; }
.toc-inline { display: none; margin: 0 0 8px; }
.toc-inline ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 4px 8px; }
.toc-inline a { border: 1px solid var(--line); }
.toc-side { position: sticky; top: 12px; z-index: 1; max-height: calc(100vh - 24px); overflow-y: auto; background: var(--panel); padding: 4px 4px 14px; margin-bottom: 18px; border-bottom: 1px solid var(--line-2); }
.toc-side :focus-visible { outline-offset: -2px; }
/* Source-group jumps are navigation, not a second set of filter buttons: quiet links in one wrapping row, each
   label on one line where it fits instead of a box grid with uneven heights. */
.src-toc { margin: 0 0 16px; padding-bottom: 8px; border-bottom: 1px solid var(--line-2); }
.src-toc ul { display: flex; flex-wrap: wrap; gap: 0 4px; }
.src-toc li { max-width: 100%; }
.src-toc a { justify-content: flex-start; gap: 6px; font-size: 13.5px; }
.src-toc a > span:first-child { text-decoration: underline; text-decoration-color: #c4c6cc; text-underline-offset: 3px; }
.flag { border-left: 3px solid var(--red); padding: 2px 0 2px 14px; margin: 0 0 18px; }
.flag-label { color: var(--red); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: 12px; margin-bottom: 4px; }
.check { border-left: 3px solid var(--line); padding: 2px 0 2px 14px; margin: 0 0 16px; }
/* A little more air where the report's red flags end and its other checks begin. */
.flag + .check { margin-top: 26px; }
.thumbs { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 2px; }
.thumb { display: flex; flex-direction: column; gap: 4px; width: 124px; min-height: 44px; font-size: 12px; color: var(--ink-2); text-decoration: none; }
.thumb img { display: block; width: 112px; height: 84px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); background: var(--slate-bg); }
.thumb-missing { justify-content: flex-end; min-height: 84px; padding: 6px 8px; border: 1px dashed #b9bcc3; border-radius: 6px; }
.thumb-missing small { font-size: 12px; color: var(--ink-3); line-height: 1.3; }
ol.steps { list-style: none; margin: 0; padding: 0; }
ol.steps li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; padding: 10px 0; border-top: 1px solid var(--line-2); }
ol.steps li:first-child { border-top: 0; padding-top: 0; }
.step-n { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line); color: var(--ink-3); font-size: 12px; }
.step-text { white-space: pre-line; }
.steps-intro { margin-bottom: 14px; }
.message { background: var(--slate-bg); border: 1px solid var(--line-2); border-radius: 8px; padding: 14px 16px; margin-top: 10px; white-space: pre-wrap; max-width: 72ch; }
.kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; margin: 10px 0 0; font-size: 13.5px; }
.kv dt { color: var(--ink-3); } .kv dd { margin: 0; }
.price-asking { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.prose { margin-top: 10px; }
.prose p { white-space: pre-line; }
.prose p + p, .prose h3 + p { margin-top: 8px; }
.sub { font-size: 12.5px; color: var(--ink-3); font-weight: 600; }
/* Each change compares the saved wording before and after, with its reason below; the two sides stand next to each
   other only where both stay readable, and every string wraps instead of overflowing. No motion. */
.changes { list-style: none; margin: 0; padding: 0; }
.change + .change { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-2); }
.change-n { font-size: 12.5px; font-weight: 650; color: var(--ink-3); }
.change-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 6px; }
.change-side { min-width: 0; overflow-wrap: anywhere; border-left: 3px solid var(--line); border-radius: 0 8px 8px 0; background: var(--slate-bg); padding: 8px 12px; }
.change-side p { white-space: pre-line; }
.change-side p + p { margin-top: 2px; }
.change-after { border-left-color: var(--blue); background: var(--blue-bg); }
.changes .k { color: var(--ink-3); font-weight: 600; font-size: 13px; }
.change-after .k { color: var(--blue-ink); }
.change-reason { margin-top: 6px; font-size: 14px; color: var(--ink-2); overflow-wrap: anywhere; }
.changes-context { margin: 0 0 10px; }
@media (min-width: 720px) {
  .change-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.disclosure { margin-top: 10px; }
.disclosure > summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 550; color: var(--ink-2); list-style: none; }
/* A flex summary loses the native marker in some browsers, so one static triangle shows closed and open alike. */
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary::before { content: ""; flex: none; margin-right: 10px; border-style: solid; border-width: 5px 0 5px 7px; border-color: transparent transparent transparent currentColor; }
.disclosure[open] > summary::before { border-width: 7px 5px 0; border-color: currentColor transparent transparent; }
.photo-grid { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.photo-grid li { font-size: 12px; color: var(--ink-3); }
.photo-grid [data-photo-index] { display: block; width: 100%; }
.photo-grid img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); background: var(--slate-bg); }
.side-card { padding-bottom: 22px; }
.side-card + .side-card { border-top: 1px solid var(--line-2); padding-top: 18px; }
.side-card .plain li { font-size: 14px; color: var(--ink-2); }
.counts { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.counts li { display: flex; justify-content: space-between; align-items: center; font-size: 13.5px; }
.answer-form { margin-top: 4px; }
.answer-form .field { margin-top: 10px; }
/* Where the form was: what was saved and what happens next, in the notice colours (blue process, amber caution). */
.answer-ack { border-left: 3px solid var(--ink-2); border-radius: 8px; background: var(--slate-bg); color: var(--ink); padding: 12px 14px; margin-bottom: 14px; }
.answer-ack-progress { background: var(--blue-bg); border-left-color: var(--blue); color: #1d2f66; }
.answer-ack-warn { background: var(--amber-bg); border-left-color: var(--amber); color: #4d2f00; }
.answer-ack p + p { margin-top: 8px; }
.answer-ack .actions { margin-top: 10px; }
.answer-ack:focus:not(:focus-visible) { outline: none; }
.answer-ack-stage { font-size: 14px; }
.answer-saved-label { margin-top: 10px; }
.answer-saved { white-space: pre-line; overflow-wrap: anywhere; max-width: 72ch; background: var(--panel); color: var(--ink); border: 1px solid var(--line-2); border-radius: 8px; padding: 10px 12px; margin-top: 4px; }
/* The saved answer a version was made from: read-only, framed apart from the editable form below it. */
.answer-basis { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; margin-bottom: 14px; }
.answer-basis h3 { font-size: 15px; margin-bottom: 6px; }
.answer-basis h3:focus:not(:focus-visible) { outline: none; }
.answer-basis > p:not(.answer-saved) { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; font-size: 14px; color: var(--ink-2); }
.answer-fictional { color: var(--amber-ink); font-weight: 600; }
.draft-recovery { margin-bottom: 12px; }
.draft-recovery .actions { margin-top: 8px; }
/* New-version state beside a saved report: one compact card fixed to the lower corner, so it stays in reach in a long
   report. It never covers the end of the page (extra bottom padding below), has no motion, and wraps on a phone. */
.update-bar { position: fixed; z-index: 20; right: 16px; bottom: 16px; width: min(460px, calc(100vw - 32px)); max-height: 45vh; overflow-y: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 10px 12px 10px 14px; background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--ink-2); border-radius: var(--radius); box-shadow: 0 6px 20px rgba(27, 28, 31, .12); font-size: 14px; line-height: 1.45; }
.update-bar-progress { border-left-color: var(--blue); }
.update-bar-warn { border-left-color: var(--amber); }
.update-bar-text { flex: 1 1 240px; min-width: 0; }
.update-bar-actions { display: flex; flex-wrap: wrap; gap: 4px 8px; }
.update-bar :focus-visible { outline-offset: -2px; }
.main:has(.update-bar) { padding-bottom: 176px; }
/* The sticky contents end above the card instead of running under it. */
.main:has(.update-bar) .toc-side { max-height: calc(100vh - 160px); }

/* ---------- progress ---------- */
.status-line { font-size: 16px; font-weight: 600; margin-bottom: 10px; }
.stages { list-style: none; margin: 0; padding: 0; max-width: 560px; }
.stage { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; padding: 10px 0; border-top: 1px solid var(--line-2); }
.stage .sico { flex: none; margin-right: 2px; }
.stage:first-child { border-top: 0; }
.stage-title { min-width: 0; font-weight: 550; }
.stage-status { margin-left: auto; font-size: 12.5px; color: var(--ink-3); }
.stage-current .stage-status, .stage-queued .stage-status { color: var(--blue-ink); }
.stage-failed .stage-status { color: var(--red-ink); font-weight: 600; }
.stage-waiting .stage-title { color: var(--ink-3); font-weight: 450; }
.sico { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #9a9ea6; align-self: center; }
.sico-done { background: var(--ink-2); border-color: var(--ink-2); }
.sico-current, .sico-queued { border-color: var(--blue); background: conic-gradient(var(--blue) 0 50%, transparent 50% 100%); }
.sico-failed { border-color: var(--red); }

/* ---------- sources and versions ---------- */
.src-intro { max-width: 80ch; }
/* Scope of checks: material limits stay visible above the entries, as one compact framed list rather than a full
   report section with its own large heading and spacing. */
.block-scope { border: 1px solid var(--line); border-radius: 10px; background: #fcfcfb; padding: 14px 18px 16px; margin-top: 16px; }
.block.block-scope h2 { font-size: 15px; margin-bottom: 8px; }
.block-scope .plain li { font-size: 14.5px; max-width: 80ch; }
.block-scope .plain li + li { margin-top: 4px; }
/* Legend: the same definitions for every report, one 44 px line until opened, then a quiet reference table. */
.legend-help { margin-top: 8px; }
.legend-help > summary { width: fit-content; font-size: 14px; }
.legend { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 24px; margin: 4px 0 8px; padding: 14px 0; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); font-size: 13.5px; }
.legend div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px; align-items: baseline; }
.legend dd { margin: 0; color: var(--ink-2); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 16px; }
.fchip { min-height: 44px; padding: 4px 14px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink-2); font: inherit; font-size: 13px; cursor: pointer; }
.fchip:hover { border-color: #c4c6cc; color: var(--ink); }
.fchip .num { color: var(--ink-3); margin-left: 2px; }
.fchip[aria-pressed="true"] { border-color: var(--ink); background: var(--slate-bg); color: var(--ink); font-weight: 600; }
/* Evidence rows: each group is one framed list whose source heading is a faint band on top, then rows with the
   status in a fixed column and the claim beside it, hairline separators. */
.src-group { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.src-group + .src-group { margin-top: 16px; }
.src-group h3 { font-size: 13.5px; font-weight: 600; padding: 9px 16px; background: #f7f7f5; border-bottom: 1px solid var(--line-2); }
.src-group h3 .num { font-weight: 400; margin-left: 4px; }
/* The group clips its corners, so the heading's focus ring is drawn inside it. */
.src-group h3:focus-visible { outline-offset: -2px; border-radius: 9px 9px 0 0; }
.src-list { list-style: none; margin: 0; padding: 0; }
.src-row { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 10px 16px; font-size: 14px; line-height: 1.5; }
.src-row + .src-row { border-top: 1px solid var(--line-2); }
.src-row:hover { background: #fafaf8; }
.src-claim { max-width: 80ch; }
.versions { list-style: none; margin: 14px 0 0; padding: 0 0 0 16px; border-left: 2px solid var(--line); }
.version { position: relative; padding: 0 0 18px; }
.version::before { content: ""; position: absolute; left: -23px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid #9a9ea6; }
.v-saved::before { background: var(--ink-2); border-color: var(--ink-2); }
.v-pending::before { border-color: var(--blue); }
.v-failed::before { border-color: var(--amber); background: var(--amber-bg); }
.v-title { font-weight: 600; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.v-title a { display: inline-flex; align-items: center; min-height: 44px; }
.v-title a[aria-current="page"] { color: var(--ink); }
.v-meta { font-size: 13px; color: var(--ink-3); margin-bottom: 4px; }

/* ---------- legacy analyses (read-only), restyled to the same palette ---------- */
.legacy-note { margin: 0 0 12px; }
.report { margin-top: 18px; }
.report-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 20px; }
.report-title { font-size: 24px; margin-bottom: 4px; }
.eyebrow { margin: 0 0 8px; color: var(--ink-3); font-size: 12px; font-weight: 650; letter-spacing: .07em; }
.fine-print { color: var(--ink-3); font-size: 13px; }
.error { color: var(--red-ink); font-weight: 600; }
.decision { border-top: 3px solid var(--amber); padding: 20px 0 16px; margin-top: 18px; }
.decision h2, .unknown-section h2, .verification-plan h2, .source-photos h2, .buyer-guidance h2 { font-size: 18px; letter-spacing: -.01em; margin-bottom: 8px; font-weight: 650; }
.decision-label { color: var(--amber-ink); font-size: 12.5px; font-weight: 700; letter-spacing: .06em; }
.decision ol { padding-left: 20px; }
.decision li { margin: 6px 0; }
.decision.quiet { border-top: 1px solid var(--line); }
.next-step, .unknown-section, .evidence, .source-photos, .buyer-guidance, .empty { margin-top: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); padding: 18px 20px; }
.next-step { border-left: 4px solid var(--amber); }
.evidence > summary, .guidance-history > summary, .full-plan > summary, .knowledge-card summary, details.fallback > summary, .source-premise > summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 600; }
.evidence ul { list-style: none; padding: 0; }
.evidence li, .evidence-list li, .signal-list > li, .brief-reasons > li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--line-2); }
.evidence-list, .signal-list, .brief-reasons { list-style: none; margin: 0; padding: 0; }
.status { width: fit-content; font-size: 11.5px; font-weight: 600; line-height: 1.6; border-radius: 5px; padding: 1px 7px; border: 1px solid var(--line); background: var(--slate-bg); color: var(--ink-2); }
.status.verified { color: var(--blue-ink); background: var(--blue-bg); border-color: var(--blue-line); }
.status.reported { color: var(--amber-ink); background: var(--amber-bg); border-color: var(--amber-line); }
.status.inferred { background: #fff; border-style: dashed; border-color: #a9acb3; }
.mode-note { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--amber-line); border-radius: 8px; background: var(--amber-bg); color: #4d2f00; font-size: 14px; }
.source-check { margin-top: 12px; padding: 10px 12px; border-left: 3px solid var(--blue-line); background: var(--slate-bg); color: var(--ink-2); font-size: 14px; }
.verification-plan { margin: 18px 0; }
.state-banner { display: inline-block; margin: 0 0 12px; border: 1px solid var(--amber-line); background: var(--amber-bg); color: var(--amber-ink); padding: 4px 10px; border-radius: 6px; font-size: 12.5px; font-weight: 650; }
.plan-hero, .advisor-brief { border: 1px solid var(--amber-line); border-left: 4px solid var(--amber); border-radius: var(--radius); background: var(--panel); padding: 18px 20px; }
.next-action { margin: 6px 0 10px; font-size: 16.5px; font-weight: 600; }
.assumption { margin-top: 12px; padding: 10px 12px; border-radius: 8px; background: var(--slate-bg); color: var(--ink-2); font-size: 14px; }
.plan-steps { list-style: none; margin: 14px 0 6px; padding: 0; display: grid; gap: 8px; }
.plan-step { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.plan-step.current { border-color: var(--amber-line); }
.plan-step > details > summary { list-style: none; display: grid; grid-template-columns: 30px 1fr auto; gap: 12px; align-items: center; min-height: 44px; padding: 10px 14px; font-weight: 600; cursor: pointer; }
.plan-step > details > summary::-webkit-details-marker { display: none; }
.step-num { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line); font: 600 12px/1 var(--mono); color: var(--ink-3); }
.step-chips { display: flex; gap: 6px; }
.chip.current { border-color: var(--amber-line); background: var(--amber-bg); color: var(--amber-ink); }
.step-body { padding: 0 16px 16px 56px; }
.step-body h4 { margin: 16px 0 6px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.message-box { margin: 12px 0; padding: 12px 14px; border: 1px dashed #b9bcc3; border-radius: 8px; background: #fff; }
.message-box span, .card-kicker, .card-subhead { display: block; color: var(--ink-3); font-size: 12px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; }
.signal-photos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.signal-photos img { display: block; width: 92px; height: 69px; object-fit: cover; border-radius: 4px; border: 1px solid var(--line); }
.knowledge-card { margin-top: 12px; border: 1px solid var(--line); border-radius: 8px; background: #fafbfd; padding: 4px 14px 12px; }
.qa-badge { display: inline-block; margin: 0 5px; border: 1px solid var(--amber-line); background: var(--amber-bg); color: var(--amber-ink); padding: 0 5px; font-size: 11px; font-weight: 700; }
.guidance-history-detail { margin: 8px 0 14px; padding: 10px 12px; border-left: 3px solid var(--line); background: var(--slate-bg); }
.guidance-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.guidance-heading { display: flex; justify-content: space-between; gap: 16px; }
.decision-pill { border: 1px solid var(--amber-line); color: var(--amber-ink); background: var(--amber-bg); padding: 3px 9px; border-radius: 6px; font-size: 12.5px; font-weight: 650; height: fit-content; }
.listing-description { white-space: pre-line; }
.report-list { display: grid; gap: 10px; margin-top: 14px; }
.report-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); text-decoration: none; }
a.report-row:hover { background: #fafaf8; }
.report-row > div { display: flex; flex-direction: column; gap: 4px; }
.report-row small { color: var(--ink-3); font-size: 13px; }
/* Scoped to legacy rows so it does not shrink the progress status line of the case view. */
.report-row .status-line, .report-meta span { color: var(--amber-ink); font-size: 12.5px; font-weight: 650; margin: 0; }
.report-meta { align-items: flex-end; text-align: right; }
dl:not(.kv):not(.legend) { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 6px 14px; }
dl:not(.kv):not(.legend) dt { color: var(--ink-3); }
dl:not(.kv):not(.legend) dd { margin: 0; }

/* ---------- responsive ---------- */
/* Below 1200 px a 300 px side column would leave the report a narrow strip beside the sidebar, so the report reads
   in one column and the version summary follows it, as on a phone. */
@media (max-width: 1199px) {
  .main { padding: 24px 28px 72px; }
  .grid { grid-template-columns: 1fr; gap: 8px; }
  .col-side { border-left: 0; padding-left: 0; border-top: 1px solid var(--line-2); padding-top: 22px; }
  .toc-side { display: none; }
  .toc-inline { display: block; }
}
@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding: 8px 12px; border-bottom: 1px solid var(--line); }
  .brand { margin: 0 6px 0 0; }
  .nav-new { margin: 0; }
  .navlabel, .case-nav, .nav-foot { display: none; }
  .main { margin: 0; border-radius: 0; border-left: 0; border-right: 0; padding: 20px 16px 64px; }
  .summary { padding: 16px; }
  .summary-text p, .summary-text p:first-child { font-size: 16px; line-height: 1.6; }
  .legend { grid-template-columns: 1fr; }
  h1 { font-size: 21px; }
  .intake { padding-top: 8px; }
  .intake h1 { font-size: 24px; }
  .guidance-grid { grid-template-columns: 1fr; }
  .block h2, .summary-label { font-size: 17px; }
  .tabs { margin: 14px 0 12px; }
}
/* Same two-line rows for browsers without container queries; where they are supported the @container rule covers it. */
@media (max-width: 640px) {
  .case-row { grid-template-columns: minmax(0, 1fr); }
  .case-row-meta { display: flex; flex-wrap: wrap; gap: 0 14px; padding-left: 14px; }
  .case-row-meta time { text-align: left; }
  .empty-state { padding: 24px 18px; }
  .update-bar { left: 0; right: 0; bottom: 0; width: auto; border-radius: 0; border-width: 1px 0 0; border-top: 3px solid var(--ink-2); padding: 8px 14px calc(8px + env(safe-area-inset-bottom)); }
  .update-bar-progress { border-top-color: var(--blue); }
  .update-bar-warn { border-top-color: var(--amber); }
}
@media (max-width: 480px) {
  .intake-form { padding: 2px 14px 16px; }
  .meta .btn { margin-left: 0; }
  /* Less chrome above the report on a phone, so the summary starts sooner. Every notice keeps its text and frame. */
  .banners { margin-top: 10px; }
  .banner { padding: 9px 12px; font-size: 14px; }
  .tabs { margin: 12px 0; }
  .summary { padding: 14px; }
  .summary-next { padding: 10px 12px; }
  .block-scope { padding: 12px 14px 14px; }
  .src-group h3, .src-row { padding-left: 12px; padding-right: 12px; }
  .kv, dl:not(.kv):not(.legend) { grid-template-columns: 1fr; gap: 0; }
  .kv dd, dl:not(.kv):not(.legend) dd { margin-bottom: 8px; }
  .legend div, .src-row, .evidence li, .evidence-list li, .signal-list > li, .brief-reasons > li { grid-template-columns: 1fr; gap: 4px; }
  .report-row { grid-template-columns: 1fr; }
  .report-meta { align-items: flex-start; text-align: left; }
  .report-heading { flex-direction: column; gap: 8px; }
  .step-body { padding: 0 12px 12px; }
  .plan-step > details > summary { grid-template-columns: 26px 1fr; }
  .step-chips { grid-column: 2; }
  .thumb { width: calc(50% - 4px); }
  .thumb img { width: 100%; height: auto; aspect-ratio: 4 / 3; }
}
/* Print: the whole report on paper. Closed disclosures print open (the controller opens them before printing; this
   covers browsers that style the hidden content directly); screen-only navigation and the floating bar are left out. */
@media print {
  body, .main { background: #fff; }
  .main { border: 0; margin: 0; padding: 0; }
  .layout, .grid { display: block; }
  .sidebar, .skip, .tabs, .toc-inline, .toc-side, .update-bar { display: none; }
  .col-side { border: 0; padding: 0; }
  .disclosure > summary::before { display: none; }
}
@media print {
  details::details-content { content-visibility: visible; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* Package1: full evidence wording, explicit provenance, no fixed-height clipping. */
.evidence-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; background: var(--panel); margin: 10px 0; }
.evidence-card.flag { border-left: 3px solid var(--red); background: #fffaf9; }
.evidence-card.check { border-left: 3px solid var(--line); }
.evidence-label, .provenance-label { font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 4px; }
.evidence-field { max-width: 72ch; }
.evidence-field + .evidence-field { margin-top: 10px; border-top: 1px solid var(--line-2); padding-top: 8px; }
.evidence-source, .evidence-uncertainty { color: var(--ink-2); }
.evidence-source-link a, .document-help a { display: inline-flex; align-items: center; min-height: 44px; }
.evidence-card .flag-label { margin-bottom: 8px; }
.photo-origin { display: block; max-width: 112px; font-size: 12px; color: var(--ink-2); }
.document-help { border-top: 1px solid var(--line-2); margin-top: 12px; }
.document-help p { font-size: 14px; margin-top: 8px; }
.summary { padding: 16px 20px; }
.summary-next { margin-top: 12px; }
.case-head h1 { font-size: 22px; line-height: 1.25; }
@media (max-width: 900px) { .evidence-card { padding: 12px; } .case-head h1 { font-size: 20px; } }

.evidence-card.check .flag-label { color: var(--ink-2); }
.thumbs > li { flex: 0 1 124px; max-width: 100%; }
.thumbs .thumb { width: 100%; }

/* Extractive hierarchy: original supporting prose remains open; no content clamp. */
.listing-title-continuation { margin-top: 3px; font-size: 14px; line-height: 1.45; color: var(--ink-2); max-width: 80ch; }
.summary-next-guards { margin-top: 10px; font-size: 15px; line-height: 1.5; }
.summary-next-guards p + p { margin-top: 8px; }
.summary-next-guards .summary-next-label { font-size: 12px; }
.summary-next-context { margin-top: 8px; max-width: 72ch; color: var(--ink-2); font-size: 15px; line-height: 1.5; }

/* Long retained reports: full wording stays in native disclosures; stops stay in the open summary. */
.summary .disclosure { margin-top: 8px; }
.summary-text p, .summary-next-text { overflow-wrap: anywhere; }
.summary-next-context, .summary-next-guards { max-width: 72ch; }
@media (min-width: 900px) { .summary-text p, .summary-text p:first-child { font-size: 15px; line-height: 1.45; } .summary-next-text { line-height: 1.45; } }

/* QA measured the first action bottom at734.28px on a720px viewport. Recover16px before/within the action, preserving wording and font sizes:
   summary top padding -4px, first-action vertical padding -8px, and its preceding gap -4px.
   The summary bottom padding also decreases4px for balanced spacing; it does not move the action. */
@media (min-width: 900px) {
  .summary { padding-top: 12px; padding-bottom: 12px; }
  .summary-next { margin-top: 8px; padding-top: 8px; padding-bottom: 8px; }
}

/* The preserved-warning QA case ended its first action at752.03px on1280x720.
   Short desktop windows recover40px from static header chrome: main top4px,
   three notice paddings24px, notice gaps4px, notice-group margin4px and tab gap4px.
   Notice wording, report prose, text sizes and44px interactive targets stay intact. */
@media (min-width: 901px) and (max-height: 800px) {
  .main:has(.case-head) { padding-top: 24px; }
  .main:has(.case-head) .banners { gap: 4px; margin-top: 8px; }
  .main:has(.case-head) .banners .banner { padding-top: 6px; padding-bottom: 6px; }
  .main:has(.case-head) .tabs { margin-top: 14px; }
}

/* Buyer notes stay visibly separate from evidence. Notices take their own space. */
.update-bar { position: static; width: auto; max-height: none; margin: 16px 0; box-shadow: none; }
.main:has(.update-bar) { padding-bottom: 32px; }
.main:has(.update-bar) .toc-side { max-height: calc(100vh - 32px); }
.toc a[aria-current="location"] { font-weight: 700; color: var(--ink); background: var(--paper); }
.action-stage { margin: 24px 0; }
.buyer-task { border-top: 1px solid var(--line); padding: 12px 0; }
.buyer-task label, #buyer-message-form label { display: block; font-weight: 600; margin: 12px 0 8px; }
.buyer-task select, .buyer-task textarea, #buyer-message { display: block; width: 100%; max-width: 100%; box-sizing: border-box; font: inherit; padding: 10px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); color: var(--ink); }
.buyer-task textarea, #buyer-message { resize: vertical; }
.task-full { white-space: pre-wrap; overflow-wrap: anywhere; margin: 12px 0; }
.task-state { display: block; font-size: .9em; font-weight: 400; }
.action-count { font-weight: 600; }
@media (max-width: 640px) { .update-bar { position: static; width: auto; margin: 12px 0; padding: 10px; } }
.buyer-task .disclosure > summary { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 6px 8px; align-items: start; }
.buyer-task .disclosure > summary::before { grid-row: 1; margin-top: 6px; margin-right: 0; }
.task-title, .task-state { grid-column: 2; overflow-wrap: anywhere; }
.task-state { line-height: 1.5; padding-top: 3px; }
.plan-source { margin: 12px 0; }
/* The private VIN is for the owner's screen only: never on paper or in a printed PDF. */
@media print { .value-vin, #listing-vin, #listing-vin-copy-status { display: none !important; } }

/* The selected checked highlights keep their uncertainty together at every viewport. */
.assessment-highlight + .assessment-highlight { margin-top: 1.5rem; }
.assessment-highlight h3 { font-size: 1.05rem; line-height: 1.45; margin-bottom: .45rem; }
.assessment-highlight .disclosure { margin-top: .7rem; }

/* ---------- one-assessment view ----------
   Calm hierarchy over the checked assessment: verdict, highlights each with its own uncertainty, then the one next
   action. Safety warnings sit in a framed panel that never collapses. Tints only support the words (no green, nothing
   reads as clearance). Motion is limited to the disclosure marker and opening content, and only when the buyer has
   not asked for reduced motion. */
.assessment > * + * { margin-top: 16px; }
.assessment > .banner { margin-top: 0; }
.assessment > .banner + * { margin-top: 12px; }
.assessment .block { border-top: 0; padding: 0; }
.assessment .block h2 { margin-bottom: 10px; }
.assessment .plain li + li { margin-top: 8px; }
.assessment .block p + p { margin-top: 8px; }

/* Status words: always text, tinted like the source badges elsewhere in the app. */
.assessment .badge { display: inline-block; margin-left: 2px; padding: 0 7px; border: 1px solid var(--line); border-radius: 5px; background: var(--slate-bg); color: var(--ink-2); font-size: 12px; font-weight: 600; line-height: 1.6; white-space: nowrap; vertical-align: 1px; }
.assessment .badge[data-status="verified"] { color: var(--blue-ink); background: var(--blue-bg); border-color: var(--blue-line); }
.assessment .badge[data-status="reported"] { color: var(--amber-ink); background: var(--amber-bg); border-color: var(--amber-line); }
.assessment .badge[data-status="inferred"] { background: #fff; border-color: #a9acb3; border-style: dashed; }
.assessment .badge[data-progress] { background: #fff; font-weight: 500; }

/* Safety: open, framed and first, at every width. */
.assessment .assessment-safety { border: 1px solid var(--red-line); border-left: 3px solid var(--red); border-radius: var(--radius); background: var(--red-bg); padding: 14px 18px 16px; }
.assessment .assessment-safety h2 { font-size: 15px; color: var(--red-ink); margin-bottom: 8px; }
.assessment-safety .plain li { color: var(--ink); }

/* Verdict: one accent edge per verdict, the heading as the strongest line, the reason at reading size. */
.assessment .summary { margin-bottom: 0; padding: 18px 24px; border-left: 3px solid #9a9ea6; }
.assessment .summary[data-verdict="WAIT"] { border-left-color: var(--amber); }
.assessment .summary[data-verdict="WALK_AWAY"] { border-left-color: var(--red); }
.assessment .summary[data-verdict="PROCEED_WITH_CHECKS"] { border-left-color: var(--blue); }
.assessment .summary h2 { font-size: 22px; line-height: 1.3; letter-spacing: -.015em; font-weight: 650; text-wrap: balance; }
.assessment .summary h2 + p { margin-top: 8px; font-size: 16px; line-height: 1.6; max-width: 68ch; text-wrap: pretty; }
.assessment .summary > .note, .assessment .summary > .plain li { max-width: 72ch; }
.assessment .summary > .sub { margin: 14px 0 6px; }
.assessment .summary-note { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line-2); }
.assessment-kicker { color: var(--blue-ink); margin-bottom: 6px; font-size: 13px; text-transform: none; letter-spacing: 0; }

/* Highlights: one hairline list; each uncertainty stays under its own finding, never folded away. */
.assessment .assessment-highlights > h2 { margin-bottom: 2px; }
.assessment .assessment-highlight { padding: 14px 0 16px; border-top: 1px solid var(--line-2); }
.assessment .assessment-highlight + .assessment-highlight { margin-top: 0; }
.assessment .assessment-highlight:first-of-type { border-top: 0; padding-top: 8px; }
.assessment .assessment-highlight h3 { margin: 0 0 4px; font-size: 16px; line-height: 1.45; font-weight: 600; max-width: 68ch; }
.assessment-highlight > p:not(.note) { color: var(--ink-2); max-width: 70ch; }
.assessment .assessment-uncertainty { margin-top: 10px; padding: 6px 10px; border-left: 2px dashed #a9acb3; border-radius: 0 6px 6px 0; background: var(--slate-bg); color: var(--ink-2); font-size: 13.5px; line-height: 1.5; max-width: 72ch; }
.assessment-highlight .disclosure > summary { font-size: 14px; }

/* Next action: the one framed task; its heading is a label so the action itself reads first. */
.assessment .assessment-next { padding: 16px 22px 18px; border: 1px solid var(--line); border-left: 3px solid var(--ink); border-radius: var(--radius); background: var(--panel); box-shadow: 0 1px 2px rgba(27, 28, 31, .05); }
.assessment .assessment-next h2 { font-size: 12.5px; line-height: 1.4; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); margin-bottom: 6px; }
.assessment-next > p:first-of-type { font-size: 17px; line-height: 1.55; font-weight: 500; color: var(--ink); max-width: 64ch; text-wrap: pretty; }
.assessment-next > .note { margin-top: 10px; font-size: 14px; color: var(--ink-2); }
.assessment-next .message { margin-top: 14px; }
.assessment-next .actions { margin-top: 10px; }

/* What changed: the process colour, so an update is recognisable without reading the heading. */
.assessment .assessment-delta { padding: 16px 20px 18px; border: 1px solid var(--blue-line); border-left: 3px solid var(--blue); border-radius: var(--radius); background: var(--blue-bg); }
.assessment .assessment-delta h2 { font-size: 16px; color: #1d2f66; margin-bottom: 6px; }
.assessment-delta > p:empty { display: none; }
.assessment-delta .plain { margin-top: 8px; }
.assessment-delta > .note { color: var(--blue-ink); font-weight: 600; }
.assessment .assessment-cause { padding: 14px 18px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: #fcfcfb; }
.assessment .assessment-cause h2 { font-size: 15px; margin-bottom: 6px; }

/* Justification, evidence and other questions: quiet full-width rows at the end, opened on request. */
.assessment > .more { margin-top: 0; border-top: 1px solid var(--line-2); }
.assessment > :not(.more) + .more { margin-top: 28px; }
.assessment > .more:last-child { border-bottom: 1px solid var(--line-2); }
.assessment > .more > summary { width: auto; min-height: 52px; margin: 0 -8px; padding: 4px 8px; border-radius: 8px; color: var(--ink); }
.assessment > .more > summary:hover { background: #f7f7f5; }
.assessment > .more[open] > summary { margin-bottom: 0; }
.assessment > .more[open] { padding-bottom: 18px; }
.assessment > .more > .plain + .plain { margin-top: 14px; }
.assessment .more .block { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-2); }
.assessment .more .block h2 { font-size: 16px; }
.assessment .disclosure > summary:focus-visible { outline-offset: -2px; }
/* One chevron for every assessment disclosure: right when closed, down when open. */
.assessment .disclosure > summary::before, .assessment .disclosure[open] > summary::before { width: 7px; height: 7px; margin: 0 12px 0 2px; border-style: solid; border-color: currentColor; border-width: 0 2px 2px 0; transform: rotate(-45deg); }
.assessment .disclosure[open] > summary::before { transform: translateY(-2px) rotate(45deg); }
@media (prefers-reduced-motion: no-preference) {
  .assessment .disclosure > summary::before { transition: transform 160ms ease; }
  /* Only a change of state animates; content rendered open appears at once. */
  .assessment .disclosure::details-content { opacity: 0; transition: opacity 180ms ease, content-visibility 180ms allow-discrete; }
  .assessment .disclosure[open]::details-content { opacity: 1; }
}

/* Pending submit: a small ring beside the existing "Zapisywanie…" text; it turns only without a reduced-motion request. */
.btn[aria-busy="true"]::after { content: ""; flex: none; width: 12px; height: 12px; margin-left: 8px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; }
@media (prefers-reduced-motion: no-preference) { .btn[aria-busy="true"]::after { animation: btn-busy 800ms linear infinite; } }
@keyframes btn-busy { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
  .assessment .summary, .assessment .assessment-next { padding: 16px; }
  .assessment .summary h2 { font-size: 19px; }
  .assessment-next > p:first-of-type { font-size: 16px; }
}
@media (max-width: 480px) {
  .assessment .assessment-safety, .assessment .assessment-delta, .assessment .assessment-cause { padding: 12px 14px 14px; }
  .assessment .summary, .assessment .assessment-next { padding: 14px; }
  /* The copy action spans the card on a phone: one large target under the message. */
  .assessment-next .actions .btn { width: 100%; }
}
/* Paper shows every disclosure fully at once: a fade started by the print hook's opening is cancelled, not printed
   mid-way, whatever the motion setting or the state the disclosure was rendered in. */
@media print {
  .assessment .disclosure::details-content { opacity: 1 !important; content-visibility: visible !important; transition: none !important; }
  .assessment .disclosure > summary::before { transition: none !important; }
  .assessment-next { box-shadow: none; }
}

/* ---------- one-assessment view: steps, questions, basis and the generic context schematic ----------
   Every rule is scoped to .assessment so legacy reports keep their look. Calm hairlines, one ink accent for the step to
   take now, the evidence status and the workflow progress in visibly different shapes (tinted word vs outlined word). */
.assessment .assessment-next { border-left-width: 4px; }
.assessment-next .assessment-message-label { margin-top: 14px; }
.assessment-next .assessment-message-label + .message { margin-top: 4px; }
.assessment-next .actions + .note { margin-top: 6px; }
.assessment-next-none > p { color: var(--ink-2); }
.assessment .badge[data-progress] { border-style: dashed; color: var(--ink-2); }
.assessment .plain .disclosure, .assessment-step .disclosure { margin-top: 2px; }
.assessment .plain .disclosure > summary, .assessment-step .disclosure > summary { font-size: 13.5px; color: var(--ink-3); }
.assessment .more .sub { margin: 10px 0 4px; }
.assessment .more .plain .plain { margin-top: 4px; }

/* Steps: the assessment's own order, one hairline row each; the step to take now is a reference, not a second copy. */
.assessment-step-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.assessment-step { padding: 12px 16px; min-width: 0; }
.assessment-step + .assessment-step { border-top: 1px solid var(--line-2); }
.assessment-step > p:not(.note) { max-width: 70ch; }
.assessment-step .assessment-who { margin: 0 0 4px; font-size: 13px; }
.assessment-step-now { background: #fafaf8; border-radius: var(--radius) var(--radius) 0 0; }
.assessment-step-now:only-child { border-radius: var(--radius); }
.assessment-step-k { font-size: 12px; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); }
.assessment-step-now a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 550; }
.assessment-steps > .note { margin: -4px 0 10px; }
/* A step row reads as its executor and stage; the step's own wording opens in the row, at reading width. */
.assessment-step > .disclosure > summary { min-height: 44px; font-size: 14px; color: var(--ink); }
.assessment-step > .disclosure > p:not(.sub) { max-width: 70ch; }

/* Questions and highlights keep each status, progress and uncertainty next to its own text. */
.assessment .assessment-questions > .note { margin-top: 10px; }
.assessment-uncertainty-k { font-weight: 650; color: var(--ink); }
.assessment-counts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 8px; }

/* Generic schematic: neutral outline, everything hatched, one ink marker; no health colours. */
.assessment .assessment-context { border: 1px solid var(--line); border-radius: var(--radius); background: #fcfcfb; padding: 16px 20px 18px; }
.assessment-map { margin: 12px 0 0; }
.assessment-car { display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto; }
.assessment-hatch-bg { fill: #fbfbfa; }
.assessment-hatch-ln { stroke: #d5d6d2; stroke-width: 2; }
.assessment-car-body { fill: url(#assessment-hatch); stroke: var(--ink-3); stroke-width: 2; }
.assessment-car-wheels rect { fill: var(--ink-2); }
.assessment-car-line { fill: none; stroke: #b9bcc3; stroke-width: 1.5; }
.assessment-car-zone { fill: none; stroke: var(--ink-2); stroke-width: 1.5; stroke-dasharray: 5 4; }
.assessment-car-marker rect { fill: var(--panel); stroke: var(--ink); stroke-width: 3; }
.assessment-car-marker text { font: 700 22px var(--sans); fill: var(--ink); }
.assessment-car-labels path { fill: none; stroke: var(--ink-3); stroke-width: 2; }
.assessment-car-labels text { font: 13px var(--sans); fill: var(--ink-3); }
.assessment-map-legend { list-style: none; margin: 12px 0 0; padding: 10px 0 0; border-top: 1px solid var(--line-2); display: grid; gap: 6px; font-size: 13.5px; color: var(--ink-2); }
.assessment-map-legend li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; align-items: start; }
.assessment-hatch-sw { width: 24px; height: 16px; margin-top: 3px; border: 1px solid var(--ink-3); border-radius: 4px; background: repeating-linear-gradient(45deg, #fbfbfa 0 3px, #d5d6d2 3px 5px); }
.assessment-mark { display: inline-grid; place-items: center; width: 20px; height: 20px; margin: 1px 2px 0; border: 2px solid var(--ink); border-radius: 4px; transform: rotate(45deg); font-size: 11px; font-weight: 700; line-height: 1; color: var(--ink); background: var(--panel); }
.assessment-mark > span { display: block; transform: rotate(-45deg); }
.assessment-context-h { display: flex; align-items: center; gap: 10px; }
.assessment .assessment-context h3 { font-size: 15px; margin: 16px 0 6px; }

@media (max-width: 480px) {
  .assessment-step { padding: 10px 12px; }
  .assessment .assessment-context { padding: 12px 14px 14px; }
  .assessment-car-labels text { font-size: 18px; }
}
@media (forced-colors: active) {
  .assessment-car-body { fill: none; stroke: CanvasText; }
  .assessment-car-marker rect, .assessment-mark { stroke: CanvasText; border-color: CanvasText; }
  .assessment .badge[data-progress] { border-style: dashed; }
}
@media print {
  .assessment-step-list, .assessment .assessment-context { break-inside: avoid; }
  .assessment-next .actions { display: none; }
}

/* ---------- approved report composition ----------
   This surface is selected by the saved assessment, including historical versions without buyerSummary.
   It changes presentation only. Intake, case lists and legacy reports retain their original frame. */
body:has(.assessment-case), .assessment {
  --bg: #f7f8fb; --panel: #fff; --ink: #0d1330; --ink-2: #3d4462; --ink-3: #646a89;
  --line: #e4e7ef; --line-2: #d3d7e3; --slate-bg: #f3f4f8;
  --blue: #4f3fe6; --blue-ink: #3a2bc4; --blue-bg: #efedff; --blue-line: #d9d4ff;
  --amber: #c97a12; --red: #b42347; --red-ink: #96213d; --red-bg: #fff4f6; --red-line: #f2c4cf;
  --radius: 16px; --focus: #4f3fe6;
  --report-shadow: 0 1px 2px rgba(13, 19, 48, .04), 0 10px 28px -16px rgba(13, 19, 48, .18);
}
body:has(.assessment-case) {
  background: radial-gradient(1100px 420px at 88% -120px, rgba(123, 97, 255, .14), transparent 70%),
    radial-gradient(800px 360px at 70% -160px, rgba(255, 170, 90, .14), transparent 70%), var(--bg);
  background-repeat: no-repeat; font-size: 16px;
}
.layout:has(.assessment-case) { display: block; }
.layout:has(.assessment-case) > .sidebar {
  position: relative; height: auto; overflow: visible; display: flex; flex-direction: row;
  align-items: center; flex-wrap: wrap; gap: 4px 12px; padding: 8px max(24px, calc((100vw - 1072px) / 2));
  border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .76);
}
.layout:has(.assessment-case) > .sidebar::after {
  content: ""; position: absolute; bottom: -1px; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, #4f3fe6, #7b61ff 60%, #f0a35a);
}
.layout:has(.assessment-case) .sidebar .brand { margin: 0 auto 0 0; padding: 0; }
.layout:has(.assessment-case) .brand-mark { background: linear-gradient(135deg, #4f3fe6, #7b61ff); }
.layout:has(.assessment-case) .sidebar .nav-link { margin: 0; font-size: 13px; padding: 0 12px; min-height: 44px; }
/* Recent-case shortcuts are available through the adjacent All cases route in the compact report navigation. */
.layout:has(.assessment-case) .sidebar :is(.navlabel, .case-nav, .nav-foot) { display: none; }
.layout:has(.assessment-case) > .main {
  max-width: 1120px; width: 100%; margin: 0 auto; padding: 36px 24px 64px;
  border: 0; border-radius: 0; background: transparent;
}
.assessment-case .case-head { padding: 0 0 10px; }
.assessment-case .case-head h1 { margin: 6px 0 8px; font-size: 32px; line-height: 1.15; letter-spacing: -.022em; font-weight: 680; }
.assessment-case .crumbs { font-size: 13px; }
.assessment-case .meta { gap: 6px 16px; font-size: 13px; }
.assessment-case .meta .chip { border: 0; padding: 2px 0; background: transparent; }
.assessment-case .meta .chip + .chip { padding-left: 14px; border-left: 1px solid var(--line); border-radius: 0; }
.assessment-case .meta .btn { margin-left: auto; }
.assessment-head-facts { display: flex; align-items: start; flex-wrap: wrap; gap: 4px 24px; margin-top: 8px; color: var(--ink-2); font-size: 14px; }
.assessment-price-status { display: flex; align-items: baseline; flex-wrap: wrap; gap: 3px 8px; padding: 11px 0; }
.assessment-fact-label { font-weight: 650; color: var(--ink); }
.assessment-head-facts > .disclosure { margin: 0; padding: 0; border: 0; min-width: 0; max-width: 100%; }
.assessment-head-facts > .disclosure > summary { min-height: 44px; font-size: 14px; color: var(--blue-ink); }
.assessment-head-facts > .disclosure > .block { margin: 0 0 12px; padding: 16px; max-width: 600px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.assessment-head-facts h3 { margin-top: 0; }
.assessment-case .tabs { margin: 16px 0 24px; gap: 8px; }
.assessment-case .tab { font-size: 14px; padding: 10px 16px; }
.assessment-case .tab[aria-selected="true"] { color: var(--blue-ink); border-color: var(--blue); }
.assessment-case .banners { margin-top: 8px; }
.assessment-case .banner { border-radius: 12px; font-size: 14px; }
.assessment-case .assessment-synthetic { color: #fff; border: 0; position: relative; background: #151b38; padding: 12px 16px; }
.assessment-case .assessment-synthetic::after { content: ""; position: absolute; inset: auto 0 0; height: 2px; background: linear-gradient(90deg, #4f3fe6, #7b61ff, #f0a35a); }
.assessment-report, .assessment-report-tools, .assessment-decision-pair > *, .assessment-context-grid > * { min-width: 0; }
.assessment { font-size: 16px; }
.assessment > * + * { margin-top: 44px; }
.assessment > .assessment-safety + .assessment-decision-pair { margin-top: 20px; }
.assessment .block { border: 0; padding: 0; }
.assessment .block > h2 { margin: 8px 0 20px; font-size: 26px; line-height: 1.2; font-weight: 660; letter-spacing: -.018em; }
.assessment-eyebrow { color: var(--ink-3); font-size: 12px; font-weight: 650; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; }
.assessment-eyebrow::before { content: ""; display: inline-block; width: 16px; height: 2px; margin-right: 8px; vertical-align: middle; background: var(--line-2); border-radius: 2px; }
.assessment-eyebrow-accent { color: var(--blue-ink); }
.assessment-eyebrow-accent::before { background: var(--blue); }
.assessment-decision-pair { display: grid; grid-template-columns: 1.1fr 1fr; gap: 20px; align-items: start; }
.assessment .summary, .assessment .assessment-next {
  position: relative; margin: 0; padding: 28px; border: 1px solid var(--line); border-radius: 16px;
  background: #fff; box-shadow: var(--report-shadow);
}
.assessment .summary[data-verdict] { border-left-color: var(--line); }
.assessment-verdict { display: flex; align-items: center; gap: 14px; margin: 14px 0 12px; }
.assessment .summary h2 { font-size: 38px; line-height: 1.08; font-weight: 700; letter-spacing: -.028em; text-wrap: initial; }
.assessment-verdict-icon { display: inline-flex; flex: none; align-items: center; justify-content: center; gap: 5px; width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(140deg, #1c2350, #0d1330); box-shadow: 0 8px 20px -10px rgba(13, 19, 48, .6); }
.assessment-verdict-icon i { width: 5px; height: 18px; border-radius: 2px; background: #fff; }
.assessment .summary > .assessment-reason { font-size: 17px; line-height: 1.55; color: var(--ink-2); }
.assessment .summary > .assessment-eyebrow { font-size: 12px; }
.assessment .summary-note { font-size: 13px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--ink-3); }
.assessment-kicker { font-size: 12.5px; margin-top: 12px; }
.assessment .assessment-next { border-color: #d9d4ff; overflow: hidden; }
.assessment .assessment-next::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, #4f3fe6, #7b61ff, #f0a35a); }
.assessment .assessment-next h2 { font-size: 22px; line-height: 1.3; letter-spacing: -.012em; font-weight: 660; text-transform: none; color: var(--ink); margin: 10px 0 12px; }
.assessment-next .assessment-who { font-size: 14px; color: var(--ink-2); margin: 12px 0; }
.assessment .assessment-next > .assessment-eyebrow { font-size: 12px; line-height: 1.4; font-weight: 650; color: var(--blue-ink); }
.assessment-next .assessment-message-label { font-size: 12px; font-weight: 650; color: var(--ink-3); }
.assessment-next .message { margin: 8px 0 12px; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: var(--slate-bg); font-size: 15px; line-height: 1.6; white-space: pre-wrap; }
.assessment-next .actions { margin-top: 10px; gap: 8px 12px; }
.assessment-case .btn, .assessment .btn { border-radius: 10px; border-color: var(--line-2); }
.assessment .btn-primary { border-color: var(--blue); background: var(--blue); color: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset, 0 6px 16px -8px rgba(79, 63, 230, .7); }
.assessment .btn-primary:hover { border-color: var(--blue-ink); background: var(--blue-ink); }
.assessment .assessment-next-none > p { font-size: 15px; font-weight: 400; }
.assessment .assessment-safety { margin-top: 0; border: 1px solid var(--red-line); border-left: 4px solid var(--red); border-radius: 14px; padding: 16px 20px; background: var(--red-bg); }
.assessment .assessment-safety h2 { font-size: 14px; letter-spacing: .04em; margin: 0 0 8px; color: var(--red-ink); }
.assessment .assessment-safety .plain { font-size: 15px; }
.assessment .assessment-highlight-list { border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: var(--report-shadow); }
.assessment .assessment-highlight { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 16px; padding: 20px; border: 0; }
.assessment .assessment-highlight:first-of-type { padding: 20px; }
.assessment .assessment-highlight + .assessment-highlight { border-top: 1px solid var(--line); }
.assessment-highlight-number { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--slate-bg); color: var(--ink-2); font-size: 13px; font-weight: 700; }
.assessment .assessment-highlight h3 { margin: 0 0 4px; font-size: 16px; font-weight: 640; line-height: 1.4; max-width: none; }
.assessment-highlight-content > p { color: var(--ink-2); font-size: 14.5px; max-width: 76ch; }
.assessment .assessment-uncertainty { padding: 0; border: 0; background: none; margin-top: 6px; font-size: 14.5px; line-height: 1.5; max-width: none; }
.assessment-uncertainty-k { color: var(--ink-3); }
.assessment-highlight .disclosure { margin-top: 6px; }
.assessment .badge { border-radius: 999px; padding: 2px 9px; font-size: 12px; line-height: 1.5; white-space: normal; }
.assessment .badge[data-status="inferred"] { border-color: #a99de8; color: #594b9b; }
.assessment .assessment-steps > h2 { font-size: 16px; margin-bottom: 8px; }
.assessment-steps > .note { margin: 0 0 10px; }
.assessment-steps > .disclosure { padding: 0; border-top: 0; }
.assessment-steps > .disclosure > summary { border: 1px solid var(--line); border-radius: 12px; padding: 10px 16px; background: #fff; min-height: 48px; }
.assessment-steps > .disclosure[open] > summary { margin-bottom: 12px; }
.assessment-step-list { border-radius: 12px; }
.assessment-step { padding: 16px 18px; }
.assessment .assessment-questions > .plain { padding: 0; list-style: none; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.assessment .assessment-questions > .plain > li { padding: 16px 20px; margin: 0; }
.assessment .assessment-questions > .plain > li + li { border-top: 1px solid var(--line); }
.assessment .assessment-context { padding: 0; border: 0; background: none; }
.assessment-context > .note { max-width: 76ch; font-size: 15px; }
.assessment-context-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 20px; align-items: start; margin-top: 20px; }
.assessment-map { margin: 0; padding: 18px; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--report-shadow); background: radial-gradient(circle, #e3e6ef 1px, transparent 1.2px) 0 0 / 16px 16px, #fff; }
.assessment-map-status { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255, 255, 255, .94); font-size: 13px; color: var(--ink-2); }
.assessment-map-status .assessment-hatch-sw { flex: none; margin-top: 0; }
.assessment .assessment-context h3 { margin: 4px 0 14px; font-size: 14px; font-weight: 650; }
.assessment-context-claims > .plain { margin: 0; padding: 0; list-style: none; }
.assessment-context-claims > .plain > li { padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font-size: 14px; }
.assessment-context-claims > .plain > li + li { margin-top: 10px; }
.assessment-car-body { stroke: #5b6280; stroke-width: 1.6; }
.assessment-car-wheels rect { fill: #2a3050; }
.assessment-car-line { stroke: #8a90a8; }
.assessment-car-zone { stroke: rgba(79, 63, 230, .45); fill: rgba(79, 63, 230, .04); }
.assessment-hatch-ln { stroke: #dde1ea; }
.assessment .assessment-delta, .assessment .assessment-cause { padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: var(--report-shadow); }
.assessment .assessment-delta { max-width: 820px; }
.assessment .assessment-delta > h2 { font-size: 22px; margin: 0 0 14px; }
.assessment .assessment-cause > h2 { margin: 0 0 10px; font-size: 18px; }
.assessment .assessment-done > .plain { padding-left: 20px; max-width: 88ch; }
.assessment .assessment-done > .sub { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 14px; font-weight: 650; }
.assessment .assessment-done .plain li { padding: 6px 0; }
.assessment > .more { border-color: var(--line); }
.assessment > .more > summary { margin: 0; padding: 8px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font-size: 14.5px; }
.assessment > .more + .more { margin-top: 10px; border: 0; }
.assessment > .more:last-child { border: 0; }
.assessment-report-tools { margin-top: 44px; border-top: 1px solid var(--line); padding-top: 8px; }
.assessment-report-tools > .block { padding: 28px 0; border-top: 0; }
.assessment-report-tools > .block > h2 { font-size: 24px; }
.assessment-report-tools > .more { padding: 0; margin-top: 24px; border-top: 0; }
.assessment-report-tools > .more > summary { padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.assessment-version-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 24px 0; }
.assessment-version-grid .side-card { min-width: 0; margin: 0; }
.assessment-case .src-row { background: #fff; }
.assessment-case .answer-form { padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
@media (max-width: 960px) {
  .assessment-decision-pair, .assessment-context-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .layout:has(.assessment-case) > .sidebar { padding: 8px 16px; gap: 2px 8px; }
  .layout:has(.assessment-case) > .main { padding: 24px 16px 48px; }
  .assessment-case .case-head h1 { font-size: 25px; }
  .assessment-case .tabs { gap: 2px; margin-bottom: 20px; }
  .assessment-case .tab { padding: 10px; font-size: 13px; }
  .assessment .summary, .assessment .assessment-next { padding: 20px; }
  .assessment .summary h2 { font-size: 30px; }
  .assessment-verdict-icon { width: 42px; height: 42px; border-radius: 12px; }
  .assessment .summary > .assessment-reason { font-size: 16px; }
  .assessment > * + * { margin-top: 36px; }
  .assessment .block > h2 { font-size: 22px; }
  .assessment .assessment-next h2 { font-size: 21px; }
  .assessment .assessment-safety h2 { font-size: 14px; }
  .assessment .assessment-delta > h2 { font-size: 21px; }
  .assessment .assessment-highlight, .assessment .assessment-highlight:first-of-type { padding: 16px; gap: 12px; }
  .assessment .assessment-delta, .assessment .assessment-cause { padding: 20px; }
  .assessment .assessment-cause > h2 { font-size: 18px; }
  .assessment-version-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .layout:has(.assessment-case) > .main { padding: 24px 14px 44px; }
  .layout:has(.assessment-case) > .sidebar { padding: 6px 14px; gap: 0 4px; }
  .layout:has(.assessment-case) .sidebar .nav-link { padding: 0 8px; font-size: 12px; }
  .assessment-case .case-head h1 { font-size: 25px; }
  .assessment-head-facts { display: block; }
  .assessment-head-facts > .disclosure > summary { white-space: normal; }
  .assessment .summary, .assessment .assessment-next { padding: 18px 16px; }
  .assessment .summary h2 { font-size: 27px; }
  .assessment-verdict { gap: 10px; }
  .assessment .assessment-next h2 { font-size: 20px; }
  .assessment-next .message { padding: 12px; }
  .assessment-next .actions .btn { width: 100%; }
  .assessment .assessment-safety { padding: 14px; }
  .assessment .assessment-safety h2 { font-size: 14px; }
  .assessment .assessment-delta, .assessment .assessment-cause { padding: 18px 16px; }
  .assessment .assessment-delta > h2 { font-size: 21px; }
  .assessment .assessment-cause > h2 { font-size: 18px; }
  .assessment .assessment-context { padding: 0; }
  .assessment-map { padding: 12px; }
  .assessment-head-facts > .disclosure > .block { padding: 12px; }
  .assessment-case .answer-form { padding: 14px; }
}
@media print {
  .layout:has(.assessment-case) > .sidebar, .assessment-head-facts > #assessment-identity { display: none !important; }
  .layout:has(.assessment-case) > .main { max-width: none; padding: 0; }
  .assessment-decision-pair, .assessment-context-grid, .assessment-version-grid { display: block; }
  .assessment .summary, .assessment .assessment-next, .assessment-map, .assessment .assessment-highlight-list { box-shadow: none; break-inside: avoid; }
  .assessment .assessment-next { margin-top: 20px; }
  .assessment > .more, .assessment-report-tools > .more { break-inside: auto; }
}
/* Stored action prose may be several sentences. It keeps its whole wording at body weight rather than becoming a
   manually shortened title or an oversized heading. */
.assessment .assessment-next > .assessment-next-text { font-size: 16px; line-height: 1.55; font-weight: 400; color: var(--ink-2); margin: 12px 0; max-width: none; }
.assessment-decision-pair:not(:has(.assessment-next)) { grid-template-columns: 1fr; }

/* Bounded evidence overview and in-place source preview. The neutral car conveys no health state. */
.assessment-car-wrap { position: relative; max-width: 560px; margin-inline: auto; }
.assessment-map-pin { position: absolute; left: 79.6875%; top: 50%; transform: translate(-50%, -50%); width: 48px; height: 48px; border: 0; background: transparent; color: transparent; cursor: pointer; border-radius: 8px; }
.assessment-map-pin:hover { background: rgba(79, 63, 230, .1); }
.assessment-map-pin:focus-visible { outline: 3px solid var(--blue); outline-offset: 7px; }
.assessment-context-group + .assessment-context-group { margin-top: 22px; }
.assessment-context-group > .plain { list-style: none; margin: 0; padding: 0; }
.assessment-context-group > .plain > li + li { margin-top: 8px; }
.assessment-evidence-button { display: flex; align-items: start; justify-content: space-between; gap: 14px; width: 100%; text-align: left; font: inherit; color: inherit; background: #fff; border: 1px solid var(--line); padding: 14px 16px; border-radius: 12px; cursor: pointer; line-height: 1.55; overflow-wrap: anywhere; }
.assessment-evidence-button:hover { border-color: #aaa2e8; background: #faf9ff; }
.assessment-evidence-button:focus-visible, .assessment-text-button:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.assessment-evidence-text { min-width: 0; }
.assessment-context-group .assessment-evidence-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.assessment-evidence-more { flex: none; color: var(--blue); font-size: 12px; font-weight: 650; }
.assessment-text-button { display: inline; color: var(--blue); font: inherit; text-align: left; border: 0; background: transparent; padding: 3px 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.source-preview-button { grid-column: 2; justify-self: start; font-size: 13px; }
.evidence-preview { padding: 0; width: min(760px, calc(100vw - 48px)); max-height: min(86dvh, 900px); border: 1px solid var(--line); border-radius: 18px; color: var(--ink); background: #fff; box-shadow: 0 24px 100px #16133533; overflow: auto; overscroll-behavior: contain; }
.evidence-preview::backdrop { background: rgba(26, 26, 50, .35); }
.evidence-preview-head { position: sticky; top: 0; z-index: 1; background: #fff; display: flex; align-items: start; justify-content: space-between; gap: 16px; padding: 20px 24px; border-bottom: 1px solid var(--line); }
.evidence-preview-head > div { min-width: 0; }
.evidence-preview-head h2 { font-size: 21px; line-height: 1.3; margin: 4px 0 0; overflow-wrap: anywhere; }
.evidence-preview-head .btn { flex: none; min-height: 44px; }
.evidence-preview-body { padding: 22px 24px 28px; overflow-wrap: anywhere; }
.evidence-preview-claim + .evidence-preview-claim { border-top: 1px solid var(--line); margin-top: 28px; padding-top: 24px; }
.evidence-preview h3 { font-size: 14px; margin: 0 0 10px; }
.evidence-preview h3:not(:first-child) { margin-top: 24px; }
.evidence-preview-verbatim { white-space: pre-wrap; margin-top: 12px; line-height: 1.65; }
.evidence-preview-source { margin: 12px 0; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #fafafa; }
.evidence-preview-source h4 { font-size: 13px; margin: 0 0 8px; }
.evidence-preview-source blockquote { margin: 12px 0 0; padding: 0; border: 0; white-space: pre-wrap; line-height: 1.65; font-size: 14px; }
.evidence-preview .note { color: var(--ink-2); font-size: 13px; line-height: 1.6; }
@media (max-width: 600px) {
  .assessment-evidence-button { gap: 10px; padding: 12px; }
  .assessment-evidence-more { font-size: 11px; }
  .evidence-preview { width: 100%; max-width: none; max-height: 92dvh; margin: auto 0 0; border-radius: 18px 18px 0 0; border-bottom: 0; }
  .evidence-preview-head { padding: 16px; gap: 10px; }
  .evidence-preview-head h2 { font-size: 18px; }
  .evidence-preview-head .btn { padding-inline: 10px; }
  .evidence-preview-body { padding: 18px 16px calc(24px + env(safe-area-inset-bottom)); }
}
@media (pointer: coarse) { .assessment-text-button { min-height: 44px; } }
@media print {
  .evidence-preview { display: none; }
  .assessment-map-pin, .assessment-evidence-more, .source-preview-button { display: none; }
  .assessment-context-group .assessment-evidence-text { display: block; overflow: visible; }
}
.evidence-preview .badge { display: inline-block; border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; font-size: 12px; line-height: 1.5; background: var(--slate-bg); }
.evidence-preview .badge[data-status="verified"] { color: var(--blue-ink); background: var(--blue-bg); border-color: var(--blue-line); }
.evidence-preview .badge[data-status="reported"] { color: var(--amber-ink); background: var(--amber-bg); border-color: var(--amber-line); }
.evidence-preview .badge[data-status="inferred"] { border-style: dashed; }
@media (max-width: 600px) { .source-preview-button { grid-column: 1; } }

/* ---------- vehicle map and its evidence sheet ----------
   Source-bound vehicle regions: the illustration can change independently of the evidence contract. One neutral
   hatched car (nothing on it is assessed) with ink number pins on coarse regions; a list that names each region once;
   a sheet that reads finding, exact claim, then each own source with its own photos, then back. No health colours;
   motion only without a reduced-motion request. */
.assessment .assessment-context > h2 { margin-bottom: 6px; }
.assessment-context > .note { margin-top: 0; color: var(--ink-2); }
.vehicle-map-views { display: inline-flex; flex-wrap: wrap; gap: 4px; max-width: 100%; margin: 20px 0 0; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--slate-bg); }
.vehicle-map-views .chip { gap: 8px; min-height: 44px; padding: 6px 14px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--ink-2); font: inherit; font-size: 14px; font-weight: 550; cursor: pointer; }
.vehicle-map-views .chip:hover { color: var(--ink); }
.vehicle-map-views [aria-pressed="true"] { border-color: var(--line); background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(13, 19, 48, .08); }
.vehicle-map-count { min-width: 22px; padding: 0 6px; border-radius: 999px; background: rgba(255, 255, 255, .85); color: var(--ink-3); font-size: 12px; font-weight: 650; line-height: 20px; text-align: center; }
.vehicle-map-views [aria-pressed="true"] .vehicle-map-count { background: var(--blue-bg); color: var(--blue-ink); }
.vehicle-map-panel[hidden] { display: none; }
.vehicle-map-panel > .assessment-context-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px; margin-top: 16px; }
.vehicle-map-panel > .vehicle-map-grid-systems { grid-template-columns: minmax(0, 1fr); max-width: 760px; gap: 14px; }

/* The drawing: the prototype's car, with orientation in page text and a two-line key under it. */
.vehicle-map-figure { padding: 18px 18px 14px; }
.vehicle-map-orient { display: flex; justify-content: space-between; gap: 4px 12px; max-width: 560px; margin: 4px auto 0; color: var(--ink-3); font-size: 12px; line-height: 1.4; }
.vehicle-map-orient > span:nth-child(2) { text-align: center; }
.vehicle-map-orient > span:first-child::before { content: "← "; }
.vehicle-map-orient > span:last-child::after { content: " →"; }
.assessment-car-mirror { fill: #fff; stroke: #5b6280; stroke-width: 1.4; }
.assessment-car-glass { fill: #e9ecf4; stroke: #8a90a8; stroke-width: 1.2; }
.assessment-car-roof { fill: rgba(255, 255, 255, .55); stroke: #8a90a8; stroke-width: 1.2; stroke-dasharray: 4 4; }
.assessment-car-trim { fill: none; stroke: #b8bdcf; stroke-width: 1.2; }
.assessment-car-lamp { fill: none; stroke: #8a90a8; stroke-width: 2; stroke-linecap: round; }
.assessment-car-seat { fill: #fff; stroke: #9aa0b6; stroke-width: 1.4; }
.assessment-car-dash { fill: none; stroke: #5b6280; stroke-width: 5; stroke-linecap: round; }
.assessment-car-axle { fill: none; stroke: #5b6280; stroke-width: 3; stroke-linecap: round; }
.vehicle-map-legend { display: grid; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--ink-2); font-size: 13px; line-height: 1.45; }
.vehicle-map-legend > span { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start; }
.vehicle-map-legend .assessment-hatch-sw { margin-top: 1px; }
.vehicle-map-key-pin { display: inline-grid; place-items: center; width: 20px; height: 20px; margin: 0 3px; border-radius: 6px; background: var(--ink); color: #fff; font-size: 11px; font-weight: 700; line-height: 1; }
.vehicle-map-legend .vehicle-region-badge { width: 20px; height: 20px; margin: 0 3px; }

/* Pins: a 44 px target around a 28 px ink badge with a white ring, so it reads on the hatching. */
.assessment-map-pin.vehicle-region-pin { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px; background: transparent; color: #fff; font: 700 13px/1 var(--sans); isolation: isolate; }
.vehicle-region-pin::before { content: ""; position: absolute; inset: 8px; z-index: -1; border-radius: 8px; background: var(--ink); box-shadow: 0 0 0 3px #fff, 0 4px 10px -4px rgba(13, 19, 48, .55); }
.assessment-map-pin.vehicle-region-pin:hover { background: transparent; }
.vehicle-region-pin:hover::before, .vehicle-region-pin[data-active]::before { box-shadow: 0 0 0 3px #fff, 0 0 0 6px rgba(79, 63, 230, .35); }
.assessment-map-pin.vehicle-region-pin:focus-visible { outline: 3px solid var(--blue); outline-offset: 0; }
/* Neighbouring areas share one pin: a faint band over their own approximate spots, never a second target. */
.vehicle-region-spread { position: absolute; box-sizing: content-box; margin: -8px; padding: 6.5px; border: 1.5px dashed rgba(79, 63, 230, .45); border-radius: 999px; background: rgba(79, 63, 230, .07); pointer-events: none; }
.vehicle-region-spot { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--ink-2); box-shadow: 0 0 0 2px #fff; pointer-events: none; }
.vehicle-region-near { margin: 0 0 4px; color: var(--ink-3); font-size: 13px; line-height: 1.45; }

/* Region list: the area is named once in the heading; each row is one accepted span that opens its sources. */
.assessment-context-claims > .vehicle-region { padding: 14px 14px 6px; border: 1px solid var(--line); border-radius: 14px; background: #fff; scroll-margin-top: 100px; }
.assessment-context-claims > .vehicle-region + .vehicle-region { margin-top: 12px; }
.assessment .vehicle-region > h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; font-size: 15px; font-weight: 650; line-height: 1.35; }
.assessment .vehicle-region > h3:focus { outline: none; }
.assessment .vehicle-region > h3:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; border-radius: 6px; }
.vehicle-region:has(> h3:focus), .vehicle-region[data-active] { border-color: #b9b1f5; box-shadow: 0 0 0 3px rgba(79, 63, 230, .12); }
.vehicle-region-title { min-width: 0; }
.vehicle-region-badge { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--ink); color: #fff; font-size: 12.5px; font-weight: 700; line-height: 1; }
.vehicle-region-badge.vehicle-region-badge-none { border: 2px dashed var(--line-2); border-radius: 50%; background: transparent; }
.vehicle-region-count { flex: none; margin-left: auto; color: var(--ink-3); font-size: 12.5px; font-weight: 500; }
.assessment-context-group.vehicle-region > .plain > li + li { margin-top: 0; border-top: 1px solid var(--line); }
.vehicle-entry.assessment-evidence-button { align-items: center; gap: 12px; width: calc(100% + 16px); margin: 0 -8px; padding: 12px 8px; border: 0; border-radius: 10px; background: transparent; }
.vehicle-entry.assessment-evidence-button:hover { background: var(--slate-bg); }
.vehicle-region .vehicle-entry .assessment-evidence-text { display: grid; gap: 4px; justify-items: start; overflow: visible; }
.vehicle-entry strong { font-size: 14.5px; }
.vehicle-region .vehicle-map-kind { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--slate-bg); color: var(--ink-2); font-size: 12px; font-weight: 600; line-height: 1.6; }
.vehicle-entry:hover .vehicle-map-kind { background: #fff; }
.vehicle-entry-quote { color: var(--ink); font-size: 15px; line-height: 1.5; }
.vehicle-entry-meta { color: var(--ink-3); font-size: 12.5px; }
.vehicle-entry .assessment-evidence-more { font-size: 22px; font-weight: 400; line-height: 1; color: var(--ink-3); }
.vehicle-entry:hover .assessment-evidence-more { color: var(--blue); }
.vehicle-region > details { border-top: 1px solid var(--line); }
.vehicle-region > details > summary { padding: 11px 0; cursor: pointer; color: var(--blue-ink); font-size: 14px; font-weight: 600; }
.vehicle-map-systems { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px 16px; border: 1px dashed var(--line-2); border-radius: 14px; background: #fff; color: var(--ink-2); font-size: 14.5px; line-height: 1.5; }

/* Findings that name no part, the empty state and the way on to the full evidence. */
.assessment-context > .vehicle-map-unlocated { margin-top: 28px; max-width: 760px; }
.vehicle-map-unlocated > .note { margin-top: 8px; }
.vehicle-map-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; margin-top: 12px; font-size: 14px; }
.vehicle-map-foot > a, .vehicle-map-foot > .assessment-text-button { display: inline-flex; align-items: center; min-height: 44px; font-weight: 550; }
.vehicle-map-empty { margin-top: 16px; border: 1px dashed var(--line-2); border-radius: 14px; background: #fff; }
.vehicle-map-empty > summary { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 16px; color: var(--ink-2); font-size: 14.5px; font-weight: 550; cursor: pointer; list-style: none; }
.vehicle-map-empty > summary::-webkit-details-marker { display: none; }
.vehicle-map-empty > summary::before { content: ""; flex: none; width: 7px; height: 7px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(-45deg); }
.vehicle-map-empty[open] > summary::before { transform: rotate(45deg); }
.vehicle-map-empty > summary:focus-visible { outline-offset: -2px; }
.vehicle-map-empty > .assessment-map { margin: 0 12px 12px; }

/* Evidence sheet for one mapped span: back first, the span, its claim, then framed sources. */
.evidence-preview-head-back { justify-content: flex-start; align-items: center; gap: 14px; }
.evidence-preview-back { gap: 6px; padding-inline: 10px 14px; }
.evidence-preview-back > span { font-size: 22px; line-height: 1; }
.evidence-preview-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 18px; color: var(--ink-3); font-size: 13px; }
.evidence-preview-kind { padding: 2px 9px; border-radius: 999px; background: var(--slate-bg); color: var(--ink-2); font-size: 12px; font-weight: 600; }
.evidence-preview-claim > blockquote { margin: 0; padding: 14px 16px; border-left: 3px solid var(--ink); border-radius: 0 12px 12px 0; background: var(--slate-bg); color: var(--ink); font-size: 17px; line-height: 1.55; white-space: pre-wrap; }
.evidence-preview-claim > .sub { margin-top: 16px; }
.evidence-preview-claim > .evidence-preview-verbatim { margin-top: 4px; }
.evidence-preview-related { margin-top: 12px; }
.evidence-preview-related > summary { padding: 11px 0; cursor: pointer; font-size: 14px; font-weight: 600; }
.evidence-preview-sources { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.evidence-preview-sources > .note { margin: -4px 0 0; }
.evidence-preview-cited-source { margin-top: 12px; padding: 14px 16px 4px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.evidence-preview-cited-source > h4 { margin: 0 0 2px; color: var(--ink-3); font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.evidence-preview-source-label { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-weight: 600; }
.evidence-preview-cited-source .thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 132px), 1fr)); gap: 10px; margin: 12px 0 0; }
.evidence-preview-cited-source .thumbs > li { max-width: none; }
.evidence-preview-cited-source .thumb img { width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: 10px; }
.evidence-preview-cited-source .thumb-missing { min-height: 0; aspect-ratio: 4 / 3; }
.evidence-preview .evidence-preview-qualifications { padding: 8px 10px; border-left: 2px dashed #a9acb3; border-radius: 0 8px 8px 0; background: var(--slate-bg); }
.evidence-preview-full-source { margin-top: 10px; border-top: 1px solid var(--line); }
.evidence-preview-full-source > summary { padding: 11px 0; cursor: pointer; color: var(--blue-ink); font-size: 14px; font-weight: 600; }
.evidence-preview-full-source > blockquote { margin: 0 0 12px; padding: 12px 14px; border: 1px dashed var(--line-2); border-radius: 10px; background: #fafbfd; font-size: 14px; line-height: 1.6; white-space: pre-wrap; }

/* Saved photos stay in a native modal above the report or the still-mounted source sheet. */
button[data-photo-index] { padding: 0; border: 0; background: transparent; font: inherit; text-align: left; cursor: pointer; min-height: 44px; }
.photo-preview { padding: 0; width: min(1100px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); border: 1px solid var(--line); border-radius: 16px; color: var(--ink); background: #fff; overflow: auto; overscroll-behavior: contain; }
.photo-preview::backdrop { background: rgba(16, 16, 26, .72); }
.photo-preview-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--line); background: #fff; }
.photo-preview-head > div { min-width: 0; }
.photo-preview-head h2 { margin: 2px 0 0; font-size: 20px; }
.photo-preview-head .btn { flex: none; min-width: 44px; min-height: 44px; }
.photo-preview-body { padding: 12px 20px calc(16px + env(safe-area-inset-bottom)); }
.photo-preview-status, .photo-preview-body .note { margin: 0 0 10px; font-size: 13px; color: var(--ink-2); }
.photo-preview-body .note { margin: 10px 0 0; }
.photo-preview-image { display: block; width: 100%; height: min(68dvh, 780px); object-fit: contain; background: var(--slate-bg); }
.photo-preview-image[hidden] { display: none; }
@media (max-width: 600px) {
  .photo-preview { width: calc(100vw - 12px); max-height: calc(100dvh - 12px); border-radius: 12px; }
  .photo-preview-head { padding: 12px; gap: 8px; }
  .photo-preview-body { padding-inline: 10px; }
  .photo-preview-image { height: 62dvh; }
}
@media print { .photo-preview { display: none; } }

@media (max-width: 960px) {
  .vehicle-map-panel > .assessment-context-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .vehicle-map-views { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .vehicle-map-views .chip { justify-content: space-between; white-space: normal; text-align: left; }
  .vehicle-map-figure { padding: 12px 12px 10px; }
  .assessment-context-claims > .vehicle-region { padding: 12px 12px 4px; }
  .evidence-preview-claim > blockquote { padding: 12px 14px; font-size: 16px; }
  .evidence-preview-cited-source { padding: 12px 12px 4px; }
  .evidence-preview-cited-source .thumbs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: no-preference) {
  .vehicle-region-pin::before { transition: box-shadow 160ms ease; }
  .assessment-context-claims > .vehicle-region { transition: border-color 160ms ease, box-shadow 160ms ease; }
  .vehicle-map-views .chip { transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease; }
  .evidence-preview[open] { animation: evidence-preview-in 200ms cubic-bezier(.2, .8, .2, 1); }
  .evidence-preview[open]::backdrop { animation: evidence-backdrop-in 200ms ease-out; }
}
@keyframes evidence-preview-in { from { opacity: 0; transform: translateY(16px); } }
@keyframes evidence-backdrop-in { from { opacity: 0; } }
@media (forced-colors: active) {
  .vehicle-region-pin::before, .vehicle-region-badge, .vehicle-map-key-pin { border: 2px solid CanvasText; }
  .vehicle-map-views [aria-pressed="true"] { border-color: Highlight; }
  .vehicle-region-spread { border-color: CanvasText; }
  .vehicle-region-spot { background: CanvasText; }
}
@media print {
  .vehicle-map-views, .vehicle-map-foot, .assessment-map-pin.vehicle-region-pin { display: none; }
  .vehicle-region-spread, .vehicle-region-spot { display: none; }
  .vehicle-map-panel[hidden] { display: block; }
  .vehicle-map-orient { color: #000; }
}


/* Accepted topics: quiet rows, explicit evidence words and a native in-place sheet. */
.assessment .assessment-attention > h2 { margin-bottom: 6px; }
.attention-intro { margin: 0 0 18px; max-width: 72ch; }
.attention-list { margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: 14px; background: #fff; overflow: hidden; box-shadow: var(--report-shadow); }
.attention-list > li + li { border-top: 1px solid var(--line); }
.attention-topic { display: grid; grid-template-columns: minmax(0, 1fr) 24px; align-items: center; gap: 16px; width: 100%; min-height: 44px; margin: 0; padding: 17px 20px; border: 0; border-left: 3px solid transparent; background: transparent; text-align: left; color: var(--ink); font: inherit; cursor: pointer; }
.attention-topic:hover { background: #f8f8fc; }
.attention-topic:focus-visible { position: relative; outline: 3px solid var(--blue); outline-offset: -3px; }
.attention-topic[data-safety] { border-left-color: var(--rose-ink, #b42347); }
.attention-topic-body { display: grid; gap: 7px; min-width: 0; overflow-wrap: anywhere; }
.attention-topic-title { font-size: 16px; font-weight: 600; line-height: 1.45; letter-spacing: -.01em; }
.attention-topic-state, .attention-flags { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 8px; }
.attention-topic-state .badge { font-size: 11.5px; }
.attention-topic-state .badge[data-progress] { background: transparent; border-color: transparent; color: var(--ink-3); padding-left: 0; }
.attention-topic-more { color: var(--ink-3); font-size: 25px; line-height: 1; text-align: center; }
.attention-topic:hover .attention-topic-more { color: var(--blue-ink); }
.attention-flag { display: inline-block; font-size: 11px; font-weight: 650; line-height: 1.4; letter-spacing: .025em; color: var(--blue-ink); }
.attention-flag[data-flag="safety"] { color: var(--rose-ink, #b42347); }
.attention-flag + .attention-flag::before { content: "·"; margin-right: 8px; color: var(--ink-3); }
.assessment .attention-more { margin-top: 10px; }
.attention-more > summary { min-height: 44px; display: flex; align-items: center; }
.attention-more .attention-list { margin-top: 12px; box-shadow: none; }
.attention-foot { margin: 8px 0 0; }
.attention-foot > a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; }
.attention-safety-open { display: inline-flex; align-items: center; min-height: 44px; }
.assessment-safety-title { overflow-wrap: anywhere; }
.attention-preview .attention-section { margin-top: 24px; }
.attention-preview .attention-section + .attention-section { padding-top: 22px; border-top: 1px solid var(--line); }
.attention-preview .attention-section > h3 { margin: 0 0 12px; color: var(--ink-2); font-size: 13px; font-weight: 650; }
.attention-preview .evidence-preview-meta { gap: 8px; }
.attention-next-ref { padding: 14px 16px; border: 1px solid var(--blue-line); border-radius: 12px; background: var(--blue-bg); }
.attention-next-ref > p:first-child { margin-top: 0; }
.attention-next-ref .btn { background: #fff; }
.attention-steps { margin: 0; padding: 0; list-style: none; }
.attention-steps > li { padding: 8px 0; }
.attention-steps > li + li { border-top: 1px solid var(--line); }
.attention-steps > li > p:first-child { margin: 0; line-height: 1.6; white-space: pre-wrap; }
.attention-claim + .attention-claim { border-top: 1px solid var(--line); margin-top: 22px; padding-top: 20px; }
.attention-claim-head { display: flex; align-items: center; gap: 8px; margin: 0; }
.attention-claim-n { display: inline-grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink-3); font-size: 11px; }
.attention-preview .evidence-preview-verbatim { margin: 10px 0 16px; }
.attention-source > blockquote { margin: 10px 0 12px; padding: 0; border: 0; white-space: pre-wrap; font-size: 14px; line-height: 1.6; }
.attention-dependency { padding: 14px 0; }
.attention-dependency + .attention-dependency { border-top: 1px solid var(--line); }
.attention-preview summary { min-height: 44px; overflow-wrap: anywhere; }
.attention-places { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.attention-place { justify-content: flex-start; width: 100%; text-align: left; white-space: normal; padding: 10px 12px; }
.attention-place > span:last-child { min-width: 0; overflow-wrap: anywhere; }
div.vehicle-map-empty { margin-top: 16px; padding-top: 8px; }
div.vehicle-map-empty > .note { margin: 8px 16px 12px; }
@media (max-width: 600px) {
  .attention-topic { gap: 10px; padding: 15px 12px; }
  .attention-topic-title { font-size: 15px; }
  .attention-topic-state { gap: 5px; }
  .attention-next-ref { padding: 12px; }
  .attention-preview .attention-section + .attention-section { padding-top: 18px; }
  .attention-preview .btn { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
  .evidence-preview-head-back { align-items: flex-start; }
}
@media (prefers-reduced-motion: no-preference) {
  .attention-topic { transition: background-color 150ms ease; }
}
@media (forced-colors: active) {
  .attention-topic[data-safety] { border-left-color: CanvasText; }
}
@media print {
  .attention-topic { break-inside: avoid; }
  .attention-topic-more, .attention-foot, .attention-safety-open { display: none; }
}

/* Navigation orients the reader at the actual heading, with a clear margin above it. No global smooth scrolling:
   returns and body unlock are immediate, while explicit directional jumps choose native smooth behavior in JS. */
.assessment-report h2[id], .assessment-report h3, .src-group h3, .panel-title { scroll-margin-top: 100px; }
.report-return { margin: 10px 0 14px; min-height: 44px; max-width: 100%; }
[data-navigation-target] { outline: 3px solid var(--blue-line); outline-offset: 6px; border-radius: 6px; }
@media (prefers-reduced-motion: no-preference) {
  [data-navigation-target] { animation: report-target-in 180ms ease-out; }
}
@keyframes report-target-in { from { outline-color: transparent; } }
@media print { .report-return { display: none; } }

/* ---------- report polish: header, decision pair, sheet chrome and photo viewer ----------
   Presentation only; every word, status, link and control is the one rendered before. No new colour or motion. */
.assessment-eyebrow { text-wrap: balance; }

/* Case header: the same Refresh button sits in the breadcrumb row, so the meta line never wraps a lone 44 px row on a
   phone. The crumb link gets the full 44 px row as its target. */
.assessment-case .case-head { position: relative; }
.assessment-case .crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; min-height: 44px; margin: 0; padding-right: 112px; }
.assessment-case .crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
.assessment-case .case-head h1 { margin-top: 2px; }
.assessment-case .meta .btn { position: absolute; top: 0; right: 0; margin: 0; }

/* Decision pair: on wide screens both cards share one height and the verdict's note closes its card, so the pair reads
   as one decision row instead of a short card beside a long one. */
@media (min-width: 961px) {
  .assessment-decision-pair { align-items: stretch; }
  .assessment .summary { display: flex; flex-direction: column; }
  .assessment .summary > .summary-note { margin-top: auto; }
  .assessment .summary > :nth-last-child(2) { margin-bottom: 18px; }
}
/* The stored step is the content of the card, in ink at body weight; who and when read as one framed property line,
   because they are what separates an ordinary visit from independent diagnostics. */
.assessment .assessment-next > .assessment-next-text { color: var(--ink); font-size: 17px; }
.assessment-next .assessment-who { width: fit-content; max-width: 100%; margin: 4px 0 14px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--slate-bg); color: var(--ink); font-size: 14px; line-height: 1.5; }
.assessment-next .assessment-who strong { color: var(--ink-3); font-weight: 600; }

/* Sheets: a compact sticky bar (the way back or Close, and where the sheet belongs); the title opens the scrolling body.
   A long title therefore never fills the sticky area, also in iOS landscape. */
.evidence-preview-head { align-items: center; gap: 12px; min-height: 64px; padding: 10px 16px 10px 24px; }
.evidence-preview-head.evidence-preview-head-back { padding-left: 16px; }
.evidence-preview-head .btn, .photo-preview-head .btn { gap: 6px; }
.evidence-preview-context { flex: 1 1 auto; min-width: 0; color: var(--ink-3); font-size: 13px; font-weight: 550; line-height: 1.35; text-wrap: balance; }
.evidence-preview-heading { margin: 0 0 12px; font-size: 22px; line-height: 1.28; font-weight: 660; letter-spacing: -.014em; text-wrap: balance; overflow-wrap: anywhere; }
.evidence-preview-heading:focus:not(:focus-visible) { outline: none; }
/* The test-material notice is its own block between the title's statuses and the content. */
.evidence-preview-body > .banner { margin: 0 0 20px; }
.evidence-preview-body > .evidence-preview-meta { margin-bottom: 16px; }
/* Topic sheet sections read as headings, not as captions. */
.attention-preview .attention-section > h3 { color: var(--ink); font-size: 15px; font-weight: 650; letter-spacing: -.005em; }
.attention-next-ref { display: grid; gap: 10px; justify-items: start; }
.attention-next-ref > * { margin: 0; }
.attention-next-ref .assessment-who { margin: 0; color: var(--ink-2); font-size: 14px; }

/* Photo viewer: the whole image at its own proportions, no larger than the viewport allows, so the note stays in view
   and a landscape photo on a portrait phone has no tall empty bands. Still uncropped. */
.photo-preview-image { width: auto; max-width: 100%; height: auto; max-height: min(72dvh, calc(100dvh - 170px), 780px); margin-inline: auto; border-radius: 8px; }
.photo-preview-head { padding-inline: max(20px, env(safe-area-inset-left)) max(20px, env(safe-area-inset-right)); }
.photo-preview-body { padding-inline: max(20px, env(safe-area-inset-left)) max(20px, env(safe-area-inset-right)); }

@media (max-width: 600px) {
  .evidence-preview-head, .evidence-preview-head.evidence-preview-head-back { align-items: center; min-height: 56px; padding: 6px 12px; }
  .evidence-preview-heading { font-size: 19px; }
  .assessment .assessment-next > .assessment-next-text { font-size: 16px; }
  .photo-preview-head { padding-inline: 12px; }
  .photo-preview-body { padding-inline: 10px; }
  .photo-preview-image { max-height: min(70dvh, calc(100dvh - 150px)); }
}
@media (max-width: 480px) {
  .assessment-case .assessment-synthetic { font-size: 13.5px; }
  .assessment-price-status { padding: 6px 0 4px; }
}
@media print {
  .assessment-case .meta .btn { display: none; }
}

/* Photo viewer on a short, wide viewport (phone landscape, about 844x281 in Safari): the title and its saved-photo/version
   line share one row beside the 44 px button, and the status and caveat sit in a column next to the image instead of
   above and below it. The image gets the height that chrome used to take; it stays whole, and every line stays visible. */
@media (max-height: 500px) and (min-width: 560px) {
  .photo-preview { max-height: calc(100dvh - 12px); border-radius: 12px; }
  .photo-preview-head { padding-block: 4px; padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right)); }
  .photo-preview-head > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 12px; }
  .photo-preview-head h2 { order: -1; margin: 0; font-size: 17px; line-height: 1.3; }
  .photo-preview-head .assessment-eyebrow { margin: 0; }
  .photo-preview-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, 15rem); grid-template-rows: auto 1fr; gap: 8px 16px; align-items: start;
    padding: 8px max(16px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
  .photo-preview-image { grid-column: 1; grid-row: 1 / span 2; max-height: calc(100dvh - 80px - max(8px, env(safe-area-inset-bottom))); }
  .photo-preview-status, .photo-preview-body .note { grid-column: 2; margin: 0; }
  .photo-preview-status { grid-row: 1; }
  .photo-preview-body .note { grid-row: 2; }
  /* Failed image: the status and caveat take the full width. */
  .photo-preview-body:has(> .photo-preview-image[hidden]) { grid-template-columns: minmax(0, 1fr); }
  .photo-preview-body:has(> .photo-preview-image[hidden]) > p { grid-column: 1; }
}

/* ---------- three-level report (step4b): decision, grouped topics with two chips, topic sheet ---------- */
.assessment-who-row { display: block; }
.assessment-return { margin-top: 8px; color: var(--ink-2); }
.assessment-return-k, .attention-source-k { font-weight: 600; color: var(--ink); }
.assessment-safety-count { margin: 4px 0 8px; color: var(--ink-2); font-size: 14px; }
.assessment-highlight-open { margin-top: 6px; min-height: 44px; }
.assessment-gaps { border-left: 3px solid var(--amber-line); }
.assessment-gaps .sub { margin-top: 0; }
.attention-group { margin-top: 18px; min-width: 0; }
.attention-group-h { display: flex; align-items: baseline; gap: 8px; font-size: 15px; margin-bottom: 8px; }
.attention-group-count { color: var(--ink-3); font-weight: 500; }
.attention-group[data-topic-group="safety"] .attention-group-h { color: var(--red-ink); }
.attention-group-empty { margin: 0; }
.attention-item { display: grid; gap: 6px; min-width: 0; padding-bottom: 10px; border-bottom: 1px solid var(--line-2); }
.attention-item + .attention-item { padding-top: 10px; }
.topic-chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.topic-chip { display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; min-height: 44px; max-width: 100%; padding: 4px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); font: inherit; font-size: 13px; line-height: 1.3; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.topic-chip:hover { border-color: #c4c6cc; background: var(--slate-bg); }
.topic-chip:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.topic-chip-k { font-size: 11px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-3); }
.topic-chip-v { font-weight: 550; }
.topic-chip[data-source-kind="none"], .topic-chip[data-action-kind="no_step"], .topic-chip[data-action-kind="unclear"] { border-style: dashed; }
.topic-chip[data-source-kind="model_unreviewed"] { border-color: var(--amber-line); background: var(--amber-bg); }
.topic-chip[data-action-kind="closed"] { background: var(--slate-bg); }
.topic-chip-legend { margin-top: 14px; }
.topic-chip-legend li + li { margin-top: 4px; }
.attention-provenance { margin-bottom: 8px; }
.attention-source-origin { margin-top: 2px; }
.attention-source-record { margin-top: 6px; font-size: 13px; color: var(--ink-3); }
.attention-why-highlight { margin-top: 8px; padding-left: 10px; border-left: 3px solid var(--blue-line); }
.attention-closed { border-left: 3px solid var(--line); padding-left: 8px; }
.attention-section > h3:focus { outline: none; }
.attention-section > h3:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.evidence-preview-back { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; }
.evidence-preview-chevron { flex: none; display: block; }
/* Phone: the sheet takes the whole screen; its sticky bar keeps the visible way back. */
@media (max-width: 600px) {
  dialog.evidence-preview { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
  .topic-chip { flex: 1 1 calc(50% - 6px); }
}
@media (prefers-reduced-motion: no-preference) {
  .topic-chip { transition: background-color .12s ease, border-color .12s ease; }
}
/* Wider screens: the same native modal sheet is a side panel at the right edge, full height, with the report still visible
   beside it under the backdrop. Content width, the sticky way back, focus, scroll restore and the photo viewer above it
   are unchanged; the phone keeps the full-screen sheet above. */
@media (min-width: 601px) {
  dialog.evidence-preview { position: fixed; inset: 0 0 0 auto; width: min(760px, calc(100vw - 48px)); max-width: none; height: 100dvh; max-height: 100dvh; margin: 0 0 0 auto; border-width: 0 0 0 1px; border-radius: 18px 0 0 18px; }
}
@media (min-width: 601px) and (prefers-reduced-motion: no-preference) {
  dialog.evidence-preview[open] { animation-name: evidence-panel-in; }
}
@keyframes evidence-panel-in { from { opacity: 0; transform: translateX(24px); } }
.assessment-gap-highlight + .assessment-gap-highlight { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-2); }
.assessment-gap-highlight h3 { font-size: 15px; margin: 0 0 4px; }
.assessment-gaps > .sub + .note { margin-bottom: 10px; }