:root {
  --steel: color-mix(in srgb, var(--ak-accent-2) 55%, var(--ak-bg));
  --steel-hi: color-mix(in srgb, var(--ak-accent-2) 25%, var(--ak-bg));
  --steel-lo: var(--ak-accent-2);
  --amber: var(--ak-accent);
  --heat: var(--ak-btn-fill);
  --brass: color-mix(in srgb, var(--ak-accent) 45%, var(--ak-surface));
  --paper-shadow: color-mix(in srgb, var(--ak-accent-2) 30%, transparent);
  --gap: 8px;
  --strip-h: 78px;
}

* { box-sizing: border-box; }

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  background-color: var(--ak-bg);
  background-image: var(--ak-backdrop-layer, var(--ak-bg-art));
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--ak-ink);
  font-family: var(--ak-font-body);
  -webkit-tap-highlight-color: transparent;
}

button {
  font: inherit;
  color: inherit;
  touch-action: manipulation;
}

button:focus-visible {
  outline: 3px solid var(--ak-focus);
  outline-offset: 3px;
}

[hidden] { display: none !important; }

/* ---------- the counter ---------- */

.pass {
  width: 100%;
  max-width: 560px;
  height: min(100dvh, 960px);
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  padding:
    max(6px, env(safe-area-inset-top))
    max(10px, env(safe-area-inset-right))
    max(8px, env(safe-area-inset-bottom))
    max(10px, env(safe-area-inset-left));
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.board {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.topline {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding-right: 60px;
}

.mute {
  flex: none;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 2px solid var(--ak-ink);
  border-radius: var(--ak-radius);
  background: var(--ak-surface);
  color: var(--ak-ink);
  cursor: pointer;
}

.mute svg { width: 26px; height: 26px; }
.mute .cross { display: none; }
.mute.is-muted .wave { display: none; }
.mute.is-muted .cross { display: inline; }

.logo {
  height: 44px;
  width: auto;
  max-width: 30vw;
  object-fit: contain;
}

.when {
  margin: 0 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.05;
  font-family: var(--ak-font-display);
}

.when > span:first-child {
  font-size: 22px;
  font-weight: 700;
}

.when-count {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ak-ink-muted);
}

/* The race against par (or your best) sits under the month, where the eye already goes. */
.when-race {
  margin-top: 3px;
  font-size: 12px;
}

.when-race.race-start { background: var(--ak-bg); }

/* On a paid tag: ahead of or behind the season being raced, after that month. */
.tag-race {
  margin-left: 2px;
  font-size: 10px;
  letter-spacing: 0;
}

.tag.race-ahead .tag-race { color: var(--ak-ink); }
.tag.race-behind .tag-race { color: var(--heat); }
.tag.race-behind { border-bottom-color: var(--heat); }

/* The rail runs edge to edge; the clock hangs above it. */
.rail-row {
  position: relative;
  flex: none;
  height: clamp(54px, 8.5dvh, 76px);
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.rail {
  position: absolute;
  left: max(-10px, calc(-1 * env(safe-area-inset-left) - 10px));
  right: max(-10px, calc(-1 * env(safe-area-inset-right) - 10px));
  bottom: 0;
  height: 16px;
  border-top: 2px solid var(--ak-ink);
  border-bottom: 2px solid var(--ak-ink);
  background:
    linear-gradient(180deg, var(--steel-hi) 0 30%, var(--steel) 30% 70%, var(--steel-lo) 70% 100%);
}

.clock {
  position: relative;
  z-index: 1;
  height: calc(100% - 4px);
  width: auto;
  aspect-ratio: 1;
}

.clock-face {
  fill: var(--ak-bg);
  stroke: var(--ak-ink);
  stroke-width: 6;
}

.clock #clock-marks circle { fill: var(--ak-bg); stroke: var(--ak-ink); stroke-width: 2.5; }
.clock #clock-marks circle.is-past { fill: var(--ak-ink); }
.clock #clock-marks circle.is-now { fill: var(--amber); stroke-width: 3; }

.clock-hand {
  stroke: var(--ak-ink);
  stroke-width: 6;
  stroke-linecap: round;
  transform-box: view-box;
  transform-origin: 50px 50px;
}

.clock-pin { fill: var(--ak-ink); }

/* ---------- tickets on the rail ---------- */

.tickets {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 6px;
  padding-top: 0;
}

.ticket {
  position: relative;
  min-height: 0;
  min-width: 44px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 0 0 4px;
  border: 0;
  background: transparent;
  cursor: pointer;
  transform-origin: 50% 0;
  outline-offset: 2px;
}

.ticket-art {
  position: relative;
  flex: 1 1 auto;
  min-height: 44px;
  max-height: 260px;
  margin-top: -6px;
}

.ticket-art img,
.ticket-art svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 0;
  pointer-events: none;
}

.ticket-art .paper { fill: var(--ak-surface); stroke: var(--ak-ink); }
.ticket-art .band { stroke: var(--amber); }
.ticket-art .clip { fill: var(--steel); stroke: var(--ak-ink); }
.ticket-art .ink-line { stroke: var(--ak-ink); }
.ticket-art .ink-fill { fill: var(--ak-ink); }
.ticket-art .stain { fill: var(--ak-ink-muted); }

/* Wear shows on the ticket's edge: clean, amber, then hot red. */
.ticket.wear-2 .ticket-art > :first-child {
  filter:
    drop-shadow(2px 0 0 var(--amber)) drop-shadow(-2px 0 0 var(--amber))
    drop-shadow(0 2px 0 var(--amber)) drop-shadow(0 -2px 0 var(--amber));
}

.ticket.wear-3 .ticket-art > :first-child {
  filter:
    drop-shadow(3px 0 0 var(--heat)) drop-shadow(-3px 0 0 var(--heat))
    drop-shadow(0 3px 0 var(--heat)) drop-shadow(0 -3px 0 var(--heat));
}

.stamp {
  position: absolute;
  left: 50%;
  top: 46%;
  padding: 2px 8px;
  white-space: nowrap;
  border: 4px solid var(--ak-ink);
  background: var(--ak-bg);
  color: var(--ak-ink);
  font-family: var(--ak-font-display);
  font-size: clamp(15px, 4.4vw, 26px);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transform: translate(-50%, -50%) rotate(-12deg);
  opacity: 0;
  pointer-events: none;
}

.ticket.is-stamped .stamp { opacity: 1; }

.strip {
  position: relative;
  flex: none;
  height: var(--strip-h);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  align-content: start;
  container-type: inline-size;
  gap: 2px;
  padding: 4px 6px 4px;
  border: 2px solid var(--ak-ink);
  border-top: 7px solid var(--ak-ink-muted);
  background: var(--ak-surface);
  color: var(--ak-ink);
  text-align: left;
  overflow: hidden;
}

.ticket.wear-2 .strip { border-top-color: var(--amber); }
.ticket.wear-3 .strip { border-top-color: var(--heat); }

/* Scorched corner at wear 3. */
.ticket.wear-3 .strip::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 18px;
  height: 18px;
  background: linear-gradient(135deg, transparent 50%, var(--ak-ink) 50%);
}

.strip-name {
  min-height: 1.1em;
  font-family: var(--ak-font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.strip-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}

.strip-cost {
  display: inline-flex;
  align-items: center;
  font-family: var(--ak-font-display);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.pips { display: flex; gap: 3px; }

.pip {
  width: 9px;
  height: 12px;
  border: 2px solid currentColor;
}

.pip.is-on { background: currentColor; }

.strip-warn {
  min-height: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.warn-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The line stays on one row: narrower tickets drop "if skipped", the narrowest tighten up. */
@container (max-width: 170px) {
  .warn-long { display: none; }
}

@container (max-width: 100px) {
  .strip-warn { gap: 2px; font-size: 11px; letter-spacing: 0; }
  .strip-warn .warn-mark { width: 12px; height: 12px; }
  .part-mark { width: 12px; height: 12px; margin-right: 1px; }
  .pips { gap: 2px; }
  .pip { width: 7px; }
}

.warn-mark {
  flex: none;
  width: 14px;
  height: 14px;
  color: var(--heat);
}

/* The sooner it breaks, the hotter the line: same scale as the ticket's heat band. */
.strip-warn[data-soon="0"] {
  margin: 0 -4px;
  padding: 1px 4px;
  background: var(--heat);
  color: var(--ak-btn-ink);
}

.strip-warn[data-soon="0"] .warn-mark { color: currentColor; }
.strip-warn[data-soon="1"] { color: var(--ak-ink); }
.strip-warn[data-soon="2"],
.strip-warn[data-soon="none"] { font-weight: 600; color: var(--ak-ink-muted); }

.part-mark {
  width: 15px;
  height: 15px;
  margin-right: 2px;
  vertical-align: -1px;
  color: var(--heat);
}

.ticket.is-selected .strip {
  background: var(--ak-choice-selected-bg);
  color: var(--ak-choice-selected-ink);
  border-color: var(--ak-choice-selected-border);
}

.ticket.is-selected .warn-mark,
.ticket.is-selected .part-mark { color: var(--ak-choice-selected-ink); }
.ticket.is-selected .strip-warn[data-soon] { color: inherit; }
.ticket.is-selected .strip-warn[data-soon="0"] { color: var(--ak-btn-ink); }
.ticket.is-selected .strip-warn[data-soon="0"] .warn-mark { color: currentColor; }

.ticket.is-selected {
  outline: 4px solid var(--ak-ink);
  outline-offset: 2px;
}

.ticket.is-selected::after {
  content: 'Picked';
  position: absolute;
  left: 50%;
  bottom: calc(var(--strip-h) + 4px - 9px);
  padding: 1px 8px;
  border: 2px solid var(--ak-ink);
  background: var(--ak-choice-selected-bg);
  color: var(--ak-choice-selected-ink);
  font-family: var(--ak-font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transform: translateX(-50%);
  pointer-events: none;
}

.ticket.is-hinted .strip {
  outline: 4px dashed var(--ak-accent-2);
  outline-offset: 3px;
}

/* The hinted ticket carries its own flag, so the advice and the ticket it means read as one. */
.ticket.is-hinted::before {
  content: 'Best pick';
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 2px;
  padding: 2px 8px;
  border: 2px solid var(--ak-ink);
  background: var(--ak-accent-2);
  color: var(--ak-btn-ink);
  font-family: var(--ak-font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translateX(-50%);
  pointer-events: none;
}

.ticket.is-guided .strip,
.act.is-guided {
  outline: 4px solid var(--ak-accent);
  outline-offset: 3px;
}

/* ---------- tray of brass tags ---------- */

.tray {
  flex: none;
  margin-top: var(--gap);
  padding: 6px;
  border: 2px solid var(--ak-ink);
  border-radius: var(--ak-radius);
  background:
    linear-gradient(180deg, var(--steel) 0 50%, var(--steel-lo) 100%);
}

.tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--count, 6), minmax(0, 1fr));
  gap: 5px;
}

.tag {
  position: relative;
  height: 46px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 2px 3px;
  border: 3px solid var(--brass);
  background: var(--ak-surface);
  color: var(--ak-ink-muted);
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%, 0 12px);
}

.tag::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 50%;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  border-radius: 50%;
  background: var(--steel-lo);
}

.tag-month {
  font-family: var(--ak-font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
}

.tag-foot {
  display: flex;
  align-items: center;
  gap: 2px;
  min-height: 15px;
}

.tag-mark { flex: none; width: 14px; height: 14px; }

.tag-sum {
  font-family: var(--ak-font-display);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.tag.is-paid { color: var(--ak-ink); border-color: var(--ak-ink-muted); }
.tag.is-now { color: var(--ak-ink); border-color: var(--ak-ink); border-style: dashed; }

.tag-broke {
  position: absolute;
  right: 2px;
  top: 2px;
  width: 14px;
  height: 14px;
  color: var(--heat);
}

/* Weather sits in the tag's corner; the foot names the repair it hits. */
.tag-weather {
  position: absolute;
  right: 3px;
  top: 3px;
  width: 12px;
  height: 12px;
  color: var(--ak-ink-muted);
}

.tag.is-rain,
.tag.is-cold { color: var(--ak-ink); }

.tag.has-break { border-color: var(--heat); }

/* ---------- the side of the table ---------- */

.side {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  min-height: 0;
}

.desk {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 66px;
}

.envelope {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.envelope img {
  width: auto;
  height: 54px;
}

.envelope figcaption {
  max-width: 132px;
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.envelope-label,
.envelope-note {
  font-size: 12px;
  font-weight: 600;
  color: var(--ak-ink-muted);
}

.envelope-spent {
  margin-top: 2px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ak-ink-muted);
}

.envelope-spent strong {
  font-family: var(--ak-font-display);
  font-size: 15px;
  color: var(--ak-ink);
}

.envelope-sum {
  font-family: var(--ak-font-display);
  font-size: 26px;
  font-weight: 700;
  color: var(--ak-ink);
}

.note {
  flex: 1 1 auto;
  min-width: 0;
  padding: 6px 10px 6px;
  border-top: 5px solid var(--ak-accent);
  background: var(--ak-bg);
  color: var(--ak-ink);
  box-shadow: 0 3px 8px var(--paper-shadow);
  transform: rotate(-1.2deg);
}

.note p { margin: 0; }

.note-house {
  font-family: var(--ak-font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.note-label {
  font-family: var(--ak-font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ak-ink-muted);
}

.note-ladder {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 6px;
  margin: 2px 0 !important;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}

.note-ladder .rung {
  width: 12px;
  height: 8px;
}

/* Ahead of or behind the best season so far, said in one stamp. */
.race {
  display: inline-block;
  padding: 0 5px;
  border: 2px solid var(--ak-ink);
  font-family: var(--ak-font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ak-ink);
}

.race-ahead { background: var(--ak-ink); color: var(--ak-surface); }
.race-behind { background: var(--heat); color: var(--ak-btn-ink); }

.card-race {
  margin: 0;
  padding: 4px 8px;
  border-left: 5px solid var(--ak-ink-muted);
  font-weight: 700;
  line-height: 1.3;
}

.card-race.is-new { border-left-color: var(--ak-accent); }

.race-word {
  display: inline-block;
  margin-right: 2px;
  padding: 0 6px;
  border: 2px solid var(--ak-ink);
  font-family: var(--ak-font-display);
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.card-race.is-new .race-word { background: var(--ak-ink); color: var(--ak-surface); }

.note-beat {
  margin-top: 2px !important;
  font-size: 12px;
  font-weight: 700;
  color: var(--ak-ink-muted);
}

.note-goal {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
}

.note-spent {
  margin-top: 2px !important;
  font-size: 13px;
  color: var(--ak-ink-muted);
}

.note-spent strong {
  font-family: var(--ak-font-display);
  font-size: 16px;
  color: var(--ak-ink);
}

/* A printed docket: perforated top, square corners. */
.docket {
  position: relative;
  flex: none;
  max-height: 40dvh;
  min-height: clamp(120px, 21dvh, 200px);
  padding: 10px 12px 10px;
  background:
    radial-gradient(circle at 6px 0, transparent 3.5px, var(--ak-bg) 4px) 0 0 / 12px 100% repeat-x;
  color: var(--ak-ink);
  box-shadow: 0 4px 10px var(--paper-shadow);
  overflow-y: auto;
}

.docket-head {
  margin: 0 0 6px;
  font-family: var(--ak-font-display);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.15;
}

.row {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 8px;
  margin: 0 0 4px;
  font-size: 15px;
  line-height: 1.3;
}

.key {
  padding-top: 2px;
  font-family: var(--ak-font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ak-ink-muted);
}

.guide {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -10px -12px 10px;
  padding: 10px 12px;
  background: var(--ak-choice-selected-bg);
  color: var(--ak-choice-selected-ink);
}

.guide-arrow {
  flex: none;
  width: 30px;
  height: 30px;
  fill: currentColor;
}

.guide[data-point='down'] .guide-arrow { transform: rotate(180deg); }

.guide-text {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}

/* The picked repair's money, laid out like a till receipt. */
.receipt {
  width: 100%;
  margin: 0 0 6px;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.25;
}

.receipt th {
  padding: 1px 0;
  font-weight: 600;
  text-align: left;
}

.receipt td {
  padding: 1px 0 1px 8px;
  font-family: var(--ak-font-display);
  font-size: 17px;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
  vertical-align: top;
}

.receipt-note {
  font-size: 13px;
  font-weight: 400;
  color: var(--ak-ink-muted);
}

.receipt tr.is-total th,
.receipt tr.is-total td {
  border-top: 2px dashed var(--ak-ink-muted);
  padding-top: 3px;
}

.part {
  margin: 0 0 6px;
  padding: 6px 8px;
  border: 2px solid var(--ak-ink);
  border-left: 6px solid var(--heat);
  background: var(--ak-surface);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

.part-label {
  display: inline-block;
  margin-right: 6px;
  padding: 0 6px;
  background: var(--ak-choice-selected-bg);
  color: var(--ak-choice-selected-ink);
  font-family: var(--ak-font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.warn {
  margin: 0 0 8px;
  padding: 8px 10px;
  border-left: 6px solid var(--heat);
  background: var(--ak-surface);
  color: var(--ak-ink);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
}

/* The hint stays pinned to the top of the docket while the receipt scrolls beneath it. */
.challenge-live {
  display: inline-block;
  padding: 0 5px;
  border: 2px solid var(--ak-ink);
  font-family: var(--ak-font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: 1px;
}

.challenge-live.is-missed {
  background: var(--heat);
  color: var(--ak-btn-ink);
}

.advice {
  position: sticky;
  top: -10px;
  z-index: 2;
  margin: 0 0 8px;
  padding: 8px 10px;
  border: 2px solid var(--ak-ink);
  border-left: 8px solid var(--ak-accent-2);
  background: var(--ak-bg);
  color: var(--ak-ink);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}

/* Shown by itself in a month with a hard trade: hot red edge, so it reads as a warning, not a tip. */
.advice.is-tough { border-left-color: var(--heat); }
.advice.is-tough .advice-label { background: var(--heat); color: var(--ak-btn-ink); }

/* The pick reads first and large; its reason under it; side notes small and quiet. */
.advice p { margin: 0; }

.advice-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 8px;
}

.advice-head {
  font-family: var(--ak-font-display);
  font-size: 22px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.1;
}

.advice-why {
  margin-top: 4px !important;
  font-size: 16px;
}

.advice-notes {
  margin: 4px 0 0;
  padding-left: 18px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ak-ink-muted);
}

/* The last month's report opens by saying the season is over. */
.season-over {
  margin: 0 0 10px;
  padding: 8px 10px;
  border: 2px solid var(--ak-ink);
  border-left: 8px solid var(--ak-ink);
  background: var(--ak-bg);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

.season-over-head {
  display: block;
  font-family: var(--ak-font-display);
  font-size: 22px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Every ticket's two outcomes, side by side, before a pick. */
.options-wrap { margin: 0 0 8px; }

.options {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.25;
}

.options caption {
  padding: 0 0 4px;
  font-family: var(--ak-font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  color: var(--ak-ink-muted);
}

.options thead th {
  padding: 0 4px 2px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
  color: var(--ak-ink-muted);
}

.options td,
.option-name {
  padding: 4px;
  border-top: 1px solid color-mix(in srgb, var(--ak-ink) 18%, transparent);
  text-align: left;
  vertical-align: top;
}

.option-name {
  padding-left: 0;
  font-family: var(--ak-font-display);
  font-size: 15px;
  white-space: nowrap;
}

.options td.is-hot { font-weight: 700; }
.options td.is-part { font-style: italic; }

.options-wrap .part { margin-top: 6px; }

.advice-label {
  display: inline-block;
  margin-right: 0;
  padding: 1px 6px;
  background: var(--ak-choice-selected-bg);
  color: var(--ak-choice-selected-ink);
  font-family: var(--ak-font-display);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  vertical-align: 2px;
}

.actions {
  flex: none;
  display: flex;
  gap: var(--gap);
}

.act {
  flex: 1 1 auto;
  min-height: 56px;
  padding: 0 16px;
  border: 2px solid var(--ak-ink);
  border-radius: var(--ak-radius);
  background: var(--ak-btn-fill);
  color: var(--ak-btn-ink);
  font-family: var(--ak-font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.1;
}

/* The second line names what the button will do: which repair, or which house comes next. */
.act-sub {
  margin-top: 2px;
  font-family: var(--ak-font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.act-sub:empty { display: none; }

.act:active { background: var(--ak-btn-active); }
.act:disabled { cursor: default; }

/* Nothing picked yet: an unfilled button that says what it waits for. It fills once a ticket is picked. */
.act.is-waiting,
.act.is-waiting:active {
  border-style: dashed;
  background: var(--ak-surface);
  color: var(--ak-ink);
}

.act.is-nudged .act-sub { color: var(--heat); }

/* Tapped too soon: every ticket rings once, pointing at what to tap. */
.tickets.is-nudged .ticket .strip {
  outline: 4px solid var(--ak-accent);
  outline-offset: 3px;
}

.act[data-mode='report'],
.act[data-mode='done'] {
  background: var(--ak-accent-2);
  color: var(--ak-btn-ink);
}

.hint,
.plain {
  flex: none;
  min-width: 88px;
  min-height: 56px;
  padding: 0 14px;
  border: 2px solid var(--ak-ink);
  border-radius: var(--ak-radius);
  background: var(--ak-surface);
  color: var(--ak-ink);
  font-family: var(--ak-font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.hint[aria-pressed='true'] {
  background: var(--ak-accent-2);
  color: var(--ak-btn-ink);
}

@media (hover: hover) {
  .act:hover:not(:disabled) { background: var(--ak-btn-hover); }
  .act[data-mode='report']:hover,
  .act[data-mode='done']:hover { background: var(--ak-ink); }
  .act.is-waiting:hover:not(:disabled) { background: var(--ak-bg); }
}

/* ---------- the ending ---------- */

.reason {
  position: relative;
  flex: none;
  align-self: center;
  max-width: 94%;
  margin: 18px 0 0;
  padding: 12px 16px;
  border: 2px solid var(--ak-ink);
  background: var(--ak-bg);
  color: var(--ak-ink);
  font-family: var(--ak-font-display);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}

.reason::before {
  content: '';
  position: absolute;
  top: -20px;
  left: 50%;
  width: 34px;
  height: 22px;
  margin-left: -17px;
  border: 2px solid var(--ak-ink);
  border-radius: 3px;
  background: var(--steel);
}

.pass.is-cleared .tickets { display: none; }
.pass.is-cleared .board { flex: none; }
.pass.is-over .side { flex: 1 1 auto; }
/* Swept tickets are gone by now, so the counter side can scroll when the lesson runs long sideways. */
.pass.is-cleared .board { overflow-x: hidden; overflow-y: auto; }
.pass.is-over .desk,
.pass.is-over .docket,
.pass.is-over .actions { display: none; }

.card {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 6px 4px 0;
  padding: 14px 16px 14px;
  border-top: 8px solid var(--ak-ink);
  background: var(--ak-bg);
  color: var(--ak-ink);
  box-shadow: 0 10px 24px var(--paper-shadow);
  transform: rotate(-0.8deg);
  overflow: hidden;
}

/* The result scrolls if it must; Another and Change settings never leave the card. */
.card-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: inherit;
  overflow-y: auto;
}

.card-kicker {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  font-family: var(--ak-font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ak-ink-muted);
}

/* The headline says the season is over and names how the house came through. */
.card-title {
  margin: 0;
  display: flex;
  flex-direction: column;
  font-family: var(--ak-font-display);
  font-weight: 700;
  line-height: 1.05;
  color: var(--ak-ink);
}

.card-title-top {
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ak-ink-muted);
}

.card-ending {
  font-size: 28px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* The house ladder: one brass rung per house, the cleared ones filled. */
.ladder {
  display: inline-flex;
  gap: 4px;
}

.rung {
  width: 16px;
  height: 10px;
  border: 2px solid var(--ak-ink);
  background: var(--ak-surface);
}

.rung.is-cleared { background: var(--ak-ink); }
.rung.is-here { outline: 2px solid var(--ak-accent); outline-offset: 2px; }

.streak { color: var(--ak-ink); }

/* The house's challenge, stamped on the card: met or missed. */
.challenge-stamp {
  align-self: flex-start;
  margin: 0;
  padding: 3px 10px 3px 4px;
  border: 3px solid var(--ak-ink-muted);
  color: var(--ak-ink);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  transform: rotate(-1.5deg);
}

.challenge-stamp.is-met { border-color: var(--ak-ink); }

.stamp-word {
  display: inline-block;
  margin-right: 8px;
  padding: 0 6px;
  border: 2px solid var(--ak-ink);
  font-family: var(--ak-font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.challenge-stamp.is-met .stamp-word {
  background: var(--ak-choice-selected-bg);
  color: var(--ak-choice-selected-ink);
}

.card-says {
  margin: 0;
  font-family: var(--ak-font-display);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
}

.dials {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.dial {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.dial svg {
  width: min(84px, 22vw, 13dvh);
  height: auto;
  aspect-ratio: 1;
}

.dial-face { fill: var(--ak-surface); stroke: var(--ak-ink); stroke-width: 4; }
.dial-track { fill: none; stroke: color-mix(in srgb, var(--ak-ink) 15%, transparent); stroke-width: 10; }
.dial-fill { fill: none; stroke: var(--steel-lo); stroke-width: 10; }
.tone-warm .dial-fill { stroke: var(--amber); }
.tone-risk .dial-fill { stroke: var(--heat); }
.dial-needle {
  stroke: var(--ak-ink);
  stroke-width: 4;
  stroke-linecap: round;
  transform-box: view-box;
  transform-origin: 50px 50px;
}
.dial-pin { fill: var(--ak-ink); }

.dial figcaption {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.dial-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ak-ink-muted);
}

.dial-value {
  font-family: var(--ak-font-display);
  font-size: 20px;
}

.dial-best {
  margin-top: 1px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ak-ink-muted);
}

.dial-best.is-fresh {
  align-self: center;
  padding: 0 5px;
  background: var(--ak-choice-selected-bg);
  color: var(--ak-choice-selected-ink);
}

.dial-sub {
  font-size: 12px;
  color: var(--ak-ink-muted);
}

.trades {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.2;
}

.trades caption {
  padding: 0 0 4px;
  border-top: 2px dashed var(--ak-ink-muted);
  padding-top: 6px;
  font-family: var(--ak-font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: left;
  color: var(--ak-ink-muted);
}

.trades thead th {
  padding: 0 3px 2px;
  line-height: 1.05;
  vertical-align: bottom;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ak-ink-muted);
}

.trades td {
  padding: 3px 4px;
  border-top: 1px solid color-mix(in srgb, var(--ak-ink) 18%, transparent);
  text-align: center;
  white-space: nowrap;
}

.trades td.is-hot { font-weight: 700; }

.trade-name {
  padding: 3px 4px 3px 0;
  border-top: 1px solid color-mix(in srgb, var(--ak-ink) 18%, transparent);
  font-family: var(--ak-font-display);
  font-size: 15px;
  text-align: left;
  white-space: nowrap;
}

.trade-mark {
  width: 15px;
  height: 15px;
  margin-right: 4px;
  vertical-align: -2px;
}

/* The counter copy of the table is for the sideways layout only. */
.trades-board {
  align-self: stretch;
  width: auto;
  margin: 14px 4px 0;
  padding: 8px 10px;
  background: var(--ak-bg);
  box-shadow: 0 4px 10px var(--paper-shadow);
}

.card-next-board {
  align-self: stretch;
  margin: 10px 4px 0;
  padding: 8px 10px;
  background: var(--ak-bg);
  color: var(--ak-ink);
  box-shadow: 0 4px 10px var(--paper-shadow);
}

@media (orientation: landscape) {
  .card .card-next { display: none; }
}

@media (orientation: portrait) {
  .trades-board,
  .card-next-board { display: none; }
  .pass.is-over .tray { display: none; }
  /* Upright the rail keeps room for whole tickets; a long docket shrinks and scrolls instead. */
  .pass:not(.is-cleared) .board { flex: 1 0 auto; min-height: min(390px, 50dvh); }
  .side { flex: 0 1 auto; }
  .docket { flex: 0 1 auto; min-height: clamp(96px, 15dvh, 150px); }
}

/* What the next house holds, so Another has something to promise. */
.card-next {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}

.card-lesson {
  display: block;
  margin-top: 6px;
}

.card-next-label {
  display: inline-block;
  margin-right: 6px;
  padding: 0 6px;
  border: 2px solid var(--ak-ink);
  font-family: var(--ak-font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.card-actions {
  flex: none;
  display: flex;
  gap: var(--gap);
}

.card-actions .act { min-height: 52px; }
.card-actions .plain { min-height: 52px; }

/* ---------- sideways: rail on the left, the desk on the right ---------- */

@media (orientation: landscape) {
  .pass {
    flex-direction: row;
    max-width: 1100px;
    height: min(100dvh, 760px);
    gap: 14px;
  }

  .board { flex: 1 1 51%; min-width: 0; }

  .topline { padding-right: 0; }

  .side {
    flex: 1 1 49%;
    max-width: 480px;
    min-width: 0;
  }

  .desk { padding-right: 60px; gap: 6px; }
  .envelope img { height: 42px; }
  .envelope figcaption { max-width: 96px; }
  .envelope-sum { font-size: 22px; }
  .note { padding: 4px 8px; }
  .note-goal { font-size: 13px; line-height: 1.2; }
  .note-house { font-size: 13px; }

  .docket { flex: 1 1 auto; min-height: 0; max-height: none; }

  .guide[data-point='board'] .guide-arrow { transform: rotate(-90deg); }

  .pass.is-cleared .board { flex: 1 1 42%; }
  .pass.is-over .side { flex: 1 1 58%; }
  .pass.is-over .reason { margin-top: 24px; }
  /* As upright: the trade table carries the month-by-month story, so the tray steps aside. */
  .pass.is-over .tray { display: none; }
  .trades-card { display: none; }
  /* The card reaches the top; its first lines keep clear of the ? button. */
  .card { margin-top: 0; }
  .card-title { margin-right: 56px; }
  .challenge-stamp { max-width: calc(100% - 56px); }
  .dials { margin-top: auto; }
}

@media (orientation: landscape) and (max-height: 500px) {
  :root { --gap: 6px; --strip-h: 70px; }
  .card-next-board { margin-top: 6px; padding: 4px 8px; font-size: 13px; line-height: 1.25; }
  .card-next-label { font-size: 11px; }
  .card { gap: 6px; }
  .card-says { line-height: 1.2; }
  .challenge-stamp { font-size: 13px; padding: 2px 8px 2px 3px; }
  .stamp-word { font-size: 13px; }
  .receipt { font-size: 14px; }
  .receipt td { font-size: 15px; }
  .part { font-size: 14px; padding: 4px 6px; }
  .topline { height: 46px; }
  .logo { height: 38px; }
  .rail-row { height: 50px; }
  .tray { padding: 4px; }
  .tag { height: 40px; padding-top: 4px; gap: 1px; }
  .tag::before { display: none; }
  .pass.is-over .reason { margin-top: 10px; padding: 3px 10px; font-size: 15px; }
  /* Sideways the reason says which month ended, so the clock row slims down to make room. */
  .pass.is-over .when { display: none; }
  .pass.is-over .rail-row { height: 30px; }
  .pass.is-over .reason { line-height: 1.15; }
  .pass.is-over .trades-board { margin-top: 6px; }
  .pass.is-over .trades caption { padding-top: 3px; }
  .trades-board { margin-top: 8px; padding: 4px 8px; }
  .trades { font-size: 13px; }
  .trades td, .trade-name { padding-top: 2px; padding-bottom: 2px; }
  .desk { min-height: 58px; }
  .envelope img { height: 46px; }
  .row { font-size: 14px; }
  .card { gap: 6px; padding: 10px 12px; margin-top: 0; }
  .card-says { font-size: 17px; }
  .card-title { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
  .card-ending { font-size: 22px; }
  .card-title-top { font-size: 12px; }
  .card-kicker { font-size: 12px; letter-spacing: 0.08em; }
  .challenge-stamp { margin-top: -2px; }
  .dial-sub { display: none; }
  .dial svg { width: min(56px, 14dvh); }
  .dial-value { font-size: 17px; }
  .trade { font-size: 13px; }
}

@media (orientation: portrait) and (max-height: 700px) {
  :root { --gap: 6px; --strip-h: 66px; }
  .topline { height: 48px; }
  .logo { height: 40px; }
  .rail-row { height: 50px; }
  .strip-name { font-size: 14px; }
  .strip-cost { font-size: 19px; }
  .tray { padding: 4px; margin-top: 6px; }
  .tag { height: 40px; padding-top: 4px; gap: 1px; }
  .tag::before { display: none; }
  .desk { min-height: 54px; }
  .envelope img { height: 44px; }
  .envelope-sum { font-size: 22px; }
  .note { padding: 4px 8px; }
  .note-goal { font-size: 13px; }
  .docket { min-height: 0; padding: 8px 10px; }
  .guide { margin: -8px -10px 8px; padding: 8px 10px; }
  .docket-head { font-size: 17px; margin-bottom: 4px; }
  .row { font-size: 14px; }
  .pass.is-over .tray { display: none; }
  .pass.is-over .rail-row { height: 38px; }
  .reason { margin-top: 12px; padding: 6px 10px; font-size: 16px; }
  .dial svg { width: min(52px, 9dvh) !important; }
  .docket { max-height: 24dvh; }
  .note-house { font-size: 12px; letter-spacing: 0; }
  .note-goal { line-height: 1.2; }
  .receipt { font-size: 14px; }
  .receipt td { font-size: 15px; }
  .part { font-size: 14px; padding: 4px 6px; }
  .dial-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .trades td, .trade-name { padding-top: 2px; padding-bottom: 2px; }
  .card-actions .act, .card-actions .plain { min-height: 50px; }
  .card { gap: 6px; padding: 10px 12px; }
  .card-says { font-size: 17px; }
  .card-ending { font-size: 22px; }
  .dial svg { width: min(64px, 10dvh); }
  .dial-value { font-size: 17px; }
}

/* A shorter upright phone: what comes next moves above the dials so it shows without scrolling. */
@media (orientation: portrait) and (max-height: 780px) {
  .card .card-next { order: 1; }
  .card .dials { order: 2; }
  .card .trades-card { order: 3; }
}

/* ---------- motion ---------- */

@media (prefers-reduced-motion: no-preference) {
  .clock-hand { transition: transform 520ms cubic-bezier(0.34, 1.4, 0.64, 1); }

  .ticket { transition: transform 320ms ease, opacity 320ms ease; }

  .ticket.is-swaying { animation: sway 3.4s ease-in-out infinite alternate; }
  .ticket.is-swaying.wear-3 { animation-duration: 2.2s; --sway: 1.8deg; }

  .ticket.is-stamped .stamp { animation: stamp 260ms cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }

  .ticket.is-leaving {
    transform: translateX(120%);
    opacity: 0;
    animation: none;
  }

  .ticket.is-arriving { animation: arrive 320ms ease-out both; }

  .ticket.is-swept {
    transform: translate(var(--sweep-x), 30%) rotate(var(--sweep-r));
    opacity: 0;
    animation: none;
    transition: transform 560ms cubic-bezier(0.5, 0, 0.75, 0), opacity 560ms ease-in;
  }

  .ticket.is-guided .strip,
  .act.is-guided { animation: ring 1.1s ease-in-out infinite; }

  .tickets.is-nudged .ticket .strip { animation: ring 0.6s ease-in-out 2; }

  .reason { animation: arrive 320ms ease-out both; }

  .card { animation: land 520ms cubic-bezier(0.22, 1, 0.36, 1) both; }

  .dial-needle { transition: transform 900ms cubic-bezier(0.34, 1.3, 0.64, 1) 200ms; }

  .row,
  .warn { animation: settle 260ms ease-out both; }
}

@media (prefers-reduced-motion: reduce) {
  .ticket.is-swept { visibility: hidden; }
  .ticket.is-leaving { visibility: hidden; }
}

@keyframes sway {
  from { transform: rotate(calc(-1 * var(--sway, 0.9deg))); }
  to { transform: rotate(var(--sway, 0.9deg)); }
}

@keyframes stamp {
  from { opacity: 0; transform: translate(-50%, -50%) rotate(-4deg) scale(1.9); }
  to { opacity: 1; transform: translate(-50%, -50%) rotate(-12deg) scale(1); }
}

@keyframes arrive {
  from { opacity: 0; transform: translateY(-18px); }
  to { opacity: 1; transform: none; }
}

@keyframes ring {
  0%, 100% { outline-offset: 3px; outline-color: var(--ak-accent); }
  50% { outline-offset: 8px; outline-color: var(--ak-ink); }
}

/* Transform only: the card is readable from its first frame. */
@keyframes land {
  from { transform: translateY(36px) rotate(3deg); }
  to { transform: rotate(-0.8deg); }
}

@keyframes settle {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

/* Sideways, the kit's Play button stays pinned over the instructions, so a quick tap skips them.
   Let it sit after the goal, controls and tip instead (start.js already orders it last). */
@media (orientation: landscape) and (max-height: 500px) {
  #activity-start#activity-start.is-instructions .ak-go {
    position: static;
    margin-bottom: var(--ak-space-3, 12px);
  }
}

/* ---------- the start screen's preview of the table ---------- */

#activity-start .lrr-preview {
  margin: var(--ak-space-4, 16px) 0 0;
  text-align: left;
}

/* The title, printed on a cream plate riveted to the steel rail. */
#activity-start .lrr-plate {
  position: relative;
  margin: 0;
  padding: 0 0 0;
  text-align: center;
  font-family: var(--ak-font-display);
  font-size: clamp(24px, 7vw, 34px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ak-ink);
}

#activity-start .lrr-plate::before {
  content: '';
  position: absolute;
  left: -8px;
  right: -8px;
  bottom: -14px;
  height: 12px;
  border-top: 2px solid var(--ak-ink);
  border-bottom: 2px solid var(--ak-ink);
  background: linear-gradient(180deg, var(--steel-hi) 0 30%, var(--steel) 30% 70%, var(--steel-lo) 70% 100%);
}

#activity-start .lrr-tickets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

#activity-start .lrr-ticket {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}

#activity-start .lrr-ticket img {
  display: block;
  width: 100%;
  height: clamp(64px, 14dvh, 120px);
  object-fit: contain;
  object-position: 50% 0;
}

#activity-start .lrr-ticket.wear-2 img {
  filter:
    drop-shadow(2px 0 0 var(--amber)) drop-shadow(-2px 0 0 var(--amber))
    drop-shadow(0 2px 0 var(--amber)) drop-shadow(0 -2px 0 var(--amber));
}

#activity-start .lrr-ticket .strip {
  height: auto;
  grid-template-rows: auto auto;
}

#activity-start .lrr-ticket.wear-2 .strip { border-top-color: var(--amber); }

#activity-start .lrr-story {
  margin: 10px 0 0;
  font-size: 16px;
  line-height: 1.4;
  color: var(--ak-ink);
}

#activity-start .lrr-aim {
  margin: 6px 0 0;
  padding: 6px 10px;
  border-left: 5px solid var(--ak-accent);
  background: var(--ak-bg);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ak-ink);
}

/* Sideways the setup is two columns that fit the screen with no scrolling: the logo, this house's
   tickets and the aim on the left; the story, the month choice, Start and How to play on the right.
   The preview's children join the sheet's grid so each lands in its own column.
   The doubled id and extra class beat the kit's sideways flex column. */
@media (orientation: landscape) and (max-height: 500px) {
  #activity-start#activity-start.is-setup.layout-panel {
    padding: max(8px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  }
  #activity-start#activity-start.is-setup.layout-panel .ak-sheet {
    display: grid;
    width: min(100%, 860px);
    max-height: calc(100dvh - 16px);
    padding: 12px 18px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
      "head story"
      "tickets story"
      "tickets groups"
      "aim go";
    column-gap: 22px;
    row-gap: 8px;
    align-items: start;
  }
  #activity-start#activity-start.is-setup.layout-panel .lrr-preview { display: contents; }
  #activity-start#activity-start.is-setup.layout-panel .ak-head {
    grid-area: head;
    padding: 0 0 6px;
  }
  #activity-start#activity-start.is-setup.layout-panel .ak-logo { max-height: min(52px, 13dvh); }
  /* The instructions screen scrolls by design; there the preview stays a compact block. */
  #activity-start.is-instructions .lrr-preview {
    display: grid;
    grid-template-columns: minmax(0, 46%) minmax(0, 1fr);
    grid-template-areas: "tickets story" "tickets aim";
    column-gap: 14px;
    row-gap: 6px;
    align-items: start;
  }
  #activity-start .lrr-plate { display: none; }
  #activity-start .lrr-tickets { grid-area: tickets; gap: 6px; margin-top: 0; }
  #activity-start .lrr-ticket img { height: min(72px, 18dvh); }
  #activity-start .lrr-ticket .strip-name { font-size: 15px; }
  #activity-start .lrr-ticket .strip-cost { font-size: 18px; }
  #activity-start .lrr-story { grid-area: story; margin: 0; font-size: 16px; line-height: 1.35; }
  #activity-start .lrr-aim { grid-area: aim; margin: 0; font-size: 16px; padding: 6px 10px; }
  #activity-start#activity-start.is-setup.layout-panel .ak-groups { grid-area: groups; margin: 0; }
  #activity-start#activity-start.is-setup.layout-panel .ak-group {
    grid-template-columns: 1fr;
    row-gap: 4px;
    padding: 0;
  }
  #activity-start#activity-start.is-setup.layout-panel .ak-legend { grid-column: 1; font-size: 15px; text-align: left; }
  #activity-start#activity-start.is-setup.layout-panel .ak-pills { grid-column: 1; display: flex; gap: 10px; }
  #activity-start#activity-start.is-setup.layout-panel .ak-pill {
    flex: 1 1 0;
    min-width: 0;
    height: 52px;
    padding: 0 8px;
    font-size: 18px;
    white-space: nowrap;
  }
  /* Start and How to play share the last row, so the whole setup sits above the fold. */
  #activity-start#activity-start.is-setup.layout-panel .ak-go {
    grid-area: go;
    align-self: start;
    width: calc(100% - 132px);
    min-height: 52px;
    margin: 0;
  }
  #activity-start#activity-start.is-setup.layout-panel .ak-how {
    grid-area: go;
    justify-self: end;
    align-self: start;
    width: 120px;
    min-height: 52px;
    margin: 0;
    font-size: 15px;
  }
}