/* =====================================================================================
   BURNER DESIGN SYSTEM v1 · burner.css
   The Burner Company · Burn Mark · Burner Lines · Burner Grid · Burner Bridge
   Rev 2 · 23 Oct 2026 (after review)

   THE RULE: two inks for chrome (Off Black #1A1A1A, Off White #EDE8E0 and mixes of the two).
   Music is the only colour. One signal colour, LIVE (sticker blue), means "linked / armed / on air"
   and always carries its word as well as its colour.
   Square is furniture (panels, buttons, tiles). Round is sticker (pills, chips, LEDs, die-cuts).
   One light effect: the follow-spot playhead. No glows, no blur, no gradients that look like gradients.

   Everything is prefixed .bn- / --bn-. Modes: data-bn-mode="ink" (default) | "paper" | "show".
   Hex literals are lowercase in code that tests read (LIVE_TOKENS, app.css). Read CONTRACT.md first.
   ===================================================================================== */

/* ---------- fonts (self-host; all OFL). Paths are relative to this file: ship as /brand/burner.css ---------- */
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap;
  src: local("IBM Plex Mono"), local("IBMPlexMono"), url("fonts/IBMPlexMono-Regular.woff") format("woff"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap;
  src: local("IBM Plex Mono Medium"), local("IBMPlexMono-Medium"), url("fonts/IBMPlexMono-Medium.woff") format("woff"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 600; font-display: swap;
  src: local("IBM Plex Mono SemiBold"), local("IBMPlexMono-SemiBold"), url("fonts/IBMPlexMono-SemiBold.woff") format("woff"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 700; font-display: swap;
  src: local("IBM Plex Mono Bold"), local("IBMPlexMono-Bold"), url("fonts/IBMPlexMono-Bold.woff") format("woff"); }
/* IBM Plex Sans Condensed (OFL): the build step drops fonts/IBMPlexSansCondensed-{Regular,Medium,SemiBold,Bold}.woff2
   + OFL.txt next to this file. Mockups load the same face from Google Fonts so their widths match the build. */
@font-face { font-family: "Burner Label"; font-weight: 400; font-display: swap;
  src: local("IBM Plex Sans Condensed"), local("IBMPlexSansCond"), url("fonts/IBMPlexSansCondensed-Regular.woff2") format("woff2"); }
@font-face { font-family: "Burner Label"; font-weight: 500; font-display: swap;
  src: local("IBM Plex Sans Condensed Medium"), local("IBMPlexSansCond-Medium"), url("fonts/IBMPlexSansCondensed-Medium.woff2") format("woff2"); }
@font-face { font-family: "Burner Label"; font-weight: 600; font-display: swap;
  src: local("IBM Plex Sans Condensed SemiBold"), local("IBMPlexSansCond-SemiBold"), url("fonts/IBMPlexSansCondensed-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Burner Label"; font-weight: 700; font-display: swap;
  src: local("IBM Plex Sans Condensed Bold"), local("IBMPlexSansCond-Bold"), url("fonts/IBMPlexSansCondensed-Bold.woff2") format("woff2"); }

/* =====================================================================================
   1. TOKENS
   ===================================================================================== */
:root {
  /* --- the two brand inks (guide p6) --- */
  --bn-ink:   #1A1A1A;   /* Off Black, Pantone 419 C */
  --bn-paper: #EDE8E0;   /* Off White, Pantone 9183 C */
  --bn-ink-deep: #0E0E0E;/* SHOW ground, behind video, hard shadows */

  /* --- paper-over-ink mixes: t = share of paper. Every grey in the suite is one of these. --- */
  --bn-mix-03: #202020;  /* sunken canvas */
  --bn-mix-06: #272626;  /* raised panel */
  --bn-mix-10: #2F2F2E;  /* hairline on ink */
  --bn-mix-15: #3A3938;  /* hover ground */
  --bn-mix-20: #444342;  /* rule / border */
  --bn-mix-35: #646260;  /* strong rule (every 4th bar), disabled glyph strokes. Never text. */
  --bn-mix-50: #84817D;  /* non-text only: hollow LED ring, empty dashes. Never text. */
  --bn-mix-60: #999691;  /* = Burn Mark --dim in the legacy table; text on --bn-bg only */
  --bn-mix-66: #A6A39E;  /* THE SMALL-TEXT FLOOR on ink: 6.9:1 on bg, 6.5 on sunk, 6.0 on raise */
  --bn-mix-72: #B2AEA9;  /* secondary text; the floor on hover / mix-10 / mix-15 grounds (≥5.2:1) */
  --bn-mix-86: #CFCBC4;  /* strong secondary; SHOW text */
  /* ink-over-paper for paper mode (t = share of ink) */
  --bn-pmix-06: #E1DCD4;
  --bn-pmix-12: #D3CEC6;
  --bn-pmix-25: #B8B3AC;
  --bn-pmix-55: #787470;  /* non-text only on paper */
  --bn-pmix-68: #595855;  /* THE SMALL-TEXT FLOOR on paper (5.8:1; 5.2 on pmix-06) */

  /* --- LIVE: the one signal colour. Sticker blue, from TBC's approved June 2026 sticker sheet. ---
     It always travels with its word (DESK · LINKED, LIVE, SENT). Blue alone never means anything. */
  --bn-live:    #3A5BD9;   /* sticker royal. Fills: dot, pill, stamp, progress cell. Paper text on it = 4.7:1 */
  --bn-live-hi: #7B93F0;   /* blue text or hairline on ink (6.0:1). Small text only, never a display mark */

  /* --- MUSIC: display colours, content only (lanes, map, sections, swatches). Never chrome. ---
     Lightness-normalised display versions of the desk colours. The desk colours (HIT_META /
     CUE_COLORS) are what travel to MA as appearances and stay unchanged in code. */
  --bn-m-kick:   #F2554B;
  --bn-m-snare:  #46D2E6;   /* pushed towards cyan so it never reads as the LIVE blue */
  --bn-m-hat:    #E8DE5A;
  --bn-m-tom:    #B66DF2;
  --bn-m-cymbal: #F2C14A;
  --bn-m-bass:   #F29761;
  --bn-m-vocal:  #9BE65A;
  --bn-m-synth:  #DCD3A0;
  --bn-m-build:  #EDE8E0;   /* builds are drawn as an OUTLINED WEDGE (a crescendo), never a filled block */
  --bn-m-breath: #A8C8D8;
  /* sections */
  --bn-s-intro:  #8A8A86;
  --bn-s-verse:  #2FBF95;
  --bn-s-build:  #F2A93B;
  --bn-s-drop:   #E8475A;
  --bn-s-chorus: #F2706A;
  --bn-s-break:  #B49ADF;   /* moved to violet so LIVE stays the only blue */
  --bn-s-bridge: #D07BC4;
  --bn-s-outro:  #9A9AB4;
  --bn-s-hook:   #F2706A;
  --bn-s-stop:   #EDE8E0;   /* a stop / blackout bar: paper outline, like a build */
  /* stem energy (music map) */
  --bn-e-drums:  var(--bn-m-kick);
  --bn-e-bass:   var(--bn-m-bass);
  --bn-e-other:  var(--bn-m-synth);
  --bn-e-vocals: var(--bn-m-vocal);
  --bn-e-bright: var(--bn-m-snare);

  /* --- type --- */
  --bn-font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --bn-font-label:   "Burner Label", "IBM Plex Sans Condensed", "Avenir Next Condensed", "Arial Narrow", sans-serif;
  /* Display = outlined SVG (marks/). There is deliberately NO font here: the display face is never live text.
     Where a fixed word has no outlined file yet, it falls back to the condensed label face at 700. */
  --bn-font-display: "Burner Label", "IBM Plex Sans Condensed", "Avenir Next Condensed", sans-serif;
  --bn-fs-10: 10px;  /* ONLY title-block micro caps (mono, tracked), as in the packets */
  --bn-fs-11: 11px;  /* THE FLOOR for all other chrome text */
  --bn-fs-12: 12px;  /* live facts: tile meta, chip numbers, lane counts, seq numbers */
  --bn-fs-13: 13px;  /* body, lane names, NEXT */
  --bn-fs-14: 14px;  /* SHOW mode floor */
  --bn-fs-15: 15px;
  --bn-fs-18: 18px;
  --bn-fs-22: 22px;
  --bn-fs-28: 28px;  /* transport timecode */
  --bn-fs-36: 36px;
  --bn-fs-48: 48px;  /* slate numerals in lanes */
  --bn-fs-64: 64px;
  --bn-fs-96: 96px;
  --bn-track-micro: .16em;
  --bn-track-label: .06em;
  --bn-track-display: -.01em;

  /* --- space: 4px unit --- */
  --bn-sp-0: 2px; --bn-sp-1: 4px; --bn-sp-2: 8px; --bn-sp-3: 12px; --bn-sp-4: 16px; --bn-sp-5: 24px;
  --bn-sp-6: 32px; --bn-sp-7: 48px; --bn-sp-8: 64px; --bn-sp-9: 96px;
  --bn-gutter: 16px;          /* phone side gutter */
  --bn-target-fine: 32px;     /* desktop toolbar minimum (pointer: fine) */
  --bn-touch: 44px;           /* minimum on any touch screen (pointer: coarse) */
  --bn-touch-show: 56px;      /* recipe sheet, SHOW mode, phone remote */
  --bn-titleblock-h: 52px;
  --bn-topbar-h: 56px;
  --bn-lane-h: 44px;
  --bn-lane-h-off: 28px;      /* an off lane stays a 28 px target (was 14) */
  --bn-head-w: 196px;

  /* --- lines, radii, shadows --- */
  --bn-hair: 1px;
  --bn-rule: 1.5px;
  --bn-box: 2px;
  --bn-stamp-w: 3px;
  --bn-r-0: 0;
  --bn-r-die: 999px;
  --bn-shadow-hard: 5px 5px 0 var(--bn-ink);        /* paper mode lift */
  --bn-shadow-deep: 8px 8px 0 var(--bn-ink-deep);   /* ink mode sheet lift */

  /* --- motion --- */
  --bn-ease: cubic-bezier(.16, 1, .3, 1);
  --bn-slam: cubic-bezier(.5, 0, .75, 0);
  --bn-t-press: 140ms;
  --bn-t-quick: 200ms;
  --bn-t-sheet: 460ms;
  --bn-t-stamp: 500ms;
  --bn-t-strike: 950ms;
  --bn-led-decay: 150ms;     /* hit: on in 0 ms (transition: none), decays over this */
  --bn-led-warm: 120ms;
  --bn-led-drain: 300ms;
  --bn-spot-r: 220px;        /* follow-spot half-width */
  --bn-grain-alpha: .06;
}

/* ---------- semantic layer: modes ---------- */
:root, [data-bn-mode="ink"] {
  --bn-bg: var(--bn-ink);
  --bn-sunk: var(--bn-mix-03);
  --bn-raise: var(--bn-mix-06);
  --bn-hover: var(--bn-mix-15);
  --bn-line: var(--bn-mix-10);
  --bn-line-2: var(--bn-mix-20);
  --bn-line-3: var(--bn-mix-35);
  --bn-text: var(--bn-paper);
  --bn-text-2: var(--bn-mix-72);
  --bn-text-3: var(--bn-mix-66);      /* floor: holds ≥6:1 on bg, sunk and raise */
  --bn-text-on-hover: var(--bn-mix-72);
  --bn-ring: var(--bn-mix-50);        /* non-text: hollow LED, dashed empties */
  --bn-inv-bg: var(--bn-paper);
  --bn-inv-line: var(--bn-paper);
  --bn-inv-text: var(--bn-ink);
  --bn-inv-text-2: var(--bn-pmix-68); /* secondary text on an inverted block */
  --bn-live-fill: var(--bn-live);
  --bn-live-text: var(--bn-live-hi);
  --bn-focus: var(--bn-paper);
  --bn-shadow: var(--bn-shadow-deep);
  color-scheme: dark;
}
[data-bn-mode="paper"] {
  --bn-bg: var(--bn-paper);
  --bn-sunk: var(--bn-pmix-06);
  --bn-raise: #F3EFE9;
  --bn-hover: var(--bn-pmix-06);
  --bn-line: var(--bn-pmix-12);
  --bn-line-2: var(--bn-pmix-25);
  --bn-line-3: var(--bn-pmix-55);
  --bn-text: var(--bn-ink);
  --bn-text-2: var(--bn-pmix-68);
  --bn-text-3: var(--bn-pmix-68);
  --bn-text-on-hover: var(--bn-pmix-68);
  --bn-ring: var(--bn-pmix-55);
  --bn-inv-bg: var(--bn-ink);
  --bn-inv-line: var(--bn-ink);
  --bn-inv-text: var(--bn-paper);
  --bn-inv-text-2: var(--bn-mix-66);
  --bn-live-fill: var(--bn-live);
  --bn-live-text: var(--bn-live);
  --bn-focus: var(--bn-ink);
  --bn-shadow: var(--bn-shadow-hard);
  color-scheme: light;
}
/* SHOW: the dark room. Dim the room by SHOWING LESS, never by dimming text.
   Text stays ≥7:1 and ≥14 px; the layout drops the music map, waveform, off lanes and editing,
   and NOW / NEXT / timecode / bar countdown become the hero. Inverted blocks become 2 px outlines. */
[data-bn-mode="show"] {
  --bn-bg: var(--bn-ink-deep);
  --bn-sunk: var(--bn-ink-deep);
  --bn-raise: #161616;
  --bn-hover: #1E1E1E;
  --bn-line: #1F1F1F;
  --bn-line-2: #2C2C2B;
  --bn-line-3: #4A4947;
  --bn-text: var(--bn-mix-86);        /* 11.9:1, no full white in a dark room */
  --bn-text-2: var(--bn-mix-72);      /* 8.8:1 */
  --bn-text-3: var(--bn-mix-66);      /* 7.7:1 */
  --bn-text-on-hover: var(--bn-mix-72);
  --bn-ring: var(--bn-mix-35);
  --bn-inv-bg: transparent;
  --bn-inv-line: var(--bn-mix-86);
  --bn-inv-text: var(--bn-mix-86);
  --bn-inv-text-2: var(--bn-mix-72);
  --bn-live-fill: var(--bn-live);     /* 3.4:1 on the SHOW ground (non-text) */
  --bn-live-text: var(--bn-live-hi);
  --bn-focus: var(--bn-mix-86);
  --bn-shadow: none;
  /* the night ramp: every music + section token at ~3.6:1 on #0E0E0E */
  --bn-m-kick: #B7433B; --bn-m-snare: #2B747E; --bn-m-hat: #706C30; --bn-m-tom: #8752B2; --bn-m-cymbal: #80672C;
  --bn-m-bass: #925D3E; --bn-m-vocal: #507432; --bn-m-synth: #6F6B53; --bn-m-build: #6C6A66; --bn-m-breath: #5D6D75;
  --bn-s-intro: #6A6A67; --bn-s-verse: #21765E; --bn-s-build: #8B6327; --bn-s-drop: #BC3C4B; --bn-s-chorus: #A7504C;
  --bn-s-break: #73638D; --bn-s-bridge: #905788; --bn-s-outro: #69697A; --bn-s-hook: #A7504C; --bn-s-stop: #6C6A66;
  color-scheme: dark;
}

/* =====================================================================================
   2. BASE
   ===================================================================================== */
.bn, .bn-root {
  background: var(--bn-bg);
  color: var(--bn-text);
  font-family: var(--bn-font-label);
  font-size: var(--bn-fs-13);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.bn *, .bn *::before, .bn *::after { box-sizing: border-box; }
.bn :focus-visible { outline: 2px solid var(--bn-focus); outline-offset: 2px; }
.bn ::selection { background: var(--bn-paper); color: var(--bn-ink); }
.bn [hidden] { display: none !important; }

.bn-num, .bn-tc   { font-family: var(--bn-font-mono); font-variant-numeric: tabular-nums slashed-zero; letter-spacing: 0; }
.bn-tc            { font-weight: 500; font-size: var(--bn-fs-28); line-height: 1; }
.bn-tc .bn-tc__ff { color: var(--bn-text-3); }
.bn-micro         { font-family: var(--bn-font-mono); font-size: var(--bn-fs-11); font-weight: 500; letter-spacing: var(--bn-track-micro); text-transform: uppercase; color: var(--bn-text-3); }
.bn-micro--tb     { font-size: var(--bn-fs-10); }   /* title-block only */
.bn-label         { font-family: var(--bn-font-label); font-size: var(--bn-fs-12); font-weight: 600; letter-spacing: var(--bn-track-label); text-transform: uppercase; }
.bn-name          { font-family: var(--bn-font-label); font-size: var(--bn-fs-13); font-weight: 600; letter-spacing: .02em; }
.bn-body          { font-family: var(--bn-font-label); font-size: var(--bn-fs-15); font-weight: 400; line-height: 1.5; color: var(--bn-text-2); }
.bn-ref           { font-family: var(--bn-font-mono); font-size: var(--bn-fs-12); font-weight: 500; color: var(--bn-text-3); letter-spacing: .02em; }
.bn-display       { font-family: var(--bn-font-display); font-weight: 700; letter-spacing: var(--bn-track-display); line-height: .9; text-transform: uppercase; }
.bn-mark svg, svg.bn-mark { fill: currentColor; display: block; height: 100%; width: auto; }
.bn-sep::before { content: "·"; margin: 0 .5em; color: var(--bn-text-3); }
.bn-ellip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* Outlined numerals (slates, song numbers, counts): <span class="bn-numerals" aria-label="36"> + bnNumerals() svg.
   Height = font-size. Ink = currentColor. See burner-num.js. */
.bn-numerals { display: inline-flex; height: 1em; line-height: 1; }
.bn-numerals svg { height: 100%; width: auto; fill: currentColor; overflow: visible; }

/* =====================================================================================
   3. COMPONENTS
   ===================================================================================== */

/* ---------- 3.1 Lane LED: flat concentric rings, like the sticker disc. No bloom. ----------
   The input is a 24 px hit target; the lamp is drawn inside it with hard-stop rings.
   On  = solid lamp in the lane colour + an outer ring. Off = one hollow ring (the name stays readable).
   Hit = the lamp strikes paper for one frame (transition: none), then decays back over 150 ms. */
.bn-led, .bn-lanehead { --c: var(--bn-paper); }
.bn-led { display: inline-flex; align-items: center; gap: 8px; min-height: var(--bn-touch); cursor: pointer; user-select: none; }
.bn-led input, .bn-lanehead input[type=checkbox] {
  appearance: none; -webkit-appearance: none; margin: 0; flex: none; width: 24px; height: 24px; border: 0; border-radius: var(--bn-r-die);
  background: radial-gradient(circle, transparent 0 5.5px, var(--bn-ring) 5.5px 7px, transparent 7px);
  transition: background var(--bn-led-drain) var(--bn-ease); cursor: pointer;
}
.bn-led input:checked, .bn-lanehead input[type=checkbox]:checked {
  background: radial-gradient(circle, var(--c) 0 5px, transparent 5px 7px, var(--c) 7px 8.5px, transparent 8.5px);
  transition: background var(--bn-led-decay) ease-out;
}
.bn-led.is-hit input:checked, .bn-lanehead.is-hit input[type=checkbox]:checked {
  background: radial-gradient(circle, var(--bn-paper) 0 8.5px, transparent 8.5px); transition: none;
}
.bn-led span { font: 600 var(--bn-fs-13)/1 var(--bn-font-label); letter-spacing: var(--bn-track-label); text-transform: uppercase; color: var(--bn-text); }
.bn-led input:not(:checked) ~ span { color: var(--bn-text-3); }

/* ---------- 3.2 Lane head (gutter row). The WHOLE head is the toggle: make it a <label>. ---------- */
.bn-lanehead { display: grid; grid-template-columns: 24px 1fr auto; grid-template-rows: auto auto; column-gap: 8px; align-content: center;
  height: var(--bn-lane-h); padding: 0 12px 0 8px; border-bottom: var(--bn-hair) solid var(--bn-line); background: var(--bn-bg); cursor: pointer; }
.bn-lanehead input { grid-row: 1 / span 2; align-self: center; }
.bn-lanehead__name { font: 600 var(--bn-fs-13)/1.1 var(--bn-font-label); letter-spacing: var(--bn-track-label); text-transform: uppercase; color: var(--bn-text); }
.bn-lanehead__desk { grid-column: 2 / span 2; white-space: nowrap; font: 500 var(--bn-fs-11)/1.2 var(--bn-font-mono); color: var(--bn-text-3); letter-spacing: .02em; }
.bn-lanehead__count { grid-column: 3; grid-row: 1; align-self: end; text-align: right; font: 500 var(--bn-fs-12)/1 var(--bn-font-mono); color: var(--bn-text-2); font-variant-numeric: tabular-nums; }
.bn-lanehead:hover { background: var(--bn-raise); }
.bn-lanehead.is-off { height: var(--bn-lane-h-off); }
.bn-lanehead.is-off .bn-lanehead__name { color: var(--bn-text-3); font-size: var(--bn-fs-12); }
.bn-lanehead.is-off .bn-lanehead__desk { display: none; }
.bn-lanehead.is-focus { background: var(--bn-raise); box-shadow: inset 3px 0 0 var(--c); }
/* the off tray: lanes that are off, as 44 px chips under the heads */
.bn-offtray { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; border-bottom: var(--bn-hair) solid var(--bn-line); }

/* ---------- 3.3 Pill: a die-cut label. Read-only facts, never a button. ----------
   The desk pill is ALWAYS "DESK · <state>": DESK · LINKED, DESK · SONG 36, DESK · IN SYNC, DESK · LOOKING… */
.bn-pill { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 12px; border-radius: var(--bn-r-die);
  border: var(--bn-rule) solid var(--bn-text-2); color: var(--bn-text); background: transparent;
  font: 600 var(--bn-fs-11)/1 var(--bn-font-mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; flex: none; }
.bn-pill b { font-weight: 700; }
.bn-pill--solid { background: var(--bn-inv-bg); color: var(--bn-inv-text); border-color: var(--bn-inv-line); }
.bn-pill--live { background: var(--bn-live-fill); border-color: var(--bn-live-fill); color: var(--bn-paper); }
.bn-pill--live::before, .bn-dot-live { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--bn-paper); animation: bn-blink 1.6s steps(1) infinite; }
.bn-dot-live { display: inline-block; background: var(--bn-live-fill); }
.bn-pill--off { border-style: dashed; color: var(--bn-text-2); }

/* ---------- 3.4 Buttons (square: furniture) ---------- */
.bn-btn { --h: var(--bn-touch); display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: var(--h); min-width: var(--h);
  padding: 0 20px; border-radius: var(--bn-r-0); border: var(--bn-box) solid var(--bn-text); cursor: pointer; flex: none;
  font: 600 var(--bn-fs-12)/1 var(--bn-font-label); letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
  background: transparent; color: var(--bn-text); white-space: nowrap;
  transition: transform var(--bn-t-press) var(--bn-ease), box-shadow var(--bn-t-quick) var(--bn-ease), background var(--bn-t-quick); }
.bn-btn:active { transform: scale(.96); }
.bn-btn--primary { background: var(--bn-inv-bg); color: var(--bn-inv-text); border-color: var(--bn-inv-line); }
.bn-btn--primary:hover { transform: translate(-3px, -3px); box-shadow: 3px 3px 0 var(--bn-line-3); }
[data-bn-mode="paper"] .bn-btn--primary:hover { box-shadow: var(--bn-shadow-hard); }
.bn-btn--secondary { border-color: var(--bn-line-2); border-width: var(--bn-rule); color: var(--bn-text); }
.bn-btn--secondary:hover { border-color: var(--bn-text); }
.bn-btn--ghost { border-color: transparent; color: var(--bn-text-2); padding: 0 12px; }
.bn-btn--ghost:hover { color: var(--bn-text); background: var(--bn-hover); }
.bn-btn--lg { --h: var(--bn-touch-show); padding: 0 28px; font-size: var(--bn-fs-13); }
.bn-btn--sm { --h: 36px; padding: 0 12px; font-size: var(--bn-fs-11); }
.bn-btn--icon { padding: 0; width: var(--h); }
.bn-btn[disabled], .bn-btn.is-disabled { opacity: .38; pointer-events: none; }
.bn-btn .bn-dot-live { width: 8px; height: 8px; }
.bn-btn__kbd { font: 500 var(--bn-fs-11)/1 var(--bn-font-mono); letter-spacing: .06em; color: var(--bn-inv-text-2); }
.bn-btn--secondary .bn-btn__kbd, .bn-btn--ghost .bn-btn__kbd { color: var(--bn-text-3); }
@media (pointer: coarse) { .bn-btn--sm { --h: var(--bn-touch); } }

/* ---------- 3.5 Chip: a selectable die-cut (groups, presets, filters). Selected = inversion. ---------- */
.bn-chip { display: inline-flex; align-items: center; gap: 8px; min-height: var(--bn-touch); padding: 0 16px; border-radius: var(--bn-r-die);
  border: var(--bn-rule) solid var(--bn-line-2); background: transparent; color: var(--bn-text); cursor: pointer; flex: none;
  font: 600 var(--bn-fs-12)/1.1 var(--bn-font-label); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
  transition: background var(--bn-t-quick), color var(--bn-t-quick), border-color var(--bn-t-quick); }
.bn-chip:hover { border-color: var(--bn-text-2); }
.bn-chip__no { font: 500 var(--bn-fs-12)/1 var(--bn-font-mono); color: var(--bn-text-3); letter-spacing: .02em; }
.bn-chip.is-on { background: var(--bn-inv-bg); color: var(--bn-inv-text); border-color: var(--bn-inv-line); }
.bn-chip.is-on .bn-chip__no { color: var(--bn-inv-text-2); }
.bn-chip.is-suggested { border-style: dashed; border-color: var(--bn-text-2); }
.bn-chip--touch { min-height: var(--bn-touch-show); padding: 0 20px; font-size: var(--bn-fs-13); }
.bn-chip--outline { border-color: var(--bn-text); background: var(--bn-bg); }   /* over imagery (the 3D render) */
[data-bn-mode="show"] .bn-chip.is-on { border-width: var(--bn-box); }

/* ---------- 3.6 Stamp: the big moments (MARKED · CHECKED ON THE DESK · SENT TO DESK). One per screen. ---------- */
.bn-stamp { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 18px 10px;
  border: var(--bn-stamp-w) solid currentColor; color: var(--bn-text); transform: rotate(-6deg); transform-origin: 50% 50%;
  font: 700 var(--bn-fs-22)/.9 var(--bn-font-label); letter-spacing: .02em; text-transform: uppercase; }
.bn-stamp .bn-mask { height: 30px; }
.bn-stamp__sub { font: 600 var(--bn-fs-11)/1 var(--bn-font-mono); letter-spacing: .18em; }
.bn-stamp--live { color: var(--bn-live); }               /* the true sticker royal at display size */
[data-bn-mode="ink"] .bn-stamp--live .bn-stamp__sub, :root:not([data-bn-mode]) .bn-stamp--live .bn-stamp__sub { color: var(--bn-live-hi); }
.bn-stamp--slam { animation: bn-stamp var(--bn-t-stamp) var(--bn-slam) both; }
.bn-stamp--rough { filter: url(#bn-rough); }              /* needs the inline <filter id="bn-rough"> (CONTRACT §4) */
.bn-stamp--flat { transform: none; }                      /* in flow, where rotation would collide */

/* ---------- 3.7 Title block (bottom bar; drawing-pack furniture). Flex, so the grow cell grows. ---------- */
.bn-titleblock { display: flex; align-items: stretch; height: var(--bn-titleblock-h); border-top: var(--bn-box) solid var(--bn-text); background: var(--bn-bg); min-width: 0; }
.bn-titleblock__cell { flex: none; display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 0 16px; min-width: 0;
  border-right: var(--bn-hair) solid var(--bn-line-2); }
.bn-titleblock__cell:last-child { border-right: 0; }
.bn-titleblock__cell > .bn-micro { font-size: var(--bn-fs-10); }
.bn-titleblock__cell > b { font: 600 var(--bn-fs-13)/1 var(--bn-font-label); letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bn-titleblock__cell > b.bn-num { font-family: var(--bn-font-mono); font-weight: 500; letter-spacing: 0; }
.bn-titleblock__cell--mark { flex-direction: row; align-items: center; gap: 10px; }
.bn-titleblock__cell--grow { flex: 1 1 auto; }
.bn-titleblock__cell--action { padding: 0; }
.bn-titleblock__cell--action .bn-btn { height: 100%; border: 0; border-left: var(--bn-box) solid var(--bn-text); padding: 0 22px; }

/* ---------- 3.8 Slate (sections): outlined numeral + name. Name shows only if it fits. ---------- */
.bn-slate { display: inline-flex; align-items: flex-start; gap: 8px; min-width: 0; }
.bn-slate__n { font-size: var(--bn-fs-48); }
.bn-slate__meta { display: flex; flex-direction: column; gap: 4px; padding-top: 2px; min-width: 0; }
.bn-slate__name { font: 700 var(--bn-fs-13)/1 var(--bn-font-label); letter-spacing: .06em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bn-slate__tc { font: 500 var(--bn-fs-11)/1 var(--bn-font-mono); color: var(--bn-text-3); letter-spacing: .04em; }
.bn-tcbadge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 6px; background: var(--bn-inv-bg); color: var(--bn-inv-text); border: var(--bn-hair) solid var(--bn-inv-line);
  font: 600 var(--bn-fs-11)/1 var(--bn-font-mono); letter-spacing: .06em; }

/* ---------- 3.9 Sheet / dialog. Plain scrim: no blur over a canvas that redraws every frame. ---------- */
.bn-scrim { position: fixed; inset: 0; background: rgba(14, 14, 14, .78); }
.bn-sheet { position: relative; background: var(--bn-raise); color: var(--bn-text); border: var(--bn-box) solid var(--bn-text);
  box-shadow: var(--bn-shadow); border-radius: var(--bn-r-0); }
.bn-sheet--bottom { border-width: var(--bn-box) 0 0; box-shadow: 0 -10px 0 var(--bn-ink-deep); animation: bn-sheet-up var(--bn-t-sheet) var(--bn-ease) both; }
.bn-sheet__grab { width: 44px; height: 4px; background: var(--bn-line-2); margin: 10px auto 0; border-radius: var(--bn-r-die); }
.bn-sheet__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 18px 24px 14px; border-bottom: var(--bn-hair) solid var(--bn-line-2); }
.bn-sheet__body { padding: 20px 24px; }
.bn-sheet__foot { position: sticky; bottom: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 24px; border-top: var(--bn-box) solid var(--bn-text); background: var(--bn-raise); }
.bn-section-title { display: flex; align-items: baseline; gap: 10px; margin: 0 0 12px; }
.bn-section-title .bn-micro { color: var(--bn-text-2); }
.bn-section-title::after { content: ""; flex: 1; height: var(--bn-hair); background: var(--bn-line-2); transform: translateY(-3px); }
.bn-crop { position: relative; }
.bn-crop::before, .bn-crop::after { content: ""; position: absolute; width: 14px; height: 14px; pointer-events: none;
  background: linear-gradient(var(--bn-text), var(--bn-text)) center/1px 100% no-repeat, linear-gradient(var(--bn-text), var(--bn-text)) center/100% 1px no-repeat; opacity: .7; }
.bn-crop::before { left: -7px; top: -7px; } .bn-crop::after { right: -7px; bottom: -7px; }

/* ---------- 3.10 Toast: a type-on line, not a box ---------- */
.bn-toast { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--bn-inv-bg); color: var(--bn-inv-text); border: var(--bn-box) solid var(--bn-inv-line);
  font: 500 var(--bn-fs-12)/1 var(--bn-font-mono); letter-spacing: .02em; }
.bn-toast__k { font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.bn-toast--type { overflow: hidden; white-space: nowrap; animation: bn-type 900ms steps(36, end) both; }
.bn-toast--warn { background: repeating-linear-gradient(-45deg, var(--bn-paper) 0 8px, var(--bn-ink) 8px 16px); color: var(--bn-ink); padding: 3px; border: 0; }
.bn-toast--warn > span { background: var(--bn-paper); padding: 8px 12px; display: inline-flex; gap: 10px; }

/* ---------- 3.11 Hazard (warnings without a colour) ---------- */
.bn-hazard { background: repeating-linear-gradient(-45deg, var(--bn-text) 0 6px, transparent 6px 12px); }
.bn-conflict { outline: 2px dashed var(--bn-text); outline-offset: 2px; }

/* ---------- 3.12 Live tile. A hit is a strobe: a hard solid block in the lane colour for one frame, then decay. ----------
   Burn Mark's flash class is .on on #liveTiles .tile (toggled by flashStep, LIVE_FLASH_S 0.15): v3.css styles that. */
.bn-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; }
.bn-tile { --c: var(--bn-paper); position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 8px;
  min-height: 84px; padding: 10px 12px; background: var(--bn-sunk); border: var(--bn-rule) solid var(--bn-line-2); color: var(--bn-text);
  cursor: pointer; overflow: hidden; text-align: left; font: inherit; border-top: 4px solid var(--c);
  transition: background var(--bn-led-decay) ease-out, color var(--bn-led-decay) ease-out; }
.bn-tile__top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.bn-tile__name { font: 700 var(--bn-fs-15)/1 var(--bn-font-label); letter-spacing: .05em; text-transform: uppercase; }
.bn-tile__meta { font: 500 var(--bn-fs-12)/1.2 var(--bn-font-mono); color: var(--bn-text-2); letter-spacing: .02em; }
.bn-tile__seq { font: 500 var(--bn-fs-12)/1 var(--bn-font-mono); color: var(--bn-text-3); }
.bn-tile.is-hit { background: var(--c); color: var(--bn-ink); transition: none; }
.bn-tile.is-hit .bn-tile__meta, .bn-tile.is-hit .bn-tile__seq { color: var(--bn-ink); }
[data-bn-mode="show"] .bn-tile.is-hit { color: var(--bn-ink-deep); }
[data-bn-mode="show"] .bn-tile.is-hit .bn-tile__meta, [data-bn-mode="show"] .bn-tile.is-hit .bn-tile__seq { visibility: hidden; }  /* night ramp fills are ~3.6:1: only the ≥19 px bold name shows during the strobe frame */
[data-bn-mode="show"] .bn-tile__name { font-size: 19px; }
.bn-tile.is-empty { border-style: dashed; border-top: 4px dashed var(--bn-line-2); }
.bn-tile.is-open { outline: 3px solid var(--bn-text); outline-offset: 2px; }
.bn-tile--touch { min-height: var(--bn-touch-show); }

/* ---------- 3.13 Swatch (a preset from the show; colour is content) ---------- */
.bn-swatch { display: flex; flex-direction: column; gap: 6px; width: 80px; cursor: pointer; background: none; border: 0; padding: 0; color: var(--bn-text); text-align: left; }
.bn-swatch__chip { width: 80px; height: 52px; background: var(--sw); border: var(--bn-hair) solid var(--bn-line-2); position: relative; }
.bn-swatch__name { font: 600 var(--bn-fs-11)/1.15 var(--bn-font-label); letter-spacing: .04em; text-transform: uppercase; }
.bn-swatch__ref { font: 500 var(--bn-fs-11)/1 var(--bn-font-mono); color: var(--bn-text-3); }
.bn-swatch.is-on .bn-swatch__chip { outline: 3px solid var(--bn-text); outline-offset: 3px; }

/* ---------- 3.14 Segmented: square cells, selected = inversion ---------- */
.bn-seg { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: var(--bn-rule) solid var(--bn-line-2); }
.bn-seg > button { min-height: var(--bn-touch); padding: 8px 14px; background: transparent; color: var(--bn-text); border: 0; border-right: var(--bn-hair) solid var(--bn-line-2); cursor: pointer;
  font: 600 var(--bn-fs-12)/1.1 var(--bn-font-label); letter-spacing: .08em; text-transform: uppercase; text-align: left; }
.bn-seg > button:last-child { border-right: 0; }
.bn-seg > button small { display: block; margin-top: 4px; font: 500 var(--bn-fs-11)/1.25 var(--bn-font-mono); letter-spacing: .02em; text-transform: none; color: var(--bn-text-3); }
.bn-seg > button.is-on { background: var(--bn-inv-bg); color: var(--bn-inv-text); box-shadow: inset 0 0 0 var(--bn-box) var(--bn-inv-line); }
.bn-seg > button.is-on small { color: var(--bn-inv-text-2); }

/* ---------- 3.15 Stepper (timing on touch: the show's own values as chips, plus − / +) ---------- */
.bn-stepper { display: flex; align-items: stretch; gap: 6px; flex-wrap: wrap; }
.bn-stepper__pm { width: var(--bn-touch); min-height: var(--bn-touch); border: var(--bn-rule) solid var(--bn-line-2); background: transparent; color: var(--bn-text); font: 600 18px/1 var(--bn-font-mono); cursor: pointer; }
.bn-stepper .bn-chip { padding: 0 14px; font-family: var(--bn-font-mono); font-weight: 500; letter-spacing: 0; }

/* ---------- 3.15b Range (desktop only, e.g. Burn Mark's existing sensitivity <input type="range">, which tests pin). Touch uses .bn-stepper. ---------- */
.bn-range, .bn-lanehead input[type=range] { appearance: none; -webkit-appearance: none; width: 100%; height: 24px; background: transparent; margin: 0; }
.bn-range::-webkit-slider-runnable-track, .bn-lanehead input[type=range]::-webkit-slider-runnable-track { height: 2px; background: var(--bn-line-3); }
.bn-range::-webkit-slider-thumb, .bn-lanehead input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 20px; margin-top: -9px; background: var(--bn-text); border: 0; }
.bn-range::-moz-range-track, .bn-lanehead input[type=range]::-moz-range-track { height: 2px; background: var(--bn-line-3); }
.bn-range::-moz-range-thumb, .bn-lanehead input[type=range]::-moz-range-thumb { width: 12px; height: 20px; background: var(--bn-text); border: 0; border-radius: 0; }

/* ---------- 3.16 Ruler (bars) + playhead (follow-spot) ---------- */
.bn-ruler { position: relative; height: 26px; border-bottom: var(--bn-hair) solid var(--bn-line-2); font: 500 var(--bn-fs-11)/1 var(--bn-font-mono); color: var(--bn-text-3); }
.bn-ruler__bar { position: absolute; top: 0; bottom: 0; border-left: var(--bn-hair) solid var(--bn-line-2); padding: 5px 0 0 4px; }
.bn-ruler__bar.is-4 { border-left-color: var(--bn-line-3); color: var(--bn-text-2); }
.bn-playhead { position: absolute; top: 0; bottom: 0; left: 0; width: 0; border-left: 1.5px solid var(--bn-text); pointer-events: none; z-index: 5; will-change: transform; }
.bn-playhead::before { content: ""; position: absolute; top: 0; left: -6px; border: 6px solid transparent; border-top: 8px solid var(--bn-text); }
/* The one light effect. A fixed-width element moved with transform (no repaint, no blend mode). */
.bn-spot { position: absolute; top: 0; bottom: 0; left: 0; width: calc(2 * var(--bn-spot-r)); margin-left: calc(-1 * var(--bn-spot-r)); pointer-events: none; z-index: 4; will-change: transform;
  background: radial-gradient(50% 70% at 50% 50%, rgba(237, 232, 224, .10), rgba(237, 232, 224, .035) 55%, rgba(237, 232, 224, 0) 100%); }
[data-bn-mode="paper"] .bn-spot { background: radial-gradient(50% 70% at 50% 50%, rgba(26,26,26,.07), rgba(26,26,26,0) 100%); }
[data-bn-mode="show"] .bn-spot { background: radial-gradient(50% 70% at 50% 50%, rgba(207, 203, 196, .07), rgba(207, 203, 196, 0) 100%); }

/* ---------- 3.17 Grain: static by default. Animated only on splash / social (.bn-grain--live). Never in the LIVE popout. ---------- */
.bn-grain::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1000; opacity: var(--bn-grain-alpha);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.bn-grain--live::after { inset: -10%; animation: bn-grain .9s steps(5) infinite; }
[data-bn-mode="show"] .bn-grain::after, [data-bn-mode="show"].bn-grain::after { opacity: .025; }

/* ---------- 3.18 Desk tile (Burner Bridge "where do you want it to go?") ----------
   Empty = dashed (these are the choices). Burner song = smiley. Other = flat raised. Suggested = DASHED PAPER outline
   + the word SUGGESTED (never blue: blue means linked). Picked = inversion. */
.bn-desktile { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 4px; min-height: 64px; padding: 7px 8px;
  border: var(--bn-rule) solid var(--bn-line-2); background: transparent; color: var(--bn-text); text-align: left; font: inherit; cursor: pointer; }
.bn-desktile__no { font: 600 var(--bn-fs-12)/1 var(--bn-font-mono); color: var(--bn-text-2); }
.bn-desktile__name { font: 600 var(--bn-fs-11)/1.15 var(--bn-font-label); letter-spacing: .03em; text-transform: uppercase; color: var(--bn-text-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bn-desktile.is-other { background: var(--bn-raise); border-color: var(--bn-raise); }
.bn-desktile.is-burner { background: var(--bn-raise); border-color: var(--bn-line-3); }
.bn-desktile.is-burner::after { content: ""; position: absolute; top: 7px; right: 7px; width: 14px; height: 14px; background: currentColor; color: var(--bn-text-2);
  -webkit-mask: url("marks/sm/smiley.svg") center/contain no-repeat; mask: url("marks/sm/smiley.svg") center/contain no-repeat; }
.bn-desktile.is-empty { border-style: dashed; border-color: var(--bn-ring); }
.bn-desktile.is-empty .bn-desktile__name { color: var(--bn-text-3); }
.bn-desktile.is-suggested { border: var(--bn-box) dashed var(--bn-text); }
.bn-desktile.is-suggested .bn-desktile__no, .bn-desktile.is-suggested .bn-desktile__name { color: var(--bn-text); }
.bn-desktile.is-picked { background: var(--bn-inv-bg); border: var(--bn-box) solid var(--bn-inv-line); }
.bn-desktile.is-picked .bn-desktile__no, .bn-desktile.is-picked .bn-desktile__name { color: var(--bn-inv-text); }

/* ---------- 3.19 Progress: a bar that fills in steps ---------- */
.bn-progress { display: grid; grid-template-columns: repeat(var(--n, 28), 1fr); gap: 2px; height: 12px; }
.bn-progress > i { background: var(--bn-line-2); }
.bn-progress > i.is-done { background: var(--bn-text); }
.bn-progress > i.is-now { background: var(--bn-live-fill); animation: bn-blink 1s steps(1) infinite; }

/* ---------- 3.20 Register (facts box, drawing-pack) ---------- */
.bn-register { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); border: var(--bn-box) solid var(--bn-text); }
.bn-register > div { padding: 10px 12px; border-right: var(--bn-hair) solid var(--bn-line-2); display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bn-register > div:last-child { border-right: 0; }
.bn-register b { font: 500 var(--bn-fs-22)/1 var(--bn-font-mono); font-variant-numeric: tabular-nums; }

/* ---------- 3.21 Mark as mask: any outlined SVG in marks/ in the current ink ---------- */
.bn-mask { display: inline-block; flex: none; background: currentColor; -webkit-mask: var(--m) left center / contain no-repeat; mask: var(--m) left center / contain no-repeat; }

/* ---------- 3.22 Countdown: the smiley trio fills up as the next section arrives (one smiley a bar) ---------- */
.bn-countdown { display: inline-flex; gap: 4px; align-items: center; }
.bn-countdown > i { width: var(--s, 16px); height: var(--s, 16px); border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--bn-text-3); }
.bn-countdown > i.is-on { box-shadow: none; background: var(--bn-text); -webkit-mask: url("marks/sm/smiley.svg") center/contain no-repeat; mask: url("marks/sm/smiley.svg") center/contain no-repeat; }

/* ---------- 3.23 Empty state: guitar pick + an I ☺ X lockup + one plain line ---------- */
.bn-empty { display: flex; align-items: center; gap: 16px; color: var(--bn-text-2); }
.bn-empty__pick { width: 40px; height: 43px; flex: none; }
.bn-empty__line { font: 500 var(--bn-fs-12)/1.3 var(--bn-font-mono); letter-spacing: .04em; color: var(--bn-text-2); text-transform: uppercase; }

/* =====================================================================================
   4. MOTION
   ===================================================================================== */
@keyframes bn-strike {           /* lamp strike: a discharge lamp finding its arc (950ms) */
  0% { opacity: 0; } 8% { opacity: .7; } 12% { opacity: .08; } 20% { opacity: .85; } 26% { opacity: .25; }
  34% { opacity: .95; } 40% { opacity: .55; } 100% { opacity: 1; }
}
@keyframes bn-stamp { 0% { opacity: 0; transform: rotate(-6deg) scale(2.2); } 70% { opacity: 1; transform: rotate(-6deg) scale(.96); } 100% { opacity: 1; transform: rotate(-6deg) scale(1); } }
@keyframes bn-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes bn-sheet-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes bn-type { from { max-width: 0; } to { max-width: 60ch; } }
@keyframes bn-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes bn-grain { 0% { transform: translate(0,0); } 20% { transform: translate(-3%,2%); } 40% { transform: translate(2%,-4%); } 60% { transform: translate(-4%,-1%); } 80% { transform: translate(3%,3%); } 100% { transform: translate(0,0); } }
.bn-strike { animation: bn-strike var(--bn-t-strike) linear both; }
.bn-rise   { animation: bn-rise 760ms var(--bn-ease) both; animation-delay: calc(var(--i, 0) * 70ms); }

@media (prefers-reduced-motion: reduce) {
  .bn *, .bn *::before, .bn *::after, .bn-grain::after, .bn.bn-grain::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}
.bn-still *, .bn-still *::before, .bn-still *::after, .bn-still.bn-grain::after { animation: none !important; transition: none !important; }

/* =====================================================================================
   5. LAYOUT HELPERS
   ===================================================================================== */
.bn-workstation { display: grid; grid-template-rows: var(--bn-topbar-h) auto 1fr auto var(--bn-titleblock-h); height: 100vh; height: 100dvh; overflow: hidden; }
/* Top bar: the right-hand cluster (desk pill + Send) never shrinks; the track title ellipsizes first. */
.bn-topbar { display: flex; align-items: center; gap: 14px; padding: 0 12px 0 16px; border-bottom: var(--bn-hair) solid var(--bn-line-2); min-width: 0; }
.bn-topbar__end { display: flex; align-items: center; gap: 10px; margin-left: auto; flex: none; }
.bn-row { display: flex; align-items: center; gap: var(--bn-sp-3); }
.bn-col { display: flex; flex-direction: column; gap: var(--bn-sp-3); }
.bn-grow { flex: 1; min-width: 0; }
.bn-hr { height: var(--bn-hair); background: var(--bn-line-2); border: 0; margin: 0; }
@media (max-width: 640px) {
  .bn-titleblock { flex-wrap: wrap; height: auto; }
  .bn-hide-phone { display: none !important; }
}