/* FastPath shell: design tokens + shared header, time bar, command palette. Used by every page. */
:root {
  color-scheme: light;
  /* neutrals + accent (contrast on panel: fg 16.1, muted 5.96, accent 6.7) */
  --bg: #f5f7fa; --panel: #ffffff; --fg: #1a2130; --muted: #5b6475; --border: #dde1e8; --soft: #eef1f6;
  --accent: #1d4ed8; --on-accent: #ffffff; --sel: #e6edfc; --grid: #e6e9ef;
  /* status: text colour (>= 4.5:1) and fill colour (>= 3:1) */
  --ok: #0b7a52; --ok-f: #1f9d6b; --warn: #9a5b00; --warn-f: #b87400; --crit: #c0262d; --crit-f: #d8363d;
  --nodata-t: #6b7280; --nodata: #d5dae2; --nodata-veil: rgba(120, 128, 140, 0.12); --excl: #7b4fa6;
  --warn-bg: #fdf3dc; --bad-bg: #fde8e8; --chg: #fff1c2; --bad: var(--crit);
  /* sources: colour + line pattern (solid / dashed / dotted) */
  --s1: #1d4ed8; --s2: #0e7490; --s3: #a3307e; --s4: #7b4fa6; --s5: #9a5b00;
  /* scale */
  --sp1: 4px; --sp2: 8px; --sp3: 12px; --sp4: 16px; --sp5: 24px; --sp6: 32px;
  --r-ctl: 4px; --r-card: 8px; --r-pill: 999px;
  --shadow-card: 0 1px 2px rgba(16, 24, 40, .06); --shadow-over: 0 12px 32px rgba(16, 24, 40, .22);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0d121a; --panel: #141b26; --fg: #e6ebf2; --muted: #9aa4b5; --border: #263041; --soft: #1a2230;
    --accent: #8ab4ff; --on-accent: #0d121a; --sel: #1d2a40; --grid: #232b38;
    --ok: #46c98b; --ok-f: #2fae78; --warn: #f2b544; --warn-f: #e0a21f; --crit: #ff7a7a; --crit-f: #e5484d;
    --nodata-t: #8a94a6; --nodata: #3b4556; --nodata-veil: rgba(160, 170, 185, 0.14); --excl: #c3a3ea;
    --warn-bg: #2d2413; --bad-bg: #3a1618; --chg: #3a3113;
    --s1: #6ea0ff; --s2: #38bdd8; --s3: #e879b9; --s4: #c3a3ea; --s5: #f2b544;
    --shadow-card: none; --shadow-over: 0 12px 32px rgba(0, 0, 0, .55);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d121a; --panel: #141b26; --fg: #e6ebf2; --muted: #9aa4b5; --border: #263041; --soft: #1a2230;
  --accent: #8ab4ff; --on-accent: #0d121a; --sel: #1d2a40; --grid: #232b38;
  --ok: #46c98b; --ok-f: #2fae78; --warn: #f2b544; --warn-f: #e0a21f; --crit: #ff7a7a; --crit-f: #e5484d;
  --nodata-t: #8a94a6; --nodata: #3b4556; --nodata-veil: rgba(160, 170, 185, 0.14); --excl: #c3a3ea;
  --warn-bg: #2d2413; --bad-bg: #3a1618; --chg: #3a3113;
  --s1: #6ea0ff; --s2: #38bdd8; --s3: #e879b9; --s4: #c3a3ea; --s5: #f2b544;
  --shadow-card: none; --shadow-over: 0 12px 32px rgba(0, 0, 0, .55);
}

/* ---- base ----------------------------------------------------------------- */
body { background: var(--bg); color: var(--fg); font: 14px/1.4 var(--font); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sh-skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--accent); color: var(--on-accent);
  padding: 8px 12px; border-radius: var(--r-ctl); }
.sh-skip:focus { left: 8px; top: 8px; }
.sh-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- header ---------------------------------------------------------------- */
.sh { position: sticky; top: 0; z-index: 50; background: var(--panel); border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-card); font-size: 14px; }
.sh.behind { background: var(--bad-bg); }
.sh-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp2) var(--sp3); padding: var(--sp2) var(--sp4); }
.sh-row + .sh-row { border-top: 1px solid var(--border); padding-top: 6px; padding-bottom: 6px; }
.sh-brand { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; color: var(--fg); text-decoration: none; letter-spacing: -.01em; }
.sh-logo { flex: none; display: block; }
.sh-foot { padding: 14px 16px 18px; text-align: center; color: var(--muted); font-size: 12px; }
.sh-dl { display: grid; grid-template-columns: auto auto; gap: 4px 14px; margin: 6px 0; font-size: 13px; text-align: left; }
.sh-dl dt { color: var(--muted); } .sh-dl dd { margin: 0; font-variant-numeric: tabular-nums; }
body.kiosk .sh-foot { font-size: 14px; }
.sh-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.sh-crumbs li { display: inline-flex; align-items: center; min-width: 0; }
.sh-crumbs li + li::before { content: "/"; color: var(--muted); padding: 0 6px; }
.sh-crumbs a { color: var(--accent); text-decoration: none; }
.sh-crumbs a:hover { text-decoration: underline; }
.sh-crumbs [aria-current] { font-weight: 600; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-sp { flex: 1; }
.sh-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--panel); color: var(--fg); border: 1px solid var(--border);
  border-radius: var(--r-ctl); padding: 4px 10px; font: inherit; cursor: pointer; min-height: 30px; white-space: nowrap; text-decoration: none; }
.sh-btn:hover { border-color: var(--accent); }
.sh-btn:disabled { opacity: .45; cursor: default; border-color: var(--border); }
.sh-btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.sh-kbd { font: 11px/1 var(--mono); color: var(--muted); border: 1px solid var(--border); border-bottom-width: 2px;
  border-radius: 4px; padding: 2px 5px; }
.sh-seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--r-ctl); overflow: hidden; }
.sh-seg button { background: var(--panel); color: var(--fg); border: 0; border-right: 1px solid var(--border); padding: 4px 9px;
  font: inherit; cursor: pointer; min-height: 30px; }
.sh-seg button:last-child { border-right: 0; }
.sh-seg button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.sh-live { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: var(--r-pill); border: 1px solid var(--ok); color: var(--ok); white-space: nowrap; }
.sh-live::before { content: "\25CF  "; }
.sh-live.paused { color: var(--warn); border-color: var(--warn); background: var(--warn-bg); }
.sh-live.paused::before { content: "\275A\275A  "; }
.sh-live.behind, .sh-behindpill { color: var(--crit); border: 1px solid var(--crit); background: var(--bad-bg); }
.sh-live.behind::before { content: "\26A0  "; }
.sh-behindpill { font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: var(--r-pill); white-space: nowrap; }
.sh-behindpill::before { content: "\26A0  "; }
.sh-behindpill[hidden] { display: none; }
.sh-win { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sh-wrap { position: relative; }
.sh-pop { position: absolute; top: calc(100% + 6px); z-index: 60; background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--r-card); box-shadow: var(--shadow-over); padding: var(--sp3); min-width: 240px; }
.sh-pop[hidden] { display: none; }
.sh-pop.right { right: 0; }
.sh-menu { display: grid; gap: 2px; }
.sh-menu a, .sh-menu button { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: none; border: 0;
  color: var(--fg); font: inherit; padding: 7px 8px; border-radius: var(--r-ctl); cursor: pointer; text-decoration: none; }
.sh-menu a:hover, .sh-menu button:hover, .sh-menu [aria-checked="true"] { background: var(--sel); }
.sh-menu .hint { margin-left: auto; color: var(--muted); font-size: 12px; }
.sh-menu hr { border: 0; border-top: 1px solid var(--border); margin: 4px 0; }
.sh-src { display: grid; grid-template-columns: 1fr auto; align-items: center; }
.sh-src .star { width: auto; padding: 6px 8px; color: var(--muted); font-size: 15px; }
.sh-src .star[aria-pressed="true"] { color: var(--warn); }
.sh-swatch { width: 18px; height: 0; border-top: 3px solid; display: inline-block; flex: none; }
.sh-custom { display: grid; gap: 8px; }
.sh-custom label { display: grid; gap: 3px; font-size: 12px; color: var(--muted); }
.sh-custom input { font: inherit; color: var(--fg); background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-ctl);
  padding: 5px 7px; color-scheme: light dark; }
.sh-err { color: var(--crit); font-size: 12px; min-height: 1em; }

.sh-help { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--panel); color: var(--muted); font: 600 11px/1 var(--font); cursor: pointer; padding: 0; vertical-align: 1px; margin-left: 4px; }
.sh-help:hover { color: var(--accent); border-color: var(--accent); }
.sh-helppop { max-width: 320px; font-size: 13px; line-height: 1.45; display: grid; gap: 4px; z-index: 95; }
.sh-flash { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: var(--fg); color: var(--bg); padding: 8px 14px;
  border-radius: var(--r-card); font-size: 13px; opacity: 0; transition: opacity .2s; pointer-events: none; z-index: 99; }
.sh-flash.on { opacity: .95; }
@media (max-width: 700px) { .sh-help { width: 28px; height: 28px; } }

/* ---- command palette ------------------------------------------------------- */
.sh-scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, .35); z-index: 90; display: flex; justify-content: center;
  align-items: flex-start; padding: 10vh 16px 16px; }
.sh-scrim[hidden] { display: none; }
.sh-pal { width: min(640px, 100%); background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-card);
  box-shadow: var(--shadow-over); overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; max-height: 70vh; }
.sh-pal input { border: 0; border-bottom: 1px solid var(--border); padding: 14px 16px; font: 16px var(--font); color: var(--fg);
  background: var(--panel); outline: none; }
.sh-pal ul { list-style: none; margin: 0; padding: 6px; overflow-y: auto; }
.sh-pal li { display: grid; grid-template-columns: 74px 1fr auto; gap: 10px; align-items: baseline; padding: 8px 10px;
  border-radius: var(--r-ctl); cursor: pointer; }
.sh-pal li[aria-selected="true"] { background: var(--sel); }
.sh-pal .kind { font: 11px var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.sh-pal .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-pal .sub { color: var(--muted); font-size: 12px; white-space: nowrap; }
.sh-pal .foot { display: flex; gap: 14px; padding: 8px 14px; border-top: 1px solid var(--border); color: var(--muted); font-size: 12px; }
.sh-pal .empty { padding: 14px 16px; color: var(--muted); }

/* ---- kiosk + mobile -------------------------------------------------------- */
body.kiosk .sh-row + .sh-row, body.kiosk .sh-ctl { display: none; }
@media (max-width: 700px) {
  .sh-row { padding: 6px 10px; gap: 6px 8px; }
  .sh-btn, .sh-seg button { min-height: 40px; }
  .sh-hide-m { display: none !important; }
  .sh-crumbs li:not(:last-child):not(:nth-last-child(2)) { display: none; }
  .sh-crumbs li:nth-last-child(2)::before { content: none; }
  .sh-row > .sh-seg[aria-label="Time range"] { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .sh-pop { position: fixed; left: 8px !important; right: 8px !important; top: auto; bottom: 8px; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---- tools: dialogs, notes -------------------------------------------------- */
.tl-dlg { border: 1px solid var(--border); border-radius: var(--r-card); background: var(--panel); color: var(--fg); padding: 0;
  width: min(760px, calc(100vw - 24px)); box-shadow: var(--shadow-over); }
.tl-dlg::backdrop { background: rgba(0, 0, 0, .4); }
.tl-head { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.tl-head h2 { margin: 0; font-size: 16px; flex: 1; }
.tl-x { background: none; border: 0; color: var(--muted); font-size: 16px; cursor: pointer; min-width: 32px; min-height: 32px; }
.tl-body { padding: 12px 16px; display: grid; gap: 10px; }
.tl-body p { margin: 0; }
.tl-hint { color: var(--muted); font-size: 12px; }
.tl-status { font-size: 13px; }
.tl-err { color: var(--crit); font-size: 13px; min-height: 1em; }
.tl-text { width: 100%; font: 12px/1.45 var(--mono); color: var(--fg); background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--r-ctl); padding: 8px; resize: vertical; }
.tl-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; padding: 12px 16px; border-top: 1px solid var(--border); }
.tl-form label { display: grid; gap: 4px; font-size: 12px; color: var(--muted); }
.tl-form textarea, .tl-form input, .tl-form select { font: inherit; font-size: 14px; color: var(--fg); background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--r-ctl); padding: 6px 8px; color-scheme: light dark; }
.tl-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sh-btn.danger { color: var(--crit); border-color: var(--crit); }
.tl-notes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tl-note { font: 12px var(--font); color: var(--fg); background: var(--panel); border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: var(--r-ctl); padding: 3px 8px; cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-note:hover { border-color: var(--accent); }
.tl-note.add { border-left-color: var(--border); color: var(--accent); }
.tl-by { color: var(--muted); }
.tl-shift { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--warn); background: var(--warn-bg);
  border: 1px solid var(--warn); border-radius: var(--r-ctl); padding: 2px 4px 2px 8px; max-width: 100%; }
.tl-shift.acked { color: var(--fg); background: var(--panel); border-color: var(--border); }
.tl-shift.ended { color: var(--muted); background: var(--panel); border-color: var(--border); border-style: dashed; }
.tl-shift .sh-btn { min-height: 24px; padding: 1px 8px; font-size: 12px; }
@media (max-width: 700px) { .tl-row { grid-template-columns: 1fr; } .tl-note, .sh-btn { min-height: 40px; } }

/* ---- account: signed-in user, kiosk links, users ---------------------------- */
.sh-who { padding: 4px 8px 6px; font-size: 13px; color: var(--muted); border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.sh-who b { color: var(--fg); }
.sh-role { margin-left: 6px; font-size: 11px; border: 1px solid var(--border); border-radius: var(--r-pill); padding: 0 6px; }
.sh-acct .tl-body input[type="text"] { flex: 1; min-width: 0; font: inherit; font-size: 14px; padding: 6px 8px; color: var(--fg);
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-ctl); }
.sh-note { margin: 0; color: var(--muted); font-size: 12px; }
.sh-h3 { margin: 6px 0 0; font-size: 13px; }
.sh-tw { overflow-x: auto; }
.sh-tbl { border-collapse: collapse; width: 100%; font-size: 12px; font-variant-numeric: tabular-nums; }
.sh-tbl th, .sh-tbl td { padding: 4px 6px; border-bottom: 1px solid var(--border); text-align: right; white-space: nowrap; }
.sh-tbl th { color: var(--muted); font-weight: 600; }
.sh-tbl .l { text-align: left; }
.sh-tbl .sh-bad { color: var(--crit); }
.sh-tbl td.sh-wrap { white-space: normal; min-width: 12em; }
.sh-newlink { display: grid; gap: 6px; padding: 10px; border: 1px solid var(--accent); border-radius: var(--r-card); background: var(--sel); }
.sh-newlink input { width: 100%; font: 12px var(--mono) !important; }

/* ---- UI kit (shell.js Shell.ui): forms, dialogs, confirm, toast, skeleton, shortcut list ---------------------------- */
.ui-dlg { width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 32px); overflow: auto; }
.ui-dlg.wide { width: min(860px, calc(100vw - 24px)); }
.ui-dlg .ui-form, .ui-dlg .ui-inner { display: contents; }
.ui-intro, .ui-effect { margin: 0; }
.ui-effect { font-weight: 600; }
.ui-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px 14px; }
.ui-grid:empty { display: none; }
.ui-field { display: grid; gap: 4px; align-content: start; min-width: 0; }
.ui-field.full { grid-column: 1 / -1; }
.ui-field > label { font-size: 13px; font-weight: 600; }
.ui-field input:not([type=checkbox]), .ui-field select, .ui-field textarea, .ui-inline-form input {
  font: inherit; font-size: 14px; padding: 7px 9px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--fg); min-width: 0; width: 100%; box-sizing: border-box; }
.ui-field textarea { resize: vertical; min-height: 4.5em; }
.ui-field input:focus-visible, .ui-field select:focus-visible, .ui-field textarea:focus-visible, .ui-inline-form input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ui-field.bad input, .ui-field.bad select, .ui-field.bad textarea, input[aria-invalid="true"] { border-color: var(--crit); }
.ui-check label { display: flex; gap: 8px; align-items: center; font-weight: 400; font-size: 14px; }
.ui-hint { margin: 0; font-size: 12px; color: var(--muted); }
.ui-ferr { margin: 0; font-size: 12.5px; color: var(--crit); }
.ui-ferr::before { content: "✕ "; }
.ui-formerr { border: 1px solid var(--crit); border-radius: 6px; padding: 8px 10px; color: var(--crit); font-size: 13px; display: grid; gap: 4px; }
.ui-formerr p { margin: 0; }
.ui-discard { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; width: 100%; }
.ui-discard span { margin-right: auto; font-weight: 600; }
.ui-inline-form { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; }
.ui-inline-form .ui-field { flex: 1 1 220px; }
.ui-copy { font: inherit; width: 100%; padding: 7px 9px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--fg); box-sizing: border-box; }
/* busy button: a spinner, never a second submit */
.ui-spin { width: 12px; height: 12px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; display: inline-block; animation: ui-spin .7s linear infinite; flex: none; }
@keyframes ui-spin { to { transform: rotate(360deg); } }
.sh-btn[aria-busy="true"] { opacity: .85; cursor: progress; }
/* toasts */
.ui-toasts { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 100; display: grid; gap: 8px; justify-items: center; pointer-events: none; width: max-content; max-width: calc(100vw - 24px); }
.ui-toast { pointer-events: auto; display: flex; align-items: center; gap: 10px; background: var(--fg); color: var(--bg); border-radius: 8px; padding: 8px 8px 8px 14px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .25); font-size: 14px; opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s; max-width: 100%; }
.ui-toast.on { opacity: .97; transform: none; }
.ui-toast.err { background: var(--crit); color: #fff; }
.ui-toast .sh-btn { background: transparent; color: inherit; border-color: color-mix(in srgb, currentColor 45%, transparent); padding: 3px 10px; min-height: 0; }
.ui-toast .ui-tact { font-weight: 600; }
.ui-toast .ui-tx { border: 0; padding: 3px 6px; opacity: .75; }
/* skeletons instead of "Loading…" */
.ui-skel { display: grid; gap: 10px; padding: 6px 0; }
.ui-sk-row { display: flex; gap: 14px; }
.ui-sk-row span, .ui-sk-line { display: block; height: 12px; border-radius: 4px; background: linear-gradient(90deg, var(--soft) 25%, var(--border) 50%, var(--soft) 75%); background-size: 400% 100%; animation: ui-shimmer 1.4s ease infinite; }
@keyframes ui-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
/* a row that just changed */
.ui-hl { animation: ui-hl 2.2s ease-out; }
@keyframes ui-hl { from { background: color-mix(in srgb, var(--accent) 22%, transparent); } to { background: transparent; } }
/* shortcut list */
.ui-keytbl td:first-child { white-space: nowrap; width: 1%; }
kbd { font: 12px ui-monospace, Menlo, Consolas, monospace; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 4px; padding: 1px 6px; background: var(--soft); }
@media (prefers-reduced-motion: reduce) { .ui-spin, .ui-sk-row span, .ui-sk-line, .ui-hl { animation: none; } .ui-toast { transition: none; } }