/* ============================================================================
   Control-room theme — the house stylesheet for desktop / operator apps.
   Electron renderers, static HTML tools, anything driven live.

   Copy this file in as the ONLY stylesheet of the app (rename to styles.css),
   then add app-specific classes below the "app-specific" marker. Never create a
   second stylesheet; never hard-code a hex that has a token here.

   Dark is the default. Light is the exact same roles inverted — opt in with
   <html data-theme="light">.
   ========================================================================== */

/* ── 01. Tokens ───────────────────────────────────────────────────────────── */

:root {
  /* Surfaces: app shell → panel → inset/input → raised control → hover → thumb */
  --bg-0: #0f1115;
  --bg-1: #161a21;
  --bg-2: #1d222b;
  --bg-3: #262c38;
  --bg-4: #2e3545;
  --bg-5: #364055;

  /* Ink — bright set (control rooms are dark; readability wins) */
  --fg-0: #f0f2f6;   /* primary */
  --fg-1: #b8c2d0;   /* secondary */
  --fg-2: #8a94a6;   /* faint, hints, placeholders, micro-labels */

  /* Brand. Three Sixty purple. Swap ONLY for a different product family. */
  --accent:     #7c5cff;
  --accent-2:   #5a3ff0;
  --accent-dim: rgba(124, 92, 255, .18);

  /* Status — solid for text/borders, -dim for fills */
  --good: #2ecc71;  --good-dim: rgba(46, 204, 113, .14);
  --warn: #f1c40f;  --warn-dim: rgba(241, 196, 15, .14);
  --bad:  #e74c3c;  --bad-dim:  rgba(231, 76, 60, .14);
  --info: #4ca6e8;  --info-dim: rgba(76, 166, 232, .14);
  --amber:#e6a817;

  /* Lines */
  --border:   #2a3140;
  --border-2: #3a4558;

  /* Radii */
  --radius-sm: 4px;   /* chips, icon buttons, badges */
  --radius-md: 6px;   /* buttons, inputs */
  --radius-lg: 10px;  /* cards, modals */

  /* Elevation — only for things that float */
  --shadow-pop:   0 8px 24px rgba(0, 0, 0, .45);
  --shadow-modal: 0 16px 48px rgba(0, 0, 0, .5);

  /* Chrome heights — keep these, don't invent new ones */
  --h-titlebar: 44px;
  --h-toolbar:  44px;
  --h-tabs:     36px;
  --h-transport:56px;
  --row-h:      44px;

  color-scheme: dark;
  font-family: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* Light twin — identical roles, inverted. Accent darkens for contrast on white. */
:root[data-theme="light"] {
  --bg-0: #f4f6f9;
  --bg-1: #ffffff;
  --bg-2: #eef1f5;
  --bg-3: #e1e6ee;
  --bg-4: #d3dae4;
  --bg-5: #c3ccd9;

  --fg-0: #1a2030;
  --fg-1: #54607a;
  --fg-2: #8791a4;

  --accent:     #5a3ff0;
  --accent-2:   #4326d6;
  --accent-dim: rgba(90, 63, 240, .12);

  --good: #1f9d57;  --good-dim: rgba(31, 157, 87, .12);
  --warn: #c98a00;  --warn-dim: rgba(201, 138, 0, .14);
  --bad:  #d63b30;  --bad-dim:  rgba(214, 59, 48, .12);
  --info: #2b7fe0;  --info-dim: rgba(43, 127, 224, .12);
  --amber:#b8780c;

  --border:   #d3dae4;
  --border-2: #b9c3d2;

  --shadow-pop:   0 8px 24px rgba(15, 23, 42, .10);
  --shadow-modal: 0 16px 48px rgba(15, 23, 42, .18);

  color-scheme: light;
}

/* Density: tighten rows + base size for data-heavy screens. */
:root.density-compact { --row-h: 36px; }
:root.density-compact body { font-size: 12px; }

/* ── 02. Reset & base ─────────────────────────────────────────────────────── */

* { box-sizing: border-box; }
/* The attribute must beat component display rules, or toggled modals stay open. */
[hidden] { display: none !important; }

html, body, #root { height: 100%; margin: 0; }

body {
  background: var(--bg-0);
  color: var(--fg-0);
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;              /* the app scrolls in panels, not in the page */
  /* App-like: chrome isn't selectable, content is. */
  user-select: none; -webkit-user-select: none; cursor: default;
}
input, textarea, [contenteditable="true"], .selectable {
  user-select: text; -webkit-user-select: text;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-2); }

/* Numbers that line up: money, timecode, counters, IDs. */
.tabular, td.num, .stat-value { font-variant-numeric: tabular-nums; }
.mono { font-family: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
        font-variant-numeric: tabular-nums; }

/* Dark pages MUST restyle native option lists or the popup is white-on-white. */
select option, select optgroup { background: var(--bg-1); color: var(--fg-0); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── 03. Scrollbars ───────────────────────────────────────────────────────── */

* { scrollbar-width: thin; scrollbar-color: var(--bg-4) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--bg-4); border-radius: 8px;
  border: 2px solid transparent; background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--bg-5); background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }
/* Dense panels (grids, lists) get a slimmer bar. */
.dense::-webkit-scrollbar { width: 5px; height: 5px; }

/* ── 04. App shell ────────────────────────────────────────────────────────── */

.app { display: grid; grid-template-rows: var(--h-titlebar) 1fr; height: 100vh; background: var(--bg-0); }
.app.with-toolbar { grid-template-rows: var(--h-titlebar) var(--h-toolbar) 1fr; }
.app.with-tabs    { grid-template-rows: var(--h-titlebar) var(--h-tabs) 1fr; }
.app.player       { grid-template-rows: var(--h-titlebar) 1fr var(--h-transport); }

/* Frameless titlebar = the OS drag region. Interactive children MUST be no-drag.
   In TSX: style={{ WebkitAppRegion:'drag' } as CSSProperties} */
.titlebar {
  display: flex; align-items: center; gap: 10px; padding: 0 0 0 12px;
  background: var(--bg-1); border-bottom: 1px solid var(--border);
  -webkit-app-region: drag;
}
.titlebar .no-drag, .titlebar button, .titlebar input { -webkit-app-region: no-drag; }
.titlebar .title { font-size: 12px; font-weight: 600; color: var(--fg-0); letter-spacing: .02em; }
.titlebar .sub   { font-size: 11px; color: var(--fg-2); }

.win-controls { margin-left: auto; display: flex; -webkit-app-region: no-drag; }
.win-controls button {
  width: 36px; height: var(--h-titlebar); background: transparent; border: none;
  color: var(--fg-1); cursor: pointer; transition: background .12s, color .12s;
}
.win-controls button:hover { background: var(--bg-2); color: var(--fg-0); }
.win-controls button.close:hover { background: var(--bad); color: #fff; }

.toolbar {
  display: flex; align-items: center; gap: 8px; padding: 0 12px;
  background: var(--bg-1); border-bottom: 1px solid var(--border);
}
.transport {
  display: flex; align-items: center; gap: 12px; padding: 0 14px;
  background: var(--bg-1); border-top: 1px solid var(--border);
}

/* ── 05. Buttons ──────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 6px 14px; border-radius: var(--radius-md);
  font: inherit; font-size: 12px; font-weight: 500;
  background: var(--bg-3); color: var(--fg-0); border: 1px solid var(--border);
  cursor: pointer; transition: background .12s, border-color .12s, color .12s;
}
.btn:hover { background: var(--bg-4); border-color: var(--border-2); }
.btn:active { transform: translateY(1px); }

.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--accent-2); border-color: var(--accent-2); }

/* Destructive is outline-until-hover so it never competes with the primary. */
.btn.danger { background: transparent; border-color: var(--bad); color: var(--bad); }
.btn.danger:hover { background: var(--bad); border-color: var(--bad); color: #fff; }

.btn.ghost { background: transparent; border-color: transparent; color: var(--fg-1); }
.btn.ghost:hover { background: var(--bg-2); color: var(--fg-0); border-color: transparent; }

.btn.sm { padding: 4px 10px; font-size: 11px; }
.btn.icon {
  width: 28px; height: 28px; padding: 0; border-radius: var(--radius-sm);
  background: transparent; border-color: transparent; color: var(--fg-1);
}
.btn.icon:hover { background: var(--bg-2); color: var(--fg-0); }
.btn.icon.trash:hover { background: var(--bad-dim); color: var(--bad); }

.btn[disabled], .btn[aria-disabled="true"] { opacity: .4; pointer-events: none; }

/* Segmented control — mutually exclusive modes. */
.seg { display: inline-flex; background: var(--bg-2); border: 1px solid var(--border);
       border-radius: var(--radius-md); padding: 2px; gap: 2px; }
.seg button { background: transparent; border: none; color: var(--fg-1); cursor: pointer;
              padding: 4px 12px; border-radius: 4px; font: inherit; font-size: 11px;
              transition: background .12s, color .12s; }
.seg button:hover { color: var(--fg-0); }
.seg button.active { background: var(--accent-dim); color: var(--accent); }

/* ── 06. Fields ───────────────────────────────────────────────────────────── */

.field { display: flex; flex-direction: column; gap: 5px; }

/* The signature micro-label: small, uppercase, letter-spaced, faint. */
.field-label, .label, thead th {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; color: var(--fg-2);
}

.input, select, textarea {
  width: 100%; background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--radius-md); color: var(--fg-0); font: inherit;
  padding: 8px 10px; outline: none; transition: border-color .12s;
}
.input:focus, select:focus, textarea:focus { border-color: var(--accent); }
.input::placeholder, textarea::placeholder { color: var(--fg-2); }
textarea { resize: vertical; min-height: 72px; }
.input[disabled], select[disabled] { opacity: .5; }

/* Read-only value. Must NOT look like a disabled input. */
.field-value {
  background: var(--bg-2); border: 1px solid transparent; border-radius: var(--radius-md);
  padding: 8px 10px; color: var(--fg-1);
}

.checkbox { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.checkbox input { accent-color: var(--accent); width: 15px; height: 15px; }
.hint { font-size: 11px; color: var(--fg-2); }

/* ── 07. Tabs ─────────────────────────────────────────────────────────────── */

.tabs { display: flex; gap: 2px; padding: 0 12px; background: var(--bg-1);
        border-bottom: 1px solid var(--border); }
.tab {
  height: var(--h-tabs); padding: 0 14px; background: none; border: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer;
  color: var(--fg-1); font: inherit; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
  transition: color .12s, background .12s, border-color .12s;
}
.tab:hover  { color: var(--fg-0); background: var(--bg-2); }
.tab.active { color: var(--fg-0); border-bottom-color: var(--accent); }

/* ── 08. Cards & panels ───────────────────────────────────────────────────── */

.card {
  background: var(--bg-1); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 16px;
}
.card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.card-title { font-size: 15px; font-weight: 600; margin: 0; flex: 1; }

.panel { background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.panel-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px;
              border-bottom: 1px solid var(--border); }
.panel-body { padding: 14px; }

.stat-label { font-size: 11px; font-weight: 600; text-transform: uppercase;
              letter-spacing: .06em; color: var(--fg-2); }
.stat-value { font-size: 30px; font-weight: 700; margin: 4px 0 2px; }
.stat-foot  { font-size: 11px; color: var(--fg-2); }   /* the honesty note lives here */

/* ── 09. Tables ───────────────────────────────────────────────────────────── */

table { width: 100%; border-collapse: collapse; }
thead th {
  position: sticky; top: 0; z-index: 1; text-align: left;
  background: var(--bg-1); padding: 8px 10px; border-bottom: 1px solid var(--border);
}
tbody td { padding: 0 10px; height: var(--row-h); border-bottom: 1px solid var(--border);
           vertical-align: middle; }
tbody tr { transition: background .1s; }
tbody tr:hover { background: var(--bg-2); }             /* no zebra striping, ever */
tbody tr.selected {
  background: var(--accent-dim); color: var(--accent);
  box-shadow: inset 2px 0 0 var(--accent);
}
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* List rows outside a table follow the same selected treatment. */
.row { display: flex; align-items: center; gap: 10px; height: var(--row-h);
       padding: 0 10px; border-bottom: 1px solid var(--border); cursor: pointer;
       transition: background .1s; }
.row:hover { background: var(--bg-2); }
.row.selected { background: var(--accent-dim); color: var(--accent);
                box-shadow: inset 2px 0 0 var(--accent); }

/* ── 10. Badges, status, alerts ───────────────────────────────────────────── */

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: 2px 7px; border-radius: var(--radius-sm);
  background: var(--bg-3); border: 1px solid var(--border); color: var(--fg-1);
}
.badge.accent { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }
.badge.good   { background: var(--good-dim);   border-color: var(--good);   color: var(--good); }
.badge.warn   { background: var(--warn-dim);   border-color: var(--warn);   color: var(--warn); }
.badge.bad    { background: var(--bad-dim);    border-color: var(--bad);    color: var(--bad); }
.badge.info   { background: var(--info-dim);   border-color: var(--info);   color: var(--info); }

/* The glow is what makes a dot read as LIVE. Idle has no glow. Always add a word. */
.dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto;
       background: var(--good); box-shadow: 0 0 6px var(--good); }
.dot.warn { background: var(--warn); box-shadow: 0 0 6px var(--warn); }
.dot.bad  { background: var(--bad);  box-shadow: 0 0 6px var(--bad); }
.dot.info { background: var(--info); box-shadow: 0 0 6px var(--info); }
.dot.idle { background: var(--fg-2); box-shadow: none; }
/* Shape carries meaning too, for colour-blind readers and greyscale screenshots. */
.dot.stopped   { border-radius: 1px; }                       /* square  = stopped */
.dot.attention { border-radius: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); width: 9px; height: 8px; }

.status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--fg-1); }

.alert { display: flex; gap: 10px; padding: 10px 12px; border-radius: var(--radius-md);
         font-size: 12px; border: 1px solid; }
.alert.good { background: var(--good-dim); border-color: var(--good); color: var(--good); }
.alert.warn { background: var(--warn-dim); border-color: var(--warn); color: var(--warn); }
.alert.bad  { background: var(--bad-dim);  border-color: var(--bad);  color: var(--bad); }
.alert.info { background: var(--info-dim); border-color: var(--info); color: var(--info); }

/* ── 11. Modals ───────────────────────────────────────────────────────────── */

.modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0, 0, 0, .55); backdrop-filter: blur(2px);
  display: grid; place-items: center;
}
.modal-card {
  background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-lg);
  display: flex; flex-direction: column; overflow: hidden;
  color: var(--fg-0); box-shadow: var(--shadow-modal);
  max-width: calc(100vw - 32px); max-height: calc(100vh - 32px);
}
/* A TABBED modal gets a fixed footprint so switching tabs never resizes it. */
.modal-card.tabbed { width: 660px; height: 780px; }

.modal-header { display: flex; align-items: center; gap: 10px; padding: 14px 16px;
                border-bottom: 1px solid var(--border); flex: 0 0 auto; }
.modal-header h3 { margin: 0; font-size: 15px; flex: 1; }
.modal-body   { padding: 16px; overflow-y: auto; flex: 1 1 auto;
                display: flex; flex-direction: column; gap: 16px; }
.modal-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px;
                border-top: 1px solid var(--border); flex: 0 0 auto; }

/* Floating surfaces: dropdown, popover, toast. */
.pop { background: var(--bg-2); border: 1px solid var(--border-2);
       border-radius: var(--radius-md); box-shadow: var(--shadow-pop); padding: 4px; }
.pop button { display: flex; width: 100%; gap: 8px; align-items: center; padding: 6px 10px;
              background: none; border: none; color: var(--fg-0); font: inherit;
              text-align: left; border-radius: 4px; cursor: pointer; }
.pop button:hover { background: var(--bg-3); }

/* ── 12. Empty / loading ──────────────────────────────────────────────────── */

.empty { display: flex; flex-direction: column; align-items: center; justify-content: center;
         gap: 8px; padding: 40px 20px; text-align: center; color: var(--fg-2); }
.empty .why { font-size: 12px; max-width: 360px; }

/* Skeletons for content with a known shape; spinners only for actions in flight. */
.skel { background: var(--bg-2); border-radius: var(--radius-sm); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: .5 } }

.spinner { width: 14px; height: 14px; border-radius: 50%;
           border: 2px solid var(--bg-4); border-top-color: var(--accent);
           animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg) } }

/* ── 13. Motion policy ────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* ── 14. App-specific ─────────────────────────────────────────────────────── */
/* Everything above is shared. Put this app's own classes below this line, and
   keep using the tokens — never a raw hex. */

:root {
  /* Track colours — identity only, kept clear of the green / amber / red status colours. */
  --track-1: #9b87ff; --track-2: #4ca6e8; --track-3: #2fc4b2; --track-4: #f178b6;
  --track-5: #b8d95a; --track-6: #5fd0e8; --track-7: #c79bf2; --track-8: #9aa7bd;
  --qr-paper: #ffffff;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
}

body { font-size: 14px; }
.app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
.btn { min-height: 32px; white-space: nowrap; }
kbd { font: 600 10px var(--mono); color: var(--fg-2); border: 1px solid var(--border-2);
      border-radius: 3px; padding: 0 4px; margin-left: 4px; }
.field > span { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-2); }
.seg button { min-height: 28px; }

/* ── Top bar ── */
.topbar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 18px; padding: 8px 14px;
          padding-top: max(8px, env(safe-area-inset-top));
          background: var(--bg-1); border-bottom: 1px solid var(--border); flex: 0 0 auto; }
.clock { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 700; line-height: 1;
         font-size: clamp(28px, 3.8vw, 52px); letter-spacing: -.01em; }
.showmeta { flex: 1 1 200px; min-width: 0; }
.show-title { font-size: clamp(15px, 1.5vw, 20px); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.show-date { font-size: 12px; color: var(--fg-1); }
.top-status, .top-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.badge-lg { font-size: 13px; padding: 6px 12px; letter-spacing: .05em; white-space: nowrap; }
.tag-reh { font-size: 13px; font-weight: 700; letter-spacing: .08em; padding: 6px 12px; border-radius: var(--radius-sm);
           color: var(--bg-0); white-space: nowrap;
           background: repeating-linear-gradient(-45deg, var(--amber) 0 10px, var(--warn) 10px 20px); }
body.rehearsal .topbar { box-shadow: inset 0 3px 0 var(--amber); }
body.rehearsal .clock { color: var(--amber); }
.conn { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--fg-1); white-space: nowrap; }
.conn.offline { font-size: 13px; font-weight: 700; letter-spacing: .08em; padding: 5px 12px; border-radius: var(--radius-sm);
                background: var(--bad); color: #fff; }
.conn.offline .dot { background: #fff; box-shadow: none; border-radius: 1px; }
.conn.pending .dot { background: var(--fg-2); box-shadow: none; }

.banner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 14px; font-size: 13px; flex: 0 0 auto;
          background: var(--warn-dim); border-bottom: 1px solid var(--warn); color: var(--warn); }
.banner.info { background: var(--info-dim); border-color: var(--info); color: var(--info); }
.banner span { flex: 1 1 240px; }

/* ── NOW / NEXT ── */
.panels { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 10px; padding: 10px 14px;
          flex: 0 1 auto; min-height: 0; max-height: 48vh; }
.panels .panel { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.panel-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--fg-2); padding: 8px 14px 0; }
.panel-now .panel-label { color: var(--good); }
.panels .panel-body { padding: 8px 10px 10px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; }
.card-now, .card-next, .card-break {
  background: var(--bg-2); border-radius: var(--radius-md); border-left: 5px solid var(--track, var(--border-2)); padding: 10px 14px; }
.card-now { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 18px; align-items: center; }
.pn-title { font-size: clamp(17px, 2vw, 28px); font-weight: 650; line-height: 1.2; overflow-wrap: anywhere; user-select: text; -webkit-user-select: text; }
.pn-meta { font-size: 13px; color: var(--fg-1); font-variant-numeric: tabular-nums; }
.pn-meta s { color: var(--fg-2); margin-left: 6px; white-space: nowrap; }
.cd { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 700; line-height: 1;
      font-size: clamp(30px, 4.2vw, 60px); grid-row: 1 / span 2; grid-column: 2; text-align: right; }
.cd small { display: block; font: 600 10px Inter, "Segoe UI", system-ui, sans-serif; letter-spacing: .1em; color: var(--fg-2); margin-bottom: 4px; }
.cd.warn, .card-next .cd.warn { color: var(--amber); }
.cd.crit, .card-next .cd.crit { color: var(--bad); }
.bar { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--bg-4); overflow: hidden; margin-top: 8px; }
.bar i { display: block; height: 100%; background: var(--good); transform-origin: left center; transform: scaleX(0); }
.bar.warn i { background: var(--amber); }
.bar.crit i { background: var(--bad); }
.pn-details { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 6px 16px; margin-top: 8px; }
.pn-details div { font-size: 13px; color: var(--fg-0); overflow-wrap: anywhere; user-select: text; -webkit-user-select: text; }
.pn-details b { display: block; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-2); }
.card-next { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 14px; align-items: center; }
.card-next .pn-title { font-size: clamp(15px, 1.5vw, 21px); }
.card-next .cd { font-size: clamp(22px, 2.6vw, 38px); color: var(--fg-0); }
.card-break { border-left-color: var(--info); }
.break-word { font-size: clamp(26px, 3.6vw, 54px); font-weight: 800; letter-spacing: .08em; color: var(--info); line-height: 1.1; }
.break-next { font-size: clamp(15px, 1.7vw, 24px); color: var(--fg-0); overflow-wrap: anywhere; }
.break-next b { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.break-next b.warn { color: var(--amber); }
.break-next b.crit { color: var(--bad); }
.panel-empty { color: var(--fg-2); padding: 10px 4px; font-size: 14px; }

/* ── Operator controls ── */
.controls { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 0 14px 10px; flex: 0 0 auto; align-items: center; }
.ctl-group { display: flex; flex-wrap: wrap; gap: 6px; }
.ctl { min-height: 40px; padding: 6px 14px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.ctl.delay { background: var(--bad-dim); border-color: var(--bad); color: var(--bad); }
.ctl.delay:hover { background: var(--bad); color: #fff; border-color: var(--bad); }
.ctl.ahead { background: var(--info-dim); border-color: var(--info); color: var(--info); }
.ctl.ahead:hover { background: var(--info); color: #fff; border-color: var(--info); }
.ctl:hover kbd { color: inherit; border-color: currentColor; }
.rehbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 14px; flex: 0 0 auto;
          background: var(--warn-dim); border-top: 1px solid var(--amber); border-bottom: 1px solid var(--amber); }
.rehbar-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--amber); }
.rehbar .input { width: auto; padding: 5px 8px; font-family: var(--mono); }

/* ── The list ── */
.list { position: relative; flex: 1 1 0; min-height: 120px; overflow: auto; border-top: 1px solid var(--border); outline: none; }
.list-head, .rd-row { display: grid; grid-template-columns: var(--cols); gap: 0 14px; padding: 8px 14px 8px 10px;
                      border-left: 5px solid var(--track, transparent); }
.list-head { position: sticky; top: 0; z-index: 2; background: var(--bg-1); border-bottom: 1px solid var(--border);
             font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-2); }
.list-head div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-row { border-bottom: 1px solid var(--border); align-items: start; transition: background .12s, opacity .12s; }
.rd-row > div { min-width: 0; overflow-wrap: anywhere; user-select: text; -webkit-user-select: text; }
.rd-row .t { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 600; line-height: 1.35; }
.rd-row .t s { display: block; font-size: 12px; font-weight: 400; color: var(--fg-2); }
.rd-row .t.shifted b { font-weight: 700; color: var(--bad); }
.rd-row .t.shifted.early b { color: var(--info); }
.rd-row .it { font-size: 15px; font-weight: 600; line-height: 1.35; }
.rd-row .x { font-size: 13px; color: var(--fg-1); line-height: 1.4; }
.rd-row .st { display: none; font-size: 10px; font-weight: 700; letter-spacing: .08em; padding: 1px 6px; border-radius: var(--radius-sm);
              margin-right: 8px; vertical-align: 2px; border: 1px solid; }
.rd-row.past { opacity: .42; }
.rd-row.live { background: var(--good-dim); box-shadow: inset 0 1px 0 var(--good), inset 0 -1px 0 var(--good); }
.rd-row.live .st { display: inline-block; color: var(--good); background: var(--good-dim); }
.rd-row.live .st::before { content: "LIVE"; }
.rd-row.next { background: var(--bg-1); }
.rd-row.next .st { display: inline-block; color: var(--accent); background: var(--accent-dim); }
.rd-row.next .st::before { content: "NEXT"; }
.rd-row.invalid .t { color: var(--warn); }
.rd-row .act { display: flex; justify-content: flex-end; }
.rd-row .act .btn { min-height: 28px; padding: 3px 10px; font-size: 11px; }
.rd-row.past .act .btn, .rd-row.live .act .btn, .rd-row.invalid .act .btn { visibility: hidden; }
/* Time lines across the list: red = now, grey = where the rundown as written says we should be. */
.timeline { position: absolute; left: 0; right: 0; top: 0; height: 0; z-index: 1; pointer-events: none;
            border-top: 2px solid var(--bad); }
.timeline span { position: absolute; right: 10px; top: -10px; padding: 1px 7px; border-radius: var(--radius-sm);
                 font: 700 10px/16px var(--mono); letter-spacing: .04em; white-space: nowrap; background: var(--bad); color: #fff; }
.timeline.plan { border-top: 2px dashed var(--fg-2); }
.timeline.plan span { right: 96px; background: var(--fg-2); color: var(--bg-0); }
.chip { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 10px;
        color: var(--track, var(--fg-1)); border: 1px solid var(--track, var(--border-2)); }
.list-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; height: 100%;
              padding: 30px 20px; text-align: center; color: var(--fg-2); }
.list-empty strong { color: var(--fg-1); font-size: 16px; }

.statusbar { display: flex; gap: 6px 18px; align-items: center; padding: 5px 14px; font-size: 12px; color: var(--fg-2);
             padding-bottom: max(5px, env(safe-area-inset-bottom));
             background: var(--bg-1); border-top: 1px solid var(--border); flex: 0 0 auto; white-space: nowrap; overflow: hidden; }
.statusbar .notes { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: right; }

/* ── Floating things ── */
.popover { position: fixed; z-index: 900; min-width: 220px; max-width: calc(100vw - 20px); max-height: 70vh; overflow-y: auto;
           background: var(--bg-2); border: 1px solid var(--border-2); border-radius: var(--radius-md);
           box-shadow: var(--shadow-pop); padding: 6px; }
.popover label { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 4px; cursor: pointer; }
.popover label:hover { background: var(--bg-3); }
.popover label.fixed { color: var(--fg-2); cursor: default; }
.popover input { accent-color: var(--accent); width: 16px; height: 16px; }
.popover .pop-note { font-size: 11px; color: var(--fg-2); padding: 6px 10px 4px; }
.dropzone { position: fixed; inset: 0; z-index: 1500; display: grid; place-items: center; pointer-events: none;
            background: var(--accent-dim); backdrop-filter: blur(2px); }
.dropzone div { padding: 26px 40px; border: 2px dashed var(--accent); border-radius: var(--radius-lg);
                background: var(--bg-1); font-size: 18px; font-weight: 600; }
.toasts { position: fixed; left: 50%; bottom: 44px; transform: translateX(-50%); z-index: 2000;
          display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { background: var(--bg-3); border: 1px solid var(--border-2); border-radius: var(--radius-md); box-shadow: var(--shadow-pop);
         padding: 9px 14px; font-size: 13px; max-width: min(520px, 92vw); }
.toast.bad { border-color: var(--bad); color: var(--bad); }

/* ── Modals ── */
.modal-sm { width: 380px; }
.modal-md { width: 700px; }
.modal-xl { width: 1600px; height: calc(100vh - 32px); height: calc(100dvh - 32px); }
.modal-header { font-size: 15px; font-weight: 600; }
.modal-sub { font-size: 12px; font-weight: 400; color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modal-foot-note { margin-right: auto; align-self: center; font-size: 12px; color: var(--fg-2); }
.form-error { color: var(--bad); font-size: 13px; }
.edit-meta { display: flex; flex-wrap: wrap; gap: 12px; }
.edit-meta .grow { flex: 1 1 260px; }
.edit-meta .grow2 { flex: 2 1 320px; }
.edit-map { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; }
.edit-map .field { flex: 0 1 190px; }
.edit-map .field.missing select { border-color: var(--bad); }
.edit-map-note { flex: 1 1 100%; font-size: 12px; color: var(--fg-2); }
.edit-warn { padding: 10px 12px; border-radius: var(--radius-md); font-size: 13px;
             background: var(--warn-dim); border: 1px solid var(--warn); color: var(--warn); }
.edit-table-wrap { flex: 1 1 auto; min-height: 220px; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-md); }
.edit-table { min-width: 100%; width: max-content; max-width: none; }
.edit-table thead th { padding: 6px; z-index: 3; }
.edit-table thead th .input { min-width: 90px; padding: 5px 8px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: none; }
.edit-table tbody td { height: auto; padding: 0; vertical-align: top; border-right: 1px solid var(--border); }
.edit-table tbody tr:hover { background: none; }
.edit-table td.num { width: 34px; padding: 8px 6px; color: var(--fg-2); font-size: 11px; }
.edit-table td .cell { min-width: 70px; max-width: 320px; min-height: 34px; padding: 7px 9px; white-space: pre-wrap; overflow-wrap: anywhere;
                       outline: none; font-size: 13px; line-height: 1.4; cursor: text; }
.edit-table td.time .cell { font-family: var(--mono); min-width: 58px; }
.edit-table td .cell:focus { background: var(--bg-2); box-shadow: inset 0 0 0 2px var(--accent); }
.edit-table td.bad .cell { background: var(--bad-dim); box-shadow: inset 0 0 0 1px var(--bad); }
.edit-table td.ops { white-space: nowrap; padding: 3px 6px; border-right: none; position: sticky; right: 0; background: var(--bg-1); }
.share { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 20px; }
.qr { width: 240px; height: 240px; flex: 0 0 auto; background: var(--qr-paper); border-radius: var(--radius-md); padding: 6px; }
.qr svg { display: block; width: 100%; height: 100%; }
.share-side { flex: 1 1 260px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.share-urls { display: flex; flex-direction: column; gap: 4px; }
.share-urls label { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-md); cursor: pointer;
                    border: 1px solid var(--border); font-family: var(--mono); font-size: 13px; overflow-wrap: anywhere;
                    user-select: text; -webkit-user-select: text; }
.share-url { flex: 1 1 auto; min-width: 0; }
.share-url b { display: block; font: 600 10px Inter, "Segoe UI", system-ui, sans-serif; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-2); }
.list-empty img { border-radius: 22%; margin-bottom: 6px; }
.share-urls label.active { background: var(--accent-dim); border-color: var(--accent); }
.share-urls input { accent-color: var(--accent); }

/* ── Display view (/display): NOW and NEXT only, readable from across the room ── */
body.display #controls, body.display #rehBar, body.display #list, body.display .statusbar, body.display #btnRole { display: none !important; }
body.display .top-actions .btn { background: transparent; border-color: transparent; color: var(--fg-2); }
body.display .clock { font-size: clamp(36px, 6vw, 96px); }
body.display .show-title { font-size: clamp(16px, 2vw, 32px); }
body.display .show-date { font-size: clamp(12px, 1.2vw, 18px); }
body.display .badge-lg, body.display .tag-reh, body.display .conn.offline { font-size: clamp(13px, 1.5vw, 24px); padding: .4em .8em; }
body.display .panels { flex: 1 1 0; max-height: none; grid-template-columns: minmax(0, 1fr);
                       grid-template-rows: minmax(0, 1.7fr) minmax(0, 1fr); gap: 14px; padding: 14px; }
body.display .panel-label { font-size: clamp(12px, 1.4vw, 22px); padding: 12px 20px 0; }
body.display .panels .panel-body { padding: 10px 14px 14px; gap: 12px; }
body.display .card-now, body.display .card-next, body.display .card-break { padding: clamp(12px, 1.6vw, 28px) clamp(14px, 2vw, 34px); border-left-width: 10px; }
body.display .card-now .pn-title { font-size: clamp(26px, 4.6vw, 84px); }
body.display .card-now .cd { font-size: clamp(44px, 9vw, 170px); }
body.display .card-next .pn-title { font-size: clamp(20px, 3vw, 54px); }
body.display .card-next .cd { font-size: clamp(30px, 5vw, 90px); }
body.display .pn-meta { font-size: clamp(14px, 1.7vw, 30px); }
body.display .cd small { font-size: clamp(10px, 1vw, 16px); }
body.display .bar { height: clamp(8px, 1vw, 16px); border-radius: 8px; margin-top: 14px; }
body.display .pn-details div { font-size: clamp(14px, 1.6vw, 28px); }
body.display .pn-details b { font-size: clamp(10px, .9vw, 15px); }
body.display .break-word { font-size: clamp(44px, 9vw, 160px); }
body.display .break-next { font-size: clamp(20px, 3vw, 54px); }
body.display .panel-empty { font-size: clamp(16px, 2vw, 32px); }

/* ── Small screens: the list stacks, panels go one above the other ── */
@media (max-width: 860px) {
  /* Everything keeps its natural height; if the screen is too short the page itself scrolls. */
  .app { overflow-y: auto; }
  .topbar { gap: 6px 12px; padding: 6px 10px; }
  .panels { grid-template-columns: minmax(0, 1fr); flex: 0 0 auto; max-height: none; padding: 8px; gap: 8px; }
  .panels .panel { overflow: visible; }
  .panels .panel-body { overflow: visible; }
  .list { flex: 1 0 260px; }
  .controls { padding: 0 8px 8px; }
  .ctl-time { width: 100%; }
  .ctl-time .ctl { flex: 1 1 28%; }
  kbd { display: none; }
  .list-head { display: none; }
  .rd-row { grid-template-columns: 54px 54px minmax(0, 1fr); gap: 2px 10px; }
  .rd-row .x, .rd-row .act { grid-column: 3; }
  .rd-row .x:empty { display: none; }
  .rd-row .x::before { content: attr(data-label) ": "; color: var(--fg-2); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
  .rd-row .act { justify-content: flex-start; margin-top: 4px; }
  .rd-row.past .act, .rd-row.live .act, .rd-row.invalid .act { display: none; }
  .statusbar .notes { display: none; }
  .show-title { white-space: normal; }
  .top-actions { margin-left: auto; }
  body.display .panels { padding: 8px; flex: 1 0 auto; grid-template-rows: auto auto; }
}