/* Hearing Pipeline Rebuild. Quiet research style on deep navy: thin lines, small radii,
   one red accent. Plot colors: blue = before / input, red = after / output, amber = reference.

   Text rule: all text is easy to read on a phone. Nothing under 15px; body 17px. */
:root {
  color-scheme: dark;
  --bg: #0a0e1a;
  --panel: #11172a;
  --panel-2: #0d1222;
  --edge: #252e4a;
  --ink: #eef0f6;
  --ink-2: #b6bdd2;
  --muted: #8f99b5;
  --red: #ff4057;
  --cyan: #2a93c9;
  --cyan-ink: #6cc3ea;
  --amber: #ffb627;
  --violet: #a58cff;
  --r: 10px;
  --body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100dvh; background: var(--bg); color: var(--ink);
  font: 400 17px/1.5 var(--body);
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background: radial-gradient(70% 40% at 85% 0%, rgba(255, 64, 87, 0.09), transparent 70%), linear-gradient(180deg, #0a0e1a, #0c1120);
}
a { color: var(--ink); }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible + label, input[type="range"]:focus-visible, input[type="checkbox"]:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
p { margin: 0; }
h1, h2, h3 { margin: 0; }

.screen { display: none; }
body[data-screen="home"] #home { display: flex; flex-direction: column; min-height: 100dvh; }
body[data-screen="pipeline"] #pipeline { display: block; }
.col {
  width: 100%; max-width: 600px; margin: 0 auto; padding-block: 20px;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  display: grid; gap: 16px; align-content: start;
}

/* ---------- parts ---------- */
.panel { background: var(--panel); border: 1px solid var(--edge); border-radius: var(--r); padding: 16px; display: grid; gap: 12px; min-width: 0; }
.panel h3 { font: 600 19px/1.2 var(--body); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 16px/1 var(--body); color: var(--ink); text-decoration: none; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--edge); border-radius: 8px; padding: 10px 14px; min-height: 44px;
  transition: background 0.15s, border-color 0.15s;
}
.btn:hover { border-color: var(--red); }
.btn-sm { font-size: 15px; font-weight: 500; padding: 7px 12px; min-height: 36px; color: var(--ink-2); }

/* ---------- home ---------- */
.kicker { font: 500 15px/1 var(--mono); color: var(--muted); padding-top: 12px; }
.title { font: 700 42px/1.05 var(--body); letter-spacing: -0.01em; text-wrap: balance; }
.lede { font-size: 18px; color: var(--ink-2); max-width: 42ch; }
.hero { height: 150px; }
.hero canvas { width: 100%; height: 100%; display: block; }
.menu { display: grid; gap: 10px; }
.item {
  display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 14px;
  padding: 14px 16px; background: var(--panel); border: 1px solid var(--edge); border-left: 3px solid var(--red); border-radius: var(--r);
  text-decoration: none; transition: background 0.15s;
}
.item:hover { background: #172038; }
.item b { font: 600 22px/1 var(--body); }
.item .go { font: 600 26px/1 var(--body); color: var(--red); }
.ico { width: 44px; height: 32px; display: block; color: var(--cyan-ink); }
.ico svg { width: 100%; height: 100%; }
.foot {
  margin-top: auto; width: 100%; max-width: 600px; margin-inline: auto; padding-block: 8px 28px;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  display: grid; gap: 10px;
}
.foot p { font-size: 15px; color: var(--muted); }
.links { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- pipeline page ---------- */
.pg-head { display: flex; align-items: center; gap: 14px; padding-top: 4px; }
.home-btn { width: 44px; padding: 0; font: 600 24px/1 var(--body); }
.pg-head h2 { font: 700 34px/1 var(--body); }
#pl-top { display: grid; gap: 14px; }
.intro { color: var(--ink-2); font-size: 18px; }
.note, .small-note { font-size: 15px; color: var(--muted); }
.note a, .small-note a, .src a { color: var(--muted); text-underline-offset: 3px; }
.note a:hover, .small-note a:hover, .src a:hover { color: var(--ink); }
.src { font-size: 15px; }
#spec-legend { width: 100%; height: 42px; display: block; }


/* segmented control and toggle */
.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.seg label { font: 500 16px/1 var(--body); padding: 10px 14px; cursor: pointer; background: var(--panel-2); border: 1px solid var(--edge); border-radius: 8px; user-select: none; }
.seg input:checked + label { background: var(--amber); border-color: var(--amber); color: #1a1204; font-weight: 600; }
.tog { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; cursor: pointer; padding: 8px 0; }
.tog input { width: 20px; height: 20px; accent-color: var(--red); }

/* sticky playhead bar */
.transport {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 10px;
  padding: 8px max(16px, env(safe-area-inset-left, 0px)); background: rgba(10, 14, 26, 0.94);
  border-block: 1px solid var(--edge); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.transport > * { flex: none; }
.transport input[type="range"] { flex: 1; min-width: 0; accent-color: var(--red); }
#tp-play { min-width: 76px; }
#tp-time { font: 500 15px/1 var(--mono); color: var(--ink-2); min-width: 6ch; text-align: right; }
#tp-speed { min-width: 54px; font-family: var(--mono); font-weight: 500; }
@media (min-width: 640px) { .transport { padding-inline: calc((100% - 568px) / 2); } }

/* table of contents: fixed on the left; it does not scroll. Phones: a rail of numbers. Wide screens: numbers + titles. */
.toc { position: fixed; left: 0; top: 50%; transform: translateY(-50%); z-index: 6; width: 40px; }
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc button {
  display: flex; align-items: center; gap: 10px; width: 100%; height: min(44px, calc((100dvh - 24px) / 14));
  padding: 0 2px; background: none; border: 0; color: var(--muted); font: 500 15px/1.2 var(--body); text-align: left; cursor: pointer;
}
.toc .n { flex: none; width: 36px; text-align: center; font: 500 15px/1 var(--mono); padding: 5px 0; border-radius: 5px; }
.toc .t { display: none; white-space: nowrap; }
.toc button:hover { color: var(--ink); }
.toc button[aria-current="true"] { color: var(--ink); font-weight: 600; }
.toc button[aria-current="true"] .n { background: var(--red); color: #16060a; }
#pipeline { padding-left: 40px; }
@media (min-width: 1080px) {
  #pipeline { padding-left: 0; }
  .toc { left: 12px; width: 210px; }
  .toc button { padding: 0 8px; height: min(40px, calc((100dvh - 24px) / 14)); border-radius: 8px; }
  .toc button[aria-current="true"] { background: var(--panel); }
  .toc .t { display: inline; }
}
#pl-top, .step, .node { scroll-margin-top: 76px; }

/* the chain: signal, step, signal, step, ... */
.chain { display: grid; gap: 0; }
.node { padding: 14px 0 6px; display: grid; gap: 6px; position: relative; }
.node-head { display: flex; align-items: center; gap: 10px; }
.node-head h3 { font: 600 19px/1.2 var(--body); flex: 1; min-width: 0; }
.node-k { font: 500 15px/1 var(--mono); color: var(--cyan-ink); white-space: nowrap; }
.hear { min-height: 38px; padding: 7px 14px; font-size: 15px; }
.hear[aria-pressed="true"] { background: var(--red); border-color: var(--red); color: #16060a; }
canvas.spec { width: 100%; height: 168px; display: block; }
canvas.viz { width: 100%; display: block; background: var(--panel-2); border-radius: 8px; }

.step {
  background: var(--panel); border: 1px solid var(--edge); border-left: 3px solid var(--red); border-radius: var(--r);
  padding: 14px; display: grid; gap: 12px; margin: 8px 0; min-width: 0; position: relative;
}
.step::before { /* the signal line from the plot above */
  content: "↓"; position: absolute; left: 50%; top: -18px; transform: translateX(-50%); color: var(--muted); font-size: 15px; line-height: 1;
}
.step.is-ph { border-color: var(--red); border-style: dashed; border-left-style: solid; }
.step.off { opacity: 0.75; }
.step-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.num { font: 600 15px/1 var(--mono); color: #16060a; background: var(--red); border-radius: 5px; padding: 5px 7px; align-self: center; }
.step-head h3 { font: 600 21px/1.2 var(--body); }
.job { color: var(--ink); }
.eq {
  font-size: 17px; color: var(--ink); background: var(--panel-2); border: 1px solid var(--edge); border-radius: 8px;
  padding: 12px 10px; overflow-x: auto; overflow-y: hidden;
}
.eq .katex-display { margin: 0; }
.eq .katex { font-size: 1.15em; }
.ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.ph-banner { border: 1.5px solid var(--red); border-radius: 8px; padding: 10px 12px; color: var(--ink); background: rgba(255, 64, 87, 0.1); }
.ph-banner b { color: var(--red); }
.ph-banner[hidden] { display: none; }

body.busy .step, body.busy .node canvas { transition: opacity 0.1s; }
body.busy .node canvas { opacity: 0.6; }

@media (min-width: 700px) {
  .title { font-size: 56px; }
  .hero { height: 180px; }
}
@media (prefers-reduced-motion: reduce) {
  .item, .btn { transition: none; }
}