/* Cybercab report page: the "scorecard" design (selected 2026-10-22, docs/dogfood-13.md).
   Loaded after articles.css and cybercab-fleet.css on this article only; every rule is scoped to
   the page, so other articles keep the site's charcoal and cream. Follows the reader's light or dark
   setting. Fonts are self-hosted under the SIL Open Font License (see /assets/fonts/OFL-*.txt). */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/bricolage-grotesque-latin.woff2") format("woff2");
}
@font-face {
  font-family: "DM Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/dm-mono-400-latin.woff2") format("woff2");
}

:root:has(body.cybercab-page) {
  --cc-bg: #eeefe9;
  --cc-surface: #f9f9f6;
  --cc-surface-2: #e3e5dc;
  --cc-field: #f9f9f6;
  --cc-line: #dcded4;
  --cc-line-strong: #bfc2b5;
  --cc-text: #161714;
  --cc-text-2: #565a4f;
  --cc-brand: #161714;
  --cc-accent: #cdf24e;
  --cc-accent-ink: #161714;
  --cc-link: #4b6a00;
  --cc-focus: #4b6a00;
  --cc-thumb: #161714;
  --cc-danger: #a3260f;
  --cc-danger-bg: #f3c8bc;
  --cc-danger-ink: #4a0f04;
  --cc-seg-tesla: #161714;
  --cc-seg-run: #74776c;
  --cc-seg-loan: #adb0a4;
  --cc-seg-save: #a9bf55;
  --cc-seg-keep: #cdf24e;
  --cc-keep-text: #161714;
  --cc-swatch-edge: rgba(22, 23, 20, .25);
  --cc-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --cc-mono: "DM Mono", ui-monospace, Menlo, monospace;
  --cc-radius: 18px;
  --cc-radius-sm: 10px;
  --cc-page: 1280px;
  --cc-gutter: clamp(16px, 4vw, 48px);
  background: var(--cc-bg);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:has(body.cybercab-page) {
    --cc-bg: #121310;
    --cc-surface: #1b1c18;
    --cc-surface-2: #24261f;
    --cc-field: #121310;
    --cc-line: #2c2e27;
    --cc-line-strong: #464a3e;
    --cc-text: #ecece4;
    --cc-text-2: #a5a897;
    --cc-brand: #cdf24e;
    --cc-link: #cdf24e;
    --cc-focus: #cdf24e;
    --cc-thumb: #cdf24e;
    --cc-danger: #ff8a6b;
    --cc-danger-bg: #ff8a6b;
    --cc-danger-ink: #121310;
    --cc-seg-tesla: #d9d9cc;
    --cc-seg-run: #80836f;
    --cc-seg-loan: #50534a;
    --cc-seg-save: #9fb24f;
    --cc-keep-text: #cdf24e;
    --cc-swatch-edge: transparent;
  }
}

/* Shell */
.cybercab-page { background: var(--cc-bg); color: var(--cc-text); font-family: var(--cc-display); }
.cybercab-page :focus-visible { outline-color: var(--cc-focus); }
.cybercab-page .skip { background: var(--cc-accent); color: var(--cc-accent-ink); }
.cybercab-page .articles-head, .cybercab-page .articles-foot { max-width: var(--cc-page); padding-left: var(--cc-gutter); padding-right: var(--cc-gutter); border-color: var(--cc-line); }
.cybercab-page .articles-brand, .cybercab-page .articles-foot > a { color: var(--cc-brand); font-family: var(--cc-display); letter-spacing: -.045em; }
.cybercab-page .articles-head nav { font-size: 14px; }
.cybercab-page .articles-head nav a { color: var(--cc-text-2); }
.cybercab-page .articles-head nav a[aria-current] { color: var(--cc-text); }
.cybercab-page .articles-foot { color: var(--cc-text-2); }
.cybercab-page .article-main { --gutter: max(var(--cc-gutter), calc((100vw - var(--cc-page)) / 2 + var(--cc-gutter))); background: var(--cc-bg); color: var(--cc-text); }
.cybercab-page .back-link { --ab-link: var(--cc-text-2); font-family: var(--cc-mono); }

/* Hero: words on the left, the yield on the right */
.cybercab-page .article-hero { display: grid; gap: 0 28px; align-items: end; padding: clamp(32px, 5vw, 56px) var(--gutter) clamp(28px, 4vw, 40px); }
.cybercab-page .article-hero .kicker { margin: 0 0 18px; color: var(--cc-text-2); font: 400 12px/1.4 var(--cc-mono); letter-spacing: .08em; }
.cybercab-page .article-hero .kicker span { color: var(--cc-text-2); }
.cybercab-page .article-hero h1 { max-width: 14ch; font: 700 clamp(40px, 5.4vw, 76px)/1 var(--cc-display); letter-spacing: -.04em; font-variation-settings: "opsz" 96; text-wrap: balance; }
.cc-answer-line { max-width: 46ch; margin: 28px 0 0; font-size: clamp(18px, 1.7vw, 21px); line-height: 1.5; color: var(--cc-text-2); text-wrap: pretty; }
.cc-answer-line [data-out] { color: var(--cc-text); font-weight: 500; font-variant-numeric: tabular-nums; }
.cc-answer-line strong[data-out] { padding: 0 .25em; border-radius: 6px; background: var(--cc-accent); color: var(--cc-accent-ink); font-weight: 650; }
.cc-yield { margin: 28px 0 0; padding: clamp(22px, 3vw, 32px); border-radius: var(--cc-radius); background: var(--cc-accent); color: var(--cc-accent-ink); container-type: inline-size; }
.cc-yield-num { display: block; font: 750 min(29cqi, 168px)/.86 var(--cc-display); letter-spacing: -.06em; font-variation-settings: "opsz" 96; font-variant-numeric: tabular-nums; }
.cc-yield-label { display: block; margin-top: 18px; font-size: 16px; line-height: 1.4; }
.cybercab-page .owner-edit-link { justify-self: start; color: var(--cc-link); border-bottom-color: currentColor; font-family: var(--cc-mono); }
.cc-negative .cc-yield { background: var(--cc-danger-bg); color: var(--cc-danger-ink); }
@media (min-width: 900px) {
  .cybercab-page .article-hero { grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr); column-gap: clamp(32px, 5vw, 72px); }
  .cybercab-page .article-hero > :not(.cc-yield) { grid-column: 1; }
  .cybercab-page .article-hero .cc-yield { grid-column: 2; grid-row: 1 / span 3; margin: 0; }
}

/* Scorecard: three figures, then where one car's fares go */
.cc-scorecard { display: grid; gap: 12px; padding: 0 var(--gutter); }
.cc-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cc-kpis { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 0; }
.cc-kpi { min-width: 0; padding: 22px 24px; border-radius: var(--cc-radius); background: var(--cc-surface); }
.cc-kpi dt { font-size: 13px; line-height: 1.35; color: var(--cc-text-2); }
.cc-kpi dd { margin: 10px 0 0; }
.cc-fig { display: block; font: 650 clamp(30px, 3.4vw, 44px)/1.05 var(--cc-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cc-fig-text { font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -.02em; }
.cc-sub { display: block; margin-top: 8px; font-size: 13px; line-height: 1.4; color: var(--cc-text-2); }
.cc-sub [data-out] { color: var(--cc-text); font-variant-numeric: tabular-nums; }
.cc-kpi-inverse { background: var(--cc-text); color: var(--cc-bg); }
.cc-kpi-inverse dt, .cc-kpi-inverse .cc-sub { color: color-mix(in srgb, var(--cc-bg) 72%, transparent); }
.cc-kpi-inverse .cc-sub [data-out] { color: var(--cc-bg); }
@media (min-width: 768px) { .cc-kpis { grid-template-columns: 1fr 1.3fr 1fr; } }

.cc-split { margin: 0; padding: 24px; border-radius: var(--cc-radius); background: var(--cc-surface-2); }
.cc-split figcaption { margin: 0 0 12px; font-size: 14px; line-height: 1.45; color: var(--cc-text-2); }
.cc-split figcaption [data-out] { color: var(--cc-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.cc-split-bar { display: flex; gap: 2px; height: 22px; border-radius: 999px; overflow: hidden; background: var(--cc-line); }
.cc-seg { flex: none; width: var(--w, 0%); background: var(--c); transition: width .45s cubic-bezier(.16, 1, .3, 1); }
[data-seg="tesla"], [data-key="tesla"] { --c: var(--cc-seg-tesla); }
[data-seg="run"], [data-key="run"] { --c: var(--cc-seg-run); }
[data-seg="loan"], [data-key="loan"] { --c: var(--cc-seg-loan); }
[data-seg="save"], [data-key="save"] { --c: var(--cc-seg-save); }
[data-seg="keep"], [data-key="keep"] { --c: var(--cc-seg-keep); }
.cc-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 12px 18px; margin: 14px 0 0; padding: 0; list-style: none; }
.cc-legend li { position: relative; display: flex; flex-direction: column; gap: 2px; padding-left: 16px; font-size: 13px; line-height: 1.35; color: var(--cc-text-2); }
.cc-legend li[hidden] { display: none; }
.cc-legend li::before { content: ""; position: absolute; left: 0; top: .3em; width: 9px; height: 9px; border-radius: 2px; background: var(--c); box-shadow: inset 0 0 0 1px var(--cc-swatch-edge); }
.cc-legend b { font: 600 16px/1.3 var(--cc-display); color: var(--cc-text); font-variant-numeric: tabular-nums; }
.cc-legend [data-key="keep"] b { color: var(--cc-keep-text); }
.cc-note { max-width: 60ch; margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--cc-text-2); }

/* Article body: the intro, the report and the sources share one reading column */
.cybercab-page .article-body { padding: clamp(40px, 6vw, 72px) max(var(--cc-gutter), calc((100% - 760px) / 2)) 96px; background: var(--cc-bg); color: var(--cc-text); font: 400 18px/1.65 var(--cc-display); }
.cybercab-page .article-body :focus-visible { outline-color: var(--cc-focus); }
.cybercab-page .article-body a { border-bottom-color: var(--cc-link); }
.cybercab-page .article-body h2 { border-top-color: var(--cc-line-strong); font-family: var(--cc-display); font-weight: 650; letter-spacing: -.025em; }
.cybercab-page .article-body h2::before { content: none; }
.cybercab-page .article-body table { font-family: var(--cc-display); }
.cybercab-page .article-body > ul { font-size: 15px; line-height: 1.6; color: var(--cc-text-2); }
.cybercab-page .article-body > ul a { color: var(--cc-text); }

/* The report: remap its tokens, then restyle its panels, fields and tables */
.cybercab-page .cybercab-report {
  --ink: var(--cc-text);
  --paper: var(--cc-bg);
  --paper-deep: var(--cc-line);
  --lime: var(--cc-accent);
  --lime-wash: var(--cc-surface);
  --muted: var(--cc-text-2);
  --olive: var(--cc-link);
  --serif-display: var(--cc-display);
  --serif-text: var(--cc-display);
  --mono: var(--cc-mono);
  font-size: 17px;
}
.cybercab-page .cybercab-report :focus-visible { outline: 2px solid var(--cc-focus); outline-offset: 3px; box-shadow: none; }
.cybercab-page .cybercab-report h2 { font-weight: 650; letter-spacing: -.025em; font-size: clamp(28px, 3.4vw, 38px); }
.cybercab-page .cybercab-report h3 { font-weight: 600; letter-spacing: -.015em; }
.cybercab-page .cybercab-report .flow li:last-child .op { color: var(--cc-accent-ink); }
.cybercab-page .cybercab-report .fleet { border: 0; border-radius: var(--cc-radius); background: var(--cc-surface); padding: clamp(18px, 3vw, 28px); }
.cybercab-page .cybercab-report .fleet .ff label { font-weight: 500; }
.cybercab-page .cybercab-report input[type=number], .cybercab-page .cybercab-report select {
  font: 500 16px/1.3 var(--cc-display); font-variant-numeric: tabular-nums;
  color: var(--cc-text); background: var(--cc-field); border: 1px solid var(--cc-line-strong); border-radius: var(--cc-radius-sm);
  padding: .55rem .7rem; min-height: 2.75rem;
}
.cybercab-page .cybercab-report .charging .spots-row input[type=number] { font: 500 1.6rem/1 var(--cc-display); }
.cybercab-page .cybercab-report input[type=number]:focus, .cybercab-page .cybercab-report select:focus { border-color: var(--cc-focus); }
.cybercab-page .cybercab-report .charging .reset { background: var(--cc-field); border-color: var(--cc-line-strong); color: var(--cc-text); border-radius: var(--cc-radius-sm); }
.cybercab-page .cybercab-report input[type=range] { -webkit-appearance: none; appearance: none; background: transparent; height: 2.75rem; cursor: pointer; }
.cybercab-page .cybercab-report input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 999px; background: var(--cc-line-strong); }
.cybercab-page .cybercab-report input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -8px; border-radius: 50%; background: var(--cc-thumb); border: 3px solid var(--cc-bg); box-shadow: 0 0 0 1px var(--cc-thumb); transition: transform .2s cubic-bezier(.16, 1, .3, 1); }
.cybercab-page .cybercab-report input[type=range]:active::-webkit-slider-thumb { transform: scale(1.15); }
.cybercab-page .cybercab-report input[type=range]::-moz-range-track { height: 4px; border-radius: 999px; background: var(--cc-line-strong); }
.cybercab-page .cybercab-report input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--cc-thumb); border: 3px solid var(--cc-bg); box-shadow: 0 0 0 1px var(--cc-thumb); }
.cybercab-page .cybercab-report input[type=range]:disabled { opacity: .4; }
.cybercab-page .cybercab-report input[type=radio], .cybercab-page .cybercab-report input[type=checkbox] { accent-color: var(--cc-thumb); }
.cybercab-page .cybercab-report .err, .cybercab-page .cybercab-report .charging .err { color: var(--cc-danger); }
.cybercab-page .cybercab-report [aria-invalid=true] { border-color: var(--cc-danger); }
.cybercab-page .cybercab-report .charging hr { border-top-color: var(--cc-line-strong); opacity: 1; }
.cybercab-page .cybercab-report .charging details, .cybercab-page .cybercab-report .charging details:last-of-type { border-color: var(--cc-line); }
.cybercab-page .cybercab-report .charging .group { border-top-color: var(--cc-line); }
.cybercab-page .cybercab-report .charging th, .cybercab-page .cybercab-report .charging td { border-bottom-color: var(--cc-line); }
.cybercab-page .cybercab-report .charging .flag.warn { background: var(--cc-text); color: var(--cc-bg); }
.cybercab-page .cybercab-report .charging .status { color: var(--cc-accent-ink); }
.cybercab-page .cybercab-report .charging .illustrative { color: var(--cc-text); }
.cybercab-page .cybercab-report table.sum, .cybercab-page .cybercab-report .fleet table { border-top: 1px solid var(--cc-line-strong); }
.cybercab-page .cybercab-report table.sum tr.total th, .cybercab-page .cybercab-report table.sum tr.total td { border-bottom-color: var(--cc-line-strong); }
.cybercab-page .cybercab-report table.sum td, .cybercab-page .cybercab-report .fleet td { font-family: var(--cc-display); font-variant-numeric: tabular-nums; }
.cybercab-page .cybercab-report .fleet-status { top: 0; }

/* The disclosure that holds running costs and charging */
.cybercab-page .cybercab-report .tune { margin-top: clamp(48px, 7vw, 72px); border-radius: var(--cc-radius); background: var(--cc-surface); }
.cybercab-page .cybercab-report .tune > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px clamp(18px, 3vw, 28px); cursor: pointer; list-style: none; font: 600 20px/1.3 var(--cc-display); letter-spacing: -.01em; }
.cybercab-page .cybercab-report .tune > summary::-webkit-details-marker { display: none; }
.cybercab-page .cybercab-report .tune > summary::after { content: "+"; font: 400 28px/1 var(--cc-display); color: var(--cc-text-2); transition: transform .3s cubic-bezier(.16, 1, .3, 1); }
.cybercab-page .cybercab-report .tune[open] > summary::after { transform: rotate(45deg); }
.cybercab-page .cybercab-report .tune > section { padding: 8px clamp(18px, 3vw, 28px) 28px; }
.cybercab-page .cybercab-report .tune .fleet { background: var(--cc-bg); }

@media (prefers-reduced-motion: reduce) {
  .cc-seg, .cybercab-page .cybercab-report .tune > summary::after, .cybercab-page .cybercab-report input[type=range]::-webkit-slider-thumb { transition: none; }
}
@media print {
  .cc-yield, .cc-kpi-inverse, .cc-seg { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}