/* chambers.css — Chamber Convenings page.
 * Loads AFTER measure.css, which supplies the design tokens (--ink, --brand, --line,
 * --marble, --radius, --wrap) and the shared .m-ext / .m-video link treatment. Only
 * page-specific rules live here. */

/* ------------------------------------------------------------------ the picker */
.c-picker {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px 16px; margin-bottom: 18px;
  box-shadow: 0 6px 20px rgba(120, 90, 20, .05);
}
.c-chambers { display: flex; gap: 6px; }
.c-chip {
  font: inherit; font-weight: 600; font-size: .9rem; cursor: pointer;
  padding: 7px 18px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--marble); color: var(--ink-soft);
}
.c-chip:hover { border-color: var(--brand); color: var(--brand-dark); }
.c-chip.is-on { background: var(--navy); border-color: var(--navy); color: #fff; }
#c-day {
  font: inherit; font-size: .88rem; color: var(--ink); text-transform: none; letter-spacing: 0;
  background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: 6px 10px;
  max-width: 100%; min-width: 0;
}

/* ------------------------------------------------------------------- day header */
.c-dayhead { margin-bottom: 26px; }
.c-daytitle { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.c-dayhead h1 { margin: 0; font-size: 1.42rem; color: var(--navy); line-height: 1.25; }
.c-sinedie {
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--gold-deep); background: #fdf6e6; border: 1px solid #ecd9a8;
  border-radius: 999px; padding: 3px 10px;
}
.c-overview {
  margin: 12px 0 0; font-size: 1rem; line-height: 1.6; color: var(--ink);
  border-left: 3px solid var(--accent); padding-left: 14px;
}
.c-stats {
  display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0;
}
.c-stat {
  display: flex; flex-direction: column; gap: 2px;
  background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 8px 14px;
}
.c-stat-k {
  font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft);
}
.c-stat-v { font-size: .9rem; font-weight: 600; color: var(--navy); }
.c-watchall { margin: 14px 0 0; }

/* ------------------------------------------------- the chronological day flow */
/* A continuous vertical rule ties the day together so repeated visits to the same
 * order read as "later that day", not as a duplicate section. */
.c-flow { position: relative; padding-left: 20px; border-left: 2px solid var(--line); }
.c-visit { margin: 0 0 26px; position: relative; }
.c-visit::before {
  content: ""; position: absolute; left: -26px; top: 8px;
  width: 10px; height: 10px; border-radius: 50%;
  background: #fff; border: 2px solid var(--brand);
}
.c-visit-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 0 0 10px; font-size: 1.02rem; color: var(--navy);
}
.c-visit-time {
  font-variant-numeric: tabular-nums; font-size: .76rem; font-weight: 600;
  color: var(--ink-soft); background: var(--marble);
  border: 1px solid var(--line); border-radius: 6px; padding: 2px 7px;
}
.c-visit-name { font-weight: 700; }
.c-again {
  font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--brand-dark); background: #eef4f9; border: 1px solid #cfe0ee;
  border-radius: 999px; padding: 2px 9px;
}
.c-visit-empty { margin: 0; color: var(--ink-soft); font-size: .88rem; font-style: italic; }

/* ------------------------------------------------------------------- bullets */
.c-bullets { list-style: none; margin: 0; padding: 0; }
.c-bullet {
  position: relative; padding: 7px 0 7px 16px; font-size: .93rem; line-height: 1.55;
  border-bottom: 1px solid var(--line);
}
.c-bullet:last-child { border-bottom: 0; }
.c-bullet::before {
  content: ""; position: absolute; left: 0; top: 15px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--gold);
}
.c-bullet-text { margin-right: 8px; }

/* --------------------------------------------------------------------- bills */
.c-bills { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px;
  /* minmax(0,1fr), not the default auto track: auto sized itself to the testimony rows'
     min-content and ran some cards past the column while others fit. */
  grid-template-columns: minmax(0, 1fr); }
.c-bill {
  background: #fff; border: 1px solid var(--line); border-radius: 11px;
}
.c-bill.is-tracked { border-color: var(--gold); box-shadow: 0 0 0 2px #fdf6e6; }
.c-bill-det > summary {
  list-style: none; cursor: pointer; padding: 0;
}
.c-bill-det > summary::-webkit-details-marker { display: none; }
.c-bill-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 10px 14px;
}
/* The old ::after arrow lived here. It was a 0.8rem glyph immediately beside the
   video link's play triangle -- two tiny arrows doing unrelated things. Replaced by
   .c-expand below. */
.c-bill-num { font-weight: 700; color: var(--brand-dark); text-decoration: none; white-space: nowrap; }
a.c-bill-num:hover { text-decoration: underline; }
.c-tracked {
  font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--gold-deep); background: #fdf6e6; border: 1px solid #ecd9a8;
  border-radius: 999px; padding: 2px 8px;
}
.c-bill-catch {
  flex: 1 1 240px; min-width: 0; color: var(--ink-soft); font-size: .85rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.c-bill-body { padding: 0 14px 12px; border-top: 1px solid var(--line); }
.c-bill-body p { margin: 10px 0 0; font-size: .92rem; line-height: 1.55; }

/* ------------------------------------------------------------------- remarks */
.c-remarks { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px;
  grid-template-columns: minmax(0, 1fr); }
.c-remark {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-size: .86rem; padding: 7px 10px; border-radius: 8px;
  background: var(--marble); border-left: 3px solid var(--line);
}
.c-remark-name { font-weight: 700; color: var(--navy); }
.c-remark-aff { color: var(--ink-soft); font-size: .78rem; }
.c-remark-pos {
  font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  border-radius: 999px; padding: 2px 8px; background: #fff; border: 1px solid var(--line);
  color: var(--ink-soft);
}
.c-remark-syn { flex: 1 1 100%; line-height: 1.5; }
/* Position colors mirror the digest email's POS_COLOR and measure.css's testimony
 * pills, so support/oppose read the same everywhere on the product. */
.c-pos-support { border-left-color: var(--ok); }
.c-pos-support .c-remark-pos { color: var(--ok); border-color: var(--ok-line); background: var(--ok-soft); }
.c-pos-oppose { border-left-color: var(--die); }
.c-pos-oppose .c-remark-pos { color: var(--die); border-color: #f3c9c5; background: var(--die-soft); }

.c-ainote {
  margin: 32px 0 0; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: .78rem; line-height: 1.55; color: var(--ink-soft);
}

/* -------------------------------------------------------------------- mobile */
@media (max-width: 720px) {
  .c-picker { gap: 10px; }
  .c-dayhead h1 { font-size: 1.2rem; }
  .c-flow { padding-left: 14px; }
  .c-visit::before { left: -20px; }
  .c-bill-catch { flex-basis: 100%; white-space: normal; }
}

/* Several floor_bill_debate occurrences can sit under one bill inside a single order
 * of business (the procedural run-up is logged as its own moment). They are grouped
 * under the bill; these style the per-occurrence blocks inside the expander. */
.c-occ + .c-occ { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
.c-occ-head { display: flex; align-items: baseline; gap: 8px; margin-top: 10px; }
.c-occ-kind {
  font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--brand-dark); background: #eef4f9; border: 1px solid #cfe0ee;
  border-radius: 999px; padding: 2px 9px;
}
.c-occ-count {
  font-size: .66rem; font-weight: 700; color: var(--ink-soft);
  background: var(--marble); border: 1px solid var(--line);
  border-radius: 999px; padding: 1px 7px; font-variant-numeric: tabular-nums;
}

/* First/second reading: a bare list of bill numbers. No catchlines, no expanders —
 * nothing happens at these readings beyond the clerk reading them aloud, so the list
 * IS the content. Laid out as a dense wrap so 20+ bills stay one scannable block
 * rather than 20 stacked rows. */
.c-roll { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.c-roll-item {
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  padding: 4px 11px; font-size: .88rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.c-roll-item a { color: var(--brand-dark); text-decoration: none; }
.c-roll-item a:hover { text-decoration: underline; }
.c-roll-item.is-tracked { border-color: var(--gold); background: #fdf6e6; }
.c-disposition {
  margin: 10px 0 0; font-size: .85rem; font-style: italic; color: var(--ink-soft);
}

/* Official vote tally (from the measure history, never the transcript). Sits at the
 * top of an expanded bill so the authoritative number is read before the narrative. */
.c-votes { display: grid; gap: 5px; margin-top: 10px; }
.c-vote { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.c-vote-tally {
  font-weight: 700; font-variant-numeric: tabular-nums; font-size: .9rem;
  color: var(--navy); background: var(--marble);
  border: 1px solid var(--line); border-radius: 7px; padding: 2px 9px;
  cursor: help;
}
.c-vote-what { flex: 1 1 200px; font-size: .84rem; color: var(--ink-soft); }
.c-bill-body-bare { border-top: 1px solid var(--line); padding: 0 14px 12px; }
/* Each of the two minority-report motions has its own carrier (floor schedule). */
.c-motion-carriers { margin: 8px 0 0; font-size: .84rem; color: var(--ink-soft); }
/* A member's own watch link, pushed to the right of the name/role/position row. */
.c-remark-watch { margin-left: auto; font-size: .8rem; }
/* An Article IV s19 motion card: no expander, just who moved it, what it covers, result. */
.c-motion-card .c-bill-num { color: var(--ink-soft); }
.c-motion-line { margin: 8px 0 0; font-size: .86rem; }
.c-motion-line .c-remark-name { margin-right: 6px; }
.c-motion-outcome { font-weight: 600; color: var(--navy); }

/* A visit whose prose is still queued. Muted, but present — its absence would read
 * as the chamber never having taken that order of business up. */
.c-visit-pending {
  margin: 0; font-size: .87rem; font-style: italic; color: var(--ink-soft);
  background: var(--marble); border: 1px dashed var(--line);
  border-radius: 9px; padding: 9px 12px;
}
/* The day's closing block. */
.c-adjourn::before { background: var(--navy); border-color: var(--navy); }
.c-adjourn p { margin: 0; font-size: .93rem; }

/* ---- Expand affordance ------------------------------------------------------
   A proper target at the right end of the card's top line, fenced off from the
   video link by a rule so the two are never confused. */
.c-expand {
  margin-left: auto; align-self: stretch; display: flex; align-items: center;
  padding-left: 16px; margin-right: 2px; border-left: 1px solid var(--line);
  color: var(--ink-soft); transition: color .15s ease;
}
/* The flip is deliberately NOT transitioned. Whether the chevron points down or up
   is state, not decoration, and a transitioned transform simply never resolves in a
   context that is not running animations (verified in the in-app preview: with the
   transition active the computed transform stayed at identity indefinitely; with it
   removed the rotation applies at once). Colour still animates. */
.c-bill-det > summary:hover .c-expand { color: var(--brand-dark); }
.c-bill-det[open] > summary .c-expand { transform: rotate(180deg); }
.c-bill-det > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

/* ---- Previous / next convening ---------------------------------------------- */
.c-daynav {
  display: flex; align-items: center; gap: 8px; margin-left: auto;
}
.c-daylabel-txt {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft);
}
.c-navbtn {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; cursor: pointer;
  background: #fff; color: var(--brand-dark);
  border: 1px solid var(--line); border-radius: 9px;
}
.c-navbtn:hover:not(:disabled) { border-color: var(--brand); background: var(--marble); }
.c-navbtn:disabled { opacity: .35; cursor: default; color: var(--ink-soft); }
.c-navbtn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

@media (max-width: 720px) {
  .c-daynav { margin-left: 0; width: 100%; }
  .c-daynav #c-day { flex: 1 1 auto; min-width: 0; }
}

/* Shown only while a day is built from the Major Topics that ship with the video --
   the proofed Recording Log lands a day or two later and adds per-bill detail. */
.c-provisional {
  margin: 14px 0 0; padding: 9px 13px; font-size: .84rem; line-height: 1.5;
  color: var(--ink-soft); background: var(--marble);
  border: 1px dashed var(--line); border-radius: 9px;
}

/* Speaker role. "Bill Carrier" for whoever opens the debate (the chamber's own
   convention — see chambers.js on why position beats name matching), "Spoke to the
   Bill" for everyone after. Replaces the model's guessed affiliation. */
.c-remark-role {
  font-size: .66rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-soft);
}
.c-remark-role.is-carrier {
  font-weight: 700; color: var(--gold-deep);
  background: #fdf6e6; border: 1px solid #ecd9a8;
  border-radius: 999px; padding: 2px 8px;
}
.c-remark.is-carrier { border-left-width: 4px; }

/* Expand / collapse every bill card at once. The cards are <details>, so the browser
   keeps each one's state per URL for the session — helpful, but it reads as arbitrary
   after paging between days, so there needs to be a way to set them all deliberately. */
.c-toolbar { display: flex; gap: 8px; margin: 14px 0 0; flex-wrap: wrap;
             align-items: center; }
/* Sits ABOVE the expand/collapse buttons and explains the gold outline and why some
 * cards are already open. Its own full-width line, so the two buttons always stay
 * together rather than one riding up beside a short sentence. */
.c-toolnote { font-size: .82rem; color: var(--ink-soft); flex-basis: 100%; }
.c-toolnote strong { color: var(--gold-deep); }
.c-expandall {
  font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer;
  color: var(--brand-dark); background: #fff;
  border: 1px solid var(--line); border-radius: 999px; padding: 5px 14px;
}
.c-expandall:hover { border-color: var(--brand); background: var(--marble); }
.c-expandall:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* "Read in full" — the clerk read the whole bill aloud, section by section, because the
 * chamber did not suspend Article IV s19. Rare (5 items in 2026R1, all House) and long
 * enough to dominate the item, so it sits on the CLOSED card: it is the explanation for
 * a 26-minute entry with one speaker. Deliberately not gold and not blue — it is neither
 * a watchlist flag nor an order-of-business label — and it is a link in its own right,
 * because the card's video link points at the debate, not at the reading. */
.c-readfull {
  font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: #6b4a86; background: #f5f0fa; border: 1px solid #ddcfea;
  border-radius: 999px; padding: 2px 8px; white-space: nowrap; text-decoration: none;
}
a.c-readfull:hover { background: #ebe1f5; border-color: #c9b4de; }

/* Bill cards that follow a narrative order of business (Propositions and Motions), as
 * opposed to standing alone under a reading order. The rule separates the actions taken
 * from the account of the sitting above them. */
.c-bills-after { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }

/* A convening whose recording stops before the sitting does. Senate 2026-02-19: the
 * video reports 3h19m, stops at 3:13:30, and the MP3 is 3h13m — the tail was never
 * captured. The Recording Log still says what happened, so the content stays; only the
 * play affordance goes. Amber rather than red: nothing here is wrong, it is incomplete. */
.c-audiocut {
  margin: 12px 0 0; padding: 10px 12px; border-radius: 8px;
  background: #fdf6e6; border: 1px solid #ecd9a8; color: var(--ink);
  font-size: .86rem; line-height: 1.45;
}
.c-audiocut strong { color: var(--gold-deep); }

/* A timestamp the recording never reached: shown, but not offered as a link. */
.m-video.is-noaudio {
  color: var(--ink-soft); cursor: default; text-decoration: none;
  display: inline-flex; align-items: center; gap: 5px;
}
.c-noaudio-tag {
  font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: #8a6d3b; background: #fdf6e6; border: 1px solid #ecd9a8;
  border-radius: 999px; padding: 1px 6px; white-space: nowrap;
}

/* An exception to the reading disposition above it — a measure the chair sent somewhere
 * other than the presiding officer's desk. Marked rather than merged into the standard
 * line, because it applies to one measure and the line above applies to all of them. */
.c-disposition-note { margin-top: 4px; font-style: normal; }
.c-disposition-note::before { content: "↳ "; color: var(--gold-deep); font-style: normal; }

/* A procedural moment that belongs to no order of business (committee assignments).
 * Visually a lighter section than a real order: no left rule, muted heading. */
.c-interlude { background: var(--marble); border: 1px dashed var(--line); border-radius: 9px;
  padding: 10px 13px; }
.c-interlude .c-visit-name { font-weight: 600; color: var(--ink-soft); }
.c-interlude p { margin: 6px 0 0; font-size: .88rem; line-height: 1.5; }


/* ================================================================= in-page player
 * "Watch" either opens the official player in a new tab (the default, and the only
 * behaviour that survives JS being off) or drives a panel pinned to the left of the
 * day. The panel is FIXED rather than in the flow: the day is a long scroll and the
 * point of watching along is that the video stays put while the text moves.
 *
 * It has no width of its own in the layout, so nothing reflows until it opens; when
 * it does, .m-wrap is pushed right AND capped so the column always fits beside it,
 * however narrow the window. Below the breakpoint the panel is a top strip instead --
 * a 360px sidebar plus an 880px column does not fit on a laptop held sideways.
 */
:root {
  /* The panel TAKES THE SLACK. On a wide screen the day column still wants only 880px,
   * so everything past (column + panel + gaps) was dead space -- measured at 1990px,
   * 585px of it. So the width is whatever is spare, floored at the size it used to be
   * fixed at and capped so the video never outgrows the reading column it sits beside.
   *
   * The HEIGHT term is the one that is easy to forget: a 16:9 video 760px wide is 428px
   * tall before any chrome, which is most of a laptop viewport. Bounding the width by
   * the viewport HEIGHT as well keeps the whole player on screen on a short window --
   * that is what `calc(56vh * 1.78)` is, a 16:9 width for 56vh of height. */
  --player-min: 320px;
  /* 860, not 760: the Invintus chrome shows its own volume slider and transport
     buttons only at 768px+ of player width, so a cap just below that threshold spent
     the space and got none of the benefit. Our own volume control (below) covers every
     width regardless. */
  --player-max: 860px;
  --player-gap: 26px;
  --player-w: clamp(
      var(--player-min),
      min(calc(100vw - var(--wrap) - 90px), calc(56vh * 1.78)),
      var(--player-max));
  /* Once the panel stops growing, the SURPLUS is split either side so the pair reads as
     one centred group. Pinned at 14px the whole layout hugged the left edge on a wide
     monitor -- 894px of nothing to the right of the column at 2560px. */
  --player-left: max(14px, calc((100vw - var(--player-w) - var(--player-gap) - var(--wrap)) / 2));
}

.c-playmode { display: flex; align-items: center; gap: 8px; }
.c-playmode-txt {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft);
}
.c-toggle {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font: inherit; font-size: .82rem; color: var(--ink-soft);
  background: none; border: 0; padding: 2px 0;
}
.c-toggle-track {
  position: relative; flex: 0 0 auto; width: 34px; height: 19px; border-radius: 999px;
  background: var(--marble); border: 1px solid var(--line);
  transition: background .16s ease, border-color .16s ease;
}
.c-toggle-knob {
  position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%;
  background: var(--ink-soft); transition: transform .16s ease, background .16s ease;
}
.c-toggle[aria-checked="true"] .c-toggle-track { background: var(--navy); border-color: var(--navy); }
.c-toggle[aria-checked="true"] .c-toggle-knob { transform: translateX(15px); background: #fff; }
.c-toggle[aria-checked="true"] { color: var(--navy); font-weight: 600; }
.c-toggle:hover .c-toggle-track { border-color: var(--brand); }
.c-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 6px; }

/* ---- the panel ------------------------------------------------------------- */
.c-player {
  position: fixed; z-index: 40; left: var(--player-left); top: 74px; width: var(--player-w);
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 10px 34px rgba(20, 48, 79, .17);
  overflow: hidden;
  transform: translateX(calc(-100% - 20px)); opacity: 0; visibility: hidden;
  transition: transform .22s ease, opacity .22s ease, visibility 0s linear .22s;
}
.c-player.is-open {
  transform: none; opacity: 1; visibility: visible;
  transition: transform .22s ease, opacity .22s ease, visibility 0s;
}
.c-player-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 8px 7px 12px; background: var(--navy); color: #fff;
}
.c-player-title {
  flex: 1 1 auto; min-width: 28px; font-size: .8rem; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.c-player-btn {
  flex: 0 0 auto; font: inherit; font-size: .72rem; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(255, 255, 255, .12); color: #fff;
  border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; padding: 3px 10px;
}
.c-player-btn:hover { background: rgba(255, 255, 255, .22); }
.c-player-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.c-player-btn[aria-pressed="true"] {
  background: var(--accent); border-color: var(--accent); color: var(--navy); font-weight: 600;
}
.c-player-vol { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; }
.c-player-mute {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; padding: 0; cursor: pointer;
  background: none; border: 0; border-radius: 6px; color: #fff;
}
.c-player-mute:hover { background: rgba(255, 255, 255, .18); }
.c-player-mute:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* The crossed-out speaker and the sound waves are the same glyph in two states. */
.c-player .c-vol-x { display: none; }
.c-player.is-muted .c-vol-x { display: inline; }
.c-player.is-muted .c-vol-wave { display: none; }
.c-player-volrange {
  -webkit-appearance: none; appearance: none;
  width: 56px; height: 14px; margin: 0; padding: 0;
  background: none; cursor: pointer; vertical-align: middle;
}
.c-player-volrange::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .3);
}
.c-player-volrange::-moz-range-track {
  height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .3);
}
.c-player-volrange::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; margin-top: -4px;
  width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 0;
}
.c-player-volrange::-moz-range-thumb {
  width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 0;
}
.c-player-volrange:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.c-player-reload {
  flex: 0 0 auto; width: 24px; height: 24px; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; color: #fff; border: 0; border-radius: 6px;
}
.c-player-reload:hover { background: rgba(255, 255, 255, .18); }
.c-player-reload:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.c-player-reload.is-spinning svg { animation: c-spin .6s linear; }
@keyframes c-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
/* A button that reads as a link, inside the status line. */
.c-player-lk {
  font: inherit; font-size: inherit; padding: 0; border: 0; background: none;
  color: var(--brand); text-decoration: underline; cursor: pointer;
}

.c-player-x {
  flex: 0 0 auto; width: 26px; height: 26px; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.1rem; line-height: 1;
  background: none; color: #fff; border: 0; border-radius: 7px;
}
.c-player-x:hover { background: rgba(255, 255, 255, .18); }
.c-player-x:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* 16:9. The Invintus embed sizes itself to the mount, so the box has to be the one
   holding the shape or the panel jumps height as the video loads. */
.c-player-mount { position: relative; aspect-ratio: 16 / 9; background: #000; }
.c-player-mount > * { width: 100%; height: 100%; }
.c-player-mount video { display: block; width: 100%; height: 100%; object-fit: contain; }
.c-player-now {
  padding: 7px 12px 8px; font-size: .76rem; line-height: 1.4; color: var(--ink-soft);
  border-top: 1px solid var(--line); background: var(--marble);
}
.c-player-now b { color: var(--navy); font-weight: 600; }
.c-player-now .c-player-nowt { font-variant-numeric: tabular-nums; }

/* ---- what opening it does to the page --------------------------------------- */
/* max-width as well as margin: on a 1200px window an 880px column pushed past a
   360px panel would run off the right edge, so the column gives up width first. */
body.c-playing-open .m-wrap,
body.c-playing-open .page-share {
  margin-left: calc(var(--player-left) + var(--player-w) + var(--player-gap));
  max-width: min(var(--wrap),
                 calc(100vw - var(--player-left) - var(--player-w) - var(--player-gap) - 20px));
  transition: margin-left .22s ease, max-width .22s ease;
}
/* The share bar under the day moves with it, so it centres in the right-hand column
   instead of sliding under the player (as on the Committee Player). */

/* ---- the section that is playing -------------------------------------------- */
/* The marker is on the left rule, where the eye already is when following the day --
   a full-width tint would fight the tracked-bill highlight that is already in use. */
.c-visit.is-playing::after {
  content: ""; position: absolute; left: -22px; top: 2px; bottom: -14px;
  width: 3px; border-radius: 2px; background: var(--brand);
}
.c-visit.is-playing::before { border-color: var(--brand); background: var(--brand); }
.c-visit.is-playing > .c-visit-head .c-visit-name { color: var(--brand-dark); }
.c-bill.is-playing { box-shadow: inset 3px 0 0 var(--brand); }

@media (prefers-reduced-motion: reduce) {
  .c-player, body.c-playing-open .m-wrap, .c-toggle-track, .c-toggle-knob,
  .tr-box { transition: none; }
}

/* Under this width a sidebar and the column cannot both fit, so the player moves to the
   top. Threshold lowered 1180 -> 900 to match the shrinking panel: at 900px the sidebar
   is 320 and the column still has 520, which reads fine -- the old 1180 sent perfectly
   workable layouts to the strip.

   It is a CENTERED CARD, not a full-width band. Stretching it edge to edge forced a
   fixed height on a 16:9 frame and the video lost its bottom; here the width is capped
   (and capped again by the height it implies), the aspect ratio is kept, and the whole
   frame stays visible. */
@media (max-width: 900px) {
  .c-player {
    left: 50%; right: auto; top: 56px;
    width: min(560px, calc(100vw - 24px), calc(42vh * 1.78));
    transform: translate(-50%, calc(-100% - 80px));
  }
  .c-player.is-open { transform: translate(-50%, 0); }
  .c-player-mount { aspect-ratio: 16 / 9; height: auto; }
  /* Push the column clear of the card rather than letting it read underneath. The card
     is width-capped, so its height is too -- 9/16 of the width, plus the bar and the
     status line. */
  body.c-playing-open .page-share { margin-left: auto; max-width: 1100px; }
  body.c-playing-open .m-wrap {
    margin-left: auto; margin-right: auto;
    max-width: var(--wrap);
    padding-top: calc(min(315px, calc((100vw - 24px) * 0.5625), 42vh) + 80px);
  }
}

/* ---- subscription gate ---------------------------------------------------
   Shown BELOW the real day header, so chamber, date, overview and the day's stats stay
   visible. A locked box with nothing in it says nothing about what is being offered. */
.c-gate {
  max-width: 640px; margin: 22px auto 40px; padding: 24px 26px;
  background: #fff; border: 1px solid var(--line, #e7e2d6); border-radius: 14px;
  box-shadow: 0 10px 30px rgba(21,70,103,.07); text-align: center;
}
.c-gate h2 { margin: 0 0 10px; font-size: 1.18rem; color: var(--brand-dark, #164667); }
.c-gate p { margin: 0 0 12px; color: var(--ink, #1b2330); font-size: .95rem; line-height: 1.6; }
.c-gate-free { color: var(--ink-soft, #55606f) !important; font-size: .89rem !important; }
.c-gate-actions { display: flex; align-items: center; justify-content: center; gap: 16px;
  flex-wrap: wrap; margin: 18px 0 10px !important; }
.c-gate-btn {
  background: var(--brand-dark, #164667); color: #fff; text-decoration: none;
  border-radius: 999px; padding: 10px 22px; font-weight: 700; font-size: .95rem;
}
.c-gate-btn:hover { background: var(--brand, #1f5f8b); }
.c-gate-alt { color: var(--brand, #1f5f8b); font-weight: 600; text-decoration: none; font-size: .9rem; }
.c-gate-alt:hover { text-decoration: underline; }
.c-gate-sample { font-size: .86rem !important; color: var(--ink-soft, #55606f) !important; }
.c-gate-sample a { color: var(--brand, #1f5f8b); font-weight: 600; }

/* ---- "this session is open" banner (signed-out, adjourned session) -------- */
.c-openbanner {
  margin: 0 0 18px; padding: 14px 18px;
  background: var(--marble, #f6f4ef); border: 1px solid var(--line, #e7e2d6);
  border-radius: 12px; font-size: .92rem; line-height: 1.55;
}
.c-openbanner b { display: block; margin-bottom: 3px; color: var(--brand-dark, #164667); }
.c-openbanner span { color: var(--ink-soft, #55606f); }
.c-notify { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 11px; }
.c-notify-email {
  flex: 1 1 220px; min-width: 0;
  border: 1px solid var(--line, #e7e2d6); border-radius: 8px;
  padding: 8px 11px; font: inherit; font-size: .9rem; background: #fff;
}
.c-notify-email:focus-visible { outline: 2px solid var(--brand, #1f5f8b); outline-offset: 1px; }
.c-notify-btn {
  flex-shrink: 0; border: 0; border-radius: 8px; cursor: pointer;
  background: var(--brand-dark, #164667); color: #fff;
  padding: 8px 16px; font: inherit; font-size: .9rem; font-weight: 700;
}
.c-notify-btn:hover:not(:disabled) { background: var(--brand, #1f5f8b); }
.c-notify-btn:disabled { opacity: .6; cursor: default; }
.c-notify-note { margin: 9px 0 0; font-size: .88rem; font-weight: 600; }
.c-notify-note.is-ok { color: var(--ok, #276749); }
.c-notify-note.is-err { color: var(--die, #b42318); }

/* ================================================================ transcript
 * transcript.js's play-along box, shared by Floor Briefings (inside the slide-in panel,
 * under the video) and the Committee Player (the rest of its left column). Only the
 * look lives here; each page sizes and places the box. */
.tr-box {
  display: flex; flex-direction: column; overflow: hidden; min-height: 0;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 10px 34px rgba(20, 48, 79, .10);
}
.tr-head {
  display: flex; align-items: center; gap: 10px; padding: 7px 12px;
  border-bottom: 1px solid var(--line); background: var(--marble);
}
.tr-title {
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-soft);
}
.tr-now {
  margin-left: auto; font: inherit; font-size: .74rem; font-weight: 600; cursor: pointer;
  color: var(--navy); background: var(--accent); border: 1px solid var(--accent);
  border-radius: 999px; padding: 2px 11px;
}
.tr-now:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.tr-now-short { display: none; }
.tr-head { flex-wrap: wrap; row-gap: 6px; }
/* Find: a small field and two arrows at the right end of the header. */
.tr-find { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.tr-q {
  width: 9.5rem; min-width: 0; font: inherit; font-size: .78rem; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: 7px; padding: 3px 8px;
}
.tr-q:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.tr-count {
  min-width: 2.6em; text-align: center; font-size: .72rem; font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}
.tr-count.is-none { color: var(--die); }
.tr-step {
  display: inline-grid; place-items: center; width: 26px; height: 26px; padding: 0;
  color: var(--navy); background: #fff; border: 1px solid var(--line); border-radius: 7px;
  cursor: pointer;
}
.tr-step:hover:not(:disabled) { border-color: var(--brand); color: var(--brand-dark); }
.tr-step:disabled { opacity: .4; cursor: default; }
.tr-step:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.tr-t mark { background: #fbe7a8; color: inherit; border-radius: 2px; padding: 0 1px; }
.tr-line.is-hit { box-shadow: inset 3px 0 0 var(--gold); }
.tr-line.is-hit .tr-t mark { background: var(--gold); color: var(--navy); }
.tr-body {
  /* position:relative makes this the lines' offsetParent, which the follow-scroll
     measures against -- without it offsetTop counted the player above as well. */
  position: relative; flex: 1 1 auto; overflow-y: auto; padding: 6px;
  overscroll-behavior: contain;
}
/* Room after the last line (transcript.js sizes --tr-tail from the box HEIGHT -- a %
   padding here resolved against the width and cut the box's bottom off). */
.tr-body::after { content: ""; display: block; height: var(--tr-tail, 8rem); }
.tr-body:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.tr-line {
  display: flex; gap: 10px; align-items: baseline;
  padding: 4px 8px; border-radius: 7px; cursor: pointer;
  font-size: .88rem; line-height: 1.5; color: var(--ink);
}
.tr-line:hover { background: var(--marble); }
.tr-ts {
  flex: 0 0 auto; min-width: 3.9em; font-size: .7rem; font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}
.tr-line.is-now { background: #eef4f9; box-shadow: inset 3px 0 0 var(--brand); }
.tr-line.is-now .tr-ts { color: var(--brand-dark); font-weight: 600; }
/* Where one agenda item / order of business hands over to the next. */
.tr-item {
  margin: 12px 8px 4px; padding-top: 8px; border-top: 1px dashed var(--line);
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--brand-dark);
}
.tr-item:first-child { margin-top: 2px; border-top: 0; padding-top: 0; }
/* Who is speaking: shown once where the voice changes (speaker diarization). */
.tr-who {
  display: inline-block; margin: 8px 8px 1px; padding: 1px 8px; border-radius: 999px;
  font-size: .68rem; font-weight: 700; letter-spacing: .02em;
  color: var(--spk); background: color-mix(in srgb, var(--spk) 12%, white);
  border: 1px solid color-mix(in srgb, var(--spk) 35%, white);
}
.tr-empty { margin: 14px 12px; font-size: .88rem; color: var(--ink-soft); line-height: 1.55; }

/* Floor Briefings: the box sits INSIDE the slide-in panel, under the video, and the panel
   runs to the bottom of the window to hold it. */
.c-player.has-trans { display: flex; flex-direction: column; bottom: 14px; }
.c-player.has-trans > .c-player-bar,
.c-player.has-trans > .c-player-mount,
.c-player.has-trans > .c-player-now { flex: 0 0 auto; }
.c-player > .tr-box {
  flex: 1 1 auto; min-height: 90px;
  border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none;
}

/* The phone's URL bar, as a length: 0 while it shows, its height once it has slid away.
   100svh is the viewport WITH the browser bars, 100dvh the viewport as it is right now, so
   the difference grows as the bar hides on scroll and returns to 0 when a pull-down brings
   it back. The transcript strip adds it to its height (2026-10-10), so the room the bar
   gives up goes to the transcript. Browsers without these units keep the fixed strip. */
:root { --url-bar-slack: 0px; }
@supports (height: 100dvh) {
  :root { --url-bar-slack: max(0px, calc(100dvh - 100svh)); }
}

@media (max-width: 900px) {
  .tr-q { width: 7rem; }
  /* "Follow", not "Restore auto-scroll", so it fits left of Find on one row. While it
     shows, the TRANSCRIPT label steps aside for it -- the box is obviously a transcript. */
  .tr-now-long { display: none; }
  .tr-now-short { display: inline; }
  .tr-now { padding: 2px 10px; }
  .tr-head:has(.tr-now:not([hidden])) .tr-title { display: none; }
  .tr-line { font-size: .82rem; padding: 2px 6px; }
  /* The phone strip: a few lines under the video, not the whole window -- and the day
     column is pushed down by that much more. It also takes the URL bar's height when the
     bar slides away (--url-bar-slack). The column's padding deliberately does NOT follow:
     at the top of the page the bar is showing anyway, and moving the content every time
     the bar hides would make the page jump under the reader's thumb. */
  .c-player.has-trans { bottom: auto; }
  .c-player > .tr-box { flex: 0 0 auto; height: calc(7.6rem + var(--url-bar-slack));
    min-height: 0; transition: height .2s ease; }
  body.c-playing-open.c-has-trans .m-wrap {
    padding-top: calc(min(315px, calc((100vw - 24px) * 0.5625), 42vh) + 80px + 7.6rem);
  }
}