/* ═══════════════════════════════════════════════════════════════════════════
   patriot.plus LIVE — THE DEBATE.

   Loaded after live.css (and after show.css on the projector). Everything here
   is prefixed `db-` and nothing here restyles a shared class, so this file can
   be added to or taken off a page without moving anything else on it.

   Two registers, the same as the rest of the show:
     · `.paper` — the phone and the officer's panel. White, hard 2px rules,
       Courier, offset black shadows.
     · `.sky` — the projector. Navy and gold, sized in min(vw, vh) so that a
       1280×720 wall and a 4K wall get the same picture rather than the same
       pixel counts. The projector has no scrollbar and nobody near enough to
       reach for one, so nothing in here may grow past the frame.

   THE TWO SIDES HAVE COLOURS AND THEY NEVER SWAP. Side one is the house
   orange, side two is an ice blue that survives a projector's gamma. A room
   learns which end of the bar is which in about four seconds and then reads
   the bar without reading the labels — which is the entire point of putting a
   bar on a wall — so the pairing is fixed in tokens here and used everywhere.

   THE ONE RULE THAT IS NOT DECORATION: every control a member touches is at
   least 48px on its short side, and the two vote targets are very much larger
   than that. This screen is used standing up, one-handed, in the dark, while
   watching somebody on a stage. A control you have to look at to hit is a
   control that takes the room's eyes off the debate.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --db-a: #FA4616;          /* side one */
  --db-b: #3FB6F0;          /* side two */
  --db-a-ink: #C8420F;      /* the same two, dark enough for white paper */
  --db-b-ink: #0B63C5;
}

/* Side colour, both registers. `.db-s0` / `.db-s1` are the only places these
   are chosen, so a side can never be drawn in the other side's colour. */
.db-s0 { --db-side: var(--db-a-ink); }
.db-s1 { --db-side: var(--db-b-ink); }
.sky .db-s0 { --db-side: var(--db-a); }
.sky .db-s1 { --db-side: var(--db-b); }

/* ═══════════════════════════ THE BAR ═══════════════════════════
   Shared by the projector and the phone, because it is the same instrument.
   The tick at the halfway mark is where the bar started: a room cannot see
   that it has moved unless something on screen stays still. */
.db-bar-wrap { width: 100%; }
.db-bar-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.db-bar-title {
  flex: 1 1 auto; text-align: center; font-family: var(--head);
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2);
}
.db-bar-side {
  font-family: var(--head); font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--db-side); max-width: 34%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.db-bar-side.db-lead { text-decoration: underline; text-underline-offset: .22em; }
.db-bar-side.db-s1 { text-align: right; }

.db-bar {
  position: relative; display: flex; width: 100%; overflow: hidden;
  border: 3px solid var(--ink); background: var(--grey);
}
.db-fill { display: block; height: 100%; transition: width .6s cubic-bezier(.2, .8, .2, 1); }
.db-f0 { background: var(--db-a); }
.db-f1 { background: var(--db-b); }
/* Nobody has voted: the bar is even and says so by being flat, not by being
   empty. An empty track reads as broken. */
.db-bar.db-even .db-fill { opacity: .32; }
.db-start {
  position: absolute; left: 50%; top: -2px; bottom: -2px; width: 0;
  border-left: 3px dashed rgba(0, 0, 0, .55); transform: translateX(-1.5px);
}
.db-bar-n {
  position: absolute; top: 50%; transform: translateY(-50%);
  font-family: var(--head); font-weight: 700; font-variant-numeric: tabular-nums;
  color: #fff; text-shadow: 2px 2px 0 rgba(0, 0, 0, .45);
}
.db-n0 { left: 12px; } .db-n1 { right: 12px; }
.db-bar.db-even .db-bar-n { color: var(--ink); text-shadow: none; }
.db-bar-foot {
  margin-top: 6px; text-align: center; font-family: var(--head);
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2);
}

.sky .db-bar { border-color: rgba(255, 255, 255, .7); background: rgba(0, 0, 0, .45); }
.sky .db-bar-title, .sky .db-bar-foot { color: var(--sky-muted); }
.sky .db-start { border-left-color: rgba(255, 255, 255, .8); }
.sky .db-bar.db-even .db-bar-n { color: #fff; text-shadow: 2px 2px 0 var(--blue); }
.sky .db-f0 { background: linear-gradient(90deg, #d8380f, var(--db-a)); box-shadow: 0 0 26px rgba(250, 70, 22, .5); }
/* Both fills run light at the middle and saturated at the outer edge, so the
   percentage sitting at each end always has a dark enough ground under it. */
.sky .db-f1 { background: linear-gradient(90deg, #7fd6ff, #1683bd); box-shadow: 0 0 26px rgba(63, 182, 240, .45); }

/* ═══════════════════════════ THE PROJECTOR ═══════════════════════════ */
.sky .db-pj {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2.4vh; width: 100%; text-align: center;
}
.sky .db-kick {
  font-family: var(--head); font-weight: 600; letter-spacing: .34em; text-transform: uppercase;
  color: var(--gold); font-size: min(2vw, 3.1vh); text-shadow: 0 2px 12px rgba(0, 0, 0, .9);
}
/* The grid floor is bright at the bottom of the frame, which is exactly where
   these lines sit: faint white over it is unreadable from the third row. */
.sky .db-note {
  font-family: var(--head); letter-spacing: .14em; text-transform: uppercase;
  color: var(--sky-muted); opacity: .82; font-size: min(1.8vw, 2.9vh); max-width: 60ch;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .9);
}
.sky .db-foot {
  font-family: var(--head); letter-spacing: .1em; text-transform: uppercase;
  color: var(--sky-muted); font-size: min(2vw, 3vh);
}
.sky .db-foot-n { color: #fff; font-size: min(3.4vw, 5vh); font-weight: 700; text-shadow: 3px 3px 0 var(--blue); }

/* ── 1. the room stands ── */
.sky .db-motion {
  font-family: var(--head); font-weight: 700; text-transform: uppercase; line-height: .98;
  color: #fff; font-size: min(6vw, 10.5vh); max-width: 20ch; text-wrap: balance;
  text-shadow: 0 0 30px rgba(255, 90, 31, .4), .5vh .5vh 0 var(--blue); overflow-wrap: anywhere;
}
.sky .db-sides { display: flex; align-items: stretch; gap: min(2.4vw, 3.6vh); width: 100%; max-width: 1100px; }
.sky .db-side {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .6vh; padding: 1.6vh 1.2vw; border: 3px solid var(--db-side); background: rgba(0, 12, 36, .6);
}
.sky .db-side-label {
  font-family: var(--head); font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--db-side); font-size: min(3.2vw, 5vh); line-height: 1.05; overflow-wrap: anywhere;
}
.sky .db-side-n, .sky .db-side-dash {
  font-family: var(--head); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1;
  color: #fff; font-size: min(4.6vw, 7vh); text-shadow: 3px 3px 0 var(--blue);
}
.sky .db-side-dash { color: var(--sky-faint); text-shadow: none; }
.sky .db-vs {
  align-self: center; font-family: var(--head); font-weight: 700; text-transform: uppercase;
  color: var(--sky-faint); font-size: min(2.4vw, 3.6vh);
}

/* ── 2. the pick — the two names, and nothing else ── */
.sky .db-pick { gap: 3vh; }
.sky .db-kick-pick { font-size: min(2.4vw, 3.6vh); }
/* `stretch`, not `center`: a two-line name on one side and a one-line name on
   the other must not produce two cards of different heights. The sides are
   opposed, and opposed things are the same size. */
.sky .db-pick-row { display: flex; align-items: stretch; gap: min(2vw, 3vh); width: 100%; }
.sky .db-pick-card {
  flex: 1 1 0; min-width: 0; min-height: min(44vh, 34vw);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: min(3vh, 3vw) min(1.6vw, 2.4vh);
  border: 4px solid var(--db-side); background: rgba(0, 12, 36, .66);
  box-shadow: 0 0 60px rgba(0, 0, 0, .5);
}
.sky .db-pick-side {
  width: 100%; font-family: var(--head); font-weight: 700; text-transform: uppercase; letter-spacing: .2em;
  color: var(--db-side); font-size: min(2.2vw, 3.4vh); margin-bottom: 1.2vh;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sky .db-pick-name {
  font-family: var(--head); font-weight: 700; text-transform: uppercase; line-height: .98;
  color: #fff; font-size: min(6vw, 10vh); overflow-wrap: anywhere; width: 100%;
  text-shadow: 0 0 34px rgba(255, 255, 255, .22), .5vh .5vh 0 var(--blue);
}
.sky .db-pick-name.db-pick-none { color: var(--sky-faint); text-shadow: none; font-size: min(3.6vw, 5.6vh); }
.sky .db-pick-sub {
  margin-top: 1.4vh; font-family: var(--head); letter-spacing: .16em; text-transform: uppercase;
  color: var(--sky-muted); font-size: min(1.8vw, 2.9vh);
}
.sky .db-pick-empty { border-style: dashed; opacity: .82; }
.sky .db-pick-v {
  flex: 0 0 auto; align-self: center; font-family: var(--head); font-weight: 700; text-transform: uppercase;
  color: var(--gold); font-size: min(3vw, 4.6vh); text-shadow: 3px 3px 0 var(--blue);
}
.sky .db-note-pick { font-size: min(1.8vw, 2.9vh); }

/* ── 2b. the tag-in — the room changed the speaker, mid-argument ──
   Deliberately louder than the pick: it interrupts a running debate, so it has
   to read from the back of the room in the few seconds it is up. Reuses the
   pick card's type so the two read as the same kind of announcement. */
.sky .db-tagin { gap: 2.4vh; }
.sky .db-kick-tagin { font-size: min(2.4vw, 3.6vh); color: var(--gold); }
.sky .db-tagin-head {
  font-family: var(--head); font-weight: 700; text-transform: uppercase; line-height: .98;
  color: #fff; font-size: min(5.4vw, 8.4vh); letter-spacing: .02em;
  text-shadow: 0 0 40px rgba(255, 255, 255, .24), .5vh .5vh 0 var(--blue);
}
.sky .db-tagin-card {
  width: min(64vw, 92%); min-height: min(30vh, 24vw);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: min(3vh, 3vw) min(2vw, 3vh);
  border: 4px solid var(--db-side); background: rgba(0, 12, 36, .72);
  box-shadow: 0 0 70px rgba(0, 0, 0, .55);
}
.sky .db-note-tagin { font-size: min(1.8vw, 2.9vh); }

/* ── 3. the debate — the bar, the floor, the clock ── */
.sky .db-debate { gap: 2vh; }
.sky .db-debate .db-bar { height: min(7vh, 5.4vw); }
.sky .db-debate .db-bar-side { font-size: min(2.6vw, 4vh); }
.sky .db-debate .db-bar-title { font-size: min(1.8vw, 2.9vh); }
.sky .db-debate .db-bar-n { font-size: min(3vw, 4.6vh); }
.sky .db-debate .db-bar-foot { font-size: min(1.8vw, 2.9vh); }

.sky .db-floor {
  display: flex; align-items: center; gap: min(3vw, 4vh); width: 100%;
  padding: min(2.4vh, 2vw) min(2vw, 3vh);
  border: 3px solid var(--db-side); background: rgba(0, 12, 36, .66); text-align: left;
}
.sky .db-now { flex: 1 1 auto; min-width: 0; }
.sky .db-now-seg {
  font-family: var(--head); font-weight: 600; letter-spacing: .24em; text-transform: uppercase;
  color: var(--db-side); font-size: min(1.9vw, 2.9vh); margin-bottom: .8vh;
}
.sky .db-now-name {
  font-family: var(--head); font-weight: 700; text-transform: uppercase; line-height: .96;
  color: #fff; font-size: min(6vw, 9.6vh); overflow-wrap: anywhere;
  text-shadow: .5vh .5vh 0 var(--blue);
}
.sky .db-clock-wrap { flex: 0 0 auto; text-align: right; }
.sky .db-clock {
  display: block; font-family: var(--head); font-weight: 700; font-variant-numeric: tabular-nums;
  line-height: .92; color: #fff; font-size: min(9vw, 13vh); text-shadow: .5vh .5vh 0 var(--blue);
}
.sky .db-clock.db-low { color: var(--gold); }
.sky .db-clock.db-out { color: var(--db-a); }
.sky .db-clock-label {
  font-family: var(--head); letter-spacing: .24em; text-transform: uppercase;
  color: var(--sky-muted); font-size: min(1.8vw, 2.9vh); margin-top: .4vh;
}
.sky .db-paused .db-clock { opacity: .55; }

.sky .db-bench {
  display: flex; align-items: center; justify-content: center; gap: min(1.6vw, 2.4vh);
  font-family: var(--head); text-transform: uppercase; letter-spacing: .1em;
}
.sky .db-bench-label { color: var(--sky-faint); font-size: min(1.8vw, 2.9vh); }
.sky .db-bench-name { color: var(--sky-muted); font-weight: 700; font-size: min(2.6vw, 4vh); }
.sky .db-bench-side { color: var(--db-side); font-weight: 700; font-size: min(1.9vw, 2.9vh); }

/* ── 4. the verdict ── */
/* The verdict carries the most: a head, the bar, two shift rows that each
   name a speaker, the movement line and the disclaimer. It is the state that
   decides the vertical budget, so its gaps are tighter than the rest. */
.sky .db-verdict { gap: 1.2vh; }
.sky .db-verdict-head {
  font-family: var(--head); font-weight: 700; text-transform: uppercase; line-height: 1;
  color: #fff; font-size: min(4.8vw, 7.4vh); overflow-wrap: anywhere;
  text-shadow: 0 0 30px rgba(240, 168, 48, .4), .5vh .5vh 0 var(--blue);
}
.sky .db-verdict .db-bar { height: min(6vh, 4.6vw); }
.sky .db-verdict .db-bar-side { font-size: min(2.2vw, 3.4vh); }
.sky .db-verdict .db-bar-title, .sky .db-verdict .db-bar-foot { font-size: min(1.8vw, 2.9vh); }
.sky .db-verdict .db-bar-n { font-size: min(2.6vw, 4vh); }

.db-shift { width: 100%; max-width: 1000px; display: grid; gap: 5px; }
.db-shift-head {
  display: flex; justify-content: space-between; font-family: var(--head);
  letter-spacing: .2em; text-transform: uppercase; border-bottom: 2px solid currentColor; padding-bottom: 4px;
}
.db-shift-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto auto;
  grid-template-areas: 'side from arrow to delta' 'who who who who who';
  gap: min(1.4vw, 2vh); align-items: baseline; padding: .5vh min(1vw, 1.6vh);
  border: 2px solid var(--db-side);
}
.db-shift-side {
  grid-area: side; font-family: var(--head); font-weight: 700; text-transform: uppercase; color: var(--db-side);
  text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Who spoke for this side, as an attribution and not a score: the room can see
   that the speaker who lost the count moved the most people, which is the
   fairer reading, without anything being written down about either of them. */
.db-shift-who {
  grid-area: who; text-align: left; font-family: var(--head); letter-spacing: .1em;
  text-transform: uppercase; opacity: .75; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sky .db-shift-who { color: var(--sky-muted); font-size: min(1.8vw, 2.9vh); }
.db-shift-from, .db-shift-to, .db-shift-delta {
  font-family: var(--head); font-weight: 700; font-variant-numeric: tabular-nums;
}
.db-shift-from { opacity: .7; }
.db-shift-arrow { opacity: .6; }
.db-shift-delta.db-up { color: var(--good); }
.db-shift-delta.db-down { color: var(--bad); }
.sky .db-shift-head { color: var(--gold); border-color: rgba(255, 255, 255, .4); font-size: min(1.8vw, 2.9vh); }
.sky .db-shift-row { background: rgba(0, 12, 36, .55); font-size: min(2.2vw, 3.4vh); }
.sky .db-shift-to { color: #fff; }
.sky .db-shift-delta.db-up { color: #7dffb0; }
.sky .db-shift-delta.db-down { color: #ff9d8a; }
.sky .db-moved {
  font-family: var(--head); font-weight: 600; letter-spacing: .06em;
  color: #fff; font-size: min(2.2vw, 3.4vh); max-width: 58ch; line-height: 1.2;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .9);
}
/* The fairer reading, when it disagrees with the headline count: a speaker can
   lose the room and still be the one who moved it. */
.sky .db-moved.db-upset { color: var(--gold); text-shadow: 0 2px 14px rgba(0, 0, 0, .8); }

/* ═══════════════════════════ THE PHONE ═══════════════════════════ */
/* `minmax(0, 1fr)` rather than a bare auto track: a grid item's automatic
   minimum is its min-content, so one nowrap strip of segment text sized the
   whole column past the handset and every card on the screen slid sideways.
   This is the fix for that, and it is why the harness measures scrollWidth. */
.db-ph { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.db-ph > * { min-width: 0; }
.db-ph-kick {
  font-family: var(--head); font-weight: 700; letter-spacing: .24em; text-transform: uppercase;
  font-size: .82rem; color: var(--ink-2);
}
.db-ph-motion { font-family: var(--head); font-weight: 700; font-size: 1.45rem; line-height: 1.12; text-transform: uppercase; }
.db-ph-head { font-family: var(--head); font-weight: 700; font-size: 1.6rem; line-height: 1.1; text-transform: uppercase; }
.db-ph-note { font-size: .78rem; line-height: 1.45; color: var(--ink-2); }
.db-ph-pair { display: flex; align-items: baseline; gap: 10px; font-family: var(--head); font-weight: 700; font-size: 1.2rem; }
.db-ph-pair > span { color: var(--db-side); }
.db-ph-v { color: var(--ink-2) !important; font-size: .9rem; }

/* ── the stand ── */
.db-stand-btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.db-stand-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 132px; padding: 14px 8px; cursor: pointer; border-radius: 0;
  border: 3px solid var(--db-side); background: #fff; box-shadow: 5px 5px 0 #000;
  transition: transform .08s;
}
.db-stand-btn:active { transform: translate(2px, 2px); box-shadow: 3px 3px 0 #000; }
.db-stand-btn.db-on { background: var(--db-side); }
.db-stand-btn.db-on .db-stand-label, .db-stand-btn.db-on .db-stand-tick { color: #fff; }
.db-stand-btn:disabled { opacity: .55; box-shadow: none; }
.db-stand-label {
  font-family: var(--head); font-weight: 700; font-size: 1.4rem; line-height: 1.05;
  text-transform: uppercase; color: var(--db-side); overflow-wrap: anywhere; text-align: center;
}
.db-stand-tick { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.db-undecided {
  width: 100%; min-height: 56px; padding: 14px; cursor: pointer; border-radius: 0;
  border: 2px dashed var(--ink); background: #fff;
  font: 700 .86rem var(--mono); letter-spacing: .08em; text-transform: uppercase;
}
.db-undecided.db-on { background: var(--ink); color: #fff; }
.db-ph-locked {
  padding: 14px; border: 3px solid var(--ink); background: var(--yellow); box-shadow: 4px 4px 0 #000;
  font-family: var(--head); font-size: 1.1rem; text-transform: uppercase;
}

/* ── picked ── */
.db-ph-picked { text-align: center; }
.db-picked-kick {
  font-family: var(--head); font-weight: 700; letter-spacing: .3em; text-transform: uppercase;
  font-size: 1rem; color: var(--orange-ink);
}
.db-picked-name { font-family: var(--head); font-weight: 700; font-size: 2.4rem; line-height: 1.02; text-transform: uppercase; overflow-wrap: anywhere; }
.db-picked-side {
  justify-self: center; padding: 10px 18px; border: 3px solid var(--db-side); color: #fff; background: var(--db-side);
  font-family: var(--head); font-weight: 700; font-size: 1.2rem; letter-spacing: .1em; text-transform: uppercase;
  box-shadow: 4px 4px 0 #000; max-width: 100%; overflow-wrap: anywhere;
}
.db-picked-note { font-size: .84rem; line-height: 1.5; }
/* Declining has to be easy and unembarrassing: plainly a button, plainly
   secondary, and never smaller than a thumb. */
.db-decline {
  width: 100%; min-height: 56px; padding: 16px; cursor: pointer; border-radius: 0;
  border: 2px solid var(--ink-2); background: #fff; color: var(--ink-2);
  font: 700 .86rem var(--mono); letter-spacing: .06em;
}
.db-decline:active { transform: translate(1px, 1px); }
.db-decline:disabled { opacity: .6; }

/* ── the vote: the main event ── */
.db-strip {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border: 2px solid var(--ink); background: var(--grey);
}
.db-strip-seg {
  flex: 1 1 auto; min-width: 0; font: 700 .78rem var(--head); letter-spacing: .06em; text-transform: uppercase;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.db-strip-clock {
  flex: 0 0 auto; font-family: var(--head); font-weight: 700; font-size: 1.5rem;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.db-strip-clock.db-low { color: var(--bad); }
.db-strip-clock.db-out { color: var(--bad); opacity: .6; }

.db-votes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.db-vote {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  min-height: 52vh; padding: 16px 8px; cursor: pointer; border-radius: 0;
  border: 4px solid var(--db-side); background: #fff; box-shadow: 6px 6px 0 #000;
  transition: transform .08s;
}
.db-vote:active { transform: translate(3px, 3px); box-shadow: 3px 3px 0 #000; }
.db-vote-label {
  font-family: var(--head); font-weight: 700; font-size: 1.7rem; line-height: 1.02;
  text-transform: uppercase; color: var(--db-side); overflow-wrap: anywhere; text-align: center;
}
.db-vote-state {
  font: 700 .66rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); text-align: center;
}
/* The chosen side fills solid. In the dark, at arm's length, the difference
   between the two buttons has to be a block of colour, not a border. */
.db-vote.db-on { background: var(--db-side); box-shadow: 6px 6px 0 #000; }
.db-vote.db-on .db-vote-label { color: #fff; font-size: 1.9rem; }
.db-vote.db-on .db-vote-state { color: #fff; font-size: .74rem; }
.db-neither {
  width: 100%; min-height: 64px; padding: 16px; cursor: pointer; border-radius: 0;
  border: 2px dashed var(--ink); background: #fff;
  font: 700 .86rem var(--mono); letter-spacing: .08em; text-transform: uppercase;
}
.db-neither.db-on { background: var(--ink); color: #fff; border-style: solid; }

/* ── the verdict, on a phone ── */
.db-ph-verdict .db-bar { height: 34px; }
.db-ph-verdict .db-bar-side, .db-ph-verdict .db-bar-n { font-size: .95rem; }
.db-ph-verdict .db-bar-title, .db-ph-verdict .db-bar-foot { font-size: .68rem; }
.db-ph-shift { display: grid; gap: 6px; }
.db-ph-verdict .db-shift-who { font-size: .7rem; margin-top: 2px; }
.db-ph-moved { font-family: var(--head); font-weight: 600; font-size: 1rem; line-height: 1.25; }
.db-ph-shift .db-shift-row { font-size: .9rem; gap: 8px; padding: 8px 10px; }

/* ═══════════════════════════ THE CONTROL ROOM ═══════════════════════════ */
.db-ctl .pill { font: 700 .7rem var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 3px 8px; border: 2px solid var(--ink); }
.db-ctl-clock { flex: 0 0 auto; text-align: right; }
.db-ctl-time { font-family: var(--head); font-weight: 700; font-size: 1.9rem; font-variant-numeric: tabular-nums; line-height: 1; }
.db-ctl-time.db-low { color: var(--bad); }
.db-ctl-time.db-out { color: var(--bad); opacity: .6; }
.db-invite + .db-invite { margin-top: 10px; }
.db-invite-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
/* The pool CAST is about to draw from. Coloured, because the officer is one
   press away from naming two people in front of a room and the panel must say
   which room those names are coming out of before the press, not after. */
.paper .db-srcbox { background: #fff6bf; }

/* ═══════════════════════════ THE EDITOR ═══════════════════════════ */
/* ── where the sides come from ──
   The setting that decides WHICH ROOM the debate is about, so it is a block of
   colour at the top of the editor rather than another line in a column of
   them. An officer skimming past this one holds a debate for a different room
   than the one in front of them. */
.db-src { display: grid; gap: 8px; padding: 10px; border: 2px solid var(--ink); background: #fff6bf; }
.db-src-map { display: grid; gap: 6px; padding: 8px; border: 2px dashed var(--ink); background: #fff; }
/* live.css carries a global `[hidden] { display: none !important }` and that is
   what actually hides this box today. This line repeats it locally so that the
   mapping cannot come back on screen — showing an officer a mapping that is not
   in force — if that global is ever narrowed. Measured, not assumed: with this
   line deleted the box still hides, because of the !important above. */
.db-src-map[hidden] { display: none; }
.db-src-row { display: flex; align-items: center; gap: 8px; }
.db-src-side {
  flex: 0 1 auto; min-width: 0; max-width: 42%; font: 700 .82rem var(--head);
  letter-spacing: .06em; text-transform: uppercase; color: var(--db-side);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.db-src-eq { flex: 0 0 auto; font: 400 .72rem var(--mono); color: var(--ink-2); }
.db-src-opt { flex: 1 1 8ch; min-width: 0; }
.db-src-say { font-size: .78rem; line-height: 1.45; margin: 0; }
/* A dangling reference is not a style note: nothing will have a side on the
   night, so it is coloured like the failure it is. */
.db-src-warn {
  margin: 0; padding: 8px 10px; border: 2px solid var(--bad); background: #ffd9d2;
  font: 700 .76rem/1.4 var(--mono);
}

.db-segs { display: grid; gap: 8px; padding: 10px; border: 2px solid var(--ink); background: #fbfbfb; }
.db-seg-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font: 700 .74rem var(--mono); letter-spacing: .1em; text-transform: uppercase;
}
.db-segs [data-seglist] { display: grid; gap: 6px; }
.db-seg { display: flex; align-items: center; gap: 6px; }
.db-seg-no { flex: 0 0 1.6em; font: 700 .8rem var(--mono); color: var(--ink-2); }
.db-seg-label { flex: 1 1 auto; min-width: 0; }
.db-seg-side { flex: 0 1 auto; min-width: 8ch; max-width: 16ch; }
.db-seg-secs { flex: 0 0 5.5em; text-align: right; }
.db-seg-unit { font: 700 .74rem var(--mono); color: var(--ink-2); }
.db-seg [data-segact] { flex: 0 0 auto; }

/* ═══════════════════════════ MOTION ═══════════════════════════
   The pick is the one moment in this format that earns an animation: two names
   arriving from opposite sides of a wall. Everything else moves because a
   number changed. */
@keyframes dbInLeft { from { opacity: 0; transform: translateX(7vw) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes dbInRight { from { opacity: 0; transform: translateX(-7vw) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes dbRise { from { opacity: 0; transform: translateY(2.4vh); } to { opacity: 1; transform: none; } }
@keyframes dbPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.sky .db-in-0 { animation: dbInLeft .62s cubic-bezier(.2, .8, .2, 1) both; }
.sky .db-in-1 { animation: dbInRight .62s cubic-bezier(.2, .8, .2, 1) both .1s; }
.sky .db-pick-v { animation: dbRise .5s ease both .38s; }
.sky .db-rise { animation: dbRise .5s cubic-bezier(.2, .8, .2, 1) both; }
.sky .db-clock.db-out, .db-strip-clock.db-out { animation: dbPulse 1.1s steps(1, end) infinite; }

@media (prefers-reduced-motion: reduce) {
  .sky .db-in-0, .sky .db-in-1, .sky .db-pick-v, .sky .db-rise,
  .sky .db-clock.db-out, .db-strip-clock.db-out { animation: none !important; }
  .db-fill, .db-stand-btn, .db-vote { transition: none !important; }
}

/* ── a short wall (720p is the common one) and a small phone ── */
@media (max-height: 800px) {
  .sky .db-pj { gap: 2vh; }
  .sky .db-motion { font-size: min(6vw, 11vh); }
  /* 720p is the wall this is actually shown on, and the verdict is the tallest
     state. A smaller head fits more of a long side label on one line, which is
     what keeps the whole card inside the frame without fitFrame() scaling it. */
  .sky .db-verdict-head { font-size: min(4.2vw, 6.6vh); }
}
@media (max-height: 700px) {
  .db-vote { min-height: 38vh; }
}