:root {
  color-scheme: light;
  --paper: #f5f6f8; --card: #ffffff;
  --ink: #171c26; --ink-2: #59616e; --ink-3: #676e7b; --line: #dde1e8;
  --accent: #2456a6; --accent-soft: #e8eef8; --rival: #c2c9d4;
  --adv: #c68000; --adv-soft: #f7ecd6; --adv-ink: #805300;
  --fail: #a62639; --fail-soft: #f6e2e5; --fail-ink: #a62639;
  --minor: #0a80a0; --minor-soft: #dceef3; --minor-ink: #0a6579;
  --pass: #2c7a44; --pass-soft: #e2efe6; --plate: #f7c500; --plate-ink: #14161a;
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --paper: #14181f; --card: #1b212b;
    --ink: #e8eaee; --ink-2: #9aa3b0; --ink-3: #8991a0; --line: #2d3542;
    --accent: #5b8fd4; --accent-soft: #223350; --rival: #3d4654;
    --adv: #bd8214; --adv-soft: #322a17; --adv-ink: #d19a2b;
    --fail: #cc4e63; --fail-soft: #38222a; --fail-ink: #e8899a;
    --minor: #2fa2be; --minor-soft: #16303a; --minor-ink: #2fa2be;
    --pass: #58a874; --pass-soft: #1f3328; --plate: #d9ae08; --plate-ink: #14161a;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #14181f; --card: #1b212b;
  --ink: #e8eaee; --ink-2: #9aa3b0; --ink-3: #8991a0; --line: #2d3542;
  --accent: #5b8fd4; --accent-soft: #223350; --rival: #3d4654;
  --adv: #bd8214; --adv-soft: #322a17; --adv-ink: #d19a2b;
  --fail: #cc4e63; --fail-soft: #38222a; --fail-ink: #e8899a;
  --minor: #2fa2be; --minor-soft: #16303a; --minor-ink: #2fa2be;
  --pass: #58a874; --pass-soft: #1f3328; --plate: #d9ae08; --plate-ink: #14161a;
}

* { box-sizing: border-box; }
body {
  background: var(--paper); color: var(--ink);
  font: 15px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  margin: 0;
}
.mono { font-family: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace; font-variant-numeric: tabular-nums; }
.cond { font-family: "Helvetica Neue Condensed", "HelveticaNeue-CondensedBold", "Arial Narrow", sans-serif-condensed, sans-serif; }
a { color: var(--accent); }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.wrap { max-width: 980px; margin: 0 auto; padding: 0 20px 64px; }
.bar { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); margin-bottom: 28px; }
.wordmark {
  font-family: "Helvetica Neue Condensed", "HelveticaNeue-CondensedBold", "Arial Narrow", sans-serif-condensed, sans-serif;
  font-weight: 700; font-size: 21px; letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap;
  color: var(--ink); text-decoration: none;
}
.wordmark b { color: var(--accent); }

.crumb { font-size: 13px; margin-bottom: 14px; }
.id-main h1 { margin: 0 0 2px; font-size: 27px; line-height: 1.15; letter-spacing: -0.01em; text-wrap: balance; }
.id-main .spec { color: var(--ink-2); margin: 0 0 8px; }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 22px 0 40px; }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px 12px; }
.tile .k { font-size: 12px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-3); margin-bottom: 6px; }
.tile .v { font-size: 27px; font-weight: 650; line-height: 1.1; }
.tile .v small { font-size: 14px; font-weight: 500; color: var(--ink-2); }
.tile .note { font-size: 12.5px; color: var(--ink-2); margin-top: 5px; }
.tile.good .v { color: var(--pass); }
.tile.bad .v { color: var(--fail); }

@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

.jump { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 34px; }
.jump .cap { font-size: 11.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3); margin-right: 2px; }
.jump a {
  font-size: 12.5px; font-weight: 600; color: var(--ink-2); text-decoration: none;
  border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 5px 12px;
}
.jump a:hover { color: var(--accent); border-color: var(--accent); }

.sect, .panel { scroll-margin-top: 14px; }
.sect { margin-bottom: 46px; }
.sect-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; border-bottom: 2px solid var(--ink); padding-bottom: 8px; margin-bottom: 6px; }
.sect-head h2 {
  margin: 0; font-family: "Helvetica Neue Condensed", "HelveticaNeue-CondensedBold", "Arial Narrow", sans-serif-condensed, sans-serif;
  text-transform: uppercase; letter-spacing: 0.04em; font-size: 22px;
}
.evidence { font-size: 11.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; padding: 2px 9px; border-radius: 3px; }
.evidence.measured { background: var(--accent); color: #fff; }
.evidence.reported { background: var(--adv-soft); color: var(--adv-ink); border: 1px solid var(--adv); }
.sect-sub { color: var(--ink-2); font-size: 13.5px; margin: 0 0 20px; }

.panel { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 18px 20px; margin-bottom: 16px; }
.panel h3 { margin: 0 0 2px; font-size: 15.5px; }
.panel .sub { color: var(--ink-2); font-size: 13px; margin: 0 0 14px; }
.panel-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 2px; }
.panel-head h3 { margin: 0; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; margin-left: auto; }
.seg button { border: 0; background: transparent; color: var(--ink-2); font: inherit; font-size: 12.5px; font-weight: 600; padding: 5px 13px; cursor: pointer; }
.seg button.on { background: var(--accent); color: #fff; }
.seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.chart-wrap { position: relative; overflow-x: auto; }
.chart-wrap svg { display: block; width: 100%; height: auto; min-width: 560px; }
.legend { display: flex; gap: 18px; font-size: 12.5px; color: var(--ink-2); margin-top: 8px; flex-wrap: wrap; }
.legend .sw { display: inline-block; width: 16px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 6px; }

.mix-grp { margin-top: 14px; }
.mix-grp + .mix-grp { margin-top: 18px; }
.mix-cap { font-size: 11.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
.mix-row { display: grid; grid-template-columns: minmax(120px, 1.2fr) 3fr auto; align-items: center; gap: 12px; padding: 5px 0; }
.mix-lab { font-size: 13px; font-weight: 600; display: flex; flex-direction: column; }
.mix-share { font-size: 11.5px; font-weight: 500; color: var(--ink-3); }
.mix-track { height: 9px; background: var(--line); border-radius: 999px; overflow: hidden; }
.mix-fill { height: 100%; background: var(--accent); border-radius: 999px; }
.mix-fill.good { background: var(--pass); }
.mix-fill.bad { background: var(--fail); }
.mix-val { font-size: 13px; font-weight: 650; min-width: 46px; text-align: right; }
.mix-foot { font-size: 11.5px; color: var(--ink-3); margin-top: 8px; }
@media (max-width: 520px) { .mix-row { grid-template-columns: 1fr 2fr auto; gap: 8px; } }

.empty { border: 1px dashed var(--line); border-radius: 8px; padding: 18px 20px; color: var(--ink-2); font-size: 13.5px; background: transparent; }
.tip {
  position: absolute; pointer-events: none; z-index: 3; display: none;
  background: var(--card); border: 1px solid var(--line); border-radius: 6px;
  padding: 8px 11px; font-size: 12px; box-shadow: 0 4px 14px rgba(10,14,22,0.13); min-width: 130px;
}

.grp { margin: 2px 0 1px; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-2); }
.grpsub { margin: 0 0 10px; font-size: 12.5px; color: var(--ink-3); }
.bars { display: grid; grid-template-columns: minmax(180px, 2fr) 66px 3fr 78px; gap: 8px 10px; align-items: center; }
.bars .lbl { font-size: 13.5px; line-height: 1.25; }
.kchip { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-align: center; padding: 2px 0; border-radius: 3px; width: 62px; }
.kchip.adv { background: var(--adv-soft); color: var(--adv-ink); }
.kchip.fail { background: var(--fail-soft); color: var(--fail-ink); }
.kchip.minor { background: var(--minor-soft); color: var(--minor-ink); }
.track { background: var(--paper); border-radius: 4px; height: 12px; position: relative; }
.fill { height: 100%; border-radius: 3px 4px 4px 3px; min-width: 3px; }
.fill.adv { background: var(--adv); }
.fill.fail { background: var(--fail); }
.fill.minor { background: var(--minor); }
.fill.mut { background: var(--rival); }
.avg-tick { position: absolute; top: -3px; bottom: -3px; width: 2px; border-radius: 1px; background: var(--ink); opacity: 0.55; }
.pct { font-size: 12.5px; text-align: right; color: var(--ink-2); line-height: 1.25; }
.pct span { display: block; font-size: 10.5px; color: var(--ink-3); }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 14px; }
.rcard { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 16px 18px 14px; display: flex; flex-direction: column; gap: 8px; }
.rcard.na { opacity: 0.62; }
.rcard .top { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.rcard h3 { margin: 0; font-size: 15px; line-height: 1.3; }
.status { flex: none; font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 3px 8px; border-radius: 3px; }
.status.confirmed { background: var(--fail-soft); color: var(--fail-ink); }
.status.emerging { background: var(--adv-soft); color: var(--adv-ink); }
.status.disputed { background: var(--minor-soft); color: var(--minor-ink); }
.status.graduated { background: var(--accent-soft); color: var(--accent); }
.status.na { background: var(--paper); color: var(--ink-3); border: 1px solid var(--line); }
.rcard p { margin: 0; font-size: 13.5px; color: var(--ink-2); }
.rcard .meta { font-size: 12px; color: var(--ink-3); }

.check { counter-reset: q; display: grid; }
.check .q { display: flex; gap: 14px; padding: 11px 2px; border-bottom: 1px solid var(--line); font-size: 14px; }
.check .q:last-child { border-bottom: 0; }
.check .q::before {
  counter-increment: q; content: counter(q);
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent);
  font-size: 12.5px; font-weight: 700; display: grid; place-items: center; margin-top: 1px;
}
.check .q b { font-weight: 600; }
.check .q span { color: var(--ink-2); }
.check .q .chk-data { display: block; margin-top: 4px; font-size: 11.5px; color: var(--ink-3); }
.check .q .chk-hi {
  font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 3px; background: var(--fail-soft); color: var(--fail-ink);
  margin-left: 8px; white-space: nowrap; vertical-align: 1px;
}

footer { border-top: 1px solid var(--line); padding-top: 16px; font-size: 12.5px; color: var(--ink-3); display: grid; gap: 8px; }
footer a { color: var(--ink-2); }
/* "appy lad" maker wordmark, matching appylad.com (lowercase, coral dot). */
.made { margin-top: 4px; }
.made a { color: var(--ink-2); text-decoration: none; font-weight: 700; letter-spacing: -0.01em; }
.made a:hover { color: var(--ink); }
.made .dot { color: #ff7e5f; }

@media (max-width: 560px) {
  .bars { grid-template-columns: 1fr 62px 46px; }
  .bars .track { grid-column: 1 / -1; margin-bottom: 6px; }
}

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 6px; }
.chip { font-size: 13px; font-weight: 600; color: var(--ink-2); background: var(--card);
  border: 1px solid var(--line); border-radius: 999px; padding: 7px 13px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px; }
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.chip-n { font-size: 11.5px; opacity: 0.75; }
.chip.on .chip-n { opacity: 0.9; }
.row .barcell { flex: 1 1 auto; min-width: 90px; padding: 0 14px; }
.bartrack { display: block; position: relative; width: 100%; height: 8px; background: var(--line); border-radius: 999px; }
.barfill { position: absolute; left: 0; top: 0; height: 100%; background: var(--accent); border-radius: 999px; }
.barfill.good { background: var(--pass); }
.barfill.bad { background: var(--fail); }
.barmid { position: absolute; top: -2px; width: 2px; height: 12px; background: var(--ink-3); border-radius: 1px; }
@media (max-width: 560px) { .row .barcell { min-width: 60px; padding: 0 8px; } }

.rivals-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.riv { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; text-decoration: none; color: inherit; }
.riv:hover { border-color: var(--accent); }
.riv b { font-size: 14px; }
.riv-pct { font-size: 13px; color: var(--ink-2); }
.riv-tag { font-size: 11.5px; color: var(--ink-3); }

/* --- segment hubs + browse index --- */
.browse-types{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:18px 0}
.browse-types .cap{font-size:12px;color:var(--ink-3);margin-right:4px}
.browse-types a{font-size:13px;padding:4px 10px;border:1px solid var(--line);border-radius:999px;text-decoration:none}
.browse-types a:hover{border-color:var(--accent)}
.lb{width:100%;border-collapse:collapse;margin-top:8px}
.lb th,.lb td{text-align:left;padding:7px 10px;border-bottom:1px solid var(--line)}
.lb th{font-size:12px;color:var(--ink-3);font-weight:600}
.lb .lb-rank{width:2.5em;color:var(--ink-3)}
.lb .lb-pct{text-align:right}.lb .lb-n{text-align:right;color:var(--ink-3)}
.lb .good{color:var(--pass)}.lb .bad{color:var(--fail)}
.fault-row{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid var(--line)}
.fault-lab{min-width:0;flex:1}
.fault-sec{color:var(--ink-3);font-size:12px;margin-left:8px}
.fault-pct{white-space:nowrap}
.seg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:12px}
.seg-card{display:block;padding:16px;border:1px solid var(--line);border-radius:12px;text-decoration:none;background:var(--card)}
.seg-card:hover{border-color:var(--accent)}
.seg-name{font-weight:600;font-size:16px}
.seg-meta{color:var(--ink-3);font-size:12.5px;margin-top:4px}

/* --- comparison pages --- */
.cmp-verdict{background:var(--accent-soft);border-radius:10px;padding:14px 18px;margin:6px 0 22px}
.cmp-verdict p{margin:0;font-size:16px;line-height:1.5}
.cmp-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:28px}
.cmp-col{border:1px solid var(--line);border-radius:12px;padding:16px;text-align:center;background:var(--card)}
.cmp-name{font-weight:600;margin-bottom:6px}
.cmp-fp{font-size:34px;line-height:1}
.cmp-fp.good{color:var(--pass)}.cmp-fp.bad{color:var(--fail)}
.cmp-lab{font-size:12px;color:var(--ink-3);margin-top:2px}
.cmp-meta{font-size:12px;color:var(--ink-3);margin-top:8px}
.cf-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cf-col h3{font-size:15px;margin:0 0 8px}
.cf-row{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.cf-row .kchip{display:inline-block;width:auto;padding:1px 6px;margin-left:6px;vertical-align:middle}
.cmp-reports{display:flex;gap:12px;flex-wrap:wrap;margin:24px 0 8px}
.cmp-report{padding:10px 16px;border:1px solid var(--line);border-radius:10px;text-decoration:none;font-weight:600;font-size:14px}
.cmp-report:hover{border-color:var(--accent)}
@media (max-width:520px){.cmp-grid,.cf-grid{grid-template-columns:1fr}}
.riv-all{border-style:dashed}

/* --- common car faults hub --- */
.ff-area{margin-bottom:22px}
.ff-area h3{font-size:15px;margin:0 0 6px;color:var(--ink-2)}
.ff-row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:10px 0;border-bottom:1px solid var(--line)}
.ff-main{min-width:0}
.ff-def{font-weight:600;font-size:14px}
.ff-pct{margin-left:8px;color:var(--accent)}
.ff-say{font-size:13px;color:var(--ink-2);margin-top:3px;line-height:1.5}
.cf-check{color:var(--ink-3)}
.ff-cost, .cf-cost{white-space:nowrap;font-size:12.5px;color:var(--ink-3);align-self:center}