@charset "UTF-8";
/* ============================================================
   StageQueue — Marquee component styles
   Layer 2 of 3 (claude/responsive-layout-spec.md §2.2):
     1. /design-tokens.css      tokens only (colours, type, spacing, breakpoints)
     2. /components/marquee.css every component's classes, one section each
     3. each page's own <style> page-only layout and page-level breakpoints
   Every app page links design-tokens.css, then this file, then its <style>.

   The rule (CLAUDE.md, "Styling"): anything that is the same for every
   instance of a component lives here — layout, paint and states (:hover
   inside @media (hover: hover), :focus-visible, :disabled, [aria-*],
   [data-state]). Inline styles carry only genuinely per-instance values,
   passed as custom properties (style="--sq-row-accent: var(--ok)").

   Conventions (set in Slice 0b-1; 0b-2 to 0b-7 copy them):
   - Names: blocks .sq-<component>, elements .sq-<component>__<part>,
     modifiers .sq-<component>--<variant>. State is never a modifier
     class: it is data-state="…", data-invalid or an ARIA attribute
     (aria-checked, aria-pressed, aria-expanded), set by JS, read here.
   - One section per component, headed "---- Name ----" like the token
     file, in the order the components were migrated.
   - Semantic tokens (--surface, --text, --accent, --button-primary), so
     .theme-light / .theme-ops keep working. A few primitives still use
     the ramp values they used inline before 0b-1 (badge's neutral dot,
     the avatar tile, the switch's off track and knob); they move to
     semantic tokens in a later slice, because 0b changes nothing visible.
   - Per-instance values are custom properties set by the component
     (--sq-logo-size) or by a modifier (--sq-avatar-size), never inline
     paint. Every value keeps the unit applyStyle() gave it (a bare
     number became px, except the unit-less list in _shared.js).
   - Hover and press effects only inside @media (hover: hover), so touch
     devices never get a sticky hover state (spec §4.6).
   - Every createX() takes an optional className, appended to its own
     classes. Its `style` prop still works: inline styles beat these
     classes, as they beat the old inline base; moving callers' overrides
     into page classes is each page's own 0b slice.
   - Shown/hidden is the `hidden` attribute. A class that sets `display`
     beats the browser's own [hidden] rule, so it needs its own
     `.x[hidden] { display: none; }` (sq-button, sq-input__clear, …).

   Overlays (0b-2): sq-dialog and sq-sheet keep each overlay's dismissal
   from before 0b-2 — Escape and the backdrop are options in dialog.js and
   bottom-sheet.js (overlay-dismiss.js), not CSS — until O-1 is decided.
   z-index is never a new scale: dialogs and sheets 1000 (1001 raised),
   popovers 20–60, the toast 100.

   Lint: token-lint rules 1, 2, 4 and 5 apply here. Rule 3 (spacing scale)
   doesn't: like the rest of public/components/**, these are the library's
   own canonical values.
   ============================================================ */

/* ---- Base ----
   Every app page's boilerplate (0b-2). The pages keep only what differs:
   TV and TV preview set html/body's --bg-sunken; each page keeps its own
   link rule (two different ones: `a { color: var(--accent) }` on the
   audience, Backstage and sign-in pages, `a { color: inherit; … }` on
   Tenant Admin and Super Admin), its `input, textarea, button` font rule
   (some pages render bare buttons without it) and, on seven pages, its
   `#app` flex column (the other eleven lay #app out as a block). */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  color: var(--text);
  font-family: var(--font-body);
  background: var(--bg-base);
  min-height: 100vh;
}

/* ============================================================
   PRIMITIVES (Slice 0b-1)
   ============================================================ */

/* ---- Button (button.js) ----
   Sizes: sm 36 · md 44 · lg 56 · xl 78 (the API's size "go"; the class
   can't be --go, which is the green GO variant). */
.sq-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  letter-spacing: 0.01em;
  text-transform: none;
  opacity: 1;
  transition: transform var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out);
}
.sq-button--full { width: 100%; }

.sq-button--sm { height: 36px; min-width: 36px; padding: 0 14px; border-radius: var(--r-sm); font-size: 13px; }
.sq-button--md { height: 44px; min-width: 44px; padding: 0 18px; border-radius: var(--r-md); font-size: 15px; }
.sq-button--lg { height: 56px; min-width: 56px; padding: 0 24px; border-radius: var(--r-lg); font-size: 17px; }
.sq-button--xl { height: 78px; min-width: 78px; padding: 0 34px; border-radius: var(--r-lg); font-size: 30px; }

.sq-button--primary { background: var(--button-primary); color: var(--button-primary-fg); box-shadow: var(--glow-amber-soft); font-weight: 700; }
.sq-button--secondary { background: var(--surface-2); color: var(--text); box-shadow: var(--ring-soft); font-weight: 600; }
.sq-button--ghost { background: transparent; color: var(--text-muted); box-shadow: inset 0 0 0 1px var(--border); font-weight: 600; }
.sq-button--live { background: var(--signal); color: var(--white); box-shadow: var(--glow-live); font-weight: 700; }
.sq-button--go {
  background: linear-gradient(178deg, var(--ok-bright), var(--ok-deep));
  color: var(--text-on-amber);
  box-shadow: var(--glow-ok);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sq-button:disabled { cursor: not-allowed; opacity: 0.45; }
.sq-button[hidden] { display: none; }

@media (hover: hover) {
  .sq-button:not(:disabled):hover { filter: brightness(1.05); }
  .sq-button:not(:disabled):active { transform: scale(0.97); }
}

/* ---- Badge (badge.js) ----
   Each tone sets --sq-badge-fg / -bg / -dot; solid swaps fg onto the fill. */
.sq-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 9px;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sq-badge-fg);
  background: var(--sq-badge-bg);
}
.sq-badge--neutral { --sq-badge-fg: var(--text-muted); --sq-badge-bg: var(--surface-2); --sq-badge-dot: var(--ink-300); }
.sq-badge--live { --sq-badge-fg: var(--live); --sq-badge-bg: rgba(255,74,61,.14); --sq-badge-dot: var(--live); }
.sq-badge--ok { --sq-badge-fg: var(--ok); --sq-badge-bg: rgba(127,185,122,.16); --sq-badge-dot: var(--ok); }
.sq-badge--wait,
.sq-badge--amber { --sq-badge-fg: var(--amber); --sq-badge-bg: var(--accent-quiet); --sq-badge-dot: var(--amber); }
.sq-badge--solid { color: var(--text-on-amber); background: var(--sq-badge-fg); }

.sq-badge__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sq-badge-dot);
  box-shadow: none;
  animation: none;
}
.sq-badge--solid .sq-badge__dot { background: var(--text-on-amber); }
.sq-badge--live .sq-badge__dot { box-shadow: var(--glow-live); animation: sq-pulse 1.6s var(--ease-in-out) infinite; }
.sq-badge--live.sq-badge--solid .sq-badge__dot { box-shadow: none; }

/* ---- Tag (tag.js) ----
   Selected is aria-pressed="true". */
.sq-tag {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-muted);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--border);
  transition: all var(--dur-fast) var(--ease-out);
}
.sq-tag[aria-pressed="true"] { color: var(--text-on-amber); background: var(--accent); box-shadow: none; }

/* ---- Avatar (avatar.js) ----
   Each size sets --sq-avatar-size (xs 28 · sm 32 · md 44 · lg 60); the
   initials are 0.4 of it. */
.sq-avatar {
  position: relative;
  width: var(--sq-avatar-size);
  height: var(--sq-avatar-size);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, var(--ink-600), var(--ink-700));
  box-shadow: var(--ring-soft);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: calc(var(--sq-avatar-size) * 0.4);
  color: var(--text-muted);
  flex-shrink: 0;
}
.sq-avatar--xs { --sq-avatar-size: 28px; }
.sq-avatar--sm { --sq-avatar-size: 32px; }
.sq-avatar--md { --sq-avatar-size: 44px; }
.sq-avatar--lg { --sq-avatar-size: 60px; }
.sq-avatar--round { border-radius: 50%; }
.sq-avatar--live { box-shadow: var(--glow-amber-soft), var(--ring-amber); color: var(--amber); }

/* ---- Input (input.js) ----
   Focus ring: :focus-within on the box. Invalid: data-invalid on the wrap;
   the focus ring still wins while the field has focus (as before 0b-1). */
.sq-input { display: flex; flex-direction: column; gap: 7px; }
.sq-input--full { width: 100%; }

.sq-input__label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.sq-input__box {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 14px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--border);
  transition: box-shadow var(--dur-fast) var(--ease-out);
}
.sq-input[data-invalid] .sq-input__box { box-shadow: inset 0 0 0 1.5px var(--danger); }
.sq-input .sq-input__box:focus-within { box-shadow: inset 0 0 0 1.5px var(--focus-ring); }

.sq-input__prefix { font-family: var(--font-mono); font-size: 13px; color: var(--text-faint); }

.sq-input__field {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text);
}

.sq-input__clear {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-faint);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.sq-input__clear[hidden] { display: none; }

/* ---- Select (select-style.js) ----
   A native <select> with the browser's arrow off and a small one drawn
   from the tokens, inset from the edge. Same look as the selectArrowStyle
   export, which pages use until their own 0b slice moves them here. */
.sq-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 38px;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - 21px) 50%, calc(100% - 16px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

/* ---- Textarea ----
   Class only in 0b-1; Settings → Branding's look (the closest to
   sq-input). Its three creators adopt it in their own slices (0b-2:
   messaging drawer; 0b-6: Branding, Songbook), with any differences as
   page overrides. */
.sq-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border-radius: var(--r-md);
  border: none;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--border);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  resize: vertical;
}

/* ---- Switch (switch.js) ----
   On/off is data-state on the wrap; the tooltip is data-state="open" on
   the tip. role="switch", the whole-row hit area and tap-not-hover for
   the tooltip are Slice 1. */
.sq-switch { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; }
.sq-switch--has-tip { position: relative; }

.sq-switch__track {
  position: relative;
  width: 48px;
  height: 28px;
  border-radius: var(--r-pill);
  background: var(--ink-600);
  box-shadow: inset 0 0 0 1px var(--border);
  transition: background var(--dur-base) var(--ease-out);
  flex-shrink: 0;
}
.sq-switch[data-state="on"] > .sq-switch__track { background: var(--accent); box-shadow: var(--glow-amber-soft); }

.sq-switch__knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--cream-100);
  transition: left var(--dur-base) var(--ease-out);
  box-shadow: var(--shadow-sm);
}
.sq-switch[data-state="on"] > .sq-switch__track > .sq-switch__knob { left: 23px; background: var(--text-on-amber); }

.sq-switch__label-row { display: flex; align-items: center; gap: 7px; }
.sq-switch__label { display: block; font-family: var(--font-body); font-size: 14px; color: var(--text); }

.sq-switch__badge {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--border);
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sq-switch__tip {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 30;
  width: 320px;
  padding: 13px 15px;
  border-radius: var(--r-md);
  background: var(--bg-panel);
  box-shadow: var(--shadow-pop), inset 0 0 0 1px var(--accent-quiet);
  font-family: var(--font-body);
  font-size: 13px;
  line-height: var(--lh-normal);
  color: var(--text);
  pointer-events: none;
  display: none;
}
.sq-switch__tip[data-state="open"] { display: block; }

.sq-switch__status {
  display: block;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  color: var(--text-faint);
  margin-top: 0;
  text-transform: uppercase;
}
.sq-switch__label-row + .sq-switch__status { margin-top: 3px; }

/* ---- Segmented control (segmented-control.js) ----
   The selected option is aria-checked="true" (role="radio"). */
.sq-segmented {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--border);
}

.sq-segmented__option {
  all: unset;
  flex: 1;
  min-height: 44px;
  padding: 8px 10px;
  box-sizing: border-box;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.25;
  cursor: pointer;
  font-weight: 600;
  background: transparent;
  color: var(--text-muted);
}
.sq-segmented__option[aria-checked="true"] { font-weight: 700; background: var(--accent); color: var(--text-on-amber); }

/* ---- Info tip (info-tip.js) ----
   Open is data-state="open" on the tip; opening and closing stay in JS. */
.sq-info-tip { position: relative; display: inline-flex; align-items: center; }

.sq-info-tip__badge {
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--border);
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

.sq-info-tip__tip {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 40;
  width: 280px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--bg-panel);
  box-shadow: var(--shadow-pop), inset 0 0 0 1px var(--accent-quiet);
  font-family: var(--font-body);
  font-size: 13px;
  line-height: var(--lh-normal);
  color: var(--text);
  text-transform: none;
  letter-spacing: normal;
  white-space: normal;
  display: none;
  flex-direction: column;
  gap: 8px;
}
.sq-info-tip__tip--left { right: auto; left: 0; }
.sq-info-tip__tip[data-state="open"] { display: flex; }

.sq-info-tip__link { color: var(--accent); font-weight: 600; text-decoration: underline; }

/* ---- Logo (logo.js) ----
   --sq-logo-size (the icon's edge, set inline by the component) drives
   everything: the SQ at 0.48×, the wordmark at 0.72×, the gap at 0.32×. */
.sq-logo--full { display: inline-flex; align-items: center; gap: calc(var(--sq-logo-size) * 0.32); }
.sq-logo--icon { display: inline-flex; }

.sq-logo__icon {
  position: relative;
  width: var(--sq-logo-size);
  height: var(--sq-logo-size);
  border-radius: 23%;
  flex-shrink: 0;
  background: radial-gradient(125% 125% at 50% -12%, var(--logo-curtain) 0%, var(--text-on-amber) 70%);
  box-shadow: var(--ring-amber), var(--shadow-sm);
  display: inline-block;
  overflow: hidden;
}

.sq-logo__bulbs { position: absolute; top: 19%; left: 0; right: 0; display: flex; justify-content: center; gap: 8%; }
.sq-logo__bulb {
  width: 5%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%,var(--white),var(--amber) 70%);
  box-shadow: 0 0 5px rgba(255,178,62,.9);
}

.sq-logo__square {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 9%;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: calc(var(--sq-logo-size) * 0.48);
  letter-spacing: -0.04em;
  line-height: 1;
  color: transparent;
  background: linear-gradient(178deg,var(--logo-highlight),var(--amber) 46%,var(--amber-deep));
  -webkit-background-clip: text;
  background-clip: text;
}

.sq-logo__wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: calc(var(--sq-logo-size) * 0.72);
  letter-spacing: -0.02em;
  line-height: 0.9;
}
.sq-logo__stage { color: var(--text); }
.sq-logo__queue { color: var(--accent); }

.sq-logo--mono .sq-logo__icon { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.sq-logo--mono .sq-logo__bulb { background: currentColor; box-shadow: none; }
.sq-logo--mono .sq-logo__square {
  color: currentColor;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
}
.sq-logo--mono .sq-logo__stage,
.sq-logo--mono .sq-logo__queue { color: currentColor; }

/* ---- Zone label (zone-label.js) ---- */
.sq-zone-label { display: inline-flex; align-items: center; gap: 8px; height: 48px; flex-shrink: 0; }
.sq-zone-label__abbr {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  min-width: 32px;
}

/* ---- Save status (save-status.js → showThenFade) ----
   hidden → shown: a 150ms fade-in; shown → gone: --sq-save-status-fade
   (fadeMs, default 500ms). */
.sq-save-status { transition: opacity 150ms ease-out; }
.sq-save-status[data-state="hidden"] { opacity: 0; }
.sq-save-status[data-state="gone"] { opacity: 0; transition: opacity var(--sq-save-status-fade, 500ms) ease-out; }

/* ============================================================
   OVERLAYS AND SHELLS (Slice 0b-2)
   ============================================================ */

/* ---- Dialog (dialog.js) ----
   The backdrop and a centred card. Width is --sq-dialog-width (set per
   instance); the ring modifiers set --sq-dialog-ring, the card's 1px inset
   accent, each the rgba its modal used before 0b-2. --raised is 1001, for
   a dialog opened on top of another; dialogs are otherwise 1000 (menus and
   popovers are 20–60, the toast 100). Escape and backdrop dismissal are
   per-instance options in dialog.js, not CSS.
   Tenant Admin's own overlays (0b-6b, 0b-6c) use a lighter, theme-light
   backdrop, rgba(20,24,29,.55): they'll need a backdrop modifier here. */
.sq-dialog {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(11,4,5,.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-5);
}
.sq-dialog--raised { z-index: 1001; }

.sq-dialog__panel {
  position: relative;
  width: min(var(--sq-dialog-width, 560px), 100%);
  background: var(--ink-800);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-pop), inset 0 0 0 1px var(--sq-dialog-ring, transparent);
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--sq-dialog-gap, var(--s-4));
}
.sq-dialog--ring-amber { --sq-dialog-ring: rgba(255,178,62,.35); }
.sq-dialog--ring-amber-soft { --sq-dialog-ring: rgba(255,178,62,.18); }
.sq-dialog--ring-gold { --sq-dialog-ring: rgba(232,168,49,.35); }
.sq-dialog--ring-signal { --sq-dialog-ring: rgba(214,69,44,.35); }
.sq-dialog--ring-ok { --sq-dialog-ring: rgba(127,185,122,.35); }
.sq-dialog--scroll .sq-dialog__panel { max-height: min(560px, 100%); overflow-y: auto; }

/* The lighter, tighter card (Backstage's forScore flag prompt). */
.sq-dialog--surface .sq-dialog__panel {
  padding: var(--s-5);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--border);
}

/* The ✕ in the card's corner (was backstage.js's modalCloseButton). */
.sq-dialog__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--border);
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- Sheet (bottom-sheet.js) ----
   The backdrop and a panel docked to the bottom edge. The same behaviour as
   the dialog (spec §4.4), presented as a drawer; a backdrop click closes it
   by default, Escape doesn't. The header and padded body are
   createBottomSheet's; songbook-picker.js fills the panel itself. */
.sq-sheet {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(15,7,8,0.72);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.sq-sheet__panel {
  width: 100%;
  max-width: 520px;
  max-height: 88vh;
  background: var(--bg-panel);
  color: var(--text);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--shadow-pop);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: var(--font-body);
}

.sq-sheet__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 20px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.sq-sheet__heading { display: flex; flex-direction: column; gap: 4px; }
.sq-sheet__eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-faint);
}
.sq-sheet__title { font-family: var(--font-display); font-weight: 800; font-size: 24px; }
.sq-sheet__count { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); margin-top: 6px; }
.sq-sheet__close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
}

.sq-sheet__body { padding: 20px; overflow-y: auto; min-height: 0; }

/* ---- Messaging drawer (messaging-drawer.js) ----
   The audience's message-the-host sheet. Its textarea is a bare field in an
   input-style box (not .sq-textarea's look), at 15px (audit A-1: the
   unit-less size used to be dropped, leaving the browser's 11px). The box's
   focus ring is :focus-within, as sq-input's is. */
.sq-message-drawer__body { display: flex; flex-direction: column; gap: var(--s-4); }

.sq-message-drawer__field { display: flex; flex-direction: column; gap: 7px; width: 100%; }
.sq-message-drawer__label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.sq-message-drawer__box {
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--border);
  transition: box-shadow var(--dur-fast) var(--ease-out);
}
.sq-message-drawer__box:focus-within { box-shadow: inset 0 0 0 1.5px var(--focus-ring); }
.sq-message-drawer__textarea {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  resize: vertical;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text);
}

.sq-message-drawer__error { color: var(--danger); font-size: var(--t-body-sm); }

.sq-message-drawer__sent-eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; color: var(--ok); }
.sq-message-drawer__sent-text { font-size: 15px; color: var(--text-muted); line-height: 1.5; margin-top: 8px; }
.sq-message-drawer__done { margin-top: 16px; }

/* ---- Move menu (backstage.js → moveMenu) ----
   Backstage's ⇅ popover on the Now performing card. Its own section, not a
   shared sq-menu: its panel and items differ from the user menu's (no
   shadow, ink-800, tighter rows, z-index 20 vs 60). Open is data-state on
   the panel, aria-expanded on the trigger. */
.sq-move-menu { position: relative; flex-shrink: 0; }

.sq-move-menu__trigger {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--border);
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.sq-move-menu__panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 20;
  width: 192px;
  padding: 6px;
  border-radius: var(--r-md);
  background: var(--ink-800);
  display: none;
  flex-direction: column;
  gap: 2px;
}
.sq-move-menu__panel[data-state="open"] { display: flex; }

.sq-move-menu__item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  border: none;
  background: transparent;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.sq-move-menu__item--danger { color: var(--signal-bright); }

@media (hover: hover) {
  .sq-move-menu__trigger:hover { color: var(--text); }
  .sq-move-menu__item:hover { background: var(--ink-600); }
}

/* ---- User menu (user-menu.js) ----
   Tenant Admin, Super Admin and Backstage. --sq-user-menu-color (the
   trigger's text, set by the bar it sits on) and --sq-user-menu-name-max
   (where the closed name truncates) are per instance. Open is aria-expanded
   on the trigger and data-state on the panel; an item lights on :hover
   (hover devices only) and on :focus (the arrow keys move focus). */
.sq-user-menu { position: relative; display: inline-flex; flex-shrink: 0; }

.sq-user-menu__trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 4px 8px 4px 4px;
  border: none;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--sq-user-menu-color, var(--text-muted));
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}
.sq-user-menu__slot { display: inline-flex; }
.sq-user-menu__name {
  max-width: var(--sq-user-menu-name-max, 160px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sq-user-menu__chevron { flex-shrink: 0; transition: transform 120ms ease; }
.sq-user-menu__trigger[aria-expanded="true"] .sq-user-menu__chevron { transform: rotate(180deg); }

/* Gold initials (Simon, 2026-10-04), without the live glow. Two classes, so
   it beats .sq-avatar's own colour whatever the order. */
.sq-user-menu .sq-user-menu__avatar { color: var(--amber); }

.sq-user-menu__panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 60;
  min-width: 240px;
  max-width: 320px;
  padding: 6px 0;
  border-radius: var(--r-md);
  background: var(--bg-panel);
  box-shadow: var(--shadow-pop), inset 0 0 0 1px var(--border);
  font-family: var(--font-body);
  color: var(--text);
  text-align: left;
  display: none;
  flex-direction: column;
}
.sq-user-menu__panel--left { right: auto; left: 0; }
.sq-user-menu__panel[data-state="open"] { display: flex; }

.sq-user-menu__head { display: flex; align-items: center; gap: 10px; padding: 8px 14px 10px; }
.sq-user-menu__head-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sq-user-menu__head-name { font-size: 14px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sq-user-menu__head-email { font-size: 12.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sq-user-menu__divider { height: 1px; background: var(--border); margin: 2px 0 6px; }

.sq-user-menu__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 40px;
  padding: 0 14px;
  border: none;
  background: transparent;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.sq-user-menu__item[aria-disabled="true"] { color: var(--text-faint); cursor: default; }
.sq-user-menu__item:not([aria-disabled="true"]):focus { background: var(--nav-active-bg); }
@media (hover: hover) {
  .sq-user-menu__item:not([aria-disabled="true"]):hover { background: var(--nav-active-bg); }
}

.sq-user-menu__tag {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  border-radius: var(--r-sm);
  box-shadow: inset 0 0 0 1px var(--border);
  color: var(--text-faint);
}

/* ---- App bar (app-bar.js) ----
   The audience pages' header. The pill's tones set --sq-pill-bg / -ring /
   -fg / -dot / -glow / -anim, ported 1:1 from AppBar.dc.html. The home link
   is the framed 36 × 36 button the design always meant (audit A-2; 44 × 44
   under a coarse pointer is Slice 1). */
.sq-app-bar {
  padding: 18px 18px 14px;
  display: flex;
  align-items: center;
  gap: 11px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--ink-800), var(--ink-850));
  flex-shrink: 0;
}

.sq-app-bar__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-md);
  box-shadow: inset 0 0 0 1px var(--border);
  color: var(--text-muted);
  flex-shrink: 0;
}

.sq-app-bar__titles { flex: 1; min-width: 0; }
.sq-app-bar__title { font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 1; color: var(--text); }
.sq-app-bar__sub {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-top: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sq-app-bar__pill {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px 6px 8px;
  border-radius: var(--r-pill);
  flex-shrink: 0;
  background: var(--sq-pill-bg);
  box-shadow: var(--sq-pill-ring);
}
.sq-app-bar__pill-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sq-pill-dot);
  box-shadow: var(--sq-pill-glow);
  animation: var(--sq-pill-anim);
}
.sq-app-bar__pill-text {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--sq-pill-fg);
}
.sq-app-bar__pill--live { --sq-pill-bg: rgba(255,74,61,.14); --sq-pill-ring: none; --sq-pill-fg: var(--live); --sq-pill-dot: var(--live); --sq-pill-glow: 0 0 10px var(--live); --sq-pill-anim: sq-pulse 1.6s var(--ease-in-out) infinite; }
.sq-app-bar__pill--signal { --sq-pill-bg: rgba(214,69,44,.18); --sq-pill-ring: inset 0 0 0 1px rgba(214,69,44,.5); --sq-pill-fg: var(--signal-bright); --sq-pill-dot: var(--signal-bright); --sq-pill-glow: none; --sq-pill-anim: sq-pulse 1.6s var(--ease-in-out) infinite; }
.sq-app-bar__pill--amber { --sq-pill-bg: var(--accent-quiet); --sq-pill-ring: none; --sq-pill-fg: var(--accent); --sq-pill-dot: var(--accent); --sq-pill-glow: 0 0 8px rgba(255,178,62,.7); --sq-pill-anim: none; }
.sq-app-bar__pill--ok { --sq-pill-bg: rgba(127,185,122,.14); --sq-pill-ring: none; --sq-pill-fg: var(--ok); --sq-pill-dot: var(--ok); --sq-pill-glow: none; --sq-pill-anim: none; }
.sq-app-bar__pill--muted { --sq-pill-bg: var(--surface-2); --sq-pill-ring: inset 0 0 0 1px var(--border); --sq-pill-fg: var(--text-faint); --sq-pill-dot: var(--border-strong); --sq-pill-glow: none; --sq-pill-anim: none; }

/* ---- Audience shell (audience-shell.js) ----
   The page, the 460px framed column, its body, the sticky footer, the hero
   glow and the Powered by credit. The 640px column is Slice 1 (A-3). */
.sq-audience-shell { min-height: 100vh; display: flex; justify-content: center; background: var(--bg-base); }
.sq-audience-shell__frame {
  width: 100%;
  max-width: 460px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-base);
  color: var(--text);
  font-family: var(--font-body);
  box-shadow: 0 0 0 1px var(--border);
}
.sq-audience-shell__body { flex: 1; min-height: 0; display: flex; flex-direction: column; }

.sq-audience-shell__footer { padding: 16px 18px 22px; display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; }
.sq-audience-shell__footer--gradient { background: linear-gradient(0deg, var(--bg-base) 55%, transparent); }

/* The audience pages' hero (0b-4 moved them all here and retired
   heroGlow()); a hero with other padding sets --sq-hero-glow-padding
   through heroGlowVars(). */
.sq-hero-glow {
  padding: var(--sq-hero-glow-padding, 22px 18px 18px);
  background: radial-gradient(120% 80% at 50% -20%, rgba(255,178,62,.16), transparent 60%);
}

.sq-powered-by { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 18px; text-decoration: none; flex-shrink: 0; }
.sq-powered-by--inline { display: inline-flex; justify-content: normal; padding: 0; }
.sq-powered-by__text { display: flex; flex-direction: column; gap: 4px; }
.sq-powered-by__eyebrow {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
  line-height: 1;
}

/* ---- Admin shell (admin-shell.js) ----
   Tenant Admin's top bar, 224px sidebar, 210px Settings sub-nav and main.
   The active item is aria-current="page"; a section not built yet is
   aria-disabled="true" with a SOON tag. The drawer and top bar under 1024px
   are Slice 4. */
.sq-admin-shell { display: flex; flex-direction: column; min-height: 100vh; }

.sq-admin-shell__top {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  height: 58px;
  padding: 0 var(--s-5);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.sq-admin-shell__tenant { font-family: var(--font-display); font-weight: 800; font-size: 23px; color: var(--text); }
.sq-admin-shell__crumb { font-family: var(--font-body); font-size: 15px; font-weight: 600; color: var(--text-faint); }
.sq-admin-shell__spacer { flex: 1; }

.sq-admin-shell__body { display: flex; flex: 1; min-height: 0; }

.sq-admin-shell__nav {
  width: 224px;
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 18px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sq-admin-shell__subnav {
  width: 210px;
  flex-shrink: 0;
  background: var(--surface-2);
  border-right: 1px solid var(--border);
  padding: 22px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sq-admin-shell__subnav-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 0 12px 10px;
}

.sq-admin-shell__nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-muted);
  background: transparent;
  cursor: pointer;
  opacity: 1;
}
.sq-admin-shell__nav-item--sub { padding: 8px 12px; font-size: 14px; }
.sq-admin-shell__nav-item[aria-current="page"] { font-weight: 700; color: var(--text); background: var(--nav-active-bg); }
.sq-admin-shell__nav-item[aria-disabled="true"] { cursor: default; opacity: 0.55; }
.sq-admin-shell__soon { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em; color: var(--text-faint); }

.sq-admin-shell__main {
  flex: 1;
  background: var(--bg-base);
  padding: 28px 32px 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow: auto;
}

/* ============================================================
   COMPOSITES (Slice 0b-3)
   ============================================================ */

/* ---- Cue row (cue-row.js) ----
   One performer in a running order (Backstage, Tenant Admin's show detail).
   The row's state is data-state — now · next · ready · up · me · done ·
   skipped · excluded · pending · new — which sets --sq-cue-row-bg and
   --sq-cue-row-ring; done, skipped and excluded dim to 0.5. --big is
   Backstage's larger sizing, --clickable a row with an onClick. With
   `extra` (Tenant Admin), .sq-cue-row-wrap takes the state's paint and the
   row inside it goes clear (the wrap isn't dimmed, as before). While a row
   is dragged, Backstage and Tenant Admin set its position, z-index,
   box-shadow, transform and transition inline, then clear them. */
.sq-cue-row,
.sq-cue-row-wrap { --sq-cue-row-bg: var(--surface); --sq-cue-row-ring: var(--ring-soft); }
.sq-cue-row[data-state="now"],
.sq-cue-row-wrap[data-state="now"] { --sq-cue-row-bg: linear-gradient(100deg, rgba(255,178,62,.10), var(--surface)); --sq-cue-row-ring: var(--ring-amber); }
.sq-cue-row[data-state="me"],
.sq-cue-row-wrap[data-state="me"] { --sq-cue-row-bg: linear-gradient(100deg, rgba(255,178,62,.09), var(--surface)); --sq-cue-row-ring: inset 0 0 0 1px rgba(255,178,62,.35); }
.sq-cue-row[data-state="done"],
.sq-cue-row[data-state="skipped"],
.sq-cue-row[data-state="excluded"],
.sq-cue-row-wrap[data-state="done"],
.sq-cue-row-wrap[data-state="skipped"],
.sq-cue-row-wrap[data-state="excluded"] { --sq-cue-row-bg: transparent; --sq-cue-row-ring: none; }
.sq-cue-row[data-state="new"],
.sq-cue-row-wrap[data-state="new"] { --sq-cue-row-bg: rgba(214,69,44,.07); --sq-cue-row-ring: inset 0 0 0 1px rgba(214,69,44,.35); }

.sq-cue-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: var(--r-lg);
  background: var(--sq-cue-row-bg);
  box-shadow: var(--sq-cue-row-ring);
  cursor: default;
  opacity: 1;
  transition: background var(--dur-base) var(--ease-out);
}
.sq-cue-row--big { padding: 14px 16px; }
.sq-cue-row--clickable { cursor: pointer; }
.sq-cue-row[data-state="done"],
.sq-cue-row[data-state="skipped"],
.sq-cue-row[data-state="excluded"] { opacity: 0.5; }

.sq-cue-row-wrap {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-radius: var(--r-lg);
  background: var(--sq-cue-row-bg);
  box-shadow: var(--sq-cue-row-ring);
}
.sq-cue-row-wrap > .sq-cue-row { background: transparent; box-shadow: none; }

/* The drag handle: a 3 × 2 grid of dots, only on rows that can be dragged. */
.sq-cue-row__grip { display: flex; flex-direction: column; gap: 3px; color: var(--text-faint); cursor: grab; touch-action: none; }
.sq-cue-row__grip-row { display: flex; gap: 3px; }
.sq-cue-row__grip-dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; }

.sq-cue-row__pos { font-family: var(--font-mono); font-size: 13px; color: var(--text-faint); width: 22px; text-align: center; flex-shrink: 0; }
.sq-cue-row--big .sq-cue-row__pos { font-size: 15px; }
.sq-cue-row[data-state="now"] .sq-cue-row__pos { color: var(--amber); }

/* 54px when big: the mockup's avSize, between the avatar's md and lg. */
.sq-cue-row--big .sq-cue-row__avatar { --sq-avatar-size: 54px; font-size: 22px; }

.sq-cue-row__meta { flex: 1; min-width: 0; }
.sq-cue-row__name {
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-size: 21px;
  line-height: 1;
  color: var(--text);
  letter-spacing: -0.01em;
}
.sq-cue-row--big .sq-cue-row__name { font-size: 26px; }

.sq-cue-row__song {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sq-cue-row--big .sq-cue-row__song { font-size: 15.5px; }
.sq-cue-row__song-line { display: flex; align-items: center; gap: 8px; margin-top: 3px; min-width: 0; }
.sq-cue-row__song-line > .sq-cue-row__song { margin-top: 0; min-width: 0; }
.sq-cue-row__key-line { display: flex; margin-top: 3px; }

.sq-cue-row__notes { display: flex; align-items: center; gap: 8px; margin-top: 7px; min-width: 0; }
.sq-cue-row__notes-label { font-family: var(--font-mono); font-size: 9px; font-weight: 500; letter-spacing: 0.12em; color: var(--amber); flex-shrink: 0; }
.sq-cue-row__notes-text { font-family: var(--font-body); font-size: 13px; color: var(--text); min-width: 0; }
.sq-cue-row--big .sq-cue-row__notes-text { font-size: 15.5px; }

.sq-cue-row__badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.sq-cue-row__trailing { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.sq-cue-row__duration { font-family: var(--font-mono); font-size: 12px; color: var(--text-faint); }
.sq-cue-row__actions { display: flex; gap: 8px; flex-shrink: 0; }

/* The two state badges that aren't a plain tone (two classes, so they beat
   .sq-badge's own fill and text). */
.sq-badge.sq-cue-row__badge--skipped { background: transparent; color: var(--text-faint); }
.sq-badge.sq-cue-row__badge--new { background: rgba(214,69,44,.14); color: var(--danger); }

/* The songbook Key (songbookKeyBadge; the songbook picker's rows too): not
   upper-cased, since "Bbm" read "BBM" is a different key. Its size is
   --sq-key-badge-size (12px, or 13px on Backstage's hero cards). */
.sq-badge.sq-key-badge { text-transform: none; letter-spacing: 0.02em; font-size: var(--sq-key-badge-size, 12px); flex-shrink: 0; }

/* The songbook item's own notes (songbookNotesBlock): a green label and a
   left rule, so they're never mistaken for the performer's. The text size
   is --sq-songbook-notes-size. */
.sq-songbook-notes { margin-top: 7px; padding-left: 10px; box-shadow: inset 2px 0 0 var(--ok); min-width: 0; }
.sq-songbook-notes__label { font-family: var(--font-mono); font-size: 9px; font-weight: 500; letter-spacing: 0.12em; color: var(--ok); }
.sq-songbook-notes__body {
  font-family: var(--font-body);
  font-size: var(--sq-songbook-notes-size, 13px);
  color: var(--text);
  margin-top: 2px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  min-width: 0;
}

/* The sheet-music buttons, 44px squares: a performer's upload (page icon)
   or a songbook PDF (book icon); the bare book icon when nothing's
   attached; the forScore "4S" link, which wears a red ring once flagged as
   not working, and turns off iOS's link callout and text selection so a
   press-and-hold can flag it. */
.sq-sheet-music-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  box-shadow: inset 0 0 0 1px var(--border);
  color: var(--text-muted);
  flex-shrink: 0;
}
.sq-songbook-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--text-faint); flex-shrink: 0; }
.sq-sheet-music-pair { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }

.sq-forscore-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 10px;
  box-sizing: border-box;
  border-radius: var(--r-md);
  box-shadow: inset 0 0 0 1px var(--border);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
  flex-shrink: 0;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.sq-forscore-button[data-forscore-flagged="true"] { box-shadow: inset 0 0 0 2px var(--danger); color: var(--danger); }

/* A row's text actions (actionChip): Pull up next, Copy/Move, Edit, and
   the coloured Exclude / Delete (--danger) and Restore (--positive). */
.sq-action-chip {
  height: 44px;
  padding: 0 13px;
  border-radius: var(--r-md);
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--border);
  color: var(--text-muted);
}
.sq-action-chip--danger { box-shadow: inset 0 0 0 1px rgba(214,69,44,.4); color: var(--signal-bright); }
.sq-action-chip--positive { box-shadow: inset 0 0 0 1px rgba(127,185,122,.4); color: var(--ok-bright); }

/* ---- Songbook picker (songbook-picker.js) ----
   The audience's "Pick an item from the songbook" sheet: the chrome is
   sq-sheet (0b-2); this is the panel's own column — the search, the
   scrolling list (lettered dividers in browse, a flat list while
   searching), the empty state, and the footer that becomes the pick bar
   once a song is chosen. A picked row is aria-pressed="true". */
.sq-songbook-picker__content { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.sq-songbook-picker__search { padding: 14px 20px 0; }
.sq-songbook-picker__body { flex: 1; overflow-y: auto; padding: 12px 20px; }
.sq-songbook-picker__list { display: flex; flex-direction: column; }
.sq-songbook-picker__loading { padding: 24px 0; color: var(--text-faint); font-size: 14px; }

.sq-songbook-picker__divider { display: flex; align-items: center; gap: 10px; padding: 12px 4px 6px; }
.sq-songbook-picker__divider-label { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--amber); flex-shrink: 0; }
.sq-songbook-picker__divider-rule { flex: 1; height: 1px; background: var(--border); }

.sq-songbook-picker__row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border-radius: var(--r-md);
  border: none;
  cursor: pointer;
  background: transparent;
  box-shadow: none;
  color: var(--text);
  font-family: var(--font-body);
}
.sq-songbook-picker__row[aria-pressed="true"] { background: var(--accent-quiet); box-shadow: inset 0 0 0 1px var(--accent); }
.sq-songbook-picker__title { font-size: 15px; font-weight: 600; min-width: 0; }
.sq-songbook-picker__title-line { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sq-songbook-picker__composer { font-size: 12.5px; color: var(--text-muted); }

.sq-songbook-picker__empty { padding: 24px 4px 12px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.sq-songbook-picker__empty-eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-faint);
}
.sq-songbook-picker__empty-title { font-size: 16px; font-weight: 700; }
.sq-songbook-picker__empty-text { font-size: 13.5px; color: var(--text-muted); margin: 0; }
.sq-songbook-picker__empty-actions { display: flex; gap: 10px; margin-top: 6px; flex-wrap: wrap; }

.sq-songbook-picker__footer {
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.sq-songbook-picker__footer-text { display: flex; flex-direction: column; gap: 2px; }
.sq-songbook-picker__footer-title { font-size: 13.5px; font-weight: 600; }
.sq-songbook-picker__footer-sub { font-size: 12px; color: var(--text-muted); }

.sq-songbook-picker__pick-bar {
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--bg-sunken);
}
.sq-songbook-picker__pick-label { display: flex; flex-direction: column; gap: 2px; }
.sq-songbook-picker__pick-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-faint);
}
.sq-songbook-picker__pick-title { font-size: 17px; font-weight: 700; }
.sq-songbook-picker__pick-note { font-size: 12.5px; color: var(--text-muted); margin: 0; }

/* ---- Custom song form (custom-song-form.js) ----
   "Choose your own song": title, show/composer and the sheet music — a
   PDF tile, or (relaxed shows) a segmented choice. Hidden parts carry the
   `hidden` attribute. The tile (.sq-pdf-tile) is a label around a hidden
   file input; data-state="attached" once a file is picked. */
.sq-custom-song { display: flex; flex-direction: column; gap: 14px; }
.sq-custom-song__back {
  align-self: flex-start;
  background: none;
  border: none;
  color: var(--accent);
  font-family: var(--font-body);
  font-size: 13.5px;
  cursor: pointer;
  padding: 0;
}
.sq-custom-song__heading { display: flex; flex-direction: column; gap: 4px; }
.sq-custom-song__title { font-family: var(--font-display); font-weight: 800; font-size: 20px; }
.sq-custom-song__sub { font-size: 13px; color: var(--text-muted); margin: 0; }
.sq-custom-song__field { display: flex; flex-direction: column; gap: 7px; }
.sq-custom-song__field[hidden] { display: none; }
.sq-custom-song__label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-faint);
}
.sq-custom-song__helper { font-size: 13px; color: var(--text-muted); margin: 0; }
.sq-custom-song__error { color: var(--danger); font-size: 13px; }

.sq-pdf-tile {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px;
  border-radius: var(--r-md);
  background: rgba(255,178,62,.05);
  box-shadow: inset 0 0 0 1.5px rgba(255,178,62,.3);
  cursor: pointer;
}
.sq-pdf-tile__icon {
  width: 44px;
  height: 56px;
  border-radius: 6px;
  background: var(--bg-base);
  box-shadow: inset 0 0 0 1px var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  flex-shrink: 0;
}
.sq-pdf-tile[data-state="attached"] .sq-pdf-tile__icon { width: 38px; height: 48px; font-size: 8.5px; }
.sq-pdf-tile__text { flex: 1; min-width: 0; }
.sq-pdf-tile__prompt { font-size: 13.5px; font-weight: 600; color: var(--text); }
.sq-pdf-tile__name { font-size: 13.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sq-pdf-tile__hint { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--text-faint); margin-top: 4px; }
.sq-pdf-tile__size { font-family: var(--font-mono); font-size: 10.5px; color: var(--ok); margin-top: 4px; }
.sq-pdf-tile__replace { font-size: 13px; color: var(--text-muted); flex-shrink: 0; }

/* ---- Sign-up form (signup-form.js) ----
   The audience's sign-up form (pre-show and live): fields, "Your song",
   the error, and the submit button, which swaps for the "signups have
   just closed" notice while the host has signups locked (both `hidden`).
   Each song choice is an .sq-song-option row: --compact once a song is
   picked, --clickable when it opens a sheet, and data-state="selected"
   on the method that was used. */
.sq-signup-form { display: flex; flex-direction: column; gap: var(--s-5); }
.sq-signup-form__song { display: flex; flex-direction: column; gap: var(--s-3); }
.sq-signup-form__options { display: flex; flex-direction: column; gap: var(--s-2); }
.sq-signup-form__label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-faint);
}
.sq-signup-form__error { color: var(--danger); font-size: var(--t-body-sm); }

.sq-signup-form__summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.sq-signup-form__summary-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sq-signup-form__summary-title { font-size: 15px; font-weight: 700; }
.sq-signup-form__summary-sub { font-size: 12.5px; color: var(--text-muted); }
.sq-signup-form__summary-note { font-size: 12.5px; color: var(--amber); }

.sq-signup-form__closed {
  padding: var(--s-4);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--ring-soft);
  color: var(--text-muted);
  font-size: var(--t-body-sm);
  text-align: center;
}

.sq-song-option {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 15px;
  border-radius: 14px;
  cursor: default;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--border);
}
.sq-song-option--compact { gap: 11px; padding: 12px 14px; border-radius: 12px; }
.sq-song-option--clickable { cursor: pointer; }
.sq-song-option[data-state="selected"] { background: linear-gradient(100deg, rgba(255,178,62,.1), var(--surface)); box-shadow: inset 0 0 0 1.5px rgba(255,178,62,.5); }

.sq-song-option__check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: transparent;
  box-shadow: inset 0 0 0 1px var(--border);
  font-size: 11px;
  font-weight: 700;
}
.sq-song-option--compact .sq-song-option__check { width: 18px; height: 18px; }
.sq-song-option[data-state="selected"] .sq-song-option__check { background: var(--accent); color: var(--text-on-amber); box-shadow: 0 0 12px rgba(255,178,62,.45); }

.sq-song-option__text { flex: 1; min-width: 0; }
.sq-song-option__name { font-size: 14.5px; font-weight: 600; color: var(--text-muted); }
.sq-song-option__title { font-family: var(--font-display); font-weight: 700; font-size: 21px; line-height: 1; color: var(--text-muted); }
.sq-song-option__sub { font-size: 12.5px; color: var(--text-faint); margin-top: 5px; }
.sq-song-option__chevron { font-size: 20px; color: var(--text-faint); flex-shrink: 0; }
.sq-song-option[data-state="selected"] .sq-song-option__name,
.sq-song-option[data-state="selected"] .sq-song-option__title { color: var(--text); }
.sq-song-option[data-state="selected"] .sq-song-option__sub { color: var(--text-muted); }
.sq-song-option[data-state="selected"] .sq-song-option__chevron { color: var(--accent); }

/* ---- Reminders editor (reminders-editor.js) ----
   Tenant Admin's host reminders (Settings › Host reminders and a show's
   Settings tab): one grid row per reminder — trigger | number | message |
   on/off | remove — then the Add button and the autosave status. The
   trigger is .sq-select; .sq-reminders__field sets background-color (not
   the shorthand) and puts back .sq-select's right padding, so the drawn
   arrow keeps its room, as when selectArrowStyle was spread last. A
   read-only switch (a host viewing the tenant defaults) is aria-disabled. */
.sq-reminders { display: flex; flex-direction: column; gap: var(--s-3); }

.sq-reminders__row {
  display: grid;
  grid-template-columns: 256px 120px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3);
  border-radius: var(--r-md);
  box-shadow: inset 0 0 0 1px var(--border-row);
}

.sq-reminders__field {
  height: 40px;
  padding: 0 12px;
  font-size: 14px;
  color: var(--text);
  background-color: var(--surface-2);
  border: none;
  border-radius: var(--r-sm);
  box-shadow: inset 0 0 0 1px var(--border);
  font-family: var(--font-body);
}
.sq-reminders__field.sq-select { padding-right: 38px; }
.sq-reminders__kind { width: 100%; }
.sq-reminders__amount { width: 64px; text-align: center; font-family: var(--font-mono); font-weight: 500; }
.sq-reminders__message { width: 100%; min-width: 0; }
.sq-reminders__amount-cell { display: flex; align-items: center; gap: 8px; }
.sq-reminders__unit { font-size: 13.5px; color: var(--text-muted); }

.sq-reminders__switch[aria-disabled="true"] { pointer-events: none; opacity: 0.7; }

.sq-reminders__remove {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--border);
  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
  opacity: 1;
  padding: 0;
}
.sq-reminders__remove:disabled { cursor: not-allowed; opacity: 0.4; }

.sq-reminders__empty { font-size: 14px; color: var(--text-faint); }
.sq-reminders__bar { display: flex; align-items: center; gap: var(--s-3); }
.sq-reminders__limit { font-size: 13px; color: var(--text-faint); }
.sq-reminders__status { font-size: 13.5px; min-height: 20px; }
.sq-reminders__status-text { font-size: 13.5px; }
.sq-reminders__status-text--saving { color: var(--text-muted); }
.sq-reminders__status-text--note { color: var(--amber-deep); }
.sq-reminders__status-text--error { color: var(--danger); }
.sq-reminders__status-text--saved { color: var(--ok-deep); }

/* ============================================================
   AUDIENCE PAGES (Slice 0b-4)
   Page classes, prefix aud- (spec §2.3), for home, sign-up, live,
   signup-edit, sign-in, not-found and pending-setup. Here rather than
   in each page's <style> (Simon, 24j): a tenant will later be able to
   switch themes, so these belong with the rest of Marquee, and several
   pages share them. Like the rest of this file they are exempt from
   token-lint rule 3: their spacings are the values the pages used
   inline, moved unchanged (Slice 1 is where they change).
   ============================================================ */

/* ---- Audience: shared (several pages) ----
   The plain loading / not-found column (aud-plain), the centred empty state
   (aud-empty: home with no shows, pending setup, not found), the chevron row
   (aud-row: "Message the host", "Your notes for the MD", "How did it go?"),
   the form column, the running-order section heading and list, and the
   test-environment link box (sign-in and signup-edit). */
.aud-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 24px;
  gap: 16px;
}
.aud-empty__title { font-family: var(--font-display); font-weight: 800; font-size: 26px; color: var(--text); }
.aud-empty__text { font-size: 14px; color: var(--text-muted); }
.aud-dev-links {
  padding: var(--s-4);
  border-radius: var(--r-md);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.aud-dev-links__label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--text-faint); }
.aud-dev-links__link { font-size: 13px; word-break: break-all; }
.aud-plain {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  background: var(--bg-base);
  color: var(--text);
}
.aud-plain__col {
  width: 100%;
  max-width: 460px;
  padding: var(--s-16) var(--s-5) var(--s-24);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.aud-plain__eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.aud-plain__body { font-size: var(--t-body-md); color: var(--text-muted); line-height: var(--lh-normal); margin: 0; }
.aud-plain__title { font-family: var(--font-display); font-weight: 900; font-size: 32px; margin: 0; }
.aud-row__text { flex: 1; min-width: 0; }
.aud-row__title { font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 1; }
.aud-row__sub { font-size: 12.5px; color: var(--text-faint); margin-top: 5px; }
.aud-row__arrow { font-size: 19px; color: var(--accent); flex-shrink: 0; }
.aud-message-row {
  all: unset;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 15px;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border);
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
}
.aud-form-wrap { padding: 0 18px 18px; display: flex; flex-direction: column; gap: 14px; }
.aud-section { padding: 18px 20px 8px; display: flex; align-items: baseline; gap: 10px; }
.aud-section__label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; color: var(--text-faint); }
.aud-section__count { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); }
.aud-queue { padding: 0 12px; display: flex; flex-direction: column; gap: 5px; }

/* ---- Audience cue row (signup/audience-cue-row.js) ----
   A read-only running-order row on the live page. data-state is up,
   mine, done or skipped: "mine" gets the amber ring and fill and an amber
   position and avatar; done and skipped dim to 0.5. */
.aud-cue-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: transparent;
  box-shadow: var(--ring-soft);
  opacity: 1;
}
.aud-cue-row[data-state="mine"] { background: linear-gradient(100deg, rgba(255,178,62,.09), var(--surface)); box-shadow: inset 0 0 0 1px rgba(255,178,62,.35); }
.aud-cue-row[data-state="done"],
.aud-cue-row[data-state="skipped"] { box-shadow: none; opacity: 0.5; }
.aud-cue-row__pos { font-family: var(--font-mono); font-size: 12px; color: var(--text-faint); width: 22px; text-align: center; flex-shrink: 0; }
.aud-cue-row[data-state="mine"] .aud-cue-row__pos { color: var(--amber); }
.aud-cue-row[data-state="mine"] .aud-cue-row__avatar { box-shadow: inset 0 0 0 1px rgba(255,178,62,.3); color: var(--amber); }
.aud-cue-row__meta { flex: 1; min-width: 0; }
.aud-cue-row__name { font-family: var(--font-display); font-weight: 700; font-size: 18px; line-height: 1; color: var(--text); letter-spacing: -0.01em; }
.aud-cue-row__song { font-size: 12px; color: var(--text-muted); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aud-cue-row__badge--faded { background: transparent; color: var(--text-faint); }

/* ---- Audience: home (home/home.js) ----
   The tenant's home page: the live heroes (a link around the Now performing
   card and its "Follow this show live" row), the show list with its date
   tile, the "Choose a show" picker, and the About boxes. */
.aud-home__about { padding: 20px 16px 8px; display: flex; flex-direction: column; gap: 12px; }
.aud-home__about-text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-muted);
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.aud-home__about-link { color: var(--accent); text-decoration: underline; }
.aud-home__about-button {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 20px;
  border-radius: 12px;
  background: var(--accent);
  color: var(--text-on-amber);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  margin-top: 4px;
}
.aud-home__about-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 18px 20px;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border);
}
.aud-home__about-heading {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  color: var(--text);
}
.aud-home__live-link { display: block; text-decoration: none; color: inherit; }
.aud-home__follow {
  margin: 10px 16px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border);
}
.aud-home__follow-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.aud-home__follow-title { font-size: 15px; font-weight: 700; color: var(--accent); }
.aud-home__follow-sub { font-size: 12.5px; color: var(--text-muted); }
.aud-home__follow-arrow { color: var(--accent); font-size: 18px; flex-shrink: 0; }
.aud-home__eyebrow {
  padding: 18px 16px 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: var(--text-faint);
}
.aud-home__show {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border);
  text-decoration: none;
  color: inherit;
}
.aud-home__date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: var(--surface-2);
  flex-shrink: 0;
}
.aud-home__date-month { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; color: var(--text-faint); }
.aud-home__date-day {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  color: var(--accent);
  line-height: 1;
}
.aud-home__show-body { flex: 1; min-width: 0; }
.aud-home__show-title { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--text); }
.aud-home__show-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.aud-home__show-arrow { color: var(--text-faint); font-size: 18px; flex-shrink: 0; }
.aud-home__shows { padding: 0 16px 8px; display: flex; flex-direction: column; gap: 10px; }
.aud-home__pick-title { font-family: var(--font-display); font-weight: 800; font-size: 34px; color: var(--text); }
.aud-home__pick-text { font-size: 14px; color: var(--text-muted); margin-top: 8px; }
.aud-home__picker-list { padding: 8px 16px 8px; display: flex; flex-direction: column; gap: 10px; }
.aud-home__heroes { display: flex; flex-direction: column; gap: 20px; }

/* ---- Audience: sign-up page (signup/signup.js) ----
   Pre-show: the form's hero (the glow is .sq-hero-glow), signups closed
   (B3), and the confirmation (B2), which live.js's own confirmation reuses. */
.aud-closed__card {
  padding: 20px;
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border);
}
.aud-closed__eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em; color: var(--text-faint); }
.aud-closed__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 34px;
  line-height: 1;
  margin-top: 12px;
}
.aud-closed__text {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-muted);
  margin-top: 10px;
  margin: 10px 0 0;
}
.aud-closed { padding: 26px 18px 18px; display: flex; flex-direction: column; gap: 22px; }
.aud-closed__section { display: flex; flex-direction: column; gap: 12px; }
.aud-closed__section-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; color: var(--text-faint); }
.aud-closed__edit-row {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 15px;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px rgba(255,178,62,.22);
  text-decoration: none;
  color: inherit;
}
.aud-signup__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 40px;
  line-height: 0.92;
  letter-spacing: -0.01em;
}
.aud-signup__lede { font-size: 14.5px; line-height: 1.5; color: var(--text-muted); margin-top: 12px; }
.aud-signup__already { font-size: 13px; color: var(--text-faint); text-align: center; }
.aud-signup__already-link { color: var(--accent); }
.aud-confirm__bulbs { display: flex; gap: 9px; margin-bottom: 16px; }
.aud-confirm__bulb {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, var(--white), var(--amber) 70%);
  box-shadow: 0 0 7px rgba(255,178,62,.9);
}
.aud-confirm__eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em; color: var(--amber); }
.aud-confirm__name {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 46px;
  line-height: 0.92;
  margin-top: 12px;
}
.aud-confirm__song { font-size: 15px; color: var(--text-muted); margin-top: 10px; }
.aud-confirm__slot {
  flex: 1;
  padding: 16px 16px;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border);
}
.aud-confirm__slot-label { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.14em; color: var(--text-faint); }
.aud-confirm__slot-number { font-family: var(--font-mono); font-size: 28px; color: var(--amber); margin-top: 8px; }
.aud-confirm__slot-of { font-size: 12.5px; color: var(--text-faint); margin-top: 5px; }
.aud-confirm__slots { display: flex; gap: 12px; margin-top: 24px; }
.aud-confirm__note { margin-top: 20px; padding: 16px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--border); }
.aud-confirm__note-text { font-size: 14px; line-height: 1.55; color: var(--text-muted); }
.aud-confirm__edit-link {
  height: 48px;
  border-radius: 12px;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--border);
  color: var(--text);
  font-weight: 600;
  font-size: 14.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.aud-confirm__footnote { font-size: 12.5px; color: var(--text-faint); text-align: center; }
.aud-closed__section--after-mine { margin-top: 4px; }
.aud-confirm__hero { display: flex; flex-direction: column; gap: 0; }

/* ---- Audience: live page (signup/live.js) ----
   B4-B9: the rehearsal stripe, Now performing (--big when nobody is up
   next), Up next, your slot (the progress fill's width is per instance,
   inline), the edit-your-signup link, the up-next takeover (each chase
   bulb's delay is inline), performed / on again later / how did it go, the
   collapsible Performed list, the footer buttons, sign-up-while-live and
   its confirmation, and the ended screen. */
.aud-rehearsal-banner {
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  background: repeating-linear-gradient(115deg, var(--signal) 0 14px, var(--signal-deep) 14px 28px);
}
.aud-rehearsal-banner__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--white);
  animation: sq-pulse 1.6s var(--ease-in-out) infinite;
  flex-shrink: 0;
}
.aud-rehearsal-banner__text {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--white);
  flex: 1;
}
.aud-live__reconnecting {
  padding: 0 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.aud-now__head { display: flex; align-items: center; gap: 10px; }
.aud-now__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--live);
  box-shadow: 0 0 16px rgba(255,74,61,.65);
  animation: sq-pulse 1.6s var(--ease-in-out) infinite;
}
.aud-now__eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em; color: var(--amber); }
.aud-now__song { font-size: 14px; color: var(--text-muted); margin-top: 8px; }
.aud-up-next {
  margin: 12px 16px 0;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
}
.aud-up-next__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--text-faint);
  flex-shrink: 0;
}
.aud-up-next__body { flex: 1; min-width: 0; }
.aud-up-next__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 1;
  color: var(--gold);
}
.aud-up-next__song {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.aud-slot {
  margin: 12px 16px 0;
  padding: 18px;
  border-radius: 18px;
  background: radial-gradient(120% 120% at 0% 0%, rgba(255,178,62,.16), var(--surface));
  box-shadow: inset 0 0 0 1px rgba(255,178,62,.45);
}
.aud-slot__top { display: flex; align-items: flex-start; gap: 16px; }
.aud-slot__body { flex: 1; min-width: 0; }
.aud-slot__eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; color: var(--amber); }
.aud-slot__away {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 26px;
  line-height: 1;
  margin-top: 10px;
}
.aud-slot__song { font-size: 13px; color: var(--text-muted); margin-top: 8px; }
.aud-slot__count { text-align: right; flex-shrink: 0; }
.aud-slot__position { font-family: var(--font-mono); font-size: 40px; line-height: 0.9; color: var(--amber); }
.aud-slot__total {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  color: var(--text-faint);
  margin-top: 6px;
}
.aud-slot__track {
  height: 5px;
  border-radius: 999px;
  background: var(--surface-2);
  margin-top: 16px;
  overflow: hidden;
}
.aud-takeover {
  margin: 16px 16px 0;
  padding: 24px 20px;
  border-radius: 20px;
  background: radial-gradient(130% 130% at 50% -20%, rgba(255,178,62,.3), var(--surface) 70%);
  box-shadow: inset 0 0 0 1.5px rgba(255,178,62,.6);
  text-align: center;
}
.aud-takeover__bulbs { display: flex; justify-content: center; gap: 9px; margin-bottom: 14px; }
.aud-takeover__eyebrow { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.24em; color: var(--amber); }
.aud-takeover__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 38px;
  line-height: 0.95;
  margin-top: 14px;
}
.aud-takeover__text { font-size: 14px; line-height: 1.5; color: var(--text); margin-top: 12px; }
.aud-takeover__card {
  margin-top: 18px;
  padding: 13px 14px;
  border-radius: 12px;
  background: rgba(11,4,5,.45);
  box-shadow: inset 0 0 0 1px rgba(255,178,62,.25);
}
.aud-takeover__name { font-family: var(--font-display); font-weight: 700; font-size: 21px; line-height: 1; }
.aud-takeover__song { font-size: 13px; color: var(--gold); margin-top: 7px; }
.aud-performed {
  margin: 16px 16px 0;
  padding: 16px 18px;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px rgba(127,185,122,.28);
}
.aud-performed__eyebrow { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.18em; color: var(--ok); }
.aud-performed__song {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 24px;
  line-height: 1;
  margin-top: 10px;
}
.aud-performed__slot { font-size: 12.5px; color: var(--text-faint); margin-top: 6px; }
.aud-again {
  margin: 12px 16px 0;
  padding: 14px 16px;
  border-radius: 14px;
  background: linear-gradient(100deg, rgba(255,178,62,.1), var(--surface));
  box-shadow: inset 0 0 0 1px rgba(255,178,62,.3);
}
.aud-again__eyebrow { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.16em; color: var(--amber); }
.aud-again__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  line-height: 1;
  margin-top: 9px;
}
.aud-again__song { font-size: 13px; color: var(--text-muted); margin-top: 6px; }
.aud-how {
  all: unset;
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 12px 16px 0;
  padding: 16px 18px;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border);
  cursor: pointer;
  width: calc(100% - 32px);
  box-sizing: border-box;
}
.aud-how__eyebrow { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.18em; color: var(--amber); }
.aud-how__text { font-size: 13px; color: var(--text-muted); margin-top: 7px; line-height: 1.4; }
.aud-collapsible__list { display: flex; flex-direction: column; gap: 4px; padding: 0 12px; }
.aud-collapsible__toggle {
  all: unset;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 20px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.aud-collapsible__rule { flex: 1; height: 1px; background: var(--border); }
.aud-collapsible__caret { font-size: 15px; }
.aud-collapsible { display: flex; flex-direction: column; gap: 6px; }
.aud-on-stage {
  margin: 14px 16px 0;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border);
}
.aud-on-stage__head { display: flex; align-items: center; gap: 10px; }
.aud-on-stage__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--live);
  box-shadow: 0 0 12px rgba(255,74,61,.6);
  animation: sq-pulse 1.6s var(--ease-in-out) infinite;
}
.aud-on-stage__label { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.18em; color: var(--text-faint); }
.aud-on-stage__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
  margin-top: 9px;
}
.aud-on-stage__song { font-size: 13px; color: var(--text-muted); margin-top: 6px; }
.aud-live__on-deck {
  height: 48px;
  border-radius: 12px;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--border);
  color: var(--text-faint);
  font-weight: 600;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.aud-my-slot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 16px 0;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px rgba(255,178,62,.22);
}
.aud-my-slot__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.aud-my-slot__name { font-weight: 700; font-size: 14px; }
.aud-my-slot__to-go { font-family: var(--font-mono); font-size: 11px; color: var(--amber); flex-shrink: 0; }
.aud-live__surprise { padding: 14px 20px 0; font-size: 12.5px; color: var(--text-faint); }
.aud-live__footer-button { flex: 1; min-width: 0; }
.aud-live__footer-row { display: flex; }
.aud-live__footer-grow { flex: 1; }
.aud-live__footer-pair { display: flex; align-items: center; gap: 16px; }
.aud-live-form__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 32px;
  line-height: 0.95;
  margin-top: 14px;
}
.aud-live-confirm__name {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 40px;
  line-height: 0.92;
  margin-top: 12px;
}
.aud-wrap__eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.24em; color: var(--amber); }
.aud-wrap__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 40px;
  line-height: 0.94;
  margin-top: 12px;
}
.aud-wrap__text { font-size: 14px; line-height: 1.5; color: var(--text-muted); margin-top: 12px; }
.aud-wrap__list { padding: 0 12px; display: flex; flex-direction: column; gap: 4px; }
.aud-now {
  margin: 16px 16px 0;
  border-radius: 18px;
  padding: 16px 18px;
  background: linear-gradient(120deg, rgba(255,178,62,.12), var(--surface));
  box-shadow: inset 0 0 0 1px rgba(255,178,62,.24);
}
.aud-now--big { padding: 18px; }
.aud-now__name { font-family: var(--font-display); font-weight: 900; font-size: 38px; line-height: 0.94; margin-top: 12px; text-transform: uppercase; }
.aud-now--big .aud-now__name { font-size: 46px; margin-top: 14px; }
.aud-slot__progress { height: 100%; background: linear-gradient(90deg, var(--amber-deep), var(--amber-bright)); }
.aud-edit-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; color: var(--accent); text-decoration: none; }
.aud-edit-link--spaced { margin-top: 14px; }
.aud-edit-link--small { font-size: 12.5px; }
.aud-takeover__bulb {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, var(--white), var(--amber) 70%);
  box-shadow: 0 0 7px rgba(255,178,62,.9);
  animation: sq-chase 2.4s var(--ease-in-out) infinite;
}
.aud-wrap__hero { text-align: center; }

/* ---- Audience: signup edit (signup-edit/signup-edit.js) ----
   The performer's own edit link: the hero, the chooser, fix my details,
   change my song, withdraw, the read-only and invalid-link screens. The
   error lines show and hide with `hidden`. */
.aud-edit__back {
  align-self: flex-start;
  background: none;
  border: none;
  color: var(--accent);
  font-family: var(--font-body);
  font-size: 13.5px;
  cursor: pointer;
  padding: 0 0 4px;
}
.aud-edit__show-link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  height: 36px;
  padding: 0 14px;
  margin-bottom: 16px;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px var(--border-strong);
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.aud-edit__eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em; color: var(--amber); }
.aud-edit__lede { font-size: 14.5px; line-height: 1.5; color: var(--text-muted); margin-top: 12px; }
.aud-edit__form { display: flex; flex-direction: column; gap: var(--s-4); padding: 0 18px 18px; }
.aud-edit__message {
  padding: 16px 16px;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-muted);
}
.aud-edit__retry { padding: 0 18px 18px; }
.aud-edit__song-card {
  padding: 16px 16px;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border);
  margin: 0 18px;
}
.aud-edit__label { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.14em; color: var(--text-faint); }
.aud-edit__song-title { font-size: 17px; font-weight: 700; margin-top: 6px; }
.aud-edit__song-sub { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.aud-edit__song-notes { font-size: 13px; color: var(--text-muted); margin-top: 10px; }
.aud-edit__choice {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  text-align: left;
  padding: 16px 16px;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border);
  border: none;
  cursor: pointer;
  font: inherit;
}
.aud-edit__choice-sub { font-size: 13px; color: var(--text-muted); }
.aud-edit__choices { display: flex; flex-direction: column; gap: 10px; padding: 0 18px 18px; }
.aud-edit__pick {
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border);
}
.aud-edit__pick-title { font-size: 14.5px; font-weight: 600; margin-top: 5px; }
.aud-edit__pick-note { font-size: 12.5px; color: var(--text-faint); margin-top: 6px; }
.aud-edit__song { display: flex; flex-direction: column; gap: var(--s-3); }
.aud-edit__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border);
}
.aud-edit__summary-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.aud-edit__summary-title { font-size: 15px; font-weight: 700; }
.aud-edit__summary-sub { font-size: 12.5px; color: var(--text-muted); }
.aud-edit__summary-note { font-size: 12.5px; color: var(--amber); }
.aud-edit__options { display: flex; flex-direction: column; gap: var(--s-2); }
.aud-edit__withdraw-button { background: var(--danger); color: var(--white); }
.aud-edit__actions { display: flex; flex-direction: column; gap: var(--s-3); padding: 0 18px 18px; }
.aud-edit__heading { font-family: var(--font-display); font-weight: 900; font-size: 32px; line-height: 0.96; margin-top: 0; }
.aud-edit__heading--after-eyebrow { margin-top: 10px; }
.aud-edit__choice-title { font-size: 15.5px; font-weight: 700; color: var(--text); }
.aud-edit__choice-title--danger { color: var(--danger); }
.aud-edit__error { color: var(--danger); font-size: var(--t-body-sm); }

/* ---- Sign-in (login/login.js) ----
   Staff sign-in (Backstage and Tenant Admin): the centred card. */
.aud-login {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--s-5);
}
.aud-login__card {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
  padding: var(--s-8) var(--s-6);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--ring-soft), var(--shadow-lg);
}
.aud-login__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-mono-xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-faint);
}
.aud-login__error { font-size: 13.5px; color: var(--signal-bright); line-height: var(--lh-normal); }
.aud-login__expired {
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  background: var(--accent-quiet);
  box-shadow: var(--ring-amber);
  font-size: 14px;
  line-height: var(--lh-normal);
  color: var(--text);
}
.aud-login__form { display: flex; flex-direction: column; gap: var(--s-4); }
.aud-login__heading { display: flex; flex-direction: column; gap: var(--s-1); }
.aud-login__title {
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-size: var(--t-display-sm);
  margin: 0;
  line-height: var(--lh-tight);
}
.aud-login__lede { font-size: 14px; color: var(--text-muted); margin: 0; line-height: var(--lh-normal); }

/* ---- Not found (not-found/not-found.js) ----
   The branded 404: the big amber code and the "Return to …" link styled as
   the large primary button (its body is .aud-empty). */
.aud-not-found__home {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding: 0 24px;
  border-radius: var(--r-lg);
  background: var(--button-primary);
  color: var(--button-primary-fg);
  box-shadow: var(--glow-amber-soft);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 17px;
  text-decoration: none;
}
/* Simon: very large. About 40% of the screen width, so it spans roughly
   two-thirds of a phone, capped for desktop. */
.aud-not-found__code {
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-size: clamp(120px, 40vw, 220px);
  line-height: 0.9;
  color: var(--amber-deep);
  text-shadow: var(--glow-amber-soft);
}
.aud-not-found__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 26px;
  color: var(--text);
  margin: 0;
}
.aud-not-found__action { padding-top: 8px; }

/* ============================================================
   BACKSTAGE (Slice 0b-5)
   Page classes, prefix bs- (spec §2.3), for the host's live console
   (public/app/backstage/backstage.js). Here rather than in the page's
   <style> for the same reason as the audience pages (Simon, 24j): a
   tenant will later be able to switch themes, so these belong with the
   rest of Marquee. Like the rest of this file they are exempt from
   token-lint rule 3: their spacings are the values the page used inline,
   moved unchanged (Slices 2 and 3 are where they change).

   index.html's <style> keeps the page layout's own five classes —
   bs-shell, bs-content-row, bs-left-rail, bs-running-order-pane and
   bs-running-order-scroll — with its 860px breakpoint, and the
   @keyframes bs-pill-glow. The same elements carry a class from here for
   the rest of their layout (bs-view, bs-view__body, bs-rail, bs-order,
   bs-order__scroll); the two sets never declare the same property.

   0b-5a: the shared pieces, the header, the hero cards and the filter
   pills. 0b-5b: the modal bodies, the lists and messages, and the ended
   screen. backstage.js has no inline style objects left; the drag's lift
   and the find-in-order flash still write box-shadow and friends inline,
   because both are transient and must beat the row's own ring.
   ============================================================ */

/* ---- Backstage: shared (backstage.js) ----
   The eyebrow label (bs-eyebrow, faint unless --amber or --ok), the page
   and its two columns, the filter row, the running-order lists and their
   empty lines, the flexible spacer, the centred loading line, the
   fatal-error column and the toast. */
.bs-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-mono-xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-faint);
}
.bs-eyebrow--amber { color: var(--amber); }
.bs-eyebrow--ok { color: var(--ok); }
.bs-view { min-height: 100vh; display: flex; flex-direction: column; }
.bs-view__body { flex: 1; padding: var(--s-5) var(--s-6) 0; display: flex; gap: var(--s-6); }
.bs-rail { width: 420px; max-width: 100%; flex-shrink: 0; display: flex; flex-direction: column; gap: var(--s-4); }
.bs-order { flex: 1; min-width: 280px; display: flex; flex-direction: column; gap: var(--s-4); }
.bs-order__scroll { display: flex; flex-direction: column; gap: var(--s-4); }
.bs-filter-row { padding: 0 0 var(--s-1); display: flex; align-items: center; gap: 9px; flex-wrap: wrap; flex-shrink: 0; }
.bs-list { display: flex; flex-direction: column; gap: 7px; }
.bs-empty { font-size: 14px; color: var(--text-faint); }
.bs-spacer { flex: 1; }
.bs-placeholder { flex: 1; display: flex; align-items: center; justify-content: center; }
.bs-centered {
  max-width: var(--prose-w);
  margin: 0 auto;
  padding: var(--s-16) var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.bs-fatal-text { font-size: 15px; color: var(--text); }
.bs-toast {
  position: fixed;
  bottom: var(--s-5);
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 20px;
  border-radius: var(--r-md);
  background: var(--signal);
  color: var(--white);
  font-size: 14px;
  font-weight: 600;
  box-shadow: var(--shadow-lg);
  z-index: 100;
}

/* ---- Backstage: header (backstage.js) ----
   The bar, the show title (it truncates; on hover backstage.js scrolls it
   slowly into view and sets data-state="revealing" so the ellipsis doesn't
   draw mid-scroll), the connection badge and counts, the dividers, the
   toggles, the action cluster and its red End show / End rehearsal and
   green Rehearse show buttons (overrides on sq-button--ghost: same
   specificity, later in this file) and the user menu, which wraps to its
   own line when the cluster doesn't fit; then the rehearsal banners.
   The connection badge's tone comes from its data-state (connected,
   reconnecting, connecting). Its dot was meant to glow while connected,
   but the inline value ("0 0 8px var(--ok)88": a var() can't take a hex
   alpha suffix) was invalid, so it computed to none and never drew; it
   isn't carried over, so nothing changes (Slice 2 can add the glow). */
.bs-header {
  flex-shrink: 0;
  padding: 10px var(--s-6);
  display: flex;
  align-items: center;
  gap: var(--s-6);
  background: linear-gradient(180deg, var(--bg-panel), var(--bg-base));
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  row-gap: var(--s-3);
}
/* 260px, not the 320 it shipped with: at 1470 wide the three toggles
   missed one line by 3px (Simon, 2026-10-15). */
.bs-title { flex: 0 1 auto; min-width: 0; max-width: 260px; }
/* line-height var(--lh-snug), not 1, plus a small bottom pad: 1 with
   overflow: hidden clipped the descender on "g" against the box's own
   bottom edge (Simon, 2026-09-16). */
.bs-title__name {
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-size: var(--t-display-sm);
  line-height: var(--lh-snug);
  padding-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bs-title__name[data-state="revealing"] { text-overflow: clip; }
.bs-title__subtitle {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--text-faint);
  margin-top: 3px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bs-header-divider { width: 1px; height: 32px; background: var(--border); flex-shrink: 0; }
.bs-header__status { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; flex-shrink: 0; }
.bs-conn { --bs-conn-tone: var(--text-faint); display: inline-flex; align-items: center; gap: 7px; }
.bs-conn[data-state="connected"] { --bs-conn-tone: var(--ok); }
.bs-conn[data-state="reconnecting"] { --bs-conn-tone: var(--wait); }
.bs-conn__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--bs-conn-tone); flex-shrink: 0; }
.bs-conn__label { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.12em; color: var(--bs-conn-tone); }
.bs-conn-counts {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  white-space: nowrap;
}
.bs-toggles {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  flex: 1;
  min-width: 0;
  flex-wrap: wrap;
  row-gap: var(--s-3);
}
.bs-header__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.bs-header__lifecycle { display: flex; gap: var(--s-2); }
.bs-end-button { color: var(--signal-bright); box-shadow: inset 0 0 0 1px rgba(214,69,44,.4); }
.bs-rehearse-button { color: var(--ok-bright); box-shadow: inset 0 0 0 1px rgba(127,185,122,.4); }
.bs-rehearsal-banner {
  flex-shrink: 0;
  padding: 10px var(--s-6);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  background: repeating-linear-gradient(115deg, var(--signal) 0 14px, var(--signal-deep) 14px 28px);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--cream-50);
  text-transform: uppercase;
}
.bs-rehearsal-banner__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cream-50);
  animation: sq-pulse 1.6s cubic-bezier(.5,0,.2,1) infinite;
  flex-shrink: 0;
}
.bs-rehearsal-signups {
  flex-shrink: 0;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  background: var(--accent-quiet);
  box-shadow: var(--ring-amber);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

/* ---- Backstage: Now performing and Up next (backstage.js) ----
   The two hero cards share the performer row (bs-hero__*), the song line
   (with the Key badge beside it when there is one), the "changed by
   performer" pill and the Songbook Notes block, which drops
   sq-songbook-notes' top margin here (bs-hero-notes). Now performing's
   data-state is long (running long), performing or waiting (front of the
   queue, nobody on stage): it sets the card's tint and ring, the dot, the
   eyebrow, the clock and the avatar's ring. The cards' 18px radius isn't
   the shared --r-lg (16px): it matches C11/C12's hero cards exactly, and
   the token scale has no such step. Then the not-started and empty cards,
   Up next's end-of-show card and GO's arrow. */
.bs-hero__performer { display: flex; align-items: center; gap: var(--s-4); }
.bs-hero__text { flex: 1; min-width: 0; }
.bs-hero-song { font-size: 15px; color: var(--text-muted); margin-top: 3px; min-width: 0; }
.bs-hero-song-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.bs-change-pill { display: flex; margin-top: 8px; }
.bs-hero-notes { margin-top: 0; }
/* Running long (mockup C13): the same card, red-tinted instead of amber;
   the card itself is the focus of the alert, not the page. The amber ring
   is the mockup's exact rgba(255,178,62,.28): --ring-amber is a softer .22
   by design, for smaller UI. */
.bs-now {
  position: relative;
  padding: var(--s-5);
  border-radius: 18px;
  background: linear-gradient(120deg, rgba(255,178,62,.12), var(--surface));
  box-shadow: inset 0 0 0 1px rgba(255,178,62,.28);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.bs-now[data-state="long"] {
  background: linear-gradient(120deg, rgba(214,69,44,.16), var(--surface));
  box-shadow: inset 0 0 0 1.5px rgba(255,74,61,.55);
}
.bs-now__move { position: absolute; top: var(--s-5); right: var(--s-5); }
.bs-now__eyebrow-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.bs-now__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--text-faint); box-shadow: none; animation: none; flex-shrink: 0; }
.bs-now[data-state="performing"] .bs-now__dot,
.bs-now[data-state="long"] .bs-now__dot {
  background: var(--live);
  box-shadow: 0 0 14px rgba(255,74,61,.7);
  animation: sq-pulse 1.6s var(--ease-in-out) infinite;
}
.bs-now[data-state="long"] .bs-now__eyebrow { color: var(--signal-bright); }
.bs-now__clock {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}
.bs-now[data-state="long"] .bs-now__clock { color: var(--signal-bright); }
/* On sq-avatar--live: same specificity, later in this file. */
.bs-now__avatar { width: 64px; height: 64px; font-size: 26px; box-shadow: inset 0 0 0 1px rgba(255,178,62,.4), 0 0 14px rgba(255,178,62,.25); }
.bs-now[data-state="long"] .bs-now__avatar {
  box-shadow: inset 0 0 0 1px rgba(255,74,61,.45), 0 0 14px rgba(255,178,62,.25);
  color: var(--signal-bright);
}
.bs-now__name { font-family: var(--font-display); font-weight: var(--w-black); font-size: 38px; line-height: 1; }
.bs-now__notes {
  padding: 13px 15px;
  border-radius: var(--r-md);
  background: rgba(255,178,62,.09);
  box-shadow: inset 0 0 0 1px rgba(255,178,62,.32);
  display: flex;
  align-items: center;
  gap: 10px;
}
.bs-now__notes-text { font-size: 16px; color: var(--text); }
.bs-now__alert {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 15px;
  border-radius: 14px;
  background: rgba(214,69,44,.16);
  box-shadow: inset 0 0 0 1.5px rgba(255,74,61,.55);
  animation: sq-pulse 1.9s cubic-bezier(.5,0,.2,1) infinite;
}
.bs-now__alert-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--live);
  box-shadow: 0 0 12px rgba(255,74,61,.8);
  flex-shrink: 0;
}
.bs-now__alert-text { font-weight: 500; font-size: 16px; line-height: 1.4; color: var(--text); flex: 1; }
.bs-not-started { padding: var(--s-5); border-radius: 18px; background: var(--surface); box-shadow: var(--ring-soft); }
.bs-not-started__title { font-family: var(--font-display); font-weight: var(--w-black); font-size: 34px; line-height: 1; margin-top: 3px; }
/* One margin shorthand: a <p>'s default margin needs zeroing on every
   side but the top. */
.bs-not-started__text { font-size: 16px; line-height: var(--lh-normal); color: var(--text-muted); margin: 3px 0 0 0; }
.bs-idle-card { padding: var(--s-5); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--ring-soft); }
.bs-idle-card__text { margin-top: 10px; font-size: 14px; color: var(--text-faint); }
.bs-up-next {
  padding: var(--s-5);
  border-radius: 18px;
  background: linear-gradient(120deg, rgba(127,185,122,.12), var(--surface));
  box-shadow: var(--ring-ok);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
/* On sq-avatar--md: same specificity, later in this file. */
.bs-up-next__avatar { width: 56px; height: 56px; font-size: 22px; }
.bs-up-next__name { font-family: var(--font-display); font-weight: var(--w-black); font-size: 32px; line-height: 1; }
.bs-up-next__notes {
  padding: 12px 15px;
  border-radius: var(--r-md);
  background: rgba(255,178,62,.08);
  box-shadow: inset 0 0 0 1px rgba(255,178,62,.28);
  display: flex;
  align-items: center;
  gap: 10px;
}
.bs-up-next__notes-text { font-size: 15.5px; color: var(--text); }
.bs-end-card {
  padding: var(--s-5);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--ring-soft);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.bs-end-card__title { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; color: var(--text-faint); }
.bs-end-card__text { font-size: 13px; color: var(--text-muted); line-height: var(--lh-normal); margin: 0; }
.bs-go-arrow { font-size: 20px; }

/* ---- Backstage: filter pills (backstage.js) ----
   A pill is a <button> when it can be clicked and a <span> otherwise.
   all: unset strips a button's own chrome, so it comes first in .bs-pill
   and every later declaration wins by source order, the modifiers' and
   states' included. (While the pill was inline, a class's animation lost
   to the inline all: unset whatever the source order: Simon caught it in
   DevTools on 2026-09-13, the animation struck through, so the glow had
   to be inline too. As classes, bs-pill--glow simply comes after.) On a
   span it changes nothing that's drawn. data-state="active" is the
   selected filter (it beats aria-disabled's colour, as before);
   bs-pill--glow pulses with index.html's @keyframes bs-pill-glow. The
   tooltip ("Running order") opens on hover with data-state="open"; it
   takes no pointer events, so it never becomes a mouseleave target and
   flickers. */
.bs-pill {
  all: unset;
  height: 44px;
  padding: 0 17px;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: default;
  background: transparent;
  color: var(--text-muted);
  box-shadow: inset 0 0 0 1px var(--border);
  opacity: 1;
}
button.bs-pill { cursor: pointer; }
.bs-pill[aria-disabled="true"] { cursor: not-allowed; color: var(--text-faint); opacity: 0.55; }
.bs-pill[data-state="active"] { font-weight: 700; background: var(--accent); color: var(--text-on-amber); box-shadow: none; }
.bs-pill--glow { animation: bs-pill-glow 2.2s var(--ease-in-out) infinite; }
.bs-pill__count { font-family: var(--font-mono); font-size: 12px; color: var(--text-faint); }
.bs-pill[data-state="active"] .bs-pill__count { color: var(--text-on-amber); }
.bs-pill-wrap { position: relative; display: inline-flex; }
.bs-pill__tip {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 20;
  width: 240px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: var(--ink-800);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  line-height: var(--lh-normal);
  box-shadow: var(--shadow-lg);
  pointer-events: none;
  display: none;
}
.bs-pill__tip[data-state="open"] { display: block; }

/* ---- Backstage: modal bodies (backstage.js) ----
   The insides of Backstage's sq-dialog overlays (0b-2 made the shells).
   Shared: the grab bar, the mono eyebrow (accent, or --amber / --signal /
   --ok), the display title (28px, or --md 30 / --lg 34), the intro text
   (13px, or --lg 15), the inset panel, the action row and the error line,
   which shows and hides with the hidden attribute. Then each modal's own
   parts: the reminder's headline (its size from the text's length,
   reminderHeadlineSize()), End show's stats strip and red "End show &
   save" (an override on sq-button--primary: same specificity, later in
   this file), Quick entry's "Insert at" field and its segmented buttons
   (the picked one is aria-pressed), and the TV modals (the list and its
   rows, the status badge with data-state active / connecting, the detail
   rows and the name field). */
.bs-modal__grabber { width: 44px; height: 4px; border-radius: var(--r-pill); background: var(--border); margin: 0 auto 4px; }
.bs-modal__eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; color: var(--accent); }
.bs-modal__eyebrow--amber { color: var(--amber); }
.bs-modal__eyebrow--signal { color: var(--signal-bright); }
.bs-modal__eyebrow--ok { color: var(--ok-bright); }
.bs-modal__title { font-family: var(--font-display); font-weight: var(--w-extra); font-size: 28px; line-height: 1; }
.bs-modal__title--md { font-size: 30px; line-height: 1.1; }
.bs-modal__title--lg { font-size: 34px; }
.bs-modal__text { font-size: 13px; line-height: var(--lh-normal); color: var(--text-muted); margin: 0; }
.bs-modal__text--lg { font-size: 15px; }
.bs-modal__panel {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-4);
  border-radius: var(--r-lg);
  background: var(--ink-700);
  box-shadow: var(--ring-soft);
}
.bs-modal__actions { display: flex; gap: var(--s-3); margin-top: 4px; }
.bs-modal__error { color: var(--danger); font-size: 13px; }
.bs-reminder__headline { font-family: var(--font-display); font-weight: var(--w-extra); line-height: 1.1; overflow-wrap: anywhere; }
.bs-reminder__headline--lg { font-size: 34px; }
.bs-reminder__headline--md { font-size: 28px; }
.bs-reminder__headline--sm { font-size: 22px; }
.bs-stats {
  padding: var(--s-4);
  border-radius: var(--r-lg);
  background: var(--ink-700);
  box-shadow: var(--ring-soft);
  display: flex;
  gap: var(--s-8);
}
.bs-stat__label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: var(--text-faint);
}
.bs-stat__value { display: block; font-family: var(--font-mono); font-size: 26px; margin-top: 8px; }
.bs-stat__value--ok { color: var(--ok); }
.bs-stat__value--amber { color: var(--amber); }
/* The primary variant's own text colour (--text-on-amber) is for an amber
   fill; on this red gradient it needs its own, or the label nearly
   disappears. */
.bs-end-show-button {
  background: linear-gradient(178deg, var(--signal-bright), var(--signal-deep));
  box-shadow: 0 0 20px rgba(214,69,44,.4);
  color: var(--cream-50);
}
.bs-field { display: flex; flex-direction: column; gap: 7px; }
.bs-field__label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.bs-segments { display: flex; border-radius: var(--r-lg); box-shadow: inset 0 0 0 1px var(--border); padding: 3px; gap: 3px; }
.bs-segments__option {
  flex: 1;
  height: 38px;
  border: none;
  border-radius: var(--r-md);
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  background: transparent;
  color: var(--text-muted);
}
.bs-segments__option[aria-pressed="true"] { background: var(--accent); color: var(--text-on-amber); }
.bs-tv-list { display: flex; flex-direction: column; gap: var(--s-2); }
.bs-tv-list__empty { font-size: 13px; color: var(--text-muted); margin: 0; }
.bs-tv-list__loading { font-size: 13px; color: var(--text-faint); margin: 0; }
.bs-tv-list__error { font-size: 13px; color: var(--danger); margin: 0; }
.bs-tv-row {
  all: unset;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-lg);
  background: var(--ink-700);
  box-shadow: var(--ring-soft);
}
.bs-tv-row__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bs-tv-row__name { font-size: 14.5px; font-weight: 600; }
.bs-tv-row__meta { font-size: 12px; color: var(--text-faint); }
.bs-tv-status { --bs-tv-tone: var(--wait); display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.bs-tv-status[data-state="active"] { --bs-tv-tone: var(--ok); }
.bs-tv-status__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bs-tv-tone); flex-shrink: 0; }
.bs-tv-status__label { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.1em; color: var(--bs-tv-tone); }
.bs-tv-detail__name { font-family: var(--font-display); font-weight: var(--w-extra); font-size: 26px; line-height: 1; }
.bs-tv-detail__label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--text-faint);
}
.bs-tv-detail__value {
  display: block;
  font-size: 13.5px;
  color: var(--text-muted);
  margin-top: 3px;
  word-break: break-word;
}
.bs-tv-name { display: flex; flex-direction: column; gap: 6px; }
.bs-tv-name__label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--text-faint); }
.bs-tv-name__row { display: flex; gap: var(--s-2); align-items: center; }
.bs-tv-name__input {
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0 12px;
  border-radius: var(--r-md);
  border: none;
  background: var(--ink-700);
  box-shadow: var(--ring-soft);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
}
.bs-tv-name__saved { font-size: 12.5px; color: var(--ok-bright); min-height: 16px; }

/* ---- Backstage: lists and messages (backstage.js) ----
   The collapsible "Performed" section (a reset button, its count, rule
   and ▾/▴ arrow) and the flat section heading the filters use; then a
   message card (C9): its head, text, action row, the ON TV status with
   its round ✕, QUEUED FOR TV, and the Send to TV picker (SHOW FOR 30s /
   1m). The picker's options and the ✕ take data-state="busy" while a
   request is in flight: a wait cursor, dimmed. */
.bs-section { display: flex; flex-direction: column; }
/* border-box after all: unset (which resets it to content-box): with
   width: 100% plus its 6px side padding the toggle was 12px wider than the
   running order's scroll box, and on desktop, where that box clips, the
   ▾/▴ arrow sat in the clipped strip and never showed (Simon, 2026-10-15). */
.bs-section__toggle {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 6px 4px;
  width: 100%;
}
.bs-section-header { display: flex; align-items: center; gap: 10px; padding: 10px 6px 4px; }
.bs-section__count { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); }
.bs-section__rule { flex: 1; height: 1px; background: var(--border); }
.bs-section__arrow { font-size: 16px; color: var(--text-faint); }
.bs-section__list { display: flex; flex-direction: column; gap: 6px; }
.bs-message {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 15px;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border);
}
.bs-message__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.bs-message__name { font-family: var(--font-display); font-weight: 700; font-size: 16px; }
.bs-message__time { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); }
.bs-message__text { font-size: 14.5px; color: var(--text); line-height: 1.5; white-space: pre-wrap; }
.bs-message__actions { display: flex; gap: 8px; }
.bs-message__tv-row { display: flex; align-items: center; gap: 8px; }
.bs-message__on-tv {
  height: 44px;
  padding: 0 15px;
  border-radius: 12px;
  background: var(--accent-quiet);
  box-shadow: inset 0 0 0 1px rgba(255,178,62,.3);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
}
.bs-message__clear {
  all: unset;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--danger);
  box-shadow: inset 0 0 0 1px var(--danger);
  cursor: pointer;
  opacity: 1;
  flex-shrink: 0;
}
.bs-message__queued {
  height: 44px;
  padding: 0 15px;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px var(--border);
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  width: fit-content;
}
.bs-tv-picker { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
.bs-tv-picker__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--text-faint);
  flex-shrink: 0;
}
.bs-tv-picker__option {
  all: unset;
  height: 38px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1px var(--border);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  opacity: 1;
}
.bs-tv-picker__option[data-state="busy"],
.bs-message__clear[data-state="busy"] { cursor: wait; opacity: 0.55; }

/* ---- Backstage: ended screen and the forScore prompt (backstage.js) ----
   The wrap-up screen after End show (its intro and the final running
   order by outcome; the connecting screen reuses bs-placeholder), then
   the text and buttons of the "forScore link" flag prompt. */
.bs-ended {
  flex: 1;
  overflow-y: auto;
  display: flex;
  justify-content: center;
  padding: var(--s-10) var(--s-5);
}
.bs-ended__column { max-width: 560px; width: 100%; display: flex; flex-direction: column; gap: var(--s-6); }
.bs-ended__intro { text-align: center; display: flex; flex-direction: column; gap: var(--s-3); }
.bs-ended__title { font-family: var(--font-display); font-weight: var(--w-black); font-size: 24px; }
.bs-ended__text { font-size: 14px; color: var(--text-muted); line-height: var(--lh-normal); }
.bs-ended__order { display: flex; flex-direction: column; gap: var(--s-5); }
.bs-summary { display: flex; flex-direction: column; gap: var(--s-2); }
.bs-summary__list { display: flex; flex-direction: column; gap: 4px; }
.bs-flag-prompt__text { font-size: 15px; color: var(--text); line-height: 1.45; }
.bs-flag-prompt__actions { display: flex; gap: var(--s-3); flex-wrap: wrap; }