/* CarBluff Forensic Chartkit - dependency-free inline-SVG chart styles (2026-08-13).
Theme-aware (reads the style.css token set, so it retunes across all 11 palettes + light),
risk-color-locked (risk colours only on the risk pin/zone), reduced-motion-safe. Loaded only
on pages that render a chart. Ported from carbluff-team/design/viz-mockups. */
.chart-scroll { overflow-x: auto; max-width: 100%; margin-top: 18px; }
.ck-chart {
width: 100%; max-width: 100%; min-width: 0; height: auto; display: block;
font-family: var(--font-mono); font-variant-numeric: tabular-nums;
--ck-pin: var(--critical);
/* 2026-08-21, A11Y: the pin's LINE and DOT are graphics (3:1); .ck-pin-sub is 11px label TEXT
(4.5:1). Splitting them lets the ramp keep painting the instrument at full saturation while
the label takes the darker/lighter text shade of the SAME hue. Falls back to --ck-pin on any
page whose token set has no -deep shades, so nothing regresses. */
--ck-pin-text: var(--critical-deep, var(--critical));
}
.ck-tick { fill: var(--ink-3); font-size: 11px; letter-spacing: 0.04em; }
.ck-axis-title { fill: var(--ink-3); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
.ck-grid { stroke: var(--border); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ck-axis { stroke: var(--border); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.ck-line { fill: none; stroke: var(--ink); stroke-width: 2.2; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.ck-fill { fill: var(--ink-2); opacity: 0.10; }
.ck-thresh { stroke: var(--warn); stroke-width: 1.6; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.ck-thresh-lbl { fill: var(--warn-deep, var(--warn)); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.ck-zone { fill: var(--serious); opacity: 0.06; }
/* The one highlighted value ("this listing"): a risk-band colour set by a modifier class. */
.ck-pin { stroke: var(--ck-pin); stroke-width: 2; vector-effect: non-scaling-stroke; }
.ck-pin-dot { fill: var(--ck-pin); stroke: var(--panel); stroke-width: 2.5; }
.ck-pin-lbl { fill: var(--ink); font-size: 12px; font-weight: 700; }
.ck-pin-sub { fill: var(--ck-pin-text, var(--ck-pin)); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }
.ck-pin-good.ck-chart { --ck-pin: var(--good); --ck-pin-text: var(--good); }
.ck-pin-warn.ck-chart { --ck-pin: var(--warn); --ck-pin-text: var(--warn-deep, var(--warn)); }
.ck-pin-serious.ck-chart { --ck-pin: var(--serious); --ck-pin-text: var(--serious-deep, var(--serious)); }
.ck-pin-critical.ck-chart { --ck-pin: var(--critical); --ck-pin-text: var(--critical-deep, var(--critical)); }
.ck-caption { font-family: var(--font-head); color: var(--ink-3); font-size: 13px; margin-top: 14px; line-height: 1.55; max-width: 64ch; }
/* Narrow phone canvas headroom (B0 mobile clip fix): tighten only letter-spacing on the top-row
labels so they need less horizontal room. Font size stays at the authored 11-12px (never smaller),
and js/chartkit.js also clamps each label's x so nothing spills past the viewBox edge. */
@media (max-width: 560px) {
.ck-thresh-lbl { letter-spacing: 0.02em; }
.ck-pin-sub { letter-spacing: 0.02em; }
.ck-band-lbl { letter-spacing: 0.03em; }
}
@media (prefers-reduced-motion: no-preference) {
.ck-line { stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: ck-draw 1.1s cubic-bezier(.16, 1, .3, 1) .15s forwards; }
.ck-pin, .ck-pin-dot, .ck-pin-lbl, .ck-pin-sub { opacity: 0; animation: ck-fade .5s ease .95s forwards; }
.ck-fill { opacity: 0; animation: ck-fade-fill .6s ease .55s forwards; }
@keyframes ck-draw { to { stroke-dashoffset: 0; } }
@keyframes ck-fade { to { opacity: 1; } }
@keyframes ck-fade-fill { to { opacity: .10; } }
}
/* ---- Unified "Worth buying?" verdict (merges the Deal Score + Buyer's Caution) ----
The reconciled verdict leads; the reliability read + curve and the market comparison sit below.
Tones reuse the risk-scale tokens (buy-quality is a caution axis, not fraud). */
.wb-lead { margin-top: 16px; }
.wb-chip {
display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono);
font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
border: 1px solid currentColor; border-radius: var(--radius); padding: 6px 12px;
}
.wb-tone-pos { color: var(--good); }
.wb-tone-neutral { color: var(--ink-2); }
.wb-tone-warn { color: var(--serious-deep, var(--serious)); }
.wb-tone-bad { color: var(--critical-deep, var(--critical)); }
.wb-headline { font-family: var(--font-head); font-size: 18px; line-height: 1.4; color: var(--ink); margin-top: 12px; max-width: 62ch; }
.wb-lead-prompt { color: var(--ink-2); font-size: 15px; line-height: 1.5; margin-top: 12px; }
.wb-sub { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-top: 22px; }
.wb-bq { margin-top: 4px; }
.wb-bq .bq-inner { margin-top: 16px; }
.wb-deal { margin-top: 26px; border-top: 1px solid var(--border); padding-top: 22px; }
/* ============================================================================
Result-screen IA (2026-08-13): overall verdict hero + 3 expandable sub-scores.
Matches carbluff-team/design/viz-mockups/overall-score-result.html. Reuses the
existing .meter instrument from style.css; token-driven, theme-aware, reduced-motion-safe.
============================================================================ */
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
/* overall hero: conic ring + verdict */
.overall-hero {
border: var(--bw) solid var(--border); border-radius: 16px; background: var(--panel);
box-shadow: 0 30px 60px -34px rgba(0, 0, 0, 0.55); padding: 34px;
display: grid; grid-template-columns: auto 1fr; gap: 34px; align-items: center; margin-top: 8px;
}
.ring {
position: relative; width: 184px; height: 184px; border-radius: 50%; display: grid; place-items: center; flex: none;
background: conic-gradient(var(--ring-col, var(--ink-3)) calc(var(--pct, 0) * 1%), var(--border) 0);
transition: background 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
.ring::after { content: ""; position: absolute; inset: 13px; border-radius: 50%; background: var(--panel); }
.ring-inner { position: relative; z-index: 1; text-align: center; }
/* line-height + a hair of top padding so the big number's glyph top is never clipped (app parity). */
/* --font-mono resolves to a SANS face on every page that ships this instrument (Figtree on
index.html and before-you-buy.html, Hanken on the guide pages) - there is no monospace left in the
system. The caps tracking below was tuned for a mono face at 0.14em-0.22em, which is far too open
for Figtree at 10-11px, so the label rows read as spaced-out console output. Retuned to
0.07-0.08em.
2026-08-26 CORRECTION: this note used to end "Figtree ships tabular figures", and that is false.
Measured at 40px/700, Figtree's DEFAULT figures are proportional - "1" is 16.89px against "0" at
25.92px, a 9.03px spread - and only font-variant-numeric: tabular-nums pins them to a uniform
25.28px. So the property below is doing real work, not documenting a freebie: without it the 56px
score numeral changes width as it counts up. Hanken's figures ARE tabular by default (spread
0.00px), which is why the guide pages never showed the problem. Do not delete it as redundant. */
.ring-num { font-size: 56px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; padding-top: 3px; letter-spacing: -0.03em; color: var(--ink); }
.ring-den { font-size: 0.34em; color: var(--ink-3); font-weight: 400; }
/* 14px floor (design gate 2026-09-07): was 10px. This caption renders to EVERY guest on every
result screen, so it is not an unreachable declaration. The ring is 184px with a 158px inner
disc, so 14px "OVERALL" still clears the disc with room to spare. */
.ring-cap { font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-top: 6px; }
.verdict-block { min-width: 0; }
.verdict-chip {
display: inline-flex; align-items: center; gap: 10px; border: 1px solid currentColor; border-radius: 999px;
padding: 8px 16px; font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase;
}
/* CASCADE FIX (2026-08-28): the vehicle name sat ~18px (375px) to ~101px (540px) LEFT of the ring,
the verdict chip and the body copy on every mobile result, and wrapped "2017 Chevrolet Equinox"
onto two lines on desktop where 432px of room was free. Cause: this is an , and BOTH sheets
put a measure cap on the bare element - css/warm.css:467 `h1 { max-width: 15ch }` (the winner,
252.72px here) and css/style.css:278 `h1 { max-width: 24ch }`. .verdict-head restyled font, size
and text-transform but never re-declared max-width, so the cap survived. Under the <=720px rule
`.overall-hero { justify-items: center; text-align: center }` the h1's 252.72px BOX still starts
at the block's left edge (margin-left is 0), so text-align only centred the two lines against
each OTHER - the block as a whole hugged the left. The same defect was reported for the ad
creatives ("2018 Ford F-150"); that was only ever worked around by recapturing the screenshot,
never fixed in CSS, so the live result card never got it. A class selector (0,1,0) out-specifies
the bare `h1` (0,0,1) in both sheets, so this single declaration corrects both. margin-inline is
belt-and-braces: if any future rule reintroduces a cap, the box centres instead of drifting. */
.verdict-head { font-family: var(--font-head); font-size: 26px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; margin-top: 16px; text-transform: none; max-width: none; text-wrap: balance; }
/* A vehicle name is model badges, not prose, and the default greedy wrap breaks it at the internal
hyphen: "2014 Mercedes-Benz E-" / "Class" leaves a dangling "E-" and orphans one word. balance
distributes the lines instead, giving "2014 Mercedes-Benz" / "E-Class". Browsers without it fall
back to the greedy wrap, which is what shipped before, so there is nothing to guard. */
.verdict-sub { color: var(--ink-2); font-size: 16px; line-height: 1.55; margin-top: 10px; max-width: 56ch; }
.verdict-meta { font-size: 14px; color: var(--ink-3); letter-spacing: 0.02em; margin-top: 16px; }
/* sub-score row */
/* minmax(0,1fr) so all three columns stay exactly equal; plain 1fr lets a column with a long
single-word label (CONDITION) grow past its share and lopside the row. */
.subs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
/* Scoped to .subs so the result sub-score BUTTON affordance (border, cursor, hover, background)
never bleeds onto the hero's descriptive
on the homepage, which was making a
plain paragraph read/act like a clickable button that routes nowhere. */
/* 2026-08-21, A11Y: the sub-score card is a BUTTON on a panel-coloured ground, so its border is the
only thing that identifies it as a control - WCAG 2.1 SC 1.4.11 wants 3:1 for that boundary.
--border is the decorative hairline (measured 1.30:1 light, 1.33:1 dark against the card fill),
so it was, for contrast purposes, absent. --border-strong is the token that already carries real
control boundaries (inputs, scan-mode tabs) and is tuned to clear 3:1 in both warm themes. The
fallback covers the retired arm-A token set, which has no --border-strong. Hover still steps to
--ink-3 and .open still steps to --accent, so the three states stay distinct. */
.subs .sub {
text-align: left; cursor: pointer; background: var(--panel); color: inherit; font-family: inherit; min-width: 0;
border: var(--bw) solid var(--border-strong, var(--ink-3)); border-radius: 12px; padding: 16px 16px 15px;
display: flex; flex-direction: column; gap: 10px; transition: border-color 160ms ease, background 160ms ease;
}
.subs .sub:hover { border-color: var(--ink-3); }
.subs .sub.open { border-color: var(--accent); background: var(--panel-2); }
.subs .sub:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sub-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.sub-label { font-family: var(--font-mono); font-size: 14px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3); }
.sub-num { font-family: var(--font-mono); font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: -0.02em; }
.sub-den { font-size: 0.42em; color: var(--ink-3); font-weight: 400; }
.sub-bar { height: 5px; border-radius: 3px; background: var(--border); overflow: hidden; }
/* Animate the fill with transform (GPU-composited, no layout thrash), not width. */
.sub-bar > span { display: block; height: 100%; width: 100%; border-radius: 3px; transform-origin: left center; transform: scaleX(0); transition: transform 620ms cubic-bezier(0.16, 1, 0.3, 1); }
.sub-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sub-status { font-size: 14px; color: var(--ink-2); line-height: 1.35; }
.sub-chev { flex: none; color: var(--ink-3); transition: transform 220ms ease; display: inline-flex; }
.subs .sub.open .sub-chev { transform: rotate(180deg); color: var(--accent); }
/* expandable detail panels (full-width below the row) */
.detail { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 280ms cubic-bezier(0.16, 1, 0.3, 1); }
.detail.open { grid-template-rows: 1fr; margin-top: 14px; }
.detail > .detail-inner { overflow: hidden; }
.detail-card { border: var(--bw) solid var(--border); border-radius: 12px; background: var(--panel); padding: 22px; }
.detail-axis { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3); }
.detail-title { font-family: var(--font-head); font-size: 18px; font-weight: 600; letter-spacing: -0.01em; margin-top: 2px; }
.detail-body { color: var(--ink-2); font-size: 14.5px; line-height: 1.6; margin-top: 12px; }
.detail-card .btn { margin-top: 16px; }
/* meter ends (reuses .meter/.meter-track/.meter-seg/.meter-pin from style.css) */
.meter-ends { display: flex; justify-content: space-between; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink-3); margin-top: 10px; }
/* 2026-08-21, A11Y: .lo/.hi are 11px uppercase LABEL text, so they need 4.5:1, not the 3:1 the ramp
colours are tuned for as instrument paint. On warm light the raw --critical measured 4.24:1 on
--bg - the only ramp-as-text case left after the severity-chip pass. Same treatment as .sev and
the chart pin labels: the -deep TEXT shade of the SAME hue, with a fallback so the retired arm-A
token set (no -deep shades) resolves to exactly what it renders today. --good already resolves to
a text-safe shade in warm (5.01:1) and is left alone. */
.meter-ends .lo { color: var(--critical-deep, var(--critical)); }
.meter-ends .hi { color: var(--good); }
/* why-this-score flags inside a detail */
.why { margin-top: 18px; display: grid; gap: 10px; }
.why-item { display: flex; gap: 11px; align-items: flex-start; }
/* Any severity tag inside a detail card gets the pill box, not just the ones in .why. Previously a
second reason's .sev (outside .why) rendered as unstyled plain text. */
.detail-card .sev {
flex: none; align-self: flex-start; font-family: var(--font-mono); font-size: 14px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase;
padding: 3px 8px; border: 1px solid currentColor; border-radius: 8px; background: color-mix(in srgb, currentColor 13%, transparent);
}
/* 2026-08-21, A11Y: .sev is 10px uppercase label TEXT sitting on a 13%-of-itself tint, so the
effective ground is lighter/darker than the card and the ramp colours measured 2.92-3.80:1 in
light. Each rung takes its own -deep TEXT shade; the rung's hue is unchanged, so the ladder is
still read by hue, and border + tint still derive from currentColor, so the chip keeps its tint.
Fallbacks keep arm-A (css/style.css) pages, which have no -deep tokens, exactly as they were. */
.why .sev.critical, .detail-card .sev.critical { color: var(--critical-deep, var(--critical)); }
.why .sev.major, .detail-card .sev.major { color: var(--serious-deep, var(--serious)); }
.why .sev.moderate, .detail-card .sev.moderate { color: var(--warn-deep, var(--warn)); }
.why .sev.minor, .detail-card .sev.minor { color: var(--ink-2); }
.why .sev.info, .detail-card .sev.info { color: var(--accent-deep, var(--accent)); }
.why-text { font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.why-quote { display: block; font-family: var(--font-mono); font-size: 14px; color: var(--ink-3); margin-top: 6px; }
/* 14px, NOT 13px (2026-09-10, design gate M-10). This line carries a 48-character sentence ("No
known scam patterns detected across 55 checks.") in a mono face, and 13px failed the text-14px row
on both the desktop and the mobile sweep. It is one of the few positive statements in the whole
result, so it is exactly the wrong place to be the smallest text on screen. */
.clean-line { display: flex; align-items: center; gap: 10px; color: var(--good); font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.02em; margin-top: 16px; }
/* Reconcile note: a faint warn-tinted card (color-mix, like the flag tints), not a thick side bar. */
.detail-card .note {
font-family: var(--font-mono); font-size: 13px; color: var(--warn-deep, var(--warn)); line-height: 1.5; margin-top: 16px;
background: color-mix(in srgb, var(--warn) 8%, transparent);
border: 1px solid color-mix(in srgb, var(--warn) 26%, var(--border)); border-radius: 8px; padding: 11px 13px;
}
.detail-card .hold { border: 1px solid var(--critical); border-radius: 8px; padding: 14px 16px; color: var(--ink-2); font-size: 14px; line-height: 1.55; margin-top: 6px; }
.detail-card .hold b { color: var(--ink); }
/* condition 4-step scale.
2026-08-27: margin-top was 18px, the same step the inline body copy above it uses, so the
"Buy-quality read" text ran straight into the four numbered boxes with no change of rhythm.
Raised one step on the system scale (18 -> 24, the card-pad step in DESIGN.md) so the boxes
read as the next block rather than as a continuation of the sentence above them. */
.cond-scale { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 24px; }
.cond-step { border: 1px solid var(--border); border-radius: 8px; padding: 12px 10px; text-align: center; opacity: 0.5; }
.cond-step.on { opacity: 1; border-color: currentColor; background: color-mix(in srgb, currentColor 10%, transparent); }
.cond-step .cs-lvl { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.cond-step .cs-val { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 18px; font-weight: 700; margin-top: 4px; color: var(--ink); }
/* collapsed extras (recalls + your own checks) */
.extras { margin-top: 16px; display: grid; gap: 12px; }
details.extra-item { border: var(--bw) solid var(--border); border-radius: 12px; background: var(--panel); overflow: hidden; }
details.extra-item > summary { list-style: none; cursor: pointer; padding: 16px 18px; min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
details.extra-item > summary::-webkit-details-marker { display: none; }
.extra-item .item-name { font-family: var(--font-head); font-size: 15px; font-weight: 600; }
.extra-item .item-side { display: flex; align-items: center; gap: 12px; }
.extra-item .item-hint { font-size: 14px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink-3); }
.extra-item .item-chev { color: var(--ink-3); transition: transform 200ms ease; display: inline-flex; }
details.extra-item[open] .item-chev { transform: rotate(180deg); color: var(--accent); }
.extra-item .item-body { padding: 2px 18px 18px; border-top: var(--bw) solid var(--border); }
.kit-list { list-style: none; display: grid; gap: 10px; margin-top: 12px; }
.kit-list li { color: var(--ink-2); font-size: 14px; line-height: 1.55; }
.kit-list a { color: var(--accent-deep, var(--accent)); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 720px) {
.overall-hero { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 28px 22px; gap: 22px; }
/* Any capped block inside the centred stack must centre its BOX, not just its lines. .verdict-sub
is capped at 56ch; .verdict-head is uncapped above but is listed here so a re-introduced h1
measure cap can never drift it left again (the 2026-08-28 defect). */
.verdict-sub, .verdict-head { margin-left: auto; margin-right: auto; }
}
@media (max-width: 460px) {
/* The row stayed three-across at every width: this block used to shrink the gap, padding and type
but never the column count, so at 375px each card had ~89px of content and a status like
"Multiple fraud signals" broke to three lines of one word each, with the chevron shoved beside
the last word and the three cards ending at ragged unequal heights. One per row. */
.subs { grid-template-columns: 1fr; gap: 10px; }
.subs .sub { padding: 13px 11px; gap: 9px; }
.sub-label { letter-spacing: 0.03em; font-size: 14px; }
.sub-num { font-size: 24px; }
.sub-status { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
.ring, .sub-bar > span, .detail, .sub-chev, .extra-item .item-chev { transition: none !important; }
}
/* ============================================================================
Price-vs-comps chart + evolved-curve life-stage band labels + card mini-charts
(viz spec: scan-charts-price-upkeep). Token-driven; the ONLY risk-colored element
is the price pin (set by a pc- modifier), mirroring the curve's ck-pin-*.
============================================================================ */
.ck-band-lbl { fill: var(--ink-3); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.pc-rail { stroke: var(--border); stroke-width: 6; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.pc-iqr { fill: var(--ink-2); opacity: 0.16; }
.pc-iqr-edge { stroke: var(--ink-3); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0.5; }
.pc-median { stroke: var(--ink); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.pc-median-lbl { fill: var(--ink); font-size: 11.5px; font-weight: 700; }
.pc-median-sub { fill: var(--ink-3); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }
.pc-band-lbl { fill: var(--ink-3); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.pc-end { fill: var(--ink-3); font-size: 11px; }
.pc-pin { stroke: var(--pc-pin, var(--good)); stroke-width: 2; vector-effect: non-scaling-stroke; }
.pc-pin-dot { fill: var(--pc-pin, var(--good)); stroke: var(--panel); stroke-width: 2.5; }
.pc-pin-lbl { fill: var(--ink); font-size: 12px; font-weight: 700; }
.pc-pin-sub { fill: var(--pc-pin-text, var(--pc-pin, var(--good))); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; }
.pc-good { --pc-pin: var(--good); --pc-pin-text: var(--good); }
.pc-good-lt { --pc-pin: var(--good-lt); --pc-pin-text: var(--good); }
.pc-warn { --pc-pin: var(--warn); --pc-pin-text: var(--warn-deep, var(--warn)); }
.pc-serious { --pc-pin: var(--serious); --pc-pin-text: var(--serious-deep, var(--serious)); }
.pc-critical { --pc-pin: var(--critical); --pc-pin-text: var(--critical-deep, var(--critical)); }
/* upkeep-mini sparkline pin/threshold (the full curve keeps its ck-* classes). */
.uc-thresh { stroke: var(--warn); stroke-width: 1.5; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.uc-pin-dot { fill: var(--uc-pin, var(--critical)); stroke: var(--panel); stroke-width: 2; }
.uc-good { --uc-pin: var(--good); }
.uc-warn { --uc-pin: var(--warn); }
.uc-serious { --uc-pin: var(--serious); }
.uc-critical { --uc-pin: var(--critical); }
/* ~34px live mini-chart inside each sub-score card (surfacing plan 3a). Static (no draw-on). */
.mini { height: 34px; margin-top: 1px; display: flex; align-items: center; }
.mini svg { width: 100%; height: 100%; display: block; overflow: visible; }
.mini-thin { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
/* thin-comps honest degrade card (viz spec 1c). */
.thin { border: 1px dashed var(--border); border-radius: 10px; padding: 16px 18px; margin-top: 16px; color: var(--ink-2); font-size: 14px; line-height: 1.55; }
.thin .thin-h { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
/* "Report this scan" affordance at the bottom of the result + its modal. Token-driven, theme-aware. */
.report-scan { margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
/* 2026-08-21, A11Y: same class of defect as .subs .sub - a transparent-backed button whose only
boundary was the decorative --border hairline (1.21:1 light, 1.47:1 dark). Moved to the control
boundary token, with the arm-A fallback. */
.report-btn { font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.02em; color: var(--ink-2); background: transparent; border: var(--bw) solid var(--border-strong, var(--ink-3)); border-radius: var(--radius); padding: 10px 18px; min-height: 44px; cursor: pointer; }
.report-btn:hover { border-color: var(--ink-3); color: var(--ink); }
.report-hint { font-family: var(--font-mono); font-size: 14px; color: var(--ink-3); letter-spacing: 0.01em; }
.report-backdrop { position: fixed; inset: 0; background: color-mix(in srgb, var(--bg) 78%, transparent); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 1000; }
.report-modal { width: 100%; max-width: 480px; max-height: calc(100vh - 40px); overflow-y: auto; background: var(--panel); border: var(--bw) solid var(--border); border-radius: 16px; padding: 24px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.55); }
.report-title { font-family: var(--font-head); font-size: 19px; font-weight: 700; color: var(--ink); }
.report-sub { color: var(--ink-2); font-size: 14px; line-height: 1.5; margin-top: 8px; }
.report-text { width: 100%; margin-top: 14px; background: var(--bg); border: var(--bw) solid var(--border); border-radius: var(--radius); color: var(--ink); font-family: inherit; font-size: 15px; line-height: 1.5; padding: 12px; min-height: 96px; resize: vertical; }
/* 14px floor (design gate 2026-09-07): was 12.5px. Reachable by any guest from any result screen
via "Report this scan" then an empty "Send report". */
.report-msg { color: var(--critical); font-family: var(--font-mono); font-size: 14px; margin-top: 10px; }
.report-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
/* Deal detail inline missing-field entry (app parity): fill mileage/price/comp price + run here. */
.deal-inline { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.deal-inline-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.deal-inline-field span { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.deal-inline-field input { background: var(--bg); border: var(--bw) solid var(--border); border-radius: var(--radius); color: var(--ink); font-family: var(--font-mono); font-size: 14px; padding: 10px 12px; min-height: 44px; width: 100%; }
@media (max-width: 460px) { .deal-inline { grid-template-columns: 1fr; } }