/* Spotsheet — Design tokens. Brief 1.
   Carry these forward into every page. */

:root {
  --tc-green:  #8aae93;  /* muted green TC readout (SFX selection) */
  --wave-fill: #69707a;  /* ambient waveform */
  --wave-played: #a9e0df;  /* played-through */
  --cue-amber: #c19355;  /* cue marker amber */

  /* ── Surfaces — PT-neutral MEDIUM greys (locked 2026-07-14, founder "lift to
     medium grey"): matched to a real PT edit window so the cockpit reads as the
     same monitor as Pro Tools, not a darker neighbor. ───────────────────────── */
  --bg-app:        #2e3135;  /* viewport / chrome */
  --bg-deep:       #232528;  /* inset / recessed — waveform bed, readout wells */
  --bg-panel:      #33363b;  /* cards, panels */
  --bg-sub:        #3a3d42;  /* secondary surfaces */
  --bg-row:        #2f3236;  /* list rows */
  --bg-row-hover:  #383b40;
  --bg-row-sel:    #34414a;  /* selected — faint teal-cool tint = active */
  --bg-row-multi:  #333f47;  /* multi-select */

  /* ── Borders — low-contrast separators lifted onto the medium-grey body ──── */
  --line:          #44484e;
  --line-strong:   #545861;
  --line-soft:     #3a3d42;

  /* ── Text ─────────────────────────────────────────────── */
  --fg:            #d4d7dc;  /* primary — warm grey, not white */
  --fg-strong:     #ebedf0;  /* emphasis */
  --fg-mute:       #8b8f96;  /* secondary */
  --fg-dim:        #5b5f66;  /* tertiary */
  --fg-faint:      #3d4047;  /* disabled / hint */
  --fg-dead:       #a9adb4;  /* conservative filler treatment; AA on every note-row surface */

  /* ── Teal (sole chromatic accent, used sparingly) ─────── */
  --teal:          #35C5C7;
  --teal-deep:     #1e8587;
  --teal-bg:       rgba(53,197,199,0.07);
  --teal-line:     rgba(53,197,199,0.32);
  --teal-glow:     rgba(53,197,199,0.18);

  /* ── Status ───────────────────────────────────────────── */
  --st-open:       #8b8f96;
  --st-resolved:   #7a9a86;
  --st-flagged:    #c19355;
  --st-danger:     #b46868;

  /* ── Category coding (only true chromatic signals) ────── */
  --cat-foley:     #c89d6a;  /* warm gold */
  --cat-fx:        #9b8ec9;  /* soft purple */
  --cat-dlg:       #6ba3d0;  /* cool blue */
  --cat-mus:       #d08aa3;  /* dusty rose */
  --cat-bg:        #739683;  /* backgrounds — sage (Cue Room waveform stem, PV2 #104) */
  --cat-master:    #cdd2da;  /* master — neutral silver (cue-room-waveform canon, rgb 205,210,218) */
  --cat-x:         #c07868;  /* SFX/X — muted coral */
  --cat-fol:       #c89d6a;  /* foley */
  --cat-dx:        #6ba3d0;  /* dialogue */
  --cat-mix:       #5aafaf;  /* mix — teal */
  --cat-vfx:       #90b85a;  /* vfx — yellow-green */
  --cat-dz:        #a86ca0;  /* dz — mauve */
  --cat-mx:        #d08aa3;  /* music */

  /* ── Assignee tints (used as 24px initials circles) ───── */
  --asg-teal:      #2d8a8c;
  --asg-rose:      #a06277;
  --asg-amber:     #a37a48;
  --asg-lilac:     #7a6fa6;
  --asg-sky:       #4e7fa0;
  --asg-sage:      #5a8770;
  --asg-clay:      #966a52;

  /* ── Type ─────────────────────────────────────────────── */
  --ui:    "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ── Radii (intentionally small) ──────────────────────── */
  --r-micro:  2px;  /* chips, dots */
  --r-btn:    3px;  /* buttons, chips, inputs */
  --r-panel:  4px;  /* panels, cards, dropdowns */

  /* ── Shadows ──────────────────────────────────────────── */
  --inset-panel:
    inset 0 1px 0 rgba(255,255,255,0.03),
    inset 0 -1px 0 rgba(0,0,0,0.4);
  --inset-input:
    inset 0 1px 1px rgba(0,0,0,0.45),
    inset 0 0 0 1px rgba(255,255,255,0.015);
  --float:
    0 12px 32px rgba(0,0,0,0.55),
    0 2px 6px rgba(0,0,0,0.45);

  /* ── Button gradient — lifted to sit on the new medium-grey surfaces ────── */
  --btn-grad:    linear-gradient(180deg, #3e4248 0%, #34373c 100%);
  --btn-grad-h:  linear-gradient(180deg, #474b51 0%, #3c4046 100%);
  --btn-grad-a:  linear-gradient(180deg, #2f3236 0%, #26282c 100%);  /* pressed — one step under the body */

  /* ── Timing ───────────────────────────────────────────── */
  --t-fast:  120ms ease;
  --t-base:  150ms ease;
}

/* Render-only text treatment. Never add opacity, inline-block, generated
   content or user-select:none: each would damage contrast or verbatim copy. */
.ss-dead { color: var(--fg-dead); }
.ss-dead-echo {
  margin-top: 6px;
  color: var(--fg);
  font: 400 11.5px/1.45 var(--ui);
  white-space: pre-wrap;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (prefers-contrast: more) {
  .ss-dead { color: var(--fg); }
}
/* No reduced-transparency rule: the treatment deliberately uses no opacity. */

/* ─── Base reset for surfaces using these tokens ──────────── */
.nt-surface,
.nt-app {
  background: var(--bg-app);
  color: var(--fg);
  font-family: var(--ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01" 1, "cv11" 1;
}

.nt-mono { font-family: var(--mono); font-feature-settings: "tnum" 1; }
.nt-tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* ─── Panel ───────────────────────────────────────────────── */
.nt-panel {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  box-shadow: var(--inset-panel);
}

/* ─── Buttons ─────────────────────────────────────────────── */
.nt-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  border-radius: var(--r-btn);
  border: 1px solid var(--line);
  background: var(--btn-grad);
  color: var(--fg);
  font: 500 12px/1 var(--ui);
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.025);
}
.nt-btn:hover  { background: var(--btn-grad-h); border-color: var(--line-strong); }
.nt-btn:active { background: var(--btn-grad-a); }
.nt-btn[disabled] { opacity: .4; cursor: not-allowed; }

.nt-btn.primary {
  border-color: var(--teal-line);
  color: var(--teal);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.03),
    0 0 0 1px transparent,
    0 0 8px var(--teal-glow);
}
.nt-btn.primary:hover {
  border-color: var(--teal);
  color: var(--teal);
}

.nt-btn.ghost {
  background: transparent;
  border-color: transparent;
  color: var(--fg-mute);
  box-shadow: none;
}
.nt-btn.ghost:hover { color: var(--fg); background: var(--bg-row-hover); }

.nt-btn.sm { height: 22px; padding: 0 8px; font-size: 11px; }
.nt-btn.lg { height: 34px; padding: 0 16px; font-size: 13px; }
.nt-btn.icon-only { width: 28px; padding: 0; justify-content: center; }

/* ─── Chips ───────────────────────────────────────────────── */
.nt-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--r-btn);
  border: 1px solid var(--line);
  background: var(--bg-sub);
  color: var(--fg-mute);
  font: 500 11px/1 var(--ui);
  letter-spacing: 0.02em;
  cursor: pointer;
}
.nt-chip.active {
  color: var(--teal);
  border-color: var(--teal-line);
  background: var(--teal-bg);
}
.nt-chip .ct { color: var(--fg-dim); font-family: var(--mono); font-size: 10px; }
.nt-chip.active .ct { color: var(--teal); }
.nt-chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--fg-dim); }

/* ─── Inputs ──────────────────────────────────────────────── */
.nt-input {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 10px;
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  box-shadow: var(--inset-input);
  color: var(--fg);
  font: 400 13px/1 var(--ui);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.nt-input input,
.nt-input textarea {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  color: inherit;
  font: inherit;
}
.nt-input input::placeholder { color: var(--fg-dim); }
.nt-input.focused {
  border-color: var(--teal-line);
  box-shadow:
    inset 0 1px 1px rgba(0,0,0,0.45),
    0 0 0 1px var(--teal-line),
    0 0 12px var(--teal-glow);
}
.nt-input.mono { font-family: var(--mono); font-feature-settings: "tnum" 1; letter-spacing: 0.02em; }

/* ─── Status pills ────────────────────────────────────────── */
.nt-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 18px;
  padding: 0 7px 0 6px;
  border-radius: 9px;
  font: 500 10px/1 var(--ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  color: var(--fg-mute);
  background: var(--bg-sub);
}
.nt-pill .pd { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.nt-pill.open      { color: var(--st-open); }
.nt-pill.resolved  { color: var(--st-resolved); border-color: rgba(122,154,134,0.28); }
.nt-pill.flagged   { color: var(--st-flagged); border-color: rgba(193,147,85,0.32); }
.nt-pill.danger    { color: var(--st-danger);  border-color: rgba(180,104,104,0.32); }

/* ─── Category tags ───────────────────────────────────────── */
.nt-cat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 18px;
  padding: 0 6px;
  border-radius: var(--r-micro);
  font: 600 10px/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--bg-sub);
  border: 1px solid var(--line);
}
.nt-cat .swatch { width: 6px; height: 6px; border-radius: 1px; }
.nt-cat.foley { color: var(--cat-foley); } .nt-cat.foley .swatch { background: var(--cat-foley); }
.nt-cat.fx    { color: var(--cat-fx); }    .nt-cat.fx    .swatch { background: var(--cat-fx); }
.nt-cat.dlg   { color: var(--cat-dlg); }   .nt-cat.dlg   .swatch { background: var(--cat-dlg); }
.nt-cat.mus   { color: var(--cat-mus); }   .nt-cat.mus   .swatch { background: var(--cat-mus); }
.nt-cat.x   { color: var(--cat-x); }   .nt-cat.x   .swatch { background: var(--cat-x); }
.nt-cat.fol { color: var(--cat-fol); } .nt-cat.fol .swatch { background: var(--cat-fol); }
.nt-cat.dx  { color: var(--cat-dx); }  .nt-cat.dx  .swatch { background: var(--cat-dx); }
.nt-cat.mix { color: var(--cat-mix); } .nt-cat.mix .swatch { background: var(--cat-mix); }
.nt-cat.vfx { color: var(--cat-vfx); } .nt-cat.vfx .swatch { background: var(--cat-vfx); }
.nt-cat.bg  { color: var(--cat-bg); }  .nt-cat.bg  .swatch { background: var(--cat-bg); }
.nt-cat.dz  { color: var(--cat-dz); }  .nt-cat.dz  .swatch { background: var(--cat-dz); }
.nt-cat.mx  { color: var(--cat-mx); }  .nt-cat.mx  .swatch { background: var(--cat-mx); }

/* ─── Category left bar (on rows) ─────────────────────────── */
.nt-catbar { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; opacity: 0.9; }
.nt-catbar.foley { background: var(--cat-foley); }
.nt-catbar.fx    { background: var(--cat-fx); }
.nt-catbar.dlg   { background: var(--cat-dlg); }
.nt-catbar.mus   { background: var(--cat-mus); }
.nt-catbar.x   { background: var(--cat-x); }
.nt-catbar.fol { background: var(--cat-fol); }
.nt-catbar.dx  { background: var(--cat-dx); }
.nt-catbar.mix { background: var(--cat-mix); }
.nt-catbar.vfx { background: var(--cat-vfx); }
.nt-catbar.bg  { background: var(--cat-bg); }
.nt-catbar.dz  { background: var(--cat-dz); }
.nt-catbar.mx  { background: var(--cat-mx); }

/* ─── Assignee circle ─────────────────────────────────────── */
.nt-asg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  font: 600 10px/1 var(--ui);
  letter-spacing: 0.02em;
  color: var(--fg-strong);
  border: 1px solid rgba(255,255,255,0.06);
}
.nt-asg.teal  { background: var(--asg-teal);  }
.nt-asg.rose  { background: var(--asg-rose);  }
.nt-asg.amber { background: var(--asg-amber); }
.nt-asg.lilac { background: var(--asg-lilac); }
.nt-asg.sky   { background: var(--asg-sky);   }
.nt-asg.sage  { background: var(--asg-sage);  }
.nt-asg.clay  { background: var(--asg-clay);  }

/* ─── Notification badge ──────────────────────────────────── */
.nt-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 14px; height: 14px;
  padding: 0 4px;
  border-radius: 7px;
  background: var(--st-danger);
  color: #fff;
  font: 700 9px/1 var(--ui);
  letter-spacing: 0.02em;
  border: 1px solid rgba(0,0,0,0.4);
}

/* ─── SFX indicator chip ──────────────────────────────────── */
.nt-sfx {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 20px;
  padding: 0 7px;
  border-radius: var(--r-btn);
  border: 1px solid var(--teal-line);
  background: var(--teal-bg);
  color: var(--teal);
  font: 600 10px/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.nt-sfx::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--teal); box-shadow: 0 0 6px var(--teal-glow);
}

/* ─── Kbd keys ────────────────────────────────────────────── */
.nt-kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  font: 600 10px/1 var(--mono);
  color: var(--fg-mute);
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-bottom-color: var(--line-strong);
  border-radius: var(--r-micro);
}

/* ─── Tooltip ─────────────────────────────────────────────── */
.nt-tip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 9px;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  box-shadow: var(--float);
  color: var(--fg);
  font: 500 11px/1 var(--ui);
}
.nt-tip .nt-kbd { background: var(--bg-deep); }

/* ─── Section labels ──────────────────────────────────────── */
.nt-label {
  font: 500 10px/1 var(--ui);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

/* ─── Divider ─────────────────────────────────────────────── */
.nt-div { height: 1px; background: var(--line); border: 0; margin: 0; }
.nt-div.soft { background: var(--line-soft); }

/* ═══════════════════════════════════════════════════════════════
   Handoff additions — Brief 2 design system
   New variables, classes, and overrides from Claude Design handoff.
   ═══════════════════════════════════════════════════════════════ */

/* ── Additional :root tokens ──────────────────────────────── */
:root {
  /* Assignee alternate palette (handoff) */
  --as-teal:   #4fb3b5;
  --as-rose:   #c47f95;
  --as-amber:  #b88752;
  --as-lilac:  #9080c0;
  --as-sky:    #6695bd;
  --as-sage:   #739683;
  --as-clay:   #b07260;

  /* Extra radii */
  --r-1: 2px;
  --r-2: 3px;
  --r-3: 4px;
  --r-sheet: 8px;
  --r-pill: 999px;          /* fully-round chips, switches (Addendum 5 · C-06) */
  --r-window: 10px;         /* floating window corners (SSPT window) */
  --r-device: 20px;         /* mock device bezel — desktop-scale phone frame */
  --r-device-lg: 40px;      /* mock device bezel — full-size phone frame */
  --r-device-screen: 31px;  /* screen inside the full-size bezel */

  /* Status background fills */
  --st-resolved-bg: rgba(122,154,134,0.10);
  --st-flagged-bg:  rgba(193,147,85,0.10);
  --st-danger-bg:   rgba(180,104,104,0.10);

  /* Ink/surface pairs off the accent + mock-chrome surfaces (Addendum 5 · C-06) */
  --on-teal: #08211f;        /* text/glyphs printed ON a teal fill */
  --bg-video: #0c0d0f;       /* video bed */
  --bg-letterbox: #060708;   /* letterbox bars */
  --bezel: #101214;          /* mock device bezel fill */
  --bezel-line: #2b2e33;     /* mock device bezel inner line */
  --mark-grad: linear-gradient(150deg, #2a2d33, #1a1c20);       /* SS mark tile */
  --titlebar-grad: linear-gradient(180deg, #34373d, #2c2f34);   /* window titlebar */
}

/* ── Assignee circles (handoff style) ─────────────────────── */
.nt-as {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-family: var(--ui);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(0,0,0,0.65);
  user-select: none;
  flex-shrink: 0;
}
.nt-as.sm { width: 18px; height: 18px; font-size: 8px; }
.nt-as.lg { width: 28px; height: 28px; font-size: 10px; }
.nt-as.teal  { background: var(--as-teal); }
.nt-as.rose  { background: var(--as-rose); }
.nt-as.amber { background: var(--as-amber); }
.nt-as.lilac { background: var(--as-lilac); }
.nt-as.sky   { background: var(--as-sky); }
.nt-as.sage  { background: var(--as-sage); }
.nt-as.clay  { background: var(--as-clay); }

/* ── Tab bar (handoff style) ──────────────────────────────── */
.nt-tabs {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--line);
  background: var(--bg-app);
  padding: 0 16px;
  gap: 4px;
}
.nt-tabs .tab {
  padding: 0 14px;
  height: 36px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--fg-mute);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s;
  user-select: none;
}
.nt-tabs .tab:hover { color: var(--fg); }
.nt-tabs .tab.active {
  color: var(--fg-strong);
  border-bottom-color: var(--teal);
}

/* ── Top bar ──────────────────────────────────────────────── */
.nt-topbar {
  height: 44px;
  background: var(--bg-app);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 12px;
}

/* ── SS monogram mark ─────────────────────────────────────── */
.nt-mark {
  width: 26px; height: 26px;
  border-radius: var(--r-2);
  background: linear-gradient(150deg, #2a2d33 0%, #1a1c20 100%);
  border: 1px solid var(--line-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--fg-strong);
  letter-spacing: -0.02em;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.nt-mark::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(140deg, rgba(53,197,199,0.10) 0%, transparent 60%);
  pointer-events: none;
}
.nt-mark.lg { width: 40px; height: 40px; font-size: 13px; border-radius: var(--r-3); }

/* ── Wordmark ─────────────────────────────────────────────── */
.nt-wordmark {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg);
}

/* ── Icon button (handoff) ────────────────────────────────── */
.nt-iconbtn {
  width: 30px; height: 30px;
  border-radius: var(--r-2);
  border: 1px solid transparent;
  background: transparent;
  color: var(--fg-mute);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: background 0.15s, color 0.15s;
}
.nt-iconbtn:hover { background: var(--bg-sub); color: var(--fg); }

/* ── Auth backdrop ────────────────────────────────────────── */
.nt-auth-bg {
  background: var(--bg-deep);
  position: relative;
}
.nt-auth-bg::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 50% 30%, rgba(53,197,199,0.05), transparent 70%);
  pointer-events: none;
}

/* ── Horizontal rule ──────────────────────────────────────── */
.nt-hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0;
}

/* ── Custom scrollbar ─────────────────────────────────────── */
.nt-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.nt-scroll::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 4px; }
.nt-scroll::-webkit-scrollbar-track { background: transparent; }

/* ── Category accent bar (row left edge) ──────────────────── */
.nt-rowbar {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  opacity: 0.9;
  background: var(--cat-foley);
}
.nt-rowbar.foley { background: var(--cat-foley); }
.nt-rowbar.fx    { background: var(--cat-fx); }
.nt-rowbar.dlg   { background: var(--cat-dlg); }
.nt-rowbar.mus   { background: var(--cat-mus); }
.nt-rowbar.x   { background: var(--cat-x); }
.nt-rowbar.fol { background: var(--cat-fol); }
.nt-rowbar.dx  { background: var(--cat-dx); }
.nt-rowbar.mix { background: var(--cat-mix); }
.nt-rowbar.vfx { background: var(--cat-vfx); }
.nt-rowbar.bg  { background: var(--cat-bg); }
.nt-rowbar.dz  { background: var(--cat-dz); }
.nt-rowbar.mx  { background: var(--cat-mx); }

/* ── Button extensions ────────────────────────────────────── */
.nt-btn.danger {
  border-color: rgba(180,104,104,0.4);
  color: var(--st-danger);
}
.nt-btn.danger:hover {
  background: var(--st-danger-bg);
}
.nt-btn.full { width: 100%; justify-content: center; }

/* ── Input lg variant ─────────────────────────────────────── */
.nt-input.lg { height: 38px; font-size: 14px; padding: 10px 12px; }

/* ── Headings reset ───────────────────────────────────────── */
h1, h2, h3, h4 {
  margin: 0;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--fg-strong);
}

/* ── Selection ────────────────────────────────────────────── */
::selection { background: var(--teal-line); color: var(--fg-strong); }

/* ── Mono helpers ─────────────────────────────────────────── */
.mono, .num, .tc {
  font-family: var(--mono);
  font-feature-settings: "tnum" 1, "zero" 1;
}

/* ═══════════════════════════════════════════════════════════════
   MODAL · FIELD · SELECT SYSTEM  (Project System — DH#199)
   Canonical chrome for every dialog + form control. Additive only —
   reuses existing .nt-input / .nt-label / .nt-btn / .nt-iconbtn / .nt-scroll
   and the existing tokens; nothing above is changed. Adopt these classes;
   don't re-roll the shell.
   ═══════════════════════════════════════════════════════════════ */

/* ---- Modal chrome -------------------------------------------------------- */
/* Backdrop kept FIXED (full-viewport dim) to match the live modals' behavior;
   the app fills the viewport so this reads identically to the brief's scoped
   variant. 65% scrim + blur(2px). */
.nt-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(8,10,12,0.65);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.nt-modal-backdrop.animate-in { animation: nt-modal-in 0.16s ease-out; }
@keyframes nt-modal-in { from { opacity: 0; } to { opacity: 1; } }

.nt-modal {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--r-sheet);          /* 8px — the canonical sheet radius */
  box-shadow: var(--float);
  display: flex;
  flex-direction: column;
  max-height: 88%;
  width: 460px;                            /* default; override inline per modal */
  max-width: calc(100vw - 32px);
  overflow: hidden;
}
.nt-modal-head {
  flex-shrink: 0;
  padding: 15px 18px 14px;
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.nt-modal-titles { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.nt-modal-title {
  font-family: var(--ui);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--fg-strong);
  letter-spacing: -0.005em;
}
.nt-modal-body {
  flex: 1;
  overflow: auto;
  padding: 18px;
}
.nt-modal-foot {
  flex-shrink: 0;
  padding: 12px 18px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

/* ---- Field (label + control + hint/error) -------------------------------- */
.nt-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}
.nt-field > .nt-label { font-size: 10px; letter-spacing: .16em; color: var(--fg-dim); }

.nt-hint {
  font-family: var(--ui);
  font-size: 11px;
  line-height: 1.45;
  color: var(--fg-dim);
}
.nt-hint code, .nt-hint .tok {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--fg-mute);
}
.tok { font-family: var(--mono); color: var(--fg-mute); }

/* invalid input state — muted danger, never an alarm */
.nt-input.invalid {
  border-color: rgba(180,104,104,0.55);
}
.nt-input.invalid.focused,
.nt-input.invalid:focus,
.nt-input.invalid:focus-within {
  border-color: var(--st-danger);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.45), 0 0 0 3px var(--st-danger-bg);
}

/* ---- Inline error chip --------------------------------------------------- */
.nt-error {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--ui);
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--st-danger);
}
.nt-error-mk {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid currentColor;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  line-height: 1;
}

/* ---- Select (faux native select — the one true dropdown control) --------- */
.nt-select {
  font-family: var(--ui);
  font-size: 13px;
  color: var(--fg);
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  height: 32px;
  width: 100%;
  padding: 0 8px 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.45);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.nt-select:hover { border-color: var(--line-strong); }
.nt-select:focus, .nt-select.open {
  border-color: var(--teal-line);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.45), 0 0 0 3px var(--teal-glow);
}
.nt-select > span:first-child {
  flex: 1 1 auto;
  text-align: left;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nt-select .nt-select-chev { color: var(--fg-dim); display: inline-flex; flex-shrink: 0; }
.nt-select.lg { height: 38px; font-size: 14px; padding: 0 10px 0 12px; }
.nt-select.mono { font-family: var(--mono); }
.nt-select[disabled] { color: var(--fg-faint); cursor: not-allowed; }

/* Select menu (when open) */
.nt-select-menu {
  position: absolute;
  z-index: 320;
  margin-top: 4px;
  min-width: 100%;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  box-shadow: var(--float);
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.nt-select-opt {
  font-family: var(--ui);
  font-size: 13px;
  color: var(--fg);
  padding: 7px 10px;
  border-radius: var(--r-micro);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.nt-select-opt:hover { background: var(--bg-row-hover); }
.nt-select-opt.sel { background: var(--bg-row-sel); color: var(--fg-strong); }
.nt-select-opt .nt-select-tick { color: var(--teal); display: inline-flex; }

/* =========================================================================
   BROWSER DENSITY STANDARD  (define once — every browser page adopts it)
   Codifies the shipped SFX-window + Elite Cue Room density as one scale so
   the other browser pages stop drifting "web-app big". The reference reads
   like Avid Pro Tools / Soundminer: dense but breathable, hairline
   separators, 0–2px radii, mono tabular numerics, timecodes on PT's muted
   green counter, small type, and teal reserved for meaning only.

   HOW TO ADOPT
   - New page: build rows with `.d-row` (+ `.tight`/`.lg`), section headers
     with `.d-grouprow`, labels with `.d-label`, numbers with `.d-num`,
     timecodes with `.d-tc`. That's the whole floor — inherit and don't drift.
   - Existing page CSS: point your own row/type rules at the tokens below
     (e.g. `min-height: var(--d-row); font-size: var(--t-num)`) instead of
     hand-picked px, so a future scale change moves every page together.
   - Radii cap at `--r-2` (3px); numerics are ALWAYS mono + tnum; every
     separator is a 1px `--line-soft` hairline. No glow, no big cards.
   (DH #520 — carried in verbatim from the design bundle tokens.css.)
   ========================================================================= */
:root {
  /* Row heights ------------------------------------------------------------ */
  --d-row:        30px;   /* canonical multi-column list / table row          */
  --d-row-lg:     34px;   /* roomier row (waveform / sparkline present)        */
  --d-row-tight:  26px;   /* dense single-line rail row (Elite rail, palette)  */
  --d-grouprow:   22px;   /* group / section-label row                         */

  /* Chrome bars ------------------------------------------------------------ */
  --d-chrome:     34px;   /* floating-window title bar                         */
  --d-toolbar:    38px;   /* tab bar / toolbar strip                           */

  /* Controls --------------------------------------------------------------- */
  --d-ctl:        26px;   /* button / input / segmented control                */
  --d-ctl-sm:     22px;   /* small control (sort chip, sub-control)            */
  --d-chip:       18px;   /* chip / pill / tag                                 */

  /* Row rhythm ------------------------------------------------------------- */
  --d-pad-x:      12px;   /* row horizontal padding                            */
  --d-pad-y:      6px;    /* row vertical padding (with min-height rows)        */
  --d-gap:        9px;    /* intra-row gap                                     */

  /* Type scale — dense, professional-tool (8 – 14px) ---------------------- */
  --t-micro:      7.5px;  /* micro labels / burn-in slugs                      */
  --t-label:      8.5px;  /* mono section labels (uppercase, .16em)            */
  --t-num:        9.5px;  /* mono numerics · inline TC · CatID                 */
  --t-row:        11px;   /* row primary text (UI font)                        */
  --t-chip:       10.5px; /* chip / tag text                                   */
  --t-body:       11.5px; /* body · hint · control text                        */
  --t-tc-lg:      13px;   /* transport / dock big timecode                     */
  --t-h:          14px;   /* panel / section heading                           */
}

/* ---- Row primitives ------------------------------------------------------ */
.d-row {
  display: flex; align-items: center; gap: var(--d-gap);
  min-height: var(--d-row); padding: 0 var(--d-pad-x);
  border-bottom: 1px solid var(--line-soft);
}
.d-row.tight { min-height: var(--d-row-tight); }
.d-row.lg    { min-height: var(--d-row-lg); }

.d-grouprow {
  display: flex; align-items: center; gap: var(--d-gap);
  height: var(--d-grouprow); padding: 0 var(--d-pad-x);
  font-family: var(--mono); font-size: var(--t-label);
  letter-spacing: .16em; text-transform: uppercase; color: var(--fg-dim);
}

/* ---- Chrome bars --------------------------------------------------------- */
.d-chrome  { display: flex; align-items: center; height: var(--d-chrome);  flex-shrink: 0; }
.d-toolbar { display: flex; align-items: center; height: var(--d-toolbar); flex-shrink: 0; }

/* ---- Labels + numerics --------------------------------------------------- */
.d-label {
  font-family: var(--mono); font-size: var(--t-label);
  letter-spacing: .16em; text-transform: uppercase; color: var(--fg-dim);
}
/* the mono-numeric rule — every number / code is mono + tabular */
.d-num {
  font-family: var(--mono); font-size: var(--t-num);
  font-feature-settings: "tnum" 1, "zero" 1; letter-spacing: .02em;
}
/* timecodes ride PT's muted green counter */
.d-tc {
  font-family: var(--mono); font-size: var(--t-num);
  font-feature-settings: "tnum" 1, "zero" 1; letter-spacing: .02em;
  color: var(--tc-green);
}
.d-tc.lg { font-size: var(--t-tc-lg); letter-spacing: .05em; }

/* ---- Hairline separator -------------------------------------------------- */
.d-hair { border: 0; border-top: 1px solid var(--line-soft); margin: 0; }