/* Gel: component styles. Everything reads tokens.css custom properties.
   Root: <div class="gel" data-theme="booth|house|seance|signal|marquee" data-density="compact|default|roomy|booth"> */

/* Reset (after good-css.com): border-box, min-width:0 so flex/grid children can shrink, balanced and pretty wrapping,
   no synthesized font weights, a stable scrollbar gutter so modals do not shift the page. */
:root { scrollbar-gutter: stable; }
.gel, .gel *, .gel *::before, .gel *::after { box-sizing: border-box; }
:where(.gel *) { min-width: 0; }
.gel { text-wrap: pretty; overflow-wrap: break-word; font-synthesis: none; color-scheme: dark; }
.gel :where(h1, h2, h3, h4, .gel-display, .gel-card__title, .gel-hero__title, .gel-prompt, .gel-sectionhead h2) { text-wrap: balance; }
.gel :where(img, video) { display: block; max-width: 100%; height: auto; }
.gel :where(svg) { max-width: 100%; }
.gel :where(time, .gel-price) { font-variant-numeric: tabular-nums; }
/* One set of tokens, two color schemes: the theme sets color-scheme so native controls, scrollbars and
   the canvas match before any component paints. */
[data-theme="house"], [data-theme="marquee"] { color-scheme: light; }
[data-theme="booth"], [data-theme="seance"], [data-theme="signal"] { color-scheme: dark; }
/* Motion is opt-in. Moves and scales get a duration only when the user has not asked for less; fades always run. */
.gel { --mv-instant: 0s linear; --mv-fast: 0s linear; --mv-base: 0s linear; --mv-slow: 0s linear; }
@media (prefers-reduced-motion: no-preference) {
  .gel { --mv-instant: var(--dur-instant) var(--ease-out); --mv-fast: var(--dur-fast) var(--ease-out);
         --mv-base: var(--dur-base) var(--ease-in-out); --mv-slow: var(--dur-slow) var(--ease-in-out); }
}
.gel {
  --gel-ctl-h: var(--control-default); --gel-row-h: var(--row-default); --gel-fs: 14px; --gel-pad: var(--space-4);
  --gel-bw: 1px; --gel-ground: var(--surface-0); --gel-cell-py: var(--space-2);
  font-family: var(--font-sans); font-size: 16px; line-height: 24px; color: var(--ink); background: var(--surface-0);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  transition: background-color var(--dur-crossfade) var(--ease-in-out), color var(--dur-crossfade) var(--ease-in-out);
}
[data-density="compact"] { --gel-ctl-h: var(--control-compact); --gel-row-h: var(--row-compact); --gel-fs: 13px; --gel-pad: var(--space-3); --gel-cell-py: var(--space-1); }
[data-density="default"] { --gel-ctl-h: var(--control-default); --gel-row-h: var(--row-default); --gel-fs: 14px; --gel-pad: var(--space-4); --gel-cell-py: var(--space-2); }
[data-density="roomy"]   { --gel-ctl-h: var(--control-roomy);   --gel-row-h: var(--row-roomy);   --gel-fs: 16px; --gel-pad: var(--space-5); --gel-cell-py: var(--space-3); }
[data-density="booth"]   { --gel-ctl-h: var(--control-booth);   --gel-row-h: var(--row-booth);   --gel-fs: 18px; --gel-pad: var(--space-5); --gel-cell-py: var(--space-4); }
[data-theme="marquee"] { --gel-bw: 2px; }

.gel :where(a) { color: var(--accent); text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .gel :where(a):hover { text-decoration-thickness: 2px; } }
.gel ::selection { background: var(--accent-fill); color: var(--on-fill); }
.gel h1, .gel h2, .gel h3, .gel h4 { margin: 0; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: .015em; line-height: 1; }
.gel p { margin: 0; }
.gel hr { border: 0; border-block-start: 1px solid var(--line); margin: 0; }

/* ---------- type helpers ---------- */
.gel-eyebrow { font: 600 12px/16px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }
.gel-display { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: .01em; line-height: .92; }
.gel-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.gel-muted { color: var(--ink-muted); } .gel-subtle { color: var(--ink-subtle); }
.gel-quote { font-family: var(--font-serif); font-style: italic; }
.gel-sr { position: absolute !important; width: 1px; height: 1px; overflow: clip; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- layout helpers ---------- */
.gel-container { width: 100%; max-width: var(--container-wide); margin-inline: auto; padding-inline: var(--space-4); }
.gel-stack { display: flex; flex-direction: column; gap: var(--space-4); }
.gel-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.gel-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.gel-spacer { flex: 1; }

/* ---------- spotlight focus ring ---------- */
.gel :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.gel :where(.gel-switch input, .gel-check input, .gel-radio input):focus-visible + * {
  outline: 2px solid var(--focus); outline-offset: 2px;
  box-shadow: 0 0 0 7px color-mix(in oklch, var(--focus) 22%, transparent);
}
.gel :where(a, button, input, select, textarea, summary):focus-visible { transition: box-shadow var(--dur-fast) var(--ease-fade); }

/* ---------- Button ---------- */
.gel-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--gel-ctl-h); padding: 0 var(--gel-pad); font: 600 var(--gel-fs)/1.1 var(--font-sans);
  color: var(--ink); background: var(--surface-2); border: var(--gel-bw) solid var(--line-strong); border-radius: var(--radius-md);
  box-shadow: var(--shadow-1); cursor: pointer; text-decoration: none; white-space: nowrap; user-select: none;
  transition: background-color var(--dur-fast) var(--ease-fade), border-color var(--dur-fast) var(--ease-fade), transform var(--mv-instant);
}
@media (hover: hover) and (pointer: fine) { .gel-btn:hover { background: var(--surface-3); border-color: var(--ink-muted); } }
.gel-btn:active { transform: translateY(1px); }
.gel-btn[disabled], .gel-btn[aria-disabled="true"] { color: var(--ink-disabled); border-color: var(--line); background: transparent; box-shadow: none; cursor: not-allowed; transform: none; }
.gel-btn svg, .gel-icon { width: 1.15em; height: 1.15em; flex: none; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.gel-btn--accent { background: var(--accent-fill); color: var(--on-fill); border-color: var(--accent); }
@media (hover: hover) and (pointer: fine) { .gel-btn--accent:hover { background: var(--accent-fill); filter: brightness(1.08); border-color: var(--accent); } }
.gel-btn--outline { background: transparent; box-shadow: none; border-color: var(--accent); color: var(--accent); }
@media (hover: hover) and (pointer: fine) { .gel-btn--outline:hover { background: color-mix(in oklch, var(--accent) 14%, transparent); border-color: var(--accent); } }
.gel-btn--ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .gel-btn--ghost:hover { background: var(--surface-2); border-color: transparent; } }
.gel-btn--stop { background: transparent; color: var(--danger); border-color: var(--danger); box-shadow: none; font-family: var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
@media (hover: hover) and (pointer: fine) { .gel-btn--stop:hover { background: color-mix(in oklch, var(--danger) 14%, transparent); border-color: var(--danger); } }
.gel-btn--sm { min-height: var(--control-compact); padding: 0 var(--space-3); font-size: 13px; }
.gel-btn--lg { min-height: var(--control-roomy); padding: 0 var(--space-6); font-size: 16px; }
.gel-btn--block { display: flex; width: 100%; }
.gel-btn--icon { padding: 0; width: var(--gel-ctl-h); }

/* The GO key: the primary action. Lit mono caps, an LED, and a bevel like a console key. */
.gel-btn--go {
  position: relative; min-width: 104px; gap: var(--space-3);
  background: var(--go-fill); color: var(--on-fill); border-color: color-mix(in oklch, var(--go-fill) 55%, black);
  font-family: var(--font-mono); font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  box-shadow: inset 0 1px 0 color-mix(in oklch, white 30%, transparent), inset 0 -3px 0 color-mix(in oklch, black 18%, transparent), var(--shadow-1), var(--shadow-spot);
}
.gel-btn--go::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--on-fill); opacity: .75; }
@media (hover: hover) and (pointer: fine) { .gel-btn--go:hover { background: var(--go-fill); filter: brightness(1.07); border-color: color-mix(in oklch, var(--go-fill) 55%, black); } }
.gel-btn--go:active { box-shadow: inset 0 2px 0 color-mix(in oklch, black 22%, transparent), var(--shadow-spot); transform: translateY(2px); }
.gel-btn--go[disabled] { background: var(--surface-2); color: var(--ink-disabled); box-shadow: none; filter: none; }
.gel-btn--go[disabled]::before { opacity: .3; }
.gel-btn--go.gel-btn--lg { min-height: var(--control-booth); min-width: 160px; font-size: 20px; }

/* ---------- Fields ---------- */
.gel-field { display: flex; flex-direction: column; gap: var(--space-1); }
.gel-label { font: 600 12px/16px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); }
.gel-input, .gel-select, .gel-textarea {
  width: 100%; min-height: var(--gel-ctl-h); padding: 0 var(--space-3); font: 400 var(--gel-fs)/1.3 var(--font-sans); color: var(--ink);
  background: var(--surface-0); border: var(--gel-bw) solid var(--line-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-inset);
  transition: border-color var(--dur-fast) var(--ease-fade);
}
.gel-textarea { padding: var(--space-3); field-sizing: content; min-block-size: 3lh; max-block-size: 12lh; resize: none; line-height: 1.45; }
.gel-input::placeholder, .gel-textarea::placeholder { color: var(--ink-subtle); }
@media (hover: hover) and (pointer: fine) { .gel-input:hover, .gel-select:hover, .gel-textarea:hover { border-color: var(--ink-muted); } }
.gel-input:disabled { color: var(--ink-disabled); border-color: var(--line); background: transparent; box-shadow: none; }
.gel-input[aria-invalid="true"], .gel-textarea[aria-invalid="true"] { border-color: var(--danger); }
.gel-hint { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.gel-error { display: flex; align-items: center; gap: var(--space-1); font-size: 13px; line-height: 18px; color: var(--danger); font-weight: 500; }
.gel-error svg { inline-size: 1.1em; block-size: 1.1em; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.gel-input-group { position: relative; }
.gel-input-group > svg { position: absolute; inset-inline-start: var(--space-3); inset-block-start: 50%; transform: translateY(-50%); inline-size: 1.1em; block-size: 1.1em; stroke: var(--ink-muted); fill: none; stroke-width: 1.6; stroke-linecap: round; pointer-events: none; }
.gel-input-group > .gel-input { padding-inline-start: calc(var(--space-3) + 24px); }
.gel-select-wrap { position: relative; }
.gel-select { appearance: none; -webkit-appearance: none; padding-inline-end: var(--space-8); cursor: pointer; }
.gel-select-wrap::after { content: ""; position: absolute; inset-inline-end: 14px; inset-block-start: calc(50% - 5px); width: 7px; height: 7px; border: solid var(--ink-muted); border-width: 0 2px 2px 0; transform: rotate(45deg); pointer-events: none; }

/* ---------- Toggle: switch / checkbox / radio ---------- */
.gel-switch, .gel-check, .gel-radio { display: inline-flex; align-items: center; gap: var(--space-3); min-height: var(--gel-ctl-h); font-size: var(--gel-fs); cursor: pointer; color: var(--ink); }
.gel-switch input, .gel-check input, .gel-radio input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.gel-switch__track { position: relative; width: 46px; height: 26px; flex: none; border-radius: var(--radius-pill); background: var(--surface-0); border: var(--gel-bw) solid var(--line-strong); transition: background-color var(--dur-base) var(--ease-fade), border-color var(--dur-base) var(--ease-fade); }
.gel-switch__track::before { content: ""; position: absolute; inset-block-start: 3px; inset-inline-start: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--ink-muted); transition: transform var(--mv-base), background-color var(--dur-base) var(--ease-fade); }
.gel-switch__track::after { content: "OFF"; position: absolute; inset-inline-end: 6px; inset-block-start: 50%; transform: translateY(-50%); font: 700 8px/1 var(--font-mono); letter-spacing: .04em; color: var(--ink-muted); }
.gel-switch input:checked + .gel-switch__track { background: var(--accent-fill); border-color: var(--accent); }
.gel-switch input:checked + .gel-switch__track::before { transform: translateX(20px); background: var(--on-fill); }
.gel-switch input:checked + .gel-switch__track::after { content: "ON"; inset-inline-start: 7px; inset-inline-end: auto; color: var(--on-fill); }
.gel-switch input:disabled + .gel-switch__track { opacity: .45; } .gel-switch input:disabled ~ span { color: var(--ink-disabled); }
.gel-check__box, .gel-radio__box { position: relative; width: 20px; height: 20px; flex: none; background: var(--surface-0); border: var(--gel-bw) solid var(--line-strong); border-radius: var(--radius-sm); transition: background-color var(--dur-fast) var(--ease-fade); }
.gel-radio__box { border-radius: 50%; }
.gel-check input:checked + .gel-check__box { background: var(--accent-fill); border-color: var(--accent); }
.gel-check input:checked + .gel-check__box::after { content: ""; position: absolute; inset-inline-start: 5px; inset-block-start: 1px; width: 6px; height: 11px; border: solid var(--on-fill); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.gel-check input:indeterminate + .gel-check__box { background: var(--accent-fill); border-color: var(--accent); }
.gel-check input:indeterminate + .gel-check__box::after { content: ""; position: absolute; inset-inline-start: 4px; inset-block-start: 8px; width: 10px; height: 2.5px; background: var(--on-fill); }
.gel-radio input:checked + .gel-radio__box { border-color: var(--accent); }
.gel-radio input:checked + .gel-radio__box::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--accent-fill); outline: 1.5px solid var(--accent); }

/* ---------- Tabs ---------- */
.gel-tabs { display: flex; gap: var(--space-1); border-block-end: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.gel-tab { position: relative; display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--gel-ctl-h); padding: 0 var(--space-4); font: 600 var(--gel-fs)/1 var(--font-sans); color: var(--ink-muted); background: none; border: 0; cursor: pointer; white-space: nowrap; transition: color var(--dur-fast) var(--ease-fade); }
@media (hover: hover) and (pointer: fine) { .gel-tab:hover { color: var(--ink); } }
.gel-tab[aria-selected="true"] { color: var(--ink); }
.gel-tab[aria-selected="true"]::after { content: ""; position: absolute; inset-inline-start: var(--space-3); inset-inline-end: var(--space-3); inset-block-end: -1px; height: 3px; background: var(--accent-fill); border-radius: 2px 2px 0 0; box-shadow: 0 0 14px color-mix(in oklch, var(--accent-fill) 55%, transparent); }
.gel-tab__count { font: 500 11px/1 var(--font-mono); padding: 3px 5px; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--ink-muted); }
.gel-seg { display: inline-flex; padding: 3px; gap: 3px; background: var(--surface-0); border: var(--gel-bw) solid var(--line-strong); border-radius: var(--radius-md); }
.gel-seg button { min-height: calc(var(--gel-ctl-h) - 8px); padding: 0 var(--space-4); font: 600 var(--gel-fs)/1 var(--font-sans); color: var(--ink-muted); background: transparent; border: 0; border-radius: calc(var(--radius-md) - 1px); cursor: pointer; }
.gel-seg button[aria-pressed="true"] { background: var(--accent-fill); color: var(--on-fill); }
.gel-tabpanel { padding-block-start: var(--space-4); }
.gel-tabpanel[hidden] { display: none; }

/* ---------- Badge and status pill ---------- */
.gel-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; font: 600 11px/16px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); white-space: nowrap; }
.gel-badge--accent { color: var(--accent); background: color-mix(in oklch, var(--accent) 14%, var(--surface-1)); border-color: color-mix(in oklch, var(--accent) 55%, transparent); }
.gel-badge--accent-2 { color: var(--accent-2); background: color-mix(in oklch, var(--accent-2) 14%, var(--surface-1)); border-color: color-mix(in oklch, var(--accent-2) 55%, transparent); }
.gel-badge--solid { color: var(--on-fill); background: var(--accent-fill); border-color: var(--accent); }
.gel-pill { --_c: var(--ink-muted); display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 8px; font: 600 12px/18px var(--font-sans); color: var(--_c); background: color-mix(in oklch, var(--_c) 14%, var(--surface-1)); border: 1px solid color-mix(in oklch, var(--_c) 45%, transparent); border-radius: var(--radius-pill); white-space: nowrap; }
.gel-pill::before { content: "\25C7"; font-size: 11px; line-height: 1; }
.gel-pill[data-status="draft"] { --_c: var(--status-draft); }
.gel-pill[data-status="live"] { --_c: var(--status-live); } .gel-pill[data-status="live"]::before { content: "\25CF"; }
.gel-pill[data-status="done"] { --_c: var(--status-done); } .gel-pill[data-status="done"]::before { content: "\2713"; font-weight: 700; }
.gel-pill[data-status="blocked"] { --_c: var(--status-blocked); } .gel-pill[data-status="blocked"]::before { content: "\25A0"; }
.gel-pill[data-status="cancelled"] { --_c: var(--status-cancelled); text-decoration: line-through; text-decoration-thickness: 1px; } .gel-pill[data-status="cancelled"]::before { content: "\2715"; text-decoration: none; display: inline-block; }
@keyframes gel-onair { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* ---------- Cards ---------- */
.gel-card { position: relative; background: var(--surface-1); border: var(--gel-bw) solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); }
[data-theme="marquee"] .gel-card { border-color: var(--ink); }
.gel-card__body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.gel-card__title { font: 800 28px/1 var(--font-display); text-transform: uppercase; letter-spacing: .02em; }
.gel-card--interactive { transition: border-color var(--dur-fast) var(--ease-fade), transform var(--mv-base); }
@media (hover: hover) and (pointer: fine) { .gel-card--interactive:hover { border-color: var(--accent); } }

/* Ticket stub */
.gel-stub { --stub-w: 112px; display: grid; grid-template-columns: 1fr var(--stub-w); background: var(--surface-1); border: var(--gel-bw) solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); position: relative; }
[data-theme="marquee"] .gel-stub { border-color: var(--ink); }
.gel-stub__main { padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.gel-stub__rule { position: absolute; inset-block-start: 12px; inset-block-end: 12px; inset-inline-end: var(--stub-w); border-inline-start: 2px dashed var(--line-strong); }
.gel-stub::before, .gel-stub::after { content: ""; position: absolute; inset-inline-end: calc(var(--stub-w) - 9px); width: 18px; height: 18px; border-radius: 50%; background: var(--gel-ground); border: var(--gel-bw) solid var(--line); z-index: 1; }
[data-theme="marquee"] .gel-stub::before, [data-theme="marquee"] .gel-stub::after { border-color: var(--ink); }
.gel-stub::before { inset-block-start: -10px; clip-path: inset(10px 0 0 0); }
.gel-stub::after { inset-block-end: -10px; clip-path: inset(0 0 10px 0); }
.gel-stub__stub { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: var(--space-3); text-align: center; color: var(--accent); }
.gel-stub__day { font: 800 52px/.9 var(--font-display); letter-spacing: .01em; }
.gel-stub__mon { font: 700 13px/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; }
.gel-stub__time { font: 500 12px/1 var(--font-mono); color: var(--ink-muted); margin-block-start: var(--space-2); }
.gel-stub__title { font: 800 30px/.95 var(--font-display); text-transform: uppercase; letter-spacing: .02em; }
.gel-stub__meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); font: 500 12px/16px var(--font-mono); color: var(--ink-muted); letter-spacing: .04em; text-transform: uppercase; }
.gel-stub--past { opacity: 1; } .gel-stub--past .gel-stub__stub { color: var(--ink-subtle); }
.gel-stub--past .gel-stub__title { color: var(--ink-muted); }

/* Profile card */
.gel-profile { display: grid; gap: var(--space-3); padding: var(--space-4); background: var(--surface-1); border: var(--gel-bw) solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); }
.gel-profile__head { display: flex; gap: var(--space-3); align-items: center; }
.gel-profile__name { font: 800 24px/1 var(--font-display); text-transform: uppercase; letter-spacing: .02em; }
.gel-profile__meta { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.gel-tags { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); }

/* Stat tile */
.gel-stat { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--gel-pad); background: var(--surface-1); border: var(--gel-bw) solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); min-width: 0; }
.gel-stat__value { font: 700 36px/1 var(--font-mono); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.gel-stat__delta { display: inline-flex; align-items: center; gap: 4px; font: 600 12px/16px var(--font-mono); color: var(--ink-muted); }
.gel-stat__delta[data-trend="up"] { color: var(--go); } .gel-stat__delta[data-trend="down"] { color: var(--danger); }
.gel-spark { width: 100%; height: 28px; stroke: var(--accent); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Table ---------- */
.gel-tablewrap { overflow-x: auto; background: var(--surface-1); border: var(--gel-bw) solid var(--line); border-radius: var(--radius-lg); }
.gel-table { width: 100%; border-collapse: collapse; font-size: var(--gel-fs); line-height: 1.3; }
.gel-table th { position: sticky; inset-block-start: 0; text-align: start; white-space: nowrap; padding: var(--gel-cell-py) var(--space-3); font: 600 11px/16px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); background: var(--surface-2); border-block-end: 1px solid var(--line-strong); }
.gel-table td { padding: var(--gel-cell-py) var(--space-3); border-block-end: 1px solid var(--line); height: var(--gel-row-h); vertical-align: middle; }
@media (hover: hover) and (pointer: fine) { .gel-table tbody tr:hover td { background: color-mix(in oklch, var(--accent) 7%, var(--surface-1)); } }
.gel-table tbody tr[aria-selected="true"] td { background: color-mix(in oklch, var(--accent) 14%, var(--surface-1)); }
.gel-table tr:last-child td { border-block-end: 0; }
.gel-table .num, .gel-table td.num, .gel-table th.num { text-align: end; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.gel-table td.mono { font-family: var(--font-mono); font-size: .94em; }
.gel-sort { display: inline-flex; align-items: center; gap: 6px; padding: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.gel-sort::after { content: "\2195"; color: var(--ink-subtle); font-size: 12px; }
th[aria-sort="ascending"] .gel-sort::after { content: "\25B2"; color: var(--accent); font-size: 9px; }
th[aria-sort="descending"] .gel-sort::after { content: "\25BC"; color: var(--accent); font-size: 9px; }
th[aria-sort] .gel-sort { color: var(--ink); }

/* ---------- Calendar ---------- */
.gel-cal { background: var(--surface-1); border: var(--gel-bw) solid var(--line); border-radius: var(--radius-lg); overflow: clip; }
.gel-cal__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-block-end: 1px solid var(--line); }
.gel-cal__title { font: 800 26px/1 var(--font-display); text-transform: uppercase; letter-spacing: .02em; }
.gel-cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.gel-cal__dow { padding: var(--space-2); text-align: center; font: 600 11px/16px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); border-block-end: 1px solid var(--line); }
.gel-cal__day { min-height: 84px; padding: var(--space-1) var(--space-2) var(--space-2); border-inline-end: 1px solid var(--line); border-block-end: 1px solid var(--line); display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gel-cal__day:nth-child(7n) { border-inline-end: 0; }
.gel-cal__day[data-out] { background: color-mix(in oklch, var(--surface-0) 70%, transparent); } .gel-cal__day[data-out] .gel-cal__n { color: var(--ink-subtle); }
.gel-cal__n { font: 600 12px/20px var(--font-mono); color: var(--ink-muted); }
.gel-cal__day[data-today] .gel-cal__n { display: inline-grid; place-items: center; inline-size: 1.4em; block-size: 1.4em; border-radius: 50%; color: var(--on-fill); background: var(--accent-fill); outline: 2px solid var(--accent); outline-offset: 2px; }
.gel-evt { display: block; padding: 1px 5px; font: 600 11px/16px var(--font-sans); color: var(--ink); background: color-mix(in oklch, var(--accent) 16%, var(--surface-1)); border: 1px solid color-mix(in oklch, var(--accent) 50%, transparent); border-radius: var(--radius-sm); white-space: nowrap; overflow: clip; text-overflow: ellipsis; }
.gel-evt[data-kind="show"] { background: color-mix(in oklch, var(--go) 16%, var(--surface-1)); border-color: color-mix(in oklch, var(--go) 50%, transparent); }
.gel-evt[data-kind="tech"] { background: color-mix(in oklch, var(--accent-2) 16%, var(--surface-1)); border-color: color-mix(in oklch, var(--accent-2) 50%, transparent); }
.gel-evt[data-kind="off"] { background: transparent; border-style: dashed; border-color: var(--line-strong); color: var(--ink-muted); }

/* Availability grid: three states, each with a glyph so color is never the only signal */
.gel-avail { display: grid; gap: 3px; overflow-x: auto; padding: var(--space-3); background: var(--surface-1); border: var(--gel-bw) solid var(--line); border-radius: var(--radius-lg); }
.gel-avail__row { display: grid; grid-template-columns: 88px repeat(var(--cols, 7), minmax(var(--avail-w, 44px), 1fr)); gap: 3px; align-items: stretch; }
.gel-avail__who { display: flex; align-items: center; font: 500 13px/16px var(--font-sans); color: var(--ink); padding-inline-end: var(--space-2); white-space: nowrap; overflow: clip; text-overflow: ellipsis; }
.gel-avail__col { text-align: center; font: 600 11px/16px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.gel-avail__cell { display: grid; place-items: center; min-height: var(--gel-ctl-h); font: 700 13px/1 var(--font-mono); color: var(--ink-subtle); background: var(--surface-0); border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; padding: 0; transition: background-color var(--dur-fast) var(--ease-fade); }
.gel-avail__cell[data-state="yes"] { color: var(--on-fill); background: var(--go-fill); border-color: var(--go); }
.gel-avail__cell[data-state="yes"]::before { content: "\2713"; }
.gel-avail__cell[data-state="maybe"] { color: var(--ink); background: repeating-linear-gradient(135deg, color-mix(in oklch, var(--accent) 30%, var(--surface-1)) 0 5px, var(--surface-1) 5px 10px); border-color: var(--accent); }
.gel-avail__cell[data-state="maybe"]::before { content: "?"; }
.gel-avail__cell[data-state="no"]::before { content: "\2013"; }
.gel-avail__cell[data-best] { outline: 2px solid var(--focus); outline-offset: 1px; }
.gel-avail__sum .gel-avail__cell { cursor: default; background: transparent; border-color: transparent; color: var(--ink); }
.gel-legend { display: flex; gap: var(--space-4); flex-wrap: wrap; font-size: 13px; color: var(--ink-muted); align-items: center; }
.gel-legend i { display: inline-grid; place-items: center; inline-size: 1.4em; block-size: 1.4em; font: 700 12px/1 var(--font-mono); border-radius: var(--radius-sm); margin-inline-end: 6px; border: 1px solid var(--line); font-style: normal; }

/* ---------- Timeline and credits ---------- */
.gel-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.gel-timeline__item { display: grid; grid-template-columns: 76px 20px 1fr; column-gap: var(--space-3); padding-block-end: var(--space-6); }
.gel-timeline__item:last-child { padding-block-end: 0; }
.gel-timeline__year { font: 700 14px/22px var(--font-mono); color: var(--ink-muted); text-align: end; }
.gel-timeline__dot { position: relative; display: flex; justify-content: center; }
.gel-timeline__dot::before { content: ""; position: absolute; inset-block-start: 6px; inset-block-end: calc(-1 * var(--space-6) - 6px); width: 2px; background: var(--line-strong); }
.gel-timeline__item:last-child .gel-timeline__dot::before { display: none; }
.gel-timeline__dot::after { content: ""; position: relative; margin-block-start: 6px; width: 11px; height: 11px; border-radius: 50%; background: var(--surface-0); border: 2px solid var(--accent); box-shadow: 0 0 0 4px var(--surface-0); }
.gel-timeline__item[data-current] .gel-timeline__dot::after { background: var(--accent-fill); }
.gel-timeline__title { font: 700 17px/22px var(--font-sans); }
.gel-timeline__sub { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.gel-credits { list-style: none; margin: 0; padding: 0; }
.gel-credit { display: flex; align-items: baseline; gap: var(--space-3); padding: var(--space-2) 0; font-size: var(--gel-fs); }
.gel-credit__yr { flex: none; width: 56px; font: 500 12px/20px var(--font-mono); color: var(--ink-muted); }
.gel-credit__title { font-weight: 600; }
.gel-credit__dots { flex: 1; min-width: 16px; border-block-end: 2px dotted var(--line-strong); transform: translateY(-4px); }
.gel-credit__role { flex: none; font: 500 12px/20px var(--font-mono); letter-spacing: .04em; color: var(--ink-muted); text-transform: uppercase; text-align: end; }

/* ---------- Checklist ---------- */
.gel-checklist { background: var(--surface-1); border: var(--gel-bw) solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); }
.gel-checklist__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4) var(--space-2); }
.gel-progress { display: flex; gap: 3px; padding: 0 var(--space-4) var(--space-3); }
.gel-progress i { flex: 1; height: 6px; background: var(--surface-2); border-radius: 1px; border: 1px solid var(--line); }
.gel-progress i[data-on] { background: var(--go-fill); border-color: var(--go); }
.gel-checklist ul { list-style: none; margin: 0; padding: 0 var(--space-2) var(--space-2); }
.gel-checklist li { border-block-start: 1px solid var(--line); }
.gel-checklist li .gel-check { width: 100%; padding: 0 var(--space-2); min-height: var(--gel-row-h); }
.gel-checklist input:checked ~ .gel-check__text { color: var(--ink-muted); text-decoration: line-through; text-decoration-thickness: 1px; }
.gel-count { font: 600 13px/1 var(--font-mono); color: var(--ink-muted); }

/* ---------- Alerts and toasts ---------- */
.gel-alert { --_c: var(--info); display: flex; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: color-mix(in oklch, var(--_c) 12%, var(--surface-1)); border: 1px solid color-mix(in oklch, var(--_c) 55%, transparent); border-radius: var(--radius-lg); color: var(--ink); }
.gel-alert[data-tone="success"] { --_c: var(--success); } .gel-alert[data-tone="warn"] { --_c: var(--warn); } .gel-alert[data-tone="error"] { --_c: var(--danger); }
.gel-alert__icon { flex: none; inline-size: 1.4em; block-size: 1.4em; stroke: var(--_c); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; margin-block-start: 1px; }
.gel-alert__title { font-weight: 700; font-size: 15px; line-height: 22px; }
.gel-alert__text { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.gel-alert__body { flex: 1; min-width: 0; }
.gel-toast { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4); background: var(--surface-3); color: var(--ink); border: var(--gel-bw) solid var(--line-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); font-size: 14px; line-height: 20px; animation: gel-fade-in var(--dur-base) var(--ease-fade) both; max-width: 420px; }
.gel-toast__icon { width: 20px; height: 20px; stroke: var(--go); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.gel-toast[data-tone="error"] .gel-toast__icon { stroke: var(--danger); }
@keyframes gel-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Modal ---------- */
.gel-scrim { position: absolute; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; padding: var(--space-4); background: var(--scrim); animation: gel-fade-in var(--dur-slow) var(--ease-fade) both; }
.gel-scrim[hidden] { display: none; }
.gel-modal { width: 100%; max-width: 440px; background: var(--surface-3); color: var(--ink); border: var(--gel-bw) solid var(--line-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-3), var(--shadow-spot); }
.gel-modal__head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-4) 0; }
.gel-modal__title { font: 800 28px/1 var(--font-display); text-transform: uppercase; letter-spacing: .02em; flex: 1; }
.gel-modal__body { padding: var(--space-3) var(--space-4) var(--space-4); color: var(--ink-muted); font-size: 15px; line-height: 22px; }
.gel-modal__foot { display: flex; justify-content: flex-end; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-block-start: 1px solid var(--line); }

/* ---------- Navigation ---------- */
.gel-navbar { display: flex; align-items: center; gap: var(--space-4); min-height: 56px; padding: 0 var(--space-4); background: var(--surface-1); border-block-end: var(--gel-bw) solid var(--line); position: relative; z-index: var(--z-nav); }
[data-theme="marquee"] .gel-navbar { border-block-end-color: var(--ink); }
.gel-brand { display: inline-flex; align-items: center; gap: var(--space-2); font: 800 24px/1 var(--font-display); text-transform: uppercase; letter-spacing: .03em; color: var(--ink); text-decoration: none; }
.gel-brand::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent-fill); box-shadow: 0 0 12px var(--accent-fill); }
.gel-navlinks { display: flex; gap: var(--space-1); list-style: none; margin: 0; padding: 0; flex: 1; }
.gel-navlink { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--space-3); font: 600 14px/1 var(--font-sans); color: var(--ink-muted); text-decoration: none; border-radius: var(--radius-md); }
@media (hover: hover) and (pointer: fine) { .gel-navlink:hover { color: var(--ink); background: var(--surface-2); } }
.gel-navlink[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -3px 0 var(--accent-fill); border-radius: 0; }
.gel-sidenav { display: flex; flex-direction: column; gap: var(--space-1); width: 232px; padding: var(--space-3); background: var(--surface-1); border-inline-end: var(--gel-bw) solid var(--line); }
.gel-sidenav__group { margin: var(--space-4) var(--space-3) var(--space-1); font: 600 11px/16px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-subtle); }
.gel-sidenav__item { display: flex; align-items: center; gap: var(--space-3); min-height: 36px; padding: 0 var(--space-3); font: 500 14px/1 var(--font-sans); color: var(--ink-muted); text-decoration: none; border-radius: var(--radius-md); }
.gel-sidenav__item svg { inline-size: 1.15em; block-size: 1.15em; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
@media (hover: hover) and (pointer: fine) { .gel-sidenav__item:hover { background: var(--surface-2); color: var(--ink); } }
.gel-sidenav__item[aria-current="page"] { background: color-mix(in oklch, var(--accent) 14%, var(--surface-1)); color: var(--ink); font-weight: 600; }
.gel-sidenav__item[aria-current="page"] svg { stroke: var(--accent); }
.gel-sidenav__item .gel-count { margin-inline-start: auto; }
.gel-tabbar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--surface-1); border-block-start: var(--gel-bw) solid var(--line-strong); padding-block-end: env(safe-area-inset-bottom, 0); }
.gel-tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 60px; font: 600 11px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); text-decoration: none; }
.gel-tabbar a svg { inline-size: 1.4em; block-size: 1.4em; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.gel-tabbar a[aria-current="page"] { color: var(--accent); box-shadow: inset 0 3px 0 var(--accent-fill); }

/* ---------- Footer ---------- */
.gel-footer { padding: var(--space-8) var(--space-4) var(--space-6); background: var(--surface-1); border-block-start: var(--gel-bw) solid var(--line); color: var(--ink-muted); font-size: 14px; line-height: 20px; }
.gel-footer__grid { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); max-width: var(--container-wide); margin-inline: auto; }
.gel-footer h4 { font: 600 12px/16px var(--font-mono); letter-spacing: .12em; color: var(--ink-subtle); margin-block-end: var(--space-3); }
.gel-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.gel-footer a { color: var(--ink); text-decoration: none; } @media (hover: hover) and (pointer: fine) { .gel-footer a:hover { color: var(--accent); text-decoration: underline; } }
.gel-footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); margin: var(--space-8) auto 0; padding-block-start: var(--space-4); border-block-start: 1px solid var(--line); max-width: var(--container-wide); font: 400 12px/16px var(--font-mono); color: var(--ink-subtle); }

/* ---------- Empty state ---------- */
.gel-empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-8) var(--space-4); text-align: center; border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); background: var(--surface-1); }
.gel-empty svg { width: 120px; height: 72px; }
.gel-empty__line { font: 800 26px/1 var(--font-display); text-transform: uppercase; letter-spacing: .02em; }
.gel-empty__text { max-width: 40ch; color: var(--ink-muted); font-size: 15px; line-height: 22px; }

/* ---------- Avatar and cast ---------- */
.gel-avatar { --_c: var(--accent); --_s: 40px; display: inline-grid; place-items: center; flex: none; width: var(--_s); height: var(--_s); border-radius: 50%; font: 800 calc(var(--_s) * .42)/1 var(--font-display); letter-spacing: .04em; text-transform: uppercase; color: var(--ink); background: color-mix(in oklch, var(--_c) 18%, var(--surface-2)); border: 2px solid var(--_c); background-size: cover; background-position: center; overflow: clip; }
.gel-avatar[data-gel="amber"] { --_c: var(--gel-amber); } .gel-avatar[data-gel="steel"] { --_c: var(--gel-steel); } .gel-avatar[data-gel="congo"] { --_c: var(--gel-congo); }
.gel-avatar[data-gel="magenta"] { --_c: var(--gel-magenta); } .gel-avatar[data-gel="go"] { --_c: var(--gel-go); } .gel-avatar[data-gel="ember"] { --_c: var(--gel-ember); }
.gel-avatar[data-gel="ghost"] { --_c: var(--gel-ghost); } .gel-avatar[data-gel="cyan"] { --_c: var(--gel-cyan); } .gel-avatar[data-gel="lemon"] { --_c: var(--gel-lemon); }
.gel-avatar--xs { --_s: 24px; } .gel-avatar--sm { --_s: 32px; } .gel-avatar--lg { --_s: 56px; } .gel-avatar--xl { --_s: 88px; }
.gel-avatars { display: inline-flex; } .gel-avatars .gel-avatar { margin-inline-start: -8px; box-shadow: 0 0 0 2px var(--surface-1); } .gel-avatars .gel-avatar:first-child { margin-inline-start: 0; }
.gel-cast { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.gel-cast__item { display: flex; gap: var(--space-3); align-items: center; }
.gel-cast__name { font-weight: 700; font-size: 15px; line-height: 20px; }
.gel-cast__role { font: 500 12px/16px var(--font-mono); letter-spacing: .04em; color: var(--ink-muted); text-transform: uppercase; }

/* ---------- Cue numbers and steps ---------- */
.gel-cue { display: inline-flex; align-items: baseline; gap: 4px; padding: 2px 8px; font: 700 20px/24px var(--font-mono); font-variant-numeric: tabular-nums; color: var(--accent); border: 1.5px solid currentColor; border-radius: var(--radius-sm); white-space: nowrap; }
.gel-cue::before { content: "Q"; font-size: max(.6em, 10px); font-weight: 700; letter-spacing: .1em; opacity: .85; }
.gel-cue--xl { font-size: 56px; line-height: 56px; padding: 4px 14px; letter-spacing: -.02em; border-width: 3px; }
.gel-cue--sm { font-size: 16px; line-height: 20px; padding: 1px 6px; }
.gel-cue[data-state="standby"] { color: var(--ink-inverse); background: var(--accent-fill); border-color: var(--accent); color: var(--on-fill); }
.gel-cue[data-state="running"] { color: var(--on-fill); background: var(--go-fill); border-color: var(--go); }
.gel-cue[data-state="done"] { color: var(--ink-muted); border-color: var(--line-strong); }
.gel-steps { counter-reset: step; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.gel-steps > li { counter-increment: step; display: grid; grid-template-columns: 52px 1fr; column-gap: var(--space-3); align-items: start; }
.gel-steps > li::before { content: counter(step, decimal-leading-zero); font: 700 20px/24px var(--font-mono); color: var(--accent); border: 1.5px solid currentColor; border-radius: var(--radius-sm); text-align: center; padding: 2px 0; }
.gel-steps h4 { font: 700 17px/24px var(--font-sans); text-transform: none; letter-spacing: 0; }

/* ---------- Joke scale (Daily Bit) ---------- */
.gel-scale { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); margin: 0; padding: 0; border: 0; }
.gel-scale label { position: relative; cursor: pointer; }
.gel-scale input { position: absolute; opacity: 0; inset: 0; }
.gel-scale__btn { --_c: var(--ink-subtle); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: var(--space-2); min-height: 84px; padding: var(--space-3) var(--space-1); background: var(--surface-1); border: var(--gel-bw) solid var(--line-strong); border-radius: var(--radius-md); font: 800 20px/1 var(--font-display); text-transform: uppercase; letter-spacing: .04em; color: var(--ink); transition: background-color var(--dur-fast) var(--ease-fade), border-color var(--dur-fast) var(--ease-fade); }
.gel-scale label[data-rate="lame"] .gel-scale__btn { --_c: var(--rate-lame); } .gel-scale label[data-rate="meh"] .gel-scale__btn { --_c: var(--rate-meh); }
.gel-scale label[data-rate="smh"] .gel-scale__btn { --_c: var(--rate-smh); } .gel-scale label[data-rate="legend"] .gel-scale__btn { --_c: var(--rate-legend); }
.gel-scale__bars { display: flex; gap: 3px; align-items: flex-end; height: 22px; }
.gel-scale__bars i { width: 7px; background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: 1px; }
.gel-scale__bars i:nth-child(1) { height: 8px; } .gel-scale__bars i:nth-child(2) { height: 12px; } .gel-scale__bars i:nth-child(3) { height: 17px; } .gel-scale__bars i:nth-child(4) { height: 22px; }
.gel-scale label[data-rate="lame"] i:nth-child(-n+1), .gel-scale label[data-rate="meh"] i:nth-child(-n+2),
.gel-scale label[data-rate="smh"] i:nth-child(-n+3), .gel-scale label[data-rate="legend"] i:nth-child(-n+4) { background: var(--_c); border-color: var(--_c); }
@media (hover: hover) and (pointer: fine) { .gel-scale label:hover .gel-scale__btn { border-color: var(--_c); } }
.gel-scale input:checked + .gel-scale__btn { background: color-mix(in oklch, var(--_c) 20%, var(--surface-1)); border-color: var(--_c); box-shadow: inset 0 0 0 1px var(--_c); }
.gel-scale input:focus-visible + .gel-scale__btn { outline: 2px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 7px color-mix(in oklch, var(--focus) 22%, transparent); }
.gel-prompt { font: 800 40px/.98 var(--font-display); text-transform: uppercase; letter-spacing: .01em; }
.gel-blank { display: inline-block; min-width: 3.2ch; border-block-end: .09em solid var(--accent); color: var(--accent); }

/* ---------- Hero with follow-spot reveal ---------- */
@property --gel-spot-x { syntax: "<percentage>"; inherits: false; initial-value: 50%; }
.gel-hero { position: relative; overflow: clip; padding: var(--space-16) var(--space-4); background: var(--surface-0); isolation: isolate; }
.gel-hero::before { content: ""; position: absolute; inset: -20% -10% auto; height: 120%; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 38% 55% at var(--gel-spot-x) 0%, color-mix(in oklch, var(--accent-fill) 26%, transparent), transparent 70%); }
[data-theme="house"] .gel-hero::before { background: radial-gradient(ellipse 38% 55% at var(--gel-spot-x) 0%, color-mix(in oklch, var(--accent-fill) 34%, transparent), transparent 70%); }
[data-theme="marquee"] .gel-hero::before { display: none; }
.gel-hero__inner { position: relative; max-width: var(--container-wide); margin-inline: auto; display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; }
.gel-hero__title { font: 800 clamp(56px, 11vw, 120px)/.86 var(--font-display); text-transform: uppercase; letter-spacing: .01em; animation: gel-fade-in var(--gel-reveal, var(--dur-fast)) var(--ease-fade) both; }
.gel-hero__lede { max-width: 46ch; font-size: 20px; line-height: 30px; color: var(--ink-muted); animation: gel-fade-in var(--gel-reveal, var(--dur-fast)) var(--ease-fade) calc(var(--gel-reveal, 0s) * .18) both; }
@keyframes gel-spot { from { --gel-spot-x: 12%; opacity: .2; } to { --gel-spot-x: 50%; opacity: 1; } }

/* ---------- Share card ---------- */
.gel-share { container-type: inline-size; position: relative; overflow: clip; background: var(--surface-0); color: var(--ink); border: var(--gel-bw) solid var(--line); border-radius: var(--radius-xl); isolation: isolate; }
.gel-share__in { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 7cqw; }
.gel-share--1x1 { aspect-ratio: 1 / 1; } .gel-share--9x16 { aspect-ratio: 9 / 16; }
.gel-share::before { content: ""; position: absolute; inset: -30% -20% auto; height: 90%; z-index: -1; background: radial-gradient(ellipse 45% 55% at 50% 0%, color-mix(in oklch, var(--accent-fill) 28%, transparent), transparent 70%); }
[data-theme="marquee"] .gel-share::before { background: var(--accent-fill); inset: auto -8% -14% auto; width: 52%; height: 38%; border-radius: 50%; border: 0; }
.gel-share__top { display: flex; justify-content: space-between; align-items: center; font: 600 3.4cqw/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); }
.gel-share__prompt { font: 600 4.6cqw/1.3 var(--font-sans); color: var(--ink-muted); margin-block-end: 3cqw; }
.gel-share__prompt b { color: var(--accent); font-weight: 700; }
.gel-share__answer { font: 800 11cqw/.95 var(--font-display); text-transform: uppercase; letter-spacing: .01em; }
.gel-share--9x16 .gel-share__answer { font-size: 14cqw; }
.gel-share__by { display: flex; align-items: center; gap: 3cqw; font: 600 4cqw/1 var(--font-sans); }
.gel-share__rate { display: inline-flex; align-items: center; gap: 2cqw; padding: 1.4cqw 3cqw; font: 800 5cqw/1 var(--font-display); letter-spacing: .06em; text-transform: uppercase; color: var(--on-fill); background: var(--gel-magenta-fill); border-radius: 99px; }
.gel-share__foot { display: flex; justify-content: space-between; align-items: center; font: 500 3.2cqw/1 var(--font-mono); letter-spacing: .06em; color: var(--ink-muted); }

/* ---------- Cue sheet rows ---------- */
.gel-cuesheet { width: 100%; border-collapse: collapse; font-size: var(--gel-fs); }
.gel-cuesheet th { text-align: start; padding: var(--space-2) var(--space-3); font: 600 11px/16px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); border-block-end: 1px solid var(--line-strong); background: var(--surface-1); position: sticky; inset-block-start: 0; }
.gel-cuesheet td { padding: var(--gel-cell-py) var(--space-3); height: var(--gel-row-h); border-block-end: 1px solid var(--line); vertical-align: middle; }
.gel-cuesheet tr[data-state="done"] td { color: var(--ink-muted); }
.gel-cuesheet tr[data-state="standby"] td { background: color-mix(in oklch, var(--accent) 14%, var(--surface-1)); border-block-end-color: var(--accent); }
.gel-cuesheet tr[data-state="running"] td { background: color-mix(in oklch, var(--go) 14%, var(--surface-1)); }
.gel-dept { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; padding: 2px 6px; font: 700 12px/16px var(--font-mono); letter-spacing: .08em; color: var(--_c); border: 1.5px solid var(--_c); border-radius: var(--radius-sm); }
.gel-dept[data-dept="lx"] { --_c: var(--dept-lx); } .gel-dept[data-dept="snd"] { --_c: var(--dept-snd); } .gel-dept[data-dept="vid"] { --_c: var(--dept-vid); } .gel-dept[data-dept="str"] { --_c: var(--dept-str); }
.gel-clock { font: 500 16px/20px var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: .02em; }

/* ---------- Docs prose and code ---------- */
.gel-prose { max-width: var(--measure); font-size: 17px; line-height: 28px; }
.gel-prose h2 { font-size: 36px; } .gel-prose h3 { font-size: 26px; }

.gel-prose code, .gel-code { font: 400 .88em/1.4 var(--font-mono); padding: 1px 6px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.gel-codeblock { margin: var(--space-4) 0; padding: var(--space-4); overflow-x: auto; font: 400 14px/22px var(--font-mono); color: var(--ink); background: var(--surface-0); border: var(--gel-bw) solid var(--line-strong); border-radius: var(--radius-md); }
.gel-codeblock .c { color: var(--ink-subtle); } .gel-codeblock .k { color: var(--accent-2); } .gel-codeblock .s { color: var(--go); } .gel-codeblock .a { color: var(--accent); }


/* ---------- Page patterns ---------- */
.gel-section { padding: var(--space-12) var(--space-4); }
.gel-section__inner { max-width: var(--container-wide); margin-inline: auto; display: flex; flex-direction: column; gap: var(--space-6); }
.gel-sectionhead { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.gel-sectionhead h2 { font: 800 44px/1 var(--font-display); text-transform: uppercase; letter-spacing: .015em; }
.gel-nowplaying { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; padding: var(--space-3) var(--space-4); background: var(--surface-1); border-block: var(--gel-bw) solid var(--line-strong); font: 500 13px/18px var(--font-mono); letter-spacing: .04em; text-transform: uppercase; }
.gel-nowplaying b { font-weight: 700; color: var(--ink); } .gel-nowplaying span { color: var(--ink-muted); }
.gel-quote { margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.gel-quote blockquote { margin: 0; font: italic 400 24px/34px var(--font-serif); color: var(--ink); }
.gel-quote figcaption { font: 600 12px/16px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); }
.gel-phone { position: relative; width: 340px; min-height: 660px; display: flex; flex-direction: column; overflow: clip; background: var(--surface-0); border: 3px solid var(--line-strong); border-radius: 34px; box-shadow: var(--shadow-3); }
.gel-phone__bar { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px 6px; font: 600 12px/16px var(--font-mono); color: var(--ink-muted); letter-spacing: .06em; }
.gel-phone__body { flex: 1; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-3) var(--space-4) var(--space-4); }
.gel-select[aria-invalid="true"] { border-color: var(--danger); }

/* ---------- Scene effects ---------- */
[data-theme="seance"].gel { position: relative; }
[data-theme="seance"].gel::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 5; opacity: .06; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); }
[data-theme="signal"].gel { position: relative; }
[data-theme="signal"].gel::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 5;
  background: repeating-linear-gradient(to bottom, color-mix(in oklch, var(--ink) 3.5%, transparent) 0 1px, transparent 1px 4px); }
[data-theme="signal"] .gel-eyebrow, [data-theme="signal"] .gel-label { letter-spacing: .16em; }

/* ---------- Touch, press and hit areas ---------- */
@media (pointer: coarse) {
  .gel-input, .gel-select, .gel-textarea { font-size: max(16px, 1rem); }  /* stops iOS zooming into a focused field */
}
@media (prefers-reduced-motion: no-preference) {
  .gel :where(button, [role="button"], [role="tab"], a.gel-btn, summary):not(:disabled, [aria-disabled="true"]):active { scale: .97; }
}
/* Hit area larger than the visual: small controls keep a 44px target. */
.gel-btn--icon, .gel-btn--sm { position: relative; }
.gel-btn--icon::after, .gel-btn--sm::after { content: ""; position: absolute; inset: min(0px, (100% - var(--touch-min)) / 2); }

/* Whole card clickable from one link: the link's ::after stretches over the card; other controls sit above it. */
.gel-card--link, .gel-stub--link { position: relative; }
.gel-card__link::after { content: ""; position: absolute; inset: 0; }
.gel-card__link:focus-visible { outline: 2px solid transparent; box-shadow: none; }
.gel-card--link:has(.gel-card__link:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 7px color-mix(in oklch, var(--focus) 22%, transparent); }
.gel-card--link :is(button, a:not(.gel-card__link)) { position: relative; z-index: 1; }

/* ---------- Form feedback: native validity, after the user has had a go ---------- */
.gel-input:user-invalid, .gel-textarea:user-invalid, .gel-select:user-invalid { border-color: var(--danger); }
.gel-input:user-valid, .gel-textarea:user-valid { border-color: var(--go); }  /* pair with a message or icon; colour alone is never the signal */

/* ---------- Layout helpers ---------- */
/* Sidebar that wraps on its own: no breakpoint, the main side wraps below at 50% of the row. */
.gel-with-sidebar { display: flex; flex-wrap: wrap; gap: var(--space-6); }
.gel-with-sidebar > :first-child { flex: 1 1 18rem; }
.gel-with-sidebar > :last-child { flex: 999 1 0; min-inline-size: 50%; }
.gel-with-sidebar--sticky > :first-child { align-self: start; position: sticky; inset-block-start: var(--space-4); }
/* Concentric radius: derive the outer radius from the inner radius plus the padding between. */
.gel-concentric { --_r: var(--radius-md); --_p: var(--space-2); padding: var(--_p); border-radius: calc(var(--_r) + var(--_p)); }
.gel-concentric > * { border-radius: var(--_r); }
/* Overflowing rows stay reachable when centred. */
.gel-row--center { justify-content: safe center; }
.gel-truncate { white-space: nowrap; overflow: clip; text-overflow: ellipsis; }
.gel-clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: clip; }
/* Space between siblings is set by the parent. Prose uses a flow margin that headings override. */
.gel-prose > * { margin-block: 0; }
.gel-prose > * + * { margin-block-start: var(--flow-space, 1em); }
.gel-prose > :is(h2, h3) { --flow-space: 2em; }
.gel-prose > :is(h2, h3) + * { --flow-space: .5em; }
/* Section spacing that depends on its neighbour: only the pairs that look wrong with the default. */
.gel-section:has(+ .gel-nowplaying), .gel-nowplaying + .gel-section { padding-block: var(--space-8); }

/* ---------- Motion that is opt-in ---------- */
@media (prefers-reduced-motion: no-preference) {
  .gel-hero { --gel-reveal: var(--dur-reveal); }
  .gel-pill[data-status="live"]::before { animation: gel-onair 2.4s var(--ease-in-out) infinite; }
  .gel-hero::before { animation: gel-spot var(--dur-reveal) var(--ease-in-out) both; }
}