/* ═══════════════════════════════════════════════════════════════════════════
   UFCR LIVE — CAUCUS: the whip count, coalition and the amendment.

   Loaded after live.css (and after show.css on the projector). Everything here
   is prefixed `cs-` 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 panels. White, hard 2px rules,
       Courier, offset black shadows.
     · `.sky`    the projector. Navy, gold, type sized in `min(Xvw, Yvh)` so a
       720p projector and a 1080p projector show the same thing.

   THREE RULES THAT ARE NOT DECORATION:

     1. EVERY CONTROL A MEMBER TOUCHES IS AT LEAST 48px ON ITS SHORT SIDE.
        These are used standing up, one-handed, in a room with the lights down.
     2. NOTHING ON THE PROJECTOR IS UNDER 20px AT 1280x720. 1vh is 7.2px there
        and 1vw is 12.8px, so `min(1.7vw, 3vh)` is 21.6px and that is the
        smallest size in this file. Anything smaller is not on the wall, it is
        a rumour about what is on the wall.
     3. NO GRID TRACK IS A BARE `1fr`. A bare 1fr refuses to shrink below its
        content, so one 240-character word with no spaces in it pushes the
        whole card wider than the handset and every card on the screen slides
        sideways. Tracks are `minmax(0, 1fr)`, and every box that holds text a
        member typed carries `overflow-wrap: anywhere`.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────── shared small print ─────────────────────────── */
.cs-note { margin: 8px 0 0; font-size: .78rem; line-height: 1.45; }
.cs-dim { color: var(--ink-2); }
.sky .cs-dim { color: var(--sky-muted); }

.cs-label {
  display: block; margin: 16px 0 8px;
  font: 700 .72rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2);
}
.sky .cs-label { color: var(--gold); }

.cs-hint {
  margin-top: 12px; padding: 10px 12px; border: 2px dashed var(--ink);
  font: 700 .74rem var(--mono); letter-spacing: .06em; text-transform: uppercase; line-height: 1.4;
  overflow-wrap: anywhere;
}
.cs-hint.cs-warn { border-color: var(--orange-ink); color: var(--orange-ink); background: #fff6f2; }

.cs-empty { margin: 10px 0; font-size: .86rem; color: var(--ink-2); }
.sky .cs-empty { color: var(--sky-muted); }
.cs-empty.big { font-size: min(1.8vw, 3.1vh); }

/* THE STANDING LINE. It is on every screen of all three activities, in every
   status, because a person who joins halfway through and reads "AGAINST 14"
   off a wall has to be told on that same screen that those fourteen were
   dealt it. Bordered rather than greyed: this is the frame the numbers are
   read in, not a footnote about them. */
.cs-role {
  margin-top: 16px; padding: 10px 12px;
  border-left: 4px solid var(--ink); background: var(--grey);
  font-size: .78rem; line-height: 1.5;
}
.cs-role b { display: block; font-family: var(--head); text-transform: uppercase; letter-spacing: .05em; }
.cs-role.cs-compact { font-size: .72rem; padding: 8px 10px; }
.sky .cs-role { border-left-color: var(--gold); background: rgba(0, 12, 36, .6); color: var(--sky-muted); }

/* A person's own outcome, called out. */
.cs-score, .cs-yourpred {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 14px 0 6px; padding: 10px 14px;
  border: 3px solid var(--ink); background: var(--yellow); box-shadow: 4px 4px 0 #000;
}
.cs-score .num, .cs-yourpred .num { font-family: var(--head); font-weight: 700; font-size: 1.9rem; line-height: 1; font-variant-numeric: tabular-nums; }
.cs-score-note, .cs-yourpred-off { font-size: .76rem; }

/* A ranked list: name, one fact, no position. Used for sharpest predictions,
   landed arguments, and whose hand came off. */
.cs-list { display: grid; gap: 8px; margin-top: 6px; }
.cs-list-row {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: baseline;
  padding: 8px 10px; border: 2px solid var(--ink); background: #fff;
}
.cs-list-no { font: 700 .9rem var(--head); color: var(--orange-ink); }
.cs-list-name { font-weight: 700; overflow-wrap: anywhere; }
.cs-list-meta { font-size: .72rem; color: var(--ink-2); text-align: right; }

/* ═══════════════════════ 1. THE WHIP COUNT ═══════════════════════ */

/* The brief. Yours alone, so it is boxed like a note passed to you rather
   than like a piece of the room's furniture. */
.cs-brief {
  margin: 14px 0; padding: 12px 14px;
  border: 3px solid var(--ink); background: #fff; box-shadow: 5px 5px 0 var(--blue);
}
.cs-brief-k { font: 700 .68rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.cs-brief-pos {
  margin-top: 6px; padding: 8px 12px; display: inline-block;
  font: 700 1.5rem var(--head); letter-spacing: .06em; text-transform: uppercase; line-height: 1.1;
  border: 2px solid var(--ink); overflow-wrap: anywhere;
}
.cs-brief-why { margin-top: 8px; font-size: .86rem; line-height: 1.5; overflow-wrap: anywhere; }
.cs-brief-moved { margin-top: 8px; font: 700 .72rem var(--mono); text-transform: uppercase; color: var(--orange-ink); }
.cs-brief-wait { box-shadow: 5px 5px 0 #bdbdbd; border-style: dashed; }
.cs-brief-objs { display: grid; gap: 6px; margin-top: 8px; }
.cs-obj {
  padding: 8px 10px; border: 2px solid var(--ink); font: 700 .8rem var(--mono);
  letter-spacing: .04em; overflow-wrap: anywhere;
}
.cs-obj-pass { background: #d9f2e2; }
.cs-obj-block { background: #ffe0d8; }

/* THE INBOX. This is the moment the activity turns from a poll into a game:
   somebody in the room typed a sentence and it arrived here. It gets the
   loudest border in the file for that reason. */
.cs-inbox {
  margin: 14px 0; padding: 12px 14px;
  border: 3px solid var(--orange-ink); background: #fff6f2; box-shadow: 5px 5px 0 var(--orange);
}
.cs-inbox-k { font: 700 .72rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--orange-ink); }
.cs-inbox-row {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px;
  margin-top: 8px; padding: 8px 10px; border: 2px solid var(--ink); background: #fff;
}
.cs-inbox-from { font: 700 .68rem var(--mono); text-transform: uppercase; color: var(--ink-2); }
.cs-inbox-text { font-size: .92rem; line-height: 1.45; overflow-wrap: anywhere; }
.cs-inbox-ask { margin-top: 10px; font: 700 .74rem var(--mono); text-transform: uppercase; }

/* The public tally. Four rows, the fourth being silence, because a whip count
   that hides the people who said nothing tells the room the opposite of the
   truth. */
.cs-wbars { display: grid; gap: 7px; margin-top: 6px; }
.cs-wbar { display: grid; grid-template-columns: 9ch minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.cs-wbar-k { font: 700 .66rem var(--mono); letter-spacing: .06em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; }
.cs-wbar-track { height: 16px; border: 2px solid var(--ink); background: #fff; overflow: hidden; }
.cs-wbar-track > i { display: block; height: 100%; width: 0; background: #bdbdbd; transition: width .9s cubic-bezier(.2, .8, .2, 1); }
.cs-wbar-n { font: 700 1rem var(--head); font-variant-numeric: tabular-nums; min-width: 2.5ch; text-align: right; }
.cs-w0 .cs-wbar-track > i { background: var(--good); }
.cs-w1 .cs-wbar-track > i { background: var(--bad); }
.cs-w2 .cs-wbar-track > i { background: var(--gold); }
.cs-wsilent .cs-wbar-track > i { background: repeating-linear-gradient(45deg, #bdbdbd 0 6px, #e6e6e6 6px 12px); }
/* The real count is drawn in outline, so the two charts never read as one
   chart that moved. They are different facts about the same room. */
.cs-wbars.cs-real .cs-wbar-track { border-style: dashed; }
.cs-wbars.cs-real .cs-wbar-track > i { opacity: .82; }

.cs-gapline {
  margin-top: 12px; padding: 10px 12px; border: 2px solid var(--ink); background: var(--yellow);
  font-size: .82rem; line-height: 1.5;
}
.cs-gapline b { font-family: var(--head); font-size: 1.15rem; }

/* The motion, on the phone. */
.cs-motion-line { overflow-wrap: anywhere; }

/* THE PREDICTION. The only thing scored, so it gets a real control rather
   than a slider that is impossible to set precisely with a thumb. */
.cs-predict { margin: 16px 0 6px; padding: 12px 14px; border: 3px solid var(--ink); background: #fff; box-shadow: 4px 4px 0 #000; }
.cs-predict-q { font-size: .88rem; line-height: 1.45; }
.cs-predict-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; align-items: center; margin-top: 10px; }
.cs-predict-n {
  font: 700 2rem var(--head); text-align: center; font-variant-numeric: tabular-nums; line-height: 1;
  border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); padding: 8px 0;
}
.cs-predict-foot { margin-top: 8px; font-size: .72rem; color: var(--ink-2); line-height: 1.45; }
.cs-step {
  min-height: 48px; padding: 8px 2px; cursor: pointer; border-radius: 0;
  border: 2px solid var(--ink); background: #fff; box-shadow: 3px 3px 0 #000;
  font: 700 .95rem var(--head); letter-spacing: .02em;
}
.cs-step:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #000; }

/* ═══════════════════════ shared phone controls ═══════════════════════ */

/* Three across on any phone that exists. `minmax(0, 1fr)` is load-bearing:
   see rule 3 at the top of this file. */
.cs-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }

.cs-pos, .cs-act {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 56px; padding: 10px 6px; cursor: pointer; border-radius: 0;
  border: 2px solid var(--ink); background: #fff; box-shadow: 4px 4px 0 #000;
  font: 700 .84rem var(--head); letter-spacing: .04em; text-transform: uppercase;
  line-height: 1.15; overflow-wrap: anywhere; transition: transform .08s;
}
.cs-pos:active, .cs-act:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 #000; }
.cs-pos.on, .cs-act.on { background: var(--ink); color: #fff; }
.cs-pos:disabled, .cs-act:disabled { opacity: .45; cursor: default; }
.cs-pos.cs-w0.on { background: var(--good); border-color: var(--good); }
.cs-pos.cs-w1.on { background: var(--bad); border-color: var(--bad); }
.cs-pos.cs-w2.on { background: var(--gold); border-color: var(--ink); color: var(--ink); }
.cs-pos.cs-yes.on { background: var(--good); border-color: var(--good); }
.cs-pos.cs-no.on { background: var(--bad); border-color: var(--bad); }
.cs-ratify { margin-top: 10px; }

.cs-plain {
  display: block; width: 100%; min-height: 48px; margin-top: 8px; padding: 12px;
  border: 2px dashed var(--ink); background: #fff; cursor: pointer; border-radius: 0;
  font: 700 .74rem var(--mono); letter-spacing: .06em; text-transform: uppercase;
}
.cs-plain.on { background: var(--ink); color: #fff; border-style: solid; }

/* The panel a chosen action reveals. */
.cs-panel { margin-top: 12px; padding: 12px; border: 2px solid var(--ink); background: var(--grey); }
.cs-panel-k { font-size: .82rem; line-height: 1.45; }

/* The roster you lobby into. Scrolls INSIDE itself at sixty people rather
   than making the page taller than the room's patience. */
.cs-targets {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px;
  margin: 10px 0; max-height: 210px; overflow-y: auto; padding-right: 2px;
}
.cs-target {
  min-height: 48px; padding: 8px 6px; cursor: pointer; border-radius: 0;
  border: 2px solid var(--ink); background: #fff;
  font: 700 .78rem var(--mono); line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cs-target.on { background: var(--blue); color: #fff; }

.cs-sent { display: grid; gap: 6px; margin-top: 10px; }
.cs-sent-row {
  display: grid; grid-template-columns: 6ch minmax(0, 1fr); gap: 8px;
  padding: 6px 8px; border-left: 3px solid var(--blue); background: #fff;
  font-size: .78rem; line-height: 1.4; overflow-wrap: anywhere;
}
.cs-sent-k { font: 700 .64rem var(--mono); text-transform: uppercase; color: var(--ink-2); }

.cs-actions { margin-top: 8px; }

/* ═══════════════════════ 2. COALITION ═══════════════════════ */

.cs-budget {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 14px 0 10px; padding: 10px 14px;
  border: 3px solid var(--ink); background: var(--yellow); box-shadow: 4px 4px 0 #000;
}
.cs-budget .num { font-family: var(--head); font-weight: 700; font-size: 2rem; line-height: 1; font-variant-numeric: tabular-nums; }
.cs-budget-note { font-size: .74rem; }

/* A plank. Tappable on the phone, a plain div everywhere else, same markup.
   `text-align: left` because a <button> centres by default and these are
   sentences. */
.cs-plank {
  display: grid; gap: 5px; width: 100%; text-align: left;
  padding: 10px 12px; border: 2px solid var(--ink); background: #fff;
  border-radius: 0; cursor: default; font: inherit; color: inherit;
}
button.cs-plank { cursor: pointer; box-shadow: 4px 4px 0 #000; min-height: 72px; transition: transform .08s; }
button.cs-plank:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 #000; }
.cs-plank.on { background: var(--yellow); }
.cs-plank.passed { border-color: var(--good); border-width: 3px; }
.cs-plank-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cs-plank-title { font: 700 .95rem var(--head); letter-spacing: .01em; overflow-wrap: anywhere; }
.cs-plank-detail { font-size: .76rem; color: var(--ink-2); line-height: 1.4; overflow-wrap: anywhere; }
.cs-plank-meter { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.cs-plank-track { position: relative; height: 14px; border: 2px solid var(--ink); background: #fff; overflow: hidden; }
.cs-plank-track > i { display: block; height: 100%; width: 0; background: var(--blue); transition: width .7s cubic-bezier(.2, .8, .2, 1); }
/* The threshold marker. A plank one backing short has to LOOK one backing
   short from across a room, which a bare number never does. */
.cs-plank-need { position: absolute; top: -2px; bottom: -2px; width: 3px; background: var(--orange-ink); }
.cs-plank.passed .cs-plank-track > i { background: var(--good); }
.cs-plank-n { font: 700 1rem var(--head); font-variant-numeric: tabular-nums; }
.cs-plank-n s { text-decoration: none; color: var(--ink-2); font-size: .74em; }

.cs-tag { font: 700 .58rem var(--mono); letter-spacing: .08em; padding: 2px 5px; border: 1px solid var(--ink); white-space: nowrap; }
.cs-tag-pass { background: #d9f2e2; }
.cs-tag-block { background: #ffe0d8; }

/* THE FLOOR. The trading feed. This is the part of coalition the room will
   actually remember, so it is styled as speech rather than as a log. */
.cs-floor { display: grid; gap: 7px; margin-top: 6px; }
.cs-floor-row {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px;
  padding: 8px 10px; border-left: 4px solid var(--blue); background: #fff; border-top: 1px solid var(--grey);
}
.cs-floor-name { font: 700 .64rem var(--mono); text-transform: uppercase; color: var(--ink-2); overflow-wrap: anywhere; }
.cs-floor-text { font-size: .86rem; line-height: 1.45; overflow-wrap: anywhere; }

/* ═══════════════════════ 3. THE AMENDMENT ═══════════════════════ */

/* The motion. The one artefact everybody is looking at, so it is set as a
   numbered instrument and not as a paragraph. */
.cs-motion { list-style: none; display: grid; gap: 8px; margin: 12px 0; }
.cs-clause {
  display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: baseline;
  padding: 8px 10px; border-left: 3px solid var(--ink); background: #fff;
}
.cs-clause-no { font: 700 .8rem var(--mono); color: var(--ink-2); }
.cs-clause-text { font-size: .95rem; line-height: 1.5; overflow-wrap: anywhere; }
/* What just went in, and what just came out. The redline IS the activity. */
.cs-clause.fresh { border-left-color: var(--gold); background: #fff8e8; }
.cs-clause.fresh .cs-clause-text { font-weight: 700; }
.cs-clause.struck { border-left-color: var(--bad); background: #fff2ef; }
.cs-clause.struck s { color: var(--bad); }
.cs-clause.cs-more { border-left-style: dashed; background: transparent; }
.cs-clause.cs-more .cs-clause-text { font-style: italic; color: var(--ink-2); }
.cs-pj .cs-clause.cs-more { background: transparent; border-left-color: var(--sky-faint); }
.cs-pj .cs-clause.cs-more .cs-clause-text { color: var(--sky-muted); }
.cs-motion.cs-was .cs-clause { border-left-color: #bdbdbd; background: var(--grey); }
.cs-motion.cs-was .cs-clause-text { font-size: .84rem; color: var(--ink-2); }
/* A `cs-was` clause carries no number, so it has ONE child. Without this rule
   that child lands in the first track of the two-column clause grid, which is
   28.8px wide: measured at 2087px tall for a 175-character clause, one
   character per line, straight off the bottom of the wall. */
.cs-motion.cs-was .cs-clause { grid-template-columns: minmax(0, 1fr); }
.cs-pj .cs-motion.cs-was .cs-clause { grid-template-columns: minmax(0, 1fr); border-left-color: var(--sky-faint); background: rgba(0, 0, 0, .3); }
.cs-pj .cs-motion.cs-was .cs-clause-text { font-size: min(1.7vw, 3vh); color: var(--sky-muted); }

.cs-amends { display: grid; gap: 8px; margin-top: 10px; }
.cs-amendcard {
  display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: baseline;
  width: 100%; min-height: 56px; text-align: left; padding: 10px 12px; cursor: pointer; border-radius: 0;
  border: 2px solid var(--ink); background: #fff; box-shadow: 4px 4px 0 #000;
  font: inherit; color: inherit; transition: transform .08s;
}
.cs-amendcard:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 #000; }
.cs-amendcard.on { background: var(--yellow); }
.cs-amend-none { border-style: dashed; box-shadow: none; }
.cs-amend-no { font: 700 .9rem var(--head); color: var(--orange-ink); }
.cs-amend-body { font-size: .88rem; line-height: 1.5; overflow-wrap: anywhere; }
.cs-amend-body ins { text-decoration: none; background: #fff3d0; box-shadow: inset 0 -2px 0 var(--gold); }
.cs-amend-body s { color: var(--bad); }

.cs-op { font: 700 .62rem var(--mono); letter-spacing: .08em; padding: 2px 5px; border: 1px solid var(--ink); white-space: nowrap; }
.cs-op-add { background: #d9f2e2; }
.cs-op-strike { background: #ffe0d8; }
.cs-op-replace { background: #fff3d0; }

.cs-ops { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }

.cs-clausepick { display: grid; gap: 6px; margin-top: 8px; max-height: 240px; overflow-y: auto; }
.cs-clausebtn {
  display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; align-items: baseline;
  width: 100%; min-height: 48px; text-align: left; padding: 9px 10px; cursor: pointer; border-radius: 0;
  border: 2px solid var(--ink); background: #fff; font: inherit; color: inherit;
  font-size: .84rem; line-height: 1.4; overflow-wrap: anywhere;
}
.cs-clausebtn.on { background: var(--yellow); }

.cs-ratify-out {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin: 14px 0; padding: 12px 14px; border: 3px solid var(--ink); box-shadow: 4px 4px 0 #000;
}
.cs-ratify-out b { font: 700 1.6rem var(--head); letter-spacing: .06em; }
.cs-ratify-out span { font-size: .82rem; }
.cs-ratify-out.carried { background: #d9f2e2; }
.cs-ratify-out.failed { background: #ffe0d8; }

/* ═══════════════════════════════════════════════════════════════════════════
   THE PROJECTOR

   Sized against BOTH axes. At 1280x720 the available frame is 1178 wide and
   about 662 tall, so a layout tuned only on width falls off the bottom of a
   720p projector and nobody in the hall can see the last row. Every size below
   is `min(Xvw, Yvh)`: the vw term keeps it proportional on a wide screen, the
   vh term is what saves it at 720p.

   The floor: `min(1.7vw, 3vh)` is 21.6px at 1280x720. Nothing here goes below
   that, so nothing on the wall is under 20px.
   ═══════════════════════════════════════════════════════════════════════════ */

.cs-pj { display: grid; gap: 1.2vh; align-content: start; }
.cs-pj-kick {
  font-family: var(--head); font-weight: 600; letter-spacing: .3em; text-transform: uppercase;
  color: var(--gold); font-size: min(1.8vw, 2.9vh); line-height: 1.2;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .85);
}
.cs-pj-label {
  display: block; font-family: var(--head); font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold); font-size: min(1.7vw, 3vh); margin-bottom: .8vh;
}
.cs-pj-motion {
  font-family: var(--head); font-weight: 700; text-transform: uppercase; color: #fff; line-height: 1.05;
  font-size: min(3.4vw, 6.2vh); letter-spacing: .01em; max-width: 26ch;
  text-shadow: .35vh .35vh 0 var(--blue); overflow-wrap: anywhere;
}
/* A real motion is a sentence, not a slogan. At the size above, 175 characters
   is seven lines and 320px of a 670px frame, which puts the tally the activity
   exists to show off the bottom edge of a 720p projector. Measured, then fixed
   here: the font steps down and the measure widens together, so the line count
   stays at four and the smallest step is still 26.6px at 720p. */
.cs-pj-motion.cs-long { font-size: min(2.6vw, 4.6vh); max-width: 40ch; line-height: 1.08; }
.cs-pj-motion.cs-xlong { font-size: min(2.1vw, 3.7vh); max-width: 54ch; line-height: 1.15; }
/* On the reveal the numbers are the story, so the motion is a caption. */
.cs-pj-motion.cs-small { font-size: min(2.3vw, 4vh); max-width: 46ch; }
.cs-pj-motion.cs-small.cs-long { font-size: min(1.95vw, 3.4vh); max-width: 58ch; }
.cs-pj-motion.cs-small.cs-xlong { font-size: min(1.75vw, 3.05vh); max-width: 72ch; line-height: 1.2; }
.cs-pj-foot {
  margin-top: .6vh; font-family: var(--head); font-size: min(1.7vw, 3vh);
  letter-spacing: .06em; text-transform: uppercase; color: var(--sky-muted);
  display: flex; align-items: center; gap: 1.4vw; flex-wrap: wrap;
}
.cs-pj-big { font-family: var(--head); font-weight: 700; color: var(--gold); font-size: min(3vw, 5vh); line-height: 1; font-variant-numeric: tabular-nums; }
/* The shared `.countdown` is clamp(3rem, 9vw, 7rem), which is 115px at 1280
   wide and made every foot in this file 152px tall: measured, and a quarter of
   the frame before a single number is drawn. Scoped to `.cs-pj` so no other
   activity's clock moves. Still 46px, which reads from the back of a hall. */
.cs-pj .timer { margin: 0; }
.cs-pj .countdown { font-size: min(3.6vw, 6.4vh); }
.cs-pj .progress { height: min(1vw, 1.8vh); }
.cs-pj-gap {
  padding: 1vh 1.2vw; border-left: .5vh solid var(--gold); background: rgba(0, 12, 36, .6);
  font-size: min(1.8vw, 3.2vh); line-height: 1.35; color: #fff;
}
.cs-pj-gap b { color: var(--gold); font-family: var(--head); font-size: 1.25em; }
.cs-pj-role {
  font-size: min(1.7vw, 3vh); line-height: 1.35; color: var(--sky-muted);
  border-top: 1px solid var(--sky-line); padding-top: .8vh; max-width: 100ch;
}

/* Two columns, and at 720p they stay two columns: stacking them is what puts
   the second one below the bottom edge of the screen. */
.cs-pj-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.2vw; align-items: start; }
.cs-pj-two-wide { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }

/* ── the whip count on the wall ── */
/* 9ch at 21.6px clipped AGAINST to "AGAIN…" on a projector, which is the one
   place a truncated word is unrecoverable: nobody in the hall can hover it. */
.cs-pj .cs-wbars { gap: 1.1vh; }
.cs-pj .cs-wbar { grid-template-columns: minmax(0, 13ch) minmax(0, 1fr) auto; gap: 1vw; }
.cs-pj .cs-wbar-k { font-size: min(1.7vw, 3vh); color: #fff; letter-spacing: .02em; }
.cs-pj .cs-wbar-track { height: min(2.2vw, 3.4vh); border-color: rgba(255, 255, 255, .55); background: rgba(0, 0, 0, .35); }
.cs-pj .cs-wbar-n { font-size: min(2.2vw, 3.8vh); color: #fff; }
.cs-pj .cs-wbars.cs-real .cs-wbar-track { border-style: dashed; border-color: var(--gold); }

.cs-pj-closest { display: flex; align-items: baseline; gap: 1vw; flex-wrap: wrap; }
.cs-pj-chip {
  padding: .6vh 1vw; border: .2vh solid var(--gold); background: rgba(0, 12, 36, .65);
  font-size: min(1.7vw, 3vh); color: #fff;
  max-width: 30ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cs-pj-chip b { color: var(--gold); }

/* ── coalition on the wall ── */
/* ONE LINE PER PLANK. Stacked title-over-meter, a nine-plank board measured
   927px tall in a 670px frame, because a 50-character title wraps to two lines
   in the narrower of two columns. Title left, meter right, title clipped to a
   single line: the wall carries the shortlist, the phone carries the words. */
.cs-pj-planks { display: grid; gap: .9vh; }
.cs-pj .cs-plank {
  background: rgba(0, 12, 36, .6); border-color: rgba(255, 255, 255, .4); color: #fff;
  padding: .7vh 1vw; gap: .4vh 1vw;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: center;
}
.cs-pj .cs-plank-head { flex-wrap: nowrap; min-width: 0; }
.cs-pj .cs-plank-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-pj .cs-plank.passed { border-color: var(--gold); border-width: .3vh; background: rgba(240, 168, 48, .18); }
.cs-pj .cs-plank-title { font-size: min(1.9vw, 3.3vh); color: #fff; }
.cs-pj .cs-plank-detail { display: none; }            /* the wall carries the title, the phone carries the detail */
.cs-pj .cs-plank-track { height: min(1.8vw, 2.8vh); border-color: rgba(255, 255, 255, .5); background: rgba(0, 0, 0, .4); }
.cs-pj .cs-plank-track > i { background: linear-gradient(90deg, var(--orange), #ff8a3d); }
.cs-pj .cs-plank.passed .cs-plank-track > i { background: linear-gradient(90deg, var(--gold), #ffd77a); }
.cs-pj .cs-plank-need { background: #fff; width: .3vw; }
/* 23.8px x .74em was 17.6px on the wall: measured, and under the 20px floor.
   The denominator is now its own full-size token rather than a subscript. */
.cs-pj .cs-plank-n { font-size: min(1.9vw, 3.3vh); color: var(--gold); white-space: nowrap; }
.cs-pj .cs-plank-n s { color: var(--sky-muted); font-size: min(1.7vw, 3vh); }
.cs-pj .cs-tag { display: none; }

.cs-pj .cs-floor { gap: 1vh; }
.cs-pj .cs-floor-row { background: rgba(0, 12, 36, .6); border-left-color: var(--gold); border-top: 0; padding: .8vh 1vw; }
.cs-pj .cs-floor-name { font-size: min(1.7vw, 3vh); color: var(--gold); }
.cs-pj .cs-floor-text {
  font-size: min(1.75vw, 3.05vh); color: #fff; line-height: 1.3;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}

.cs-pj-hands { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8vh 1vw; }
.cs-pj-hand {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .6vw; align-items: baseline;
  padding: .6vh .9vw; border: .15vh solid rgba(255, 255, 255, .4); background: rgba(0, 12, 36, .6);
}
.cs-pj-hand-name { font-size: min(1.7vw, 3vh); color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-pj-hand-got { font-family: var(--head); font-weight: 700; font-size: min(1.8vw, 3.1vh); color: var(--gold); }

/* ── the amendment on the wall ── */
.cs-motion.big { gap: 1vh; margin: 0; }
.cs-pj .cs-clause {
  background: rgba(0, 12, 36, .6); border-left: .45vh solid rgba(255, 255, 255, .45);
  grid-template-columns: min(2.4vw, 4vh) minmax(0, 1fr); gap: 1vw; padding: .8vh 1.1vw;
}
.cs-pj .cs-clause-no { font-size: min(1.7vw, 3vh); color: var(--sky-muted); }
/* Bounded per clause, not per motion. A clause is a member's own sentence and
   the officer's clause box takes anything: eight clauses of 286 characters
   measured 1094px in a 670px frame. Three lines is about 270 characters at
   full width, well past the 160-character cap a member writes under, so
   nothing real is ever clipped; the phone carries the whole motion and the
   "+N further clauses on your phone" line says so. */
.cs-pj .cs-clause-text {
  font-size: min(1.95vw, 3.45vh); color: #fff; line-height: 1.3;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.cs-pj .cs-motion.tight .cs-clause-text { -webkit-line-clamp: 2; }
.cs-pj .cs-clause.cs-more .cs-clause-text { -webkit-line-clamp: 1; }
.cs-pj .cs-clause.fresh { border-left-color: var(--gold); background: rgba(240, 168, 48, .2); }
.cs-pj .cs-clause.fresh .cs-clause-text { color: #ffe9bd; }
.cs-pj .cs-clause.struck { border-left-color: var(--bad); background: rgba(200, 37, 15, .22); }
.cs-pj .cs-clause.struck s { color: #ff9d8a; }
/* A motion that has grown past six clauses steps down a size rather than
   falling off the bottom. It never steps below the 20px floor. */
.cs-motion.big.tight { gap: .65vh; }
.cs-pj .cs-motion.tight .cs-clause-text { font-size: min(1.7vw, 3vh); line-height: 1.2; }
.cs-pj .cs-motion.tight .cs-clause { padding: .45vh 1vw; }

.cs-pj-amends { display: grid; gap: .9vh; }
.cs-pj-amend-row {
  display: grid; grid-template-columns: min(2.6vw, 4.2vh) minmax(0, 1fr); gap: 1vw; align-items: baseline;
  padding: .55vh 1.1vw; border: .15vh solid rgba(255, 255, 255, .4); background: rgba(0, 12, 36, .6);
}
.cs-pj-amend-no { font-family: var(--head); font-weight: 700; font-size: min(1.8vw, 3.1vh); color: var(--gold); }
/* Three lines, which is about 145 characters at this size in this column and
   therefore the whole of a 160-character amendment. Without the clamp one
   240-character word measured 218px on its own and put the fifth amendment off
   the bottom of the ballot the room is voting from. The phone shows every
   amendment in full, because the phone scrolls. */
.cs-pj-amend-body {
  font-size: min(1.75vw, 3.05vh); color: #fff; line-height: 1.22; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.cs-pj-amend-body ins { text-decoration: none; color: #ffe9bd; box-shadow: inset 0 -.3vh 0 var(--gold); }
.cs-pj-amend-body s { color: #ff9d8a; }
/* min(1.4vw, 2.5vh) measured 17.9px at 1280x720, under the 20px floor. */
.cs-pj .cs-op { font-size: min(1.7vw, 3vh); border-color: var(--gold); color: var(--gold); background: transparent; padding: .1vh .5vw; }

.cs-pj-ratify {
  display: flex; align-items: baseline; gap: 1.4vw; flex-wrap: wrap;
  padding: 1vh 1.2vw; border: .3vh solid var(--gold); background: rgba(0, 12, 36, .7);
}
.cs-pj-ratify b { font-family: var(--head); font-weight: 700; font-size: min(3.4vw, 5.8vh); letter-spacing: .06em; line-height: 1; }
.cs-pj-ratify span { font-size: min(1.8vw, 3.2vh); color: var(--sky-muted); }
.cs-pj-ratify.carried b { color: #7dffb0; }
.cs-pj-ratify.failed b { color: #ff9d8a; }

/* ─────────────────────────── the officer's panel ─────────────────────────── */
/* The control room reuses the shared `.list > .item > .t` rows, which have no
   wrap rule of their own because nothing had put a member's raw sentence in
   one before. The coalition floor feed does, and a 240-character word with no
   spaces in it measured 2482px against a 339px panel: the officer's whole
   screen slides sideways while they are trying to run the round. */
.cs-ctl .t, .cs-ctl .s, .cs-ctl .item { overflow-wrap: anywhere; min-width: 0; }
.cs-ctl .list { max-width: 100%; }
/* The control room is `.paper`, so the phone styles above already fit it. The
   only thing it needs of its own is a tally that is unmistakably NOT the one
   on the wall, because an officer reading the wrong chart out loud is the
   whole round given away. */
.paper .cs-wbars.cs-real { padding: 8px; border: 2px dashed var(--orange-ink); background: #fff6f2; }

/* ─────────────────────────── 720p and reduced motion ─────────────────────── */
/* Below 780px tall the two-column projector layouts lose their gutters before
   they lose a column: at 1280x720 both columns still have to be on screen. */
@media (max-height: 780px) {
  .cs-pj { gap: 1.1vh; }
  .cs-pj-two { gap: 1.6vw; }
  .cs-pj-role { padding-top: .6vh; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-wbar-track > i, .cs-plank-track > i { transition: none; }
}