/* ---------------------------------------------------------------------------
   The Election Room

   Two surfaces share one token system. The app (laptop, phones) follows the
   device's light or dark preference, because a party at night is a dim room.
   The TV wall always runs dark and much larger, for reading across a lounge.

   IBM Plex Sans throughout, with tabular figures, so numbers hold their
   columns while they change. Party colours are custom properties (--p-NAT
   and so on), tuned separately for light and dark backgrounds.
   --------------------------------------------------------------------------- */

/* Design tokens live in theme.css. */

* {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1,
h2,
h3 {
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1.12;
}
h2 {
  font-size: 18px;
  font-weight: 650;
}
h3 {
  font-size: 15px;
  font-weight: 650;
}
p {
  margin: 0;
}
a {
  color: var(--accent);
}
button,
input,
select {
  font: inherit;
  color: inherit;
}
button {
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}
button:disabled {
  cursor: default;
  opacity: 0.5;
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.muted {
  color: var(--muted);
}
.strong {
  font-weight: 650;
  color: var(--ink);
}
.up {
  color: var(--ok);
}
.down {
  color: var(--bad);
}
.r {
  text-align: right;
}
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  background: var(--ink);
  color: var(--bg);
  padding: 8px 12px;
  border-radius: var(--r-sm);
}
.skip:focus {
  top: 12px;
}
.icon {
  width: 16px;
  height: 16px;
  flex: none;
  vertical-align: -3px;
}
.kicker {
  display: block;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.empty {
  color: var(--muted);
  padding: 18px 0;
  font-size: 13px;
}
.footnote {
  color: var(--muted);
  font-size: 12px;
  margin-top: 14px;
  line-height: 1.5;
}
.swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex: none;
}

/* --- Buttons and controls ------------------------------------------------ */

.button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--r-inner);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  font-weight: 550;
  white-space: nowrap;
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.15s ease;
}
.button:hover {
  border-color: var(--muted);
}
.button:active,
.chip:active,
.icon-button:active,
.race-row:active,
.seat-item:active {
  transform: scale(0.97);
}
.button.on {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.button.on .icon {
  fill: currentColor;
}
.button.ghost {
  border-color: transparent;
  background: transparent;
}
.button.ghost:hover {
  background: var(--surface-3);
}
.button.small {
  min-height: 44px;
  padding: 0 10px;
  font-size: 13px;
}
.button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  height: 44px;
  justify-content: center;
  font-weight: 650;
}
.button.primary:hover {
  filter: brightness(1.06);
}
.icon-button {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  border-radius: 50%;
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.15s ease;
}
.icon-button:hover {
  background: var(--surface-3);
}
.chip {
  min-height: 40px;
  padding: 6px 12px;
  border-radius: 99px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  font-size: 13px;
  font-weight: 550;
  white-space: nowrap;
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.15s ease;
}
.chip:hover {
  border-color: var(--muted);
}
.chip.on {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}
select {
  appearance: none;
  min-height: 44px;
  padding: 0 32px 0 12px;
  border-radius: var(--r-inner);
  border: 1px solid var(--line-strong);
  background: var(--surface)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%238a949f' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m3 4.5 3 3 3-3'/%3E%3C/svg%3E")
    no-repeat right 11px center;
  font-size: 13px;
  font-weight: 550;
  cursor: pointer;
}
input[type="number"],
input[type="search"],
input[type="text"],
input:not([type]) {
  height: 38px;
  padding: 0 11px;
  border-radius: var(--r-inner);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  min-width: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
}
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
input[type="range"] {
  --c: var(--accent);
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 22px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 99px;
  background:
    linear-gradient(var(--c), var(--c)) 0 / var(--fill, 50%) 100% no-repeat,
    var(--surface-3);
}
input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 99px;
  background: var(--surface-3);
}
input[type="range"]::-moz-range-progress {
  height: 6px;
  border-radius: 99px;
  background: var(--c);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -6px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--c);
  box-shadow: var(--shadow-control);
}
input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--c);
}
input[type="range"]:focus-visible {
  outline: none;
}
input[type="range"]:focus-visible::-webkit-slider-thumb {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* --- Tags ------------------------------------------------------------------ */

.tag {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.02em;
  background: var(--surface-3);
  color: var(--muted);
  white-space: nowrap;
}
.tag.mini {
  height: 18px;
  padding: 0 6px;
  font-size: 10px;
}
.tag-projected {
  background: var(--ok-soft);
  color: var(--ok);
}
.tag-too-close {
  background: var(--warn-soft);
  color: var(--warn-ink);
}
.tag-gain {
  background: color-mix(in srgb, var(--c) 14%, var(--surface));
  color: color-mix(in srgb, var(--c) 78%, var(--ink));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 30%, transparent);
}
.tag-hold {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.tag-edge {
  background: var(--warn-soft);
  color: var(--warn-ink);
  margin-left: 6px;
}

/* --- Masthead -------------------------------------------------------------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 20px;
  height: 60px;
  padding: 0 24px;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--line);
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  flex: none;
}
.brand-mark {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  width: 30px;
  height: 30px;
  padding: 7px 6px;
  border-radius: 8px;
  background: var(--ink);
}
.brand-mark i {
  flex: 1;
  border-radius: 1.5px;
  background: var(--bg);
}
.brand-mark i:nth-child(1) {
  height: 45%;
}
.brand-mark i:nth-child(2) {
  height: 100%;
  background: var(--accent);
}
.brand-mark i:nth-child(3) {
  height: 70%;
}
.brand-text {
  display: flex;
  flex-direction: column;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.brand-text small {
  font-weight: 500;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0;
}
.nav {
  display: flex;
  gap: 2px;
  margin-left: 8px;
}
.nav button {
  height: 34px;
  padding: 0 12px;
  border-radius: 8px;
  font-weight: 550;
  color: var(--muted);
}
.nav button:hover {
  color: var(--ink);
  background: var(--surface-3);
}
.nav button.on {
  color: var(--ink);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
}
.masthead-tools {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}
.theme-button .icon {
  width: 17px;
  height: 17px;
}
.clock {
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  font-weight: 550;
}
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 26px;
  padding: 0 10px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 650;
  background: var(--surface-3);
  color: var(--muted);
}
.status-pill i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.status-pill.rehearsal {
  background: var(--warn-soft);
  color: var(--warn);
}
.status-pill.live {
  background: var(--accent-soft);
  color: var(--accent);
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 60%, transparent);
  }
  100% {
    box-shadow: 0 0 0 7px transparent;
  }
}

.controlbar {
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.controlbar-inner {
  max-width: 1320px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 24px;
  min-height: 54px;
}
.source-note {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  flex: 1;
  font-size: 13px;
}
.source-note strong {
  color: var(--ink);
  white-space: nowrap;
}
.source-note span {
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rehearsal {
  display: flex;
  align-items: center;
  gap: 10px;
}
.rehearsal[hidden] {
  display: none;
}
.play {
  background: var(--ink);
  color: var(--bg);
}
.play:hover {
  background: var(--ink);
  filter: brightness(1.2);
}
.play.on {
  background: var(--accent);
  color: var(--on-accent);
}
.play .icon {
  width: 14px;
  height: 14px;
}
.scrub {
  width: 180px;
  display: flex;
}
#progress-label {
  width: 38px;
  font-weight: 650;
  color: var(--ink);
}

.error {
  max-width: 1320px;
  margin: 12px auto 0;
  padding: 10px 14px;
  border-radius: var(--r);
  background: var(--warn-soft);
  color: var(--warn);
  font-weight: 550;
}

main {
  max-width: 1320px;
  margin: 0 auto;
  padding: 28px 24px 64px;
  outline: none;
}
.loading {
  padding: 18vh 0;
}
.loading h1 {
  font-size: clamp(36px, 6vw, 64px);
  margin-top: 14px;
  letter-spacing: -0.035em;
}

/* --- Cards and grids ------------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 22px;
  box-shadow: var(--shadow);
  min-width: 0;
}
.card + .card,
.pulse + .card,
.pulse + .grid-main,
.grid-main + .card,
.card + .grid-main,
.grid-main + .grid-main {
  margin-top: 20px;
}
.card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.card-head h2 {
  margin-top: 6px;
}
.grid-main {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 20px;
}
.grid-main > .card + .card {
  margin-top: 0;
}
.page-head {
  max-width: 720px;
  margin-bottom: 26px;
}
.page-head h1 {
  font-size: clamp(30px, 4vw, 42px);
  font-weight: 650;
  letter-spacing: -0.035em;
  margin: 10px 0 10px;
}
.page-head p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
  text-wrap: pretty;
}
.row-gap {
  display: flex;
  gap: 8px;
}

/* --- Hero ------------------------------------------------------------------ */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 36px;
  align-items: end;
  margin: 8px 0 24px;
}
.headline {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 62px);
  font-weight: 640;
  letter-spacing: -0.015em;
  line-height: 1;
  margin: 12px 0 14px;
  text-wrap: balance;
}
.page-head h1,
.detail-head h1,
.loading h1 {
  font-family: var(--font-display);
  font-weight: 640;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}
.button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.button.primary:hover {
  filter: brightness(1.07);
}
.hero-sub {
  font-size: 16px;
  color: var(--muted);
  max-width: 640px;
  line-height: 1.5;
  text-wrap: pretty;
}
.hero-side {
  display: grid;
  gap: 12px;
}
.count-meter {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 16px 18px;
}
.count-top,
.count-sub {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
.count-top span {
  font-weight: 600;
  color: var(--ink);
}
.count-top b {
  font-size: 22px;
  font-weight: 650;
  color: var(--ink);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.count-top small {
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
}
.count-meter .meter {
  margin: 10px 0 8px;
  height: 8px;
}
.count-sub {
  font-size: 12px;
  color: var(--muted);
}
.mini-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.mini-stats div {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
}
.mini-stats b {
  font-size: 24px;
  font-weight: 650;
  color: var(--ink);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.mini-stats span {
  font-size: 12px;
  color: var(--muted);
}
.countdown {
  display: flex;
  gap: 10px;
  margin-top: 22px;
}
.countdown span {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 72px;
  padding: 10px 8px;
  border-radius: var(--r);
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.countdown b {
  font-size: 30px;
  font-weight: 650;
  color: var(--ink);
  letter-spacing: -0.03em;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}

/* --- Meters ---------------------------------------------------------------- */

.meter {
  display: block;
  height: 6px;
  border-radius: 99px;
  background: var(--surface-3);
  overflow: hidden;
}
.meter > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  transition: width 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.meter.thin {
  height: 4px;
  margin-top: 7px;
}

/* --- Race to 61 ------------------------------------------------------------ */

.card-r61 {
  padding: 22px 26px 26px;
}
.r61-head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 16px;
  margin-bottom: 14px;
}
.r61-bloc {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.r61-bloc.right {
  align-items: flex-end;
  text-align: right;
}
.r61-bloc b {
  font-size: 44px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.03em;
  line-height: 1;
}
.r61-bloc span {
  font-size: 13px;
  color: var(--muted);
  font-weight: 550;
}
.r61-bloc.wins b::after {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  margin: 0 0 6px 8px;
  border-radius: 50%;
  background: var(--ok);
  vertical-align: middle;
}
.r61-bloc.right.wins b::after {
  margin: 0 8px 6px 0;
  order: -1;
}
.r61-bloc.right b {
  display: inline-flex;
  flex-direction: row-reverse;
  align-items: center;
}
.r61-goal {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 2px;
}
.r61-goal b {
  font-size: 20px;
  font-weight: 650;
  color: var(--ink);
}
.r61-goal span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-weight: 650;
}
.r61-bar {
  position: relative;
  display: flex;
  height: 38px;
  border-radius: var(--r-inner);
  overflow: hidden;
  background: var(--surface-3);
}
.r61-bar > span {
  display: grid;
  place-items: center;
  min-width: 0;
  color: var(--on-fill-dark);
  text-shadow: none;
  font-weight: 700;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  box-shadow: inset -1px 0 0 color-mix(in srgb, var(--surface) 55%, transparent);
  transition: flex-grow 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.r61-bar > .r61-gap {
  background: transparent;
  box-shadow: none;
}
.r61-bar > .r61-other {
  background: var(--p-other);
}
.r61-mark {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 2px;
  margin-left: -1px;
  background: var(--ink);
  opacity: 0.8;
}
.r61-mark + .r61-mark {
  opacity: 0.25;
}

/* --- Party rows ------------------------------------------------------------ */

.party-head,
.party-row {
  display: grid;
  grid-template-columns: minmax(130px, 1.2fr) minmax(80px, 2fr) 62px 52px 58px;
  gap: 14px;
  align-items: center;
}
.party-head {
  font-size: 11px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.party-head span:nth-child(n + 3) {
  text-align: right;
}
.party-row {
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.party-row:last-child {
  border-bottom: 0;
}
.pr-name {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 600;
  color: var(--ink);
  min-width: 0;
}
.pr-name > span:nth-child(2) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pr-bar {
  position: relative;
  height: 14px;
  border-radius: var(--r-inner-sm);
  background: var(--surface-3);
}
.pr-fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: var(--r-inner-sm);
  transition: width 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.pr-counted {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  margin-left: -1px;
  background: var(--ink);
  border-radius: 1px;
}
.pr-five {
  position: absolute;
  top: -4px;
  bottom: -4px;
  border-left: 1px dashed var(--muted);
  opacity: 0.6;
}
.pr-share {
  text-align: right;
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
}
.pr-delta {
  text-align: right;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.pr-seats {
  text-align: right;
  font-weight: 700;
  font-size: 20px;
  color: var(--ink);
  letter-spacing: -0.02em;
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}
.pr-seats small {
  font-size: 11px;
  font-weight: 550;
  color: var(--muted);
  letter-spacing: 0;
}

/* --- Hemicycle ------------------------------------------------------------- */

.card-chamber {
  display: flex;
  flex-direction: column;
}
.hemicycle {
  display: block;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
}
.hemicycle circle {
  transition: fill 0.4s;
}
.hemi-mid {
  stroke: var(--muted);
  stroke-width: 0.6;
  stroke-dasharray: 2 2;
  opacity: 0.6;
}
.hemi-num {
  text-anchor: middle;
  font-size: 22px;
  font-weight: 700;
  fill: var(--ink);
  letter-spacing: -0.03em;
  font-family: var(--font);
}
.hemi-cap {
  text-anchor: middle;
  font-size: 6.5px;
  font-weight: 600;
  fill: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: var(--font);
}
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 18px;
  font-size: 13px;
}
.legend > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--body);
}
.legend b {
  color: var(--ink);
}
.legend small {
  color: var(--muted);
  font-size: 11px;
}

/* --- Race rows ------------------------------------------------------------- */

.race-list-head,
.race-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 62px minmax(
      120px,
      auto
    );
  gap: 12px;
  align-items: center;
}
.race-list-head {
  font-size: 11px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  padding: 0 10px 8px;
}
.race-list-head span:nth-child(3) {
  text-align: right;
}
.race-row {
  width: 100%;
  text-align: left;
  padding: 10px;
  border-radius: var(--r);
  position: relative;
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.15s ease;
}
.race-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 3px;
  background: var(--c);
}
.race-row:hover {
  background: var(--surface-2);
}
.rr-seat {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 6px;
  min-width: 0;
}
.rr-seat b {
  color: var(--ink);
  font-weight: 650;
}
.rr-seat small {
  flex-basis: 100%;
  color: var(--muted);
  font-size: 12px;
}
.rr-lead {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.rr-lead > span:last-child {
  display: flex;
  flex-direction: column;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.rr-lead small {
  font-weight: 550;
  font-size: 11px;
  color: var(--muted);
}
.rr-margin {
  text-align: right;
  font-weight: 650;
  font-size: 17px;
  color: var(--ink);
}
.rr-margin small {
  font-size: 11px;
  color: var(--muted);
  font-weight: 550;
  margin-left: 2px;
}
.rr-tags {
  display: flex;
  justify-content: flex-end;
  gap: 5px;
}
.star-on {
  width: 13px;
  height: 13px;
  color: var(--warn);
  fill: var(--warn);
}

/* --- Feed ------------------------------------------------------------------ */

.feed {
  list-style: none;
  margin: 0;
  padding: 0;
}
.feed li {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 10px;
  padding: 10px 0 10px 12px;
  border-bottom: 1px solid var(--line);
  position: relative;
  animation: arrive 0.5s ease-out;
}
.feed li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c, var(--muted));
}
.feed time {
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  padding-top: 1px;
}
.feed span {
  color: var(--ink);
  font-weight: 500;
}
.feed-call span,
.feed-gain span,
.feed-bloc span {
  font-weight: 650;
}
@keyframes arrive {
  from {
    opacity: 0;
    transform: translateY(-4px);
    background: var(--accent-soft);
  }
}

/* --- Seats changing hands -------------------------------------------------- */

.flip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.flip {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
  padding: 16px 14px 12px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  overflow: hidden;
}
.flip {
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.15s ease;
}
.flip:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-lift);
}
.flip:active {
  transform: scale(0.97);
}
.flip-bar {
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--from) 0 30%, var(--c) 70% 100%);
}
.flip b {
  color: var(--ink);
  font-size: 15px;
}
.flip > span {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: var(--ink);
}
.flip small {
  color: var(--muted);
}

/* --- Electorates desk ------------------------------------------------------ */

.desk {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.desk-list {
  position: sticky;
  top: 80px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: calc(100vh - 100px);
}
.search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  height: 42px;
  border-radius: var(--r);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--muted);
}
.search input {
  border: 0;
  height: 100%;
  padding: 0;
  flex: 1;
  background: transparent;
  outline: none;
}
.search:focus-within {
  border-color: var(--accent);
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.sort {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
}
.sort span {
  margin-right: 4px;
}
.sort button {
  padding: 3px 8px;
  border-radius: 6px;
  font-weight: 550;
}
.sort button.on {
  background: var(--surface-3);
  color: var(--ink);
}
.desk-list > * {
  flex: none;
}
.desk-list > .seat-list {
  flex: 0 1 auto;
  min-height: 200px;
}
.seat-list {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
  min-height: 200px;
}
.seat-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  text-align: left;
  padding: 10px 14px 10px 16px;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.seat-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--c);
  opacity: 0.85;
}
.seat-item {
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.15s ease;
}
.seat-item:hover {
  background: var(--surface-2);
}
.seat-item.selected {
  background: var(--surface-3);
}
.si-name {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ink);
  font-weight: 600;
}
.si-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.si-meta .called {
  width: 13px;
  height: 13px;
  color: var(--ok);
  margin-left: auto;
}

#race-detail {
  scroll-margin-top: 72px;
}
/* Seat bar: phones only, and only while one seat is open (.desk.focus). */
.seat-nav {
  display: none;
}
.list-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px 8px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.desk-detail > * + * {
  margin-top: 20px;
}
#detail-top > * + *,
#detail-bottom > * + * {
  margin-top: 20px;
}
.detail-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  padding-left: 16px;
  border-left: 4px solid var(--c, var(--line));
}
.detail-head h1 {
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 680;
  letter-spacing: -0.035em;
  margin: 8px 0 6px;
}
.detail-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.cand-table,
.booths,
.mini-table {
  width: 100%;
  border-collapse: collapse;
}
.cand-table th,
.booths th,
.mini-table th {
  font-size: 11px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-align: left;
  padding: 0 8px 8px;
  border-bottom: 1px solid var(--line);
}
.cand-table th.r,
.booths th.r,
.mini-table th.r {
  text-align: right;
}
.cand-table td,
.booths td,
.mini-table td {
  padding: 11px 8px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.cand-table td:first-child,
.cand-table th:first-child,
.mini-table td:first-child,
.mini-table th:first-child {
  padding-left: 0;
}
.cand-table td:last-child,
.cand-table th:last-child {
  padding-right: 0;
}
.cand-table td.num {
  font-size: 14px;
}
.cand {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.cand .swatch {
  margin-top: 4px;
}
/* Candidate avatar: transparent head-and-shoulders art on a soft disc, ringed in party colour. */
.face {
  flex: none;
  display: inline-grid;
  place-items: center;
  box-sizing: border-box;
  width: var(--s, 32px);
  height: var(--s, 32px);
  border-radius: 50%;
  overflow: hidden;
  background: var(--line);
  box-shadow: 0 0 0 2px var(--c, var(--muted));
  vertical-align: middle;
}
/* No art yet: initials on a disc tinted with the party colour. */
.face-initials {
  background: color-mix(in srgb, var(--c, var(--muted)) 16%, var(--surface));
  color: var(--ink);
  font-weight: 700;
  font-size: calc(var(--s, 32px) * 0.38);
  line-height: 1;
  letter-spacing: 0.01em;
  user-select: none;
}
.face-initials > span {
  display: block;
}
/* Small faces get a thinner ring. */
.si-via .face,
.sx-face {
  box-shadow: 0 0 0 1.5px var(--c, var(--muted));
}
.sx-face {
  margin: -2px 4px 0 0;
}
.rr-lead .face {
  margin: 2px;
}
/* The single-seat takeover leads with the winner. */
.to-head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 10px 0 12px;
}
.to-head .to-title {
  margin: 0;
}
.to-face {
  box-shadow: 0 0 0 3px var(--c, var(--muted));
}
.to-seats li .face {
  margin: 2px;
}
.cand .face {
  margin: 1px 0 0 2px;
}
/* "· stood 2023" wraps as one piece, never "stood" / "2023". */
.cand-prior {
  white-space: nowrap;
}
.avatar {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* The Party Mode portrait rides along in every face; party-skin.css shows it. */
.face > .pm-face {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cand b {
  display: block;
  color: var(--ink);
  font-weight: 650;
}
.cand small {
  color: var(--muted);
  font-size: 12px;
}
.call-note {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: var(--r-inner);
  background: var(--surface-2);
  font-size: 13px;
  line-height: 1.5;
}
.call-note.projected {
  background: var(--ok-soft);
  color: var(--ink);
}
.call-note.too-close {
  background: var(--warn-soft);
  color: var(--ink);
}
.map-mount {
  position: relative;
  height: 420px;
  border-radius: var(--r-inner);
  overflow: hidden;
  background: var(--surface-2);
}
.map-mount.map-fallback {
  display: grid;
  place-items: center;
}
.map {
  width: 100%;
  height: 100%;
}
.map circle {
  cursor: pointer;
}
.map-key {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}
.map-key i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.k-in {
  background: var(--muted);
}
.k-out {
  border: 1.5px solid var(--muted);
  margin-left: 8px;
}
.map-tip {
  margin-top: 12px;
  font-size: 13px;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 38px;
}
.map-tip strong {
  color: var(--ink);
}
.gates {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.gate {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 8px;
  padding: 12px;
  border-radius: var(--r-inner);
  background: var(--surface-2);
  color: var(--muted);
}
.gate .icon {
  grid-row: span 2;
  margin-top: 2px;
}
.gate.ok .icon {
  color: var(--ok);
}
.gate b {
  color: var(--ink);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}
.gate span {
  font-size: 12px;
}
.strata {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px 20px;
  margin-top: 20px;
}
.stratum > div {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--ink);
  font-weight: 550;
}
.stratum small {
  display: block;
  margin-top: 5px;
  font-size: 11px;
  color: var(--muted);
}
.table-scroll {
  overflow: auto;
  max-height: 520px;
}
.booths td {
  font-size: 13px;
}
.booths tr.highlight td {
  background: var(--accent-soft);
}
.booth-button {
  text-align: left;
  color: var(--ink);
  font-weight: 550;
}
.booth-button:hover {
  text-decoration: underline;
}
.booths small {
  display: block;
}
.dot-in,
.dot-out {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  background: var(--ok);
}
.dot-out {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
}

/* --- Coalition lab and sweepstake ------------------------------------------ */

.lab {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  margin-bottom: 20px;
}
.lab > .card + .card {
  margin-top: 0;
}
.lab-row {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr) 118px 72px;
  gap: 14px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}
.lab-headrow {
  font-size: 11px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  padding-top: 0;
}
.lab-party {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--ink);
}
.lab-vote {
  display: flex;
  align-items: center;
  gap: 10px;
}
.lab-vote input[type="number"] {
  width: 66px;
  text-align: right;
}
.lab-other {
  color: var(--muted);
  border-bottom: 0;
}
.lab-other .num {
  color: var(--ink);
  font-weight: 650;
}
.stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface);
}
.stepper button {
  width: 34px;
  height: 36px;
  display: grid;
  place-items: center;
  color: var(--muted);
}
.stepper button:hover {
  background: var(--surface-3);
  color: var(--ink);
}
.stepper input {
  width: 46px;
  height: 36px;
  border: 0;
  border-radius: 0;
  text-align: center;
  font-weight: 650;
  padding: 0;
}
.toggle {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 24px;
  cursor: pointer;
}
.toggle input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}
.toggle span:first-of-type {
  position: absolute;
  inset: 0;
  border-radius: 99px;
  background: var(--line-strong);
  transition: background 0.2s;
}
.toggle span:first-of-type::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--on-accent);
  box-shadow: var(--shadow-control);
  transition: transform 0.2s;
}
.toggle input:checked + span {
  background: var(--ok);
}
.toggle input:checked + span::after {
  transform: translateX(16px);
}
.toggle input:focus-visible + span {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.presets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  font-size: 12px;
}
.presets .muted {
  margin-right: 4px;
}
.form-error {
  color: var(--bad);
  font-weight: 550;
  font-size: 13px;
  margin-top: 10px;
  min-height: 1em;
}
.form-error:empty {
  min-height: 0;
  margin: 0;
}
.lab-peek {
  display: none;
}
/* The declared side each party sits on: fixed, not a choice. */
.lab-side {
  justify-self: start;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.02em;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
}
.lab-side-left {
  color: var(--p-LAB, var(--ink));
}
.lab-side-right {
  color: var(--p-NAT, var(--ink));
}
.lab-result .r61 {
  margin: 4px 0 0;
}
.form-error.ok {
  color: var(--ok);
}
.lab-result .hemicycle {
  max-width: 400px;
}
.verdict {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 18px 0;
  padding: 14px 16px;
  border-radius: var(--r-inner);
  background: var(--surface-2);
}
.verdict > b {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ink);
  line-height: 1;
}
.verdict strong {
  display: block;
  color: var(--ink);
}
.verdict span {
  color: var(--muted);
  font-size: 13px;
}
.verdict.yes {
  background: var(--ok-soft);
}
.verdict.yes > b {
  color: var(--ok);
}
.seat-list-lab > div {
  display: grid;
  grid-template-columns: auto 1fr auto 40px;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.seat-list-lab span {
  color: var(--ink);
  font-weight: 600;
}
.seat-list-lab small {
  color: var(--muted);
  font-size: 12px;
}
.seat-list-lab b {
  text-align: right;
  font-size: 17px;
  color: var(--ink);
}
.seat-list-lab .out {
  opacity: 0.55;
}
.slider-label {
  display: flex;
  justify-content: space-between;
  margin: 18px 0 6px;
  font-weight: 550;
  color: var(--ink);
  font-size: 13px;
}
.mini-table {
  margin-top: 18px;
}
.mini-table td {
  font-size: 13px;
  color: var(--ink);
}
.mini-table small {
  font-weight: 650;
}
.prose p {
  margin-top: 12px;
  line-height: 1.6;
}
.prose h2 {
  margin-top: 8px;
}
.prose h3 {
  margin-top: 18px;
}

.sweep-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-weight: 600;
  color: var(--ink);
  font-size: 13px;
}
.field input {
  height: 44px;
  font-size: 15px;
}
.sweep-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.sweep-party {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 10px 10px 10px 14px;
  border-radius: var(--r-inner);
  background: var(--surface-2);
  border-left: 3px solid var(--c);
}
.sweep-party > span:first-child {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--ink);
}
.sweep-party .swatch {
  display: none;
}
.sweep-total {
  font-size: 12px;
  margin-top: -6px;
}
.segmented {
  display: flex;
  border: 0;
  padding: 0;
  margin: 0;
  gap: 6px;
  flex-wrap: wrap;
}
.segmented legend {
  width: 100%;
  font-weight: 600;
  color: var(--ink);
  font-size: 13px;
  margin-bottom: 6px;
}
.segmented label {
  flex: 1;
  position: relative;
}
.segmented input {
  position: absolute;
  opacity: 0;
}
.segmented span {
  display: grid;
  place-items: center;
  height: 40px;
  border-radius: 8px;
  border: 1px solid var(--line-strong);
  font-weight: 600;
  cursor: pointer;
}
.segmented input:checked + span {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.segmented input:focus-visible + span {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.board {
  list-style: none;
  margin: 0;
  padding: 0;
}
.board li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto 56px;
  gap: 12px;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.board li.mine {
  background: var(--accent-soft);
  margin: 0 -10px;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: var(--r-sm);
}
.b-rank {
  font-weight: 700;
  color: var(--muted);
  font-size: 15px;
}
.board li:first-child .b-rank {
  color: var(--accent);
}
.b-name b {
  display: block;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.b-name small {
  color: var(--muted);
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.b-name .ok {
  color: var(--ok);
  width: 13px;
  height: 13px;
}
.b-picks {
  display: flex;
  gap: 8px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  font-weight: 600;
}
.b-picks span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.b-picks i {
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--c);
}
.b-score {
  text-align: right;
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.b-score small {
  font-size: 10px;
  color: var(--muted);
  font-weight: 600;
  margin-top: 2px;
}

/* --- Method ---------------------------------------------------------------- */

.audit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}
.audit-grid > .card + .card {
  margin-top: 0;
}
.audit-num {
  display: block;
  font-size: 40px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.03em;
  margin: 10px 0 8px;
}
.audit-grid p + p {
  margin-top: 10px;
  font-size: 13px;
}
.readiness {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
}
.readiness li {
  display: flex;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}
.readiness li.ok .icon {
  color: var(--ok);
}
.readiness b {
  display: block;
  color: var(--ink);
}

/* --- Help ------------------------------------------------------------------ */

.help {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  background: var(--scrim);
  padding: 16px;
}
.help[hidden] {
  display: none;
}
.help-card {
  width: min(420px, 100%);
  background: var(--surface);
  border-radius: var(--r-card);
  padding: 20px 22px;
  box-shadow: var(--shadow-lift);
}
.help dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px 16px;
  margin: 0;
}
.help dd {
  margin: 0;
  color: var(--body);
}
kbd {
  display: inline-block;
  min-width: 26px;
  padding: 2px 7px;
  border-radius: 6px;
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  font: 600 12px var(--font);
  text-align: center;
  color: var(--ink);
}

/* --- Tab bar (phones) ------------------------------------------------------ */

.tabbar {
  display: none;
}

@media (max-width: 1100px) {
  .nav button {
    padding: 0 9px;
  }
  .clock {
    display: none;
  }
  .hero {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .hero-side {
    grid-template-columns: 1.4fr 1fr;
  }
  .grid-main,
  .lab {
    grid-template-columns: 1fr;
  }
  .grid-main > .card + .card,
  .lab > .card + .card {
    margin-top: 0;
  }
}

@media (max-width: 860px) {
  body {
    padding-bottom: calc(64px + env(safe-area-inset-bottom));
  }
  .masthead {
    padding: 0 16px;
    height: 54px;
  }
  .nav {
    display: none;
  }
  #enter-wall span {
    display: none;
  }
  #enter-wall {
    padding: 0 9px;
  }
  .tabbar {
    display: flex;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 40;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--line);
  }
  .tabbar button {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 6px 0;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
  }
  .tabbar .icon {
    width: 20px;
    height: 20px;
  }
  .tabbar button.on {
    color: var(--accent);
  }
  .controlbar-inner {
    padding: 8px 16px;
    flex-wrap: wrap;
    gap: 8px 12px;
  }
  .source-note {
    flex-basis: 100%;
    order: 3;
    font-size: 12px;
  }
  .source-note span {
    white-space: normal;
  }
  .rehearsal {
    flex: 1;
  }
  .scrub {
    flex: 1;
    width: auto;
  }
  .rehearsal .select-wrap {
    display: none;
  }
  main {
    padding: 20px 16px 40px;
  }
  .card {
    padding: 18px 16px;
  }
  .hero-side {
    grid-template-columns: 1fr;
  }
  .headline {
    font-size: 34px;
  }
  .hero-sub {
    font-size: 15px;
  }
  .r61-bloc b {
    font-size: 34px;
  }
  .r61-bloc span {
    font-size: 11px;
  }
  .r61-bar {
    height: 30px;
  }
  .party-head,
  .party-row {
    grid-template-columns: minmax(96px, 1fr) minmax(40px, 1fr) 52px 40px 34px;
    gap: 8px;
  }
  .pr-share {
    font-size: 14px;
  }
  .pr-seats {
    font-size: 17px;
  }
  .party-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  .pr-name {
    flex: 1 1 140px;
    flex-wrap: wrap;
  }
  .pr-bar {
    flex: 1 1 120px;
    order: 3;
  }
  .pr-seats small {
    display: inline;
  }
  .tag-edge {
    display: inline-flex;
  }
  .race-list-head {
    display: none;
  }
  .race-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 12px;
  }
  .rr-lead {
    grid-column: 1;
  }
  .rr-margin {
    grid-column: 2;
    grid-row: 1;
  }
  .rr-tags {
    grid-column: 2;
    grid-row: 2;
  }
  .desk {
    grid-template-columns: minmax(0, 1fr);
  }
  .desk-list {
    position: static;
    max-height: none;
  }
  .desk.focus .desk-list {
    display: none;
  }
  .desk.focus .seat-nav {
    position: sticky;
    top: 54px;
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 4px;
    margin: -8px -16px 0;
    padding: 6px 12px 6px 6px;
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: saturate(1.6) blur(14px);
    -webkit-backdrop-filter: saturate(1.6) blur(14px);
    border-bottom: 1px solid var(--line);
  }
  .seat-back {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    min-height: 40px;
    padding: 0 10px 0 4px;
    border-radius: 8px;
    font-weight: 650;
    color: var(--accent);
  }
  .seat-pos {
    margin-left: auto;
    margin-right: 4px;
    font-size: 12px;
    color: var(--muted);
  }
  .seat-nav .icon-button:disabled {
    opacity: 0.35;
  }
  /* Four actions do not fit a phone row; Share keeps just its icon. */
  .detail-actions .share-label {
    display: none;
  }
  .seat-list {
    max-height: 300px;
  }
  .gates {
    grid-template-columns: 1fr 1fr;
  }
  .flip-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .strata {
    grid-template-columns: 1fr 1fr;
  }
  .map-mount {
    height: 320px;
  }
  .lab-row {
    grid-template-columns: 1fr auto 44px;
    gap: 8px 10px;
  }
  .lab-headrow {
    display: none;
  }
  .lab-vote {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .lab-other {
    grid-template-columns: 1fr auto;
  }
  .lab-other span:nth-child(3) {
    display: none;
  }
  .sweep-grid {
    grid-template-columns: 1fr;
  }
  .b-picks {
    display: none;
  }
  .audit-grid {
    grid-template-columns: 1fr;
  }
  .status-pill {
    display: inline-flex;
    font-size: 11px;
  }
}

/* ===========================================================================
   The TV wall

   Always dark, whatever the app theme: a dim party room is the use case.
   Sized in viewport units so a
   laptop on HDMI and a 65-inch TV both fill edge to edge with no scrolling.
   =========================================================================== */

.wall {
  --u: min(1vw, 1.78vh);
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  grid-template-rows: auto 3px minmax(0, 1fr) auto;
  grid-template-columns: minmax(0, 1fr);
  background: var(--bg);
  color: var(--body);
  overflow: hidden;
  cursor: none;
}
.wall[hidden] {
  display: none;
}
.wall:hover {
  cursor: default;
}
body.walling {
  overflow: hidden;
}
.w-top {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 2);
  padding: calc(var(--u) * 1.6) calc(var(--u) * 3);
}
.w-brand {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 0.9);
  font-weight: 650;
  font-size: calc(var(--u) * 1.5);
  color: var(--ink);
  letter-spacing: -0.01em;
}
.w-brand .brand-mark {
  width: calc(var(--u) * 2.6);
  height: calc(var(--u) * 2.6);
  padding: calc(var(--u) * 0.6) calc(var(--u) * 0.5);
  background: var(--ink);
}
.w-status {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 0.7);
  font-size: calc(var(--u) * 1.25);
  color: var(--muted);
  font-weight: 550;
}
.status-dot {
  width: calc(var(--u) * 0.8);
  height: calc(var(--u) * 0.8);
  border-radius: 50%;
  background: var(--warn);
}
.status-dot.live {
  background: var(--accent);
}
.w-clock {
  margin-left: auto;
  font-size: calc(var(--u) * 2);
  font-weight: 700;
  color: var(--ink);
}
.w-exit {
  width: calc(var(--u) * 3);
  height: calc(var(--u) * 3);
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--muted);
  opacity: 0;
  transition: opacity 0.2s;
}
.wall:hover .w-exit {
  opacity: 1;
}
.w-exit .icon {
  width: calc(var(--u) * 1.6);
  height: calc(var(--u) * 1.6);
}
.w-progress {
  background: var(--line);
}
.w-progress span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
}
@keyframes wprogress {
  to {
    width: 100%;
  }
}
.w-stage {
  position: relative;
  min-height: 0;
  overflow: hidden;
  padding: calc(var(--u) * 2.4) calc(var(--u) * 3) calc(var(--u) * 1.6);
}
.w-scene {
  height: 100%;
  opacity: 1;
  transition: opacity 0.25s ease;
}
.w-scene.exit {
  opacity: 0;
}
.w-scene.enter {
  animation: wenter 0.6s ease-out;
}
@keyframes wenter {
  from {
    opacity: 0;
  }
}
.w-kicker {
  font-size: calc(var(--u) * 1.2);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.w-headline {
  font-family: var(--font-display);
  font-size: calc(var(--u) * 4.2);
  font-weight: 640;
  letter-spacing: -0.015em;
  line-height: 1.02;
  margin: calc(var(--u) * 1) 0 calc(var(--u) * 1.1);
  text-wrap: balance;
}
.w-sub {
  font-size: calc(var(--u) * 1.6);
  color: var(--muted);
  max-width: 60ch;
}
.w-title {
  font-size: calc(var(--u) * 3.4);
  font-weight: 700;
  letter-spacing: -0.035em;
  margin-bottom: calc(var(--u) * 2);
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 1.2);
}
.w-title .num {
  color: var(--muted);
}

.w-national {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  grid-template-rows: minmax(0, 1fr);
  gap: calc(var(--u) * 4);
  height: 100%;
}
.w-left {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.wall .r61 {
  margin-top: calc(var(--u) * 2.4);
}
.wall .r61-bloc b {
  font-size: calc(var(--u) * 5);
}
.wall .r61-bloc span {
  font-size: calc(var(--u) * 1.15);
}
.wall .r61-goal b {
  font-size: calc(var(--u) * 2.2);
}
.wall .r61-goal span {
  font-size: calc(var(--u) * 0.95);
}
.wall .r61-bar {
  height: calc(var(--u) * 3.2);
  border-radius: calc(var(--u) * 0.7);
}
.wall .r61-bar > span {
  font-size: calc(var(--u) * 1.4);
}
.wall .r61-bloc.wins b::after {
  width: calc(var(--u) * 1);
  height: calc(var(--u) * 1);
}
.w-chamber {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-top: calc(var(--u) * 2);
}
.w-chamber .hemicycle {
  max-width: none;
  max-height: 100%;
  width: auto;
  height: 100%;
}
.w-right {
  display: flex;
  flex-direction: column;
  justify-content: safe center;
  min-height: 0;
  overflow: hidden;
}
.w-colhead {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: calc(var(--u) * 2);
  font-size: calc(var(--u) * 1);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--muted);
  padding-bottom: calc(var(--u) * 0.8);
}
.w-colhead span:nth-child(2) {
  margin-left: auto;
}
.wall .party-rows.compact .party-row {
  grid-template-columns: minmax(0, 1fr) calc(var(--u) * 9) calc(var(--u) * 6);
  grid-template-areas: "name share seats" "bar bar seats";
  gap: calc(var(--u) * 0.4) calc(var(--u) * 2);
  padding: calc(var(--u) * 0.75) 0;
}
.wall .party-rows.compact .pr-name {
  grid-area: name;
  font-size: calc(var(--u) * 1.7);
  font-weight: 700;
  gap: calc(var(--u) * 0.9);
}
.wall .party-rows.compact .swatch {
  width: calc(var(--u) * 1.1);
  height: calc(var(--u) * 1.1);
  border-radius: calc(var(--u) * 0.25);
}
.wall .party-rows.compact .pr-bar {
  grid-area: bar;
  height: calc(var(--u) * 0.8);
}
.wall .party-rows.compact .pr-share {
  grid-area: share;
  font-size: calc(var(--u) * 2);
  font-weight: 650;
}
.wall .party-rows.compact .pr-delta {
  display: none;
}
.wall .party-rows.compact .pr-seats {
  grid-area: seats;
  font-size: calc(var(--u) * 3.4);
  align-self: center;
}
.wall .tag {
  height: calc(var(--u) * 2);
  padding: 0 calc(var(--u) * 0.8);
  font-size: calc(var(--u) * 1);
}
.wall .tag-edge {
  font-size: calc(var(--u) * 0.9);
}

/* --- Boards: closest seats, seats changing hands, sweepstake --------------- */

.w-board {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.w-board-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(var(--u) * 2);
  margin-bottom: calc(var(--u) * 1.4);
}
.w-board-head .w-title {
  margin: 0;
  font-size: calc(var(--u) * 2.8);
}
.w-board-note {
  font-size: calc(var(--u) * 1.15);
  color: var(--muted);
  font-weight: 550;
  text-align: right;
}
.w-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: calc(var(--u) * 1.1);
  flex: 1;
  min-height: 0;
}
.w-seat {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: calc(var(--u) * 0.35);
  padding: calc(var(--u) * 1) calc(var(--u) * 1.3) calc(var(--u) * 1.1);
  border-radius: calc(var(--u) * 0.9);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  overflow: hidden;
  min-width: 0;
  min-height: 0;
}
.w-seat::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--u) * 0.25);
  background: var(--c);
}
.w-flip::before {
  background: linear-gradient(180deg, var(--from) 0 45%, var(--c) 55% 100%);
}
.w-seat > * {
  flex: none;
}
.ws-name {
  display: block;
  font-size: calc(var(--u) * 1.55);
  font-weight: 650;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ws-lead,
.wf-parties {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 0.7);
  min-width: 0;
}
.ws-face {
  width: calc(var(--u) * 3);
  height: calc(var(--u) * 3);
  margin: 2px;
}
.ws-face.face-initials {
  font-size: calc(var(--u) * 1.1);
}
.ws-run .ws-run-who {
  display: flex;
  align-items: center;
  overflow: visible;
  min-width: 0;
}
.ws-run-who > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.ws-run-face {
  width: calc(var(--u) * 1.9);
  height: calc(var(--u) * 1.9);
  margin: 0 calc(var(--u) * 0.6) 0 2px;
  box-shadow: 0 0 0 1.5px var(--c, var(--muted));
}
.ws-run-face.face-initials {
  font-size: calc(var(--u) * 0.75);
}
.ws-lead .swatch {
  width: calc(var(--u) * 1);
  height: calc(var(--u) * 1);
  border-radius: calc(var(--u) * 0.2);
}
.ws-who {
  font-size: calc(var(--u) * 1.8);
  font-weight: 650;
  color: var(--ink);
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.ws-who small,
.ws-run small {
  font-size: 0.62em;
  font-weight: 650;
  color: var(--muted);
  margin-left: 0.4em;
  letter-spacing: 0.02em;
}
.ws-lead em,
.wf-parties em {
  margin-left: auto;
  font-style: normal;
  font-size: calc(var(--u) * 2.4);
  font-weight: 700;
  color: var(--c);
  letter-spacing: -0.03em;
  line-height: 1;
  white-space: nowrap;
}
.ws-lead em small,
.wf-parties em small {
  font-size: 0.42em;
  font-weight: 650;
  color: var(--muted);
  margin-left: 0.15em;
  letter-spacing: 0;
}
.w-h2h {
  position: relative;
  display: flex;
  height: calc(var(--u) * 0.6);
  border-radius: 99px;
  overflow: hidden;
  background: var(--surface-3);
}
.w-h2h.big {
  height: calc(var(--u) * 1.6);
  border-radius: calc(var(--u) * 0.4);
}
.w-h2h i {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: var(--bg);
}
.ws-run {
  display: flex;
  justify-content: space-between;
  gap: calc(var(--u) * 0.8);
  font-size: calc(var(--u) * 1.15);
  color: var(--body);
  white-space: nowrap;
  min-width: 0;
}
.ws-run > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.ws-run .num {
  color: var(--muted);
}
.ws-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--u) * 0.6);
  font-size: calc(var(--u) * 1);
  color: var(--muted);
  white-space: nowrap;
}
.ws-tags {
  display: flex;
  gap: calc(var(--u) * 0.4);
  min-width: 0;
  overflow: hidden;
}
.ws-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: calc(var(--u) * 0.25);
  background: var(--c);
  opacity: 0.55;
}
.wf-parties .icon {
  width: calc(var(--u) * 1.6);
  height: calc(var(--u) * 1.6);
  color: var(--muted);
  flex: none;
}
.wf-chip {
  padding: calc(var(--u) * 0.15) calc(var(--u) * 0.6);
  border-radius: calc(var(--u) * 0.35);
  color: color-mix(in srgb, var(--c) 78%, var(--ink));
  font-size: calc(var(--u) * 1.5);
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* --- Seat deep dive ---------------------------------------------------------- */

.w-dive {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: calc(var(--u) * 1.2);
  height: 100%;
}
.w-dive-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: calc(var(--u) * 2);
  padding-left: calc(var(--u) * 1.4);
  border-left: calc(var(--u) * 0.3) solid var(--c);
}
.w-dive-head > div:first-child {
  min-width: 0;
}
.w-dive-head h1 {
  font-size: calc(var(--u) * 4.4);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  margin: calc(var(--u) * 0.5) 0 calc(var(--u) * 0.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.w-dive-prior {
  font-size: calc(var(--u) * 1.4);
  color: var(--muted);
}
.w-dive-tags {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 0.6);
  flex: none;
  padding-bottom: calc(var(--u) * 0.4);
}
.w-dive .tag {
  height: calc(var(--u) * 2.4);
  padding: 0 calc(var(--u) * 1);
  font-size: calc(var(--u) * 1.2);
}
.w-dive-pos {
  font-size: calc(var(--u) * 1.1);
  color: var(--muted);
  font-weight: 650;
  margin-left: calc(var(--u) * 0.6);
}
.w-dive-body {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: calc(var(--u) * 3);
  min-height: 0;
}
.w-dive-left,
.w-dive-right {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 1.2);
  min-height: 0;
  min-width: 0;
}
.w-block-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: calc(var(--u) * 1);
  font-size: calc(var(--u) * 1);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  padding-bottom: calc(var(--u) * 0.5);
  border-bottom: 1px solid var(--line);
}
.w-block-head b {
  font-size: calc(var(--u) * 1.5);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ink);
}
.w-colnames {
  display: grid;
  grid-template-columns: calc(var(--u) * 8) calc(var(--u) * 9.5);
  text-align: right;
}
.w-dive-cands {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  gap: calc(var(--u) * 0.5);
  flex: 1 0 auto;
}
.w-dive-left .w-swing {
  margin-top: auto;
}
.w-dc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(var(--u) * 8) calc(var(--u) * 9.5);
  grid-template-areas: "name counted model" "bar counted model";
  align-items: center;
  column-gap: 0;
  row-gap: calc(var(--u) * 0.45);
}
.w-dc-name {
  grid-area: name;
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 1);
  min-width: 0;
  white-space: nowrap;
}
.w-dc-name b {
  font-size: calc(var(--u) * 1.7);
  font-weight: 650;
  color: var(--ink);
  letter-spacing: -0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
}
.w-dc-face {
  flex: none;
  align-self: center;
  width: calc(var(--u) * 3.4);
  height: calc(var(--u) * 3.4);
  box-shadow: 0 0 0 2px var(--c);
}
.w-dc.first .w-dc-face {
  width: calc(var(--u) * 4.2);
  height: calc(var(--u) * 4.2);
}
.w-dc-face.face-initials {
  font-size: calc(var(--u) * 1.3);
}
.w-dc.first .w-dc-face.face-initials {
  font-size: calc(var(--u) * 1.6);
}
.w-dc.first .w-dc-name b {
  font-size: calc(var(--u) * 2);
}
.w-dc-name > span {
  font-size: calc(var(--u) * 1.1);
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
}
.w-dc-bar {
  grid-area: bar;
  position: relative;
  height: calc(var(--u) * 1);
  border-radius: calc(var(--u) * 0.3);
  background: var(--surface-3);
}
.w-dc-bar span {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
  background: var(--c);
  transform-origin: left;
}
.w-scene.enter .w-dc-bar span {
  animation: grow 1s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.w-dc-bar i {
  position: absolute;
  top: calc(var(--u) * -0.3);
  bottom: calc(var(--u) * -0.3);
  width: 3px;
  margin-left: -1.5px;
  background: var(--ink);
  border-radius: 2px;
}
@keyframes grow {
  from {
    transform: scaleX(0);
  }
}
.w-dc-counted {
  grid-area: counted;
  text-align: right;
  font-size: calc(var(--u) * 1.6);
  font-weight: 650;
  color: var(--muted);
}
.w-dc-model {
  grid-area: model;
  text-align: right;
  font-size: calc(var(--u) * 2.5);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.03em;
}
.w-dc:not(.first) .w-dc-model {
  font-size: calc(var(--u) * 1.9);
}

.w-swing {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 0.55);
  flex: none;
}
.w-swing-track {
  position: relative;
  height: calc(var(--u) * 2.4);
  margin: calc(var(--u) * 1.6) 0 calc(var(--u) * 1.6);
  display: flex;
}
.w-swing-half {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  padding: 0 calc(var(--u) * 0.8);
  background: color-mix(in srgb, var(--c) 22%, transparent);
}
.w-swing-half.own {
  justify-content: flex-end;
}
.w-swing-half em {
  font-style: normal;
  font-size: calc(var(--u) * 0.95);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c) 70%, var(--ink));
  opacity: 0.8;
}
.w-swing-half.rival {
  --c: var(--rival);
  border-radius: calc(var(--u) * 0.4) 0 0 calc(var(--u) * 0.4);
}
.w-swing-half.own {
  --c: var(--own);
  border-radius: 0 calc(var(--u) * 0.4) calc(var(--u) * 0.4) 0;
}
.w-swing-mid {
  position: absolute;
  left: 50%;
  top: calc(var(--u) * -0.4);
  bottom: calc(var(--u) * -0.4);
  width: 2px;
  margin-left: -1px;
  background: var(--muted);
}
.w-swing-band {
  position: absolute;
  top: calc(var(--u) * 0.8);
  height: calc(var(--u) * 0.6);
  background: var(--ink);
  opacity: 0.35;
  border-radius: 99px;
}
.w-swing-mark {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
}
.w-swing-mark i {
  position: absolute;
  top: 50%;
  left: 0;
  width: calc(var(--u) * 1.5);
  height: calc(var(--u) * 1.5);
  margin: calc(var(--u) * -0.75) 0 0 calc(var(--u) * -0.75);
  border-radius: 50%;
  border: calc(var(--u) * 0.25) solid var(--ink);
  background: var(--bg);
}
.w-swing-mark.now i {
  background: var(--ink);
  width: calc(var(--u) * 1.9);
  height: calc(var(--u) * 1.9);
  margin: calc(var(--u) * -0.95) 0 0 calc(var(--u) * -0.95);
  box-shadow: 0 0 0 calc(var(--u) * 0.3) var(--bg);
}
.w-swing-mark em {
  position: absolute;
  bottom: calc(100% + var(--u) * 0.2);
  left: 0;
  transform: translateX(-50%);
  font-style: normal;
  font-size: calc(var(--u) * 1);
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.w-swing-mark.now em {
  color: var(--ink);
}
.w-swing-mark.edge-r em {
  transform: translateX(calc(-100% + var(--u) * 1));
}
.w-swing-mark.edge-l em {
  transform: translateX(calc(var(--u) * -1));
}
.w-swing-mark.low em {
  bottom: auto;
  top: calc(100% + var(--u) * 0.2);
}
.w-swing-mark em {
  font-variant-numeric: tabular-nums;
}
.w-swing-scale {
  display: flex;
  justify-content: space-between;
  font-size: calc(var(--u) * 1);
  color: var(--muted);
  font-weight: 600;
}
.w-swing-note {
  font-size: calc(var(--u) * 1.1);
  color: var(--muted);
}

.w-plot-key {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 0.5);
  letter-spacing: 0.04em;
}
.w-plot-key i {
  width: calc(var(--u) * 0.8);
  height: calc(var(--u) * 0.8);
  border-radius: 50%;
  background: var(--body);
}
.w-plot-key i.out {
  background: transparent;
  border: 2px solid var(--body);
  margin-left: calc(var(--u) * 0.6);
}
.w-plot {
  flex: 1;
  min-height: 0;
  position: relative;
  border-radius: calc(var(--u) * 0.8);
  background: var(--surface);
  border: 1px solid var(--line);
  overflow: hidden;
}
.w-plot svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.w-plot circle.waiting {
  fill: none;
  stroke-width: 1.6;
}
.w-plot-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: calc(var(--u) * 1.2);
}
.w-dive-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--u) * 1);
}
.w-dive-stats div {
  display: flex;
  flex-direction: column;
  padding: calc(var(--u) * 0.6) calc(var(--u) * 1);
  border-radius: calc(var(--u) * 0.7);
  background: var(--surface);
  border: 1px solid var(--line);
}
.w-dive-stats b {
  font-size: calc(var(--u) * 2);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.w-dive-stats small {
  font-size: 0.6em;
  color: var(--muted);
  font-weight: 650;
}
.w-dive-stats span {
  font-size: calc(var(--u) * 1);
  color: var(--muted);
}
.w-here {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 0.35);
}
.w-here-row {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr) calc(var(--u) * 5) calc(var(--u) * 5)
    calc(var(--u) * 5);
  align-items: center;
  font-size: calc(var(--u) * 1.3);
  color: var(--ink);
  font-weight: 600;
}
.w-here-row > span:first-child {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 0.6);
  white-space: nowrap;
  overflow: hidden;
}
.w-here-row .swatch {
  width: calc(var(--u) * 0.8);
  height: calc(var(--u) * 0.8);
}
.w-here-row > :nth-child(n + 2) {
  text-align: right;
}
.w-here-row .up {
  color: var(--ok);
}
.w-here-row .down {
  color: var(--bad);
}
.w-next {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 0.6);
  margin-left: auto;
  font-size: calc(var(--u) * 1.25);
  color: var(--ink);
  font-weight: 650;
  white-space: nowrap;
}
.w-next span {
  font-size: 0.8em;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  font-weight: 700;
}
.w-next + .w-clock {
  margin-left: calc(var(--u) * 1.4);
}
.wall-board li {
  grid-template-columns: calc(var(--u) * 4) minmax(0, 1fr) auto calc(
      var(--u) * 8
    );
  gap: calc(var(--u) * 2);
  padding: calc(var(--u) * 1.1) 0;
}
.wall-board .b-rank {
  font-size: calc(var(--u) * 2.4);
}
.wall-board .b-name b {
  font-size: calc(var(--u) * 2.2);
}
.wall-board .b-name small {
  font-size: calc(var(--u) * 1.2);
}
.wall-board .b-picks {
  display: flex;
  font-size: calc(var(--u) * 1.5);
  gap: calc(var(--u) * 1.4);
}
.wall-board .b-picks i {
  width: calc(var(--u) * 0.8);
  height: calc(var(--u) * 0.8);
}
.wall-board .b-score {
  font-size: calc(var(--u) * 3);
}
.wall-board .b-score small {
  font-size: calc(var(--u) * 1);
}
.wall .countdown span {
  min-width: calc(var(--u) * 9);
  font-size: calc(var(--u) * 1);
}
.wall .countdown b {
  font-size: calc(var(--u) * 4);
}
.wall .empty {
  font-size: calc(var(--u) * 1.6);
}

.w-foot {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1.4);
  padding: calc(var(--u) * 1) calc(var(--u) * 3);
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.w-ticker-label {
  flex: none;
  padding: calc(var(--u) * 0.45) calc(var(--u) * 1);
  border-radius: calc(var(--u) * 0.4);
  background: var(--surface-3);
  color: var(--ink);
  font-weight: 700;
  font-size: calc(var(--u) * 1.05);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.w-ticker {
  position: relative;
  flex: 1;
  min-width: 0;
  height: calc(var(--u) * 2.8);
  overflow: hidden;
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 3%,
    #000 97%,
    transparent
  );
}
.w-ticker-track {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  white-space: nowrap;
}
.w-wire-item {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 0.8);
  padding-right: calc(var(--u) * 2.2);
  margin-right: calc(var(--u) * 2.2);
  border-right: 1px solid var(--line-strong);
  font-size: calc(var(--u) * 1.45);
  color: var(--ink);
  font-weight: 550;
  flex: none;
}
.w-wire-kind {
  padding: calc(var(--u) * 0.2) calc(var(--u) * 0.6);
  border-radius: calc(var(--u) * 0.3);
  font-size: calc(var(--u) * 0.85);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c, var(--muted));
  box-shadow: inset 0 0 0 1.5px var(--c, var(--line-strong));
}
.w-wire-item.fresh .w-wire-kind {
  background: color-mix(in srgb, var(--c, var(--accent)) 16%, var(--surface));
}
.w-dots {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 0.6);
}
.w-dots i {
  width: calc(var(--u) * 0.7);
  height: calc(var(--u) * 0.7);
  border-radius: 50%;
  background: var(--line-strong);
}
.w-dots i.seat {
  border-radius: calc(var(--u) * 0.15);
  width: calc(var(--u) * 0.55);
  height: calc(var(--u) * 0.55);
}
.w-dots i.on {
  background: var(--ink);
}
.w-paused {
  font-size: calc(var(--u) * 1);
  color: var(--warn);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-left: calc(var(--u) * 0.6);
}

@media (orientation: portrait) {
  .w-national {
    grid-template-columns: 1fr;
  }
  .w-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- Party-night layer ------------------------------------------------------ */

.pulse {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 20px;
}
.pulse-cell {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 14px 16px;
  box-shadow: var(--shadow);
}
.pulse-cell .icon {
  width: 20px;
  height: 20px;
  color: var(--accent);
  margin-top: 2px;
}
.pulse-cell b {
  display: block;
  font-size: 22px;
  line-height: 1.05;
  color: var(--ink);
}
.pulse-cell span {
  display: block;
  font-weight: 600;
  color: var(--ink);
  font-size: 13px;
}
.pulse-cell small {
  display: block;
  color: var(--muted);
  font-size: 12px;
}
.poll-hint {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 14px;
}
.poll-choices {
  display: grid;
  gap: 8px;
}
.poll-choice {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  overflow: hidden;
  text-align: left;
  font-weight: 600;
  color: var(--ink);
  isolation: isolate;
}
.poll-choice .poll-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--c);
  opacity: 0.22;
  z-index: -1;
  transition: width 0.45s ease;
}
.poll-choice.mine {
  border-color: var(--c);
  box-shadow: inset 0 0 0 1px var(--c);
}
.poll-meta {
  color: var(--muted);
  font-size: 12px;
  margin-top: 12px;
}
.toasts {
  position: fixed;
  left: 50%;
  bottom: calc(18px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 200;
  display: grid;
  gap: 8px;
  width: min(520px, calc(100vw - 24px));
  pointer-events: none;
}
.toast {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--ink);
  color: var(--bg);
  border-radius: var(--r);
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.4;
  box-shadow: var(--shadow-lift);
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}
.toast.in {
  opacity: 1;
  transform: none;
}
.toast .icon {
  color: var(--accent);
  margin-top: 1px;
}
.w-room-q {
  font-family: var(--font-display);
  font-size: calc(var(--u) * 3.4);
  font-weight: 640;
  line-height: 1.05;
  color: var(--ink);
  margin: calc(var(--u) * 2) 0;
}
.w-room-bars {
  display: grid;
  gap: calc(var(--u) * 1.4);
}
.w-room-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2fr auto;
  align-items: center;
  gap: calc(var(--u) * 1.5);
  font-size: calc(var(--u) * 1.5);
}
.w-room-track {
  height: calc(var(--u) * 2.2);
  background: var(--surface-3);
  border-radius: 999px;
  overflow: hidden;
}
.w-room-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  transition: width 0.5s ease;
}
.w-room-meta {
  color: var(--muted);
  font-size: calc(var(--u) * 1.3);
  margin-top: calc(var(--u) * 2);
}
@media (max-width: 860px) {
  .pulse {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .toasts {
    bottom: calc(76px + env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .button:active,
  .chip:active,
  .icon-button:active,
  .race-row:active,
  .seat-item:active,
  .flip:active,
  .w-scene.enter {
    transform: none !important;
    animation: none !important;
  }
  .w-wire-item {
    border-right: 0;
  }
}

/* --- Small phones ---------------------------------------------------------- */

@media (max-width: 600px) {
  .card-head {
    flex-wrap: wrap;
    row-gap: 6px;
  }
  .card-head > .kicker {
    white-space: nowrap;
  }
  .map-key {
    flex-wrap: wrap;
    white-space: nowrap;
  }
  .stratum > div {
    gap: 8px;
    align-items: baseline;
  }
  .stratum b {
    white-space: nowrap;
  }
  .booths {
    min-width: 540px;
  }
  .booths th {
    white-space: nowrap;
  }
  .booths td:first-child {
    min-width: 190px;
  }
  /* The column header carries meaning the phone layout otherwise loses:
     which number is electorates, which switch is "in the coalition". */
  .lab-headrow {
    display: grid;
    padding-bottom: 6px;
  }
  .lab-headrow span:nth-child(2) {
    display: none;
  }
  .lab-headrow span:nth-child(3) {
    text-align: center;
  }
  .lab-headrow span:nth-child(4) {
    text-align: right;
  }
  .lab-row {
    grid-template-columns: 1fr auto 60px;
  }
  .lab-row .lab-side {
    justify-self: end;
  }
  .lab-peek:not(:empty) {
    position: sticky;
    top: 58px;
    z-index: 5;
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: -4px 0 12px;
    padding: 10px 14px;
    border-radius: var(--r-inner);
    background: var(--surface-2);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    font-size: 13px;
    color: var(--ink);
  }
  .lab-peek b {
    font-size: 18px;
    font-weight: 750;
    letter-spacing: -0.02em;
  }
  .lab-peek em.yes {
    color: var(--ok);
  }
  .lab-peek em.no {
    color: var(--bad);
  }
  .lab-peek small {
    font-size: 12px;
    color: var(--muted);
    font-weight: 550;
  }
  .lab-peek span {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .lab-peek em {
    font-style: normal;
    color: var(--muted);
    white-space: nowrap;
  }
  /* One swipeable row of filters instead of three stacked rows of pills. */
  .desk-list .chips,
  .presets {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: -16px;
    padding-inline: 16px;
    scroll-padding-inline: 16px;
  }
  .desk-list .chips::-webkit-scrollbar,
  .presets::-webkit-scrollbar {
    display: none;
  }
  .desk-list .chips > *,
  .presets > * {
    flex: none;
  }
  .party-head {
    display: flex;
    gap: 8px;
    white-space: nowrap;
  }
  .party-head span:first-child {
    flex: 1;
  }
  .party-head span:nth-child(2) {
    display: none;
  }
  .party-row {
    gap: 6px 8px;
  }
  .pr-name {
    flex: 1 1 0;
    min-width: 0;
  }
  .party-head span:nth-child(3),
  .pr-share {
    width: 64px;
    flex: none;
  }
  .party-head span:nth-child(4),
  .pr-delta {
    width: 56px;
    flex: none;
  }
  .party-head span:nth-child(5),
  .pr-seats {
    width: 44px;
    flex: none;
  }
  .pr-bar {
    flex-basis: 100%;
  }
  /* Rehearsal caption: one line, not three, on every screen of every view. */
  .source-note {
    display: flex;
    min-width: 0;
  }
  .source-note strong {
    display: none;
  }
  .sort button {
    min-height: 32px;
    padding: 4px 10px;
  }
  .masthead {
    gap: 12px;
  }
  .masthead-tools {
    gap: 6px;
  }
  .cand-table th:nth-child(2),
  .cand-table td:nth-child(2) {
    display: none;
  }
  .cand-table {
    table-layout: fixed;
  }
  .cand-table th:nth-child(3),
  .cand-table th:nth-child(4) {
    width: 66px;
    letter-spacing: 0.02em;
  }
  .cand-table td.num {
    white-space: nowrap;
  }
  .cand b {
    overflow-wrap: anywhere;
  }
  .cand {
    gap: 8px;
  }
}
@media (max-width: 400px) {
  .brand-text small {
    display: none;
  }
  .status-pill {
    padding-inline: 8px;
  }
}

/* ---------------------------------------------------------------------------
   Rooms: play page, house calls, seat calls, host settings, account
   --------------------------------------------------------------------------- */

input[type="time"],
input[type="datetime-local"] {
  height: 44px;
  padding: 0 11px;
  border-radius: var(--r-inner);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  min-width: 0;
}
.lab + .lab,
.lab + .card,
.card + .lab {
  margin-top: 16px;
}
.prize {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--ink);
  font-weight: 600;
  font-size: 13px;
}
.room-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-bottom: 16px;
  color: var(--muted);
  font-size: 13px;
}
.room-strip > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.room-strip b {
  color: var(--ink);
}
.code {
  letter-spacing: 0.12em;
}
.linkish {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.sub-head {
  font-size: 13px;
  font-weight: 650;
  color: var(--ink);
  margin: 18px 0 8px;
}
.board.compact li {
  padding-block: 8px;
}
.poll-choices.two {
  grid-template-columns: 1fr 1fr;
}

/* House calls */
.props {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
}
.prop {
  display: grid;
  gap: 10px;
}
.prop-q b {
  display: block;
  color: var(--ink);
  font-size: 15px;
}
.prop-q small {
  color: var(--muted);
  font-size: 12px;
}
.prop-select select,
.prop-time input {
  width: 100%;
}
.prop-answers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.prop-answers li {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--surface-3);
  font-size: 12px;
  color: var(--body);
}
.prop-answers li.right {
  background: var(--ok-soft);
  color: var(--ok);
}
.prop-answers li.wrong {
  opacity: 0.7;
}
.prop-answers .icon {
  width: 13px;
  height: 13px;
}

/* Seat calls */
.call-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.call-stats span {
  display: grid;
  padding: 10px;
  border-radius: var(--r-inner);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 12px;
}
.call-stats b {
  font-size: 20px;
  color: var(--ink);
}
.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--warn-soft);
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
}
.badge .icon {
  width: 13px;
  height: 13px;
  color: var(--warn);
}
.open-calls {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: grid;
  gap: 4px;
}
.open-calls li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0 6px 10px;
  border-left: 3px solid var(--c);
  font-size: 13px;
}
.open-calls span {
  color: var(--muted);
}

/* The wire, with people in it */
.feed-who {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 3px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
}
.feed-who .icon {
  width: 13px;
  height: 13px;
}
.reacts {
  display: flex;
  gap: 4px;
  margin-top: 6px;
}
.react {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 30px;
  min-width: 38px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}
.react .icon {
  width: 14px;
  height: 14px;
}
.react.on {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}
.w-wire-who {
  font-style: normal;
  opacity: 0.75;
}

/* Host */
.host-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.host-form fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.host-form legend {
  font-weight: 650;
  color: var(--ink);
  font-size: 14px;
  margin-bottom: 6px;
}
.host-form .hint {
  color: var(--muted);
  font-size: 12px;
  margin: -4px 0 0;
}
.host-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.field.narrow {
  max-width: 180px;
}
.check-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.check-chip {
  position: relative;
}
.check-chip input {
  position: absolute;
  opacity: 0;
}
.check-chip > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
}
.check-chip input:checked + span {
  border-color: var(--c, var(--accent));
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--c, var(--accent));
  background: var(--surface-2);
}
.check-chip input:focus-visible + span {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.govt-row {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: var(--r-inner);
  background: var(--surface-2);
}
.prop-row {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  gap: 8px;
}
.prop-row select {
  width: 100%;
}
.invite-link {
  padding: 10px 12px;
  border-radius: var(--r-inner);
  background: var(--surface-2);
  font-size: 13px;
  word-break: break-all;
  color: var(--body);
}
.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.settle,
.members,
.room-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.settle li,
.members li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.settle li > span:first-child,
.members li > span:first-child {
  display: grid;
  min-width: 0;
}
.settle small,
.members small {
  color: var(--muted);
  font-size: 12px;
}
.members li.hidden b {
  text-decoration: line-through;
  color: var(--muted);
}
#host-side > .card + .card {
  margin-top: 16px;
}

/* Account */
.account-button span {
  max-width: 12ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-card {
  display: grid;
  gap: 12px;
}
.account-card .ok {
  color: var(--ok);
  font-weight: 600;
  font-size: 13px;
  margin: 0;
}
.inline-form {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.inline-form .field {
  flex: 1;
}
.room-links li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
}
.account-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 13px;
}
.account-foot a {
  margin-left: auto;
  color: var(--muted);
}
.button.danger {
  color: var(--bad);
}

/* The wall's calls scene */
.w-calls {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 4vmin;
}
.w-props {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2.4vmin;
}
.w-props li {
  display: grid;
  gap: 0.6vmin;
}
.w-props b {
  font-size: 2.6vmin;
}
.w-props span,
.w-sub {
  font-size: 2vmin;
  opacity: 0.75;
}
.w-sub {
  margin: 0 0 1.4vmin;
  font-weight: 600;
}

.account-tools {
  display: none;
  gap: 8px;
}
@media (max-width: 860px) {
  /* The header has room for one more button on a phone: the theme switch
     moves into the account panel. */
  .masthead-tools .theme-button {
    display: none;
  }
  .account-tools {
    display: flex;
  }
  .account-button {
    padding: 0 9px;
  }
  .tabbar button {
    min-width: 0;
  }
  .prop-row {
    grid-template-columns: 1fr;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
  }
  .host-pair {
    grid-template-columns: 1fr;
  }
  .account-button span {
    display: none;
  }
  .w-calls {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 420px) {
  #enter-wall {
    display: none;
  }
}
@media (max-width: 400px) {
  .call-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ===========================================================================
   Government outcomes and the forecast strip (public/outcomes.js)
   =========================================================================== */

/* --- Forecast strip: sticky under the masthead on every app view ---------- */

:root {
  --mast-h: 60px;
  --strip-h: 30px;
}
.fstrip {
  position: sticky;
  top: var(--mast-h);
  z-index: 29;
  height: var(--strip-h);
  overflow: hidden;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
}
.fstrip-inner {
  max-width: 1320px;
  height: 100%;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  white-space: nowrap;
}
.fstrip b {
  color: var(--ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.fs-kicker {
  flex: none;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.fs-note {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fs-bloc {
  flex: none;
  font-weight: 600;
}
.fs-bloc b {
  font-size: 14px;
}
/* The bloc at or past the line: a small green dot, as on the Race to 61 card. */
.fs-bloc.wins b::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 0 2px 4px;
  border-radius: 50%;
  background: var(--ok);
  vertical-align: middle;
}
.fs-bloc.right.wins b::after {
  display: none;
}
.fs-bloc.right.wins b::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 4px 2px 0;
  border-radius: 50%;
  background: var(--ok);
  vertical-align: middle;
}
.fs-bar {
  position: relative;
  flex: 1 1 auto;
  min-width: 48px;
  height: 8px;
  border-radius: 99px;
  background: var(--surface-3);
}
.fs-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  transition: width 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.fs-fill.left {
  left: 0;
  border-radius: 99px 0 0 99px;
}
.fs-fill.right {
  right: 0;
  border-radius: 0 99px 99px 0;
}
.fs-mark {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  margin-left: -1px;
  background: var(--ink);
  opacity: 0.8;
}
.fs-mark.faint {
  opacity: 0.25;
}
.fs-maj,
.fs-count {
  flex: none;
}
.fs-count {
  margin-left: auto;
}
.fstrip[data-state="seats"] .fs-count {
  margin-left: 0;
}
/* Sticky neighbours move down by the strip's height so it never covers them. */
@media (min-width: 861px) {
  .desk-list {
    top: calc(80px + var(--strip-h));
    max-height: calc(100vh - 100px - var(--strip-h));
  }
}
#race-detail {
  scroll-margin-top: calc(72px + var(--strip-h));
}
@media (max-width: 860px) {
  :root {
    --mast-h: 54px;
  }
  .fstrip-inner {
    padding: 0 16px;
    gap: 8px;
  }
  .desk.focus .seat-nav {
    top: calc(54px + var(--strip-h));
  }
}
@media (max-width: 600px) {
  .lab-peek:not(:empty) {
    top: calc(58px + var(--strip-h));
  }
}
.fs-narrow {
  display: none;
}
@media (max-width: 520px) {
  .fs-kicker,
  .fs-wide {
    display: none;
  }
  .fs-narrow {
    display: inline;
  }
  .fstrip[data-state="countdown"] .fs-kicker {
    display: inline;
  }
}
@media (max-width: 360px) {
  .fstrip[data-state="countdown"] .fs-kicker {
    display: none;
  }
}
body.walling .fstrip {
  display: none;
}

/* --- Government outcomes card on Tonight --------------------------------- */

.oc-bar {
  display: flex;
  height: 30px;
  border-radius: var(--r-inner);
  overflow: hidden;
  background: var(--surface-3);
}
.oc-bar > span {
  display: grid;
  place-items: center;
  min-width: 0;
  overflow: hidden;
  color: var(--on-fill);
  text-shadow: 0 1px 1px var(--label-shadow);
  font-weight: 700;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  box-shadow: inset -1px 0 0 color-mix(in srgb, var(--surface) 55%, transparent);
  transition: flex-grow 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.oc-rows {
  display: grid;
  gap: 2px;
  margin-top: 12px;
}
.oc-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-top: 1px solid var(--line);
}
.oc-label {
  min-width: 0;
  color: var(--ink);
  font-weight: 600;
  font-size: 14px;
}
.oc-label small {
  display: block;
  font-weight: 500;
  font-size: 12px;
  color: var(--muted);
}
.oc-share {
  font-size: 17px;
  color: var(--ink);
}

/* --- Government outcomes scene on the TV wall ---------------------------- */

.oc-bar.oc-bar-wall {
  flex: none;
  height: calc(var(--u) * 4);
  border-radius: calc(var(--u) * 0.8);
}
.oc-bar.oc-bar-wall > span {
  font-size: calc(var(--u) * 1.6);
}
.w-oc-rows {
  display: grid;
  gap: calc(var(--u) * 1.3);
  margin-top: calc(var(--u) * 2.6);
}
.w-oc-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1.1fr) 2fr calc(var(--u) * 7);
  align-items: center;
  gap: calc(var(--u) * 1.5);
  font-size: calc(var(--u) * 1.6);
  color: var(--ink);
}
.w-oc-swatch {
  width: calc(var(--u) * 1.4);
  height: calc(var(--u) * 1.4);
  border-radius: calc(var(--u) * 0.3);
}
.w-oc-label {
  font-weight: 650;
  min-width: 0;
}
.w-oc-label small {
  display: block;
  font-size: calc(var(--u) * 1.05);
  font-weight: 550;
  color: var(--muted);
}
.w-oc-track {
  height: calc(var(--u) * 2);
  background: var(--surface-3);
  border-radius: 999px;
  overflow: hidden;
}
.w-oc-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  transition: width 0.5s ease;
}
.w-oc-row b {
  text-align: right;
  font-size: calc(var(--u) * 2.2);
  font-weight: 700;
}

/* === Trending in the room (public/trending.js) ============================ */

.trending-slot:empty {
  display: none;
}
.trending-slot > .card,
.trending-slot + .grid-main {
  margin-top: 20px;
}
.trend-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 4px 16px;
}
/* Rank and swatch, the seat name, then the counts on a line of their own. */
.trend-row {
  width: 100%;
  min-height: 44px;
  display: grid;
  grid-template-columns: 1.4em auto minmax(0, 1fr);
  align-items: center;
  gap: 2px 10px;
  padding: 8px 10px;
  border-radius: var(--r);
  text-align: left;
  transition: background-color 0.18s ease;
}
.trend-row:hover {
  background: var(--surface-2);
}
.trend-row b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.trend-row small {
  grid-column: 3;
  color: var(--muted);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.trend-rank {
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  text-align: right;
}
.trend-chip {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}
.w-trend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--u) * 1.2) calc(var(--u) * 3);
}
.w-trend li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: calc(var(--u) * 1.5);
  padding: calc(var(--u) * 1.2) calc(var(--u) * 1.6);
  border-left: calc(var(--u) * 0.4) solid var(--c);
  background: var(--surface-2);
  border-radius: calc(var(--u) * 0.8);
}
.w-trend-rank {
  color: var(--muted);
  font-size: calc(var(--u) * 1.8);
  font-weight: 650;
}
.w-trend-seat {
  font-size: calc(var(--u) * 2);
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.w-trend-seat small {
  display: block;
  color: var(--muted);
  font-size: calc(var(--u) * 1.2);
  font-weight: 550;
}
.w-trend-count {
  font-size: calc(var(--u) * 1.4);
  color: var(--muted);
  white-space: nowrap;
}
@media (max-width: 400px) {
  .trend-list {
    grid-template-columns: 1fr;
  }
}
/* === End trending ========================================================== */

/* ===========================================================================
   Seat extras (feat/seat-remaining): votes still to count, what the
   runner-up needs, and the Performance benchmark table. Rendered by
   public/seat-extras.js.
   =========================================================================== */

.sx-remaining {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: var(--r-inner);
  background: var(--surface-2);
  color: var(--body);
  font-size: 13.5px;
  line-height: 1.5;
}
.sx-remaining svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--muted);
}
.sx-est {
  font-style: normal;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.02em;
  color: var(--muted);
  white-space: nowrap;
}
.sx-rr {
  flex-basis: 100%;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.sx-rr.sx-out-of-reach,
.sx-rr.sx-impossible {
  opacity: 0.75;
}
.sx-table {
  width: 100%;
  border-collapse: collapse;
}
.sx-table th {
  font-size: 11px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-align: left;
  padding: 0 8px 8px;
  border-bottom: 1px solid var(--line);
}
.sx-table th.r,
.sx-table td.r {
  text-align: right;
}
.sx-table td {
  padding: 11px 8px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.sx-table td:first-child,
.sx-table th:first-child {
  padding-left: 0;
}
.sx-table td:last-child,
.sx-table th:last-child {
  padding-right: 0;
}
.sx-table td > b,
.sx-table td > small {
  display: block;
}
.sx-table td > b {
  color: var(--ink);
  font-weight: 650;
}
.sx-table small {
  color: var(--muted);
  font-size: 12px;
}
.sx-table tr.sx-old td {
  opacity: 0.85;
}
.sx-margin {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}
.sx-margin em {
  font-style: normal;
  font-weight: 650;
  margin-left: 6px;
  color: var(--ink);
}
.sx-shift {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
  color: var(--ink);
  background: color-mix(in srgb, var(--c) 22%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent);
}
.sx-shift.even {
  background: var(--surface-3);
  box-shadow: none;
  color: var(--muted);
}
@media (max-width: 560px) {
  .sx-table td {
    padding: 9px 6px;
  }
  .sx-margin {
    gap: 6px;
  }
}

/* ===========================================================================
   NIGHT GUIDE AND TREND (public/night.js)
   A guide to the night before the count; how the night moved once it starts.
   Kept as one block so it merges cleanly; uses only the shared tokens.
   =========================================================================== */

.ng {
  margin-top: 20px;
}
.card-r61 + .ng-card,
.card-r61 + .nt-card {
  margin-top: 20px;
}
.ng-intro {
  color: var(--muted);
  margin-bottom: 14px;
  max-width: 62ch;
}
.ng-time {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.ng-time li {
  display: grid;
  grid-template-columns: 7.5em minmax(0, 1fr);
  gap: 12px;
  padding: 10px 0 10px 12px;
  border-left: 2px solid var(--line);
}
.ng-time li.past {
  opacity: 0.6;
}
.ng-time li.next {
  border-left-color: var(--accent);
}
.ng-time li.next .ng-when {
  color: var(--accent);
}
.ng-when {
  font-weight: 650;
  color: var(--ink);
  font-size: 13px;
}
.ng-time b {
  color: var(--ink);
  font-weight: 650;
}
.ng-time p {
  color: var(--body);
  font-size: 13px;
  margin-top: 2px;
}
.ng-h {
  margin: 18px 0 8px;
  font-size: 14px;
}
.ng-note {
  font-size: 13px;
  color: var(--muted);
  margin: -4px 0 10px;
  max-width: 62ch;
}
/* One bordered list with dividers, not a stack of cards. */
.ng-seats {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface-2);
  overflow: hidden;
}
.ng-seat {
  min-width: 0;
}
.ng-seat + .ng-seat {
  border-top: 1px solid var(--line);
}
.ng-seat-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 12px 14px;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
}
button.ng-seat-head {
  cursor: pointer;
}
button.ng-seat-head:hover {
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}
button.ng-seat-head:hover .ng-seat-name,
button.ng-seat-head:focus-visible .ng-seat-name {
  color: var(--accent);
}
.ng-seat-main {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.ng-seat-name {
  font-weight: 650;
  font-size: 15px;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.ng-seat-line {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 13px;
  color: var(--body);
}
.ng-seat-line i {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transform: translateY(-1px);
}
.ng-seat-notes {
  font-size: 12px;
  color: var(--muted);
}
.ng-fig {
  display: grid;
  justify-items: end;
  text-align: right;
  line-height: 1.1;
}
.ng-fig b {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}
.ng-fig b small {
  margin-left: 2px;
  font-size: 11px;
  font-weight: 550;
  color: var(--muted);
}
.ng-fig > span {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  margin-top: 2px;
}
.ng-pair {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}
.ng-pair i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

/* --- The trend chart ---------------------------------------------------- */

.nt {
  margin: 0;
  min-width: 0;
}
.nt-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 12px;
}
.nt-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nt-legend b {
  color: var(--ink);
  font-size: 14px;
}
.nt-legend i {
  width: 14px;
  height: 3px;
  border-radius: 2px;
  display: inline-block;
}
.nt-legend i.nt-maj-key {
  height: 0;
  border-top: 2px dashed var(--muted);
}
.nt-frame {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  grid-template-rows: 200px auto;
}
.nt-y,
.nt-plot,
.nt-x {
  position: relative;
}
.nt-y span {
  position: absolute;
  right: 6px;
  transform: translateY(-50%);
  font-size: 11px;
  color: var(--muted);
}
.nt-plot svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.nt-grid {
  stroke: var(--line);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.nt-maj {
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.5;
  stroke-dasharray: 5 4;
  vector-effect: non-scaling-stroke;
}
.nt-line {
  fill: none;
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.nt-dot {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 2px var(--surface);
}
.nt-x {
  height: 22px;
  margin: 0 8px;
}
.nt-x span {
  position: absolute;
  top: 6px;
  transform: translateX(-50%);
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}
.nt figcaption {
  margin-top: 8px;
  font-size: 13px;
  color: var(--body);
}

/* --- TV wall scenes ------------------------------------------------------- */

.ng-w-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: calc(var(--u) * 4);
  flex: 1;
  min-height: 0;
}
.ng-wall-time li {
  grid-template-columns: 9em minmax(0, 1fr);
  padding: calc(var(--u) * 0.9) 0 calc(var(--u) * 0.9) calc(var(--u) * 1.2);
  border-left-width: 3px;
  font-size: calc(var(--u) * 1.6);
}
.ng-wall-time .ng-when {
  font-size: calc(var(--u) * 1.5);
}
.ng-w-seats {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 1.4);
  min-height: 0;
  overflow: hidden;
}
.ng-w-seats h3 {
  font-size: calc(var(--u) * 1.3);
  color: var(--muted);
  font-weight: 600;
  margin-bottom: calc(var(--u) * 0.6);
}
.ng-w-seats ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 0.6);
}
.ng-w-seats li {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 0.6);
  padding: calc(var(--u) * 0.5) calc(var(--u) * 0.9);
  border-radius: 99px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: calc(var(--u) * 1.35);
  color: var(--ink);
}
.ng-w-seats li .num {
  color: var(--muted);
}
.ng-w-seats .ng-pair i {
  width: calc(var(--u) * 0.9);
  height: calc(var(--u) * 0.9);
}
.ng-w-list {
  font-size: calc(var(--u) * 1.4);
  color: var(--ink);
}
.nt-w-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.nt-wall {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.nt-wall .nt-legend {
  font-size: calc(var(--u) * 1.3);
  gap: calc(var(--u) * 0.8) calc(var(--u) * 2.4);
  margin-bottom: calc(var(--u) * 1.6);
}
.nt-wall .nt-legend b {
  font-size: calc(var(--u) * 2.2);
}
.nt-wall .nt-legend i {
  width: calc(var(--u) * 2);
  height: calc(var(--u) * 0.4);
}
.nt-wall .nt-frame {
  flex: 1;
  min-height: 0;
  grid-template-columns: calc(var(--u) * 4.4) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
}
.nt-wall .nt-plot svg {
  height: 100%;
}
.nt-wall .nt-y span,
.nt-wall .nt-x span {
  font-size: calc(var(--u) * 1.3);
}
.nt-wall .nt-x {
  height: calc(var(--u) * 3);
}
.nt-wall .nt-line {
  stroke-width: 4;
}
.nt-wall .nt-dot {
  width: calc(var(--u) * 1.4);
  height: calc(var(--u) * 1.4);
}
.nt-wall figcaption {
  font-size: calc(var(--u) * 1.5);
  margin-top: calc(var(--u) * 1.2);
  max-width: 80ch;
}

@media (max-width: 860px) {
  .ng.grid-main {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 600px) {
  .ng-time li {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
  .nt-frame {
    grid-template-rows: 170px auto;
  }
}
@media (orientation: portrait) {
  .ng-w-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* =========================== END NIGHT GUIDE AND TREND ===================== */

/* ---------------------------------------------------------------------------
   Seat map (public/hexmap.js)

   A hex cartogram on Tonight and on the TV wall. Its two tokens are declared
   on the containers, not :root, so they resolve against the wall's own dark
   palette as well as the app's light and dark themes.
   --------------------------------------------------------------------------- */

.hexmap-card,
.w-hex {
  --hexmap-none: var(--empty);
  --hexmap-count: var(--body);
}
.hexmap-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 28px;
}
.hexmap-card > .card-head {
  margin-bottom: 12px;
}
.hx-modes {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 9px;
  background: var(--surface-3);
  width: 100%;
  max-width: 400px;
}
.hx-mode {
  flex: 1;
  min-height: 34px;
  padding: 0 6px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.hx-mode:hover {
  color: var(--ink);
}
.hx-mode.on {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow);
}
.hx-mode:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.hexmap-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  margin-top: 14px;
  min-width: 0;
}
.hexmap-svg {
  display: block;
  width: 100%;
  height: auto;
}
.hx path {
  stroke: var(--surface);
  stroke-width: 1.1;
  stroke-linejoin: round;
  transition: fill 0.4s ease;
}
.hx .hx-ring {
  fill: none;
  stroke-width: 1.35;
}
.hx text {
  font-family: var(--font);
  font-size: 5.3px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-anchor: middle;
  pointer-events: none;
}
/* White labels keep a faint halo so they hold on yellow and pale grey fills. */
.hx text.hx-lt {
  paint-order: stroke;
  stroke: var(--label-halo);
  stroke-width: 0.7px;
}
.hx[role="button"] {
  cursor: pointer;
  outline: none;
}
.hx[role="button"]:hover > path:first-child,
.hx[role="button"]:focus-visible > path:first-child {
  stroke: var(--ink);
  stroke-width: 1.4;
}
.hx-group {
  font-family: var(--font);
  font-size: 5.4px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  fill: var(--muted);
}
.hx-tip {
  position: absolute;
  z-index: 3;
  display: grid;
  gap: 2px;
  min-width: 150px;
  max-width: 220px;
  padding: 9px 11px;
  border-radius: var(--r-sm);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-lift);
  font-size: 12px;
  line-height: 1.35;
  color: var(--body);
  pointer-events: none;
}
.hx-tip[hidden] {
  display: none;
}
.hx-tip b {
  color: var(--ink);
  font-size: 13px;
}
.hx-tip span {
  display: flex;
  align-items: center;
  gap: 6px;
}
.hx-tip i {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 2px;
}
.hx-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--body);
}
.hx-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.hx-legend i {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 3px;
}
.hx-legend b {
  color: var(--ink);
}
.hx-legend small {
  color: var(--muted);
  font-size: 11px;
}
.hx-legend .hx-legend-note {
  display: block;
  flex-basis: 100%;
  color: var(--muted);
}
.hx-ramp {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px 10px;
}
.hx-ramp > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.hx-legend .hx-key-tint {
  background: color-mix(in srgb, var(--muted) 40%, var(--surface));
}
.hx-legend .hx-key-gain {
  background: transparent;
  border: 2px solid var(--muted);
}

@media (max-width: 400px) {
  .hx-mode {
    min-width: 0;
    padding: 0 2px;
    font-size: 12px;
  }
  .hx-legend {
    font-size: 12px;
    gap: 6px 10px;
  }
}

/* Wide screens: the map sits beside the closest seats, as a plain stack. */
@media (min-width: 861px) {
  .hexmap-card .hexmap-svg {
    width: 100%;
    height: auto;
    max-height: min(78vh, 760px);
  }
}

/* TV wall scene: the leader map beside a second, rotating view. */
.w-hex-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: calc(var(--u) * 5);
}
.w-hex-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}
.w-hex-row {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: stretch;
  gap: calc(var(--u) * 3);
  margin-top: calc(var(--u) * 1.6);
}
.w-hex-map {
  flex: none;
  height: 100%;
  max-width: 60%;
}
.w-hex-map .hexmap-svg {
  width: 100%;
  height: 100%;
}
.w-hex .hx path {
  stroke: var(--bg);
}
/* The key runs down beside the map, so both maps keep the same height. */
.w-hex .hx-legend {
  flex: 1;
  min-width: 0;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: flex-end;
  margin-top: 0;
  font-size: calc(var(--u) * 1.4);
  gap: calc(var(--u) * 0.9);
}
.w-hex .hx-ramp {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: calc(var(--u) * 0.9);
}
.w-hex .hx-legend .hx-legend-note {
  flex-basis: auto;
  max-width: 26ch;
  margin-bottom: calc(var(--u) * 0.6);
}
.w-hex .hx-legend i {
  width: calc(var(--u) * 1.4);
  height: calc(var(--u) * 1.4);
}
.w-hex .hx-legend small {
  font-size: calc(var(--u) * 1.05);
}
.w-hex .hx-legend > span,
.w-hex .hx-ramp > span {
  gap: calc(var(--u) * 0.7);
}
@media (orientation: portrait) {
  .w-hex-body {
    grid-template-columns: minmax(0, 1fr);
  }
  .w-hex-panel:nth-child(2) {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hx path {
    transition: none;
  }
}

/* Outcomes bar labels: dark ink on the lighter dark-theme party colours. */
:root[data-scheme="dark"] .oc-bar > span,
.wall .oc-bar > span {
  color: var(--on-fill-dark);
  text-shadow: none;
}
.nt-x span.nt-x-end {
  transform: translateX(-100%);
}

/* Guide: the whole seat row is the tap target, and later groups fold away. */
.ng-seat {
  position: relative;
}
button.ng-seat-head::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.ng-more {
  margin-top: 14px;
}
.ng-more > summary {
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  font-weight: 600;
  color: var(--ink);
}

/* ===========================================================================
   Visual pass, part two
   =========================================================================== */

/* Guide: the short timeline card no longer stretches to the seat list. */
.ng.grid-main {
  align-items: start;
}
@media (min-width: 861px) {
  .ng.grid-main > .ng-card:first-child {
    position: sticky;
    top: calc(var(--mast-h) + var(--strip-h) + 16px);
  }
}

/* TV wall: the tallest scenes run a touch smaller so nothing falls off the
   bottom of the screen (Party Mode sets its own sizes in party-skin.css). */
.wall .w-scene[data-scene="national"],
.wall .w-scene[data-scene="seat"] {
  --u: calc(min(1vw, 1.78vh) * 0.84);
}
.wall .w-scene[data-scene="battle"] {
  --u: calc(min(1vw, 1.78vh) * 0.96);
}
.wall .w-scene[data-scene="bubble"] {
  --u: calc(min(1vw, 1.78vh) * 0.68);
}

/* Tonight: closest seats and the wire stacked beside the seat map. */
.grid-map {
  align-items: start;
}
.grid-stack {
  display: grid;
  gap: 20px;
  min-width: 0;
}
.grid-stack > .card + .card {
  margin-top: 0;
}
/* Beside the map, the wire takes up the slack so the column ends with the map. */
@media (min-width: 1101px) {
  .grid-map {
    align-items: stretch;
  }
  .grid-map > .grid-stack {
    grid-template-rows: auto 1fr;
  }
}
/* No room poll yet: My night takes the full row rather than half of one. */
.grid-main:has(> #room-poll:empty) {
  grid-template-columns: minmax(0, 1fr);
}
.grid-main > #room-poll:empty {
  display: none;
}
/* Mid widths keep the map beside the list; it is narrow enough to share. */
@media (min-width: 861px) and (max-width: 1100px) {
  .grid-main.grid-map {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  }
}
@media (max-width: 860px) {
  .grid-stack {
    gap: 16px;
  }
}

@media (pointer: coarse) {
  .hx-mode {
    min-height: 44px;
  }
}

.nt-more {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--muted);
}

/* Seat page: the method note folds away until someone asks. */
.sx-method {
  margin-top: 10px;
}
.sx-method > summary {
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}
.sx-method > summary:hover {
  color: var(--ink);
}
.sx-method > .footnote {
  margin-top: 0;
}
.sx-table td:first-child {
  white-space: nowrap;
}
.sx-table td:first-child small {
  white-space: normal;
}

/* Landscape phones: only the masthead stays pinned; the strip scrolls away. */
@media (orientation: landscape) and (max-height: 500px) {
  .fstrip {
    position: static;
  }
  .desk.focus .seat-nav {
    top: var(--mast-h);
  }
  #race-detail {
    scroll-margin-top: 72px;
  }
}

/* Small phones: the masthead tools fit at 360 and 320. */
@media (max-width: 380px) {
  .masthead {
    gap: 8px;
  }
  .masthead-tools {
    gap: 2px;
  }
}

/* === Polling benchmark === */
/* The final polls average on each party-vote bar: a pointer above the bar
   with a hairline through it, so it never reads as the counted tick (a solid
   bar) or the 5% line (dashed). A benchmark, not the forecast. */
.pr-poll {
  position: absolute;
  top: -7px;
  bottom: 0;
  width: 10px;
  margin-left: -5px;
  cursor: help;
}
.pr-poll::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  border-left: 4.5px solid transparent;
  border-right: 4.5px solid transparent;
  border-top: 6px solid var(--body);
}
.pr-poll::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 5px;
  bottom: 0;
  width: 1.5px;
  margin-left: -0.75px;
  background: var(--body);
  opacity: 0.75;
}
.wall .pr-poll {
  display: none;
}
.pr-vpoll,
.pr-vpoll-head {
  display: block;
  white-space: nowrap;
}
.pr-vpoll {
  margin-top: 2px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--muted);
}
.pr-vpoll.up {
  color: var(--ok);
}
.pr-vpoll.down {
  color: var(--bad);
}
.pr-vpoll i {
  display: inline-block;
  margin-right: 3px;
  vertical-align: 1px;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-top: 4.5px solid var(--body);
}
.pr-vpoll-head {
  margin-top: 1px;
  font-size: 9.5px;
  letter-spacing: 0.04em;
  opacity: 0.85;
}
.party-head,
.party-row {
  grid-template-columns: minmax(130px, 1.2fr) minmax(80px, 2fr) 62px 60px 58px;
}
.pv-polls {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  line-height: 1.45;
  color: var(--body);
}
.pv-polls b {
  color: var(--ink);
  font-weight: 650;
}
@media (max-width: 860px) {
  .party-head,
  .party-row {
    grid-template-columns: minmax(96px, 1fr) minmax(40px, 1fr) 52px 52px 34px;
  }
}

/* === Rehearsal and specials === */

/* --- Rehearsal controls: scrubber with hours, speed, jump-to ------------- */

.controlbar-inner {
  flex-wrap: wrap;
}
.rehearsal .scrub {
  position: relative;
  width: 240px;
  flex-direction: column;
  padding-bottom: 14px;
}
.scrub-hours {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 0;
  height: 12px;
  pointer-events: none;
}
.scrub-hours span {
  position: absolute;
  transform: translateX(-50%);
  font-size: 10px;
  line-height: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
#progress-label {
  width: auto;
  min-width: 84px;
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
#progress-label b {
  font-size: 14px;
  font-weight: 650;
  color: var(--ink);
}
#progress-label small {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
}
.replay-row {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding-top: 2px;
}
.replay-row[hidden] {
  display: none;
}
.replay-speed,
.replay-jumps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.replay-speed {
  padding: 3px;
  border-radius: 99px;
  background: var(--surface-3);
}
.replay-jumps-label {
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  margin-right: 2px;
}
.replay-chip {
  min-height: 32px;
  padding: 4px 11px;
  border-radius: 99px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--body);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  touch-action: manipulation;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}
.replay-speed .replay-chip {
  border-color: transparent;
  background: transparent;
  min-width: 46px;
}
.replay-chip:hover {
  border-color: var(--muted);
}
.replay-chip.on {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}
.replay-chip.official {
  border-style: dashed;
}
.replay-chip.official.on {
  border-style: solid;
}
.replay-how {
  font-size: 12.5px;
  color: var(--muted);
}
.replay-how summary {
  cursor: pointer;
  font-weight: 600;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
}
.replay-how[open] {
  flex-basis: 100%;
  max-width: 760px;
}
.replay-how p {
  margin: 4px 0 8px;
  color: var(--body);
  line-height: 1.5;
}

@media (max-width: 860px) {
  .rehearsal {
    flex-wrap: nowrap;
    min-width: 0;
  }
  .rehearsal .scrub {
    flex: 1;
    width: auto;
    min-width: 0;
  }
  #progress-label {
    min-width: 72px;
  }
  .replay-row {
    gap: 8px;
  }
  /* Jump points scroll sideways inside their own strip, never the page. */
  .replay-jumps {
    flex-wrap: nowrap;
    overflow-x: auto;
    max-width: 100%;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }
  .replay-jumps::-webkit-scrollbar {
    display: none;
  }
  .replay-row {
    order: 4;
  }
  .source-select {
    order: 5;
  }
  .replay-chip {
    min-height: 38px;
  }
  .replay-speed {
    flex: none;
  }
  .replay-speed .replay-chip {
    min-width: 0;
    padding: 4px 10px;
  }
}

/* --- What the specials change -------------------------------------------- */

.sp-card .sp-lede {
  font-size: 17px;
  line-height: 1.45;
  color: var(--ink);
  font-weight: 550;
  margin: -4px 0 16px;
  max-width: 68ch;
  text-wrap: pretty;
}
.sp-official {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
}
.sp-tag-official {
  background: var(--accent-soft);
  color: var(--accent);
}
.sp-table-wrap {
  overflow-x: auto;
  max-width: 100%;
}
.sp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.sp-table th,
.sp-table td {
  padding: 7px 8px;
  text-align: right;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.sp-table thead th {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  border-bottom-color: var(--line-strong);
}
.sp-table thead tr:first-child th {
  border-bottom: none;
  padding-bottom: 0;
}
.sp-table thead th[colspan] {
  text-align: center;
  color: var(--ink);
}
.sp-table th:first-child,
.sp-table tbody th {
  text-align: left;
  font-weight: 600;
  color: var(--ink);
  white-space: normal;
}
.sp-swatch {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 3px;
  margin-right: 7px;
  vertical-align: 0;
}
.sp-table .sp-delta {
  color: var(--muted);
}
.sp-table .sp-delta.up {
  color: var(--ok);
  font-weight: 650;
}
.sp-table .sp-delta.down {
  color: var(--bad);
  font-weight: 650;
}
.sp-table tr.sp-moved th,
.sp-table tr.sp-moved td {
  background: var(--surface-2);
}
.sp-sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin: 16px 0 4px;
}
.sp-sizes div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sp-sizes span {
  font-size: 12px;
  color: var(--muted);
}
.sp-sizes b {
  font-size: 18px;
  color: var(--ink);
}
.sp-sizes b span {
  font-size: inherit;
  color: var(--muted);
}
.sp-h {
  font-size: 14px;
  font-weight: 650;
  color: var(--ink);
  margin: 18px 0 8px;
}
.sp-flips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}
.sp-flips li {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-inner);
  background: var(--surface-2);
}
.sp-flip-name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-weight: 650;
  color: var(--ink);
}
.sp-flip-name button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.sp-pair {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--muted);
  font-size: 12px;
}
.sp-pair i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}
.sp-flips p {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--body);
}
.sp-none {
  font-size: 13px;
}
.sp-callout {
  margin: 14px 0 0;
  padding: 10px 12px;
  border-radius: var(--r-inner);
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: 13px;
  line-height: 1.5;
  color: var(--body);
}
.sp-callout b {
  color: var(--ink);
}
@media (max-width: 600px) {
  .sp-card .sp-lede {
    font-size: 15.5px;
  }
  .sp-table {
    font-size: 12.5px;
  }
  .sp-table th,
  .sp-table td {
    padding: 6px 4px;
  }
  .sp-swatch {
    margin-right: 5px;
  }
}
@media (max-width: 420px) {
  /* Phones keep the seats, the point of the card; shares need a wider screen. */
  .sp-table .sp-share {
    display: none;
  }
}

/* Wall scene */
.sp-w .sp-w-lede {
  font-size: calc(var(--u) * 2.1);
  line-height: 1.3;
  color: var(--ink);
  font-weight: 600;
  margin: 0 0 calc(var(--u) * 2);
  max-width: 60ch;
}
.sp-w-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: calc(var(--u) * 4);
  min-height: 0;
}
.sp-w .sp-table {
  font-size: calc(var(--u) * 1.45);
}
.sp-w .sp-table thead th {
  font-size: calc(var(--u) * 1.05);
}
.sp-w .sp-table .sp-share {
  display: table-cell;
}
.sp-w .sp-sizes b {
  font-size: calc(var(--u) * 2.2);
}
.sp-w .sp-sizes span {
  font-size: calc(var(--u) * 1.05);
}
.sp-w .sp-h {
  font-size: calc(var(--u) * 1.4);
}
.sp-w .sp-flips {
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--u) * 0.6);
}
.sp-w .sp-flips li {
  padding: calc(var(--u) * 0.6) calc(var(--u) * 1);
}
.sp-w .sp-flip-name {
  font-size: calc(var(--u) * 1.3);
}
.sp-w .sp-flips p {
  font-size: calc(var(--u) * 1.15);
  margin-top: 2px;
}
.sp-w-grid > div {
  min-height: 0;
  overflow: hidden;
}

/* --- The pace of the count ------------------------------------------------ */

.pace-section {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.pace-h {
  font-size: 14px;
  font-weight: 650;
  color: var(--ink);
  margin: 0 0 10px;
}
.pace {
  margin: 0;
  min-width: 0;
}
.pace-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 10px;
}
.pace-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pace-key {
  display: inline-block;
  width: 14px;
  height: 3px;
  border-radius: 2px;
}
.pace-key.places {
  background: var(--ink);
}
.pace-key.votes {
  background: var(--accent);
}
.pace-key.target {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  transform: rotate(45deg);
  border: 2px solid var(--warn);
  background: transparent;
}
.pace-frame {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  grid-template-rows: 150px auto;
}
.pace-y,
.pace-plot,
.pace-x {
  position: relative;
}
.pace-y span {
  position: absolute;
  right: 6px;
  transform: translateY(-50%);
  font-size: 11px;
  color: var(--muted);
}
.pace-plot {
  border-left: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.pace-plot svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.pace-grid {
  stroke: var(--line);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.pace-line {
  fill: none;
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.pace-line.places {
  stroke: var(--ink);
}
.pace-line.votes {
  stroke: var(--accent);
}
.pace-target {
  position: absolute;
  width: 10px;
  height: 10px;
  border: 2px solid var(--warn);
  background: var(--surface);
  border-radius: 2px;
  transform: translate(-50%, -50%) rotate(45deg);
}
.pace-dot {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 2px var(--surface);
}
.pace-dot.places {
  background: var(--ink);
}
.pace-dot.votes {
  background: var(--accent);
}
.pace-x {
  height: 22px;
}
.pace-x span {
  position: absolute;
  top: 6px;
  transform: translateX(-50%);
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}
.pace-x span:first-child {
  transform: none;
}
.pace-x span:last-child {
  transform: translateX(-100%);
}
.pace figcaption {
  margin-top: 8px;
  font-size: 13px;
  color: var(--body);
}

@media (max-width: 600px) {
  /* Phones: the play bar takes the whole row; the source menu drops below. */
  .controlbar .rehearsal {
    flex-basis: 100%;
    order: 1;
  }
  .controlbar .source-note {
    order: 2;
  }
  .scrub-hours span:nth-child(2),
  .scrub-hours span:nth-child(3),
  .scrub-hours span:nth-child(5),
  .scrub-hours span:nth-child(6) {
    display: none;
  }
  .source-select select {
    min-height: 38px;
  }
}

/* === TOP kingmaker and headline === */

/* TOP sits between the blocs: its own segment on the race bar and the strip. */
.r61-bar > .r61-topseg {
  box-shadow:
    inset 1px 0 0 color-mix(in srgb, var(--surface) 55%, transparent),
    inset -1px 0 0 color-mix(in srgb, var(--surface) 55%, transparent);
}
.r61-top {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.r61-top i,
.fs-topseats i {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
}
.r61-top b {
  font-size: 13px;
  color: var(--ink);
}
.r61-with {
  font-size: 12px;
  font-weight: 600;
  color: var(--p-TOP);
}
/* Reaches the line only with TOP: a ring in TOP's colour, not the solid dot. */
.r61-bloc.with-top b::after {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  margin: 0 0 6px 8px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--p-TOP);
  vertical-align: middle;
}
.r61-bloc.right.with-top b::after {
  margin: 0 8px 6px 0;
}
.wall .r61-bloc.with-top b::after {
  width: calc(var(--u) * 1);
  height: calc(var(--u) * 1);
}
.wall .r61-top,
.wall .r61-with {
  font-size: calc(var(--u) * 1);
}
.wall .r61-top b {
  font-size: calc(var(--u) * 1.2);
}
.fs-fill.fs-top {
  border-radius: 0;
}
.fs-topseats {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
}
.fs-bloc.with-top b::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 0 2px 4px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--p-TOP);
  vertical-align: middle;
}
.fs-bloc.right.with-top b::after {
  display: none;
}
.fs-bloc.right.with-top b::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 4px 2px 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--p-TOP);
  vertical-align: middle;
}
@media (max-width: 360px) {
  .fs-topseats {
    display: none;
  }
}
/* The kingmaker share under the government shapes. */
.oc-king {
  margin: 12px 0 0;
  font-size: 14px;
  font-weight: 550;
  color: var(--ink);
}
.w-oc-king {
  margin: calc(var(--u) * 1.4) 0 0;
  font-size: calc(var(--u) * 1.3);
  font-weight: 600;
  color: var(--ink);
}

/* === Party lists === */
/* Who is in on these numbers (public/lists.js): Tonight card and wall scene. */
.pl-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
}
.pl-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.pl-chip .num {
  color: var(--muted);
  font-weight: 650;
}
.pl-chip.on .num {
  color: inherit;
  opacity: 0.75;
}
.pl-party {
  border-top: 3px solid var(--c, var(--p-other));
  padding-top: 14px;
}
.pl-summary {
  font-weight: 650;
  color: var(--ink);
  margin-bottom: 14px;
}
.pl-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
}
.pl-col {
  min-width: 0;
}
.pl-col h3 {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
  font-size: 14px;
  margin-bottom: 10px;
}
.pl-col h3 small {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}
.pl-names {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pl-names li {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 8px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  min-width: 0;
}
.pl-names li small {
  color: var(--muted);
  font-size: 12px;
}
.pl-name {
  color: var(--ink);
  font-weight: 550;
  overflow-wrap: anywhere;
}
.pl-ranked li {
  flex-wrap: nowrap;
}
.pl-ranked .pl-name {
  flex: 1 1 auto;
  min-width: 0;
}
.pl-rank {
  flex: none;
  min-width: 2.2em;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}
.pl-tag {
  flex: none;
}
.pl-names li.pl-last {
  margin: 0 -8px;
  padding: 7px 8px;
  border-radius: var(--r-sm);
  border-bottom-color: transparent;
  background: color-mix(in srgb, var(--c) 10%, transparent);
}
.pl-last .pl-tag {
  background: color-mix(in srgb, var(--c) 22%, var(--surface));
  color: var(--ink);
}
.pl-queue {
  margin-top: 10px;
}
.pl-next {
  border-bottom-style: dashed !important;
}
.pl-next .pl-name {
  color: var(--body);
  font-weight: 500;
}
.pl-short {
  color: var(--warn);
  font-weight: 550;
}
.pl-none,
.pl-skip {
  color: var(--muted);
  font-size: 12px;
  margin-top: 8px;
}
.pl-col [data-pl-more] {
  margin-top: 10px;
}
@media (max-width: 600px) {
  .pl-cols {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
  /* The list is what the room argues about; on a phone it comes first. */
  .pl-col + .pl-col {
    order: -1;
  }
}

.pl-w-rows {
  display: grid;
  gap: calc(var(--u) * 0.9);
  min-height: 0;
}
.pl-w-row {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.1fr) minmax(0, 1.6fr);
  align-items: center;
  gap: calc(var(--u) * 2);
  padding: calc(var(--u) * 0.9) calc(var(--u) * 1.4);
  border-radius: var(--r);
  background: var(--surface);
  border-left: calc(var(--u) * 0.45) solid var(--c, var(--p-other));
}
.pl-w-row small {
  display: block;
  font-size: calc(var(--u) * 1);
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: calc(var(--u) * 0.2);
}
.pl-w-party {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 0.8);
  font-size: calc(var(--u) * 1.9);
  color: var(--ink);
  min-width: 0;
}
.pl-w-party .swatch {
  width: calc(var(--u) * 1.2);
  height: calc(var(--u) * 1.2);
}
.pl-w-party .num {
  margin-left: auto;
  color: var(--muted);
}
.pl-w-last,
.pl-w-next {
  font-size: calc(var(--u) * 1.8);
  color: var(--ink);
  min-width: 0;
}
.pl-w-last b {
  margin-right: calc(var(--u) * 0.6);
}
.pl-w-last .num,
.pl-w-next .num {
  color: var(--muted);
  font-size: 0.8em;
}
.pl-w-next {
  display: flex;
  flex-wrap: wrap;
  column-gap: calc(var(--u) * 2.2);
}
.pl-w-next small {
  flex-basis: 100%;
}
.pl-w-next b {
  font-weight: 550;
  color: var(--body);
}
.pl-w-none {
  color: var(--muted);
}

/* === Race to govern: legible labels, one line, keyed names === */

/* Seat numbers sit on the party colour: --on-p-* in theme.css. */
.r61-bar > .r61-topseg {
  color: var(--on-p-TOP);
}
.r61-bar > .r61-other {
  color: var(--on-p-other);
}

/* The bar clips its segments, so the line lives in a layer that does not. */
.r61-bar {
  overflow: visible;
}
.r61-bar > span:first-child {
  border-radius: var(--r-inner) 0 0 var(--r-inner);
}
.r61-bar > span:last-of-type {
  border-radius: 0 var(--r-inner) var(--r-inner) 0;
}
.r61-mark {
  top: -7px;
  bottom: -7px;
  width: 3px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: var(--ink);
  opacity: 1;
  /* A surface-coloured halo keeps the line visible on any party colour. */
  box-shadow: 0 0 0 2px var(--surface);
  z-index: 1;
}
.r61-mark + .r61-mark {
  opacity: 0.35;
}

/* Party names as a colour key, in bar order. */
.r61-parties {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 12px;
}
.r61-bloc.right .r61-parties {
  justify-content: flex-end;
}
.r61-party {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.r61-party i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex: none;
}

/* Status in words rather than a coloured dot. */
.r61-bloc.wins b::after {
  content: none;
}
.r61-status {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 650;
  color: var(--muted);
}
.r61-status.wins {
  align-self: flex-start;
  padding: 2px 8px;
  border-radius: 999px;
  color: var(--ok);
  background: var(--ok-soft);
}
.r61-bloc.right .r61-status.wins {
  align-self: flex-end;
}
.r61-size {
  margin-top: 2px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}
.wall .r61-status,
.wall .r61-size {
  font-size: calc(var(--u) * 1);
}
.wall .r61-party i {
  width: calc(var(--u) * 0.9);
  height: calc(var(--u) * 0.9);
}
@media (max-width: 640px) {
  .r61-parties {
    gap: 2px 8px;
  }
  .r61-party i {
    width: 8px;
    height: 8px;
  }
}

/* === Official result fallback === */
.sweep-basis {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-align: right;
}
.sweep-basis.is-official {
  color: var(--ok);
  font-weight: 600;
}
.sweep-basis svg {
  width: 14px;
  height: 14px;
  flex: none;
}

/* === Email invites and sign-in nudge === */
.invite-form {
  display: grid;
  gap: 10px;
  margin-bottom: 8px;
}
.invite-form textarea {
  font: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  padding: 10px 11px;
  border-radius: var(--r-inner);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  resize: vertical;
  min-height: 96px;
  width: 100%;
  box-sizing: border-box;
}
.invite-form textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.invites small {
  overflow-wrap: anywhere;
}
.signin-nudge {
  position: fixed;
  right: 16px;
  bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: 190;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(420px, calc(100vw - 32px));
  padding: 12px 12px 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-lift);
}
.signin-nudge > .icon {
  flex: none;
  color: var(--accent);
}
.signin-nudge p {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
}
.signin-nudge .button {
  flex: none;
}
@media (max-width: 640px) {
  .signin-nudge {
    left: 16px;
    right: 16px;
    max-width: none;
  }
}

/* Launch QA, 5 November 2026 ------------------------------------------- */
/* The rehearsal strip must shrink inside its flex row, or a 375px phone
   lays out 750px wide and every fixed element (tab bar, sheets) slides off. */
.replay-row,
.replay-jumps {
  min-width: 0;
}
html,
body {
  overflow-x: clip;
}
/* iOS zooms into any field under 16px when it takes focus. */
@media (max-width: 720px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea {
    font-size: 16px;
  }
}
.host-start {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin-top: 12px;
}
.host-start > span {
  font-weight: 600;
}
/* Long options ("Labour-led, needs TOP") grow instead of spilling. */
.segmented label {
  min-width: max-content;
}
.segmented span {
  height: auto;
  min-height: 44px;
  padding: 6px 12px;
  text-align: center;
  line-height: 1.25;
}
/* Touch targets: steppers and party ticks. */
@media (pointer: coarse) {
  .stepper button {
    min-width: 44px;
    min-height: 44px;
  }
  .check-chip > span {
    min-height: 44px;
  }
}
/* Host toggles show their state with a tick, not just a border tint. */
.check-chip input:checked + span::before {
  content: "\2713";
  font-weight: 700;
  color: var(--ink);
}
.check-chip input:not(:checked) + span {
  opacity: 0.7;
}
.glossary summary {
  cursor: pointer;
  font-weight: 650;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.glossary dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 16px;
  margin: 12px 0 0;
}
.glossary dt {
  font-weight: 650;
}
.glossary dd {
  margin: 0;
  color: var(--muted);
}
@media (max-width: 560px) {
  .glossary dl {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .glossary dd {
    margin-bottom: 8px;
  }
}
.w-clock {
  white-space: nowrap;
}
@media (max-width: 720px) {
  html body textarea,
  html body input.num,
  html body input[type="number"] {
    font-size: 16px;
  }
}
@media (pointer: coarse) {
  .replay-row button,
  .replay-jumps button,
  .icon-button,
  #play {
    min-height: 44px;
    min-width: 44px;
  }
}

/* --- Phones: one scrolling line of replay controls, a calmer seat page ----- */
@media (max-width: 600px) {
  .replay-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .replay-row::-webkit-scrollbar {
    display: none;
  }
  .replay-jumps {
    overflow: visible;
    flex: none;
  }
  .replay-jumps-label {
    display: none;
  }
  .replay-how {
    flex: none;
    white-space: nowrap;
  }
  .replay-how[open] {
    white-space: normal;
    width: min(84vw, 340px);
  }
  /* Header and forecast strip already stick; the seat nav scrolls away. */
  .desk.focus .seat-nav {
    position: static;
  }
}
.call-card,
[data-call] {
  scroll-margin-top: calc(var(--mast-h) + var(--strip-h) + 16px);
}

.source-select[hidden] {
  display: none;
}

/* === Takeovers: the moments big enough to stop the room ==================
   Always a light card, even over the dark wall or a dark-theme phone, so a
   takeover reads as an interruption, not another scene. Light party colours
   are restated here because the wall and dark mode retune them. */
.takeover {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: grid;
  place-items: center;
  padding: 16px;
  background: var(--scrim-takeover);
  opacity: 0;
  transition: opacity 0.35s ease;
  cursor: pointer;
}
.takeover[hidden] {
  display: none;
}
.takeover.in {
  opacity: 1;
}
.to-card {
  position: relative;
  overflow: hidden;
  width: min(720px, 100%);
  box-sizing: border-box;
  background: var(--surface);
  color: var(--ink);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-lift);
  padding: 28px 30px 24px 34px;
  transform: translateY(12px) scale(0.98);
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
  cursor: default;
}
.takeover.in .to-card {
  transform: none;
}
/* The party's colour, as a band down the left edge. */
.to-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 8px;
  background: var(--c, var(--accent));
}
.to-kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c, var(--accent));
}
.to-title {
  font-family: var(--font-display);
  font-weight: 640;
  font-size: clamp(28px, 5vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 10px 0 12px;
  color: var(--ink);
  text-wrap: balance;
}
.to-sub {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--body);
  text-wrap: pretty;
}
.to-seats {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.to-seats li {
  display: grid;
  grid-template-columns: auto minmax(0, max-content) 1fr;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
  font-size: 16px;
}
.to-seats li > span:last-child {
  color: var(--muted);
}
.to-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-top: 22px;
  font-size: 13px;
  color: var(--muted);
}
.to-foot .button {
  margin-left: auto;
  min-height: 44px;
}
.to-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 650;
  color: var(--ink);
}
/* How long it stays, as a hairline that empties. */
.to-timer {
  position: absolute;
  inset: auto 0 0 8px;
  height: 3px;
  background: var(--line);
}
.to-timer span {
  display: block;
  height: 100%;
  background: var(--c, var(--accent));
  transform-origin: left;
  animation: to-hold var(--hold, 8s) linear forwards;
}
@keyframes to-hold {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}

/* Phones: a sheet from the bottom, thumb-height, tap to dismiss. */
.takeover.on-phone {
  place-items: end center;
  padding: 0;
}
.takeover.on-phone .to-card {
  width: 100%;
  border-radius: var(--r-card) var(--r-card) 0 0;
  padding: 22px 16px calc(18px + env(safe-area-inset-bottom)) 24px;
  transform: translateY(100%);
}
.takeover.on-phone.in .to-card {
  transform: none;
}
.takeover.on-phone .to-title {
  font-size: 30px;
}
.takeover.on-phone .to-face {
  width: 56px;
  height: 56px;
}
.takeover.on-phone .to-head {
  gap: 14px;
}
.takeover.on-phone .to-seats li {
  grid-template-columns: auto 1fr;
}
.takeover.on-phone .to-seats li > span:last-child {
  grid-column: 2;
}

/* The TV wall: across-the-room sizes, in the wall's viewport units. */
.takeover.on-wall {
  --u: min(1vw, 1.78vh);
  background: var(--scrim-takeover-wall);
  cursor: default;
  padding: calc(var(--u) * 4);
}
.takeover.on-wall .to-card {
  width: min(calc(var(--u) * 78), 100%);
  padding: calc(var(--u) * 4) calc(var(--u) * 5) calc(var(--u) * 3.4)
    calc(var(--u) * 5.6);
  border-radius: calc(var(--u) * 1.4);
}
.takeover.on-wall .to-card::before {
  width: calc(var(--u) * 1.1);
}
.takeover.on-wall .to-kicker {
  font-size: calc(var(--u) * 1.5);
}
.takeover.on-wall .to-title {
  font-size: calc(var(--u) * 6);
  margin: calc(var(--u) * 1.4) 0 calc(var(--u) * 1.8);
}
.takeover.on-wall .to-head {
  gap: calc(var(--u) * 2.4);
  margin: calc(var(--u) * 1.4) 0 calc(var(--u) * 1.8);
}
.takeover.on-wall .to-head .to-title {
  margin: 0;
}
.takeover.on-wall .to-face {
  width: calc(var(--u) * 11);
  height: calc(var(--u) * 11);
  box-shadow: 0 0 0 calc(var(--u) * 0.4) var(--c, var(--muted));
}
.takeover.on-wall .to-face.face-initials {
  font-size: calc(var(--u) * 4);
}
.takeover.on-wall .to-seats li .face {
  width: calc(var(--u) * 3.4);
  height: calc(var(--u) * 3.4);
}
.takeover.on-wall .to-sub,
.takeover.on-wall .to-seats li {
  font-size: calc(var(--u) * 2.1);
}
.takeover.on-wall .to-seats li {
  padding: calc(var(--u) * 0.9) 0;
  gap: calc(var(--u) * 1.2);
}
.takeover.on-wall .to-seats .swatch {
  width: calc(var(--u) * 1.2);
  height: calc(var(--u) * 1.2);
}
.takeover.on-wall .to-foot {
  font-size: calc(var(--u) * 1.4);
  margin-top: calc(var(--u) * 3);
}
.takeover.on-wall .to-timer {
  height: calc(var(--u) * 0.45);
  left: calc(var(--u) * 1.1);
}

@media (prefers-reduced-motion: reduce) {
  .takeover,
  .to-card,
  .takeover.on-phone .to-card {
    transition: none;
    transform: none;
  }
  .to-timer {
    display: none;
  }
}

/* --- Electorate search ---------------------------------------------------- */

/* The tools wrapper only groups markup; its children lay out in the list. */
.desk-tools {
  display: contents;
}
.desk-tools > * {
  flex: none;
}
/* The list is as tall as its results; a search with one hit is one row. */
.desk-list > .seat-list,
.seat-list {
  min-height: 0;
}
.list-count {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 14px 8px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
}
.list-count b {
  color: var(--ink);
}
.link-button {
  font: inherit;
  font-weight: 650;
  color: var(--accent);
  padding: 4px 2px;
}
.link-button:hover {
  text-decoration: underline;
}
.seat-list .empty .link-button {
  display: inline;
}
.si-via {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--ink-2, var(--ink));
}

/* Phones: the list is the page. A seat opens on its own (.desk.focus), the
   search stays in reach while you scroll 71 seats, and no box scrolls inside
   the page. */
@media (max-width: 860px) {
  .desk:not(.focus) .desk-detail {
    display: none;
  }
  .desk-list > .seat-list,
  .seat-list {
    max-height: none;
    min-height: 0;
    overflow: visible;
  }
  .desk-list .search {
    position: sticky;
    top: calc(var(--mast-h) + var(--strip-h) + 8px);
    z-index: 5;
    height: 48px;
    /* A band of page colour around the box, so rows scrolling under it are
       hidden in the gap above and below rather than peeking through. */
    box-shadow:
      0 -10px 0 2px var(--bg),
      0 0 0 10px var(--bg);
  }
  .desk-list .search input {
    font-size: 16px; /* below 16px iOS zooms the page on focus */
  }
  .seat-item {
    min-height: 56px;
    justify-content: center;
    padding-block: 12px;
  }
  .sort button {
    min-height: 36px;
    padding-inline: 10px;
  }
  .list-count .link-button {
    min-height: 36px;
    padding-inline: 8px;
  }
}
@media (orientation: landscape) and (max-height: 500px) {
  .desk-list .search {
    top: calc(var(--mast-h) + 8px);
  }
}

/* The narrowest phones: give candidate names the room, let the prior note wrap. */
@media (max-width: 360px) {
  .cand-table th:nth-child(3),
  .cand-table th:nth-child(4) {
    width: 56px;
    letter-spacing: 0;
  }
  .cand-prior {
    white-space: normal;
  }
}

/* --- Roll call -------------------------------------------------------------- */
.rc-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin: 0 0 16px;
}
.rc-tabs,
.rc-basis,
.rc-start {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.rc-basis .muted,
.rc-start .muted {
  font-size: 12px;
  margin-right: 4px;
}
.rc-basis-note {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--muted);
}
.rc-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.rc-stats > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 18px;
  border-radius: var(--r-card);
  background: var(--surface);
  border: 1px solid var(--line);
}
.rc-stats b {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
}
.rc-stats span {
  font-weight: 600;
  color: var(--ink);
}
.rc-stats small {
  font-size: 12px;
  color: var(--muted);
}
.rc-house {
  display: grid;
}
.rc-house-row {
  display: grid;
  grid-template-columns: minmax(130px, 200px) minmax(0, 1fr) 110px 110px;
  align-items: center;
  gap: 14px;
  padding: 10px 6px;
  border: 0;
  border-top: 1px solid var(--line);
  background: none;
  text-align: left;
  color: inherit;
  font: inherit;
  cursor: pointer;
  border-radius: 0;
}
.rc-house-row:hover {
  background: var(--surface-2);
}
.rc-hr-name {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.rc-hr-name b {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rc-hr-bar {
  display: flex;
  height: 12px;
  border-radius: 99px;
  overflow: hidden;
  background: var(--surface-2);
}
.rc-hr-bar i {
  display: block;
  height: 100%;
}
.rc-e {
  background: var(--c);
}
.rc-l {
  background: color-mix(in srgb, var(--c) 45%, var(--surface));
}
.rc-hr-seats {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.15;
}
.rc-hr-seats b {
  font-size: 18px;
  color: var(--ink);
}
.rc-hr-seats small,
.rc-hr-new .muted {
  font-size: 11px;
  color: var(--muted);
}
.rc-hr-new {
  text-align: right;
}
.tag.rc-new {
  background: var(--ok-soft);
  color: var(--ink);
  border-color: transparent;
}
.tag.rc-mp {
  background: var(--surface-2);
  color: var(--muted);
}
.rc-grid {
  align-items: start;
}
.rc-group {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 18px 0 8px;
  font-size: 13px;
  font-weight: 650;
  color: var(--ink);
}
.rc-group .num {
  color: var(--muted);
  font-weight: 600;
}
.card-head + .rc-group,
.rc-io .rc-group {
  margin-top: 4px;
}
.rc-names {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.rc-names li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  min-width: 0;
}
.rc-names li > span:not(.tag):not(.face):not(.rc-rank) {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.rc-names b {
  font-weight: 650;
  color: var(--ink);
  line-height: 1.25;
}
.rc-names small {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.35;
}
.rc-names .face {
  margin-left: 2px;
}
.rc-diff .rc-moves {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 8px;
}
.rc-move {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 99px;
  border: 1px solid var(--line-strong);
  font-size: 13px;
}
.rc-flips {
  list-style: none;
  margin: 0;
  padding: 0;
}
.rc-flips li {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  padding: 6px 0;
  border-top: 1px solid var(--line);
  font-size: 14px;
}
.rc-flips span {
  color: var(--muted);
}
.rc-io {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 24px;
  margin-top: 12px;
}
.rc-chips {
  margin-bottom: 12px;
}
.rc-party .card-head {
  border-left: 4px solid var(--c);
  padding-left: 12px;
}
.rc-explain {
  margin: 4px 0 8px;
  line-height: 1.55;
}
.rc-near {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--muted);
}
.rc-near .icon {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 1px;
}
.rc-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin: 8px 0 6px;
}
.rc-cell {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: var(--surface-2);
}
.rc-cell.e {
  background: var(--c);
}
.rc-cell.l {
  background: color-mix(in srgb, var(--c) 45%, var(--surface));
}
.rc-cell.s {
  background: none;
  border: 1px dashed var(--muted);
}
.rc-cell.n {
  background: none;
  border: 1.5px dashed color-mix(in srgb, var(--c) 70%, var(--surface));
}
.rc-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-bottom: 18px;
  font-size: 12px;
  color: var(--muted);
}
.rc-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.rc-legend .rc-cell {
  width: 11px;
  height: 11px;
}
.rc-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 8px 32px;
}
.rc-col h3 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 650;
  color: var(--ink);
}
.rc-col h3 small {
  margin-left: auto;
  font-weight: 500;
  color: var(--muted);
}
.rc-ranked li {
  border-top: 1px solid var(--line);
}
.rc-rank {
  flex: none;
  width: 26px;
  text-align: right;
  font-size: 12px;
  color: var(--muted);
}
.rc-ranked .rc-electorate b,
.rc-ranked .rc-electorate .rc-rank {
  color: var(--muted);
  font-weight: 550;
}
.rc-ranked .rc-electorate .face {
  opacity: 0.6;
}
.rc-ranked .rc-next,
.rc-ranked .rc-out {
  opacity: 0.72;
}
.rc-ranked .rc-next .face {
  box-shadow: 0 0 0 2px var(--c, var(--muted));
}
.rc-cut {
  border-top: 2px solid var(--ink) !important;
  padding: 4px 0 2px !important;
}
.rc-cut span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}
.rc-col .button {
  margin-top: 10px;
}
.rc-sim .card-head {
  flex-wrap: wrap;
  gap: 10px;
}
.rc-sim-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 8px 32px;
}
.rc-sim-row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) 84px;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
}
.rc-sim-party {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rc-sim-num {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--muted);
}
.rc-sim-num input {
  width: 64px;
  min-height: 36px;
}
.rc-seat {
  display: grid;
  grid-template-columns: minmax(110px, 160px) minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}
.rc-seat-name {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.rc-seat-name b {
  font-weight: 650;
  color: var(--ink);
}
.rc-seat-name small {
  font-size: 11px;
  color: var(--muted);
}
.rc-seat-picks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.rc-pick {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 4px 10px 4px 6px;
  border-radius: 99px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.rc-pick small {
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
}
.rc-pick.on {
  border-color: var(--c);
  box-shadow: inset 0 0 0 1px var(--c);
  background: color-mix(in srgb, var(--c) 10%, var(--surface));
}
.rc-pick .face {
  box-shadow: 0 0 0 1.5px var(--c, var(--muted));
}
.rc-sim .rc-seat + .button,
.rc-sim-grid .button {
  margin-top: 10px;
}
@media (max-width: 860px) {
  .rc-house-row {
    grid-template-columns: minmax(0, 1fr) 84px;
    gap: 6px 12px;
  }
  .rc-hr-bar {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .rc-hr-new {
    display: none;
  }
  .rc-cols,
  .rc-sim-grid,
  .rc-io {
    grid-template-columns: minmax(0, 1fr);
  }
  .rc-sim-row {
    grid-template-columns: minmax(0, 1fr) 84px;
  }
  .rc-sim-row input[type="range"] {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .rc-seat {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }
  .rc-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .rc-stats b {
    font-size: 26px;
  }
}
.rc-sim {
  margin-bottom: 16px;
}
/* The tab bar's short labels, for seven tabs on the narrowest phones. */
.tabbar .t-tiny {
  display: none;
}
@media (max-width: 374px) {
  .tabbar.crowded button {
    font-size: 10px;
    letter-spacing: -0.01em;
  }
  .tabbar.crowded button:has(.t-tiny) .t-full {
    display: none;
  }
  .tabbar.crowded .t-tiny {
    display: inline;
  }
}

/* Candidate profiles keep names readable and native links keyboard accessible. */
.candidate-profile-link {
  color: inherit;
  text-decoration: none;
}
.candidate-profile-link:hover {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.candidate-profile-link:focus-visible,
.candidate-nav-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.nav .candidate-nav-link {
  color: var(--muted);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 12px;
  white-space: nowrap;
}

/* Roll-call names visibly lead to individual candidate profiles. */
.rc-names b > .candidate-profile-link {
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
}
.rc-names b > .candidate-profile-link:hover {
  text-decoration-color: currentColor;
}
.rc-names > li > .candidate-profile-link {
  flex-shrink: 0;
}

/* === Masthead: one line at every width ===
   Nothing in the header wraps. As the window narrows the extras collapse in
   order of importance: the clock, then button labels, then the status word.
   The nav scrolls sideways as a last resort rather than breaking a line. */
.nav button,
.nav .candidate-nav-link,
.status-pill,
.clock,
.masthead-tools .button {
  white-space: nowrap;
}
.nav {
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.nav::-webkit-scrollbar {
  display: none;
}
.nav button {
  flex: none;
}
/* Candidates is a link, but it sits in the nav and should look like the rest. */
.nav .candidate-nav-link {
  display: inline-flex;
  flex: none;
  align-items: center;
  height: 34px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: inherit;
  font-weight: 550;
}
.nav .candidate-nav-link:hover {
  color: var(--ink);
  background: var(--surface-3);
}
@media (max-width: 1440px) {
  .clock {
    display: none;
  }
  #enter-wall span {
    display: none;
  }
  #enter-wall {
    padding: 0 9px;
  }
}
@media (max-width: 1280px) {
  .account-button span {
    display: none;
  }
  .account-button {
    padding: 0 9px;
  }
  .nav button,
  .nav .candidate-nav-link {
    padding: 0 9px;
  }
}
@media (min-width: 861px) and (max-width: 1100px) {
  .masthead {
    gap: 12px;
  }
  .status-pill {
    padding: 0 9px;
  }
  #status-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .masthead-tools {
    gap: 8px;
  }
}
@media (min-width: 861px) and (max-width: 1023px) {
  /* The mark alone; the nav needs the room. */
  .masthead .brand-text {
    display: none;
  }
}
@media (max-width: 400px) {
  /* Smallest phones: the dot alone keeps Party Mode and Sign in on screen. */
  .status-pill {
    padding: 0 9px;
  }
  #status-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}