/* Chamber Tracker — tonal surfaces (Material 3) with Apple grouping, type and restraint. */
:root {
  --font: -apple-system, "SF Pro Text", "Inter", "Roboto", system-ui, "Segoe UI", sans-serif;
  /* surfaces */
  --page: #f2f4f1; --surface: #ffffff; --group: #f6f7f5; --group-high: #eceeea; --outline: #dfe3dd; --outline-strong: #c9cfc7;
  /* text */
  --on: #1a1c1a; --on-2: #3f453f; --on-var: #5f6560; --on-faint: #8b918b;
  /* primary: House green */
  --primary: #1e6b47; --on-primary: #ffffff; --primary-container: #d3ecdc; --on-primary-container: #0b3b25;
  /* tertiary: watch gold */
  --tertiary: #7a5300; --tertiary-container: #ffe7b3; --on-tertiary-container: #4a3300;
  /* sides */
  --gov: #b3261e; --gov-container: #fbe2df; --nongov: #1a5fb4; --nongov-container: #dce8f8;
  --danger: #b3261e; --warn: #8a5a00;
  /* live: a dedicated, unmissable red for "this is happening right now" */
  --live: #c5281f; --on-live: #ffffff; --live-container: #fbdcd9; --on-live-container: #5c130f;
  --shadow: 0 1px 2px rgba(20, 30, 20, .04), 0 8px 24px rgba(20, 30, 20, .06);
  --r-card: 20px; --r-group: 14px; --r-row: 10px; --rail: 84px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --page: #101311; --surface: #171a17; --group: #1d201d; --group-high: #262a26; --outline: #2f342f; --outline-strong: #3d433d;
    --on: #e6e9e5; --on-2: #c5cac4; --on-var: #9aa19a; --on-faint: #6d746d;
    --primary: #8fd4ad; --on-primary: #05301c; --primary-container: #134d33; --on-primary-container: #c9f0d9;
    --tertiary: #ffd98a; --tertiary-container: #5a3f00; --on-tertiary-container: #ffe7b3;
    --gov: #ffb4ab; --gov-container: #5c1a15; --nongov: #a9c8ff; --nongov-container: #143a6a;
    --danger: #ffb4ab; --warn: #f2c15c;
    --live: #ff5449; --on-live: #3b0906; --live-container: #601410; --on-live-container: #ffdad4;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--page); color: var(--on); font: 400 15px/1.45 var(--font); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.015em; }
p { margin: 0; }
button { font: inherit; color: inherit; }
time, .t, .rail, .num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.muted { color: var(--on-var); }
.faint { color: var(--on-faint); }
.small { font-size: 13px; }
.caption { font-size: 12px; font-weight: 500; color: var(--on-var); }
.section-label { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--on-var); }

/* buttons & chips */
.btn { border: 0; border-radius: 999px; padding: 8px 16px; cursor: pointer; font-weight: 600; font-size: 14px; line-height: 1.2; background: var(--primary-container); color: var(--on-primary-container); }
.btn:hover { filter: brightness(.97); }
.btn.primary { background: var(--primary); color: var(--on-primary); }
.btn.quiet { background: transparent; color: var(--primary); padding: 8px 10px; }
.btn.quiet:hover { background: var(--group-high); }
.btn.small { padding: 6px 12px; font-size: 13px; }
.btn.on { background: var(--group-high); color: var(--on-var); }
.file-btn { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 8px 16px; background: var(--primary); color: var(--on-primary); cursor: pointer; font-size: 14px; font-weight: 600; }
.file-btn.tonal { background: var(--primary-container); color: var(--on-primary-container); }
.file-btn input { display: none; }
.linkish { background: none; border: 0; padding: 0; color: var(--primary); cursor: pointer; font-size: 13px; font-weight: 500; }
.linkish:hover { text-decoration: underline; }
.chip { display: inline-flex; align-items: center; border-radius: 999px; padding: 2px 9px; font-size: 12px; font-weight: 600; line-height: 1.4; white-space: nowrap; background: var(--group-high); color: var(--on-var); }
.chip.live { background: var(--live); color: var(--on-live); }
.chip.next { background: var(--primary-container); color: var(--on-primary-container); }
.chip.gov { background: var(--gov-container); color: var(--gov); }
.chip.nongov { background: var(--nongov-container); color: var(--nongov); }
.chip.watch { background: var(--tertiary-container); color: var(--on-tertiary-container); }
.chip.tbc { background: var(--group-high); color: var(--on-faint); font-weight: 500; }
.chip.warn { background: #fdecc8; color: var(--warn); }
.chip.interrupted { background: #fdecc8; color: var(--warn); }
.chip.fc-ref { background: var(--nongov-container); color: var(--nongov); padding: 2px 7px; font-weight: 700; cursor: help; }
.chip .short { display: none; }
@media (max-width: 480px) { .chip .full { display: none; } .chip .short { display: inline; } }

.timing { margin-top: 4px; font-size: 13px; }
.timing > summary { cursor: pointer; color: var(--on-faint); font-size: 12px; list-style: none; display: inline-block; padding: 2px 0; }
.timing > summary::-webkit-details-marker { display: none; }
.timing > summary::before { content: "⏱ "; }
.timing.set > summary { color: var(--primary); font-weight: 600; }
.timing-body { display: grid; gap: 8px; margin: 6px 0 4px; padding: 10px 12px; border-radius: var(--r-row); background: var(--group); }
.timing-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.timing-row > span:first-child { flex-basis: 100%; font-weight: 500; color: var(--on-2); }
.timing-row label { display: inline-flex; align-items: center; gap: 5px; color: var(--on-var); }
.timing-row .unit, .timing-help { color: var(--on-faint); font-size: 12px; }
.timing-help { margin: 0; }
.override-input, .bounds-input { width: 56px; border: 1px solid var(--outline-strong); border-radius: 8px; padding: 4px 7px; font: inherit; font-size: 14px; background: var(--surface); color: var(--on); }
.override-input:focus, .bounds-input:focus { outline: 2px solid var(--primary); outline-offset: 1px; }

/* app header */
.app-head { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 24px; padding-top: max(12px, env(safe-area-inset-top)); background: color-mix(in srgb, var(--page) 78%, transparent); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); }
.head-left { display: flex; align-items: center; gap: 10px; }
.icon-btn { border: 0; background: transparent; width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--on); flex: none; }
.icon-btn:hover { background: var(--group-high); }
.burger-lines { position: relative; display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; }
.burger-lines::before, .burger-lines::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor; border-radius: 2px; }
.burger-lines::before { top: -6px; } .burger-lines::after { top: 6px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand .mark { width: 22px; height: 22px; border-radius: 7px; background: var(--primary); position: relative; }
.brand .mark::after { content: ""; position: absolute; inset: 6px 5px; border-radius: 2px; background: linear-gradient(var(--on-primary) 0 2px, transparent 2px 4px, var(--on-primary) 4px 6px, transparent 6px 8px, var(--on-primary) 8px 10px); opacity: .9; }
.brand .name { font-weight: 600; font-size: 17px; letter-spacing: -0.015em; white-space: nowrap; }
.clock { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; white-space: nowrap; color: var(--on); }
.head-right { display: flex; align-items: center; gap: 10px; min-width: 0; }
@media (max-width: 640px) { .head-right .conn:not(.err) { display: none; } .brand .name { white-space: nowrap; } .app-head .btn { white-space: nowrap; } }
.conn { font-size: 13px; color: var(--on-var); display: inline-flex; align-items: center; gap: 6px; }
.conn::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--on-faint); }
.conn.ok::before { background: var(--primary); } .conn.err::before { background: var(--danger); }

/* burger menu: side drawer for the Daily Program + Speakers List uploads */
body.menu-open { overflow: hidden; }
.menu-backdrop { position: fixed; left: 0; right: 0; bottom: 0; top: var(--header-h, 64px); background: rgba(0,0,0,.4); z-index: 20; }
.side-menu { position: fixed; left: 0; top: var(--header-h, 64px); height: calc(100% - var(--header-h, 64px)); width: min(380px, 88vw); background: var(--surface); box-shadow: var(--shadow); z-index: 21; overflow-y: auto; }
.side-menu-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 8px 8px 20px; position: sticky; top: 0; background: var(--surface); }
.side-menu-head h3 { font-size: 18px; }
.side-menu-body { padding: 4px 20px 24px; display: grid; gap: 20px; }
.menu-block h4 { font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--on-var); text-transform: uppercase; margin-bottom: 8px; }
.menu-block .upload-row { padding: 0; }
#menu-program { display: flex; flex-direction: column; gap: 10px; }
#menu-program .summary { font-size: 14px; color: var(--on-2); }
#menu-program .summary strong { color: var(--on); font-weight: 600; }
#menu-program .actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }

/* watching bar: at-a-glance status for the watched MP, with a dropdown that the browser remembers */
.watchbar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 4px 24px 0; padding: 12px 16px; background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow); }
.watchbar-row { display: flex; align-items: center; gap: 8px; }
.watchbar-label { font-size: 13px; font-weight: 600; color: var(--on-var); }
.watchbar-row select { font: inherit; font-weight: 600; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--outline); background: var(--group); color: var(--on); }
.watchbar-status { flex: 1; min-width: 200px; font-size: 14px; line-height: 1.4; }
.watchbar-status .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; }
.watchbar-status.live { color: var(--on-live-container); }
.watchbar-status.live .dot { background: var(--live); animation: pulse-live 1.4s infinite; }
.watchbar-status.none { color: var(--on-faint); }
@media (max-width: 640px) { .watchbar { margin: 4px 16px 0; } .watchbar-status { min-width: 100%; order: 3; } }

/* speeches: the watched MP's next speech, everything upcoming, and what they've done, across both chambers */
.watch-detail { margin: 8px 24px 0; padding: 4px 16px 14px; background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow); }
.watch-detail .sec-head { padding: 14px 4px 6px; }
.watch-detail .watch { margin: 0 0 10px; }
.watch-detail .collapsible .watch { margin: 0; }
.watch-block-head { font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--on-var); padding: 4px 4px 8px; }
@media (max-width: 640px) { .watch-detail { margin: 8px 16px 0; } }

/* division banner: obvious when a division is called and what's being decided */
.division-banner { margin: 8px 20px 4px; padding: 12px 14px; border-radius: var(--r-group); display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; font-size: 14px; }
.division-banner .tag { font-weight: 700; text-transform: uppercase; font-size: 11px; letter-spacing: .04em; padding: 3px 9px; border-radius: 999px; }
.division-banner .subject { font-weight: 500; flex: 1; min-width: 160px; }
.division-banner .outcome { font-weight: 600; white-space: nowrap; }
.division-banner.pending { background: var(--live-container); color: var(--on-live-container); animation: pulse-live 1.6s infinite; }
.division-banner.pending .tag { background: var(--live); color: var(--on-live); }
.division-banner.agreed { background: var(--primary-container); color: var(--on-primary-container); }
.division-banner.agreed .tag { background: var(--primary); color: var(--on-primary); }
.division-banner.negatived { background: var(--gov-container); color: var(--gov); }
.division-banner.negatived .tag { background: var(--gov); color: #fff; }

/* segmented control (mobile) */
.tabs { display: none; margin: 12px 16px 0; padding: 3px; background: var(--group-high); border-radius: 12px; }
.tabs button { flex: 1; padding: 7px; border: 0; border-radius: 9px; background: transparent; color: var(--on-var); font-weight: 600; font-size: 14px; }
.tabs button.active { background: var(--surface); color: var(--on); box-shadow: 0 1px 3px rgba(0,0,0,.12); }

/* panels */
.panels { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 20px 24px 8px; max-width: 1600px; margin: 0 auto; }
.panel { background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow); min-width: 0; overflow: hidden; }
@media (max-width: 960px) {
  .tabs { display: flex; }
  .panels { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding: 12px 16px 16px; scrollbar-width: none; }
  .panels::-webkit-scrollbar { display: none; }
  .panel { flex: 0 0 100%; scroll-snap-align: start; }
  .app-head { padding: 12px 16px; }
  .conn { font-size: 0; }
  .status { white-space: normal; }
  #notif-btn { padding: 6px 10px; font-size: 13px; }
  .panel-head h2 { font-size: 20px; }
  :root { --rail: 72px; }
}
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 20px 20px 12px; flex-wrap: wrap; }
.panel-head h2 { font-size: 22px; }
.status { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; color: var(--on-var); background: var(--group); border-radius: 999px; padding: 5px 12px 5px 9px; white-space: nowrap; }
.status.live { background: var(--live-container); color: var(--on-live-container); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--on-faint); flex: none; }
.status.live .dot { background: var(--live); animation: pulse-live 1.4s infinite; }
.dot.warn { background: var(--warn); } .dot.err { background: var(--danger); }
@keyframes pulse-live { 0% { box-shadow: 0 0 0 0 rgba(197,40,31,.5); } 70% { box-shadow: 0 0 0 7px rgba(197,40,31,0); } 100% { box-shadow: 0 0 0 0 rgba(197,40,31,0); } }

.sec { padding: 8px 20px 16px; }
.sec-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 10px 4px 8px; }
.sec-head .aside { font-size: 13px; color: var(--on-var); }

/* grouped inset list (Apple) on tonal surface (Material) */
.group { background: var(--group); border-radius: var(--r-group); padding: 4px; }
.group > * + * { position: relative; }
.row-sep::before { content: ""; position: absolute; left: calc(var(--rail) + 16px); right: 8px; top: 0; height: 1px; background: var(--outline); }

/* watch strip */
.watch { list-style: none; margin: 0 20px 4px; padding: 0; background: var(--tertiary-container); border-radius: var(--r-group); overflow: hidden; }
.watch li { display: grid; grid-template-columns: minmax(var(--rail), max-content) 1fr; gap: 12px; padding: 11px 14px; align-items: baseline; color: var(--on-tertiary-container); }
.watch li + li { border-top: 1px solid rgba(0,0,0,.06); }
.watch .t { font-weight: 600; font-size: 14px; white-space: nowrap; }
.watch .who { font-weight: 600; }
.watch .what { font-size: 13px; opacity: .85; }
.watch li.now { background: var(--primary); color: var(--on-primary); }
.watch li.spoke { opacity: .75; }

/* speaker reconciliation debug list (menu-debug) */
.debug-list { margin: 0; background: var(--group); }
.debug-list li { color: var(--on); }
.debug-list .who { font-weight: 600; margin-right: 6px; }
.debug-list .what { font-size: 12px; color: var(--on-var); margin-top: 2px; }

/* now hero card */
.now { margin: 8px 20px 4px; padding: 16px; background: var(--primary-container); color: var(--on-primary-container); border-radius: var(--r-group); }
.now .section-label { color: var(--on-primary-container); opacity: .75; }
.now .item-title { font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: -0.015em; margin-top: 4px; }
.now .meta { font-size: 13px; opacity: .8; margin-top: 3px; }
.now .speaker { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: baseline; margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--surface); color: var(--on); }
.now .speaker .who { font-size: 20px; font-weight: 600; letter-spacing: -0.015em; }
.now .speaker .since { color: var(--on-var); font-size: 13px; white-space: nowrap; }
.now .speaker.watched { background: var(--tertiary-container); color: var(--on-tertiary-container); }
.now .speaker.watched .since { color: inherit; opacity: .8; }
/* Predicted end of the speech underway. A calibrated estimate (the app has timed this Member on this
   business itself) is stated plainly; an estimate-only one is muted and dashed, so the difference is
   legible without reading the caption. */
.now .speaker-eta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 8px; padding: 8px 14px; border-radius: 12px; background: var(--primary-container); color: var(--on-primary-container); }
.now .speaker-eta .eta-main { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.now .speaker-eta .eta-basis { font-size: 12px; font-weight: 500; opacity: .85; }
.now .speaker-eta.estimate-only { background: transparent; color: var(--on-var); border: 1px dashed var(--outline-strong); }
.now .speaker-eta.estimate-only .eta-main { font-weight: 500; }
.now .speaker-eta.over { background: var(--tertiary-container); color: var(--on-tertiary-container); border-color: transparent; }

/* Literal countdown from the Standing Orders cap (90 sec statements, 3 min constituency statements) —
   a second, distinct counter from .speaker-eta above: that one predicts from average pace, this one just
   ticks the clock down every second (see app.js tickHardCountdowns). "soon" = 15s or less left, "over" =
   past the limit. */
.now .hard-countdown { display: flex; align-items: baseline; gap: 8px; margin-top: 8px; padding: 8px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--outline-strong); }
.now .hard-countdown .cd-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--on-var); }
.now .hard-countdown .cd-value { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.now .hard-countdown .cd-note { font-size: 12px; color: var(--on-var); }
.now .hard-countdown.soon { background: #fdecc8; border-color: transparent; color: var(--warn); }
.now .hard-countdown.soon .cd-value, .now .hard-countdown.soon .cd-label, .now .hard-countdown.soon .cd-note { color: inherit; }
.now .hard-countdown.over { background: var(--danger); border-color: transparent; color: #fff; }
.now .hard-countdown.over .cd-value, .now .hard-countdown.over .cd-label, .now .hard-countdown.over .cd-note { color: inherit; }

.now .speaker.none { background: transparent; padding: 6px 0 0; color: inherit; opacity: .8; font-size: 14px; }
.now .empty { margin-top: 4px; font-size: 14px; opacity: .85; }
.now .group { background: var(--surface); margin-top: 12px; }
.now .queue-head { color: var(--on-primary-container); }
.note { font-size: 13px; margin-top: 8px; opacity: .9; }
.note.delay { color: var(--warn); font-weight: 500; opacity: 1; }

/* queue */
.queue-head { display: flex; justify-content: space-between; gap: 8px 14px; align-items: baseline; flex-wrap: wrap; padding: 10px 6px 6px; font-size: 12px; color: var(--on-var); }
.queue-head .count { font-weight: 600; color: var(--on-2); }
.now .queue-head .count, .tl-row.live .queue-head .count, .seg.live .queue-head .count { color: var(--on-primary-container); }
.slots { list-style: none; margin: 0; padding: 0; }
.slot { position: relative; display: grid; grid-template-columns: var(--rail) 1fr; gap: 10px; align-items: center; padding: 8px 10px; border-radius: var(--r-row); font-size: 14px; }
.slot .col { min-width: 0; }
.slot .col.gov { justify-self: end; text-align: right; }
.slot-cols { display: grid; grid-template-columns: var(--rail) 1fr 1fr; gap: 10px; padding: 6px 10px 2px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--on-faint); }
.slot-cols span:last-child { text-align: right; }
.slot-cols > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slot-cols .short { display: none; }
.queue { container-type: inline-size; }
@container (max-width: 380px) { .slot-cols .full { display: none; } .slot-cols .short { display: inline; } }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.slot .t { color: var(--on-2); font-size: 14px; }
.slot .t.pred { color: var(--on-var); }
.slot .t.low { color: var(--on-faint); font-style: italic; }
.slot .name { font-weight: 500; min-width: 0; }
.slot .name .tbc { color: var(--on-faint); font-weight: 400; font-style: italic; }
.slot .name .n { color: var(--on-var); font-weight: 400; font-size: 13px; }
.slot.done { opacity: .55; }
.slot.done .name { text-decoration: line-through; font-weight: 400; }
.slot.skipped .name { text-decoration: line-through wavy; }
.slot.skipped .n { color: var(--warn); }
.slot.watched { background: var(--tertiary-container); color: var(--on-tertiary-container); }
.slot.watched .name, .slot.watched .t { color: inherit; font-weight: 600; }
.slot.just-added .name::after { content: "new"; margin-left: 8px; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--on-primary-container); background: var(--primary-container); padding: 2px 6px; border-radius: 999px; vertical-align: 1px; }
.done-list { padding: 0 6px 4px; }
.done-list summary { cursor: pointer; font-size: 12px; font-weight: 500; color: var(--on-var); padding: 8px 4px 4px; list-style: none; }
.done-list summary::-webkit-details-marker { display: none; }
.done-list summary::before { content: "▸ "; } .done-list[open] summary::before { content: "▾ "; }

/* timeline */
.tl { list-style: none; margin: 0; padding: 0; }
.tl-row { position: relative; display: grid; grid-template-columns: var(--rail) 1fr; gap: 12px; padding: 10px 10px; border-radius: var(--r-row); }
.tl-row .rail { font-size: 14px; padding-top: 1px; }
.rail.actual { color: var(--on-var); }
.rail.fixed { color: var(--on); font-weight: 600; }
.rail.pred { color: var(--on-var); } .rail.pred::before { content: "~"; }
.rail.low { color: var(--on-faint); font-style: italic; } .rail.low::before { content: "≈"; }
.rail.none { color: var(--on-faint); }
.tl-row .body { min-width: 0; }
.tl-row details > summary { list-style: none; cursor: pointer; }
.tl-row details > summary::-webkit-details-marker { display: none; }
.tl-row .title { font-weight: 500; line-height: 1.35; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tl-row .sub { font-size: 13px; color: var(--on-var); margin-top: 2px; }
.tl-row.done .title { color: var(--on-var); font-weight: 400; }
.tl-row.skipped .title { color: var(--on-faint); text-decoration: line-through; font-weight: 400; }
.tl-row.suspension .title { color: var(--on-var); font-weight: 500; }
.tl-row.suspension { background: repeating-linear-gradient(135deg, transparent 0 6px, var(--group-high) 6px 8px); }
/* Interrupted is distinct from suspended: the whole sitting doesn't stop, just this one piece of
   business, expected to resume — an accent bar rather than the suspension's full hatch. */
.tl-row.interrupted { border-left: 3px solid var(--warn); padding-left: 7px; }
.tl-row.interrupted .title { color: var(--warn); }
.seg.placeholder .title { font-weight: 500; color: var(--on-2); }
.tl-row.live { background: var(--primary-container); color: var(--on-primary-container); }
.tl-row.live .rail, .tl-row.live .sub { color: var(--on-primary-container); }
.tl-row.live .rail { font-weight: 600; }
.tl-row.live .title { font-weight: 600; }
.tl-row.live .group { background: var(--surface); }
.tl-row.has-watched::after { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--tertiary); }
.tl-now { display: grid; grid-template-columns: var(--rail) 1fr; gap: 12px; align-items: center; padding: 4px 10px; }
.tl-now .rail { color: var(--primary); font-weight: 700; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.tl-now .line { height: 2px; background: var(--primary); border-radius: 2px; position: relative; }
.tl-now .line::before { content: ""; position: absolute; left: -6px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 3px var(--surface); }
.tl-row .group { margin-top: 10px; }
.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--on-var); padding: 10px 6px 0; }
.legend b { font-weight: 600; color: var(--on); }

/* speakers list */
.segs { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.seg { background: var(--group); border-radius: var(--r-group); padding: 10px 10px 8px; }
.seg-head { display: grid; grid-template-columns: var(--rail) 1fr; gap: 12px; align-items: baseline; padding: 2px 4px; }
.seg-head .rail { font-size: 14px; }
.seg-head .title { font-weight: 500; }
.seg-head .sub { font-size: 13px; color: var(--on-var); margin-top: 1px; }
.seg.live .title { color: var(--on-primary-container); font-weight: 600; }
.seg.live { background: var(--primary-container); }
.seg.live .rail, .seg.live .sub, .seg.live .queue-head { color: var(--on-primary-container); }
.seg.live .group { background: var(--surface); }
.seg.finished .title { color: var(--on-var); font-weight: 400; }
.seg .group { background: var(--surface); margin-top: 4px; }
.seg-actions { display: flex; gap: 12px; padding: 8px 6px 0 calc(var(--rail) + 16px); }

/* history */
.history { list-style: none; margin: 0; padding: 0; }
.history li { position: relative; display: grid; grid-template-columns: var(--rail) 1fr; gap: 12px; padding: 8px 10px; font-size: 14px; }
.history .t { color: var(--on-var); }
.history .item { color: var(--on-var); font-size: 12px; }
.history li.event .text { color: var(--on-var); }
.history li.watched { background: var(--tertiary-container); color: var(--on-tertiary-container); border-radius: var(--r-row); }

details.collapsible > summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 10px 4px; }
details.collapsible > summary::-webkit-details-marker { display: none; }
details.collapsible > summary .section-label::before { content: "▸ "; color: var(--on-faint); }
details.collapsible[open] > summary .section-label::before { content: "▾ "; }
details.collapsible > summary .aside { font-size: 13px; color: var(--on-var); }

.upload-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 6px 4px 4px; }
.warnings { margin: 8px 4px 0; font-size: 13px; color: var(--warn); }
.warnings ul { margin: 4px 0 0; padding-left: 18px; }

.app-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 24px 32px; font-size: 12px; color: var(--on-var); max-width: 1600px; margin: 0 auto; flex-wrap: wrap; }

dialog { border: 0; border-radius: var(--r-card); max-width: 720px; width: calc(100% - 32px); background: var(--surface); color: var(--on); padding: 24px; box-shadow: var(--shadow); }
dialog::backdrop { background: rgba(0,0,0,.35); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
dialog h3 { font-size: 18px; margin-bottom: 4px; }
dialog textarea { width: 100%; margin-top: 12px; font: 12px/1.45 ui-monospace, Menlo, Consolas, monospace; border: 0; border-radius: 12px; padding: 12px; background: var(--group); color: var(--on); }
.text-input { width: 100%; margin-top: 12px; font: inherit; font-size: 15px; border: 0; border-radius: 12px; padding: 10px 12px; background: var(--group); color: var(--on); }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.text-input.plain { text-transform: none; letter-spacing: normal; }
.text-input { flex: 1; min-width: 0; border: 1px solid var(--group-high); border-radius: 10px; padding: 8px 12px; background: var(--group); color: var(--on); font-size: 14px; font-family: inherit; text-transform: uppercase; letter-spacing: .04em; }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: color-mix(in srgb, var(--on) 92%, transparent); color: var(--surface); padding: 10px 18px; border-radius: 999px; max-width: 90vw; z-index: 10; font-size: 14px; font-weight: 500; box-shadow: 0 8px 24px rgba(0,0,0,.25); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

.win { font-size: 12px; color: var(--on-var); margin-top: 2px; }
.slot .name .win { display: block; font-weight: 400; }
.win-inline { font-size: 13px; color: var(--on-var); font-weight: 400; }

/* ---- sections ------------------------------------------------------------------
   One section per question, chosen from the bottom bar. Each section is a stack of clearly bounded
   cards with a plain heading, so it's obvious where one thing ends and the next begins. */
.views { max-width: 760px; margin: 0 auto; padding: 4px 16px 8px; }
.view-title { font-size: 26px; letter-spacing: -0.02em; margin: 10px 2px 12px; }
.view-sub { font-size: 13px; color: var(--on-var); margin: 0 2px 10px; }
.view .sec { padding: 0; }
.view .panel { background: transparent; box-shadow: none; border-radius: 0; overflow: visible; }

.card { background: var(--surface); border: 1px solid var(--outline); border-radius: 16px; padding: 14px 16px 16px; margin-bottom: 14px; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.card-head h2 { font-size: 18px; letter-spacing: -0.01em; }
.card > p.muted { margin: 0; font-size: 14px; }

/* the watched MP */
.mp-card { border-color: var(--tertiary); background: var(--tertiary-container); color: var(--on-tertiary-container); }
.mp-card .card-head { margin-bottom: 4px; }
.mp-card .linkish { color: var(--on-tertiary-container); text-decoration: underline; font-size: 14px; }
.mp-when { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; font-variant-numeric: tabular-nums; }
.mp-when .rel { font-size: 17px; font-weight: 500; letter-spacing: 0; margin-left: 6px; }
.mp-when .dot { display: inline-block; width: 11px; height: 11px; margin-right: 10px; vertical-align: 3px; background: var(--live); animation: pulse-live 1.4s infinite; }
.mp-line { font-size: 14px; margin-top: 3px; }
.mp-card .field select { width: 100%; font: inherit; font-size: 16px; font-weight: 600; padding: 10px 12px; margin-bottom: 12px; border-radius: 10px; border: 1px solid var(--outline-strong); background: var(--surface); color: var(--on); }

/* chamber cards on Now */
.chamber-card .now { margin: 0; padding: 0; background: transparent; color: var(--on); }
.chamber-card .now .section-label { color: var(--on-var); }
.chamber-card .now .speaker { background: var(--group); }
.chamber-card .now .speaker.watched { background: var(--tertiary-container); }
.chamber-card .division-banner { margin: 0 0 10px; }
.next-head { margin-top: 14px; font-size: 13px; font-weight: 600; color: var(--on-var); }
.chamber-card .group { background: var(--group); margin-top: 6px; }
.chamber-card .queue-head { display: none; }
.slot.more .linkish { font-size: 14px; }

/* House | Federation Chamber */
.chamber-switch { display: flex; gap: 4px; padding: 4px; margin: 0 0 14px; background: var(--group-high); border-radius: 12px; }
.chamber-switch button { flex: 1; min-height: 40px; border: 0; border-radius: 9px; background: transparent; color: var(--on-var); font-weight: 600; font-size: 15px; cursor: pointer; }
.chamber-switch button.active { background: var(--surface); color: var(--on); box-shadow: 0 1px 3px rgba(0,0,0,.12); }

/* Speakers and Order inside a section: each item its own card */
.view .segs { gap: 12px; }
.view .seg { background: var(--surface); border: 1px solid var(--outline); border-radius: 16px; padding: 12px; }
.view .seg.live { background: var(--surface); border: 2px solid var(--primary); }
.view .seg.live .title { color: var(--primary); }
.view .seg.live .rail, .view .seg.live .sub { color: var(--on-var); }
.view .seg .group { background: var(--group); }
.view .tl { background: var(--surface); border: 1px solid var(--outline); border-radius: 16px; padding: 4px; }
.view .sec > .group { background: transparent; padding: 0; }
.switch-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 2px; font-size: 14px; cursor: pointer; }
.switch-row input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--primary); flex: none; }
.card .switch-row + .switch-row { border-top: 1px solid var(--outline); }

/* Predictions */
.pred-now { font-size: 16px; }
.pred-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.pred-table th { text-align: left; font-size: 12px; font-weight: 600; color: var(--on-var); padding: 0 6px 6px; border-bottom: 1px solid var(--outline); }
.pred-table td { padding: 9px 6px; border-bottom: 1px solid var(--outline); vertical-align: top; }
.pred-table tr:last-child td { border-bottom: 0; }
.pred-table .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pred-table .right { text-align: right; }
.pred-table tr.watched td { background: var(--tertiary-container); color: var(--on-tertiary-container); font-weight: 600; }
.side-tag { font-size: 11px; font-weight: 500; color: var(--on-faint); }

/* Alerts */
.alert-item + .alert-item { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--outline); }
.alert-what { font-weight: 600; margin-bottom: 6px; }
.alert-row { display: grid; grid-template-columns: 104px 1fr; gap: 10px; padding: 5px 0; font-size: 14px; }
.alert-kind { color: var(--on-var); }
.state { font-weight: 500; font-variant-numeric: tabular-nums; }
.state.sent { color: var(--primary); font-weight: 600; }
.day-list { list-style: none; margin: 0; padding: 0; }
.day-list li { display: grid; grid-template-columns: 92px 1fr; gap: 10px; padding: 8px 0; font-size: 14px; }
.day-list li + li { border-top: 1px solid var(--outline); }
.day-list .t { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.day-list li.spoke { color: var(--on-var); }
.setting { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; font-size: 14px; }
.setting + .setting { border-top: 1px solid var(--outline); }
.setting select { font: inherit; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--outline-strong); background: var(--surface); color: var(--on); }

/* "Their day" clear format: Time, What it is, Where it is */
.their-day-list { list-style: none; margin: 0; padding: 0; }
.their-day-row { display: grid; grid-template-columns: 112px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--outline); font-size: 14px; }
.their-day-row:first-child { border-top: 0; }
.their-day-time { display: flex; flex-direction: column; gap: 2px; }
.their-day-time .time-val { font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; color: var(--on); }
.their-day-time .time-sub { font-size: 12px; color: var(--on-var); }
.their-day-what { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.their-day-what .what-title { font-weight: 600; font-size: 14px; color: var(--on); word-break: break-word; line-height: 1.35; }
.their-day-what .what-meta { font-size: 12px; color: var(--on-var); }
.their-day-where { text-align: right; flex-shrink: 0; }
.chamber-pill { display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.chamber-pill.house { background: var(--primary-container); color: var(--on-primary-container); }
.chamber-pill.federationChamber { background: var(--tertiary-container); color: var(--on-tertiary-container); }
.their-day-row.spoke { opacity: 0.72; }
.their-day-row.now { background: var(--live-container); margin: 0 -16px; padding: 10px 16px; border-radius: var(--r-row); border-top: 0; }
.their-day-row.now + .their-day-row { border-top: 0; }
.their-day-row.now .what-title, .their-day-row.now .what-meta { color: var(--on-live-container); }

@media (max-width: 520px) {
  .their-day-row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "time where"
      "what what";
    gap: 4px 10px;
    align-items: flex-start;
  }
  .their-day-time { grid-area: time; flex-direction: row; align-items: baseline; gap: 6px; }
  .their-day-where { grid-area: where; text-align: right; }
  .their-day-what { grid-area: what; margin-top: 2px; }
}

/* Danger settings button & warning */
.btn.danger { background: var(--danger); color: #ffffff; }
.btn.danger:hover { filter: brightness(0.92); }
@media (prefers-color-scheme: dark) {
  .btn.danger { background: var(--danger); color: #3b0906; }
}
.danger-setting { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--outline); }
.danger-title { color: var(--danger); }

/* bottom bar */
.bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding-bottom: env(safe-area-inset-bottom); background: color-mix(in srgb, var(--surface) 94%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-top: 1px solid var(--outline); }
.bottom-nav button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 60px; border: 0; background: transparent; color: var(--on-var); font-size: 11px; font-weight: 600; cursor: pointer; }
.bottom-nav svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bottom-nav button.active { color: var(--primary); }
.bottom-nav button.active svg { stroke-width: 2.3; }
.app-foot { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
@media (max-width: 640px) { .app-head { padding: 10px 12px; } }
.now.plain { margin: 0; padding: 0; background: transparent; color: var(--on); }
.pred-table .num div { white-space: normal; }
.pred-table td:last-child, .pred-table th:last-child { width: 104px; white-space: nowrap; }
.pred-table td:last-child div { white-space: nowrap; }
.chamber-switch button { white-space: nowrap; font-size: 14px; padding: 0 6px; }