/* Design tokens: see the UX and visual design spec (paper and ink, A blue,
   B orange, Bricolage Grotesque for display, Atkinson Hyperlegible for text). */
:root {
  --paper: #fbfbf8;
  --surface: #ffffff;
  --ink: #16171a;
  --ink-muted: #5a5e66;
  --line: #e2e3de;
  --side-a: #2457d6;
  --side-b: #c2410c;
  --reveal: #fff3c4;
  --good: #15803d;
  --caution: #a16207;
  --bad: #b42318;
  /* Older names, kept so every rule reads from the tokens */
  --bg: var(--paper);
  --panel: var(--surface);
  --muted: var(--ink-muted);
  --a: var(--side-a);
  --b: var(--side-b);
  --warn: var(--caution);
  --accent: var(--ink);
  --accent-ink: var(--paper);
  --radius: 20px;
  --radius-sm: 12px;
  /* One reading width for running text: about 80 characters a line at 16 px
     (WCAG 2.2, 1.4.8), in rem so paragraphs of different sizes end at the
     same edge. */
  --measure: 35rem;
  /* Everything else (tables, charts, panels, card grids) runs the page's full
     column, so a page has two right edges: this one and the column's. Panels
     inset their content by one amount, and card grids share one gap. */
  --inset: 20px;
  --card-gap: 14px;
  --font-display: "Bricolage Grotesque", "Atkinson Hyperlegible Next", system-ui, sans-serif;
  --font-text: "Public Sans", "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Numbers: Public Sans digits (plain zero), tabular so columns line up */
  --font-num: "Public Sans", "Atkinson Hyperlegible Next", system-ui, sans-serif;
  font-family: var(--font-text);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #141413;
    --surface: #1e1e1c;
    --ink: #edede8;
    --ink-muted: #a3a39c;
    --line: #33332f;
    --side-a: #6a9bff;
    --side-b: #ff8a4c;
    --reveal: #3d3612;
    --good: #5cc98a;
    --caution: #e5b24c;
    --bad: #f97066;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.5;
  font-size: 16px;
}

h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 700; letter-spacing: -0.015em; line-height: 1.15; }
h1 { font-size: 24px; }
h2 { font-size: 19px; }

button, select, input { font: inherit; color: inherit; }

/* Running text and prose lists stop at the reading width */
p, ul:not([class]), ol:not([class]), .how-list, .facts, .t-notes, .abx-how { max-width: var(--measure); }
/* except text that sits on the page itself, outside any card or panel: it
   runs the page's full column, like the panels around it. Our choice: these
   blocks are two or three lines, so a long line costs one return of the eye
   (How it works, the one long read, has its contents sidebar instead). */
.home-hero > p, .home > p, .build-head > p, #qview > p, .t-intro > p, .presets > p, .systems > p, .notes > p, main.doc > p, .gear-cat > p { max-width: none; }

/* Section and field labels: sentence case, never tiny caps */
.label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-muted);
  margin: 0 0 6px;
}
.label output { color: var(--ink); margin-left: 6px; font-family: var(--font-num); }

.hint { font-size: 14px; color: var(--ink-muted); margin: 6px 0 0; }

select {
  width: 100%;
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.primary {
  background: var(--ink);
  color: var(--paper);
  border: 0;
  border-radius: 999px;
  min-height: 44px;
  padding: 10px 20px;
  font-weight: 700;
  cursor: pointer;
}
.ghost {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  min-height: 44px;
  padding: 9px 16px;
  cursor: pointer;
  white-space: nowrap;
}
.ghost.small { min-height: 36px; padding: 6px 12px; font-size: 14px; }
.primary:focus-visible, .ghost:focus-visible, .ab:focus-visible, select:focus-visible, .cmp-card:focus-visible, .node:focus-visible { outline: 3px solid var(--side-a); outline-offset: 2px; }

.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; background: var(--surface); }
.seg-btn { border: 0; background: transparent; min-height: 38px; padding: 6px 16px; border-radius: 999px; cursor: pointer; color: var(--ink-muted); }
.seg-btn.on { background: var(--ink); color: var(--paper); }

/* App */
.app { max-width: 1200px; margin: 0 auto; padding: 24px 20px 56px; }
.top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand h1 { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; }
.badge { font-size: 13px; border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; color: var(--ink-muted); }

.transport {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 40px; /* set apart from the comparison below */
}
/* Two rows (music and playback; loudness and stereo or mono) and one line
   of hints and credits */
.t-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.t-music select { flex: 1 1 260px; min-width: 0; width: auto; }
.t-music .scrub { display: contents; }
.t-music .play { order: -1; }
.t-music .scrub-range { flex: 1 1 180px; }
.t-label { font-size: 14px; color: var(--ink-muted); }
.t-level input[type="range"] { flex: 1 1 160px; max-width: 320px; }
.t-level output { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 48px; }
.t-level .level-desc { flex: 1 1 220px; margin: 0; font: inherit; font-size: 14px; color: var(--ink-muted); }
.t-level .mono-row { margin-left: auto; }
.t-level .mono-row[hidden] { display: none; }
.t-level .seg-btn { min-height: 32px; padding: 4px 14px; }
.info { position: relative; }
.info summary { list-style: none; cursor: pointer; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; font-size: 13px; font-weight: 700; color: var(--ink-muted); font-style: italic; }
.info summary::-webkit-details-marker { display: none; }
.info[open] summary { color: var(--ink); border-color: var(--ink-muted); }
.info p { position: absolute; z-index: 5; top: 30px; right: -8px; width: min(320px, 80vw); margin: 0; padding: 10px 12px; font-size: 14px; line-height: 1.45; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 24px -12px rgba(0,0,0,.4); }
.t-meta { margin: 0; line-height: 1.5; }
.t-meta .hint { margin: 0; font-size: 13px; }
.t-meta:not(:has(.hint:not(:empty))) { display: none; }
.own-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.own-line p { margin: 0; flex: 1 1 260px; }
.own-line .q-own-btns { margin: 0; order: -1; } /* the buttons first, the reason after */
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.play { min-width: 96px; }
input[type="range"] { width: 100%; accent-color: var(--ink); }
.scale { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-muted); margin-top: 2px; }
.level-desc { margin: 10px 0 0; font-weight: 700; font-family: var(--font-display); font-size: 17px; line-height: 1.3; }

.compare { display: grid; grid-template-columns: 1fr 230px 1fr; gap: 20px; align-items: start; }
/* Parts both systems share, once, in signal order (app.js renderTiles) */
.shared { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 28px; margin: 0 0 16px; padding: 18px var(--inset) 14px; border: 1px solid color-mix(in oklab, var(--ink) 22%, var(--line)); border-radius: var(--radius);
  /* a bar in both systems' colors: these parts belong to A and B */
  background: linear-gradient(90deg, var(--a) 0 50%, var(--b) 50% 100%) top / 100% 4px no-repeat, var(--surface); }
/* What the loaded comparison changes, beside the parts both keep; stacked
   when there's no room for both */
.shared > .cmp-current { flex: 1 1 360px; margin: 2px 0 0; }
.shared-same { flex: 1 1 420px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.shared-h { margin: 0 6px 0 0; font-family: var(--font-display); font-size: 22px; font-weight: 800; letter-spacing: -0.01em; }
.shared-parts { display: flex; flex-wrap: wrap; gap: 8px; }
.shared-part { font: inherit; color: var(--ink); background: transparent; border: 1px solid color-mix(in oklab, var(--ink) 28%, var(--line)); border-radius: 12px; padding: 6px 12px; cursor: pointer; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; }
.shared-part:hover { border-color: var(--ink-muted); }
.shared-part:focus-visible { outline: 3px solid var(--side-a); outline-offset: 2px; }
.shared-part .tile-k { font-size: 12px; }
.shared-v { font-family: var(--font-display); font-size: 17px; font-weight: 700; line-height: 1.2; }
.shared-part.off { cursor: default; opacity: .6; }
.tiles-same { margin: 0; }
/* With the shared row showing, every tile left in a column differs: no badge */
body:has(#shared:not([hidden])) .tile-diff { display: none; }
.impact-full { margin: 0 var(--inset) var(--inset); line-height: 1.5; }
/* A system is being re-measured: the verdict on show is the previous one */
.impact-updating { font-weight: 400; color: var(--ink-muted); }
.impact.updating .impact-label, .impact.updating .impact-detail, .impact.updating .impact-bar, #impact-full.updating, .mgrade.updating { opacity: .45; transition: opacity .2s; } /* inset like the panel's heading and charts */
.impact-full p { margin: 0 0 10px; }
.impact-full p:last-child { margin-bottom: 0; }

.setup {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--inset);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.setup header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.setup header h2 { font-size: 22px; font-weight: 800; }
.readout { margin: 0; border-top: 1px solid var(--line); padding-top: 14px; display: grid; gap: 8px; }
.readout div { display: grid; grid-template-columns: 130px 1fr; gap: 8px; font-size: 14px; }
.readout dt { color: var(--ink-muted); }
.readout dd { margin: 0; }
.amp-meter.warn, .spk-meter.warn { color: var(--caution); font-weight: 700; }
.amp-meter.bad, .spk-meter.bad { color: var(--bad); font-weight: 700; }
.busy { font-size: 14px; color: var(--ink-muted); margin: 10px 0 0; }

.switch { display: flex; flex-direction: column; align-items: center; gap: 12px; position: sticky; top: 16px; }
.ab {
  width: 100%; max-width: 200px; height: 104px;
  font-family: var(--font-display);
  font-size: 48px; font-weight: 800;
  border-radius: 20px;
  border: 2px solid var(--line);
  background: var(--surface);
  cursor: pointer;
  color: var(--ink-muted);
}
.ab[data-side="A"].on { border-color: var(--side-a); color: var(--side-a); border-width: 3px; }
.ab[data-side="B"].on { border-color: var(--side-b); color: var(--side-b); border-width: 3px; }
.switch .hint { margin: 0; }
.switch-hint { text-align: center; max-width: 200px; }
/* Keyboard hints show only where there is a keyboard; touch hints only on touch screens */
.hint .touch { display: none; }
@media (hover: none) and (pointer: coarse) {
  .hint .keys { display: none; }
  .hint .touch { display: inline; }
}

/* The verdict: a band under both systems (outside their grid, so the
   sticky A/B column can't slide over it), the grade on the left and its
   sentence on the right at a comfortable line length */
.impact { margin-top: 20px; display: grid; grid-template-columns: minmax(170px, 230px) minmax(0, 1fr); gap: 8px 32px; align-items: center; background: var(--reveal); border-radius: var(--radius); padding: 18px var(--inset); }
.impact .label { margin-bottom: 2px; color: var(--ink); opacity: .75; }
.impact-label { font-family: var(--font-display); font-size: 28px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 10px; }
.impact-body { max-width: var(--measure); }
.impact-detail { margin: 0; font-size: 16px; }
.impact-bar { height: 8px; background: color-mix(in oklab, var(--ink) 12%, transparent); border-radius: 999px; overflow: hidden; }
.impact-bar span { display: block; height: 100%; width: 0; background: var(--ink); transition: width 0.3s; }
.impact-detail { color: var(--ink); opacity: .85; line-height: 1.45; }

.presets { margin-top: 36px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.presets .hint { margin: -2px 0 14px; }
.compare-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.cmp-group { border-top: 1px solid var(--line); }
.cmp-group:last-child { border-bottom: 1px solid var(--line); }
.cmp-group summary { cursor: pointer; padding: 12px 2px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.cmp-group-title { font-family: var(--font-display); font-weight: 700; font-size: 17px; }
.cmp-group summary { list-style: none; }
.cmp-group summary::-webkit-details-marker { display: none; }
.cmp-group summary::before { content: "▸"; color: var(--ink-muted); width: 12px; transition: transform .15s; }
.cmp-group[open] summary::before { transform: rotate(90deg); }
.cmp-group summary .hint { margin: 0; }
.cmp-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; padding: 0 0 14px; }
.cmp-card:disabled { opacity: 0.5; cursor: not-allowed; }
.cmp-current { margin: 0 0 14px; font-size: 15px; color: var(--ink-muted); }
.cmp-current b { color: var(--ink); }
.cmp-card { text-align: left; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; cursor: pointer; display: flex; flex-direction: column; gap: 8px; transition: border-color .15s, transform .15s, box-shadow .15s; }
.cmp-card:hover { border-color: var(--ink-muted); transform: translateY(-1px); }
.cmp-card.on { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.cmp-card .kind { font-size: 14px; font-weight: 700; color: var(--ink-muted); }
.cmp-card strong { font-family: var(--font-display); font-size: 16px; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
.cmp-card .plays { margin-top: auto; padding-top: 4px; font-size: 13px; color: var(--ink-muted); }
.cmp-card .hear { font-size: 15px; color: var(--ink-muted); line-height: 1.45; }
.chip { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 7px 14px; cursor: pointer; font-size: 14px; }
.chip:hover { border-color: var(--ink); }

.notes { margin-top: 36px; font-size: 14px; color: var(--ink-muted); }
.notes p { margin: 0 0 8px; }
.q-own, .own-box { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin: 4px 0 12px; }
.q-own p, .own-box p { margin: 0 0 8px; }
.keep-row { margin: 6px 0 0; }
.my-songs { margin: 4px 0 0; font-size: 14px; }
.my-songs summary { cursor: pointer; color: var(--accent); }
.my-songs-list { list-style: none; padding: 0; margin: 6px 0 0; max-height: 220px; overflow-y: auto; }
.my-songs-list li { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-bottom: 1px solid var(--line); }
/* Position in the song */
.scrub { display: flex; align-items: center; gap: 10px; margin: 10px 0 4px; }
.scrub-range { flex: 1; min-width: 0; }
.scrub .q-play, .scrub .play { flex: none; min-width: 84px; min-height: 40px; padding: 6px 16px; }
.keys-hint { margin: 6px 0 0; }
.scrub-time { margin: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* The nudge toward your own songs: up front, not small print */
.own-nudge { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; background: var(--reveal); border-radius: 12px; padding: 12px 16px; margin: 0 0 16px; }
.own-nudge[hidden] { display: none; }
.own-nudge-btns { display: flex; align-items: center; gap: 12px; }
/* The first-visit song choice comes before anything else in a question */
#qview:has(.q-own:not([hidden])) .q-steps { display: none; }
.own-nudge p { margin: 0; font-size: 16px; flex: 1 1 280px; }
.primary.small { min-height: 36px; padding: 6px 14px; font-size: 14px; }
.q-own-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.q-orig-row { margin: 6px 0 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.q-orig-row .hint { margin: 0; }
.orig-btn[aria-pressed="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.t-resume { margin-bottom: 16px; }
/* Taste results, round by round: a dot per vote */
.t-traits { list-style: none; padding: 0; margin: 8px 0 0; }
.t-traits > li { margin: 0 0 14px; }
.t-traits p { margin: 2px 0 0; font-size: 15px; }
.t-dots { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; vertical-align: middle; }
.t-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--ink); vertical-align: middle; }
.t-dot.up { background: var(--ink); }
.t-dot.down { background: transparent; }
.t-dot.none { border-color: var(--ink-muted); width: 10px; height: 2px; border-width: 1px; border-radius: 1px; background: var(--ink-muted); }
.t-rounds { margin-top: 4px; font-size: 14px; }
.t-rounds summary { cursor: pointer; color: var(--accent); }
.t-rounds ul { margin: 4px 0 0; padding-left: 0; list-style: none; }
.t-rounds li { margin: 2px 0; }
.t-legend { color: var(--ink-muted); font-size: 13px; }
.t-lean { font-weight: 700; }
.t-traits p.t-note { color: var(--ink-muted); font-size: 13px; }
.t-notes-h { margin-top: 18px; }
.t-notes { margin: 6px 0 0; padding-left: 20px; font-size: 14px; color: var(--ink-muted); line-height: 1.5; }
.t-notes li { margin: 3px 0; }
.t-next-links { display: flex; gap: 18px; margin: 10px 0 0; }
.t-resume-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
/* Taste result: the summary line, each trait's lean scale, how to get it */
.t-headline { font-family: var(--font-display); font-size: 21px; line-height: 1.35; margin: 0 0 14px; }
.t-trait-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; }
.t-strength { font-size: 13px; font-weight: 600; color: var(--ink); }
.t-strength.slight, .t-strength.lean { color: var(--ink-muted); }
.t-strength.none { color: var(--ink-muted); font-weight: 400; }
.t-scale { display: grid; grid-template-columns: 6.5em 1fr 6.5em; align-items: center; gap: 10px; margin: 8px 0 6px; font-size: 13px; line-height: 1.2; color: var(--ink-muted); }
.t-scale-end:first-child { text-align: right; }
@media (max-width: 480px) { .t-scale { grid-template-columns: 4.8em 1fr 4.8em; gap: 8px; } }
.t-scale.labelled { margin: 22px 0 22px; }
.t-scale-track { position: relative; height: 4px; border-radius: 2px; background: var(--line); }
.t-scale-mid { position: absolute; left: 50%; top: -4px; width: 2px; height: 12px; margin-left: -1px; background: var(--ink-muted); opacity: 0.5; }
.t-mark { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; border: 2px solid var(--ink); background: var(--ink); box-shadow: 0 0 0 2px var(--surface); }
.t-mark.slight { background: var(--surface); }
.t-mark.none { width: 8px; height: 8px; margin: -4px 0 0 -4px; border-width: 1px; border-color: var(--ink-muted); background: var(--ink-muted); }
.t-mark.you { border-color: var(--side-a); }
.t-mark.you:not(.slight):not(.none) { background: var(--side-a); }
.t-mark.them { border-color: var(--side-b); }
.t-mark.them:not(.slight):not(.none) { background: var(--side-b); }
.t-mark-label { position: absolute; left: 50%; transform: translateX(-50%); font-size: 12px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.t-mark.you .t-mark-label { bottom: calc(100% + 4px); }
.t-mark.them .t-mark-label { top: calc(100% + 4px); }
.t-howto { margin: 8px 0 0; padding: 8px 12px; border-left: 2px solid var(--line); }
.t-howto-h { margin: 0; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-muted); }
.t-howto ul { margin: 4px 0 0; padding-left: 0; list-style: none; font-size: 14px; line-height: 1.45; }
.t-howto li { margin: 3px 0; }
.t-share { margin: 18px 0 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.t-share h3 { margin-top: 0; }
.t-share p { font-size: 14px; }
.t-share-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.t-share-url { flex: 1 1 220px; min-width: 0; font: inherit; font-size: 13px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); }
.t-who { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-text); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin-right: 6px; color: var(--ink); }
.t-who::before { content: ""; width: 10px; height: 10px; border-radius: 50%; }
.t-who.you::before { background: var(--side-a); }
.t-who.them::before { background: var(--side-b); }
/* The product and measurement notes distract during the taste test */
body[data-view="taste"] footer.notes, body[data-view="question"] footer.notes { display: none; }

@media (max-width: 900px) {
  .transport { padding: 14px; }
  .compare { grid-template-columns: 1fr; }
  .switch { position: sticky; top: 0; z-index: 2; flex-direction: row; flex-wrap: wrap; justify-content: center; background: var(--paper); padding: 8px 0; order: -1; }
  .ab { width: 80px; height: 56px; font-size: 26px; }
  .switch-hint { flex-basis: 100%; max-width: none; }
  .impact { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 14px 16px; }
  .readout div { grid-template-columns: 1fr; gap: 2px; }
}

/* Sources page */
.doc h1 { font-size: 36px; font-weight: 800; letter-spacing: -0.02em; margin: 12px 0 8px; }
.doc h2 { margin: 32px 0 10px; }
.doc a { color: var(--ink); }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.doc table { border-collapse: collapse; width: 100%; font-size: 14px; }
.doc th, .doc td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.doc th { font-size: 13px; font-weight: 700; color: var(--ink-muted); }
.doc tr:last-child td { border-bottom: 0; }
.doc td.num { font-family: var(--font-num); font-size: 13px; }
.tag { display: inline-block; font-size: 13px; font-weight: 700; border-radius: 999px; padding: 2px 9px; white-space: nowrap; border: 1px solid currentColor; }
.tag-cited, .tag-traced, .tag-standard { color: var(--good); }
.tag-typical { color: var(--warn); }
.tag-spec { color: var(--a); }
.tag-design { color: var(--muted); }
.notes a { color: var(--accent); }

/* Blind test */
.blind-btn { width: 100%; }
.abx { border: 1px solid var(--line); border-radius: 24px; padding: 30px; max-width: 480px; width: calc(100% - 32px); background: var(--panel); color: var(--ink); }
.abx::backdrop { background: rgba(0, 0, 0, 0.55); }
.abx h2 { font-size: 28px; font-weight: 800; margin-bottom: 10px; }
.abx p { margin: 0 0 12px; }
.abx-how { padding-left: 20px; margin: 0 0 16px; }
.abx-how li { margin-bottom: 4px; }
.abx-length { border: 0; padding: 0; margin: 0 0 12px; display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
.abx-length legend { float: left; margin-right: 8px; }
.abx-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }
.abx-actions .primary { flex: 1; }
.abx-bar { height: 6px; background: var(--line); border-radius: 999px; overflow: hidden; margin-bottom: 20px; }
.abx-bar span { display: block; height: 100%; width: 0; background: var(--accent); transition: width 0.3s; }
.abx-players { display: flex; gap: 12px; justify-content: center; margin-bottom: 8px; }
.abx-play { width: 96px; height: 84px; font-family: var(--font-display); font-size: 34px; font-weight: 800; border-radius: 18px; border: 2px solid var(--line); background: var(--panel); color: var(--muted); cursor: pointer; }
.abx-play.x { width: 104px; }
.abx-play.on { border-color: var(--accent); color: var(--accent); }
.abx-keys { text-align: center; }
.abx-question { text-align: center; font-family: var(--font-display); font-size: 20px; font-weight: 700; margin-top: 16px !important; }
.abx-score { font-size: 32px !important; }
.link { background: none; border: 0; color: var(--ink-muted); text-decoration: underline; cursor: pointer; padding: 6px 0; font-size: 14px; }
@media (hover: none) and (pointer: coarse) { .abx-keys { display: none; } }

/* Music picker */
.loop-row { margin-top: 8px; gap: 8px; }
.loop-row .hint { margin: 0; }
input.time { width: 80px; min-height: 40px; padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); font-family: var(--font-num); }
.credit a, .recommended a { color: var(--ink); }
.recommended { margin: 0; font-size: 13px; }
.recommended summary { cursor: pointer; color: var(--ink); font-weight: 700; }
.recommended ul { padding-left: 18px; margin: 8px 0 0; }
.recommended li { margin-bottom: 8px; }
body.dragging::after { content: 'Drop an audio file to play it'; position: fixed; inset: 12px; border: 3px dashed var(--accent); border-radius: 16px; display: grid; place-items: center; font-size: 20px; font-weight: 600; color: var(--accent); background: color-mix(in srgb, var(--bg) 85%, transparent); pointer-events: none; z-index: 10; }

/* Vinyl stages */
.vinyl-stages { border-left: 3px solid var(--line); padding-left: 12px; margin: -4px 0 14px; }
.vinyl-stages .blurb { min-height: 0; }

/* Famous systems */
.systems { margin-top: 36px; }
.system-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--card-gap); }
.system { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--inset); display: flex; flex-direction: column; gap: 8px; }
.system h3 { margin: 0; font-size: 19px; }
.system p { margin: 0; font-size: 14px; color: var(--ink-muted); line-height: 1.5; }
.system .chain { color: var(--ink); }
.system .row { margin-top: auto; }

/* ---- A/B identity --------------------------------------------------------- */
body { --active: var(--a); }
body[data-active="B"] { --active: var(--b); }
.setup { transition: border-color .2s, box-shadow .2s; }
.setup.active[data-side="A"] { border-color: var(--a); box-shadow: 0 0 0 1px var(--a), 0 8px 30px -18px var(--a); }
.setup.active[data-side="B"] { border-color: var(--b); box-shadow: 0 0 0 1px var(--b), 0 8px 30px -18px var(--b); }
.setup[data-side="A"] h2 { color: var(--a); }
.setup[data-side="B"] h2 { color: var(--b); }
.ab { transition: border-color .15s, color .15s, background .15s, transform .1s; }
.ab:active { transform: scale(.97); }
.ab[data-side="A"].on { background: color-mix(in oklab, var(--a) 12%, var(--panel)); }
.ab[data-side="B"].on { background: color-mix(in oklab, var(--b) 12%, var(--panel)); }
@keyframes flash { 0% { box-shadow: 0 0 0 3px var(--accent); } 100% { box-shadow: 0 0 0 3px transparent; } }

/* ---- Chain diagram -------------------------------------------------------- */
.arrow { position: relative; }
.arrow::before { content: ""; position: absolute; left: 2px; right: 2px; top: 50%; border-top: 1.5px solid var(--line); }
.arrow::after { content: ""; position: absolute; right: 1px; top: calc(50% - 4px); border: 4px solid transparent; border-left-color: var(--line); border-right: 0; }

/* ---- Details panel -------------------------------------------------------- */
.details { margin-top: 24px; }
.details > details { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.details > details > summary { list-style: none; cursor: pointer; padding: 14px var(--inset); display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.details > details > summary::-webkit-details-marker { display: none; }
.details > details > summary::before { content: "▸"; color: var(--muted); transition: transform .15s; display: inline-block; }
.details > details[open] > summary::before { transform: rotate(90deg); }
.details > details > summary .label { margin: 0; font-family: var(--font-display); font-size: 19px; color: var(--ink); }
#details-body, .why-body { padding: 0 var(--inset) var(--inset); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 18px 28px; grid-auto-flow: row dense; }
#details-body > p, .why-body > p { grid-column: 1 / -1; }
.d-summary { grid-column: 1 / -1; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.d-summary ul { margin: 6px 0; padding-left: 20px; font-size: 17px; }
.d-summary li { margin: 3px 0; }
.d-block h3, .d-summary h3 { font-size: 19px; margin: 4px 0 8px; }
.d-block p { font-size: 15px; color: var(--ink-muted); margin: 0 0 10px; line-height: 1.55; }
/* Wide blocks span the panel; their charts sit side by side, each under its own heading */
.d-block.wide { grid-column: 1 / -1; }
.d-panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: 22px 28px; margin-top: 6px; }
.d-panel h4 { font-size: 16px; font-weight: 700; color: var(--ink); margin: 0 0 4px; }
.d-panel p { font-size: 14px; margin-bottom: 8px; }
@media (min-width: 900px) {
  .d-block.lead { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); grid-template-rows: auto 1fr; column-gap: 28px; align-items: start; }
  .d-block.lead > .chart { grid-column: 2; grid-row: 1 / span 2; margin-top: 4px; }
}
.step { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: 12px; color: var(--ink); background: var(--line); white-space: nowrap; }
.step.r0 { color: var(--ink-muted); background: transparent; border: 1px solid var(--line); }
.step.r3 { font-weight: 700; }
.facts { margin: 8px 0 0; padding-left: 20px; font-size: 14px; line-height: 1.55; }
.facts li { margin: 3px 0; }
/* The numbers behind a chart, folded under it */
.d-more { margin: 10px 0 0; }
.d-more > summary { cursor: pointer; font-size: 14px; font-weight: 700; color: var(--ink); }
/* Dot rows (charts.js dotRows): one measure a row, each on its own scale */
.dotrows { display: grid; gap: 6px; }
.dr-row { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr) 8.75rem; column-gap: 14px; align-items: start; }
.dr-name { margin: 0; font-size: 14px; line-height: 1.3; color: var(--ink); }
.d-block .dr-name { font-size: 14px; color: var(--ink); margin: 0; }
.dr-name span { display: block; font-size: 12px; color: var(--ink-muted); }
.dr-track { position: relative; height: 22px; margin: 2px 0 20px; }
.dr-track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--line); }
.dr-zone { position: absolute; top: 0; bottom: 0; border-radius: 4px; background: color-mix(in oklab, var(--caution) 22%, transparent); }
.dr-window { position: absolute; top: 0; bottom: 0; border-radius: 4px; border: 1.5px dashed var(--ink-muted); box-sizing: border-box; }
.dr-dot { position: absolute; top: 50%; width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px var(--panel); transform: translate(-50%, calc(-50% + var(--dy, 0px))); }
.dr-dot.ring { background: var(--panel); border: 2.5px solid var(--c); box-sizing: border-box; box-shadow: none; }
.dr-ticks { position: absolute; left: 0; right: 0; top: 100%; font-size: 11.5px; color: var(--ink-muted); font-family: var(--font-num); }
.dr-ticks span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.dr-ticks span:first-child { transform: none; }
.dr-ticks span:last-child { transform: translateX(-100%); }
.dr-vals, .d-block .dr-vals { margin: 0; padding-top: 2px; font-size: 13px; color: var(--ink); text-align: right; font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.dotrows figcaption { margin-top: 4px; }
.chart .key i.key-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.chart .key i.key-dot.ring { background: transparent; border: 2.5px solid var(--c); box-sizing: border-box; }
.chart .key i.key-zone { width: 14px; height: 10px; border-radius: 3px; background: color-mix(in oklab, var(--caution) 22%, transparent); }
.chart .key i.key-window { width: 14px; height: 10px; border-radius: 3px; border: 1.5px dashed var(--ink-muted); box-sizing: border-box; }
@media (max-width: 560px) {
  .dr-row { grid-template-columns: minmax(0, 1fr) auto; }
  .dr-track { grid-column: 1 / -1; grid-row: 2; margin-top: 6px; }
}
.dtable { width: 100%; border-collapse: collapse; font-size: 14px; }
.dtable td { font-family: var(--font-num); font-size: 13px; }
.dtable th, .dtable td { text-align: left; padding: 5px 6px; border-bottom: 1px solid var(--line); }
.dtable thead th { font-weight: 700; color: var(--ink-muted); font-size: 13px; }
.dtable tbody th:first-child { width: 22px; }
.rtable-wrap { container-type: inline-size; }
.rtable { table-layout: fixed; }
.rtable thead th { vertical-align: bottom; color: var(--ink); }
.rtable td { vertical-align: top; }
.rtable tbody th:first-child { width: 42%; font-weight: 400; color: var(--ink-muted); font-size: 13px; vertical-align: top; }
.rtable thead td:first-child { width: 42%; border-bottom: 1px solid var(--line); }
/* Narrow: each measurement's name on its own line, the two values below */
@container (max-width: 539px) {
  .rtable, .rtable thead, .rtable tbody { display: block; }
  .rtable tr { display: grid; grid-template-columns: 1fr 1fr; }
  .rtable thead td:first-child { display: none; }
  .rtable tbody th:first-child { width: auto; grid-column: 1 / -1; padding-top: 10px; border-bottom: 0; }
}
.chart { margin: 4px 0 12px; }
.chart svg { width: 100%; height: auto; display: block; }
.chart .g { stroke: var(--line); stroke-width: 1; }
.chart .g.z { stroke: var(--muted); stroke-opacity: .5; }
.chart .ax { fill: var(--ink-muted); font-size: 12px; font-family: var(--font-num); }
.chart .hl { fill: var(--ink); fill-opacity: .07; stroke: var(--ink); stroke-opacity: .45; stroke-dasharray: 3 3; }
.chart .ax.hl-label { fill: var(--ink); font-weight: 600; }
.chart .ax.val { fill: var(--ink); font-size: 12px; font-family: var(--font-num); }
.chart figcaption { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--muted); align-items: center; }
.chart .key { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); }
.chart .key i { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }
.chart .note { margin-left: auto; }
/* An "i" in a chart's legend opens under the chart, at its full width, so it
   fits wherever the legend entry wraps to (the SVG charts and the live one) */
figure:has(> figcaption .info) { position: relative; }
figcaption .info { position: static; }
figcaption .info summary { width: 18px; height: 18px; font-size: 11px; }
figcaption .info p { top: calc(100% + 6px); left: 0; right: 0; width: auto; color: var(--ink); font-weight: 400; }
/* Harmonic chart (charts.js harmonicChart): one panel at a time behind a
   radio switch, so it works without script */
.hchart .hsw { margin: 0 0 6px; }
.hchart .hsw .seg-btn { display: inline-flex; align-items: center; }
.hchart .hp { display: none; }
.hchart .hsel:nth-of-type(1):checked ~ svg .hp0, .hchart .hsel:nth-of-type(2):checked ~ svg .hp1,
.hchart .hsel:nth-of-type(3):checked ~ svg .hp2, .hchart .hsel:nth-of-type(4):checked ~ svg .hp3 { display: inline; }
.hchart .hsel:nth-of-type(1):checked ~ .hsw .seg-btn:nth-of-type(1), .hchart .hsel:nth-of-type(2):checked ~ .hsw .seg-btn:nth-of-type(2),
.hchart .hsel:nth-of-type(3):checked ~ .hsw .seg-btn:nth-of-type(3), .hchart .hsel:nth-of-type(4):checked ~ .hsw .seg-btn:nth-of-type(4) { background: color-mix(in oklab, var(--ink) 12%, var(--surface)); color: var(--ink); font-weight: 700; }
.hchart .hsel:nth-of-type(1):focus-visible ~ .hsw .seg-btn:nth-of-type(1), .hchart .hsel:nth-of-type(2):focus-visible ~ .hsw .seg-btn:nth-of-type(2),
.hchart .hsel:nth-of-type(3):focus-visible ~ .hsw .seg-btn:nth-of-type(3), .hchart .hsel:nth-of-type(4):focus-visible ~ .hsw .seg-btn:nth-of-type(4) { outline: 2px solid var(--ink); outline-offset: 1px; }
.hchart .ax.pct { font-size: 10px; opacity: .8; }
#level-out, .dtable td, .chart .ax, .doc td.num, input.time, .readout dd { font-family: var(--font-num); font-variant-numeric: tabular-nums; }

/* ---- Pinned play bar -------------------------------------------------------- */
.mbar { display: none; }
.mbar-info, .mgrade { display: none; }
/* Wide screens, in Build: a floating bar with the song, loudness and verdict */
@media (min-width: 901px) {
  body[data-view="build"] .mbar:not([hidden]) { display: flex; position: fixed; z-index: 20; bottom: 16px; left: 50%; transform: translateX(-50%); width: min(720px, calc(100% - 32px)); gap: 12px; align-items: center; padding: 8px 10px; background: color-mix(in oklab, var(--bg) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--line); border-radius: 18px; }
  body[data-view="build"] .mplay { min-width: 84px; height: 44px; }
  body[data-view="build"] .mbar-info { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; flex: 1; font: inherit; color: var(--ink); background: none; border: 0; padding: 0 4px; cursor: pointer; text-align: left; }
  body[data-view="build"] .mtrack { font-weight: 700; font-size: 14px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body[data-view="build"] .mlevel { font-size: 13px; color: var(--ink-muted); }
  body[data-view="build"] .mab { display: flex; gap: 6px; }
  body[data-view="build"] .mab .ab { width: 56px; height: 44px; font-size: 22px; border-radius: 12px; }
  body[data-view="build"] .mgrade:not(:empty) { display: inline-block; font-weight: 700; font-size: 13px; padding: 4px 10px; border-radius: 999px; background: var(--reveal); color: var(--ink); }
  body[data-view="build"] .app { padding-bottom: 110px; }
}
@media (max-width: 900px) {
  .mbar:not([hidden]) { display: flex; /* bottom padding leaves room for Netlify's badge */ position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; gap: 10px; align-items: center; padding: 10px 16px calc(64px + env(safe-area-inset-bottom)); background: color-mix(in oklab, var(--bg) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--line); }
  .mplay { flex: 0 0 auto; min-width: 84px; height: 48px; }
  .mab { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .mab .ab { width: auto; max-width: none; height: 52px; font-size: 26px; border-radius: 14px; }
  body:has(.mbar:not([hidden])) .app { padding-bottom: 140px; }
  .switch { position: static; order: 0; }
  .switch > .ab, .switch .switch-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

.impact-why { display: inline-block; margin-top: 6px; font-size: 13px; color: var(--accent); }
@media (max-width: 900px) { .switch { order: -1; } }

/* ---- Taste test --------------------------------------------------------- */
.taste-answer:disabled { opacity: .45; cursor: wait; }
.taste-result p { margin: 0 0 10px; line-height: 1.5; }
.taste-result h3 { font-size: 17px; margin: 16px 0 4px; }
.abx-length label { display: block; margin: 4px 0; }


/* ---- Home: questions ------------------------------------------------------ */
.home { max-width: 1200px; margin: 0 auto; padding: 20px 20px 64px; }
.home-top { display: flex; justify-content: space-between; align-items: center; gap: 12px 20px; flex-wrap: wrap; }
.wordmark, .wordmark-btn { font-family: var(--font-display); font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.wordmark-btn { background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink); }
.home-mode { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; }
.home-mode .hint { margin: 0; white-space: nowrap; }
.home-hero { padding: 12px 0 24px; max-width: 900px; }
.q-about { font-size: 15px; color: var(--ink-muted); margin: 0 0 10px; }
.q-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.q-section { margin: 0 0 26px; }
.q-section-title { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--ink-muted); text-transform: none; letter-spacing: 0; margin: 0 0 10px; }
.q-card { text-align: left; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--inset); min-height: 150px; cursor: pointer; display: flex; flex-direction: column; gap: 10px; transition: transform .15s, border-color .15s; }
.q-card:hover { transform: translateY(-2px); border-color: var(--ink-muted); }
.q-card:focus-visible { outline: 3px solid var(--side-a); outline-offset: 2px; }
.q-topic { font-size: 14px; font-weight: 700; color: var(--ink-muted); }
.q-card-title { font-family: var(--font-display); font-size: 24px; font-weight: 700; line-height: 1.15; letter-spacing: -0.015em; }
.q-count { margin-top: auto; font-size: 14px; color: var(--ink-muted); }
.q-card.q-start { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.q-card.q-off { opacity: 0.55; cursor: not-allowed; }
.q-card.q-off:hover { transform: none; border-color: var(--line); }
.q-card.q-start .q-topic, .q-card.q-start .q-count { color: color-mix(in oklab, var(--paper) 80%, var(--ink)); }
.home-h { font-family: var(--font-display); font-size: 24px; font-weight: 800; letter-spacing: -0.015em; margin: 8px 0 14px; }
/* The three paths, numbered in the suggested order */
.paths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 4px 0 18px; }
.path { text-align: left; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--inset); cursor: pointer; display: flex; flex-direction: column; gap: 8px; transition: transform .15s, border-color .15s; }
.path:hover { transform: translateY(-2px); border-color: var(--ink-muted); }
.path:focus-visible { outline: 3px solid var(--side-a); outline-offset: 2px; }
.path-n { font-size: 14px; font-weight: 700; color: var(--ink-muted); }
.path-title { font-family: var(--font-display); font-size: 26px; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
.path-text { font-size: 15px; line-height: 1.45; color: var(--ink-muted); }
.path-meta { margin-top: auto; padding-top: 4px; font-size: 14px; font-weight: 700; }
.path.path-start { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.path.path-start .path-n, .path.path-start .path-text { color: color-mix(in oklab, var(--paper) 78%, var(--ink)); }
.home-own { margin: 0 0 36px; font-size: 15px; }
.home-own .link { font-weight: 700; }

/* ---- App navigation ------------------------------------------------------- */
.app-nav { display: flex; gap: 8px 16px; flex-wrap: wrap; align-items: center; flex: 1 1 auto; justify-content: center; }
/* The three sections as one segmented control: the main way around the site */
.nav-seg { display: flex; gap: 2px; padding: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; }
.nav-btn { border: 0; background: transparent; border-radius: 999px; min-height: 42px; padding: 8px 16px; cursor: pointer; color: var(--ink); font: inherit; font-weight: 700; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.nav-btn:hover { background: color-mix(in oklab, var(--ink) 6%, var(--surface)); }
.nav-btn[aria-current="true"] { background: var(--ink); color: var(--paper); }
.nav-n { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-size: 12px; font-family: var(--font-num); background: color-mix(in oklab, var(--ink) 10%, var(--surface)); }
.nav-btn[aria-current="true"] .nav-n { background: color-mix(in oklab, var(--paper) 22%, var(--ink)); }
.nav-doc { color: var(--ink-muted); font-weight: 700; text-decoration: none; white-space: nowrap; }
.nav-doc:hover, .nav-doc[aria-current="true"] { color: var(--ink); }
.nav-doc[aria-current="true"] { text-decoration: underline; text-underline-offset: 4px; }
/* What you're listening on: set once, so it stays quiet */
.seg.quiet { padding: 2px; }
.seg.quiet .seg-btn { min-height: 30px; padding: 4px 12px; font-size: 14px; }
.seg.quiet .seg-btn.on { background: color-mix(in oklab, var(--ink) 12%, var(--surface)); color: var(--ink); font-weight: 700; }
.q-nextpath { text-align: right; margin: 10px 0 0; font-size: 15px; }
.q-nextpath .link { font-weight: 700; }

/* ---- Views ---------------------------------------------------------------- */
body[data-view="question"] #workspace { display: none; }
body[data-view="question"][data-reveal] #workspace { display: block; margin-top: 28px; }
body[data-view="question"] #workspace .transport,
body[data-view="question"] #workspace .presets,
body[data-view="question"] #workspace .systems,
body[data-view="question"] #workspace .switch,
body[data-view="question"] #workspace .impact { display: none; }
body[data-view="question"] #workspace .compare { grid-template-columns: 1fr 1fr; }

/* ---- Question view -------------------------------------------------------- */
.qview { margin-bottom: 8px; }
.q-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.q-progress { margin: 0; color: var(--ink-muted); font-size: 15px; }
.q-title { font-size: clamp(30px, 4vw, 44px); font-weight: 800; letter-spacing: -0.025em; margin: 6px 0 8px; }
.q-intro { color: var(--ink-muted); font-size: 18px; margin: 0 0 8px; }
/* Page headings: one size and spacing on every page (home, Find your taste,
   Build your own, Gear, How it works), the same as a question's title */
.page-h, .doc h1.page-h { font-size: clamp(30px, 4vw, 44px); font-weight: 800; letter-spacing: -0.025em; line-height: 1.1; margin: 6px 0 8px; }
.build-head { margin: 0 0 16px; }
body[data-view="question"] .build-head { display: none; }
.q-pair { font-size: 16px; margin: 0 0 22px; line-height: 1.5; }
.q-play { min-width: 84px; }
.q-steps { display: flex; flex-wrap: wrap; gap: var(--card-gap); align-items: stretch; }
/* The song nudge spans the row above the steps; on phones it follows Listen */
.q-steps > .own-nudge { order: -1; flex: 1 1 100%; margin: 0; }
.q-step { flex: 1 1 300px; background: color-mix(in oklab, var(--ink) 4%, var(--paper)); border-radius: var(--radius); padding: var(--inset); display: flex; flex-direction: column; gap: 12px; }
.q-step-n { margin: 0; font-size: 14px; font-weight: 700; color: var(--ink-muted); }
.q-ab { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.q-ab .ab { width: 100%; max-width: none; height: 120px; font-size: 52px; }
/* After the answer: each button names its system */
.q-ab .ab:has(.ab-name) { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 6px 10px; }
.ab .ab-name { font-family: var(--font-text); font-size: 14px; font-weight: 600; line-height: 1.25; color: var(--ink); text-wrap: balance; }
.q-replay { margin: 4px 0 8px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.q-replay .hint { margin: 0; }
.q-music { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-muted); }
.q-music select { flex: 1; min-width: 0; }
.q-prompt { font-family: var(--font-display); font-size: 24px; font-weight: 700; line-height: 1.2; margin: 0; }
.q-guess-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.q-guess-btns button { flex: 1 1 80px; min-height: 52px; font-size: 17px; }
.q-guess-btns button:disabled { opacity: .45; cursor: default; }
.q-guess-btns button.picked { opacity: 1; box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--ink); }
.q-skip { align-self: flex-start; }
.q-skip:disabled { visibility: hidden; }
.q-answer { transition: background .2s; }
.q-answer.open { background: var(--reveal); }
.q-answer-body p { margin: 0 0 10px; line-height: 1.5; }
.q-result { font-family: var(--font-display); font-size: 22px; font-weight: 800; }
.q-which b.sa { color: var(--side-a); }
.q-which b.sb { color: var(--side-b); }
.q-verdict-label { font-size: 13px; font-weight: 700; color: var(--ink-muted); margin: 10px 0 -4px !important; }
.q-verdict { font-family: var(--font-display); font-size: 32px; font-weight: 800; letter-spacing: -0.02em; margin: 6px 0 4px !important; }
.q-foot { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 16px; }

@media (max-width: 700px) {
  .home-hero { padding: 4px 0 16px; }
  .page-h, .doc h1.page-h { font-size: 28px; margin: 2px 0 6px; }
  .q-ab .ab { width: 100%; height: 132px; font-size: 56px; }
  .top { margin-bottom: 12px; gap: 6px; }
  .top .home-mode { display: none; }
  .brand { flex: 1 1 auto; }
  .nav-doc { order: 1; font-size: 14px; }
  .home-mode { order: 2; }
  .app-nav { order: 3; flex-basis: 100%; }
  .nav-seg { flex: 1 1 auto; }
  .nav-btn { flex: 1 1 0; justify-content: center; min-height: 40px; padding: 6px 5px; font-size: 15px; gap: 4px; }
  .paths { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .path { padding: 16px 18px; gap: 6px; }
  .path-title { font-size: 22px; }
  .q-nextpath { text-align: left; }
  .q-title { font-size: 28px; margin: 2px 0 6px; }
  .q-about { font-size: 14px; margin-bottom: 6px; }
  .q-intro { font-size: 15px; margin-bottom: 6px; }
  .q-pair { font-size: 14px; margin-bottom: 12px; }
  .q-steps > .own-nudge { order: 0; }
  .q-play { display: none; } /* the bottom bar has Play/Pause on phones */
  .q-step { padding: 16px; }
  .q-foot { justify-content: stretch; }
  .q-foot button { flex: 1 1 100%; }
}

/* ---- Why panel and live A/B curves --------------------------------------- */
.q-why { margin-top: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--inset) 0 4px; }
.q-why > h3 { font-family: var(--font-display); font-size: 26px; font-weight: 800; letter-spacing: -0.015em; margin: 0 20px 12px; }
.q-why .why-body { padding: 0 var(--inset) var(--inset); }
.live { margin: 0 var(--inset) var(--inset); }
.live-build { margin: 0 var(--inset) var(--inset); }
/* Build: the verdict beside the live chart on wide screens, in the same
   columns as the tone block below; stacked when narrow or with no verdict */
@media (min-width: 900px) {
  .why-top:has(> .impact-full:not(:empty)) { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: 28px; align-items: start; margin: 0 var(--inset) var(--inset); }
  .why-top:has(> .impact-full:not(:empty)) > * { margin: 0; }
}
.live-note { margin: 0 0 8px; font-size: 15px; color: var(--ink-muted); line-height: 1.5; }
.live-canvas { display: block; width: 100%; height: 240px; background: color-mix(in oklab, var(--ink) 3%, var(--paper)); border-radius: 14px; font-family: var(--font-num); }
.live figcaption { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--ink-muted); align-items: center; margin-top: 8px; }
.live .key { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 700; }
.live .key i { width: 16px; height: 4px; border-radius: 2px; display: inline-block; }
.ka { background: var(--side-a); }
.kb { background: var(--side-b); }
.kr { background: repeating-linear-gradient(90deg, var(--ink-muted) 0 5px, transparent 5px 9px); }
.chart .key-band i { height: 10px; width: 14px; border: 1.25px dashed; border-radius: 2px; }
.live .note { margin-left: auto; }
.q-why-open { font-weight: 700; margin-top: 4px; }

.src-chip { display: inline-block; vertical-align: 1px; margin-left: 4px; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1.6; text-decoration: none; white-space: nowrap; }
.src-chip.m { background: color-mix(in oklab, var(--good) 12%, var(--surface)); color: var(--good); }
.src-chip.t { background: color-mix(in oklab, var(--ink) 7%, var(--surface)); color: var(--ink-muted); }
.src-chip:hover { text-decoration: underline; }

@media (max-width: 700px) {
  .q-why { border-radius: 18px; padding-top: 16px; }
  .q-why > h3 { font-size: 22px; margin: 0 16px 10px; }
  .live { margin: 0 16px 16px; }
  .q-why .why-body { padding: 0 16px 16px; }
  .live-canvas { height: 200px; }
  .live .note { margin-left: 0; flex-basis: 100%; }
}

/* ---- Build your own: part tiles and the part sheet ------------------------ */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tiles { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.tile { text-align: left; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; transition: border-color .15s, box-shadow .15s; }
.tile:hover { border-color: var(--ink-muted); }
.tile:focus-visible { outline: 3px solid var(--side-a); outline-offset: 2px; }
.tile-k { font-size: 13px; font-weight: 700; color: var(--ink-muted); display: flex; align-items: center; gap: 8px; }
.tile-diff { font-size: 12px; font-weight: 700; color: var(--ink); background: var(--reveal); padding: 1px 8px; border-radius: 999px; }
.tile-v { font-family: var(--font-display); font-size: 18px; font-weight: 700; line-height: 1.2; }
.tile-note { font-size: 14px; color: var(--ink-muted); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tile-chips, .opt-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.trait { font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: color-mix(in oklab, var(--ink) 7%, var(--surface)); color: var(--ink); }
.tile.diff { border-color: color-mix(in oklab, var(--ink) 45%, var(--line)); }
.tile.off { cursor: default; opacity: .6; }
.tile.off:hover { border-color: var(--line); }

.sheet { width: min(640px, calc(100vw - 32px)); max-height: min(86vh, 900px); padding: 0; border: 0; border-radius: 22px; background: var(--surface); color: var(--ink); box-shadow: 0 24px 80px -20px rgba(0, 0, 0, .45); overflow: hidden; }
.sheet[open] { display: flex; flex-direction: column; }
.sheet::backdrop { background: rgba(10, 10, 12, .4); }
.sheet-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 20px 10px; }
.sheet-title { font-family: var(--font-display); font-size: 24px; font-weight: 800; letter-spacing: -0.015em; margin: 0; }
.sheet-for { font-family: var(--font-text); font-size: 16px; font-weight: 400; color: var(--ink-muted); margin-left: 4px; }
.sheet-for b.sa { color: var(--side-a); }
.sheet-for b.sb { color: var(--side-b); }
.sheet-scope { margin: 0 20px 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 16px; background: color-mix(in oklab, var(--ink) 4%, var(--surface)); }
.sheet-scope[hidden] { display: none; }
.sheet-scope-k { margin: 0 0 8px; font-size: 15px; font-weight: 800; color: var(--ink); }
.scope-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.scope-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 6px 10px; font: inherit; font-size: 15px; font-weight: 700; color: var(--ink); background: var(--surface); border: 2px solid var(--line); border-radius: 12px; cursor: pointer; transition: border-color .15s, background .15s; }
.scope-btn:hover { border-color: color-mix(in oklab, var(--ink) 35%, var(--line)); }
.scope-btn[aria-checked="true"] { border-color: var(--ink); background: color-mix(in oklab, var(--ink) 9%, var(--surface)); }
.scope-btn[data-scope="A"][aria-checked="true"] { border-color: var(--side-a); background: color-mix(in oklab, var(--side-a) 14%, var(--surface)); }
.scope-btn[data-scope="B"][aria-checked="true"] { border-color: var(--side-b); background: color-mix(in oklab, var(--side-b) 14%, var(--surface)); }
.scope-badge { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: 13px; font-weight: 800; color: var(--surface); }
.scope-badge.sa { background: var(--side-a); }
.scope-badge.sb { background: var(--side-b); }
.scope-badge + .scope-badge { margin-left: -10px; box-shadow: 0 0 0 2px var(--surface); }
.sheet-scope-hint { margin: 8px 0 0; font-size: 13px; }
.sheet-search-row { display: block; padding: 0 20px 10px; }
.sheet-search { width: 100%; font: inherit; font-size: 16px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--ink); }
.sheet-search:focus-visible { outline: 3px solid var(--side-a); outline-offset: 1px; }
.sheet-filters { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 20px 6px; }
.sheet-filter { font: inherit; font-size: 13px; font-weight: 700; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; }
.sheet-filter[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.sheet-note { margin: 4px 20px 8px; font-size: 13px; }
.sheet-note:empty { display: none; }
.sheet-list { overflow-y: auto; padding: 4px 20px 20px; display: flex; flex-direction: column; gap: 8px; overscroll-behavior: contain; }
.sheet-group { font-size: 13px; font-weight: 700; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .06em; margin: 10px 0 0; }
.opt { text-align: left; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; }
.opt:hover { border-color: var(--ink-muted); }
.opt:focus-visible { outline: 3px solid var(--side-a); outline-offset: 2px; }
.sheet[data-side="A"] .opt.current { border: 2px solid var(--side-a); background: color-mix(in oklab, var(--side-a) 6%, var(--surface)); }
.sheet[data-side="B"] .opt.current { border: 2px solid var(--side-b); background: color-mix(in oklab, var(--side-b) 6%, var(--surface)); }
.opt-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.opt-name { font-weight: 700; font-size: 16px; }
.opt-blurb { font-size: 14px; color: var(--ink-muted); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.on-badge { font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 999px; color: var(--surface); }
.on-badge.sa { background: var(--side-a); }
.on-badge.sb { background: var(--side-b); }
.opt-chips .src-chip { margin-left: 0; }
.sheet-empty { color: var(--ink-muted); }

@media (max-width: 700px) {
  #workspace { display: flex; flex-direction: column; }
  #workspace > .build-head { order: -4; }
  #workspace > .compare { order: -3; }
  #workspace > .impact { order: -2; margin: 10px 0 16px; }
  #workspace > .shared { order: -1; } /* right under the two systems */
  .t-music select { order: -2; flex-basis: 100%; } /* the song, then play and position on one line */
  .t-music .scrub-range { flex-basis: 80px; }
  .compare { gap: 10px; grid-template-columns: minmax(0, 1fr); }
  .setup { min-width: 0; }
  .tile.diff { order: -1; } /* what differs comes first in the strip */
  .setup .readout { gap: 4px; }
  .setup .readout div { display: flex; flex-wrap: wrap; gap: 0 6px; font-size: 13px; }
  .setup .readout dt::after { content: ":"; }
  .compare > .setup { order: 0; }
  .compare > .switch { order: 1; position: static; }
  .setup { padding: 12px 0 12px 14px; }
  .setup header { margin: 0 14px 8px 0; }
  .setup header h2 { font-size: 18px; }
  .tiles { flex-direction: row; overflow-x: auto; scroll-snap-type: x proximity; gap: 8px; margin-bottom: 8px; padding: 2px 14px 4px 0; -webkit-overflow-scrolling: touch; }
  .tile { flex: 0 0 auto; width: 148px; scroll-snap-align: start; padding: 10px 12px; }
  .tile-v { font-size: 15px; }
  .tile-note, .tile-chips { display: none; }
  .setup .readout { margin-right: 14px; padding-top: 8px; }
  .sheet { width: 100vw; max-width: none; max-height: 88vh; margin: auto 0 0; border-radius: 22px 22px 0 0; padding-bottom: env(safe-area-inset-bottom); }
  .sheet[open] { animation: sheet-up .22s ease-out; }
  .sheet-head { padding: 16px 16px 8px; }
  .sheet-title { font-size: 21px; }
  .sheet-search-row, .sheet-filters { padding-left: 16px; padding-right: 16px; }
  .sheet-scope { margin-left: 16px; margin-right: 16px; }
  .sheet-note { margin-left: 16px; margin-right: 16px; }
  .sheet-list { padding: 4px 16px 24px; }
}
@keyframes sheet-up { from { transform: translateY(40px); opacity: .6; } to { transform: none; opacity: 1; } }

/* ---- Find your taste: its own section, styled like the questions ---------- */
body[data-view="taste"] #workspace { display: none; }
/* The phone bar (Play, A, B) only during rounds */
body[data-view="taste"]:has(#taste:not([data-current="trial"])) .mbar { display: none !important; }
.tview { margin-bottom: 8px; }
.tview .q-title { margin-top: 6px; }
.t-how { padding-left: 20px; margin: 0; line-height: 1.55; }
.t-how li { margin-bottom: 6px; }
.t-length { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.t-opt { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; cursor: pointer; line-height: 1.45; font-size: 15px; }
.t-opt:has(input:checked) { border: 2px solid var(--ink); padding: 13px 15px; }
.t-opt input { margin-top: 4px; accent-color: var(--ink); }
.taste-begin { align-self: flex-start; min-width: 160px; min-height: 52px; font-size: 17px; }
.t-bar { height: 6px; background: var(--line); border-radius: 999px; overflow: hidden; margin: 6px 0 18px; }
.t-bar span { display: block; height: 100%; width: 0; background: var(--ink); transition: width .3s; }
.tview .q-head span { display: flex; gap: 16px; }
.taste-answers button { flex: 1 1 120px; }
.taste-answers .ghost { flex-basis: 100%; }
.t-result-card { flex: 2 1 420px; background: var(--reveal); }
.t-next { flex: 1 1 260px; }
.t-next .taste-load { min-height: 52px; font-size: 17px; }
.t-next .taste-close { align-self: flex-start; }
.t-load-note b.sa, .systems .hint b.sa { color: var(--side-a); }
.t-load-note b.sb, .systems .hint b.sb { color: var(--side-b); }
.t-load-note { margin: 0; line-height: 1.5; }
.t-listen-note { margin: 8px 0 0; line-height: 1.5; }
.taste-listen-go:disabled { opacity: .45; cursor: default; }
.taste-listen-go { align-self: flex-start; min-width: 160px; min-height: 52px; font-size: 17px; }
.taste-listen-answers button { flex: 1 1 120px; }
.taste-listen-answers .ghost { flex-basis: 100%; }
.t-listen-text { margin: 0; line-height: 1.55; }
.t-listen-own { display: flex; gap: 10px; align-items: center; line-height: 1.45; }
.t-listen-own input { accent-color: var(--ink); }
.systems .hint { margin: -2px 0 14px; }
.system .row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.system .row .ghost { flex: 1 1 auto; }
.system .row .link { flex: 0 0 auto; font-size: 14px; }

/* ---- How it works ---------------------------------------------------------- */
a.nav-btn { display: inline-flex; align-items: center; text-decoration: none; }
.nav-short { display: none; }
/* Four steps: the short labels from the width where the nav takes its own row */
@media (max-width: 700px) {
  .nav-btn .nav-long { display: none; }
  .nav-btn .nav-short { display: inline; }
}
@media (max-width: 480px) {
  .home-top .badge, .top .badge { display: none; } /* room for How it works beside the name */
}
@media (max-width: 360px) {
  .nav-btn .nav-n { display: none; }
}
a.wordmark-btn { color: var(--ink); text-decoration: none; }
.how .q-title { margin-top: 8px; }
/* At a glance: four short claims under the intro */
.how-glance { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--card-gap); margin: 20px 0 24px; }
.how-glance > div { background: color-mix(in oklab, var(--ink) 4%, var(--paper)); border-radius: var(--radius); padding: 16px 18px 14px; }
.how-glance p { margin: 0; font-size: 15px; line-height: 1.5; }
.how-glance .how-glance-h { font-family: var(--font-display); font-weight: 700; font-size: 18px; line-height: 1.25; margin-bottom: 6px; }
.how-toc { display: grid; gap: 12px; margin: 4px 0 8px; }
/* A reading page: its boxes, rules, lists and tables all end where the text does */
.how-glance, .how-toc, .how-part, .how-chain, .how-steps, .how-data, body[data-view="how"] .table-wrap { max-width: var(--measure); }
.how-toc-row { display: flex; flex-wrap: wrap; gap: 8px; }
.how-toc-part { flex-basis: 100%; font-size: 13px; font-weight: 700; color: var(--ink-muted); }
.how-toc a { font-size: 14px; font-weight: 700; color: var(--ink); text-decoration: none; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.how-toc a:hover { border-color: var(--ink-muted); }
/* Part 1 and Part 2 */
.how-part { margin: 56px 0 0; padding-top: 18px; border-top: 2px solid var(--ink); scroll-margin-top: 16px; }
.how-part-n { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); }
.how-part h2 { font-family: var(--font-display); font-size: 36px; font-weight: 800; letter-spacing: -0.02em; margin: 2px 0 0; }
.how-section { scroll-margin-top: 16px; padding-top: 8px; }
.how-section > h3 { font-family: var(--font-display); font-size: 26px; font-weight: 800; letter-spacing: -0.015em; margin: 36px 0 10px; }
.how-section h4 { font-size: 19px; margin: 28px 0 8px; scroll-margin-top: 16px; }
.how-section p, .how-section li, .how-data dd { line-height: 1.6; font-size: 16px; }
.how-list { padding-left: 20px; }
.how-list li { margin-bottom: 8px; }
.how-list ul { margin: 6px 0 0; padding-left: 20px; }
.how-list ul li { margin-bottom: 2px; }
/* The five stages as a strip of links, then one card each */
.how-flow { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 0; }
.how-flow li { display: flex; align-items: center; }
.how-flow li + li::before { content: "→"; color: var(--ink-muted); margin: 0 8px; }
.how-flow a { font-size: 14px; font-weight: 700; color: var(--ink); text-decoration: none; padding: 6px 12px; border-radius: 999px; background: color-mix(in oklab, var(--ink) 7%, var(--paper)); }
.how-chain { list-style: none; counter-reset: stage; padding: 0; margin: 14px 0 0; display: grid; gap: 12px; }
.how-chain > li { counter-increment: stage; background: color-mix(in oklab, var(--ink) 4%, var(--paper)); border-radius: var(--radius); padding: 16px 20px 14px; scroll-margin-top: 16px; }
.how-chain > li h4 { margin: 0 0 6px; font-size: 20px; }
.how-chain > li h4::before { content: counter(stage) " · "; color: var(--ink-muted); }
.how-chain p { margin: 0 0 4px; }
.how-chain ul { margin: 6px 0 0; padding-left: 20px; }
.how-chain li li { margin-bottom: 6px; }
/* The detail behind a summary, closed until asked for */
.how-more { margin: 8px 0 0; }
.how-more > summary { display: block; position: relative; padding: 4px 0 4px 18px; cursor: pointer; font-weight: 700; color: var(--ink); list-style: none; }
.how-more > summary::-webkit-details-marker { display: none; }
.how-more > summary::before { content: "▸"; position: absolute; left: 0; color: var(--ink-muted); transition: transform .15s; }
.how-more[open] > summary::before { transform: rotate(90deg); }
.how-more > :not(summary) { margin-left: 18px; }
.how-more > p { margin: 8px 0 0 18px; }
/* Indented under the toggle, so they end where the text above does */
.how-more > p, .how-more > ul { max-width: calc(var(--measure) - 18px); }
.how-steps { border-top: 1px solid var(--line); }
.how-steps > .how-more { margin: 0; padding: 8px 0; border-bottom: 1px solid var(--line); }
.how-steps > .how-more > summary { font-weight: 400; line-height: 1.5; }
.how-steps > .how-more[open] { padding-bottom: 16px; }
.how-data dt { font-weight: 700; font-size: 16px; margin-top: 16px; }
.how-data dd { margin: 4px 0 0; }
.how .doc td .src-chip { margin-left: 0; }
/* Each measure heads its own group, with its four steps in the columns below */
.verdict-table { min-width: 440px; table-layout: fixed; }
.verdict-table tbody th { font-size: 14px; font-weight: 400; color: var(--ink); border-bottom: 0; padding-bottom: 2px; }
.verdict-table td { text-wrap: pretty; }
#presets tbody th { padding-top: 16px; }
#materials .num { text-align: right; padding-left: 6px; padding-right: 8px; }
#materials td .hint { font-size: 12px; overflow-wrap: anywhere; }
.how-back { margin: 40px 0 0; }
.how-back a { font-weight: 700; }
/* On a wide screen the page fills the column like the app's views: the
   contents list stays in view down the left, and the text, tables and boxes
   share the rest, out to the same right edge as the header (up to about 125
   characters a line, our choice against an otherwise half-empty page). Grid
   items' margins don't collapse, so the gaps between blocks are set here. */
body[data-view="how"] main.doc { --measure: 100%; }
@media (min-width: 1000px) {
  body[data-view="how"] main.doc { display: grid; grid-template-columns: 220px minmax(0, 1fr); column-gap: 48px; align-items: start; }
  body[data-view="how"] main.doc > * { grid-column: 2; }
  body[data-view="how"] main.doc > .how-toc { grid-column: 1; grid-row: 1 / span 40; position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; margin: 0; padding: 14px 0 0; gap: 18px; }
  body[data-view="how"] main.doc > .how-glance { margin-top: 12px; }
  body[data-view="how"] main.doc > .how-part { margin-top: 40px; }
  .how-toc-row { flex-direction: column; flex-wrap: nowrap; gap: 2px; }
  .how-toc-part { margin: 0 0 4px 10px; }
  .how-toc a { font-weight: 400; border: 0; background: none; padding: 5px 10px; border-radius: 8px; line-height: 1.35; }
  .how-toc a:hover { background: color-mix(in oklab, var(--ink) 5%, var(--paper)); }
  .how-toc a[aria-current] { font-weight: 700; background: color-mix(in oklab, var(--ink) 8%, var(--paper)); }
}
@media (max-width: 700px) {
  .how-part h2 { font-size: 30px; }
  .how-section > h3 { font-size: 23px; }
  .how-chain > li { padding: 14px 16px 12px; }
}

/* Build: music on the left, how it's played on the right; the invitation to
   use your own songs spans both */
.transport > .own-banner, .transport > .own-nudge { grid-column: 1 / -1; margin: 0; }
.transport > * { min-width: 0; }
.transport .upload[hidden] { display: none; }
.transport .upload { flex: none; }
.loop-from:not([hidden]) { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* DSP and room setup controls in the part sheet */
.ctl-note { margin: 2px 0 4px; font-size: 13px; }
.ctl-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.opt:disabled { cursor: default; opacity: .5; }
.tone-row { display: grid; grid-template-columns: minmax(0, 1fr) 64px; grid-template-areas: "name out" "range range"; align-items: center; gap: 2px 8px; padding: 6px 0; }
.tone-name { grid-area: name; font-weight: 700; font-size: 15px; }
.tone-name .hint { font-weight: 400; font-size: 13px; }
.tone-row output { grid-area: out; text-align: right; font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 14px; }
.tone-range { grid-area: range; width: 100%; accent-color: var(--ink); }
.ctl-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }

/* ---- Gear pages (gear.html, js/gear/) ------------------------------------
   Overlay colors: the first four slots of the validated categorical palette
   (light and dark steps each validated against this site's surface; slots 3
   and 4 sit under 3:1 on white, so every overlay also has a legend and the
   overview table). Heatmap: the sequential blue ramp, lightest = quietest;
   in dark mode the ramp runs the other way so quiet fades into the surface. */
:root {
  --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100;
  --h1: #e8f1fd; --h2: #cde2fb; --h3: #9ec5f4; --h4: #6da7ec; --h5: #3987e5; --h6: #256abf; --h7: #104281;
}
@media (prefers-color-scheme: dark) {
  :root {
    --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500;
    --h1: #1f2733; --h2: #0d366b; --h3: #184f95; --h4: #256abf; --h5: #3987e5; --h6: #6da7ec; --h7: #b7d3f6;
  }
}
.nav-docs { display: inline-flex; gap: 16px; align-items: center; }
.gear-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 18px 0 8px; position: sticky; top: 0; z-index: 3; background: var(--paper); padding: 8px 0; border-bottom: 1px solid var(--line); }
.gear-tab { padding: 8px 14px; border-radius: 999px; text-decoration: none; color: var(--ink-muted); font-weight: 700; border: 1px solid var(--line); background: var(--surface); }
.gear-tab:hover { color: var(--ink); }
.gear-tab[aria-current="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.gear-count { font-family: var(--font-num); font-weight: 400; opacity: .7; margin-left: 2px; }
.gear-lede { color: var(--ink-muted); margin: 14px 0 0; }
.gear-h { margin: 34px 0 10px; font-size: 22px; }
.gear-group { margin: 26px 0 10px; font-size: 16px; color: var(--ink-muted); }
.gear-sub { margin: 18px 0 0; }

/* Compare */
.gear-compare { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 16px var(--inset) 6px; }
/* The picks and the chart choice are two separate sets of options: a rule
   and a labelled gap keep the second from reading as more picks */
.gc-picks { padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.gc-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.gc-more { display: block; margin-top: 6px; font-size: 14px; font-weight: 600; }
.gc-label { margin: 16px 0 8px; font-size: 13px; font-weight: 600; color: var(--ink-muted); }
.gc-item { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--paper); color: var(--ink-muted); border-radius: 999px; padding: 4px 11px; min-height: 32px; font-size: 13px; cursor: pointer; }
.gc-item:hover { color: var(--ink); border-color: var(--ink-muted); }
.gc-item.on { color: var(--ink); font-weight: 700; border-color: var(--ink); background: var(--surface); }
.gc-item i { width: 14px; height: 4px; border-radius: 2px; display: inline-block; }
.gc-item:focus-visible, .gear-tab:focus-visible, .gt-sort:focus-visible { outline: 3px solid var(--side-a); outline-offset: 2px; }
.gc-charts { margin-bottom: 14px; flex-wrap: wrap; }
.gc-toggles { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.gc-switch { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 14px; color: var(--ink); background: var(--surface); border: 1px solid color-mix(in oklab, var(--ink) 25%, var(--line)); border-radius: 10px; padding: 6px 12px 6px 8px; min-height: 36px; cursor: pointer; }
.gc-switch:hover { border-color: var(--ink-muted); }
.gc-switch:focus-visible { outline: 3px solid var(--side-a); outline-offset: 2px; }
.gc-switch .sw { position: relative; flex: none; width: 30px; height: 18px; border-radius: 999px; background: color-mix(in oklab, var(--ink) 22%, transparent); transition: background .15s; }
.gc-switch .sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--surface); transition: transform .15s; }
.gc-switch.on .sw { background: var(--ink); }
.gc-switch.on .sw::after { transform: translateX(12px); }
.gc-switch.on { font-weight: 700; }
.gc-switch i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.gear .seg-btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.gear .seg-btn { font-size: 14px; min-height: 34px; padding: 5px 13px; }
/* The chart stops at a width its labels read well at (they scale with it);
   its note fills the room beside it, or wraps under it when there's none */
.gc-view { display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: 28px; }
.gc-chart { flex: 1 1 520px; max-width: 760px; min-width: 0; }
.gc-view > .hint { flex: 0 1 330px; margin-top: 4px; }
.gc-picks + .gc-view { margin-top: 14px; }
/* When a row of choices wraps onto more lines, the outline's corners match
   the buttons' rounded ends (half the one-line height) instead of cutting
   through their text */
.gear .seg { border-radius: 21px; }

/* Overview table */
.gt-wrap { max-height: 70vh; }
.gear-table { font-size: 14px; }
.gear-table thead th { position: sticky; top: 0; background: var(--surface); z-index: 1; }
.gear-table tbody th { position: sticky; left: 0; background: var(--surface); min-width: 150px; }
.gear-table th, .gear-table td { white-space: nowrap; }
/* Two-word headings wrap, so the table fits the page column on a laptop */
.gear-table thead th { white-space: normal; vertical-align: bottom; text-wrap: balance; }
.gear-table th { text-align: left; }
.gt-sort { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--ink-muted); cursor: pointer; text-align: left; }
.gt-sort:hover, th[aria-sort] .gt-sort { color: var(--ink); }
.gt-open { color: var(--ink); font-weight: 700; text-decoration: none; padding: 0; font-size: 14px; text-align: left; }
.gt-open:hover { text-decoration: underline; }
.gt-sub { display: block; font-size: 12px; color: var(--ink-muted); font-weight: 400; }
.gt-bar { display: block; position: relative; height: 4px; margin-top: 4px; min-width: 64px; background: color-mix(in oklab, var(--ink) 7%, transparent); border-radius: 2px; }
.gt-bar i { position: absolute; top: 0; bottom: 0; left: 0; background: var(--ink-muted); border-radius: 2px; }
.gt-bar.signed::after { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--ink-muted); }

/* Cards */
.gear-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.gear-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 14px 16px 12px; display: flex; flex-direction: column; }
.gear-card h3 { font-size: 18px; margin: 2px 0 6px; }
.gear-card h3 .gt-open { font-size: 18px; font-family: var(--font-display); }
.gc-kicker { margin: 0; font-size: 12px; color: var(--ink-muted); font-weight: 700; }
.gc-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 6px; }
.gc-chips .src-chip { margin-left: 0; }
.gc-blurb { font-size: 14px; color: var(--ink-muted); margin: 4px 0; }
.gc-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 6px 0 8px; }
.gc-facts div { min-width: 0; }
.gc-facts dt { font-size: 12px; color: var(--ink-muted); }
.gc-facts dd { margin: 0; font-family: var(--font-num); font-size: 14px; font-weight: 700; }
.gc-actions { margin: auto 0 0; }
.chart.small { margin: 2px 0 4px; }
.chart.small .ax { font-size: 15px; }

/* Profile dialog */
.gear-profile { border: 1px solid var(--line); border-radius: 24px; padding: 0; width: min(920px, calc(100% - 24px)); max-height: calc(100% - 24px); background: var(--surface); color: var(--ink); }
.gear-profile::backdrop { background: rgb(0 0 0 / .45); }
.gp-inner { max-height: calc(100vh - 26px); overflow-y: auto; padding: 0 24px 24px; }
.gp-head { position: sticky; top: 0; background: var(--surface); display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; padding: 18px 0 10px; border-bottom: 1px solid var(--line); z-index: 2; }
.gp-head h2 { margin: 0; font-size: 24px; }
.gp-kicker { margin: 0 0 2px; font-size: 13px; color: var(--ink-muted); font-weight: 700; }
.gp-blurb { margin: 14px 0 6px; }
.gp-chips { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 6px 0; }
.gp-chips .src-chip { margin-left: 0; }
.gp-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px 18px; margin: 12px 0; }
.gp-facts dt { font-size: 13px; color: var(--ink-muted); }
.gp-facts dd { margin: 0; font-family: var(--font-num); font-weight: 700; }
.gp-section { margin-top: 26px; }
.gp-section > h3 { font-size: 18px; margin-bottom: 4px; }
.gp-section > p { margin: 0 0 8px; color: var(--ink-muted); font-size: 14px; }
.gp-section h4 { font-size: 14px; margin: 8px 0 6px; }
.gp-two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.gear-try { display: inline-flex; align-items: center; text-decoration: none; }
.gp-matrix td.good { color: var(--good); font-weight: 700; }
.gp-matrix td.warn { color: var(--caution); font-weight: 700; }

/* Bars and heatmaps */
.bar-list { display: grid; gap: 6px; }
/* Gear Compare: Olive's preference score, one block per speaker */
/* Scores on one shared scale (charts.js rangeChart): one row per speaker,
   the name and score in a left column (--lw) and the range to its right;
   rows --lane tall, the track --mid down; tie brackets join the scores
   they tie, just right of them. On phones the name sits above its range
   and the brackets join the name lines from a gutter at the left. */
.rchart { --lw: 15em; --lane: 48px; --mid: 24px; --axis: 28px; }
.rchart .rc-plot { position: relative; margin-right: 12px; }
.rc-field { position: absolute; top: 0; bottom: var(--axis); left: var(--lw); right: 0; }
.rc-grid { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line); }
.rc-lane { position: relative; display: grid; grid-template-columns: var(--lw) 1fr; align-items: center; height: var(--lane); }
.rc-name { margin: 0; padding-right: 30px; display: flex; align-items: center; gap: 8px; font-size: 15px; white-space: nowrap; min-width: 0; }
.rc-name i { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.rc-name span:not(.visually-hidden) { overflow: hidden; text-overflow: ellipsis; }
.rc-name b { margin-left: auto; font-family: var(--font-num); font-size: 16px; font-weight: 700; }
.rc-track { position: relative; height: 100%; }
.rc-band { position: absolute; top: 50%; height: 16px; border-radius: 8px; opacity: .42; transform: translateY(-50%); }
.rc-dot, .rc-ring { position: absolute; top: 50%; border-radius: 50%; transform: translate(-50%, -50%); }
.rc-dot { width: 15px; height: 15px; border: 2.5px solid var(--panel); }
.rc-ring { width: 12px; height: 12px; border: 2.5px solid; background: var(--panel); }
.rc-tie { position: absolute; left: calc(var(--lw) - 22px); top: calc(var(--i) * var(--lane) + var(--mid)); height: calc(var(--n) * var(--lane)); width: 8px; border: 2px solid var(--ink-muted); border-left: 0; border-radius: 0 5px 5px 0; }
.rc-tie.alt { left: calc(var(--lw) - 12px); }
.rc-axis { position: relative; height: var(--axis); margin-left: var(--lw); border-top: 1px solid var(--line); }
.rc-axis span { position: absolute; top: 5px; transform: translateX(-50%); font-size: 14px; font-family: var(--font-num); color: var(--ink-muted); }
.rchart figcaption { margin-top: 4px; font-size: 14px; }
.rchart figcaption .ring { width: 9px; height: 9px; border: 2.5px solid var(--ink-muted); border-radius: 50%; display: inline-block; }
.rchart figcaption .tie { width: 7px; height: 14px; border: 2px solid var(--ink-muted); border-left: 0; border-radius: 0 4px 4px 0; display: inline-block; }
.rchart figcaption .band { width: 24px; height: 10px; border-radius: 5px; background: var(--ink-muted); opacity: .35; display: inline-block; }
@media (max-width: 700px) {
  .rchart { --lw: 0px; --lane: 58px; --mid: 13px; }
  .rc-lane { grid-template-columns: 1fr; grid-template-rows: 26px 32px; }
  .rc-name { padding-right: 0; }
  .rc-name b { margin-left: 0; }
  .rchart .rc-plot { margin-right: 0; }
  .rc-lane, .rc-axis { margin-left: 22px; }
  .rc-field { left: 22px; }
  .rc-tie { left: 9px; border-left: 2px solid var(--ink-muted); border-right: 0; border-radius: 5px 0 0 5px; }
  .rc-tie.alt { left: 0; }
  .rchart figcaption .tie { border-left: 2px solid var(--ink-muted); border-right: 0; border-radius: 4px 0 0 4px; }
}
.pref-said { margin: 14px 0 0; font-size: 15px; line-height: 1.55; color: var(--ink); }
.pref-more { margin: 14px 0 4px; }
.pref-more summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--ink-muted); }
.pref-more .table-wrap { margin-top: 10px; }
.pref-more .hint { margin: 10px 0 0; }
.pref-table td { font-family: var(--font-num); text-align: right; }
.pref-table thead th:not(:first-child) { text-align: right; }
.pref-table th:last-child, .pref-table td:last-child { padding-right: 16px; }
.pref-table thead th { white-space: normal; vertical-align: bottom; }
.pref-table .th-dir { display: block; font-size: 12px; font-weight: 400; color: var(--ink-muted); white-space: nowrap; }
.pref-more .hint b { color: var(--ink); font-weight: 600; }
.pref-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.bl-row { display: grid; grid-template-columns: minmax(84px, max-content) 1fr 76px; gap: 10px; align-items: center; font-size: 14px; }
.bl-label { color: var(--ink-muted); }
.bl-track { height: 10px; background: color-mix(in oklab, var(--ink) 7%, transparent); border-radius: 3px; position: relative; overflow: hidden; }
.bl-track i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--s1); border-radius: 3px; }
.bl-val { font-family: var(--font-num); text-align: right; font-weight: 700; }
.chart.heat svg { border-radius: 6px; }
.heat-key { display: inline-flex; align-items: center; gap: 2px; font-family: var(--font-num); }
.heat-key i { width: 14px; height: 10px; display: inline-block; }

@media (max-width: 700px) {
  .gp-inner { padding: 0 16px 20px; }
  .gp-two { grid-template-columns: 1fr; }
  .gear-profile { width: 100%; max-height: 100%; height: 100%; border-radius: 0; margin: 0; max-width: 100%; }
  .gp-inner { max-height: 100vh; }
  .gear-compare { padding: 12px 12px 4px; }
  .gc-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nav-docs { order: 1; gap: 12px; }
}

/* Amp and speaker matching: one linked cell per pair */
.gear-table.mx td { padding: 3px; vertical-align: top; }
.mx-cell { display: flex; flex-direction: column; gap: 2px; min-width: 108px; padding: 6px 9px; border-radius: 8px; border: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.mx-cell:hover, .mx-cell:focus-visible { border-color: var(--ink-muted); background: color-mix(in srgb, var(--ink) 4%, transparent); }
.mx-cell.short { border-color: color-mix(in srgb, var(--caution) 55%, transparent); background: color-mix(in srgb, var(--caution) 9%, transparent); }
.mx-pow { font-family: var(--font-num); font-weight: 700; font-size: 13px; }
.mx-tone { font-size: 12px; color: var(--ink-muted); }
.mx-warn { display: inline-grid; place-items: center; width: 15px; height: 15px; margin-right: 5px; border-radius: 50%; background: var(--caution); color: var(--paper); font-size: 11px; font-weight: 700; vertical-align: 1px; }

/* Shaded tables (absorption by surface and band): the sequential ramp, with
   text that stays readable on each step in both themes */
.shade-table td { text-align: center; min-width: 52px; }
.shade-table .sh0 { background: var(--h1); } .shade-table .sh1 { background: var(--h2); } .shade-table .sh2 { background: var(--h3); }
.shade-table .sh3 { background: var(--h4); } .shade-table .sh4 { background: var(--h5); } .shade-table .sh5 { background: var(--h6); } .shade-table .sh6 { background: var(--h7); }
.shade-table .sh0, .shade-table .sh1, .shade-table .sh2, .shade-table .sh3, .shade-table .sh4 { color: #16171a; }
.shade-table .sh5, .shade-table .sh6 { color: #fff; }
@media (prefers-color-scheme: dark) {
  .shade-table .sh0 { color: var(--ink); } .shade-table .sh1, .shade-table .sh2, .shade-table .sh3 { color: #fff; }
  .shade-table .sh4, .shade-table .sh5, .shade-table .sh6 { color: #16171a; }
}
/* Floor plans */
.plan { display: block; width: 100%; height: auto; }
.plan .wall-line { fill: none; stroke: var(--ink-muted); stroke-width: 1.5; }
.plan .absorb { fill: var(--h5); }
.gear-card .plan { max-height: 180px; }
.gp-body .plan { max-width: 400px; margin: 0 auto; }
.plan .floor { fill: color-mix(in srgb, var(--ink) 4%, transparent); }
.plan .spk { fill: var(--ink); }
.plan .seat { fill: var(--side-a); }
.plan .tri { fill: none; stroke: var(--ink-muted); stroke-dasharray: 3 3; stroke-width: 1; }
.plan .rp { fill: var(--caution); }
.plan .lbl { fill: var(--ink-muted); font-size: 11px; font-family: var(--font-num); }
.plan-key { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--ink-muted); margin: 4px 0 0; }
.plan-key i { display: inline-block; width: 18px; height: 6px; border-radius: 2px; vertical-align: 1px; margin-right: 5px; }
.gear-subnav { margin: 16px 0 4px; flex-wrap: wrap; }
/* Tables in a profile (the dialog sits outside .doc) */
.gear-profile table { border-collapse: collapse; }
.gear-profile th, .gear-profile td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.gear-profile th { font-size: 13px; font-weight: 700; color: var(--ink-muted); }
.gear-profile tbody th { color: var(--ink); }
.gear-profile td.num { font-family: var(--font-num); font-size: 13px; font-variant-numeric: tabular-nums; }
.gear-profile .shade-table td { text-align: center; }
@media (max-width: 700px) {
  /* One scrolling row of categories, so the sticky bar stays short */
  .gear-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: -16px; margin-right: -16px; padding: 8px 16px; }
  .gear-tabs::-webkit-scrollbar { display: none; }
  .gear-tab { flex: 0 0 auto; padding: 7px 12px; font-size: 14px; }
}
/* Long source chips wrap inside cards and profiles rather than overflow */
.gear-card .src-chip, .gear-profile .src-chip { white-space: normal; max-width: 100%; }
@media (max-width: 700px) {
  /* Long pick lists (page.js) show three rows and the top of a fourth,
     fading out above "Show all", so the chart stays near */
  .gc-pick.clipped { max-height: 128px; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); }
}