/* The Order Paper: every sheet, card and menu is a piece of printed parliamentary paper laid over the dark room.
   Cream paper, ink, thin rules, small caps for labels, one serif, bench green for the one action that matters,
   brass for rules and the bells, rubber stamps for outcomes. Safe-area padding and one-thumb sheets throughout. */

@font-face {
  font-family: "Newsreader";
  src: url("../assets/fonts/Newsreader-Regular.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Newsreader";
  src: url("../assets/fonts/Newsreader-Italic.woff2") format("woff2");
  font-weight: 300 800;
  font-style: italic;
  font-display: block;
}

:root {
  --paper: #f3ead8;
  --paper-2: #e9dec6;
  --paper-3: #d9cbae;
  --ink: #1d1a16;
  --ink-2: #4e463c;
  --ink-3: rgba(29, 26, 22, 0.18);
  --ink-4: rgba(29, 26, 22, 0.08);
  --bench: #2f5a3c;
  --bench-2: #3a6a48;
  --brass: #b8923a;
  --brass-ink: #7a5d1e; /* brass dark enough to read as small text on paper */
  --red: #a8322d;
  --yea: var(--bench);
  --nay: var(--red);
  --grey: #6b6f76;
  --amber: #c98f2a;
  /* Longlight's brand: purple, near-black, the terracotta sun and warm off-white (from the studio mark). */
  --brand: #6c46b5;
  --brand-2: #7b3fc4;
  --brand-ink: #141413;
  --brand-sun: #d97757;
  --brand-paper: #e1ded5;
  --bg: #15130f;
  --serif: "Newsreader", Georgia, "Iowan Old Style", "Times New Roman", serif;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.12 0 0 0 0 0.09 0 0 0 0 0.05 0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --stamp-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.6 -0.25'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%231d1a16' stroke-width='1.6'/%3E%3C/svg%3E");
  --agenda-h: calc(68px + env(safe-area-inset-bottom));
  /* Softness: rounded paper, warm shadows instead of hard rules. */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --line: rgba(29, 26, 22, 0.1);
  --fill: rgba(255, 252, 244, 0.55);
  --lift: 0 1px 1px rgba(60, 40, 15, 0.06), 0 2px 8px rgba(60, 40, 15, 0.08);
  --float: 0 2px 6px rgba(0, 0, 0, 0.18), 0 8px 24px rgba(0, 0, 0, 0.22);
}

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.4;
  overflow: hidden;
  -webkit-text-size-adjust: 100%;
}

#scene {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  display: block;
  touch-action: none;
}

/* The overlay. The vignette sits under its children (z -1 inside this stacking context) and over the canvas. */
#ui {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
#ui::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, transparent 52%, rgba(0, 0, 0, 0.38) 100%);
}

/* Room switches cut through ink-black and fade back in. */
#fade {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: #0e0c0a;
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms ease-out;
}
#fade.on {
  opacity: 1;
  transition: none;
}

.labels {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.hidden {
  display: none !important;
}

/* ---- Paper -------------------------------------------------------------------------------------------- */

.paper,
.sheet,
.count-board,
.agenda,
.toast,
.start-inner,
.seat-label {
  background-color: var(--paper);
  background-image: var(--grain);
  color: var(--ink);
}

/* ---- Top bar: a masthead tag and paper tags for the buttons ------------------------------------------- */

.topbar {
  position: absolute;
  top: calc(10px + env(safe-area-inset-top));
  left: calc(10px + env(safe-area-inset-left));
  right: calc(10px + env(safe-area-inset-right));
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
.topbar > * {
  pointer-events: auto;
}
.brand::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--brand);
  vertical-align: 1px;
}
.brand {
  margin-right: auto;
  height: 40px;
  line-height: 40px;
  padding: 0 12px 0 10px;
  background-color: var(--paper);
  background-image: var(--grain);
  color: var(--ink);
  border-radius: var(--r-md);
  font-weight: 600;
  font-variant-caps: normal;
  letter-spacing: 0.01em;
  box-shadow: var(--float);
}
.topbar .btn {
  min-height: 40px;
  padding: 0 12px;
  background-color: var(--paper);
  background-image: var(--grain);
  border: 0;
  border-radius: var(--r-md);
  color: var(--ink);
  font-variant-caps: normal;
  letter-spacing: 0.01em;
  font-weight: 600;
  box-shadow: var(--float);
}

.status {
  position: absolute;
  top: calc(60px + env(safe-area-inset-top));
  left: calc(10px + env(safe-area-inset-left));
  font: 11px/1.3 ui-monospace, monospace;
  color: rgba(243, 234, 216, 0.75);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  pointer-events: none;
}

.fatal {
  position: absolute;
  inset: 30% 16px auto;
  text-align: center;
  color: var(--paper);
}

/* ---- Buttons --------------------------------------------------------------------------------------------- */

.btn {
  min-height: 48px;
  min-width: 48px;
  padding: 0 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--fill);
  box-shadow: var(--lift);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform 100ms ease, background-color 140ms ease, box-shadow 140ms ease;
}
.btn:active {
  transform: scale(0.98);
  background-color: var(--paper-2);
  box-shadow: none;
}
.btn.primary {
  background: var(--bench);
  border-color: var(--bench);
  color: var(--paper);
  font-weight: 600;
  box-shadow: 0 1px 1px rgba(20, 50, 30, 0.2), 0 3px 10px rgba(20, 50, 30, 0.22);
}
.btn.primary:active {
  background-color: var(--bench-2);
}
.btn:disabled {
  opacity: 0.4;
}
.btn.icon {
  padding: 0;
  width: 48px;
  font-size: 18px;
}
.btn.wide {
  width: 100%;
  min-height: 56px;
  margin: 16px 0 6px;
  font-size: 18px;
}
.btn.wide small {
  display: block;
  font-size: 13px;
  font-weight: 400;
  font-variant-caps: normal;
  letter-spacing: 0.01em;
}
.btn.sub {
  margin-left: 16px;
  font-size: 14px;
  background: transparent;
  box-shadow: none;
  border-style: dashed;
  border-color: var(--ink-3);
}

/* ---- Sheets: set down like a sheet of paper, one thumb, portrait first --------------------------------- */

.sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--agenda-h);
  max-height: 66dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding: 10px 18px 16px;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.12), 0 -16px 40px rgba(0, 0, 0, 0.32);
  pointer-events: auto;
  font-size: 16px;
  line-height: 1.4;
  animation: sheet-in 180ms ease-out;
}
@keyframes sheet-in {
  from {
    transform: translateY(24px);
    opacity: 0;
  }
}
@media (orientation: landscape) and (min-width: 700px) {
  /* One width for the side sheet, so the agenda bar can end where it begins. */
  :root {
    --side-w: min(500px, 52vw);
  }
  .sheet {
    left: auto;
    width: var(--side-w);
    top: calc(64px + env(safe-area-inset-top));
    bottom: 0;
    max-height: none;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
    border-radius: var(--r-lg) 0 0 var(--r-lg);
  }
}
@media (orientation: portrait) {
  .office-sheet,
  .caucus-sheet,
  .riding-sheet,
  .division-sheet {
    max-height: 70dvh;
  }
  /* The weekend paper and the morning's order paper are pages to read; give them the room. */
  .agenda-sheet {
    max-height: 80dvh;
  }
}

.sheet-handle {
  width: 36px;
  height: 4px;
  margin: 2px auto 10px;
  border-radius: 2px;
  background: var(--ink-3);
}

.sheet h2 {
  margin: 0 0 4px;
  font-size: 22px;
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.sheet h3,
.deal-col h4 {
  margin: 16px 0 6px;
  padding-bottom: 3px;
  font-size: 15px;
  font-weight: 500;
  font-style: italic;
  font-variant-caps: normal;
  letter-spacing: 0.01em;
  color: var(--ink-2);
  border-bottom: 1px solid var(--line);
}
.sheet p {
  margin: 4px 0;
}
/* The riding: what was just said stays above the next visitor, quietly. */
.last-word {
  font-size: 13px;
  font-style: italic;
  margin: 0 0 6px;
}
.muted,
.order-paper p,
.hint,
.count,
.riding,
.seat,
.party-blurb {
  color: var(--ink-2);
  font-size: 14px;
}
.seat.familiar {
  font-style: italic;
}
.unknown {
  color: var(--grey);
  font-style: italic;
}
.warn {
  color: var(--red);
}
.bells {
  color: var(--brass);
  font-weight: 600;
  animation: bells 1s ease-in-out infinite alternate;
}
@keyframes bells {
  to {
    color: var(--ink);
  }
}

/* Dialogue and notes read like quotations on the page. */
blockquote.line {
  margin: 10px 0;
  padding: 10px 14px;
  border-radius: var(--r-md);
  background: var(--paper-2);
  font-size: 17px;
  line-height: 1.4;
}
.tutorial,
.whip-call {
  margin: 8px 0;
  padding: 10px 14px;
  border-radius: var(--r-md);
  background: rgba(47, 90, 60, 0.09);
  font-size: 15px;
}
.note {
  font-size: 14px;
}
/* A term of art on its first use: a dotted line under the word, in the running text's own type. */
.term {
  all: unset;
  cursor: pointer;
  text-decoration: underline dotted var(--ink-2);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.term:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.note.good {
  color: var(--bench);
}
.note.bad {
  color: var(--red);
}

/* ---- The bells: the clock bar and the map of the Hill --------------------------------------------- */

/* The clock stays in view while the sheet scrolls to the map. */
.bells-head {
  position: sticky;
  top: -10px;
  z-index: 2;
  margin: 0 -18px;
  padding: 2px 18px 0;
  background-color: var(--paper);
  background-image: var(--grain);
}
.bells-head .bells {
  margin: 0;
  padding-top: 6px;
}
.bells-bar {
  height: 3px;
  margin: 4px 0 10px;
  background: var(--ink-4);
  overflow: hidden;
}
.bells-bar i {
  display: block;
  height: 100%;
  background: var(--brass);
  transform-origin: left center;
  will-change: transform;
}
.bells-late .bells-bar i {
  background: var(--red);
}
.bells-late .bells {
  color: var(--red);
  animation-duration: 0.35s;
}
@media (orientation: portrait) {
  .division-sheet:has(.hill) {
    max-height: 76dvh;
  }
}
.hill {
  margin: 4px 0 6px;
}
.hill-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--ink-3);
  margin: 12px 0 4px;
}
.hill-head h3 {
  margin: 0;
  border: 0;
}
.hill-head .staff {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--ink-2);
  font-variant-caps: normal;
  letter-spacing: 0.01em;
}
.hill-head .staff i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
  transition: background-color 0.2s;
}
.hill-head .staff i.free {
  background: var(--ink);
}
.hill-head .unknown {
  display: block;
  font-size: 12px;
}
.hill-help {
  font-size: 13px;
}
.hill-map {
  margin: 6px -4px 2px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 4px var(--ink-4);
}
.hill-svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 46dvh;
  font-family: var(--serif);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
@media (orientation: landscape) {
  .hill-svg {
    max-height: 60dvh;
  }
}
.hill-note {
  min-height: 2.6em;
  margin-top: 6px !important;
  font-style: italic;
}
.hill-svg .plan * {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.hill-svg .river {
  fill: rgba(60, 90, 110, 0.14);
  stroke: rgba(60, 90, 110, 0.5);
}
.hill-svg .lawn {
  fill: rgba(47, 90, 60, 0.08);
  stroke: none;
}
.hill-svg .road {
  stroke: var(--ink-3);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hill-svg .road-edge {
  stroke: var(--ink-3);
  stroke-dasharray: 3 3;
}
.hill-svg .bldg {
  fill: var(--paper);
  stroke-width: 1.4;
}
.hill-svg .lobby {
  fill: rgba(184, 146, 58, 0.16);
  stroke-dasharray: 2 2;
}
.hill-svg .chamber {
  fill: rgba(47, 90, 60, 0.12);
}
.hill-svg .bench {
  stroke: var(--bench);
  stroke-width: 2;
}
.hill-svg .table,
.hill-svg .chair {
  fill: var(--brass);
  stroke: none;
}
.hill-svg .win {
  stroke: var(--ink-2);
}
.hill-svg .face {
  fill: var(--paper);
}
.hill-svg .plane {
  fill: var(--ink-2);
  stroke: none;
}
.hill-svg .scale {
  stroke: var(--ink-2);
}
.hill-svg text {
  fill: var(--ink-2);
  stroke: none;
  font-size: 9px;
  font-weight: 450;
  text-anchor: middle;
}
.hill-svg .place {
  font-size: 8px;
  font-weight: 600;
  font-variant-caps: normal;
  letter-spacing: 0.01em;
  fill: var(--ink);
}
.hill-svg .chamber-label {
  fill: var(--bench);
}
.hill-svg .note {
  font-style: italic;
  font-size: 8px;
}
.hill-svg .walker {
  stroke: var(--paper);
  stroke-width: 0.6;
}
.hill-svg .arrived {
  stroke: var(--paper);
  stroke-width: 1;
}

/* A member on the map: a party dot with a pulsing halo, the name, and the trip in seconds. */
.hill-svg .pip {
  cursor: pointer;
  outline: none;
  transition: opacity 0.6s;
}
.hill-svg .pip .halo {
  fill: none;
  stroke: var(--brass);
  stroke-width: 1.5;
  transform-box: fill-box;
  transform-origin: center;
  animation: pip-halo 1.4s ease-out infinite;
}
.hill-svg .pip .dot {
  stroke: var(--ink);
  stroke-width: 1.4;
  transition: transform 0.15s;
  transform-box: fill-box;
  transform-origin: center;
}
.hill-svg .pip .name {
  fill: var(--ink);
  font-size: 9.5px;
  font-weight: 600;
  paint-order: stroke;
  stroke: var(--paper-2);
  stroke-width: 3px;
  stroke-linejoin: round;
}
.hill-svg .pip .trip {
  fill: var(--ink-2);
  font-weight: 400;
  font-size: 8.5px;
}
.hill-svg .pip .hit {
  fill: transparent;
}
.hill-svg .pip:active .dot,
.hill-svg .pip:focus-visible .dot {
  transform: scale(1.3);
}
.hill-svg .pip:focus-visible .halo {
  stroke: var(--ink);
}
@keyframes pip-halo {
  from {
    transform: scale(0.6);
    opacity: 0.9;
  }
  to {
    transform: scale(1.5);
    opacity: 0;
  }
}
.hill-svg .pip.sent .halo {
  stroke: var(--ink-2);
  stroke-dasharray: 3 3;
  animation: pip-wait 2.4s linear infinite;
}
@keyframes pip-wait {
  to {
    transform: rotate(360deg);
  }
}
.hill-svg .pip.far {
  cursor: default;
  opacity: 0.38;
}
.hill-svg .pip.far .halo,
.hill-svg .pip.in .halo,
.hill-svg .pip.missed .halo {
  animation: none;
  opacity: 0;
}
.hill-svg .pip.far .trip,
.hill-svg .pip.missed .trip {
  fill: var(--red);
  font-style: italic;
}
.hill-svg .pip.in {
  opacity: 0;
}
.hill-svg .pip.missed .dot {
  fill: var(--paper-3) !important;
  stroke-dasharray: 2 2;
}
.hill-svg .runner {
  fill: var(--ink);
  stroke: var(--paper);
  stroke-width: 1.2;
}
.hill-svg .follower {
  stroke: var(--ink);
  stroke-width: 1.2;
}
@media (prefers-reduced-motion: reduce) {
  .hill-svg .pip .halo {
    animation: none;
    opacity: 0.6;
  }
}

/* Key/value rows, ruled like a printed table. */
.kvs {
  display: grid;
  gap: 0;
}
.kv {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
.kv .k {
  color: var(--ink-2);
  flex: none;
}
.kv .v {
  text-align: right;
}
.kv.stale .v {
  opacity: 0.5;
}

/* Choice lists: a stack of ruled buttons, the primary one in bench green. */
.choices {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}
.choices .btn {
  min-height: 52px;
  text-align: left;
  padding: 8px 14px;
}
.choices .btn.primary {
  border-color: var(--bench);
}
.choices .btn small.approach,
.btn.primary small.approach {
  display: block;
  margin: 2px 0;
  font-size: 14px;
  line-height: 1.3;
  font-variant-caps: normal;
  letter-spacing: 0.01em;
  color: var(--brass-ink);
}
.btn.primary small.approach {
  color: rgba(243, 234, 216, 0.88);
}
.card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

/* Badges: small paper tags; moods carry their colour as an ink bar, not a fill. */
.badge {
  display: inline-block;
  padding: 1px 10px;
  border: 0;
  border-radius: 999px;
  background: var(--paper-2);
  color: var(--ink);
  font-size: 13px;
  font-variant-caps: normal;
  letter-spacing: 0.01em;
  vertical-align: middle;
}
.badge.you {
  background: var(--bench);
  border-color: var(--bench);
  color: var(--paper);
}
.badge.mood-cooperative { box-shadow: inset 10px 0 0 -4px #2e9e5b; padding-left: 14px; }
.badge.mood-guarded { box-shadow: inset 10px 0 0 -4px var(--grey); padding-left: 14px; }
.badge.mood-angry { box-shadow: inset 10px 0 0 -4px #c8423b; padding-left: 14px; }
.badge.mood-anxious { box-shadow: inset 10px 0 0 -4px var(--amber); padding-left: 14px; }

.chip {
  width: 8px;
  height: 40px;
  border-radius: 999px;
  flex: none;
}
.chip.small {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  vertical-align: middle;
}
.card-head,
.book-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.card-head > .chip {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  align-self: flex-start;
  margin-top: 8px;
}
.card-head .who {
  flex: 1;
  min-width: 0;
}
.card-head .who p {
  color: var(--ink-2);
  font-size: 14px;
}
.slots {
  color: var(--brass);
  letter-spacing: 3px;
}

/* The whip's count, one ruled line under an order-paper item or at the top of the bells sheet. */
.count-line {
  margin: 6px 0 2px;
  padding: 8px 12px;
  border-radius: var(--r-md);
  background: rgba(201, 162, 74, 0.14);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.count-line small {
  color: var(--ink-2);
  font-size: 13px;
}
.budget {
  font-variant-caps: normal;
  letter-spacing: 0.01em;
}
.book-list li .btn {
  min-height: 40px;
  padding: 0 10px;
  font-size: 14px;
  flex: none;
}
.ledger-sheet,
.book {
  top: calc(64px + env(safe-area-inset-top));
  max-height: none;
  z-index: 6; /* above whichever room sheet is open */
}
/* The game menu too: opened during a division, it stays on top of the count board and of the scene the vote hands on to. */
.game-menu {
  z-index: 6;
}
.ledger-sheet .book-list .main small {
  white-space: normal;
}
.ledger-sheet .when {
  font-size: 12px;
  color: var(--ink-2);
  font-variant-caps: normal;
  letter-spacing: 0.01em;
  flex: none;
}

/* ---- Stamps: outcomes are rubber-stamped in ink -------------------------------------------------------- */

/* Question Period: the Speaker's call in the chair's voice, who is speaking, the gallery's stamp. */
.qp-sheet blockquote.line.call {
  font-style: italic;
  border-left-color: var(--ink-2);
}
.qp-sheet .who,
.qp-sheet .to {
  font-size: 13px;
  font-variant-caps: normal;
  letter-spacing: 0.01em;
}
.qp-sheet .choices .btn small.approach {
  margin-bottom: 4px;
}
.qp-sheet .verdict {
  margin: 4px 0 2px;
  text-align: center;
}

.stamp {
  display: inline-block;
  margin: 6px 4px 2px 0;
  padding: 1px 10px;
  border: 3px solid currentColor;
  border-radius: 4px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--ink);
  opacity: 0.9;
  transform: rotate(-5deg);
  -webkit-mask-image: var(--stamp-mask);
  mask-image: var(--stamp-mask);
  animation: stamp-in 170ms cubic-bezier(0.2, 1.5, 0.4, 1);
}
.stamp.big {
  font-size: 20px;
  padding: 2px 14px;
}
.stamp.yea,
.stamp.good { color: var(--yea); }
.stamp.nay,
.stamp.bad { color: var(--nay); }
.stamp.grey { color: var(--grey); }
.stamp.brass { color: var(--brass); }
@keyframes stamp-in {
  from {
    transform: rotate(-5deg) scale(1.3);
    opacity: 0;
  }
}

/* ---- The record: the last page of a career ----------------------------------------------------------- */

.record-sheet .kvs {
  margin-top: 10px;
}
.record-sheet .stamp.big {
  font-size: 24px;
}
.election-sheet .kv .k .chip {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 4px;
  border-radius: 2px;
  vertical-align: middle;
}
blockquote.line.revolt {
  border-left-color: var(--red);
}

/* ---- The Book: the whip's working list, a full-height ledger ------------------------------------------ */

.book {
  top: calc(64px + env(safe-area-inset-top));
  max-height: none;
}
.book-head h2 {
  flex: 1;
}
input.search,
.filters select,
.filters .picker,
.form input,
.form select,
.form .picker {
  width: 100%;
  box-sizing: border-box;
  min-height: 46px;
  padding: 6px 0;
  border: 0;
  border-bottom: 1px solid var(--ink-3);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 17px;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
}
input.search:focus,
.form input:focus,
.form select:focus,
.form .picker:focus-visible,
.filters .picker:focus-visible,
.filters select:focus {
  border-bottom-color: var(--bench);
  box-shadow: 0 1.5px 0 var(--bench);
}
input.search {
  margin: 8px 0 4px;
}
input::placeholder {
  color: var(--ink-2);
  opacity: 0.7;
}
.filters select,
.form select,
.form .picker,
.filters .picker {
  padding-right: 22px;
  background-image: var(--chevron);
  background-repeat: no-repeat;
  background-position: right 4px center;
}
.filters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 14px;
}
.filters select,
.filters .picker,
.picker.compact {
  font-size: 15px;
  min-height: 42px;
}
/* A paper picker: looks like the field it replaces, opens an Order Paper list instead of the phone's own. */
.picker {
  display: flex;
  align-items: center;
  text-align: left;
  cursor: pointer;
  margin: 0;
  -webkit-tap-highlight-color: transparent;
}
.picker:active {
  color: var(--bench);
}
.picker-value {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.paper-list-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40; /* above every sheet, the title page's settings included */
  background: rgba(10, 8, 6, 0.45);
  animation: fade-in 160ms ease-out;
}
.paper-list-backdrop.leaving {
  animation: fade-out 160ms ease-in forwards;
}
.paper-list-backdrop.leaving .paper-list {
  animation: sheet-out 160ms ease-in forwards;
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
}
@keyframes fade-out {
  to {
    opacity: 0;
  }
}
@keyframes sheet-out {
  to {
    transform: translateY(24px);
    opacity: 0;
  }
}
.sheet.paper-list {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  width: auto;
  max-height: min(70dvh, 560px);
  padding: 8px 0 max(8px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
}
.paper-list header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 10px 6px 18px;
  border-bottom: 1px solid var(--ink-3);
}
.paper-list h3 {
  flex: 1;
  margin: 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 19px;
}
.paper-list [role='listbox'] {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.paper-list [role='option'] {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 8px 18px;
  border: 0;
  border-bottom: 1px solid var(--ink-3);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 17px;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.paper-list [role='option'] > span:first-child {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.paper-list [role='option'] b {
  font-weight: 500;
}
.paper-list [role='option'] small {
  font-size: 13px;
  color: var(--ink-2);
}
.paper-list [role='option'] .tick {
  color: var(--bench);
  opacity: 0;
  font-size: 16px;
}
.paper-list [role='option'].on b {
  font-weight: 700;
}
.paper-list [role='option'].on .tick {
  opacity: 1;
}
.paper-list [role='option']:active,
.paper-list [role='option']:focus-visible {
  background: rgba(0, 0, 0, 0.06);
  outline: none;
}
@media (orientation: landscape) and (min-width: 700px) {
  .sheet.paper-list {
    left: 50%;
    right: auto;
    bottom: auto;
    top: 50%;
    width: min(440px, 60vw);
    max-height: min(80dvh, 560px);
    transform: translate(-50%, -50%);
    border-radius: var(--r-lg);
    animation: paper-list-in 180ms ease-out;
  }
  @keyframes paper-list-in {
    from {
      transform: translate(-50%, -50%) translateY(24px);
      opacity: 0;
    }
  }
  @keyframes sheet-out {
    to {
      transform: translate(-50%, -50%) translateY(24px);
      opacity: 0;
    }
  }
}
.book-list,
.order-paper,
.feed {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
}
.book-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 4px 0;
  border-bottom: 1px solid var(--ink-3);
  cursor: pointer;
}
.book-list li.done {
  opacity: 0.5;
}
.book-list .bar {
  width: 10px;
  height: 10px;
  align-self: flex-start;
  margin-top: 13px;
  border-radius: 50%;
  flex: none;
}
.book-list .main {
  flex: 1;
  min-width: 0;
}
.book-list .main small {
  display: block;
  color: var(--ink-2);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.book-list .known {
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--brass);
  flex: none;
}
.book-list .risk {
  font-size: 13px;
  color: var(--ink-2);
  flex: none;
}
.mp-card {
  max-height: 55dvh;
}

/* ---- Agenda: the strip of paper at the foot of the screen ------------------------------------------- */

.agenda {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  box-shadow: 0 -1px 0 var(--line), 0 -10px 30px rgba(0, 0, 0, 0.3);
  pointer-events: auto;
  max-height: 50dvh;
  overflow-y: auto;
}
/* In landscape the agenda keeps to the left under the room, so a side sheet runs the full height. */
@media (orientation: landscape) and (min-width: 700px) {
  .agenda {
    right: calc(var(--side-w) + 36px); /* the side sheet's width plus its side padding */
    border-radius: 0 var(--r-lg) 0 0;
  }
}
.agenda-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 4px;
}
/* The date line: the day and your aim on top, the latest news under them. Two tap targets share it:
   the day and the news open the feed, the aim opens the aim. */
.agenda-info {
  flex: 1;
  min-width: 0;
  container-type: inline-size;
}
.agenda-lines {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  column-gap: 8px;
}
.agenda-date,
.agenda-news,
.agenda-aim {
  min-width: 0;
  background: none;
  border: 0;
  color: var(--ink);
  font: inherit;
  text-align: left;
}
/* Continue and Skip keep to their size so the date line keeps room for the aim. */
.agenda-row > .btn {
  flex: none;
  padding: 0 14px;
}
.agenda-date {
  min-height: 30px;
  padding: 0 4px;
  font-weight: 600;
}
.agenda-date .day {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.agenda-date .day span {
  font-weight: 400;
  color: var(--ink-2);
}
.agenda-news {
  grid-column: 1 / -1;
  min-height: 22px;
  padding: 0 4px 2px;
  font-size: 13px;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.agenda-aim {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 6px;
  justify-self: end;
  max-width: 100%;
  min-height: 28px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(184, 146, 58, 0.14);
  box-shadow: inset 0 0 0 1px rgba(184, 146, 58, 0.35);
  font-size: 13px;
}
/* A bigger hit area than the chip it draws. */
.agenda-aim::after {
  content: '';
  position: absolute;
  inset: -8px -4px;
}
.agenda-aim .n {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.agenda-aim b {
  flex: none;
  font-weight: 650;
  color: var(--brass-ink);
  font-variant-numeric: tabular-nums;
}
.job-label,
.aim-week .k,
.aim-sheet .kicker {
  flex: none;
  font-size: 12px;
  font-weight: 650;
  color: var(--brass-ink);
}
/* On narrow phones the day has the top line to itself and the aim moves down beside the news. */
@container (max-width: 230px) {
  .agenda-date {
    grid-column: 1 / -1;
  }
  .agenda-aim {
    grid-row: 2;
    justify-self: start;
    min-height: 24px;
    padding: 1px 8px;
  }
  .agenda-news {
    grid-column: 2;
    grid-row: 2;
    padding-left: 0;
  }
}
.agenda-aim[aria-expanded="true"] {
  background: rgba(184, 146, 58, 0.28);
}

/* "Your job here": one line under a scene's title saying what the player is there to do. */
.job {
  margin: 6px 0 10px;
  padding: 8px 12px;
  border-left: 3px solid var(--brass);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: rgba(184, 146, 58, 0.08);
  font-size: 15px;
  line-height: 1.4;
}
.job-label {
  display: block;
  margin-bottom: 1px;
}
/* A section folded shut under a heading that reads like the sheet's other headings; a tap opens it. */
.fold-block {
  margin: 12px 0 6px;
}
.fold-block summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 4px 0;
  list-style: none;
  cursor: pointer;
  font-size: 15px;
  font-style: italic;
  letter-spacing: 0.01em;
  color: var(--ink-2);
  border-bottom: 1px solid var(--line);
}
.fold-block summary::-webkit-details-marker {
  display: none;
}
.fold-block summary::after {
  content: '\203A';
  margin-left: auto;
  font-style: normal;
  color: var(--brass-ink);
  transition: transform 0.15s ease;
}
.fold-block[open] summary::after {
  transform: rotate(90deg);
}
.fold-n {
  font-style: normal;
  font-size: 13px;
  font-weight: 650;
  color: var(--brass-ink);
}
.fold-block > :not(summary) {
  margin-top: 8px;
}

/* Folded after the first weeks: the label and the start of the line, a tap opens the rest. */
.job.fold {
  padding: 0;
}
.job.fold summary {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 12px;
  list-style: none;
  cursor: pointer;
}
.job.fold summary::-webkit-details-marker {
  display: none;
}
.job.fold summary::after {
  content: '\203A';
  flex: none;
  margin-left: auto;
  color: var(--brass-ink);
  transition: transform 0.15s ease;
}
.job.fold[open] summary::after {
  transform: rotate(90deg);
}
.job.fold .job-label {
  display: inline;
  margin: 0;
}
.job-text {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.job.fold[open] .job-text {
  white-space: normal;
}

/* The act's aim: the goal, a bar per counter, and how it's won or lost. */
.aim-sheet {
  z-index: 6; /* above whichever room sheet is open */
}
.aim-sheet .kicker {
  margin: 0;
}
.aim-sheet h2 {
  margin-top: 0;
}
.aim-goal {
  font-size: 18px;
  font-weight: 600;
}
.aim-row {
  margin: 10px 0;
}
.aim-k {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  color: var(--ink-2);
}
.aim-k b {
  color: var(--ink);
  white-space: nowrap;
}
.aim-bar {
  height: 6px;
  margin-top: 4px;
  border-radius: 3px;
  background: var(--ink-4);
  overflow: hidden;
}
.aim-bar i {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--brass);
}
.aim-row.done .aim-bar i {
  background: var(--bench);
}
.aim-row.limit:not(.done) .aim-bar i {
  background: var(--red);
}
.aim-how {
  margin-top: 12px;
  font-size: 15px;
  color: var(--ink-2);
}
.aim-week {
  margin: 8px 0 2px;
  font-size: 14px;
}
.aim-week .k {
  display: block;
}
.feed {
  font-size: 14px;
  color: var(--ink-2);
}
.feed-head {
  margin: 10px 4px 0;
  font-size: 13px;
  color: var(--ink-2);
}
.feed li {
  padding: 5px 0;
  border-bottom: 1px solid var(--ink-4);
}
.feed li.division,
.feed li.confidence {
  color: var(--ink);
}
.order-paper li {
  padding: 8px 0;
  border-bottom: 1px solid var(--ink-3);
}
.order-paper li small {
  font-variant-caps: normal;
  letter-spacing: 0.01em;
  color: var(--ink-2);
}

/* ---- The count board: a paper card pinned at the top during a division --------------------------------- */

.count-board {
  position: absolute;
  top: calc(64px + env(safe-area-inset-top));
  left: 10px;
  right: 10px;
  padding: 10px 14px 12px;
  border-radius: var(--r-lg);
  box-shadow: var(--float);
  pointer-events: auto;
  font-size: 15px;
  animation: sheet-in 180ms ease-out;
}
@media (orientation: landscape) and (min-width: 700px) {
  .count-board {
    right: auto;
    width: min(420px, 44vw);
  }
}
.count-board p {
  margin: 4px 0;
}
.tally {
  display: grid;
  gap: 6px;
  margin: 8px 0;
}
.bar-row {
  display: grid;
  grid-template-columns: max-content 1fr 40px;
  align-items: center;
  gap: 8px;
  font-variant-numeric: tabular-nums;
}
.bar-row > span {
  white-space: nowrap;
}
.bar-row b {
  text-align: right;
  font-size: 22px;
  font-weight: 500;
}
.bar {
  position: relative;
  height: 12px;
  background: var(--paper-2);
  border: 0;
  border-radius: 999px;
  overflow: hidden;
}
.bar i {
  position: absolute;
  inset: 0 auto 0 0;
  transition: width 120ms linear;
}
.bar i.yea {
  background: var(--yea);
}
.bar i.nay {
  background: var(--nay);
}
.bar em {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 2px;
  background: var(--brass);
}
.pr {
  display: inline-block;
  margin-right: 8px;
}
/* The Clerk's roll: the last few names read, newest at the right and darkest; the others fade behind it. */
.roll {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  min-height: 24px;
  overflow: hidden;
  white-space: nowrap;
  font-family: var(--serif);
  font-size: 17px;
  line-height: 24px;
}
.roll span {
  opacity: 0.35;
  animation: roll-in 160ms ease-out;
}
.roll span:nth-last-child(2) {
  opacity: 0.6;
}
.roll span:last-child {
  opacity: 1;
}
.roll span::before {
  content: '✔ ';
  color: var(--yea);
}
.roll span.nay::before {
  content: '✖ ';
  color: var(--nay);
}
.roll span.mine {
  font-weight: 700;
}
.roll span.me {
  text-decoration: underline;
  text-decoration-color: var(--brass);
  text-underline-offset: 3px;
}
@keyframes roll-in {
  from {
    transform: translateX(10px);
    opacity: 0;
  }
}
.verdict {
  font-size: 18px;
  font-weight: 600;
}
.verdict.yea {
  color: var(--yea);
}
.verdict.nay {
  color: var(--nay);
}

.tutorial.brief {
  background: rgba(201, 162, 74, 0.12);
}
.scenario-verdict .stamp {
  margin-right: 8px;
}

/* ---- Toast: a paper slip from under the top bar ------------------------------------------------------- */

.toast {
  position: absolute;
  top: calc(62px + env(safe-area-inset-top));
  left: 12px;
  right: 12px;
  padding: 10px 16px;
  border-radius: var(--r-md);
  font-size: 15px;
  line-height: 1.35;
  box-shadow: var(--float);
  pointer-events: auto;
  z-index: 5;
  animation: slip-in 200ms ease-out;
}
@keyframes slip-in {
  from {
    transform: translateY(-12px);
    opacity: 0;
  }
}
.seat-label {
  padding: 5px 10px;
  border-radius: var(--r-sm);
  font-size: 13px;
  white-space: nowrap;
  transform: translateY(-50%);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* ---- The deal table ------------------------------------------------------------------------------------ */

.deal-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.deal-col {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 4px 8px 8px;
  min-height: 70px;
}
.deal-col h4 {
  margin: 4px 0 6px;
}
.card-chip {
  display: block;
  width: 100%;
  min-height: 44px;
  margin: 6px 0;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--ink-3);
  background-color: var(--paper);
  background-image: var(--grain);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  text-align: left;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.card-chip.want {
  border-color: var(--bench);
  box-shadow: inset 0 0 0 1px var(--bench);
}
.card-chip.add {
  border-style: dashed;
  background: transparent;
  box-shadow: none;
  color: var(--ink-2);
}
/* The verdict after a one-to-one: the stamp, what it came to, the terms as settled cards. */
.verdict-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 2px 0 8px;
}
.verdict-row .stamp {
  flex: none;
  margin: 4px 0;
}
.verdict-line {
  margin: 0;
  font-weight: 600;
}
.card-chip.settled {
  box-sizing: border-box;
  min-height: 0;
  box-shadow: none;
}
.debrief-facts {
  margin: 8px 0 4px;
  font-size: 14px;
}
.debrief-facts .k {
  font-weight: 600;
  margin-right: 2px;
}
.debrief-facts .muted {
  display: block;
  margin-top: 2px;
}
.palette {
  margin: 6px 0;
}
.palette summary {
  min-height: 40px;
  line-height: 40px;
  color: var(--ink-2);
  font-variant-caps: normal;
  letter-spacing: 0.01em;
  cursor: pointer;
}

/* ---- The start menu: a title page ---------------------------------------------------------------------- */

/* While the title page is up, the game's own bars and panels stay out of sight behind it. */
#ui:has(.start-menu) > :not(.start-menu, .sheet.settings) {
  visibility: hidden;
}

.start-menu {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  background: linear-gradient(180deg, rgba(21, 19, 15, 0.42) 0%, rgba(21, 19, 15, 0.7) 40%, rgba(21, 19, 15, 0.9) 100%);
  pointer-events: auto;
  z-index: 20;
  padding: calc(20px + env(safe-area-inset-top)) 14px calc(28px + env(safe-area-inset-bottom));
}
.start-inner {
  max-width: 460px;
  margin: 0 auto;
  padding: 26px 22px 22px;
  border-radius: var(--r-lg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), 0 24px 60px rgba(0, 0, 0, 0.45);
}
.start-menu h1 {
  margin: 6px 0 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ink-3);
  font-size: 46px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.start-menu h1 + .muted {
  font-variant-caps: normal;
  letter-spacing: 0.01em;
  font-size: 15px;
}
.tagline {
  font-style: italic;
  color: var(--ink-2);
  font-size: 18px;
  margin: 10px 0 18px;
}
.start-menu h3 {
  margin: 18px 0 6px;
  padding-bottom: 3px;
  font-size: 14px;
  font-weight: 600;
  font-variant-caps: normal;
  letter-spacing: 0.01em;
  color: var(--ink-2);
  border-bottom: 1px solid var(--ink-3);
}
.form {
  display: grid;
  gap: 12px;
}
.form label {
  display: grid;
  gap: 0;
  font-size: 13px;
  font-variant-caps: normal;
  letter-spacing: 0.01em;
  color: var(--ink-2);
}
.form input,
.form select,
.form .picker {
  font-variant-caps: normal;
  letter-spacing: 0;
}
.party-blurb {
  margin-top: -4px;
}
.colophon {
  margin-top: 22px;
  padding-top: 10px;
  border-top: 1px solid var(--ink-3);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-variant-caps: normal;
  letter-spacing: 0.01em;
  color: var(--ink-2);
}
.colophon .version {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}
.version-note {
  margin: 14px 0 0;
  text-align: center;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}
.mark {
  display: inline-block;
  width: 22px;
  height: 22px;
  vertical-align: middle;
}

/* ---- Loading: Longlight's sun comes up while the data and the library arrive ---------------------------- */

#loading {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 18px;
  background: var(--brand-ink);
  color: var(--brand-paper);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.16em;
  font-size: 15px;
  transition: opacity 420ms ease;
}
#loading.off {
  opacity: 0;
  pointer-events: none;
}
#loading .mark {
  width: 96px;
  height: 96px;
}
#loading .sun {
  animation: sunrise 2.4s ease-in-out infinite alternate;
  transform-origin: 32px 40px;
}
@keyframes sunrise {
  from {
    transform: translateY(2px);
  }
  to {
    transform: translateY(-3px);
  }
}
@media (prefers-reduced-motion: reduce) {
  #loading .sun {
    animation: none;
  }
}

/* ---- Debug tuning panel (?debug=1) ------------------------------------------------------------------- */

.tuning-panel {
  position: absolute;
  top: calc(80px + env(safe-area-inset-top));
  left: 8px;
  max-width: 300px;
  max-height: 50dvh;
  overflow-y: auto;
  background: rgba(20, 18, 14, 0.92);
  color: var(--paper);
  border-radius: 4px;
  padding: 6px 10px;
  font: 11px/1.3 ui-monospace, monospace;
  pointer-events: auto;
}
.tuning-panel summary {
  min-height: 32px;
  line-height: 32px;
  cursor: pointer;
}
.tuning-rows label {
  display: grid;
  grid-template-columns: 1fr;
  margin: 6px 0;
}
.tuning-rows input {
  width: 100%;
}

/* ---- Title page: slots, mode cards and the saved games list --------------------------------------------- */

.small-note {
  margin: 10px 0 12px;
  font-size: 14px;
}
.slot-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 8px;
}
.btn.slot {
  display: grid;
  gap: 2px;
  min-height: 56px;
  padding: 6px 8px;
  text-align: center;
  border-color: var(--ink-3);
}
.btn.slot b {
  font-size: 18px;
}
.btn.slot small {
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.btn.slot.on {
  border-color: var(--bench);
  box-shadow: inset 0 0 0 2px var(--bench);
}
.mode-cards .btn {
  display: grid;
  gap: 2px;
  min-height: 72px;
  padding: 10px 14px;
}
.mode-cards .btn b {
  font-size: 18px;
}
.mode-cards .blurb {
  font-weight: 400;
  font-size: 14px;
  line-height: 1.35;
  color: var(--ink-2);
  white-space: normal;
}
.save-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}
.save-list li {
  padding: 10px 0;
  border-bottom: 1px solid var(--ink-3);
}
.save-head {
  display: grid;
  gap: 2px;
  font-size: 15px;
}
.save-head b {
  font-variant-caps: normal;
  letter-spacing: 0.01em;
}
.save-head small {
  color: var(--ink-2);
  font-size: 13px;
  overflow-wrap: anywhere;
}
.save-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.save-actions .btn {
  min-height: 44px;
  padding: 0 12px;
  font-size: 15px;
}
.btn.danger {
  color: var(--red);
  border-color: var(--red);
}
details.import {
  margin-top: 12px;
}
details.import summary {
  min-height: 44px;
  line-height: 44px;
  cursor: pointer;
  font-weight: 600;
}
details.import textarea {
  width: 100%;
  box-sizing: border-box;
  font: 14px/1.35 var(--serif);
  background: var(--paper-2, rgba(0, 0, 0, 0.04));
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 8px;
}
.start-menu .status {
  min-height: 20px;
  margin: 8px 0 0;
  font-size: 14px;
}

/* ---- Settings: the two accessibility switches and the sheet itself ---- */
/* Colour-blind: Okabe-Ito blue for yea, vermilion for nay (party colours swap in partyColor). */
html.cb {
  --yea: #0072b2;
  --nay: #d55e00;
}
/* Larger text: the whole Order Paper layer scales up a notch; the rooms behind it don't. */
html.large #ui {
  zoom: 1.12;
}
.sheet.settings {
  z-index: 30; /* above the title page as well as the game */
}
.setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--ink-4);
}
.setting .what {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.setting .what small {
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.35;
}
.switch {
  flex: none;
  position: relative;
  width: 54px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--ink-3);
  border-radius: 16px;
  background: var(--paper-2);
  cursor: pointer;
  transition: background 160ms ease;
}
.switch i {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  background: var(--ink);
  transition: transform 160ms ease, background 160ms ease;
}
.switch[aria-checked="true"] {
  background: var(--bench);
  border-color: var(--bench);
}
.switch[aria-checked="true"] i {
  background: var(--paper);
  transform: translateX(22px);
}
.setting input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  max-width: 55%;
  height: 32px;
  margin: 0;
  background: transparent;
}
.setting input[type="range"]::-webkit-slider-runnable-track {
  height: 3px;
  background: var(--ink-3);
  border-radius: 999px;
}
.setting input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px;
  height: 26px;
  margin-top: -11.5px;
  border-radius: 50%;
  border: 0;
  background: var(--paper);
  box-shadow: inset 0 0 0 7px var(--bench);
}
.setting input[type="range"]::-moz-range-track {
  height: 3px;
  background: var(--ink-3);
  border-radius: 999px;
}
.setting input[type="range"]::-moz-range-thumb {
  width: 23px;
  height: 23px;
  border-radius: 50%;
  border: 0;
  background: var(--paper);
  box-shadow: inset 0 0 0 7px var(--bench);
}
.setting input[type="range"]:disabled {
  opacity: 0.4;
}

/* The weekend edition: the week in review set as a newspaper front page. Heavy masthead between double
   rules, a lead story with a deck and byline, the halftone photograph when the story is yours, the polls as
   a chart, the numbers and the week's record in small type below the fold. */
.front-page .masthead {
  text-align: center;
  padding: 2px 0 6px;
  border-bottom: 1px solid var(--ink);
  box-shadow: 0 3px 0 -2px var(--ink);
  margin-bottom: 10px;
}
.front-page .ears {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  border-bottom: 1px solid var(--ink-3);
  padding-bottom: 3px;
  white-space: nowrap;
}
.front-page .ears > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.front-page .ears .ear-weather {
  flex: none;
  color: var(--ink);
  font-weight: 600;
  letter-spacing: 0.08em;
}
/* On a phone held upright the paper is too narrow for three ears: the edition gives way to the weather. */
.front-page .masthead {
  container-type: inline-size;
}
@container (max-width: 420px) {
  .front-page .ears .ear-edition {
    display: none;
  }
}
.front-page .masthead h2 {
  margin: 6px 0 2px;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.05;
  font-variation-settings: "opsz" 72;
}
.front-page .dateline {
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  border-top: 1px solid var(--ink-3);
  padding-top: 4px;
  font-variant-numeric: tabular-nums;
}
.front-page .lead {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ink-3);
}
.front-page .lead h3 {
  margin: 0 0 6px;
  font-size: 25px;
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.012em;
  text-transform: none;
  font-variant-caps: normal;
  color: var(--ink);
}
.front-page .deck {
  margin: 0 0 6px;
  font-size: 15px;
  line-height: 1.35;
  color: var(--ink-2);
  font-style: italic;
}
.front-page .byline {
  margin: 0;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.press-photo {
  flex: none;
  width: 118px;
  margin: 4px 0 0;
  font-size: 11px;
  line-height: 1.3;
  color: var(--ink-2);
}
.press-photo img {
  display: block;
  width: 118px;
  height: auto;
  border: 1px solid var(--ink);
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px var(--ink-3);
  image-rendering: auto;
}
.press-photo figcaption {
  margin-top: 7px;
  font-style: italic;
}
.front-page h4 {
  margin: 12px 0 4px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-2);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 3px;
}
.front-elsewhere ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.front-elsewhere li {
  padding: 6px 0;
  border-bottom: 1px solid var(--ink-4);
  font-size: 15px;
  line-height: 1.3;
  font-weight: 500;
}
.front-elsewhere .paper {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-weight: 400;
  margin-right: 4px;
}
/* Your week, first under the masthead: a boxed panel with tighter rules than the news below it. */
.front-numbers {
  margin: 10px 0 14px;
  padding: 2px 12px 8px;
  border-radius: var(--r-sm);
  background: rgba(184, 146, 58, 0.08);
  box-shadow: inset 0 0 0 1px rgba(184, 146, 58, 0.25);
}
.front-numbers .kv {
  padding: 5px 0;
}
.front-numbers .kv .v {
  white-space: nowrap;
}
.front-page .small {
  font-size: 12.5px;
  margin: 6px 0 0;
}
.poll-chart {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 4px;
  font-size: 11px;
  font-family: var(--serif);
  font-weight: 600;
}
.poll-chart .grid {
  stroke: var(--ink-4);
  stroke-width: 1;
}
.poll-chart .axis {
  fill: var(--ink-2);
  font-weight: 400;
  font-size: 9.5px;
  letter-spacing: 0.06em;
}
.front-brief .feed {
  font-size: 13px;
  margin: 0;
  padding-left: 18px;
}
.front-brief .feed li {
  padding: 3px 0;
}

/* ---- The cold open: election night's count board, then opening day's walk in ----------------------------- */

body.cold-open .agenda,
body.cold-open .topbar {
  display: none;
}
.coldopen-sheet {
  bottom: 0;
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
  max-height: 56dvh;
}
.coldopen-sheet.co-walking {
  max-height: 38dvh;
}
.coldopen-sheet h2 {
  font-size: 20px;
}
.coldopen-sheet .co-where,
.coldopen-sheet.co-walking h2 + .muted {
  font-size: 14px;
}
.co-walk li {
  font-size: 16px;
}
.coldopen-sheet .co-where {
  margin: 0 0 8px;
}
.co-polls {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 0 10px;
  font-size: 13px;
  font-variant-caps: normal;
  letter-spacing: 0.01em;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.co-polls-bar {
  display: block;
  height: 3px;
  background: var(--ink-4);
}
.co-polls-bar i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--ink);
  transition: width 900ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.co-board {
  position: relative;
  border-top: 1px solid var(--ink-3);
}
.co-row {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 42px;
  display: grid;
  grid-template-columns: 6px 1fr auto;
  grid-template-rows: auto 4px;
  column-gap: 10px;
  align-items: center;
  border-bottom: 1px solid var(--ink-4);
  transition: transform 650ms cubic-bezier(0.3, 0.8, 0.2, 1);
}
.co-row .chip {
  width: 6px;
  height: auto;
  grid-row: 1 / span 2;
  align-self: stretch;
  margin: 7px 0;
}
.co-row .nm {
  font-size: 14px;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.co-row .nm small {
  display: block;
  font-size: 12px;
  color: var(--ink-2);
}
.co-row .nm small.badge {
  display: inline-block;
  font-size: 11px;
  vertical-align: 2px;
  color: var(--paper);
}
.co-row .v {
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.co-row.you .nm,
.co-row.you .v {
  font-weight: 600;
}
.co-row .bar {
  grid-column: 2 / span 2;
  height: 3px;
  background: var(--ink-4);
  position: relative;
  align-self: start;
}
.co-row .bar i {
  display: block;
  height: 100%;
  width: 0;
  transition: width 900ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.co-row .bar::after {
  content: attr(data-pct);
  position: absolute;
  right: 0;
  top: -15px;
  font-size: 11px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  display: none;
}
.co-row.lead .v::before {
  content: "▸ ";
  color: var(--brass);
  font-size: 12px;
}
.co-line {
  min-height: 64px;
}
.co-line blockquote.line {
  margin: 10px 0 6px;
  animation: co-line-in 420ms ease-out;
}
.co-called {
  display: block;
  font-size: 12px;
  font-style: normal;
  font-variant-caps: normal;
  letter-spacing: 0.01em;
  color: var(--brass);
}
@keyframes co-line-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}
.co-house {
  margin: 6px 0 4px;
}
.co-house-label {
  margin: 0 0 4px;
  font-size: 12px;
  font-variant-caps: normal;
  letter-spacing: 0.01em;
  color: var(--ink-2);
}
.co-seats {
  position: relative;
  display: flex;
  height: 10px;
  background: var(--ink-4);
}
.co-seats i {
  display: block;
  height: 100%;
  width: 0;
  transition: width 900ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.co-need {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 0;
  border-left: 1.5px dashed var(--ink);
}
.co-seat-keys {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 12px;
  margin-top: 5px;
  font-size: 12px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.co-seat-keys i {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 4px;
  vertical-align: 0;
}
.co-seat-keys b {
  color: var(--ink);
  font-weight: 600;
}
.co-result:not(:empty) {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--ink-3);
  animation: co-line-in 500ms ease-out;
}
.co-result .verdict {
  text-align: center;
  margin: 2px 0 8px;
}
.co-declare {
  margin: 0 0 8px;
  font-style: italic;
}
.co-walk {
  list-style: none;
  margin: 8px 0 4px;
  padding: 0;
}
.co-walk li {
  margin: 0 0 8px;
  padding-left: 12px;
  border-left: 2px solid var(--line);
}
.co-walk li.fresh {
  border-left-color: var(--brass);
  animation: co-line-in 600ms ease-out;
}
@media (orientation: landscape) and (min-width: 700px) {
  .coldopen-sheet,
  .coldopen-sheet.co-walking {
    top: calc(12px + env(safe-area-inset-top));
    bottom: 0;
    max-height: none;
  }
}

/* ---- The memoir: a career set down as a timeline, chapters by rank, a rule for each Parliament ---------- */

.memoir-sheet,
.record-sheet {
  top: calc(64px + env(safe-area-inset-top));
  max-height: none;
  z-index: 6; /* above whichever room sheet is open */
}
.mp-card {
  z-index: 7; /* a name tapped in the memoir or the record opens over it */
}
@media (orientation: landscape) and (min-width: 700px) {
  .memoir-sheet,
  .record-sheet {
    width: min(560px, 58vw);
    bottom: 0; /* a short screen needs every line; the page has its own close */
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }
}
.memoir-stats {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  margin: 12px 0 4px;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink-3);
}
.memoir-stats > div {
  padding: 8px 4px 7px;
  text-align: center;
}
.memoir-stats > div + div {
  border-left: 1px solid var(--ink-3);
}
.memoir-stats b {
  display: block;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.memoir-stats small {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  line-height: 1.15;
  color: var(--ink-2);
  font-variant-caps: normal;
  letter-spacing: 0.01em;
}
.memoir-from {
  font-style: italic;
}

.timeline {
  position: relative;
  margin: 8px 0 18px;
  padding-left: 26px;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 10px;
  bottom: 18px;
  width: 0;
  border-left: 3px double var(--ink-3);
}
.timeline .chapter {
  position: relative;
  margin: 22px 0 10px;
  padding-bottom: 4px;
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 500;
  font-variant-caps: normal;
  letter-spacing: -0.005em;
  border-bottom: 1px solid var(--ink);
}
.timeline .chapter:first-child {
  margin-top: 10px;
}
.timeline .chapter small {
  display: block;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--brass);
  font-variant-caps: normal;
  letter-spacing: 0.01em;
}
.timeline .chapter::before {
  content: "";
  position: absolute;
  left: -23px;
  bottom: 7px;
  width: 9px;
  height: 9px;
  background: var(--brass);
  transform: rotate(45deg);
  box-shadow: 0 0 0 3px var(--paper);
}
.timeline .parl-mark {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 26px 0 6px -26px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  font-variant-caps: normal;
  letter-spacing: 0.01em;
}
.timeline .parl-mark::before,
.timeline .parl-mark::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--ink-2);
}
.timeline .parl-mark span {
  padding: 2px 8px;
  background: var(--paper);
  border: 1px solid var(--ink-2);
}

.moment {
  --tone: var(--grey);
  position: relative;
  margin: 0 0 14px;
  padding: 9px 12px 11px;
  background: rgba(255, 252, 244, 0.42);
  border: 1px solid var(--ink-4);
  border-top: 2px solid var(--tone);
  box-shadow: 0 1px 2px rgba(29, 26, 22, 0.12);
}
.moment.tone-brass {
  --tone: var(--brass);
}
.moment.tone-yea {
  --tone: var(--yea);
}
.moment.tone-nay {
  --tone: var(--nay);
}
.moment::before {
  content: "";
  position: absolute;
  left: -23px;
  top: 12px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--tone);
  box-shadow: 0 0 0 3px var(--paper);
}
.moment.tone-brass::before {
  width: 11px;
  height: 11px;
  left: -24px;
  background: var(--paper);
  border: 3px solid var(--brass);
  box-sizing: border-box;
}
.moment .when {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  font-size: 12.5px;
  color: var(--ink-2);
  font-variant-caps: normal;
  letter-spacing: 0.01em;
}
.moment .when .what {
  flex: none;
  font-weight: 600;
  color: var(--tone);
}
.moment.tone-grey .when .what {
  color: var(--ink-2);
}
.moment h4 {
  margin: 2px 0 4px;
  font-family: var(--serif);
  font-size: 18.5px;
  font-weight: 500;
  line-height: 1.2;
}
.moment .said {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
}
.moment .people {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
}
.moment .who {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  min-height: 44px;
  max-width: 100%;
  padding: 4px 12px 4px 16px;
  font: inherit;
  text-align: left;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: inset 10px 0 0 -4px var(--party, var(--grey));
}
.moment button.who {
  cursor: pointer;
  box-shadow: inset 10px 0 0 -4px var(--party, var(--grey)), var(--lift);
}
.moment button.who:active {
  transform: translateY(1px);
  box-shadow: none;
}
.moment .who b {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
}
.moment .who small {
  font-size: 12px;
  line-height: 1.2;
  color: var(--ink-2);
}
.moment .who.gone {
  border-style: dashed;
  border-left-style: solid;
  opacity: 0.78;
}

/* Moments come up off the page as they scroll in. */
.timeline .moment,
.timeline .chapter,
.timeline .parl-mark {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 420ms ease-out, transform 480ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.timeline .seen {
  opacity: 1;
  transform: none;
}
.timeline .moment.seen::before {
  animation: memoir-dot 520ms 140ms both;
}
@keyframes memoir-dot {
  from {
    transform: scale(0.2);
  }
  60% {
    transform: scale(1.35);
  }
}
@media (prefers-reduced-motion: reduce) {
  .timeline .moment,
  .timeline .chapter,
  .timeline .parl-mark {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .timeline .moment.seen::before {
    animation: none;
  }
}

/* Drawn icons inside buttons take the button's ink. */
.btn svg.ico {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- Stakes: what an ask means at home. Arrow and sign carry the meaning; colour backs them up. ---- */
:root {
  --good: var(--yea);
  --bad: var(--nay);
  --warn-ink: #8a5a0b;
}
.stake {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 2px 6px 2px 0;
  padding: 2px 10px 2px 3px;
  --tone: var(--grey);
  color: var(--tone);
  border: 1px solid color-mix(in srgb, var(--tone) 30%, transparent);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  line-height: 1.5;
  white-space: nowrap;
  box-shadow: var(--lift);
}
/* The arrow sits in its own small round badge: the sign and shape carry the meaning, the colour backs them up. */
.stake i {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--tone);
  color: var(--paper);
  font-style: normal;
  font-size: 9px;
  line-height: 1;
}
.stake.up {
  --tone: var(--good);
  background: color-mix(in srgb, var(--good) 12%, var(--paper));
}
.stake.down {
  --tone: var(--bad);
  background: color-mix(in srgb, var(--bad) 12%, var(--paper));
}
.stake.flat {
  --tone: var(--grey);
  color: var(--ink-2);
  background: var(--paper-2);
  font-weight: 500;
}
.stakes {
  margin: 8px 0;
  padding: 8px 12px;
  border-radius: var(--r-md);
  background: var(--fill);
  box-shadow: var(--lift);
}
.stake-lean {
  margin: 0 0 4px;
  font-size: 14px;
}
.stake-lean b,
.stakes b.yea {
  color: var(--yea);
}
.stake-lean b.nay,
.stakes b.nay {
  color: var(--nay);
}
.stake-rows {
  list-style: none;
  margin: 0;
  padding: 0;
}
.stake-rows li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2px 8px;
  padding: 3px 0;
  border-top: 1px solid var(--line);
  font-size: 14px;
}
.stake-rows .nums {
  display: inline-flex;
  flex-wrap: wrap;
}
.stake-line {
  display: block;
  margin-top: 2px;
}
.stake-line .stake {
  margin-top: 0;
  margin-bottom: 0;
}
.stake-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 8px 0 0;
  padding: 6px 10px;
  border-radius: var(--r-md);
  background: var(--fill);
  box-shadow: var(--lift);
  font-size: 14px;
}
.card-chip .lbl {
  display: block;
}
.card-chip:has(.stake) {
  border-radius: var(--r-md);
  padding-top: 4px;
  padding-bottom: 4px;
}
.card-chip .stake {
  margin: 0 6px 0 0;
  font-size: 12px;
}
.btn .stake-line {
  font-weight: 400;
}

/* ---- Colour that means something: green for good, amber for close, red for bad. Always with a glyph or sign too. ---- */
.tone-good { color: var(--good); }
.tone-warn { color: var(--warn-ink); }
.tone-bad { color: var(--bad); }
.bar i.tone-good { background: var(--good); }
.bar i.tone-warn { background: var(--amber); }
.bar i.tone-bad { background: var(--bad); }
.bar i.tone-plain { background: var(--ink-2); }
.count-line .cnt {
  font-weight: 600;
}
.count-line.tone-good { background: color-mix(in srgb, var(--good) 13%, transparent); }
.count-line.tone-warn { background: color-mix(in srgb, var(--amber) 20%, transparent); }
.count-line.tone-bad { background: color-mix(in srgb, var(--bad) 13%, transparent); }
.count-line .cnt i {
  font-style: normal;
  font-size: 13px;
}
.count-line .mk {
  font-weight: 600;
}
.count-line .mk.firm { color: var(--good); }
.count-line .mk.leaning { color: var(--warn-ink); }
.count-line .mk.lost { color: var(--bad); }
.count-line .mk.away { color: var(--grey); }
.count-board [data-n="yea"], .pr .y { color: var(--yea); }
.count-board [data-n="nay"], .pr .n { color: var(--nay); }
.pr b { color: var(--ink); }

/* The buttons that finish a sheet stay in reach while its content scrolls under them. */
.sheet .card-actions,
.office-sheet > .choices:last-child:not(.talk-choices),
.division-sheet > .choices:last-child {
  position: sticky;
  bottom: -16px;
  z-index: 2;
  margin: 10px -18px -16px;
  padding: 12px 18px 16px;
  background: linear-gradient(to bottom, rgba(243, 234, 216, 0), var(--paper) 28%);
}

/* A chip sitting on a button gets its own paper, so green-on-green and red-on-green never happen. */
.btn .stake {
  background: color-mix(in srgb, var(--tone) 10%, #fffcf4);
  font-weight: 600;
}
.btn.primary .stake.flat {
  color: var(--ink-2);
}
.job {
  padding: 6px 12px;
  font-size: 14.5px;
  line-height: 1.35;
}
.stake-brief {
  margin: 6px 0 8px;
  font-size: 14px;
}
.stake-brief .side {
  font-variant-caps: all-small-caps;
  letter-spacing: 0.04em;
  color: var(--ink-2);
}

/* A phone on its side is about 360px tall: spend less of it on padding, and let the job line sit on one row. */
@media (orientation: landscape) and (max-height: 480px) {
  .sheet {
    padding-top: 6px;
  }
  .job {
    margin: 4px 0 6px;
    padding: 4px 10px;
    font-size: 14px;
    line-height: 1.3;
  }
  .job-label {
    display: inline;
    margin: 0 6px 0 0;
  }
  .stakes {
    margin: 4px 0;
    padding: 4px 10px;
  }
  .stake-rows li {
    padding: 1px 0;
  }
  .sheet h2 {
    font-size: 22px;
  }
  .sheet h3 {
    margin: 8px 0 4px;
  }
}

/* ---- Your row: the icon, the filter chip, the tag, and the sheet ---- */
.topbar .btn.icon-only {
  width: 44px;
  padding: 0;
  display: inline-grid;
  place-items: center;
}
.topbar .btn.icon-only .ico,
.chip-toggle .ico,
.row-tag .ico {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.topbar .btn.icon-only .ico circle {
  fill: currentColor;
  stroke: none;
}
.chip-toggle .ico circle,
.row-tag .ico circle {
  fill: currentColor;
  stroke: none;
}
.chip-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  margin: 6px 0 2px;
  padding: 0 14px;
  border: 1px solid var(--ink-3);
  border-radius: 999px;
  background: var(--fill);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
}
.chip-toggle.on {
  background: var(--bench);
  border-color: var(--bench);
  color: var(--paper);
  font-weight: 600;
}
.row-tag {
  display: inline-flex;
  vertical-align: middle;
  color: var(--brass-ink);
}
.row-tag .ico {
  width: 20px;
  height: 14px;
}
.badge.row {
  background: color-mix(in srgb, var(--brass) 22%, transparent);
  color: var(--brass-ink);
}
.row-sheet {
  max-height: 70dvh;
  z-index: 6; /* above whichever room sheet is open, like the book */
}
.row-bill {
  margin: 4px 0 2px;
  font-weight: 600;
}
.row-tally {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  margin: 4px 0 6px;
}
.row-mark {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.row-mark i {
  font-style: normal;
  font-size: 13px;
}
.row-mark.firm { color: var(--good); background: color-mix(in srgb, var(--good) 14%, transparent); }
.row-mark.leaning { color: var(--warn-ink); background: color-mix(in srgb, var(--amber) 22%, transparent); }
.row-mark.lost { color: var(--bad); background: color-mix(in srgb, var(--bad) 14%, transparent); }
.row-mark.absent, .row-mark.unmarked { color: var(--grey); background: var(--ink-4); font-weight: 500; }
.row-mark.stale { opacity: 0.7; }
.row-sheet .book-list li {
  cursor: pointer;
}

/* Your row, as one line under the whip's count. Tap it for the list. */
.row-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  width: 100%;
  min-height: 44px;
  margin: 4px 0 2px;
  padding: 6px 12px;
  border: 0;
  border-radius: var(--r-md);
  background: var(--fill);
  box-shadow: var(--lift);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  text-align: left;
}
.row-line .ico {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--brass-ink);
}
.row-line .ico circle {
  fill: currentColor;
  stroke: none;
}
.row-line .tally {
  display: inline-flex;
  flex-wrap: wrap;
  flex: 1;
  gap: 2px 4px;
}
.row-line .chev {
  margin-left: auto;
  color: var(--ink-2);
  font-size: 20px;
}

/* The evening board's four buttons sit two by two, so pinning them leaves room for the evening above. */
.office-sheet > .choices:last-child:not(.talk-choices) {
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.office-sheet > .choices:last-child:not(.talk-choices) .btn {
  min-height: 44px;
  padding: 6px 10px;
  font-size: 15px;
}

/* What you say back in a meeting is the content, not a closing button: one column, read in order, never pinned over the line. */
.talk-choices {
  grid-template-columns: 1fr;
  gap: 8px;
}
.talk-choices .btn {
  padding: 8px 14px;
  font-size: 16px;
  line-height: 1.35;
}

/* On the bells sheet each choice is one short row: the words, then what it does at home and with the whip. */
.division-sheet > .choices:last-child .btn {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2px 8px;
  min-height: 48px;
  padding: 6px 12px;
}
.division-sheet > .choices:last-child .btn .stake-line {
  display: inline-flex;
  flex-wrap: wrap;
  margin: 0;
}

/* Where each member should land: a NAY-to-YEA line, the needed end outlined, a tick where they turn firm. */
.row-need {
  margin: 4px 0 2px;
  font-size: 17px;
}
.row-need b.yea, .row-line b.yea, .aim-cap b.yea { color: var(--yea); }
.row-need b.nay, .row-line b.nay, .aim-cap b.nay { color: var(--nay); }
.row-line .need {
  white-space: nowrap;
  font-size: 14px;
  color: var(--ink-2);
}
.row-list li {
  flex-wrap: wrap;
}
.aim-wrap {
  flex-basis: 100%;
  padding: 4px 0 2px 24px;
}
.aim-track {
  position: relative;
  display: flex;
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--paper-2);
  box-shadow: inset 0 0 0 1px var(--line);
}
.aim-track .z {
  display: block;
  height: 100%;
}
.aim-track .z.nay { background: color-mix(in srgb, var(--nay) 22%, transparent); }
.aim-track .z.yea { background: color-mix(in srgb, var(--yea) 22%, transparent); }
.aim-track .z.mid { background: var(--ink-4); }
.aim-track .z.need { box-shadow: inset 0 0 0 2px currentColor; }
.aim-track .z.nay.need { color: var(--nay); }
.aim-track .z.yea.need { color: var(--yea); }
.aim-track .tick {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: var(--ink-2);
  opacity: 0.55;
}
.aim-track .dot {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: var(--ink);
  border: 2px solid var(--paper);
  box-shadow: 0 0 0 1px var(--ink-2);
}
.aim-track .dot.firm { background: var(--good); }
.aim-track .dot.leaning { background: var(--amber); }
.aim-track .dot.lost { background: var(--bad); }
.aim-track .dot.absent { background: var(--grey); }
.aim-ends {
  display: flex;
  justify-content: space-between;
  margin-top: 1px;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-2);
}
.aim-ends .need {
  font-weight: 700;
  color: var(--ink);
}
.aim-cap {
  display: block;
  margin-top: 1px;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.3;
}

/* ---- Backups: the quiet reminder on the title page, and the storage line under the saved games ---------- */

.backup-note {
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--brass);
  border-left-width: 4px;
  border-radius: var(--r-md);
  background: var(--paper-2);
  font-size: 15px;
  line-height: 1.4;
}
.backup-note p {
  margin: 0 0 10px;
}
.backup-note-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.backup-note-actions .btn {
  min-height: 44px;
  font-size: 15px;
}
.storage-note {
  margin-top: 12px;
}
.storage-note[hidden] {
  display: none;
}
/* "Back up now" moves focus to the Saved games heading for screen readers; it isn't a control, so no ring. */
.start-menu h3[tabindex] {
  outline: none;
}