/* COPIED FROM CC-DT_Inventory (see docs/design/SCORECARD-SOURCE.md); verbatim except
   one example figure in a comment. Do not edit here: page rules go in fixedops.css. */
/* Scorecard design system (Claude Design direction 1b, round 2 -- 2026-09-30).
   Source of truth: HANDOFF.md §4-§8 and the inline styles of
   "Round 2 - Scorecard Build.dc.html". Foundation-owned: pages put their own
   rules in static/pages/sc-<page>.css.

   EVERY CLASS IS sc- PREFIXED so the pages not yet converted are untouched.
   Tone classes: sc-t-<tone> = fill + text (tiles, cells, mini-cells),
                 sc-tx-<tone> = text only, sc-bg-<tone> = bar fill.
   Breakpoints (HANDOFF §7, tablet revised 2026-09-30): >840 desktop · 641-840 tablet
   (2-up unit cards, report columns marked sc-tab-hide drop, NO sideways scroll) ·
   <=640 phone layouts · <=379 unchanged from 390. */

:root {
  /* text */
  --sc-ink: #1B1F1E; --sc-body: #222927; --sc-sec: #5A6461; --sc-label: #6B7370; --sc-foot: #98A09D;
  /* surfaces */
  --sc-page: #F4F5F4; --sc-card: #FFFFFF; --sc-head: #F7F8F7; --sc-hover: #F6FAF9;
  --sc-fill: #EEF0EF; --sc-subtrack: #E3E6E4;
  /* borders */
  --sc-rule-card: #DDE1DF; --sc-rule-row: #E6E9E7; --sc-rule-ctl: #C9CFCC;
  /* dark */
  --sc-dark: #232B2A; --sc-dark-2: #3A4442; --sc-dark-3: #2E3836; --sc-on-dark: #B9C2BF;
  --sc-link-dark: #B9E0D7; --sc-red-dark: #F5A9A2; --sc-amber-dark: #F9C784; --sc-green-dark: #8FD3B6;
  /* teal */
  --sc-teal: #17A38C; --sc-link: #0E7C6B; --sc-link-hover: #128A76;
  /* red / amber / green */
  --sc-red: #B42318; --sc-red-fill: #FBE3E0; --sc-red-bar: #D9463A; --sc-red-border: #F1B8B1;
  --sc-amber: #B54708; --sc-amber-fill: #FDEBCB; --sc-amber-bar: #F2B866;
  --sc-green: #027A48; --sc-green-fill: #DCF3E6; --sc-green-bar: #8FD3B6; --sc-equity: #2FA57F;
  /* MAX risk dot */
  --sc-risk-yellow: #D9A400;
  /* shell notice */
  --sc-notice: #8A6D1F; --sc-notice-fill: #FBF3D9; --sc-notice-border: #E8D89A;
  --sc-mono: Consolas, 'Courier New', monospace;
}

/* ---- page wrapper ------------------------------------------------------ */
.content:has(> .sc-page) { padding: 20px 24px 40px; background: var(--sc-page); }
.sc-page { color: var(--sc-body); font-size: 13px; line-height: 1.5; font-variant-numeric: tabular-nums; min-width: 0; }
.sc-page--report { max-width: 1120px; }
:where(.sc-page) a { color: var(--sc-link); }
:where(.sc-page) a:hover { color: var(--sc-link-hover); }
.sc-mono { font-family: var(--sc-mono); }
.sc-muted { color: var(--sc-label); }
.sc-sub { display: block; font-size: 11px; color: var(--sc-label); font-weight: 400; }
.sc-num { text-align: right; }
.sc-center { text-align: center; }
@media (min-width: 841px) { .sc-ph-only { display: none !important; } }  /* 641-840: tablet block */

/* link figure: every count and dollar total is a link to its units */
.sc-link, a.sc-link { color: var(--sc-link); text-decoration: underline dotted; text-underline-offset: 2px; }
a.sc-link:hover { color: var(--sc-link-hover); }
.sc-open { color: var(--sc-link); font-size: 12px; font-weight: 600; text-decoration: none; white-space: nowrap; }

/* ---- tones ------------------------------------------------------------- */
.sc-t-green { background: var(--sc-green-fill); color: var(--sc-green); }
.sc-t-amber { background: var(--sc-amber-fill); color: var(--sc-amber); }
.sc-t-red { background: var(--sc-red-fill); color: var(--sc-red); }
.sc-t-neutral { background: var(--sc-fill); color: var(--sc-label); }
.sc-tx-green { color: var(--sc-green); } .sc-tx-amber { color: var(--sc-amber); }
.sc-tx-red { color: var(--sc-red); } .sc-tx-neutral { color: var(--sc-label); }
.sc-bg-green { background: var(--sc-green); } .sc-bg-teal { background: var(--sc-teal); }
.sc-bg-amber { background: var(--sc-amber); } .sc-bg-red { background: var(--sc-red); }
.sc-bg-neutral { background: var(--sc-rule-ctl); }
a.sc-t-green, a.sc-t-amber, a.sc-t-red, a.sc-t-neutral { text-decoration: none; }

/* state words: always lower-case, grey on #EEF0EF, weight 400 */
.sc-word { color: var(--sc-label); font-weight: 400; }
.sc-word.sc-tx-amber { color: var(--sc-amber); } .sc-word.sc-tx-red { color: var(--sc-red); }
.sc-word--chip { background: var(--sc-fill); padding: 1px 6px; border-radius: 3px; }

/* ---- group strip (dark) ----------------------------------------------- */
.sc-strip { background: var(--sc-dark); color: #fff; border-radius: 6px; padding: 16px 20px; display: flex; align-items: center; gap: 36px; margin-bottom: 16px; }
.sc-strip__fig { min-width: 0; }
.sc-strip__label { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--sc-on-dark); white-space: nowrap; }
.sc-strip__value { font-size: 30px; font-weight: 700; line-height: 1.1; white-space: nowrap; }
.sc-strip__value a { color: inherit; text-decoration: none; }
.sc-strip__value a:hover { text-decoration: underline dotted; }
.sc-strip__unit { font-size: 14px; font-weight: 400; color: var(--sc-on-dark); }
.sc-strip__def { margin-left: auto; font-size: 12px; color: var(--sc-on-dark); max-width: 300px; line-height: 1.4; }
.sc-strip__legend { margin-left: auto; display: flex; gap: 14px; font-size: 11px; color: #fff; white-space: nowrap; }
.sc-strip .sc-dk-red { color: var(--sc-red-dark); } .sc-strip .sc-dk-amber { color: var(--sc-amber-dark); }
.sc-strip .sc-dk-green { color: var(--sc-green-dark); }
.sc-dk-red { color: var(--sc-red-dark); } .sc-dk-amber { color: var(--sc-amber-dark); } .sc-dk-green { color: var(--sc-green-dark); }

/* ---- card -------------------------------------------------------------- */
.sc-card { background: var(--sc-card); border: 1px solid var(--sc-rule-card); border-radius: 6px; margin-bottom: 16px; overflow: hidden; }
.sc-report, .sc-report-ph { margin-bottom: 14px; }

/* store card header (dark) */
.sc-shead { background: var(--sc-dark); color: #fff; display: flex; align-items: center; gap: 28px; padding: 12px 18px; }
.sc-shead__id { min-width: 220px; }
.sc-shead__name { font-size: 17px; font-weight: 700; line-height: 1.2; }
.sc-shead__name a { color: inherit; text-decoration: none; }
.sc-shead__sub { font-size: 11px; color: var(--sc-on-dark); letter-spacing: .5px; margin-top: 2px; }
.sc-shead__kpis { display: flex; gap: 28px; }
.sc-kpi__label { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--sc-on-dark); white-space: nowrap; }
.sc-kpi__value { font-size: 20px; font-weight: 700; line-height: 1.2; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.sc-kpi__value a { color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.45); }
.sc-kpi__pill { margin-top: 3px; }
.sc-shead__link { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--sc-link-dark); text-decoration: none; white-space: nowrap; }
.sc-shead__link:hover { color: #fff; }
.sc-shead--plain { display: block; }  /* empty-state cards: name + sub only */

/* status dot (header KPIs, on dark) */
.sc-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.sc-dot--green { background: var(--sc-green); } .sc-dot--amber { background: var(--sc-amber); }
.sc-dot--red { background: var(--sc-red); } .sc-dot--neutral, .sc-dot--none { background: var(--sc-rule-ctl); }
.sc-dot--yellow { background: var(--sc-risk-yellow); }
/* MAX risk dot (8px, in rows) */
.sc-risk { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--sc-rule-ctl); }
.sc-risk--green { background: var(--sc-green); } .sc-risk--yellow { background: var(--sc-risk-yellow); }
.sc-risk--red { background: var(--sc-red); } .sc-risk--none { background: var(--sc-rule-ctl); }

/* ---- report (division) card ------------------------------------------- */
.sc-rhead, .sc-rrow { display: grid; grid-template-columns: var(--sc-rcols, 1fr 90px 260px 100px 110px 150px 100px); align-items: center; }
.sc-rhead { padding: 10px 18px 8px; border-bottom: 1px solid var(--sc-rule-card); font-size: 11px; font-weight: 700; color: var(--sc-sec); line-height: 1.2; }
.sc-rhead__title { font-size: 14px; color: var(--sc-ink); }
.sc-rrow { min-height: 50px; padding: 0 18px; border-bottom: 1px solid var(--sc-rule-row); font-size: 13px; }
.sc-rrow:hover { background: var(--sc-hover); }
.sc-rrow:last-child { border-bottom: 0; }
.sc-rrow__name { font-weight: 600; color: var(--sc-ink); min-width: 0; }
.sc-rrow__name a { color: inherit; text-decoration: none; }
.sc-rrow__name a:hover { color: var(--sc-link); }
.sc-rrow > .sc-bar, .sc-rrow > .sc-barwrap, .sc-rrow > .sc-stackwrap { margin: 0 12px; }
.sc-rtotal, .sc-rrow.sc-rtotal { min-height: 40px; background: var(--sc-head); font-weight: 700; border-bottom: 0; }
.sc-rtotal:hover { background: var(--sc-head); }
.sc-rtotal .sc-rrow__name { font-weight: 700; }
.sc-rtotal__meta { font-weight: 400; color: var(--sc-label); font-size: 11px; }
.sc-rrow .sc-c--l, .sc-rhead .sc-c--l { text-align: left; }
.sc-rrow .sc-c--r, .sc-rhead .sc-c--r { text-align: right; }
.sc-rrow .sc-c--c, .sc-rhead .sc-c--c { text-align: center; display: flex; justify-content: center; }
.sc-rhead .sc-c--c { display: block; }
.sc-rhead .sc-c--bar { padding: 0 12px; }

/* phone report rows: tile + text + bar */
.sc-phead { display: flex; align-items: baseline; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--sc-rule-card); font-size: 12px; color: var(--sc-sec); flex-wrap: wrap; }
.sc-phead__title { font-size: 14px; font-weight: 700; color: var(--sc-ink); }
.sc-prow { display: grid; grid-template-columns: var(--sc-pcols, 56px minmax(0,1fr) 52px); gap: 10px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--sc-rule-row); font-size: 13px; }
.sc-prow:last-child { border-bottom: 0; }
.sc-prow .sc-tile { height: 40px; width: 100%; min-width: 0; font-size: 15px; padding: 0 4px; }
.sc-prow__text { min-width: 0; }
.sc-prow__name { font-weight: 600; color: var(--sc-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-prow__name a { color: inherit; text-decoration: none; }
.sc-prow .sc-bar { height: 8px; margin: 3px 0; }
.sc-prow .sc-bar__mark { top: -2px; bottom: -2px; }
.sc-prow .sc-stack, .sc-prow .sc-two, .sc-prow .sc-cbar { height: 8px; margin: 3px 0; }
.sc-prow .sc-pill { font-size: 10px; min-width: 0; padding: 3px 0; }
.sc-ptotal { background: var(--sc-head); font-weight: 700; }
.sc-legend-codes { font-size: 11px; color: var(--sc-foot); margin-top: 4px; }

/* ---- list (unit rows) --------------------------------------------------- */
.sc-list { --sc-lead: 64px 64px; --sc-veh-min: 200px; }
.sc-list--nophoto { --sc-lead: 64px; }
.sc-lhead, .sc-lrow { display: grid; grid-template-columns: var(--sc-lead) minmax(var(--sc-veh-min), 1fr) var(--sc-figs, 88px 88px 88px 96px 84px 92px 72px 64px); }
.sc-lhead { font-size: 11px; font-weight: 700; color: var(--sc-sec); background: var(--sc-head); border-bottom: 1px solid var(--sc-rule-card); line-height: 1.2; align-items: end; }
.sc-lhead > * { padding: 8px 10px; }
.sc-lhead > .sc-lhead__blank { padding: 0; }
.sc-lhead .sc-num, .sc-lhead .sc-c--r { text-align: right; }
.sc-lhead a { color: inherit; text-decoration: none; }
.sc-lrow { align-items: stretch; border-top: 1px solid var(--sc-rule-row); font-size: 13px; min-height: 48px; }
.sc-lhead + .sc-lrow { border-top: 0; }
.sc-lrow:hover { background: var(--sc-hover); }
.sc-list--compact .sc-lrow { min-height: 38px; }
.sc-lrow__figs { display: contents; }
.sc-lrow__photo { display: flex; align-items: center; justify-content: center; overflow: hidden; }
.sc-lrow__veh { padding: 6px 10px; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.sc-lrow__title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-lrow__title b, .sc-lrow__title a { color: var(--sc-ink); font-weight: 700; text-decoration: none; }
.sc-lrow__title a:hover { color: var(--sc-link); }
.sc-lrow__trim { color: var(--sc-label); }
.sc-lrow__meta { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--sc-label); flex-wrap: wrap; }
.sc-lrow__meta .sc-flags { display: contents; }
.sc-lrow__price { font-weight: 700; font-size: 14px; white-space: nowrap; }

/* age tile: full row height, 64 wide, no radius (it is a cell) */
.sc-age { display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; }
a.sc-age { text-decoration: none; }

/* figure cell */
.sc-c { display: flex; align-items: center; justify-content: flex-end; padding: 0 10px; gap: 6px; min-width: 0; }
.sc-c--l { justify-content: flex-start; } .sc-c--c { justify-content: center; }
.sc-c--b { font-weight: 700; } .sc-c--sb { font-weight: 600; }
.sc-c.sc-word { font-weight: 400; }
.sc-c__l { display: none; }
.sc-c__v { min-width: 0; display: inline-flex; align-items: center; gap: 6px; }
.sc-c a { color: inherit; }
.sc-c.sc-t-neutral { color: var(--sc-label); }

/* photo thumb 52x36 */
.sc-thumb { width: 52px; height: 36px; border-radius: 3px; background: var(--sc-page); font-size: 7px; color: var(--sc-foot); display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1.1; overflow: hidden; flex: none; }
.sc-thumb--has { background: #CFD4D2; }
.sc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- tiles --------------------------------------------------------------- */
.sc-tile { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 32px; padding: 0 8px; border-radius: 4px; font-size: 16px; font-weight: 700; box-sizing: border-box; white-space: nowrap; text-decoration: none; }
a.sc-tile:hover { filter: brightness(.97); }
.sc-tile--wide { min-width: 60px; font-size: 15px; }
.sc-tile--ds { min-width: 56px; }
.sc-tile--money { min-width: 90px; font-size: 14px; }
.sc-tile--text { min-width: 60px; font-size: 14px; }
.sc-tile--small { min-width: 36px; height: 28px; font-size: 14px; }
.sc-tile--big { width: 56px; height: 40px; font-size: 20px; }

/* ---- bars (never carry text) -------------------------------------------- */
.sc-bar { position: relative; height: 18px; background: var(--sc-fill); border-radius: 3px; }
.sc-bar__fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; max-width: 100%; }
.sc-bar__mark { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--sc-dark); }
.sc-bar--sub { height: 10px; background: var(--sc-subtrack); }
.sc-bar--sub .sc-bar__mark { top: -3px; bottom: -3px; }
.sc-bar--ph { height: 8px; }
.sc-bar--ph .sc-bar__mark { top: -2px; bottom: -2px; }
.sc-ticks { display: flex; justify-content: space-between; font-size: 10px; color: var(--sc-foot); margin-top: 2px; line-height: 1.3; }
.sc-barwrap, .sc-stackwrap { min-width: 0; }

.sc-stack { display: flex; height: 18px; border-radius: 3px; overflow: hidden; background: var(--sc-fill); }
.sc-stack--sub { height: 10px; background: var(--sc-subtrack); }
.sc-stack > span { display: block; height: 100%; }
.sc-seg--g1 { background: var(--sc-green-bar); }   /* youngest / in band core */
.sc-seg--g2 { background: var(--sc-green-fill); }  /* second band */
.sc-seg--a { background: var(--sc-amber-bar); }
.sc-seg--r { background: var(--sc-red-bar); }
.sc-seg--n { background: var(--sc-fill); }
.sc-seg--teal { background: var(--sc-teal); }
.sc-seg--eq { background: var(--sc-equity); }
.sc-seg--sec { background: var(--sc-sec); }

.sc-two { position: relative; height: 18px; background: var(--sc-fill); border-radius: 3px; overflow: hidden; }
.sc-two--sub { height: 10px; background: var(--sc-subtrack); }
.sc-two__neg { position: absolute; right: 50%; top: 0; bottom: 0; background: var(--sc-red-bar); max-width: 50%; }
.sc-two__pos { position: absolute; left: 50%; top: 0; bottom: 0; background: var(--sc-equity); max-width: 50%; }
.sc-two__zero { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: var(--sc-dark); }

.sc-cbar { position: relative; height: 18px; border-radius: 3px; background: var(--sc-green-fill); overflow: hidden; }
.sc-cbar--sub { height: 10px; }
.sc-cbar__over { position: absolute; right: 0; top: 0; bottom: 0; background: var(--sc-red-bar); }
.sc-cbar-caption { display: flex; justify-content: space-between; font-size: 11px; color: var(--sc-label); margin-top: 2px; line-height: 1.3; }

/* ---- pills, chips, flags -------------------------------------------------- */
.sc-pill { display: inline-block; min-width: 44px; text-align: center; padding: 3px 8px; border-radius: 3px; font-size: 11px; font-weight: 700; letter-spacing: .5px; line-height: 1.5; box-sizing: border-box; }
.sc-pill--kpi { font-size: 14px; padding: 2px 10px; min-width: 0; }
.sc-chip { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; padding: 2px 7px; border-radius: 3px; line-height: 1.5; white-space: nowrap; }
.sc-snap { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--sc-notice); background: var(--sc-notice-fill); border: 1px solid var(--sc-notice-border); border-radius: 3px; padding: 1px 6px; white-space: nowrap; }
.sc-flags { display: flex; flex-wrap: wrap; gap: 4px; }
.sc-flag { font-size: 10px; padding: 0 5px; border-radius: 3px; line-height: 1.5; white-space: nowrap; }
.sc-flag--red { color: var(--sc-red); background: var(--sc-red-fill); }
.sc-flag--amber { color: var(--sc-amber); background: var(--sc-amber-fill); }
.sc-flag--neutral { color: var(--sc-label); background: var(--sc-fill); }

/* ---- toolbar ---------------------------------------------------------------- */
.sc-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; font-size: 12px; }
.sc-toolbar form { display: contents; }
.sc-ctl { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; height: 32px; padding: 0 10px; border: 1px solid var(--sc-rule-ctl); border-radius: 4px; background: #fff; color: var(--sc-body); font: inherit; font-size: 12px; box-sizing: border-box; }
select.sc-ctl, input.sc-ctl { width: auto; font-size: 12px; padding: 0 10px; min-height: 32px; }
select.sc-ctl { padding-right: 24px; }
.sc-toolbar select.sc-ctl, .sc-toolbar input.sc-ctl { width: auto; }
input.sc-ctl.sc-search { width: 280px; }
.sc-search { width: 280px; }
.sc-search::placeholder { color: var(--sc-foot); }
.sc-legend { margin-left: auto; display: flex; gap: 14px; font-size: 11px; color: var(--sc-sec); white-space: nowrap; flex-wrap: wrap; }
.sc-legend__group b { color: var(--sc-body); }
.sc-sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: -1px; margin: 0 2px 0 4px; }
.sc-sw--green { background: var(--sc-green-fill); } .sc-sw--amber { background: var(--sc-amber-fill); }
.sc-sw--red { background: var(--sc-red-fill); } .sc-sw--neutral { background: var(--sc-fill); }
.sc-sw--g1 { background: var(--sc-green-bar); } .sc-sw--g2 { background: var(--sc-green-fill); }
.sc-sw--a { background: var(--sc-amber-bar); } .sc-sw--r { background: var(--sc-red-bar); }
.sc-sw--eq { background: var(--sc-equity); }
.sc-strip .sc-sw--g2 { background: #F4FBF7; }
.sc-export { display: inline-block; background: var(--sc-teal); color: #fff !important; font-weight: 700; font-size: 12px; padding: 8px 14px; border-radius: 4px; text-decoration: none; white-space: nowrap; border: 0; cursor: pointer; line-height: 1.2; }
.sc-export:hover { background: var(--sc-link-hover); }
.sc-btn { display: inline-block; padding: 7px 14px; border-radius: 4px; font-size: 12px; font-weight: 700; text-decoration: none; cursor: pointer; line-height: 1.4; }
.sc-btn--teal { background: var(--sc-teal); color: #fff !important; border: 1px solid var(--sc-teal); }
.sc-btn--outline { border: 1px solid var(--sc-rule-ctl); color: var(--sc-body) !important; background: #fff; font-weight: 600; }
.sc-btn--reset { border: 1px solid var(--sc-teal); color: var(--sc-link) !important; background: #fff; }

/* ---- footers ------------------------------------------------------------------ */
.sc-coming { padding: 6px 18px; font-size: 11px; color: var(--sc-foot); font-style: italic; border-top: 1px dashed var(--sc-rule-card); }
.sc-foot { font-size: 11px; color: var(--sc-foot); line-height: 1.5; margin: 4px 0 0; }

/* ---- states (HANDOFF §8) --------------------------------------------------------- */
.sc-empty { padding: 36px 18px; text-align: center; }
.sc-empty__title { font-size: 15px; font-weight: 700; color: var(--sc-ink); }
.sc-empty__tile + .sc-empty__title { margin-top: 10px; }
.sc-empty__detail { font-size: 12px; color: var(--sc-sec); margin-top: 4px; }
.sc-empty__action { margin-top: 12px; }
.sc-banner { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; background: var(--sc-red-fill); border: 1px solid var(--sc-red-border); border-radius: 6px; font-size: 13px; margin-bottom: 12px; color: var(--sc-body); }
.sc-banner__mark { width: 20px; height: 20px; border-radius: 50%; background: var(--sc-red); color: #fff; font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center; flex: none; }
.sc-banner__title { color: var(--sc-red); font-weight: 700; }
.sc-banner__retry { color: var(--sc-link); font-weight: 600; margin-left: 6px; text-decoration: none; }
.sc-errcard { background: #fff; border: 1px solid var(--sc-rule-card); border-radius: 6px; padding: 40px 18px; text-align: center; margin-bottom: 16px; }
.sc-errcard__title { font-size: 16px; font-weight: 700; color: var(--sc-red); }
.sc-errcard__detail { font-size: 12px; color: var(--sc-sec); margin: 6px auto 0; max-width: 520px; }
.sc-errcard__actions { margin-top: 14px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* skeleton: card silhouette, no spinner, a slow opacity fade only */
@keyframes sc-fade { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.sc-skel { animation: sc-fade 2.4s ease-in-out infinite; }
.sc-skel__head { background: var(--sc-dark); display: flex; align-items: center; gap: 28px; padding: 14px 18px; }
.sc-skel__kpis { display: flex; gap: 28px; }
.sc-sk { display: block; border-radius: 3px; background: var(--sc-fill); }
.sc-sk--d1 { background: var(--sc-dark-2); } .sc-sk--d2 { background: var(--sc-dark-3); }
.sc-sk--l2 { background: var(--sc-page); }
.sc-skel__colhead { height: 30px; background: var(--sc-head); border-bottom: 1px solid var(--sc-rule-card); }
.sc-skel__row { display: grid; grid-template-columns: 64px 64px minmax(200px,1fr) 88px 88px 88px 96px 84px 92px 72px 64px; align-items: center; min-height: 48px; border-top: 1px solid var(--sc-rule-row); }
.sc-skel__row > * { margin: 0 10px; }
.sc-skel__row > .sc-skel__full { margin: 0; align-self: stretch; }
.sc-skel__caption { padding: 8px 18px; font-size: 11px; color: var(--sc-foot); }
.sc-skel__ph { display: none; }
@media (prefers-reduced-motion: reduce) { .sc-skel { animation: none; } }

/* ---- < 1200: hide the photo column on list rows ------------------------------------ */
@media (max-width: 1200px) {
  .sc-list:not(.sc-list--nophoto) { --sc-lead: 64px 0px; }
  .sc-list:not(.sc-list--nophoto) .sc-lrow__photo { visibility: hidden; }
  .sc-skel__row { grid-template-columns: 64px 0 minmax(200px,1fr) 88px 88px 88px 96px 84px 92px 72px 64px; }
}

/* ---- < 1000: the store-card KPI strip wraps ----------------------------------------- */
@media (max-width: 1000px) {
  .sc-shead { flex-wrap: wrap; row-gap: 8px; }
  .sc-shead__kpis { flex-wrap: wrap; row-gap: 8px; }
  .sc-legend { margin-left: 0; }
}

/* ---- <= 1300: the group strip's definition/legend take their own line ------------------
   (verify 2026-09-30) With the rail open, 1001-1300 left the figures squeezed beside the
   definition and a figure's sub-text ("of N with a market average") overprinted the next
   figure. From 641 up the label and sub-text also wrap INSIDE their own cell, so no width
   can overprint; the phone layout (<=640) is untouched. */
@media (max-width: 1300px) {
  .sc-strip { flex-wrap: wrap; row-gap: 12px; }
  .sc-strip__def, .sc-strip__legend { margin-left: 0; flex-basis: 100%; max-width: none; }
}
@media (min-width: 641px) and (max-width: 1300px) {
  .sc-strip__fig { min-width: 0; overflow-wrap: anywhere; }
  .sc-strip__label, .sc-strip__unit { white-space: normal; }
}

/* ---- visibility utilities (tablet agent, 2026-09-30) ----------------------------------
   sc-dt-only  hidden <=640            sc-ph-only  hidden >640 (but see list rows below)
   sc-tab-hide hidden 641-840 only     sc-tab-only shown 641-840 only
   Inside .sc-lrow at 641-840 the PHONE unit card is used, so there sc-ph-only shows and
   sc-dt-only hides. Everywhere else the tablet shows the desktop variant. */
@media (min-width: 841px) { .sc-tab-only { display: none !important; } }
@media (min-width: 641px) and (max-width: 840px) {
  .sc-tab-hide { display: none !important; }
  .sc-lrow .sc-dt-only { display: none !important; }
}

/* ---- <= 840: list rows become unit cards (phone card; 2-up on tablet, below) ---------- */
@media (max-width: 840px) {
  .sc-card { overflow: clip; }  /* clip, not hidden/auto: no sideways scroll, keeps position:sticky */
  .sc-shead { position: sticky; top: 0; z-index: 2; }

  /* unit card: 52x44 age tile, vehicle, price right, then a 3-col grid of mini-cells */
  .sc-lhead { display: none; }
  .sc-lrow { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; column-gap: 10px; align-items: center; align-content: start; padding: 10px 12px; min-height: 0; border-top: 1px solid var(--sc-rule-row); }
  .sc-lrow:hover { background: transparent; }
  .sc-lrow__photo { display: none; }
  .sc-lrow .sc-age { width: 52px; height: 44px; border-radius: 4px; grid-column: 1; grid-row: 1; }
  .sc-lrow__veh { grid-column: 2; grid-row: 1; padding: 0; }
  .sc-lrow__price { grid-column: 3; grid-row: 1; }
  .sc-lrow__meta .sc-flags { display: none; }
  .sc-lrow__figs { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 8px; line-height: 1.2; }
  .sc-lrow__figs > .sc-c { display: block; padding: 6px 8px; border-radius: 4px; background: var(--sc-fill); font-weight: 600; min-width: 0; }
  .sc-lrow__figs > .sc-c.sc-t-green { background: var(--sc-green-fill); } .sc-lrow__figs > .sc-c.sc-t-amber { background: var(--sc-amber-fill); }
  .sc-lrow__figs > .sc-c.sc-t-red { background: var(--sc-red-fill); }
  .sc-lrow__figs > .sc-c.sc-c--b { font-weight: 700; }
  .sc-lrow__figs > .sc-c.sc-word { font-weight: 400; }
  .sc-lrow__figs > .sc-c.sc-dt-only { display: none !important; }
  .sc-lrow .sc-c__l { display: block; font-size: 10px; letter-spacing: .5px; text-transform: uppercase; color: var(--sc-label); font-weight: 400; }
  .sc-lrow .sc-c__v { display: flex; align-items: center; gap: 5px; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sc-lrow .sc-c__v .sc-risk { width: 7px; height: 7px; }
  .sc-lrow__flags { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
  .sc-lrow__flags:empty { display: none !important; }
  .sc-lrow__flags .sc-flag { padding: 1px 6px; }

  .sc-toolbar { gap: 6px; }
  .sc-ctl { height: 40px; min-height: 40px; font-size: 12px; }
  input.sc-ctl { height: 40px; min-height: 40px; font-size: 16px; }
  .sc-export { display: inline-flex; align-items: center; min-height: 40px; box-sizing: border-box; }

  /* list skeleton uses the unit-card silhouette */
  .sc-skel__row { display: none; }
  .sc-skel__ph { display: block; padding: 10px 12px; }
  .sc-skel__colhead { display: none; }
}

/* ---- 641-840 tablet: a real middle layout (Jeremy, HANDOFF §9 item 21) ------------------ */
@media (min-width: 641px) and (max-width: 840px) {
  .content:has(> .sc-page) { padding: 16px 16px 40px; }
  /* sc-ph-only stays hidden at tablet except inside unit cards */
  .sc-ph-only:not(.sc-lrow *) { display: none !important; }

  /* group strip: 4 figures across from 760, 2x2 below; definition/legend on their own line */
  .sc-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 20px; padding: 14px 18px; align-items: end; }  /* wrapped labels: values stay on one line */
  .sc-strip__label { white-space: normal; letter-spacing: .5px; }
  .sc-strip__value { font-size: 26px; }
  .sc-strip__value--money { font-size: 21px; }
  .sc-strip__def, .sc-strip__legend { grid-column: 1 / -1; margin-left: 0; max-width: none; }
  .sc-strip__legend { flex-wrap: wrap; }

  /* store card header: desktop dark header; name/sub + link on line 1, KPIs one row of 4 (2x2 < 700) */
  .sc-shead { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 8px 16px; padding: 12px 16px; }
  .sc-shead__id { min-width: 0; grid-column: 1; grid-row: 1; display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; }
  .sc-shead__sub { margin-top: 0; }
  .sc-shead__link { grid-column: 2; grid-row: 1; margin-left: 0; align-self: center; }
  .sc-shead__kpis { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 16px; }
  .sc-shead--plain { display: block; }
  .sc-kpi { min-width: 0; }
  .sc-kpi__label { letter-spacing: .5px; }
  .sc-kpi__value { font-size: 18px; gap: 6px; }

  /* list: phone unit cards, two per row; everything that is not a row spans both */
  .sc-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sc-list > :not(.sc-lrow) { grid-column: 1 / -1; }
  .sc-list > .sc-lrow { border-top: 0; box-shadow: 1px 1px 0 var(--sc-rule-row); }  /* right + bottom rule; the card clips the outer edge */

  /* report: desktop row structure minus sc-tab-hide columns; pages set --sc-rcols-tab */
  .sc-rhead, .sc-rrow { grid-template-columns: var(--sc-rcols-tab, var(--sc-rcols, 1fr 90px 260px 100px 110px 150px 100px)); }
  .sc-rhead { padding: 10px 12px 8px; }
  .sc-rrow { padding: 0 12px; }
  .sc-rhead > * { min-width: 0; }
  .sc-rrow > .sc-bar, .sc-rrow > .sc-barwrap, .sc-rrow > .sc-stackwrap, .sc-rrow > .sc-two { margin: 0 8px; }
  .sc-rhead .sc-c--bar { padding: 0 8px; }
  .sc-rrow__name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding-right: 6px; }
  .sc-rrow__name .sc-sub { overflow: hidden; text-overflow: ellipsis; }
  .sc-rtotal .sc-rrow__name { white-space: normal; line-height: 1.25; }  /* total label + meta wrap, never clip */

  /* toolbar: wraps, 40px targets, 16px selects (no iOS zoom) */
  select.sc-ctl { height: 40px; min-height: 40px; font-size: 16px; }
  .sc-search, input.sc-ctl.sc-search { flex: 1 1 220px; width: auto; min-width: 0; }
  .sc-legend { flex-basis: 100%; order: 10; }

  .sc-skel__head { display: block; padding: 12px 16px; }
  .sc-skel__kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .sc-skel__kpis > .sc-sk { width: auto !important; margin-top: 10px; }
}
@media (min-width: 641px) and (max-width: 759px) {
  .sc-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 641px) and (max-width: 699px) {
  .sc-shead__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sc-skel__kpis { grid-template-columns: repeat(2, 1fr); }
}

/* ---- <= 640: phone layouts -------------------------------------------------------------- */
@media (max-width: 640px) {
  .content:has(> .sc-page) { padding: 12px 12px 40px; }
  .sc-dt-only, .sc-tab-only { display: none !important; }
  .sc-lhead, .sc-lrow, .sc-rhead, .sc-rrow { min-width: 0; }

  .sc-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; padding: 12px 14px; margin-bottom: 12px; }
  .sc-strip__label { letter-spacing: .5px; white-space: normal; }
  .sc-strip__value { font-size: 24px; }
  .sc-strip__value--money { font-size: 18px; }
  .sc-strip__unit { font-size: 12px; }
  .sc-strip__def { grid-column: 1 / -1; font-size: 11px; }
  .sc-strip__legend { grid-column: 1 / -1; flex-wrap: wrap; }

  .sc-shead { display: block; padding: 10px 12px; }
  .sc-shead__id { min-width: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
  .sc-shead__name { font-size: 16px; }
  .sc-shead__sub { margin-top: 0; letter-spacing: 0; }
  .sc-shead__kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 6px; }
  .sc-shead__kpis > .sc-kpi--dt { display: none; }
  .sc-kpi__label { letter-spacing: .5px; }
  .sc-kpi__value { font-size: 16px; gap: 6px; }
  .sc-kpi__value .sc-dot { width: 8px; height: 8px; }
  .sc-shead__link { display: none; }

  .sc-c__l { display: block; font-size: 10px; letter-spacing: .5px; text-transform: uppercase; color: var(--sc-label); font-weight: 400; }
  .sc-c__v { display: flex; align-items: center; gap: 5px; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sc-c__v .sc-risk { width: 7px; height: 7px; }

  .sc-toolbar { margin-bottom: 12px; }
  select.sc-ctl { height: 44px; min-height: 44px; font-size: 16px; }
  .sc-search, input.sc-ctl.sc-search { flex: 1; width: auto; min-width: 0; }
  .sc-legend { display: none; }

  .sc-empty { padding: 20px 14px; }
  .sc-errcard { padding: 24px 14px; }
  .sc-errcard__actions { flex-direction: column; }
  .sc-errcard__actions .sc-btn { display: block; padding: 11px 14px; }
  .sc-skel__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .sc-skel__kpis > .sc-sk { width: auto !important; margin-top: 10px; }
  .sc-skel__head { display: block; padding: 10px 12px; }
}

@media print {
  .sc-shead { position: static; }
  .sc-toolbar, .sc-export { display: none; }
}