:root{
  /* Every colour on the site, charts included, is one of these. Charts reach them through
     inline style (style="fill:var(--data)"), because SVG presentation attributes do not
     take var(). The one indexed list, the gear-set colours, lives in js/gearing.js. */
  --bg:#F5F2EB; --fg:#30353A; --fg-strong:#212529; --muted:#7B858E;
  --data:#7A583B; --accent:#148FAC; --warn:#9C3B2E;
  /* warning text on the page ground: brand red in light; in dark the tooltip's red mix */
  --warn-text:#9C3B2E;
  /* text only: Steel and Deep Cyan darkened until text clears 4.5:1 on ground and panel.
     Steel and Deep Cyan themselves stay for rules, grid, curves and marks. */
  --muted-text:#676F77; --accent-text:#0E6E85;
  /* footer links: a bluer cyan that still clears 4.5:1, with a faint underline, so a small link
     reads as one beside muted text of the same lightness */
  --link-text:#0069A6; --link-line:rgba(0,105,166,.35);
  --line:rgba(123,133,142,.28);
  --surface:rgba(255,255,255,.62); --field:#fff;
  --accent-edge:rgba(20,143,172,.35); --accent-wash:rgba(20,143,172,.05);
  /* chart roles: the ring round a dot, text on a data dot, hover marks and tooltips */
  --halo:#F5F2EB; --on-data:#F5F2EB; --ink:#212529;
  --tip-bg:#212529; --tip-fg:#F5F2EB;
  /* 50/50 mix of --warn and white: brand red is unreadable as text on the dark tooltip */
  --tip-warn:#CE9D97; --on-warn:#F5F2EB; --warn-edge:transparent;
  /* ring on the over-limit dot: the halo in light, warm white in dark where red is 1.8:1 */
  --warn-ring:#F5F2EB;
  color-scheme:light;
}

/* Night. Walnut is too dark on graphite, so data is Light Oak; Deep Cyan becomes Signal
   Cyan; muted text is Steel lightened 35% toward Warm White to clear 4.5:1 on a panel.
   The two blocks below must stay identical (test/theme.test.js checks): one follows the
   OS unless the page is forced light, the other is the page forced dark. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#212529; --fg:#D5D3CE; --fg-strong:#F5F2EB; --muted:#A6ABAF;
    --data:#B89873; --accent:#25C4E2; --warn:#9C3B2E;
    --muted-text:#A6ABAF; --accent-text:#25C4E2;
    --link-text:#25C4E2; --link-line:transparent;
    --line:rgba(245,242,235,.13);
    --surface:#30353A; --field:#212529;
    --accent-edge:rgba(37,196,226,.4); --accent-wash:rgba(37,196,226,.08);
    --halo:#30353A; --on-data:#212529; --ink:#F5F2EB;
    --tip-bg:#F5F2EB; --tip-fg:#212529;
    --tip-warn:#9C3B2E; --on-warn:#F5F2EB; --warn-edge:#F5F2EB; --warn-ring:#F5F2EB;
    --warn-text:#CE9D97;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#212529; --fg:#D5D3CE; --fg-strong:#F5F2EB; --muted:#A6ABAF;
  --data:#B89873; --accent:#25C4E2; --warn:#9C3B2E;
  --muted-text:#A6ABAF; --accent-text:#25C4E2;
  --link-text:#25C4E2; --link-line:transparent;
  --line:rgba(245,242,235,.13);
  --surface:#30353A; --field:#212529;
  --accent-edge:rgba(37,196,226,.4); --accent-wash:rgba(37,196,226,.08);
  --halo:#30353A; --on-data:#212529; --ink:#F5F2EB;
  --tip-bg:#F5F2EB; --tip-fg:#212529;
  --tip-warn:#9C3B2E; --on-warn:#F5F2EB; --warn-edge:#F5F2EB; --warn-ring:#F5F2EB;
  --warn-text:#CE9D97;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px 80px}

header{border-bottom:1px solid var(--line);margin-bottom:26px}
.brandrow{display:flex;align-items:baseline;gap:14px;padding:22px 0 4px}
.brand{font-size:12.5px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--muted-text);font-weight:600}
.brand b{color:var(--accent-text);font-weight:600}
/* A car page's row, all on the left: the wordmark (a link home there, plain text on the picker),
   a muted dot, "‹ All cars" and any further crumb after its own dot. The dots sit closer than
   the row's gap. The toggle takes the rest of the row and sits on the right. */
a.brand{text-decoration:none}
a.brand:hover{color:var(--fg)}
.brandrow .sep{font-size:12.5px;color:var(--muted-text);margin:0 -5px}
/* the wordmark's letter-spacing trails its last letter; take it back so the dot sits centred */
.brandrow .brand + .sep{margin-left:-7px}
.crumb{font-size:12.5px;color:var(--muted-text);text-decoration:none}
.crumb:hover{color:var(--accent-text)}
/* the chevron at the text's weight: no heavier glyph, just a touch of room before the words */
.crumb .chev{margin-right:.3em}
a.brand:focus-visible,.crumb:focus-visible{outline:2px solid var(--accent);outline-offset:2px;
  border-radius:1px}
.theme{font-family:inherit;font-size:12.5px;line-height:1.2;color:var(--muted-text);background:none;
  border:1px solid var(--line);border-radius:2px;padding:1px 8px;cursor:pointer;margin-left:auto}
/* sun or moon, drawn in the label's colour; sits inside the line box so the toggle stays
   no taller than the brand line */
.theme .icon{display:inline-block;width:12px;height:12px;vertical-align:-2px;margin-right:4px}
/* the label names the theme a click switches to, and is right before any script runs */
.theme .to-light{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme .to-dark{display:none}
  :root:not([data-theme="light"]) .theme .to-light{display:inline}
}
:root[data-theme="dark"] .theme .to-dark{display:none}
:root[data-theme="dark"] .theme .to-light{display:inline}
h1{font-size:31px;margin:2px 0 3px;color:var(--fg-strong);letter-spacing:-.015em}
.sub{color:var(--muted-text);font-size:13.5px;margin:0 0 20px}
.sub span{color:var(--fg)}

.bar{display:flex;gap:26px;align-items:flex-end;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--line);border-radius:3px;
  padding:14px 18px 15px;margin-bottom:8px;position:sticky;top:0;z-index:5}
.ctl{display:flex;flex-direction:column;gap:5px}
.ctl label{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted-text);font-weight:600}
select{font:13.5px/1 "SF Mono",Menlo,Consolas,monospace;padding:7px 10px;
  border:1px solid var(--line);background:var(--field);color:var(--fg);
  border-radius:2px;min-width:200px}
.copies{margin-left:auto;display:flex;gap:8px}
.copy{font-size:12.5px;color:var(--accent-text);
  border:1px solid var(--accent-edge);background:var(--accent-wash);
  padding:8px 14px;border-radius:2px;cursor:pointer}
/* the averaged-axle cars: a second bar row with a select per ratio setting, as wide as its
   steps, and the final drive they make, level with the selects' text */
.ratiorow{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px 26px;flex-basis:100%}
.bar select.ratio{min-width:0}
.fdreadbox{justify-content:flex-end}
.fdread{display:flex;align-items:center;height:30px;white-space:nowrap;
  font:12.5px/1 "SF Mono",Menlo,Consolas,monospace;color:var(--muted-text)}
.barnote{font-size:11.5px;color:var(--muted-text);margin:0 0 32px;padding-left:2px}
/* the collapsed bar's summary and toggle exist for narrow screens only; on a wide one the
   controls box is laid out as though it were not there */
.barhead{display:none}
.barctls{display:contents}

section{margin-bottom:42px}
h2{font-size:17px;margin:0 0 2px;color:var(--fg-strong);letter-spacing:-.01em}
.cap{font-size:12.5px;color:var(--muted-text);margin:0 0 14px}
.cap b{color:var(--fg);font-weight:600}
/* a second caption line (the 206 WRC's borrowed curve) sits tight under the first */
.cap:has(+ .cap:not([hidden])){margin-bottom:4px}
/* the Audi's front-and-rear warning, shown only while the two differ */
.cap.axlewarn{color:var(--warn-text);font-weight:600}
.panel{background:var(--surface);border:1px solid var(--line);
  border-radius:3px;padding:16px 18px}
svg{display:block;width:100%;height:auto}
.axis{font:10.5px "SF Mono",Menlo,Consolas,monospace;fill:var(--muted-text)}
.lbl{font:11px -apple-system,"Segoe UI",sans-serif;fill:var(--muted-text)}
.rowlbl{font:11px -apple-system,"Segoe UI",sans-serif;fill:var(--fg)}
.val{font:10.5px "SF Mono",Menlo,Consolas,monospace;fill:var(--fg)}
.pip{font:9px "SF Mono",Menlo,Consolas,monospace;fill:var(--on-data);font-weight:700}
.hit{cursor:pointer}
/* The ladder's lane-name column is a tap target for fingers only; a mouse picks on the name
   itself, as it always has, so the column stays out of its way. The chart carries the click
   listener, so iOS would flash it on every tap without the transparent highlight. */
#svg-ladder,#svg-ladder .lanehit{-webkit-tap-highlight-color:transparent}
/* The hover charts take a sideways finger drag to scrub their readout; a vertical swipe still
   scrolls the page, and two fingers still zoom it. */
#svg-power,#svg-ladder,#svg-shift,#svg-revs{touch-action:pan-y pinch-zoom;
  -webkit-tap-highlight-color:transparent}
.lanehit{pointer-events:none}
@media (pointer:coarse){.lanehit{pointer-events:all;cursor:pointer}}

/* Power and torque's unit switch, "kW · hp", in the panel's top right corner in the axis labels'
   type: the unit in force in the accent, the other muted. No box: each word is a button whose
   padding is its hit area, pulled back by an equal negative margin so it takes no more room
   than the text. */
#sec-power .panel{position:relative}
.unitbox{position:absolute;top:12px;right:18px;display:flex;align-items:baseline;gap:2px;
  font:11.5px/1 "SF Mono",Menlo,Consolas,monospace;color:var(--muted-text)}
.unitbox button{font:inherit;color:var(--muted-text);background:none;border:0;border-radius:2px;
  padding:4px;margin:-4px;cursor:pointer}
.unitbox button:hover{color:var(--fg)}
.unitbox button[aria-pressed="true"]{color:var(--accent-text);cursor:default}
.unitbox button:focus-visible{outline:2px solid var(--accent);outline-offset:0}
.unitbox .sep{margin:0 6px}
/* a finger gets at least 32 by 28 per word, still without moving the text */
@media (pointer:coarse){
  .unitbox button{padding:9px 10px;margin:-9px -10px}
}

/* Shift points' rev floor and ceiling, over the top right of the chart */
#sec-shift .panel{position:relative}
.revboxes{position:absolute;top:10px;right:18px;display:flex;align-items:center;gap:22px}
.floorbox{display:flex;align-items:center;gap:5px}
.floorbox label{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted-text);font-weight:600;margin-right:5px}
.floorbox .unit{font-size:11.5px;color:var(--muted-text);margin-left:2px}
.floorstep,.floorin{font:13px/1 "SF Mono",Menlo,Consolas,monospace;height:26px;
  border:1px solid var(--line);border-radius:2px;background:var(--field);color:var(--fg)}
.floorstep{width:26px;padding:0;cursor:pointer}
.floorstep:disabled{cursor:default;opacity:.4}
.floorin{width:60px;padding:0 6px;text-align:center}
/* the control bar's rev ceiling: labelled above like the selects, and as tall as them */
.ctl .floorbox .floorstep,.ctl .floorbox .floorin{height:33px}
.ctl .floorbox .floorstep{width:30px}
/* Under the 1180px where the page stops widening, the bar's row is tighter than the controls
   at their full size. Tighten the gaps, let the selects size to their options and trim the
   ceiling control, so the bar never takes more rows than it did before the ceiling joined
   it. The Stratos, with the widest final-drive labels, is the tight case. */
@media (min-width:721px) and (max-width:1179px){
  .bar{gap:14px}
  .ratiorow{gap:14px}
  .bar select{min-width:120px;padding:7px 4px}
  .copies{gap:6px}
  .copy{padding:8px 10px}
  .ctl .floorbox{gap:3px}
  .ctl .floorbox .floorstep{width:26px}
  .ctl .floorbox .floorin{width:44px;padding:0 2px}
  .ctl .floorbox .unit{display:none}
}

.foot{border-top:1px solid var(--line);padding-top:22px;display:flex;gap:34px;
  flex-wrap:wrap;align-items:flex-start}
.foot h3{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted-text);margin:0 0 8px;font-weight:600}
.kbox{display:flex;align-items:center;gap:10px}
.kbox input{font:14px "SF Mono",Menlo,Consolas,monospace;width:104px;padding:7px 10px;
  border:1px solid var(--line);border-radius:2px;background:var(--field);color:var(--fg)}
.kbox a{font-size:12px;color:var(--accent-text);text-decoration:none}
.kbox .unit{font-size:11.5px;color:var(--muted-text);margin-left:-4px}
.fnote{font-size:12px;color:var(--muted-text);max-width:430px;margin:9px 0 0}
.limits{font-size:12px;color:var(--muted-text);margin:0;max-width:390px}
.limits ul{margin:0;padding-left:16px}
.limits li{margin-bottom:3px}
.promo{flex-basis:100%;font-size:12px;color:var(--muted-text);margin:0}
.promo a{color:var(--link-text);text-decoration:underline;text-decoration-color:var(--link-line);
  text-underline-offset:2px}
.promo a:hover{text-decoration-color:currentColor}
.notadjustable{font-size:13px;color:var(--muted-text);margin:0;padding:10px 2px}

.carlist{list-style:none;margin:0;padding:0;display:grid;gap:2px;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.carlist a{display:block;padding:12px 14px;text-decoration:none;color:var(--fg);
  border:1px solid var(--line);border-radius:2px;background:var(--surface)}
.carlist a:hover{border-color:var(--accent);color:var(--accent-text)}
.carlist + .foot,.dtlist + .foot{margin-top:34px}
/* the picker's second list, the drivetrain pages: the same links, quieter */
.dtlist{margin:44px 0 0}
.carlist.minor a{padding:8px 14px;font-size:13.5px;color:var(--muted-text);
  background:none}

/* a car's drivetrain page (<slug>/drivetrain/): static facts, then the workings for the
   curious, then the raw measurements */
.brandrow .crumb{white-space:nowrap}
.dt section{margin-bottom:0}
.facts{display:grid;grid-template-columns:minmax(130px,max-content) minmax(0,1fr);
  gap:10px 26px;margin:0 0 40px;max-width:900px}
.facts dt{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted-text);font-weight:600;padding-top:3px}
.facts dd{margin:0;color:var(--fg)}
.mono,.formula{font-family:"SF Mono",Menlo,Consolas,monospace;font-size:13px}
.formula{color:var(--fg-strong)}
/* a drivetrain page's formula block: one line per formula; a line too long for the screen
   wraps inside the block with a hanging indent, never scrolling the page sideways */
div.formula{margin:6px 0 14px;padding:8px 12px;max-width:720px;background:var(--surface);
  border-left:2px solid var(--accent-edge);overflow-wrap:break-word;line-height:1.5}
div.formula code{display:block;font:inherit;padding-left:2ch;text-indent:-2ch}
/* in the facts the block may use the column's full width, so 1280 keeps each line on one row */
.facts dd div.formula{margin:6px 0 2px;max-width:none}
.workings ol.hyp{max-width:720px;margin:0 0 12px;padding-left:26px;font-size:14px}
.workings ol.hyp li{margin-bottom:4px}
.settings{list-style:none;margin:0;padding:0}
.settings li{margin-bottom:6px}
.setname{color:var(--fg-strong);font-weight:600;margin-right:6px}
.settings details{margin-top:2px}
.settings summary{font-size:12.5px;color:var(--accent-text);cursor:pointer;width:max-content}
.steps{margin:4px 0 0;color:var(--muted-text);overflow-wrap:anywhere}
.handling{color:var(--fg-strong);font-weight:600}
.workings{border-top:1px solid var(--line);padding:26px 0 8px;margin-bottom:34px}
.workings p{max-width:720px;margin:0 0 12px;font-size:14px}
.workings .cap{font-size:12.5px;margin-bottom:14px}
.measured{border-top:1px solid var(--line);padding-top:26px;margin-bottom:40px}
.measured .facts{margin-bottom:20px}
.run{margin:0 0 22px}
.run h3{font-size:13.5px;margin:0 0 3px;color:var(--fg-strong)}
.runset{font-size:13px;margin:0 0 8px;color:var(--muted-text)}
.runset .mono{color:var(--fg)}
.tablewrap{overflow-x:auto;max-width:100%}
.speeds{border-collapse:collapse;font:13px "SF Mono",Menlo,Consolas,monospace;
  background:var(--surface);border:1px solid var(--line)}
.speeds th,.speeds td{padding:5px 12px;text-align:right;border-bottom:1px solid var(--line);
  white-space:nowrap}
.speeds tr:last-child th,.speeds tr:last-child td{border-bottom:0}
.speeds th{font-weight:600;color:var(--muted-text)}
.speeds th[scope="row"]{text-align:left;font-family:-apple-system,"Segoe UI",sans-serif;
  font-size:10.5px;letter-spacing:.13em;text-transform:uppercase}
.runnote{margin:4px 0 0}

@media (max-width:720px){
  .wrap{padding:0 16px 60px}
  .facts{grid-template-columns:minmax(0,1fr);gap:2px}
  .facts dd{margin-bottom:12px}
  .revboxes{position:static;flex-direction:column;align-items:flex-end;gap:8px;
    margin-bottom:10px}
  /* the chart's own lettering shrinks with it, so its unit label starts only a few px into the
     plot; the switch rises into the panel's top padding to stay clear of it */
  .unitbox{top:5px}
  /* on a phone the chart's own lettering is tiny, so the switch drops a size and marks the
     unit in use by weight of colour, not the accent, to stay quieter than the chart */
  .unitbox{font-size:10px}
  .unitbox button[aria-pressed="true"]{color:var(--fg)}

  /* The bar collapses to one line: what is selected, and a button that opens the controls.
     Open, they hang below the line over the page rather than pushing it down, so opening
     and closing never moves what you were reading. The ground under the surface wash keeps
     the charts from showing through. */
  .bar{display:block;padding:0;
    background:linear-gradient(var(--surface),var(--surface)),var(--bg)}
  .barhead{display:flex;align-items:center;gap:10px;padding:5px 5px 5px 12px}
  .barsum{flex:1;min-width:0;margin:0;display:flex;flex-wrap:wrap;column-gap:7px;
    font:12px/1.35 "SF Mono",Menlo,Consolas,monospace;color:var(--fg)}
  .barsum .part{white-space:nowrap}
  .barsum .sep{margin-left:7px;color:var(--muted-text)}
  .bartoggle{flex:0 0 auto;display:grid;place-items:center;width:34px;height:30px;padding:0;
    border:1px solid var(--line);border-radius:2px;background:var(--field);
    color:var(--muted-text);cursor:pointer;position:relative}
  /* drawn 34x30, taps as 48x48: the invisible extension reaches past the head padding */
  .bartoggle::after{content:"";position:absolute;inset:-9px -7px}
  .bartoggle .icon{display:block;width:12px;height:12px}
  .bar.open .bartoggle{color:var(--accent-text);border-color:var(--accent-edge)}
  .bar.open .bartoggle .icon{transform:rotate(180deg)}
  .bar .barctls{display:none}
  .bar.open .barctls{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px 26px;
    position:absolute;top:100%;left:-1px;right:-1px;padding:12px 12px 14px;
    background:linear-gradient(var(--surface),var(--surface)),var(--bg);
    border:1px solid var(--line);border-top:0;border-radius:0 0 3px 3px}
  .bar.open{border-radius:3px 3px 0 0}
}