/* Structure and components. References tokens only; every colour, font, radius and
   spacing value comes from css/tokens.css. Layout that must differ per
   style is overridden in css/theme.css. */

*, *::before, *::after { box-sizing: border-box; }
:root { color-scheme: var(--scheme, light); }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: var(--font-body); font-size: var(--text-body); line-height: 1.45;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum", "kern";
}
::selection { background: var(--accent); color: var(--bg); }
a { color: inherit; text-decoration-color: var(--fg-2); text-underline-offset: 0.15em; }
a:hover { text-decoration-color: var(--accent); }
:focus-visible { outline: var(--focus-w) solid var(--focus); outline-offset: 2px; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: var(--display-weight); line-height: 1.05; letter-spacing: var(--display-tracking); text-wrap: balance; }
p { margin: 0; }
ul, ol { list-style: none; margin: 0; padding: 0; }
button, select, input { font: inherit; color: inherit; }
abbr[title] { text-decoration: none; }
.skip { position: absolute; left: -999px; top: 0; background: var(--fg); color: var(--bg); padding: var(--s-2) var(--s-3); z-index: 100; }
.skip:focus { left: var(--s-2); }

/* ---------- top bar ---------- */
.topbar { display: flex; align-items: center; gap: var(--s-3); height: var(--topbar-h); padding: 0 var(--s-4); border-bottom: 1px solid var(--line); }
.topbar .brand { font-family: var(--font-display); font-weight: var(--display-weight); text-decoration: none; }
.topbar .crumb { color: var(--fg-2); font-size: var(--text-small); }

/* ---------- sticky bar (compare: names, swatches, live scores) ---------- */
.stickybar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40; height: var(--stickybar-h);
  display: none; align-items: center; gap: var(--s-3); padding: 0 var(--s-4);
  background: var(--bg); color: var(--fg); border-bottom: 1px solid var(--line); font-size: var(--text-small);
}
body.page-compare.scrolled .stickybar { display: flex; }
.stickybar .sb-chip { display: inline-flex; align-items: center; gap: var(--s-1); min-width: 0; }
.stickybar .sb-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stickybar .sb-score { font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--text-h3); }
.stickybar .sb-vs { color: var(--fg-2); }
.stickybar .sb-section { margin-left: auto; color: var(--fg-2); white-space: nowrap; }
.swatch { display: inline-block; width: 0.75em; height: 0.75em; border-radius: var(--radius-pill); background: var(--fg-2); }
.swatch.a { background: var(--chip-a); }
.swatch.b { background: var(--chip-b); }

/* ---------- layout: left rail + main ---------- */
.layout { display: grid; grid-template-columns: var(--nav-w) minmax(0, 1fr); max-width: var(--page-w); margin: 0 auto; }
main { min-width: 0; }
/* Hidden until the hero scrolls out, but always in the tab order: tabbing into it reveals it. */
.secnav { position: sticky; top: 0; align-self: start; height: 100vh; padding: var(--s-4) var(--s-3); opacity: 0; clip-path: inset(100%); transition: opacity 200ms ease-out; }
body.scrolled .secnav, .secnav:focus-within { opacity: 1; clip-path: none; }
.secnav:focus-within { transition: none; } /* keyboard reveal is instant */
@media (min-width: 900px) { body.page-compare .secnav { top: var(--stickybar-h); height: calc(100vh - var(--stickybar-h)); } }
.secnav ol { display: flex; flex-direction: column; gap: var(--s-1); }
.secnav a { display: flex; gap: var(--s-2); align-items: center; min-height: 24px; padding: var(--s-1) var(--s-2); text-decoration: none; color: var(--fg-2); border-radius: var(--radius); border-left: 2px solid transparent; }
.secnav a:hover { color: var(--fg); }
.secnav a[aria-current="true"] { color: var(--fg); border-left-color: var(--accent); background: var(--bg-2); }
.secnav .num { font-family: var(--font-mono); font-size: var(--text-small); opacity: 0.8; }

/* ---------- sections ---------- */
.section { padding: var(--section-pad) var(--s-5); border-bottom: 1px solid var(--line); scroll-margin-top: var(--stickybar-h); }
.section:focus { outline: none; }
main { padding-bottom: 0; } /* ui.js sets the bottom room the scroll-spy needs */
.section-head { margin-bottom: var(--s-4); }
.section-head h2 { font-size: var(--text-h2); display: flex; align-items: baseline; gap: var(--s-2); }
.section-head .num { font-family: var(--font-mono); font-size: var(--text-small); color: var(--fg-2); letter-spacing: 0.1em; }
.section.hero .section-head h2 { font-size: var(--text-small); text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-2); }
.section.hero { padding-top: var(--s-4); display: flex; flex-direction: column; }
.section.hero .section-head { order: -1; }
.section.hero .section-body { min-width: 0; }

/* ---------- hero (entity) ---------- */
.hero-grid {
  display: grid; gap: var(--s-4) var(--s-5);
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  grid-template-areas:
    "identity picker"
    "score    relperf"
    "keyspecs price";
}
.identity { grid-area: identity; }
/* score tile: numeral left, the sub-scores beside it */
.score-block { grid-area: score; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-3) var(--s-5); align-items: start; }
.relperf { grid-area: relperf; }
.picker-block { grid-area: picker; }
.keyspecs { grid-area: keyspecs; }
.price { grid-area: price; }

.meta { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; font-size: var(--text-small); color: var(--fg-2); }
.meta .tag { border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 0 var(--s-2); }
h1 { font-size: var(--text-h1); margin-top: var(--s-2); }
.verdict { margin-top: var(--s-2); max-width: var(--measure); font-size: var(--text-lead); }

.score-unit { display: flex; flex-direction: column; gap: var(--s-1); }
.score-num { font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--text-score); line-height: 0.9; letter-spacing: var(--display-tracking); }
.score-unit .rank { font-size: var(--text-small); color: var(--fg-2); }
.score-unit .rank-pos { color: var(--fg); font-weight: 600; }
/* Text colours may differ from bar colours where a bar hue fails AA as text. */
[data-band="high"] .score-num, .value[data-band="high"] { color: var(--band-high-text, var(--band-high)); }
[data-band="mid"] .score-num, .value[data-band="mid"] { color: var(--band-mid-text, var(--band-mid)); }
[data-band="low"] .score-num, .value[data-band="low"] { color: var(--band-low-text, var(--band-low)); }

/* keycap toggles */
.chip-toggle { position: relative; display: inline-flex; }
.chip-toggle input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chip-toggle span { display: inline-flex; align-items: center; min-height: 24px; padding: var(--s-1) var(--s-3); border: 1px solid var(--line); border-radius: var(--radius-pill); font-size: var(--text-small); line-height: 1.3; cursor: pointer; }
.chip-toggle:hover span { border-color: var(--fg); }
.chip-toggle input:checked + span { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.chip-toggle input:focus-visible + span { outline: var(--focus-w) solid var(--focus); outline-offset: 2px; }

/* bars */
.bar { display: block; position: relative; height: var(--bar-h); background: var(--bar-track); border-radius: var(--radius); overflow: hidden; }
.bar .fill { position: absolute; inset: 0; width: calc(var(--pct) * 1%); background: var(--fg); }
.bar[data-band="high"] .fill { background: var(--band-high); }
.bar[data-band="mid"] .fill { background: var(--band-mid); }
.bar[data-band="low"] .fill { background: var(--band-low); }
.bar.a .fill { background: var(--chip-a); }
.bar.b .fill { background: var(--chip-b); }
.bar.neutral .fill { background: var(--fg-2); } /* neighbour bars: the delta text carries the sign, colour stays with winner/band */
.est { color: var(--fg-2); font-weight: 400; margin-right: 0.1em; cursor: help; }

.bar-row { display: grid; grid-template-columns: minmax(7em, 1.4fr) 4em minmax(0, 3fr) auto; gap: var(--s-1) var(--s-3); align-items: center; padding: var(--s-1) 0; }
.bar-row .metric { font-size: var(--text-small); }
.bar-row .value { font-family: var(--font-display); font-weight: var(--display-weight); text-align: right; }
.bar-row .rank-link { font-size: var(--text-small); color: var(--fg-2); white-space: nowrap; display: inline-flex; align-items: center; min-height: 24px; }
.bar-row .rank-link:empty { display: none; }
.bar-row .explain { grid-column: 1 / -1; font-size: var(--text-small); color: var(--fg-2); }
.score-block .subs .bar-row { grid-template-columns: minmax(6em, max-content) 3em minmax(0, 1fr); }
.score-block .subs .rank-link { display: none; }

/* relative performance */
.relperf h3 { font-size: var(--text-small); text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-2); margin-bottom: var(--s-2); }
.relperf-clone, .ticker-pause { display: none; } /* unused marquee affordance, kept off */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rel-row a, .rel-row.self { display: grid; grid-template-columns: minmax(0, 2.2fr) 3em minmax(0, 2fr) 2.5em; gap: var(--s-2); align-items: center; padding: var(--s-1) 0; text-decoration: none; }
.rel-row .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--text-small); }
.rel-row .delta { font-family: var(--font-mono); font-size: var(--text-small); text-align: right; }
.rel-row.pos .delta { color: var(--lose-text, var(--lose)); }
.rel-row.neg .delta { color: var(--win-text, var(--win)); }
.rel-row .rel-score { text-align: right; font-size: var(--text-small); color: var(--fg-2); }
.rel-row.self { font-weight: 600; background: var(--bg-2); }
.rel-row a:hover .name { text-decoration: underline; }

/* picker */
.picker label { display: block; font-size: var(--text-small); color: var(--fg-2); margin-bottom: var(--s-1); }
.picker-row { display: flex; gap: var(--s-1); }
.picker select { flex: 1; min-width: 0; padding: var(--s-2); border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2); overflow: hidden; text-overflow: ellipsis; }
.picker button { padding: var(--s-2) var(--s-3); border: 1px solid var(--fg); border-radius: var(--radius); background: var(--fg); color: var(--bg); cursor: pointer; }
.picker button:hover { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.picker .quick { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-top: var(--s-2); }
.picker .quick a { display: inline-flex; align-items: center; min-height: 24px; font-size: var(--text-small); padding: var(--s-1) var(--s-2); border: 1px solid var(--line); border-radius: var(--radius-pill); text-decoration: none; }
.picker .quick a:hover { border-color: var(--fg); }

/* key specs and price */
.keyspecs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-2); border-top: 1px solid var(--line); padding-top: var(--s-3); }
.keyspecs .k { display: block; font-size: var(--text-small); color: var(--fg-2); }
.keyspecs .v { display: block; font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--text-h3); }
.price { font-size: var(--text-small); color: var(--fg-2); }
/* link out to methodology under a benchmark list */
.method-link { margin: var(--s-3) 0 0; font-size: var(--text-small); color: var(--fg-2); }
.method { max-width: var(--measure); }
.method dt { font-weight: 700; margin-top: var(--s-3); }
.method dd { margin: 0; color: var(--fg-2); font-size: var(--text-small); }
.method .weights { list-style: none; padding: 0; margin: var(--s-2) 0 0; }
.method .weights li { margin-top: var(--s-1); }
/* editor's note: a fieldset so the label sits on the tile border */
.note { min-width: 0; }
.note legend { padding: 0 var(--s-1); font-size: var(--text-small); color: var(--fg-2); }
.note p { margin: 0; }
.bar-row .source, .note .source { color: var(--fg-2); }
.price .price-num { font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--text-h3); color: var(--fg); }

/* review, benchmarks */
.review-grid { display: grid; gap: var(--s-3); }
.bench .bar-row, .subs .bar-row { border-bottom: 1px solid var(--line); }

/* specs */
.spec-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-5); align-items: start; }
.spec-table { width: 100%; border-collapse: collapse; font-size: var(--text-small); }
.spec-table caption { text-align: left; font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--text-h3); padding: var(--s-2) 0; }
.spec-table th, .spec-table td { text-align: left; padding: var(--s-2) var(--s-2); vertical-align: top; }
.spec-table th[scope="row"] { color: var(--fg-2); font-weight: 400; width: 45%; }
.spec-table tbody tr:nth-child(even) { background: var(--bg-2); }
.spec-table thead th { border-bottom: 1px solid var(--fg); }

/* lists */
.devices li, .compare-links li { display: flex; justify-content: space-between; gap: var(--s-3); padding: var(--s-2) 0; border-bottom: 1px solid var(--line); }
.compare-links a { display: flex; flex: 1; gap: var(--s-2); align-items: baseline; min-height: 24px; text-decoration: none; }
.topbar .brand { display: inline-flex; align-items: center; min-height: 24px; }
.compare-links .vs { color: var(--fg-2); font-size: var(--text-small); }
.compare-links a:hover .b { text-decoration: underline; }
.compare-links .delta { margin-left: auto; font-family: var(--font-mono); font-size: var(--text-small); }
/* head-to-heads: verdict | rival + price | paired mini bars (this chip = A, rival = B) | scores.
   The verdict is read from this chip's point of view; win/lose colour, glyph and phrase all carry it. */
.competitors a { display: grid; grid-template-columns: 11em minmax(0, 1.4fr) minmax(6em, 1fr) auto; gap: var(--s-2) var(--s-4); align-items: center; padding: var(--s-1) 0; }
.h2h-verdict { font-weight: 700; white-space: nowrap; }
.h2h-glyph { display: inline-block; width: 1.2em; }
.h2h.win .h2h-verdict { color: var(--win-text, var(--win)); }
.h2h.lose .h2h-verdict { color: var(--lose-text, var(--lose)); }
.h2h.tie .h2h-verdict { color: var(--fg-2); }
.h2h-rival { display: flex; flex-direction: column; min-width: 0; }
.h2h-rival .b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.competitors .comp-price { font-size: var(--text-small); color: var(--fg-2); }
.h2h-bars { display: grid; gap: 3px; }
.h2h-bars .bar { height: 6px; }
.h2h-scores { display: flex; gap: var(--s-1); align-items: baseline; font-family: var(--font-mono); font-size: var(--text-small); white-space: nowrap; }
.h2h-scores .sc { font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--text-body); color: var(--fg-2); }
.h2h-scores .sc.hi { color: var(--fg); }
.h2h-scores .sc.a.hi { color: var(--chip-a); }
.h2h-scores .sc.b.hi { color: var(--chip-b); }
.h2h-scores .vs { color: var(--fg-2); }
.competitors a:hover .b { text-decoration: underline; }
.delta.pos { color: var(--win-text, var(--win)); }
.delta.neg { color: var(--lose-text, var(--lose)); }
.placeholder { color: var(--fg-2); font-style: italic; }

/* ---------- compare page ---------- */
.compare-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(12em, auto) minmax(0, 1fr); grid-template-areas: "a versus b"; gap: var(--s-4) var(--s-5); align-items: start; }
.chip-card.a { grid-area: a; }
.chip-card.b { grid-area: b; }
.versus { grid-area: versus; align-self: center; text-align: center; display: flex; flex-direction: column; gap: var(--s-2); max-width: 14em; }
.win-badge:empty { display: none; }
.win-badge { display: inline-block; font-size: var(--text-small); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.chip-card.a .win-badge { color: var(--chip-a); }
.chip-card.b .win-badge { color: var(--chip-b); }
.versus .vs { font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--text-h2); color: var(--fg-2); }
.winner { font-size: var(--text-small); }
.winner .winner-name { font-weight: 700; }
.winner.win-a .winner-name { color: var(--chip-a); }
.winner.win-b .winner-name { color: var(--chip-b); }
.chip-card .chip-name { font-size: var(--text-h1); margin-top: var(--s-2); }
.chip-card .score-unit { margin-top: var(--s-3); }
.chip-card.a .score-num { color: var(--chip-a); }
.chip-card.b .score-num { color: var(--chip-b); }
.chip-card .verdict { margin-top: var(--s-2); font-size: var(--text-body); }
.chip-card .picker { margin-top: var(--s-3); }
.chip-card.lose .score-num { opacity: 0.7; }

.diff-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
.diff-col h3 { font-size: var(--text-h3); display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-2); }
.diff-col li { padding: var(--s-2) 0; border-bottom: 1px solid var(--line); }
.diff-col.a li::before, .diff-col.b li::before { content: "+" / ""; font-family: var(--font-mono); margin-right: var(--s-2); }
.diff-col.a li::before { color: var(--chip-a); }
.diff-col.b li::before { color: var(--chip-b); }

.paired-row { display: grid; grid-template-columns: minmax(8em, 1.2fr) minmax(0, 2fr) minmax(0, 2fr); gap: var(--s-1) var(--s-3); align-items: center; padding: var(--s-2) 0; border-bottom: 1px solid var(--line); }
.paired-row .metric { font-size: var(--text-small); }
.paired-row .pair { display: grid; grid-template-columns: 1fr; gap: 2px; }
.paired-row .pair .value { font-family: var(--font-display); font-weight: var(--display-weight); }
.paired-row .pair.lose .value { color: var(--fg-2); }
.paired-row .pair .delta { font-family: var(--font-mono); font-size: var(--text-small); margin-left: var(--s-1); }
.paired-row .pair.a .delta { color: var(--chip-a); } /* the delta wears the winning chip's own colour */
.paired-row .pair.b .delta { color: var(--chip-b); }
.paired-row .explain { grid-column: 1 / -1; font-size: var(--text-small); color: var(--fg-2); }
.paired-row.total { border-top: 2px solid var(--fg); border-bottom: 0; }

.spec-tools { margin-bottom: var(--s-3); }
.compare-table th.a, .compare-table td.a { color: var(--fg); }
.compare-table tr.diff td { font-weight: 600; }
.compare-table tr.diff { box-shadow: inset 3px 0 0 var(--accent); }
.compare-table tr.group th { font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--text-body); padding-top: var(--s-4); background: transparent; }
.compare-table.only-diff tr.same { display: none; }
.compare-table tbody tr:nth-child(even) { background: var(--bg-2); }
.compare-table thead th .swatch { margin-right: var(--s-1); }

/* ---------- mobile ---------- */
@media (max-width: 899px) {
  .competitors a { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "verdict scores" "rival rival" "bars bars"; gap: var(--s-1) var(--s-3); }
  .h2h-verdict { grid-area: verdict; }
  .h2h-scores { grid-area: scores; }
  .h2h-rival { grid-area: rival; flex-direction: row; gap: var(--s-2); align-items: baseline; }
  .h2h-rival .b { white-space: normal; }
  .h2h-bars { grid-area: bars; }
  .layout { grid-template-columns: minmax(0, 1fr); }
  .secnav { position: fixed; top: 0; left: 0; right: 0; z-index: 30; height: var(--mobile-nav-h); padding: 0; background: var(--bg); border-bottom: 1px solid var(--line); overflow: hidden; }
  .secnav ol { flex-direction: row; overflow-x: auto; height: 100%; align-items: center; padding: 0 var(--s-2); gap: var(--s-1); scrollbar-width: none; }
  .secnav ol::-webkit-scrollbar { display: none; }
  .secnav a { white-space: nowrap; border-left: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: var(--s-1) var(--s-2); }
  .secnav a[aria-current="true"] { border-bottom-color: var(--accent); background: transparent; }
  body.page-compare.scrolled .stickybar { top: var(--mobile-nav-h); }
  .section { padding: var(--s-4) var(--s-3); scroll-margin-top: calc(var(--mobile-nav-h) + var(--stickybar-h)); }
  .hero-grid { display: flex; flex-direction: column; gap: var(--s-3); }
  .identity { order: 1; } .score-block { order: 2; } .picker-block { order: 3; } .relperf { order: 4; } .keyspecs { order: 5; } .price { order: 6; }
  .score-block { grid-template-columns: minmax(0, 1fr); }
  h1 { font-size: var(--text-h1-m); }
  .score-num { font-size: var(--text-score-m); }
  .verdict { font-size: var(--text-body); }
  .keyspecs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .spec-grid, .diff-cols { grid-template-columns: minmax(0, 1fr); }
  .bar-row { grid-template-columns: minmax(6em, 1fr) 3.5em minmax(0, 2fr); }
  .bar-row .rank-link { grid-column: 2 / -1; }
  .compare-hero { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "a b" "versus versus"; gap: var(--s-3); }
  .versus { max-width: none; }
  .chip-card .picker-row { flex-wrap: wrap; }
  .chip-card .picker select { flex: 1 1 100%; min-width: 0; }
  .chip-card .chip-name { overflow-wrap: anywhere; }
  .chip-toggle span { padding: var(--s-2) var(--s-3); }
  .chip-card .chip-name { font-size: var(--text-h2); }
  .chip-card .picker .quick { display: none; }
  .chip-card .verdict { font-size: var(--text-small); }
  .paired-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .paired-row .metric { grid-column: 1 / -1; }
  .stickybar .sb-section { display: none; }
}