/* Cero Kilómetros — the look of an instrument cluster: asphalt panels, condensed
   gauge type, one redline accent. Chart series use the validated data palette
   (slots .s1–.s4); the accent never carries data. Dark and light are each chosen,
   not flipped: the OS setting decides unless the reader picks one (theme.js). */

@font-face { font-family: Barlow; src: url(/fonts/Barlow-latin-400.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: Barlow; src: url(/fonts/Barlow-latin-500.woff2) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: Barlow; src: url(/fonts/Barlow-latin-500i.woff2) format('woff2'); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: Barlow; src: url(/fonts/Barlow-latin-600.woff2) format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url(/fonts/BarlowCondensed-latin-500.woff2) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url(/fonts/BarlowCondensed-latin-600.woff2) format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url(/fonts/BarlowCondensed-latin-700.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url(/fonts/BarlowCondensed-latin-700i.woff2) format('woff2'); font-weight: 700; font-style: italic; font-display: swap; }

:root {
  color-scheme: light;
  --page: #efeee9;
  --panel: #fcfcfb;
  --panel-2: #f4f3ef;
  --ink: #0f1012;
  --dim: #4a4a47;
  --mute: #74736e;
  --rule: #dddcd5;
  --grid: #e1e0d9;
  --axis: #c3c2b7;
  --accent: #d63a0a;        /* redline */
  --accent-ink: #b32f06;    /* accent as text, 5.3:1 on panel */
  --accent-wash: rgba(214, 58, 10, 0.08);
  --up: #006300;
  --down: #b3261e;
  --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100;
  --cluster: #15171b;       /* the header strip stays dark in both modes */
  --cluster-ink: #eceae4;
  --cluster-dim: #9a988f;
  --cond: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --sans: Barlow, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --r: 10px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page: #0b0c0e; --panel: #15171b; --panel-2: #1b1e23; --ink: #eceae4; --dim: #c3c2b7; --mute: #8d8b84;
    --rule: #272a30; --grid: #24272c; --axis: #3a3d43; --accent: #ff5a1f; --accent-ink: #ff7a45;
    --accent-wash: rgba(255, 90, 31, 0.10); --up: #3cc13c; --down: #ff6b5e;
    --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500;
    --cluster: #08090a;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0b0c0e; --panel: #15171b; --panel-2: #1b1e23; --ink: #eceae4; --dim: #c3c2b7; --mute: #8d8b84;
  --rule: #272a30; --grid: #24272c; --axis: #3a3d43; --accent: #ff5a1f; --accent-ink: #ff7a45;
  --accent-wash: rgba(255, 90, 31, 0.10); --up: #3cc13c; --down: #ff6b5e;
  --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500;
  --cluster: #08090a;
}

* { box-sizing: border-box; }
html { scrollbar-color: var(--axis) var(--page); }
.toc ol, .nav, .table-wrap { scrollbar-width: thin; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--page); color: var(--ink); font: 400 16px/1.5 var(--sans); }
a { color: inherit; text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-ink); text-decoration-color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
@media (max-width: 640px) { .wrap { padding: 0 16px; } }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 8px; z-index: 9; background: var(--panel); padding: 6px 10px; }

/* ---------- Header: the instrument strip ---------- */
.top { background: var(--cluster); color: var(--cluster-ink); position: relative; }
.top::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, var(--accent) 0 18%, transparent 18% 19%, var(--accent) 19% 22%, transparent 22%); }
.top .wrap { display: flex; align-items: center; gap: 24px; min-height: 64px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.odo { display: inline-flex; gap: 2px; padding: 3px; border-radius: 5px; background: #000; box-shadow: inset 0 0 0 1px #2b2e33; }
.odo b { font: 600 17px/1 var(--cond); width: 13px; padding: 4px 0 3px; text-align: center; color: #f4f2ec;
  background: linear-gradient(#26292e, #111 50%, #1d2024); border-radius: 2px; }
.odo b.last { color: var(--accent); background: linear-gradient(#2a1a14, #120a07 50%, #24160f); }
.brand .wm { font: italic 700 22px/1 var(--cond); letter-spacing: 0.02em; text-transform: uppercase; }
.brand .wm span { color: var(--accent); }
.nav { display: flex; gap: 4px; flex-wrap: wrap; margin-left: auto; }
.nav a { font: 600 15px/1 var(--cond); text-transform: uppercase; letter-spacing: 0.06em; text-decoration: none;
  color: var(--cluster-dim); padding: 10px 10px; border-radius: 6px; }
.nav a:hover, .nav a[aria-current] { color: var(--cluster-ink); background: rgba(255,255,255,0.06); }
.nav a[aria-current] { box-shadow: inset 0 -2px 0 var(--accent); }
.theme-btn, .top .lang { background: none; border: 1px solid #33363c; color: var(--cluster-dim); border-radius: 6px; padding: 6px 8px;
  font: 600 13px/1 var(--cond); text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer; text-decoration: none; }
.top .lang:hover, .theme-btn:hover { color: var(--cluster-ink); border-color: var(--cluster-dim); }
.top .lang .short { display: none; }
/* The theme button's icon: half a disc for automatic, a full disc for light, a crescent for dark. */
.theme-btn { display: inline-flex; align-items: center; gap: 6px; }
.theme-btn .ti { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid currentColor; flex: none;
  background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.theme-btn[data-state="light"] .ti { background: currentColor; }
.theme-btn[data-state="dark"] .ti { background: none; border: 0; box-shadow: inset -4px -1px 0 0 currentColor; transform: rotate(-20deg); }
/* When the brand, the sections and the two buttons don't fit on one line, the
   sections get a scrolling row of their own; on phones the brand shrinks and the
   language switch shows EN / ES. */
@media (max-width: 1100px) {
  .top .wrap { gap: 8px 16px; padding-top: 10px; }
  .top .lang { order: 2; margin-left: auto; }
  .theme-btn { order: 2; }
  .nav { order: 3; margin-left: 0; width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 8px; scrollbar-width: none; }
}
@media (max-width: 760px) {
  .top .wrap { column-gap: 10px; }
  .brand { gap: 8px; }
  .odo b { width: 11px; font-size: 15px; }
  .brand .wm { font-size: 20px; }
  .top .lang .long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .top .lang .short { display: inline; }
  .theme-btn .tl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}

/* ---------- Page head ---------- */
.hero { padding: 34px 0 10px; }
.kicker { font: 600 14px/1 var(--cond); text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent-ink); margin: 0 0 10px; }
h1 { font: italic 700 clamp(34px, 5.4vw, 60px)/0.98 var(--cond); text-transform: uppercase; letter-spacing: 0.005em; margin: 0 0 14px; }
.lead { font-size: 18px; color: var(--dim); max-width: 68ch; margin: 0 0 10px; }
.crumbs { font-size: 14px; color: var(--mute); margin: 0 0 8px; }
.crumbs a { color: var(--mute); }

/* Section heads: a skewed livery stripe before the title, or the section's number
   in a gear-indicator box where the page has a section index. */
section { margin: 34px 0; scroll-margin-top: 16px; }
h2 { font: 700 30px/1.1 var(--cond); letter-spacing: 0.005em; margin: 0 0 6px; display: flex; align-items: center; gap: 12px; }
h2::before { content: ''; width: 26px; height: 10px; flex: none; background: linear-gradient(90deg, var(--accent) 0 60%, transparent 60% 72%, var(--accent) 72%); transform: skewX(-24deg); }
h2:has(.no)::before { display: none; }
h2 .no { font: 600 15px/1 var(--cond); font-variant-numeric: tabular-nums; color: var(--accent-ink); background: var(--panel); border: 1px solid var(--rule);
  border-bottom: 2px solid var(--accent); border-radius: 5px; padding: 5px 6px 3px; letter-spacing: 0.04em; }
h3 { font: 600 17px/1.25 var(--sans); margin: 0 0 8px; }
/* A figure's head row: what it is on the left, its scope and unit on the right. */
.ph { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 16px; flex-wrap: wrap; margin: 0 0 10px; }
.ph h3 { margin: 0; }
.ph .meta { font-size: 13px; color: var(--mute); }
.ph + .sub { margin-top: -4px; font-size: 14.5px; }
.more { margin: 12px 0 0; font-size: 14.5px; }
.more a { color: var(--accent-ink); text-decoration: none; font-weight: 600; }
.more a:hover { text-decoration: underline; }
.sub { color: var(--dim); margin: 0 0 14px; max-width: 72ch; }
.panel { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r); padding: 18px 20px 16px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.grid3 { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; }
.grid3 > .cluster { grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .grid2, .grid3 { grid-template-columns: 1fr; } }

/* ---------- Section index: a numbered rail beside the sections on wide screens,
   a row of chips above them on narrow ones. ---------- */
.with-toc { display: grid; grid-template-columns: 196px minmax(0, 1fr); gap: 28px; align-items: start; }
.with-toc > * { min-width: 0; }
.toc { position: sticky; top: 16px; margin-top: 34px; border-left: 1px solid var(--rule); }
.toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.toc a { display: flex; gap: 10px; align-items: baseline; padding: 6px 0 6px 14px; margin-left: -1px; border-left: 2px solid transparent;
  text-decoration: none; color: var(--dim); font-size: 14.5px; line-height: 1.25; }
.toc a b { font: 600 13px/1 var(--cond); color: var(--accent-ink); font-variant-numeric: tabular-nums; min-width: 1.4em; }
.toc a:hover { color: var(--ink); border-left-color: var(--axis); }
.toc a[aria-current="true"] { color: var(--ink); font-weight: 600; border-left-color: var(--accent); }
@media (max-width: 1000px) {
  .with-toc { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .toc { position: static; margin: 22px 0 0; border: 0; }
  .toc ol { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
  .toc a { white-space: nowrap; border: 1px solid var(--rule); border-radius: 999px; padding: 6px 12px; margin: 0; background: var(--panel); }
  .toc a[aria-current="true"] { border-color: var(--accent); }
}

/* ---------- KPI cluster ---------- */
.cluster { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px; background: var(--rule);
  border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; }
.kpi { background: var(--panel); padding: 14px 16px 14px; position: relative; }
.kpi::before { content: ''; position: absolute; left: 16px; right: 16px; top: 0; height: 5px;
  background: repeating-linear-gradient(90deg, var(--axis) 0 1px, transparent 1px 10px); opacity: 0.8; }
.kpi .l { display: block; font: 600 13px/1.2 var(--cond); text-transform: uppercase; letter-spacing: 0.08em; color: var(--mute); margin-top: 6px; }
.kpi .v { display: block; font: 600 34px/1.1 var(--sans); letter-spacing: -0.01em; margin: 4px 0 2px; }
.kpi .v small { font-size: 18px; font-weight: 500; color: var(--dim); }
.kpi .n { display: block; font-size: 13.5px; color: var(--dim); }
.kpi .dl { margin-top: 2px; }
.kpi .ks { display: block; margin: 8px 0 4px; }
.kpi .ks .spark { width: 100%; height: 30px; }
.kpi .ks .spark path { stroke: var(--s1); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.d-up { color: var(--up); font-weight: 600; } .d-down { color: var(--down); font-weight: 600; } .d-flat { color: var(--mute); }

/* ---------- The dashboard: the page's hero as one instrument panel. It stays dark
   in both modes (an instrument panel is lit, not printed), so it redefines the
   tokens its contents read. ---------- */
.dash { --panel: #15171b; --panel-2: #22252b; --ink: #eceae4; --dim: #c3c2b7; --mute: #8f8d86; --rule: #2a2d33; --grid: #2a2d33; --axis: #3d4047;
  --accent: #ff5a1f; --accent-ink: #ff7a45; --up: #3cc13c; --down: #ff6b5e; --s1: #3987e5; --s2: #d95926;
  color: var(--ink); margin: 26px 0 0; border-radius: 16px; border: 1px solid #23262c; position: relative; overflow: hidden;
  background: radial-gradient(90% 120% at 100% 0%, rgba(255, 90, 31, 0.13), transparent 55%),
    radial-gradient(70% 90% at 0% 100%, rgba(57, 135, 229, 0.10), transparent 60%), linear-gradient(180deg, #17191d, #0f1013);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 18px 50px rgba(0,0,0,0.18); }
.dash::before { content: ''; position: absolute; left: 28px; right: 28px; top: 0; height: 7px;
  background: repeating-linear-gradient(90deg, #3d4047 0 1px, transparent 1px 12px); }
.dash::after { content: ''; position: absolute; right: 28px; top: 0; width: 14%; height: 7px;
  background: repeating-linear-gradient(90deg, var(--accent) 0 1px, transparent 1px 12px); }
.dash a { color: var(--ink); }
.dash-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 32px; align-items: center; padding: 34px 32px 24px; }
.dash .lead { color: var(--dim); }
.dash .kicker { color: var(--accent-ink); }
.dash .crumbs, .dash .crumbs a { color: var(--mute); }
.dash-gauges { display: flex; gap: 8px; }
.dash-read { text-align: right; padding: 18px 22px; border-radius: 12px; background: rgba(0,0,0,0.35); box-shadow: inset 0 0 0 1px #2a2d33; min-width: 240px; position: relative; }
.dash-read::before { content: ''; position: absolute; left: 22px; right: 22px; top: 0; height: 5px; background: repeating-linear-gradient(90deg, #3d4047 0 1px, transparent 1px 10px); }
.dash-read .l { display: block; font: 600 13px/1.2 var(--cond); text-transform: uppercase; letter-spacing: 0.1em; color: var(--mute); margin-top: 6px; }
.dash-read .big { display: block; font: 600 clamp(38px, 5vw, 54px)/1.05 var(--sans); letter-spacing: -0.015em; margin: 6px 0 2px; }
.dash-read .n { display: block; font-size: 14px; color: var(--dim); }
@media (max-width: 900px) { .dash-read { text-align: left; } }
.dash-gauges figure { width: 210px; text-align: center; }
.dash-gauges figcaption { margin: -8px 0 0; color: var(--ink); font: 600 14px/1.3 var(--cond); text-transform: uppercase; letter-spacing: 0.08em; }
.dash-gauges figcaption small { display: block; font: 400 13px/1.4 var(--sans); text-transform: none; letter-spacing: 0; color: var(--mute); margin-top: 2px; }
.dash-bar { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--rule); }
.dash-bar .l { font: 600 13px/1 var(--cond); text-transform: uppercase; letter-spacing: 0.1em; color: var(--mute); }
@media (max-width: 640px) { .dash-bar { padding: 12px 16px; } }
.dash .cluster { border: 0; border-top: 1px solid var(--rule); border-radius: 0; background: var(--rule); }
.dash .kpi { background: rgba(10, 11, 13, 0.55); padding: 16px 20px 16px; }
.dash .kpi::before { display: none; }
.dash input[type=search] { background: rgba(0,0,0,0.35); border-color: #3d4047; color: var(--ink); }
.dash input[type=search]::placeholder { color: #8f8d86; }
.dash .spec .pill { border-color: #3d4047; color: var(--dim); }
.dash .spec .pill.ev { border-color: #199e70; color: var(--ink); } .dash .spec .pill.hy { border-color: #3987e5; color: var(--ink); }
@media (max-width: 900px) {
  .dash-top { grid-template-columns: 1fr; padding: 30px 20px 20px; }
  .dash-gauges { justify-content: flex-start; }
  .dash-gauges figure { width: 170px; }
}
@media (max-width: 640px) { .dash { margin: 0 -16px; border-radius: 0; border: 0; } .dash .kpi { padding: 14px 16px; }
  .cluster { grid-template-columns: 1fr 1fr; } .kpi .v { font-size: 26px; } }

/* The headline odometer: one per page at most. */
.odometer { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; margin: 10px 0 18px; }
.odometer .digits { display: inline-flex; gap: 4px; padding: 6px; background: #000; border-radius: 10px; box-shadow: inset 0 0 0 1px #2b2e33, 0 10px 30px rgba(0,0,0,0.25); }
.odometer .digits b { font: 600 clamp(36px, 7vw, 64px)/1 var(--cond); color: #f4f2ec; min-width: 0.66em; padding: 8px 4px 6px; text-align: center;
  background: linear-gradient(#2a2d33, #0e0f11 50%, #22252a); border-radius: 5px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.06); }
.odometer .digits i { font: 600 clamp(36px, 7vw, 64px)/1 var(--cond); color: #6b6a65; font-style: normal; padding: 8px 0 6px; }
.odometer .unit { font: 600 15px/1.3 var(--cond); text-transform: uppercase; letter-spacing: 0.1em; color: var(--dim); }
.odometer .unit b { display: block; font: 600 20px/1.2 var(--sans); text-transform: none; letter-spacing: 0; color: var(--ink); }

/* ---------- Charts ---------- */
figure { margin: 0; }
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart text { font: 500 12px var(--sans); fill: var(--mute); }
.chart .val { fill: var(--ink); font-weight: 600; }
.chart .grid { stroke: var(--grid); stroke-width: 1; }
.chart .base { stroke: var(--axis); stroke-width: 1; }
.chart .bar.s1 { fill: var(--s1); }
.chart .bar.partial { fill-opacity: 0.45; }
.chart .bar.hi { fill: var(--s2); }
.chart .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .line.s1 { stroke: var(--s1); } .chart .line.s2 { stroke: var(--s2); } .chart .line.s3 { stroke: var(--s3); } .chart .line.s4 { stroke: var(--s4); }
.chart .dot { stroke: var(--panel); stroke-width: 2; }
.chart .dot.s1 { fill: var(--s1); } .chart .dot.s2 { fill: var(--s2); } .chart .dot.s3 { fill: var(--s3); } .chart .dot.s4 { fill: var(--s4); }
.chart .hit { fill: transparent; cursor: crosshair; }
.chart .cross { stroke: var(--axis); stroke-width: 1; opacity: 0; pointer-events: none; }
.chart.show-cross .cross { opacity: 1; }
@media (max-width: 640px) { .chart text { font-size: 17px; } }
.legend { list-style: none; display: flex; gap: 16px; flex-wrap: wrap; padding: 0; margin: 0 0 8px; font-size: 14px; color: var(--dim); }
.legend .key { display: inline-block; width: 14px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 6px; }
.key.s1 { background: var(--s1); } .key.s2 { background: var(--s2); } .key.s3 { background: var(--s3); } .key.s4 { background: var(--s4); }
figcaption, .cite { font-size: 13px; color: var(--mute); margin-top: 8px; }
.cite a { color: var(--mute); }
.vals { margin-top: 8px; font-size: 14px; }
.vals summary { cursor: pointer; color: var(--dim); font: 600 13px/1.4 var(--cond); text-transform: uppercase; letter-spacing: 0.08em; }
.vals .table-wrap { margin-top: 8px; }
.tip { position: fixed; z-index: 20; pointer-events: none; background: var(--cluster); color: var(--cluster-ink); font: 500 13px/1.35 var(--sans);
  padding: 7px 10px; border-radius: 6px; box-shadow: 0 6px 20px rgba(0,0,0,0.3); max-width: 280px; border-left: 3px solid var(--accent); }
[hidden] { display: none !important; }
.tip[hidden] { display: none; }

.spark { width: 84px; height: 22px; vertical-align: middle; }
.spark path { fill: none; stroke: var(--mute); stroke-width: 1.5; }
.spark circle { fill: var(--s1); }

.hbars { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(110px, 34%) minmax(0, 1fr) auto; column-gap: 10px; }
/* One value column for every row, so all the bars share one scale. */
.hbars li { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; padding: 4px 0; font-size: 14.5px; }
.hbars li:hover .hb-t i { filter: brightness(1.15); }
@media (prefers-reduced-motion: no-preference) {
  .hbars.grow .hb-t i { transform: scaleX(0); transform-origin: left; transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--i, 0) * 35ms); }
  .hbars.grow.in .hb-t i { transform: none; }
}
.hb-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-t { height: 10px; background: var(--panel-2); border-radius: 0 4px 4px 0; }
.hb-t i { display: block; height: 100%; background: var(--s1); border-radius: 0 4px 4px 0; min-width: 2px; }
.hb-v { font-variant-numeric: tabular-nums; text-align: right; font-weight: 600; }
.hb-v small { color: var(--mute); font-weight: 400; }

.gauge { width: 100%; max-width: 280px; display: block; margin: 0 auto; }
.gauge .g-track { fill: none; stroke: var(--panel-2); stroke-width: 14; stroke-linecap: round; }
.gauge .g-fill { fill: none; stroke: var(--s1); stroke-width: 14; stroke-linecap: round; }
.gauge .g-tick { stroke: var(--axis); stroke-width: 1.5; } .gauge .g-tick.major { stroke: var(--mute); stroke-width: 2; }
.gauge .tick { font: 500 12px var(--sans); fill: var(--mute); }
.gauge .g-needle { stroke: var(--accent); stroke-width: 3; stroke-linecap: round; }
.gauge .g-hub { fill: var(--ink); }
.gauge .g-val { font: 600 30px var(--sans); fill: var(--ink); }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 15px; }
table.data th { font: 600 13px/1.2 var(--cond); text-transform: uppercase; letter-spacing: 0.07em; color: var(--mute); text-align: left;
  padding: 8px 10px; border-bottom: 1px solid var(--axis); position: sticky; top: 0; background: var(--panel); white-space: nowrap; }
table.data td { padding: 8px 10px; border-bottom: 1px solid var(--rule); vertical-align: middle; }
table.data .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.data tbody tr:hover { background: var(--accent-wash); }
table.data .rank { color: var(--mute); width: 2.5em; font-variant-numeric: tabular-nums; }
table.data td .m { font-weight: 600; }
table.data td small { color: var(--mute); display: block; font-size: 12.5px; }
table.data .share { display: block; height: 3px; margin-top: 5px; max-width: 220px; background: var(--panel-2); border-radius: 2px; }
table.data .share i { display: block; height: 100%; background: var(--s1); border-radius: 2px; }
table.data th[aria-sort] { color: var(--accent-ink); }
table[data-fold]:not([data-open]) tbody tr:nth-child(n + 11) { display: none; }
.more-btn { all: unset; cursor: pointer; display: block; margin: 10px auto 0; padding: 8px 16px; border: 1px solid var(--rule); border-radius: 999px;
  font: 600 14px/1 var(--cond); text-transform: uppercase; letter-spacing: 0.07em; color: var(--dim); }
.more-btn:hover { border-color: var(--accent); color: var(--ink); }
.more-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
th button.sort { all: unset; cursor: pointer; }
th button.sort::after { content: ' ↕'; color: var(--axis); }
th[aria-sort="descending"] button.sort::after { content: ' ↓'; color: var(--accent-ink); }
th[aria-sort="ascending"] button.sort::after { content: ' ↑'; color: var(--accent-ink); }
tr.flag td { background: var(--accent-wash); }
.pill { display: inline-block; font: 600 12px/1 var(--cond); text-transform: uppercase; letter-spacing: 0.06em; padding: 3px 6px; border-radius: 4px;
  border: 1px solid var(--rule); color: var(--dim); white-space: nowrap; }
.pill.ev { border-color: var(--s3); color: var(--ink); } .pill.hy { border-color: var(--s1); color: var(--ink); }
@media (max-width: 640px) {
  table.cards thead { display: none; }
  table.cards tr { display: block; border-bottom: 1px solid var(--rule); padding: 8px 0; }
  table.cards td { display: flex; justify-content: space-between; gap: 12px; border: 0; padding: 3px 0; text-align: right; }
  table.cards td::before { content: attr(data-label); font: 600 12px/1.6 var(--cond); text-transform: uppercase; letter-spacing: 0.06em; color: var(--mute); text-align: left; }
  table.cards td.rank { display: none; }
  table.cards td.name { display: block; text-align: left; padding-bottom: 6px; }
  table.cards td.name::before { display: none; }
}

/* ---------- Controls ---------- */
.views { display: inline-flex; border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; }
.views button { all: unset; cursor: pointer; padding: 6px 11px; font: 600 13px/1 var(--cond); text-transform: uppercase; letter-spacing: 0.06em; color: var(--dim); }
.views button[aria-pressed="true"] { background: var(--ink); color: var(--panel); }
.views button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 0 0 14px; }
.seg { display: inline-flex; border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; }
.seg button { all: unset; cursor: pointer; padding: 8px 12px; font: 600 14px/1 var(--cond); text-transform: uppercase; letter-spacing: 0.06em; color: var(--dim); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--panel); }
.seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
input[type=search], input[type=number], select { font: 500 16px var(--sans); color: var(--ink); background: var(--panel); border: 1px solid var(--axis);
  border-radius: 8px; padding: 9px 12px; min-width: 0; }
input[type=search] { width: min(420px, 100%); }
.search-big { display: flex; gap: 8px; margin: 4px 0 0; max-width: 560px; }
.search-big input { flex: 1; font-size: 18px; padding: 12px 14px; }
.count { color: var(--mute); font-size: 14px; }

/* ---------- Tax calculator: the readout ---------- */
.calc { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 760px) { .calc { grid-template-columns: 1fr; } }
.calc label { display: block; font: 600 13px/1.2 var(--cond); text-transform: uppercase; letter-spacing: 0.08em; color: var(--mute); margin: 10px 0 6px; }
.calc select, .calc input { width: 100%; }
.calc input[type=checkbox] { width: auto; margin: 0; }
.calc label.check { font: 400 15px/1.4 var(--sans); text-transform: none; letter-spacing: 0; color: var(--dim); }
.calc label.check, .check { display: flex; gap: 8px; align-items: center; margin-top: 10px; font-size: 15px; color: var(--dim); }
.readout { background: var(--cluster); color: var(--cluster-ink); border-radius: var(--r); padding: 18px 20px; position: relative; overflow: hidden; }
.readout::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: repeating-linear-gradient(90deg, #3a3d43 0 2px, transparent 2px 12px); }
.readout .l { font: 600 13px/1.2 var(--cond); text-transform: uppercase; letter-spacing: 0.1em; color: var(--cluster-dim); margin-top: 6px; }
.readout .big { font: 600 46px/1.05 var(--sans); margin: 4px 0; }
.readout .row { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid #2a2d33; padding: 8px 0; font-size: 15px; }
.readout .row span:last-child { font-variant-numeric: tabular-nums; font-weight: 600; }
.readout .note { color: var(--cluster-dim); font-size: 13.5px; margin-top: 8px; }
.readout .ok { color: #3cc13c; }

/* ---------- Model page ---------- */
.spec { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 18px; }
.dash + .callout { margin: 14px 0 0; }
.callout { border-left: 3px solid var(--accent); background: var(--accent-wash); padding: 10px 14px; border-radius: 0 8px 8px 0; font-size: 15px; color: var(--dim); max-width: 80ch; }
.rivals { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.rival { display: block; text-decoration: none; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r); padding: 12px 14px; }
.rival:hover { border-color: var(--accent); color: inherit; }
.rival b { display: block; font: 700 20px/1.2 var(--cond); }
.rival span { display: block; color: var(--dim); font-size: 14px; }
.rival .p { font-weight: 600; color: var(--ink); font-size: 16px; margin-top: 4px; }
.rival .p small { font-weight: 400; color: var(--mute); font-size: 12px; display: block; }

.cmp-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 760px) { .cmp-pick { grid-template-columns: 1fr; } }
table.cmp th, table.cmp td { width: 25%; }
table.cmp td small { white-space: normal; text-align: right; margin-bottom: 4px; }
.prose { max-width: 76ch; }
.docs { list-style: none; margin: 0; padding: 0; }
.docs li { display: grid; grid-template-columns: minmax(200px, 1fr) 2fr; gap: 4px 20px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.docs li:last-child { border-bottom: 0; }
.docs span { color: var(--dim); font-size: 14.5px; }
@media (max-width: 640px) { .docs li { grid-template-columns: 1fr; } }
code { font: 500 13px ui-monospace, 'SF Mono', Menlo, monospace; color: var(--dim); }
.prose p, .prose li { color: var(--dim); }
.prose h3 { margin-top: 22px; }

/* ---------- Footer: the dark strip again, closing the page ---------- */
footer { margin-top: 72px; background: var(--cluster); color: var(--cluster-dim); font-size: 14.5px; position: relative; }
footer::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--accent) 0 18%, transparent 18% 19%, var(--accent) 19% 22%, transparent 22%); }
.foot { display: grid; grid-template-columns: 2fr 1fr 1fr 1.2fr; gap: 28px 40px; padding: 44px 20px 30px; }
.foot-brand .brand { color: var(--cluster-ink); margin-bottom: 14px; }
.foot-brand p { max-width: 46ch; margin: 0 0 8px; line-height: 1.55; }
.foot-col { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.foot-col h2 { font: 600 13px/1 var(--cond); text-transform: uppercase; letter-spacing: 0.12em; color: #6f6d67; margin: 4px 0 6px; }
.foot-col h2::before { display: none; }
footer a { color: var(--cluster-ink); text-decoration: none; }
footer a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--accent); }
.foot-lang { margin-top: 10px; border: 1px solid #33363c; border-radius: 6px; padding: 6px 10px; font: 600 13px/1 var(--cond); text-transform: uppercase; letter-spacing: 0.06em; }
.foot-lang .short { display: none; }
.foot-base { display: flex; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; padding: 16px 20px 28px; border-top: 1px solid #23262c; font-size: 13px; color: #77756f; }
.foot-base a { color: #a9a79f; text-decoration: underline; text-decoration-color: #44474e; }
@media (max-width: 900px) { .foot { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 640px) { .foot { padding: 36px 16px 24px; } .foot-base { padding: 16px 16px 26px; } }
@media (prefers-reduced-motion: no-preference) { .gauge .g-needle { transition: transform 0.6s; } }
@media print { .top, footer, .filters, .vals summary { display: none; } body { background: #fff; } }