/* Live Sound EQ SOP — interface styles.
   Colours are oklch tokens; every text pairing was measured at 4.5:1 or more
   on bg, panel and panel2 in both themes. Reading type is Outfit at 15px or
   more; Cormorant is kept for large headings only. Ornament lives in the masthead and
   frames; the cards, where values are read at the desk, stay quiet.

   Organised in cascade layers, lowest priority first. A later layer wins over
   an earlier one whatever the selector, so page layout can never override a
   component by accident. Rules are nested under the component they belong
   to, always with an explicit "&" so Safari 16.5 and Firefox 117 read them.
   Channel cards are size containers: their strip and bands follow the card's
   own width, not the window's. */

@layer reset, tokens, base, layout, components, utilities;

/* ===== Reset ===== */
@layer reset {
  *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  button { font: inherit; color: inherit; }
}

/* ===== Tokens ===== */
@layer tokens {
  :root {
    --display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
    --body: 'Outfit', system-ui, sans-serif;
    --r-card: 3px 18px 18px 3px;
    --ease: cubic-bezier(.2, .7, .2, 1);
  }

  /* Dark: a warm stage at night. Default when nothing else is known. */
  :root, [data-mode="dark"] {
    color-scheme: dark;
    --bg: oklch(0.17 0.012 60);
    --panel: oklch(0.215 0.014 60);
    --panel2: oklch(0.25 0.016 60);
    --line: oklch(0.36 0.02 65);
    --ui-edge: oklch(0.55 0.02 65);
    --text: oklch(0.93 0.015 80);
    --t2: oklch(0.87 0.018 75);
    --t3: oklch(0.80 0.02 70);
    --att: oklch(0.76 0.12 150);
    --prop: oklch(0.80 0.12 78);
    --exp: oklch(0.72 0.13 40);
    --rej: oklch(0.74 0.03 250);
    --b-hpf: oklch(0.74 0.10 300);
    --b-hf: oklch(0.76 0.10 235);
    --b-hm: oklch(0.82 0.11 90);
    --b-lm: oklch(0.76 0.12 52);
    --b-lf: oklch(0.72 0.14 25);
    --focus: oklch(0.82 0.11 90);
    --shadow: 0 1px 0 oklch(1 0 0 / .04) inset, 0 10px 28px -12px oklch(0 0 0 / .7);
    --shadow-lift: 0 1px 0 oklch(1 0 0 / .05) inset, 0 16px 34px -12px oklch(0 0 0 / .8);
    --grain-op: .07;
  }

  /* Light: warm sandstone, never bright white. */
  [data-mode="light"] {
    color-scheme: light;
    --bg: oklch(0.91 0.025 80);
    --panel: oklch(0.94 0.02 80);
    --panel2: oklch(0.925 0.022 80);
    --line: oklch(0.80 0.03 75);
    --ui-edge: oklch(0.58 0.03 70);
    --text: oklch(0.25 0.02 60);
    --t2: oklch(0.33 0.025 60);
    --t3: oklch(0.39 0.025 60);
    --att: oklch(0.46 0.11 150);
    --prop: oklch(0.49 0.10 70);
    --exp: oklch(0.49 0.14 35);
    --rej: oklch(0.47 0.03 250);
    --b-hpf: oklch(0.47 0.13 300);
    --b-hf: oklch(0.47 0.11 240);
    --b-hm: oklch(0.49 0.09 90);
    --b-lm: oklch(0.49 0.12 50);
    --b-lf: oklch(0.48 0.16 25);
    --focus: oklch(0.47 0.11 240);
    --shadow: 0 1px 0 oklch(1 0 0 / .35) inset, 0 8px 22px -12px oklch(0.35 0.04 60 / .35);
    --shadow-lift: 0 1px 0 oklch(1 0 0 / .4) inset, 0 14px 28px -12px oklch(0.35 0.04 60 / .45);
    --grain-op: .09;
  }

  @media print {
    :root, [data-mode] { --bg: #fff; --panel: #fff; --panel2: #fff; --text: #000; --t2: #222; --t3: #444; --line: #bbb; --shadow: none; --shadow-lift: none; }
  }
}

/* ===== Base: elements before any class ===== */
@layer base {
  body {
    background: var(--bg); color: var(--text);
    font-family: var(--body); font-size: 17px; line-height: 1.65; font-weight: 400;
    -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums;
    padding-bottom: 72px;
    transition: background-color .2s, color .2s;
  }
  a {
    color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px;
    &:hover { text-decoration-thickness: 2px; }
  }
  :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
  [role="tabpanel"]:focus { outline: none; }

  /* Headings break into even lines; paragraphs avoid a lone last word.
     Browsers without text-wrap wrap as before. */
  h1, h2, h3 { text-wrap: balance; }
  p, dd, li { text-wrap: pretty; }

  /* Cormorant defaults to old-style figures; lining figures keep "MIX 1" from reading as "MIX ı". */
  h1 {
    font-family: var(--display); font-weight: 600; letter-spacing: -.01em;
    font-size: clamp(44px, 8vw, 76px); line-height: .95; margin-bottom: 16px;
    @media (max-width: 640px) { font-size: clamp(36px, 10.5vw, 44px); margin-bottom: 10px; }
    font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1;
  }
}

/* ===== Layout: the page's frame and grids ===== */
@layer layout {
  .wrap {
    max-width: 1040px; margin: 0 auto; padding: 0 24px;
    @media (max-width: 640px) { padding: 0 16px; }
  }
  .toolbar {
    display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 26px;
    @media (max-width: 640px) { gap: 10px; margin-bottom: 18px; }
  }
  /* Search first, then the ledger chips that filter, then the list: on a
     phone all three start on the first screen. */
  .ledger { margin-top: 18px; }
  .tiles {
    display: flex; flex-wrap: wrap; gap: 8px;
    @media (max-width: 640px) { gap: 6px; }
  }
  .findbar {
    display: flex; flex-wrap: wrap; gap: 12px; align-items: end; justify-content: space-between;
    @media (max-width: 640px) { gap: 10px; }
  }

  /* Each category is its own section: a wide gap and an ornamental rule end the
     last one, and the banner heading stays pinned while you scroll through it,
     handing over to the next at the boundary. */
  .group {
    position: relative;
    & + & {
      margin-top: 64px;
      @media (max-width: 640px) { margin-top: 44px; }
    }
    & + &::before {
      content: ""; display: block; height: 14px; margin-bottom: 28px;
      background:
        linear-gradient(var(--ui-edge), var(--ui-edge)) left center / calc(50% - 16px) 1px no-repeat,
        linear-gradient(var(--ui-edge), var(--ui-edge)) right center / calc(50% - 16px) 1px no-repeat,
        linear-gradient(45deg, transparent 45%, var(--prop) 45% 55%, transparent 55%) center / 14px 14px no-repeat,
        linear-gradient(-45deg, transparent 45%, var(--prop) 45% 55%, transparent 55%) center / 14px 14px no-repeat;
    }
  }

  .bus-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
  .opt-grid { display: grid; gap: 12px; }
}

/* ===== Components ===== */
@layer components {
  .skip {
    position: absolute; left: 16px; top: -60px; z-index: 10;
    background: var(--text); color: var(--bg); padding: 10px 16px; border-radius: 8px;
    font-weight: 600; text-decoration: none;
    &:focus { top: 12px; }
  }

  /* ----- Masthead: the one ornamented frame ----- */
  .masthead {
    position: relative; isolation: isolate;
    padding: 52px 0 0; margin-bottom: 30px;
    @media (max-width: 640px) { padding-top: 24px; margin-bottom: 20px; }
    background:
      radial-gradient(120% 140% at 0% 0%, color-mix(in oklch, var(--prop) 14%, transparent), transparent 55%),
      radial-gradient(90% 120% at 100% 10%, color-mix(in oklch, var(--b-hf) 12%, transparent), transparent 60%),
      var(--panel);
    border-bottom: 1px solid var(--line);

    /* Film grain on the frame only, never behind reading text in cards. */
    &::before {
      content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
      opacity: var(--grain-op);
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .4 0 0 0 0 .3 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    }
  }
  .eyebrow {
    font-size: 15px; font-weight: 500; letter-spacing: .02em;
    color: var(--t3); margin-bottom: 12px;
    @media (max-width: 640px) { margin-bottom: 6px; }
  }
  .h1-lead { font-style: italic; font-weight: 500; color: var(--prop); }
  .sub {
    color: var(--t2); max-width: 60ch; font-size: 19px; line-height: 1.55;
    @media (max-width: 640px) { font-size: 17px; line-height: 1.5; }
  }
  /* The way into the strip simulator: a link dressed as a button, framed in
     the masthead's gold, with a small EQ curve in the strip's band colours. */
  .cta {
    display: inline-flex; align-items: center; gap: 14px; margin-top: 20px; max-width: 100%;
    min-height: 56px; padding: 10px 18px 10px 12px; border-radius: 16px;
    background: var(--panel2); border: 1.5px solid var(--prop); box-shadow: var(--shadow);
    color: var(--text); text-decoration: none;
    transition: transform .18s var(--ease), box-shadow .18s, background-color .18s;
    @media (max-width: 640px) { margin-top: 14px; min-height: 48px; padding: 6px 14px 6px 8px; gap: 12px; }
    &:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); background: var(--panel); }
    &:hover .cta-arrow { translate: 3px 0; }
    @media (prefers-reduced-motion: reduce) {
      &:hover { transform: none; }
      &:hover .cta-arrow { translate: none; }
    }
  }
  .cta-icon {
    flex: none; width: 40px; height: 40px; padding: 4px; border-radius: 10px;
    background: var(--bg); border: 1px solid var(--line);
    & path, & circle { fill: none; stroke-linecap: round; stroke-linejoin: round; }
    & .c-grid { stroke: var(--ui-edge); stroke-width: 1; stroke-dasharray: 2 2.5; }
    & .c-curve { stroke: var(--prop); stroke-width: 2.2; }
    & .c-lm { stroke: var(--b-lm); stroke-width: 1.8; fill: var(--bg); }
    & .c-hm { stroke: var(--b-hm); stroke-width: 1.8; fill: var(--bg); }
  }
  .cta-text { display: grid; gap: 1px; min-width: 0; line-height: 1.3; }
  .cta-title { font-size: 18px; font-weight: 600; letter-spacing: .01em; }
  .cta-note { font-size: 15px; color: var(--t2); }
  .cta-arrow {
    flex: none; width: 18px; height: 18px; margin-left: 4px;
    fill: none; stroke: var(--prop); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
    transition: translate .18s var(--ease);
  }
  .order {
    list-style: none; display: flex; flex-wrap: wrap; gap: 6px 4px; margin-top: 20px;
    font-size: 16px; font-weight: 500; color: var(--t2);
    @media (max-width: 640px) { margin-top: 14px; }
    @media (max-width: 479px) { gap: 8px 14px; }

    & li { display: inline-flex; align-items: center; gap: 8px; }
    /* Connectors only where the four steps fit on one line. */
    @media (min-width: 480px) {
      & li + li::before { content: ""; width: 22px; height: 1px; background: var(--ui-edge); margin-right: 4px; }
    }
    & span {
      display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
      border: 1px solid var(--ui-edge); color: var(--text); font-size: 14px; font-weight: 600;
    }
  }
  .byline {
    font-size: 15px; color: var(--t3); margin: 14px 0 22px;
    @media (max-width: 640px) { margin: 10px 0 14px; }
  }
  .frieze {
    display: block; width: 100%; height: 30px;
    @media (max-width: 640px) { height: 22px; }
    & path, & circle { fill: none; stroke-width: 1.4; vector-effect: non-scaling-stroke; }
    & .w1 { stroke: var(--b-lf); opacity: .7; }
    & .w2 { stroke: var(--b-hf); opacity: .7; }
    & .w3 { stroke: var(--b-hm); opacity: .55; }
    & .w4 { stroke: var(--b-hpf); fill: var(--panel); }
  }

  /* ----- Toolbar: view tabs and theme ----- */
  .tabs {
    display: inline-flex; padding: 4px; gap: 4px; border-radius: 999px;
    background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow);
    @media (max-width: 640px) { flex: 1 1 auto; }
  }
  .tab {
    min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background: none; cursor: pointer;
    font-weight: 500; font-size: 15px; color: var(--t2); transition: background-color .15s, color .15s;
    &:hover { color: var(--text); background: var(--panel2); }
    &[aria-selected="true"] { background: var(--text); color: var(--bg); }
    @media (max-width: 640px) { flex: 1; padding: 0 12px; }
  }
  .theme-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; min-width: 44px; padding: 0 16px;
    border: 1px solid var(--ui-edge); border-radius: 999px; background: var(--panel); cursor: pointer;
    font-size: 14px; color: var(--t2);
    &:hover { color: var(--text); }
    & svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
    @media (max-width: 640px) {
      padding: 0 11px;
      & span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    }
  }
  [data-mode="dark"] .i-moon, [data-mode="light"] .i-sun { display: none; }

  /* ----- Ledger chips, which are also the filter -----
     One row of chips: shape, name and count, never colour alone. The chip
     that is filtering fills with its colour, so "pressed" reads by fill as
     well as by hue. */
  .kicker { font-size: 17px; font-weight: 600; color: var(--text); margin-bottom: 10px; }
  .kicker-note { font-weight: 400; color: var(--t2); }
  .tile {
    --c: var(--text);
    display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
    min-height: 44px; padding: 0 16px 0 14px;
    background: var(--panel); border: 1px solid var(--ui-edge); border-radius: 999px;
    @media (max-width: 640px) { gap: 6px; padding: 0 12px 0 11px; }
    color: var(--c); box-shadow: var(--shadow);
    transition: background-color .18s, border-color .18s, color .18s;
    &:hover { background: var(--panel2); border-color: var(--c); }
    & .t-name {
      display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 16px;
      @media (max-width: 640px) { font-size: 15px; gap: 5px; }
      & svg { width: 13px; height: 13px; flex: none; }
    }
    /* Counts in Outfit: Cormorant's old-style 1 reads as a capital I. */
    & b { font-family: var(--body); font-weight: 700; font-size: 17px; line-height: 1; letter-spacing: -.01em; }
    &[aria-pressed="true"] { background: var(--c); border-color: var(--c); color: var(--bg); }
  }
  /* The key: what each state means, one tap away. */
  .key {
    margin-top: 4px;
    & dl { display: grid; gap: 4px; margin: 4px 0 8px; font-size: 17px; max-width: 72ch; }
    & dt {
      display: inline-flex; align-items: center; gap: 6px; margin-right: 6px; font-weight: 600; color: var(--c);
      & svg { width: 13px; height: 13px; flex: none; }
    }
    & dd { display: inline; color: var(--t2); }
  }

  /* ----- Find bar ----- */
  .find {
    display: grid; gap: 6px; flex: 1 1 260px; max-width: 420px;
    @media (max-width: 640px) { flex-basis: 170px; gap: 4px; }
  }
  .find-label { font-size: 16px; font-weight: 500; color: var(--t2); }
  .find-field {
    position: relative; display: block;
    & svg {
      position: absolute; left: 14px; top: 50%; translate: 0 -50%; width: 18px; height: 18px;
      fill: none; stroke: var(--t3); stroke-width: 1.7; stroke-linecap: round; pointer-events: none;
    }
  }
  input[type=search] {
    width: 100%; min-height: 44px; padding: 0 14px 0 42px; font: inherit; font-size: 17px;
    color: var(--text); background: var(--panel); border: 1px solid var(--ui-edge); border-radius: 12px;
    &::placeholder { color: var(--t3); opacity: 1; }
  }
  .ghost {
    min-height: 44px; padding: 0 18px; border: 1px solid var(--ui-edge); border-radius: 12px;
    background: transparent; cursor: pointer; font-size: 16px; font-weight: 500; color: var(--text);
    &:hover { color: var(--text); background: var(--panel); }
  }
  .result { font-size: 16px; color: var(--t2); margin: 4px 0 6px; min-height: 1.6em; }

  /* ----- Category banners ----- */
  .group-h {
    position: sticky; top: 0; z-index: 3;
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 14px;
    padding: 14px 18px 12px;
    font-family: var(--display); font-weight: 600; font-size: 34px; line-height: 1.1;
    font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1;
    background: color-mix(in oklch, var(--panel2) 94%, transparent);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    border: 1px solid var(--line); border-left: 6px solid var(--prop);
    border-radius: 0 0 16px 16px; box-shadow: var(--shadow);
    @media (max-width: 640px) { font-size: 28px; padding: 10px 14px; }

    & small { font-family: var(--body); font-size: 16px; font-weight: 500; color: var(--t2); }
  }

  /* ----- Channel cards -----
     Each card is a size container named "card". Below 704px of card width
     (a phone, or a narrow window) the strip stacks: curve above, then one
     row per band, top to bottom like the console. That is where five
     columns stop fitting their 23px numbers; tied to the window instead,
     the numbers used to overlap between 641px and about 760px. */
  .card {
    --edge: var(--att);
    container: card / inline-size;
    position: relative; margin-bottom: 10px;
    background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--edge);
    border-radius: var(--r-card); box-shadow: var(--shadow);
    transition: transform .18s var(--ease), box-shadow .18s;
    &:hover { transform: translateY(-1px); box-shadow: var(--shadow-lift); }
    &.rejected .band .num { text-decoration: line-through; text-decoration-color: var(--exp); text-decoration-thickness: 2px; }
  }
  /* An open card keeps the lifted shadow, so its details read as one unit
     with the strip above them. The state comes from the button's own
     aria-expanded, with no extra class from the script. */
  .card:has(> .card-head[aria-expanded="true"]) { box-shadow: var(--shadow-lift); }

  .card-head {
    display: flex; width: 100%; min-height: 44px; align-items: center; gap: 14px; justify-content: space-between;
    padding: 14px 18px 4px; background: none; border: 0; text-align: left; cursor: pointer;
    border-radius: 0 18px 0 0;
    @container card (width < 704px) { padding: 12px 14px 2px; gap: 10px; align-items: start; }
  }
  .nm {
    font-weight: 600; font-size: 20px; line-height: 1.25; letter-spacing: .03em;
    @container card (width < 704px) { font-size: 18px; }
    & .var { font-weight: 500; font-size: 17px; letter-spacing: .03em; color: var(--t2); }
  }
  /* Pad is a physical switch to set before the fader comes up, so it gets a
     solid badge that can't be mistaken for the outlined status marks. */
  .pad {
    display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; vertical-align: 2px;
    padding: 2px 11px 2px 9px; border-radius: 6px;
    font-family: var(--body); font-size: 15px; font-weight: 700; letter-spacing: .04em; line-height: 1.4;
    background: var(--text); color: var(--bg);
    @container card (width < 704px) { display: flex; width: fit-content; margin: 6px 0 0; }
    & svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
  }
  .head-r {
    display: flex; align-items: center; gap: 12px; flex-shrink: 0;
    @container card (width < 704px) { gap: 8px; }
  }
  .chev {
    width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%;
    border: 1px solid var(--ui-edge); color: var(--t2); transition: rotate .2s var(--ease);
    .card-head[aria-expanded="true"] & { rotate: 180deg; }
    & svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  }

  /* Status marks are 15px everywhere: Apple's Subheadline step, the same
     size as the ledger chips. Compact marks only lose padding. */
  .mark {
    display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
    font-size: 15px; font-weight: 600;
    padding: 3px 12px; border-radius: 999px; border: 1px solid currentColor; color: var(--edge);
    & svg { width: 14px; height: 14px; }
    &.sm { padding: 2px 10px; }
    @container card (width < 704px) { padding: 2px 10px; gap: 6px; }
  }

  .strip {
    display: grid; grid-template-columns: 220px 1fr; gap: 6px 22px; align-items: center;
    padding: 6px 18px 16px;
    @container card (width < 704px) { grid-template-columns: 1fr; padding: 4px 14px 14px; }
  }
  .curve {
    width: 100%; max-width: 260px; height: auto; display: block; overflow: visible;
    & .grid { stroke: var(--line); stroke-width: 1; }
    & .zero { stroke: var(--ui-edge); stroke-width: 1; stroke-dasharray: 2 3; }
    & .area { fill: color-mix(in oklch, var(--edge) 16%, transparent); }
    & .line { fill: none; stroke: var(--edge); stroke-width: 2; stroke-linejoin: round; }
    &.dashed .line { stroke-dasharray: 5 4; }
    & .line.alt { stroke-width: 1.2; opacity: .55; stroke-dasharray: 2 3; }
    & .dot { stroke-width: 1.6; fill: var(--panel); }
  }

  /* Narrow cards: one row per band, top to bottom like the strip, numbers
     kept large. */
  .bands {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; list-style: none;
    @container card (width < 704px) { grid-template-columns: 1fr; gap: 0; }
  }
  .band {
    display: grid; gap: 2px; justify-items: start; align-content: start; line-height: 1.2;
    @container card (width < 704px) {
      grid-template-columns: 58px minmax(0, 1fr) minmax(0, 1fr); align-items: center; justify-items: start;
      padding: 7px 0; border-top: 1px solid var(--line);
      & > .num:last-child { justify-self: end; }
    }
    & .lbl {
      font-size: 14px; font-weight: 700; letter-spacing: .05em; padding: 0 9px; border-radius: 999px;
      border: 1.5px solid currentColor; margin-bottom: 6px; line-height: 1.5;
      @container card (width < 704px) { margin: 0; }
    }
  }
  .band.hpf .lbl, .dot.hpf { color: var(--b-hpf); stroke: var(--b-hpf); }
  .band.hf .lbl, .dot.hf { color: var(--b-hf); stroke: var(--b-hf); }
  .band.hm .lbl, .dot.hm { color: var(--b-hm); stroke: var(--b-hm); }
  .band.lm .lbl, .dot.lm { color: var(--b-lm); stroke: var(--b-lm); }
  .band.lf .lbl, .dot.lf { color: var(--b-lf); stroke: var(--b-lf); }
  .num {
    font-size: 23px; font-weight: 600; color: var(--text); letter-spacing: -.01em; white-space: nowrap;
    font-variant-numeric: tabular-nums lining-nums;
    @container card (width < 704px) { font-size: 21px; }
    @container card (width < 350px) { font-size: 20px; }
    & .u { font-size: .68em; font-weight: 500; color: var(--t2); letter-spacing: 0; white-space: nowrap; }
    &.quiet { font-weight: 400; color: var(--t2); }
  }
  /* A range ("−2 dB to +2 dB") carries two units. In the five columns it
     may break at "to" rather than run into the next band; a single value
     never breaks, and in the rows it has room to stay on one line. */
  @container card (width >= 704px) {
    .num:has(> .u ~ .u) { white-space: normal; }
  }
  .w { font-size: 16px; font-weight: 500; color: var(--t2); }
  /* HPF IN/OUT reads like the strip's latched push switch. */
  .sw {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    min-width: 72px; padding: 3px 12px; margin-bottom: 3px; border-radius: 7px;
    font-size: 15px; font-weight: 800; letter-spacing: .1em; line-height: 1.4;
    border: 1.5px solid var(--b-hpf);
    & .led { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid currentColor; }
    &.on {
      background: var(--b-hpf); color: var(--bg);
      box-shadow: inset 0 1px 0 oklch(1 0 0 / .3), inset 0 -2px 0 oklch(0 0 0 / .22), 0 2px 6px -2px var(--b-hpf);
      & .led { background: currentColor; }
    }
    &.off {
      background: transparent; color: var(--t2); border-color: var(--ui-edge);
      box-shadow: inset 0 2px 4px oklch(0 0 0 / .22);
    }
  }

  /* Details: who said so, and on what grounds. Each fact is a run-in line,
     term then value, so it reads as a short record rather than a form. */
  .prov {
    margin: 0 18px; padding: 10px 0 14px; border-top: 1px dashed var(--line);
    @container card (width < 704px) { margin: 0 14px; }
    &[hidden] { display: none; }
    &:not([hidden]) { animation: open .22s var(--ease); }
    & dl { display: grid; gap: 4px; font-size: 17px; line-height: 1.5; }
    & dl > div { max-width: 80ch; }
    & dt { display: inline; margin-right: 6px; font-weight: 600; color: var(--t2); }
    & dd { display: inline; color: var(--text); }
    & dd.none { color: var(--t3); font-style: italic; }
    & .note { margin-top: 10px; }
  }
  @keyframes open { from { translate: 0 -6px; } }
  /* One sentence of warning for anything not safe to work from. */
  .caution {
    display: flex; gap: 8px; align-items: baseline; margin-top: 8px; max-width: 80ch;
    font-size: 17px; line-height: 1.5; color: var(--t2);
    & svg { width: 13px; height: 13px; flex: none; color: var(--edge); translate: 0 1px; }
    & b { color: var(--edge); font-weight: 700; }
  }
  .note {
    --c: var(--edge);
    margin-top: 14px; padding: 12px 16px; background: var(--panel2);
    border: 1px solid var(--line); border-left: 3px solid var(--c); border-radius: 2px 12px 12px 2px;
    font-size: 17px; max-width: 72ch;
    & b {
      display: flex; align-items: center; gap: 7px; margin-bottom: 4px; color: var(--c);
      font-size: 16px; font-weight: 700;
      & svg { width: 15px; height: 15px; }
    }
    & p + p { margin-top: 6px; color: var(--t2); font-size: 16px; }
    &.mic { --c: var(--b-hf); }
  }

  .empty {
    padding: 28px; text-align: center; border: 1px dashed var(--ui-edge); border-radius: 18px; color: var(--t2);
    & p { margin-bottom: 12px; }
  }

  /* ----- Aux & effects ----- */
  .section-h {
    font-family: var(--display); font-weight: 600; font-size: 30px; line-height: 1.1; margin: 34px 0 6px;
    font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1;
  }
  .section-sub { color: var(--t2); font-size: 17px; margin-bottom: 16px; max-width: 70ch; }
  .alert {
    display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start;
    padding: 16px 18px; background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--exp);
    border-radius: var(--r-card); box-shadow: var(--shadow); color: var(--text);
    & svg { width: 20px; height: 20px; color: var(--exp); margin-top: 2px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
    & b { display: block; color: var(--exp); font-size: 16px; font-weight: 700; }
  }

  .panel {
    --edge: var(--att);
    background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--edge);
    border-radius: var(--r-card); box-shadow: var(--shadow); padding: 16px 18px;
  }
  /* The status mark floats top right, so the heading and text beside it
     flow round and under it instead of being squeezed into a column. */
  .panel-top {
    display: flow-root;
    & > .mark { float: right; margin: 2px 0 6px 12px; }
  }
  .bus-id { font-size: 15px; font-weight: 600; letter-spacing: .06em; color: var(--t2); text-transform: uppercase; }
  .bus-role { font-weight: 600; font-size: 20px; line-height: 1.25; letter-spacing: .03em; margin: 2px 0 10px; }
  .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
  .tag {
    display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 500;
    padding: 2px 11px; border-radius: 999px; border: 1px solid var(--ui-edge); color: var(--t2);
    &.pre { color: var(--b-hf); border-color: currentColor; }
    &.post { color: var(--b-lm); border-color: currentColor; }
  }
  .policy {
    list-style: none; font-size: 17px; color: var(--text); display: grid; gap: 8px;
    & li { padding-left: 16px; position: relative; }
    & li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; rotate: 45deg; border: 1px solid var(--ui-edge); }
  }
  .standing { display: block; font-size: 15px; font-weight: 700; color: var(--prop); }

  .rules { display: grid; gap: 0; padding: 4px 18px; }
  .rule {
    display: grid; grid-template-columns: 110px 170px 1fr auto; gap: 16px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--line);
    &:last-child { border-bottom: 0; }
    @media (max-width: 860px) {
      grid-template-columns: 1fr auto; gap: 4px 12px;
      & .rule-why { grid-column: 1 / -1; }
      & .verdict { grid-column: 1; }
      & .mark { grid-row: 1; grid-column: 2; }
    }
  }
  .rule-group { font-weight: 600; }
  .verdict {
    font-size: 16px; font-weight: 700; display: inline-flex; gap: 6px; align-items: center;
    &.on { color: var(--att); }
    &.off { color: var(--exp); }
    & svg { width: 12px; height: 12px; flex-shrink: 0; }
  }
  .rule-why { color: var(--text); font-size: 17px; }

  .ring {
    width: 100%; border-collapse: collapse; font-size: 17px; margin-top: 12px;
    & th { text-align: left; font-size: 15px; font-weight: 600; color: var(--t2); padding: 8px 12px 8px 0; border-bottom: 1px solid var(--ui-edge); }
    & td { padding: 11px 12px 11px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
    & tr:last-child td { border-bottom: 0; }
    & .fq { font-weight: 600; color: var(--text); white-space: nowrap; }
    & .bd { font-weight: 500; color: var(--t2); white-space: nowrap; }
    @media (max-width: 640px) {
      & thead { display: none; }
      & tr { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
      & tr:last-child { border-bottom: 0; }
      & td { padding: 0; border: 0; }
      & td:last-child { grid-column: 1 / -1; color: var(--t2); }
    }
  }

  .opt-name { font-weight: 600; font-size: 20px; line-height: 1.25; }
  .opt-config { font-size: 17px; color: var(--t2); margin: 6px 0 12px; }
  .gc {
    display: grid; grid-template-columns: 1fr 1fr; gap: 18px; font-size: 17px;
    @media (max-width: 640px) { grid-template-columns: 1fr; }
    & b { display: flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 700; margin-bottom: 2px; }
    & .gains b { color: var(--att); }
    & .costs b { color: var(--exp); }
  }
  .why {
    margin-top: 12px; font-size: 17px;
    & summary {
      cursor: pointer; color: var(--text); font-size: 16px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px;
      min-height: 44px; list-style: none;
      &::-webkit-details-marker { display: none; }
      &::before { content: "+"; width: 18px; height: 18px; display: inline-grid; place-items: center; border: 1px solid var(--ui-edge); border-radius: 50%; font-size: 13px; line-height: 1; }
      &:hover { color: var(--text); }
    }
    &[open] summary::before { content: "−"; }
    & p { color: var(--t2); margin-top: 6px; max-width: 72ch; }
  }

  /* ----- Footer ----- */
  footer {
    margin-top: 64px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 16px; color: var(--t2); display: grid; gap: 6px;
    & strong { color: var(--text); font-weight: 500; }
  }
  /* Links in a row, each a 44px target; the dots between them stay quiet. */
  .foot-links {
    display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px;
    & a { color: var(--text); display: inline-flex; align-items: center; min-height: 44px; }
  }

  /* ----- Scroll reveal -----
     As a card comes up from the bottom of the window it rises 14px into
     place and its curve sweeps in from low to high frequency, like an
     analyser. Scrolling drives it, so nothing moves on its own. Text never
     fades: only position and the curve's clip change. Browsers without
     scroll-driven animations, and anyone whose device asks for reduced
     motion, get the cards already in place. */
  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
      .card {
        view-timeline: --card block;
        animation: card-rise linear both;
        animation-timeline: --card;
        animation-range: entry 0% entry 70%;
      }
      .card .curve {
        animation: curve-sweep linear both;
        animation-timeline: --card;
        animation-range: entry 10% entry 100%;
      }
    }
  }
  @keyframes card-rise { from { translate: 0 14px; } }
  @keyframes curve-sweep {
    from { clip-path: inset(-8px 100% -8px -8px); }
    to { clip-path: inset(-8px -8px -8px -8px); }
  }
}

/* ===== Utilities: hiding, motion, print ===== */
@layer utilities {
  .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

  /* View Transitions for tab and filter changes, only when motion is welcome. */
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .2s; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
    .tile:hover, .card:hover { transform: none; }
  }

  @media print {
    body { padding: 0; }
    .masthead { background: none; padding-top: 0; }
    .masthead::before, .frieze, .toolbar, .ledger, .findbar, .result, .skip, .chev { display: none !important; }
    .prov[hidden] { display: block !important; }
    .card, .panel { break-inside: avoid; box-shadow: none; }
    #auxPanel[hidden] { display: block !important; }
  }
}