/* Wave 1 native viewport presentation. The game is no longer a scaled canvas. */

.shell-bar__identity {
  overflow: visible;
}

.play-workspace {
  width: 100%;
  height: 100%;
  min-height: 0;
}

#app {
  width: 100%;
  max-width: 960px;
  height: 100%;
  min-height: 0;
  margin: 0 auto;
}

.ink-stage {
  --action-safe-bottom: max(12px, env(safe-area-inset-bottom));
  --plot-rail: 60px;
  position: relative;
  inset: auto;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  transform: none;
}

.ink-screen {
  display: grid;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  grid-template-rows: 28px minmax(0, 1fr) calc(60px + var(--action-safe-bottom));
  background: var(--board);
}

.ink-stage .screen-content {
  width: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
}

.hud-content {
  display: grid;
  min-height: 0;
  grid-template-rows: minmax(0, 1fr) 110px;
}

.year-strip {
  position: relative;
  z-index: 20;
  display: flex;
  width: 100%;
  height: 28px;
  min-height: 28px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 10px;
  border-bottom: 1px solid var(--soft-line);
  background: var(--board);
  color: var(--muted);
  font-family: var(--mono);
}

.ink-year {
  order: -1;
  margin: 0;
  color: var(--ink);
  font-size: 10px;
  letter-spacing: 0.08em;
  line-height: 1.2;
  white-space: nowrap;
}

.year-strip__actions {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.ink-replay {
  min-width: 0;
  min-height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  line-height: 1.2;
  white-space: nowrap;
}

.ink-replay:not(:disabled) {
  color: var(--ink);
}

.ink-replay:disabled {
  cursor: default;
  opacity: 0.35;
}

/* Market board */

.board-section {
  position: relative;
  display: flex;
  width: 100%;
  height: auto;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}

.market-board {
  display: grid;
  width: 100%;
  min-width: 0;
  height: auto;
  min-height: 0;
  flex: 1 1 auto;
  padding: 0 12px 0 6px;
  border: 0;
  /* header, ring legend, plot, IQ axis. The legend row is auto so it costs
     nothing when the board does not render one. */
  grid-template-rows: 42px auto minmax(0, 1fr) 44px;
}

.board-legend {
  display: flex;
  width: 100%;
  min-width: 0;
  height: 42px;
  min-height: 42px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 2px 0 calc(var(--plot-rail) + 4px);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}

.board-legend__copy {
  display: inline-flex;
  min-width: 0;

  /* Never shrink: the label is nowrap with visible overflow, so a shrunk
     box overpaints the avg-price module to its right. The avg-price span
     is the flexible party (it shrinks first). */
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  color: var(--ink);
}

.board-legend__glyph {
  display: inline-block;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: conic-gradient(
    var(--volt) 0 33.333%,
    var(--kiln) 33.333% 66.666%,
    var(--para) 66.666% 100%
  );

  /* The board's work markers are donuts (annuli), not pies — the legend
     key matches them. Hole proportion mirrors work-token.mjs
     (inner 30 / outer 46 ≈ 65%); nothing renders inside the hole. */
  -webkit-mask: radial-gradient(
    circle closest-side,
    transparent 0 62%,
    #000 63%
  );
  mask: radial-gradient(circle closest-side, transparent 0 62%, #000 63%);
}

.board-legend__label,
.price-rail .price-axis-title,
.iq-axis .iq-axis__label {
  color: var(--ink);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}

/* One fixed-size industry series. The frame never inherits the old
   viewport-width clamp, and both its label and current value stay outside. */
.avg-price {
  display: inline-grid;
  min-width: 0;
  height: 40px;
  min-height: 40px;
  flex: 0 0 auto;
  grid-template-columns: 72px auto;
  grid-template-rows: 12px 28px;
  column-gap: 4px;
}

.avg-price b {
  color: var(--ink);
  font-size: 10px;
  font-weight: 650;
  white-space: nowrap;
}

.avg-price__label {
  grid-column: 1 / 3;
  grid-row: 1;
  align-self: start;
  color: var(--muted);
  font-size: 9px;
  letter-spacing: 0;
  line-height: 12px;
}

.avg-price__frame {
  display: block;
  width: 72px;
  min-width: 72px;
  height: 28px;
  min-height: 28px;
  flex: 0 0 72px;
  grid-column: 1;
  grid-row: 2;
  box-sizing: border-box;
  border: 1px solid var(--soft-line);
  background: rgb(138 143 152 / 5.5%);
}

.avg-price__chart {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.avg-price__grid {
  stroke: var(--soft-line);
  stroke-width: 1;
}

.avg-price__line {
  fill: none;
  stroke: var(--ink);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.avg-price__point {
  fill: var(--volt);
  stroke: var(--field);
  stroke-width: 1;
}

.avg-price__value {
  grid-column: 2;
  grid-row: 2;
  align-self: center;
}

@media (max-width: 359px) {
  /* The shortest reveal viewport needs three extra pixels per market row
     once every donut is inscribed. Recover that space from the lab cards
     while keeping their identity and all three operating metrics visible. */
  .reveal-screen .hud-content {
    grid-template-rows: minmax(0, 1fr) 86px;
  }

  .reveal-screen .fleet-section {
    height: 86px;
    min-height: 86px;
    flex-basis: 86px;
    padding: 4px 6px 5px;
  }

  .reveal-screen .fleet-grid,
  .reveal-screen .fleet-card {
    height: 76px;
  }

  .reveal-screen .fleet-card {
    padding: 4px;
    grid-template-rows: 28px minmax(0, 1fr);
  }
}

@media (max-width: 375px) and (max-height: 600px) {
  .task-cell:has(.token-number) .task-label,
  .task-cell:has(.token-number) .task-state {
    font-size: 8px;
    line-height: 1.4;
  }

  .task-cell:has(.token-number) .task-label {
    top: 0;
  }

  .task-cell:has(.token-number) .task-state {
    bottom: 0;
  }
}

.board-plot {
  position: relative;
  display: grid;
  width: 100%;
  height: auto;
  min-height: 0;
  margin: 0;
  grid-template-columns: var(--plot-rail) minmax(0, 1fr);
}

.price-rail {
  position: relative;
  display: grid;
  width: var(--plot-rail);
  height: 100%;
  min-height: 0;
  grid-column: 1;
  grid-template-rows: repeat(6, minmax(0, 1fr));
}

.price-rail > span:not(.price-axis-title) {
  display: flex;
  min-height: 0;
  align-items: center;
  justify-content: flex-end;
  padding-right: 5px;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.2;
}

.price-axis-title {
  position: absolute;
  z-index: 2;
  top: -21px;
  right: auto;
  bottom: auto;
  left: 0;
  display: block;
  width: var(--plot-rail);
  height: auto;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.5;
  text-transform: uppercase;
  white-space: nowrap;
  writing-mode: horizontal-tb;
  transform: none;
}

.market-grid {
  position: relative;
  display: grid;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: visible;
  grid-column: 2;
  grid-template-rows: repeat(6, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  background: var(--board);
}

.market-row {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.board-cell {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 0;
  place-items: center;
  overflow: hidden;
  border: 0;
  border-right: 1px solid var(--figure-grid);
  border-bottom: 1px solid var(--figure-grid);
  background: transparent;
  color: var(--ink);
}

button.board-cell {
  padding: 0;
  cursor: pointer;
}

.task-label,
.task-state {
  position: absolute;
  z-index: 3;
  right: 4px;
  left: 4px;
  max-width: none;
  overflow: hidden;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: -0.05em;
  line-height: 1.4;
  text-align: left;
  text-overflow: clip;
  white-space: nowrap;
}

.task-label {
  top: 3px;
}

.task-state {
  bottom: 3px;
  font-size: 10px;
  letter-spacing: -0.025em;
}

.task-cell.is-locked .task-label {
  top: 50%;
  color: var(--muted-deep);
  text-align: center;
  transform: translateY(-50%);
}

.task-cell.is-pending .task-label {
  color: var(--ink);
}

.task-cell.is-pending .task-state {
  color: var(--muted);
}

.work-token {
  position: relative;
  z-index: 2;
  top: auto;
  left: auto;
  display: grid;
  width: clamp(15px, 4.8vw, 22px);
  height: clamp(15px, 4.8vw, 22px);
  place-items: center;
  border-radius: 50%;
  transform: none;
}

/* Token scale — real dynamic range across the 2→64 work span. The floor
   (xs) is pinned at 25px so the inscribed number keeps its 11px effective
   font floor (see DONUT_NUMBER_FONT in ui/work-token.mjs — font sizes are
   viewBox-relative, so numbers grow with the ring and every class stays
   at or above 11px). The ceiling (xxl, 42px) still clears the tightest
   cell: 52×82px at 375, with the task label and state rows intact. */
.work-token--xs {
  width: 25px;
  height: 25px;
}

.work-token--sm {
  width: 26px;
  height: 26px;
}

.work-token--md {
  width: 29px;
  height: 29px;
}

.work-token--lg {
  width: 33px;
  height: 33px;
}

.work-token--xl {
  width: 37px;
  height: 37px;
}

.work-token--xxl {
  width: 42px;
  height: 42px;
}

.work-token--question {
  font: 700 11px/1 var(--mono);
}

.going-rate-line {
  position: absolute;
  z-index: 10;
  right: 0;
  left: 0;
  height: 0;
  border-top: 1px dashed rgb(206 255 0 / 58%);
  pointer-events: none;
}

.going-rate-line::before {
  display: none;
}

.going-rate-line [data-going-rate-rule] {
  position: absolute;
  right: 3px;
  top: 0;
  display: inline-flex;
  min-height: 18px;
  align-items: center;
  padding: 0 4px;
  background: var(--board);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  transform: translateY(-50%);
  white-space: nowrap;
}

/* B7 — the tag is centered on the rule, which is fine for the four interior
   rungs and wrong at both ends. On rate 40 the rule sits on the first row's
   lower edge and the centered tag straddles it, covering the top row's state
   line in the last column; on rate 1 the rule sits on the grid's bottom edge
   and half the tag hangs out of the plot, into the IQ-axis strip where the
   markers sit. Both ends tuck the tag inside the plot instead. CSS only — the
   optional one-cell left shift would have to reach into renderBoard, and this
   stays out of the render path. */
.going-rate-line.rate-row-0 [data-going-rate-rule] {
  transform: translateY(0);
}

.going-rate-line.rate-row-5 [data-going-rate-rule] {
  /* Measured: a flat -100% still leaves the tag one pixel past the grid's
     bottom edge, because the rule itself occupies a pixel row. */
  transform: translateY(calc(-100% - 1px));
}

.iq-axis {
  position: relative;
  display: grid;
  width: 100%;
  height: 44px;
  min-height: 44px;
  margin: 0;
  grid-template-columns: var(--plot-rail) minmax(0, 1fr);
  grid-template-rows: 26px 18px;
}

.iq-axis__label {
  position: static;
  display: flex;
  width: auto;
  grid-column: 1;
  grid-row: 2;
  align-items: center;
  justify-content: flex-end;
  padding-right: 5px;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
}

.iq-track {
  position: relative;
  width: auto;
  height: 44px;
  min-width: 0;
  grid-column: 2;
  grid-row: 1 / 3;
  border-top: 1px solid var(--soft-line);
}

.iq-marker {
  --iq-nudge: 0px;

  position: absolute;
  z-index: 2;
  top: -2px;
  left: var(--iq-position, 0%);
  display: inline-flex;
  line-height: 0;
  transform: translateX(calc(-50% + var(--iq-nudge)));
}

.iq-marker--player {
  --iq-nudge: 0px;

  z-index: 3;
  color: var(--volt);
}

.iq-marker--rivalA {
  --iq-nudge: 0px;
  color: var(--kiln);
}

.iq-marker--rivalB {
  --iq-nudge: 0px;
  color: var(--para);
}

.iq-ticks {
  position: absolute;
  top: 26px;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
}

.iq-ticks span {
  position: absolute;
  bottom: 1px;
  left: var(--iq-position, 0%);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.2;
  text-align: center;
  transform: translateX(-50%);
  white-space: nowrap;
}

.iq-ticks span:first-child {
  transform: none;
}

.intro-lab-marker,
.intro-frontier {
  left: var(--iq-position, 0%);
}

/* The clear-beat explainer channel is retired with the caption ticker —
   nothing may render as an in-flow box that reflows the plot. */

/* Three compact labs */

.fleet-section {
  display: block;
  width: 100%;
  height: 110px;
  min-height: 110px;
  flex: 0 0 110px;
  margin: 0;
  padding: 5px 6px 6px;
  border-top: 1px solid var(--line);
}

.fleet-grid {
  display: grid;
  width: 100%;
  height: 99px;
  min-height: 0;
  gap: 4px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr);
}

.fleet-card {
  display: grid;
  width: 100%;
  height: 99px;
  min-width: 0;
  min-height: 0;
  padding: 6px 5px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--raised);
  color: var(--ink);
  cursor: pointer;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 38px minmax(0, 1fr);
  text-align: left;
}

.fleet-card.is-player {
  padding-left: 4px;
  border-color: var(--line);
  border-left: 3px solid var(--volt);
}

.lab-card__identity {
  display: grid;
  min-width: 0;
  grid-template-columns: 20px minmax(0, 1fr);
  grid-template-rows: 1fr;
  gap: 4px;
}

.fleet-marker {
  display: inline-flex;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  grid-column: 1;
  grid-row: 1;
  line-height: 0;
}

.fleet-marker svg {
  width: 20px;
  height: 20px;
}

.lab-card__name {
  display: flex;
  min-width: 0;
  align-self: start;
  flex-direction: column;
  grid-column: 2;
  grid-row: 1;
  line-height: 1.15;
}

.lab-card__name strong {
  overflow: visible;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: -0.02em;
  line-height: 1.15;
  white-space: normal;
}

.lab-card__name small {
  display: none;
}

.you-mark {
  margin-left: 2px;
  color: var(--volt);
  font-family: var(--mono);
  font-size: 8px;
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
}

.lab-card__metrics {
  display: grid;
  min-width: 0;
  min-height: 0;
  align-items: start;
  gap: 2px;
  grid-column: 1;
  grid-row: 2;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.65fr) minmax(0, 0.85fr);
  font-variant-numeric: tabular-nums;
}

.lab-gold,
.lab-iq,
.lab-fleet {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  flex-direction: column;
  gap: 3px;
  color: var(--muted);
  font-family: var(--mono);
  font-style: normal;
  line-height: 1.15;
}

.lab-gold small,
.lab-iq small,
.lab-fleet small {
  color: var(--muted);
  font-size: 7px;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

.lab-gold b,
.lab-iq b,
.lab-fleet b {
  color: var(--ink);
  font-size: clamp(10px, 3.3vw, 14px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  white-space: nowrap;
}

.lab-gold i {
  max-width: 100%;
  overflow: visible;
  padding: 0;
  border: 0;
  color: var(--muted);
  font-size: 7px;
  font-style: normal;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lab-gold i.is-player-delta {
  color: var(--volt);
}

/* Direct action bars */

.viewport-action-bar {
  --action-bar-height: 60px;
  position: relative;
  z-index: 26;
  width: 100%;
  /* game.css caps .opening-actions at 900px and centers it; this shell
     kills the auto margins, which left the CTA 900px wide and pinned left
     with dead space to its right on desktop. Full-bleed like every other
     bar in this layer. */
  max-width: none;
  height: calc(var(--action-bar-height) + var(--action-safe-bottom));
  min-height: calc(var(--action-bar-height) + var(--action-safe-bottom));
  margin: 0;
  padding: 0 0 var(--action-safe-bottom);
  border-top: 1px solid var(--line);
  background: var(--field);
}

.opening-actions .button-primary,
.decision-actions .button-primary {
  width: 100%;
  height: 60px;
  min-height: 60px;
  padding: 0 14px;
  border: 0;
  border-radius: 0;
  background: var(--volt);
  box-shadow: none;
  color: var(--field);
  font-size: 12px;
  font-weight: 800;
}

.opening-actions .button-primary:disabled,
.decision-actions .button-primary:disabled {
  background: var(--muted-deep);
  color: var(--field);
}

.report-board-bar {
  display: flex;
  height: 60px;
  min-height: 60px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  padding: 8px 10px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

.report-board-bar .button-primary {
  min-height: 42px;
  border-radius: 0;
  background: var(--volt);
  box-shadow: none;
  color: var(--field);
}

.report-screen:has(.route-overlay:not([hidden])) .report-board-bar {
  visibility: hidden;
}

/* The decision sheet scrolls independently; Commit remains in the bar. */

.flow-overlay,
.decision-dock {
  position: absolute;
  z-index: 30;
  top: auto;
  right: 0;
  bottom: calc(60px + var(--action-safe-bottom));
  left: 0;
  display: flex;
  width: 100%;
  max-height: min(370px, calc(100% - 88px));
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 12px 12px max(12px, env(safe-area-inset-bottom));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  border: 1px solid var(--line);
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  border-radius: 0;
  background: rgb(6 10 15 / 98%);
  box-shadow: none;
}

.flow-overlay__head h1 {
  margin: 0;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.1;
}

.year-heading-token {
  white-space: nowrap;
}

.year-heading-number {
  display: inline-block;
  margin-inline-start: 0.25em;
}

.decision-dock fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.decision-dock legend {
  margin-bottom: 6px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  line-height: 1.2;
}

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

.segment-option label {
  display: flex;
  min-width: 0;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 5px 3px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--raised);
  color: var(--muted);
  cursor: pointer;
  text-align: center;
}

.segment-option label strong {
  color: var(--ink);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.15;
}

.segment-option label small {
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 8px;
  line-height: 1.2;
}

.segment-option input:checked + label {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--field);
}

.segment-option input:checked + label strong,
.segment-option input:checked + label small {
  color: var(--field);
}

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

.decision-preview span,
.decision-preview .preview-reserve {
  display: flex;
  min-width: 0;
  min-height: 58px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 5px 3px;
  border: 1px solid var(--soft-line);
  border-radius: 0;
}

.decision-preview small {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 8px;
  line-height: 1.2;
}

.decision-preview b {
  color: var(--ink);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.2;
}

.preview-reserve em {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 7px;
  font-style: normal;
  line-height: 1.15;
  text-align: center;
}

.decision-preview .preview-reserve {
  gap: 3px;
}

/* Reveal controls share the same 60px viewport band. */

.reveal-footer {
  display: grid;
  height: calc(60px + var(--action-safe-bottom));
  min-height: calc(60px + var(--action-safe-bottom));
  gap: 2px 6px;
  margin: 0;
  padding: 4px 6px var(--action-safe-bottom);
  border-top: 1px solid var(--line);
  grid-template-columns: minmax(0, 1fr) 214px;
  grid-template-rows: 2px 23px 23px;
}

.reveal-progress {
  width: 100%;
  height: 2px;
  grid-column: 1 / -1;
  grid-row: 1;
}

/* The caption-ticker marquee that lived in the footer's 23px second row is
   retired. The row itself stays LAYOUT-RESERVED (see .reveal-footer
   grid-template-rows): the absolute requirement is unchanged — board plot +
   x-axis pixel coordinates never change across beats. */

.reveal-copy p {
  color: var(--muted);
  text-align: left;
}

.market-pressure-strip {
  display: grid;
  height: 23px;
  min-width: 0;
  align-items: center;
  gap: 2px 6px;
  grid-column: 1;
  grid-row: 3;
  grid-template-columns: 34px minmax(0, 1fr) 34px minmax(0, 1fr);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 8px;
  line-height: 1;
}

/* B3 — the clearing result is shown again as a fifth column. This REVERSES a
   Wave-1 decision (the display: none was deliberate), so it rides the
   editorial batch as a revealed-string decision; it revives no dead copy —
   every string here already shipped, in the DOM, unseen. The color and size
   are declared explicitly because ink-hud's shadowed rule sets
   `color: var(--volt); font-size: 5.5px` and would otherwise win: a volt
   result would spend the accent on a footer label. The row keeps its 23px
   height, so the board plot above it cannot move. */
.market-pressure-strip > strong {
  display: none;
}

/* Below 360px the strip is ~190px wide, and a result column costs ~67 of
   them: the two bars fall to about 21px each, which is the silent collapse
   this item is most at risk of causing. The bars are the DATA, so they win
   and the result stays hidden there — the shipped behavior at that width.
   From 360px up both fit with the bars still clearing 40px. */
@media (min-width: 360px) {
  .market-pressure-strip {
    grid-template-columns: 34px minmax(0, 1fr) 34px minmax(0, 1fr) auto;
  }

  .market-pressure-strip > strong {
    display: block;
    color: var(--ink);
    font-size: 9px;
    font-weight: 700;
    /* The strip sets line-height: 1; at 9px that box is shorter than the
       glyph box, and the occlusion audit reads the inner span as escaping
       its own parent. 1.4 contains it and still fits the 23px row. */
    line-height: 1.4;
    white-space: nowrap;
  }
}

/* The truncated form is the DEFAULT, not an overflow fallback: it is what a
   narrow viewport shows, and the full balance-to-rate form is the widening. */
.market-pressure-strip > strong [data-pressure-full] {
  display: none;
}

.market-pressure-strip > strong [data-pressure-compact] {
  display: inline;
}

@media (min-width: 480px) {
  .market-pressure-strip > strong [data-pressure-full] {
    display: inline;
  }

  .market-pressure-strip > strong [data-pressure-compact] {
    display: none;
  }
}

.pressure-bar {
  display: block;
  width: 100%;
  height: 6px;
}

.reveal-controls {
  display: grid;
  min-width: 0;
  align-items: stretch;
  gap: 3px;
  padding: 0 4px var(--action-safe-bottom) 0;
  grid-column: 2;
  grid-row: 2 / 4;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.reveal-controls .button {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  padding: 3px;
  border-radius: 0;
  font-size: 8px;
}

.reveal-controls:has([data-report-cta]:not([hidden])) > :not([data-report-cta]) {
  display: none;
}

.reveal-controls [data-report-cta]:not([hidden]) {
  display: grid;
  min-height: 46px;
  grid-column: 1 / -1;
  background: var(--volt);
  box-shadow: none;
  color: var(--field);
}

/* Responsive dialogs and inspector */

.route-overlay,
.ink-overlay {
  position: absolute;
  inset: 0;
}

#app:has(> .scoreloop-overlay) > .ink-stage {
  visibility: hidden;
}

.route-overlay {
  z-index: 32;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: rgb(6 10 15 / 88%);
}

.route-overlay__card {
  display: flex;
  width: min(100%, 540px);
  max-height: 100%;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  overflow-x: hidden;
  overflow-y: hidden;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--raised);
  box-shadow: none;
}

.verdict-overlay .route-overlay__card {
  display: grid;
  min-height: 0;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
}

.verdict-head,
.verdict-summary,
.verdict-body {
  display: grid;
  gap: 8px;
}

.verdict-summary {
  min-width: 0;
}

.verdict-head > p {
  margin: 0;
  color: var(--muted);
  font-family: var(--mono);
  font-size: var(--game-content-min);
  letter-spacing: 0.08em;
}

.verdict-body {
  min-height: 0;
  gap: 6px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.verdict-summary .receipt-grid > span,
.verdict-summary .receipt-grid > strong {
  min-height: 26px;
  padding: 5px 4px;
}

.verdict-body .industry-revenue-checkpoint,
.verdict-pivot .verdict-line {
  margin: 0;
}

.verdict-pivot {
  display: grid;
  min-width: 0;
  gap: 6px;
}

.verdict-pivot .button {
  min-height: 44px;
}

@media (max-height: 700px) {
  .verdict-pivot .verdict-line {
    display: none;
  }
}

.verdict-scroll-cue {
  display: none;
}

@media (max-height: 700px), (min-width: 1152px) {
  .verdict-scroll-cue {
    display: flex;
    min-height: 24px;
    align-items: center;
    border-bottom: 1px solid var(--soft-line);
    color: var(--volt);
    font-family: var(--mono);
    font-size: var(--game-content-min);
    font-weight: 800;
    letter-spacing: 0.08em;
  }
}

.receipt-head > span,
.route-overlay__card > p:first-child,
.route-overlay__card h2,
.causal-notes,
.standings > div,
.receipt-grid > span,
.receipt-grid > strong {
  font-size: 10px;
  line-height: 1.25;
}

.receipt-head h1,
.verdict-overlay h1 {
  max-width: 100%;
  font-size: clamp(18px, 5.4vw, 22px);
  line-height: 1.05;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.receipt-grid > span,
.receipt-grid > strong {
  min-height: 28px;
  padding: 7px 4px;
}

.ink-overlay {
  z-index: 45;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  background: rgb(6 10 15 / 78%);
}

.ink-overlay.market-intro {
  align-items: stretch;
  justify-content: flex-start;
  padding: 34px 18px max(20px, env(safe-area-inset-bottom));
  overflow-x: hidden;
  overflow-y: auto;
  background: #060a0f;
  overscroll-behavior: contain;
}

.market-intro .intro-caption {
  width: 100%;
  padding: 6px 8px;
  background: #060a0f;
}

.ink-popover {
  display: flex;
  width: min(100%, 560px);
  max-height: calc(100% - 16px);
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--raised);
  box-shadow: none;
}

.dialog-head {
  display: flex;
  min-height: 30px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.dialog-head h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: uppercase;
}

.dialog-head button {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 4px;
}

.dialog-body {
  min-width: 0;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10px;
}

.task-inspector {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 6px;
}

.task-inspector__headline {
  display: -webkit-box;
  min-height: 16px;
  margin: 0;
  overflow: hidden;
  color: var(--muted);
  font-family: var(--mono);
  font-size: var(--game-content-min);
  letter-spacing: 0.025em;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.task-inspector__figure {
  display: block;
  width: min(100%, 330px);
  height: auto;
  align-self: center;
  overflow: hidden;
}

.task-inspector__figure--tall,
.task-inspector__figure--pending {
  aspect-ratio: 165 / 56;
}

.task-inspector__figure--strip {
  aspect-ratio: 165 / 13;
}

.task-market__ceiling-frame,
.task-market__pending-frame,
.task-market__share-frame {
  fill: transparent;
  stroke: var(--line);
  stroke-width: 1;
}

.task-market__segment--player {
  fill: var(--volt);
}

.task-market__segment--rivalA {
  fill: var(--kiln);
}

.task-market__segment--rivalB {
  fill: var(--para);
}

.task-market__hatch-line {
  stroke: var(--muted);
  stroke-width: 1;
}

.task-market__rate {
  stroke: var(--muted);
  stroke-width: 1;
  stroke-dasharray: 4 3;
}

.task-market__premium-bracket {
  fill: none;
  stroke: var(--muted);
  stroke-width: 1;
}

.task-inspector__extent {
  display: flex;
  width: min(100%, 330px);
  align-items: center;
  align-self: center;
  justify-content: space-between;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 9px;
  line-height: 1;
}

.task-inspector__shares {
  display: grid;
  margin: 0;
  padding: 0;
  gap: 4px;
  list-style: none;
}

.task-share {
  display: grid;
  min-height: 18px;
  align-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.2;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  gap: 6px;
}

.task-share__swatch {
  width: 10px;
  height: 10px;
  border: 1px solid var(--line);
}

.task-share--player .task-share__swatch {
  border-color: var(--volt);
  background: var(--volt);
}

.task-share--rivalA .task-share__swatch {
  border-color: var(--kiln);
  background: var(--kiln);
}

.task-share--rivalB .task-share__swatch {
  border-color: var(--para);
  background: var(--para);
}

.task-share--unserved .task-share__swatch {
  background: repeating-linear-gradient(
    135deg,
    transparent 0 3px,
    var(--muted) 3px 4px
  );
}

.task-share__name,
.task-share__values {
  min-width: 0;
  white-space: nowrap;
}

.task-share--player .task-share__name {
  color: var(--volt);
}

.task-share--unserved .task-share__values {
  color: var(--loss);
}

.task-inspector__rates {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
  margin: 0;
  padding: 7px 0;
  border-top: 1px solid var(--soft-line);
  border-bottom: 1px solid var(--soft-line);
  color: var(--muted);
  font-family: var(--mono);
  font-size: var(--game-content-min);
  line-height: 1.2;
  white-space: nowrap;
}

.task-inspector__rates strong {
  color: var(--ink);
}

.task-inspector__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
}

.task-inspector__remainder {
  margin: 0;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.35;
}

.task-inspector__footer .button {
  min-height: 34px;
  flex: none;
  border-radius: 0;
}

/* Dossiers use a flat single-card surface on touch layouts. */

.dossier-overlay {
  position: absolute;
  z-index: 40;
  inset: 0;
  display: grid;
  min-height: 0;
  overflow: hidden;
  grid-template-rows:
    58px minmax(0, 1fr) calc(56px + var(--action-safe-bottom));
  background: #0b1016;
  color: var(--ink);
}

.dossier-header {
  min-height: 58px;
  padding: 8px 12px;
}

.dossier-header__title strong {
  overflow: visible;
  font-size: 15px;
  line-height: 1.3;
  text-overflow: clip;
}

.dossier-header__title small {
  font-size: 11px;
  line-height: 1.2;
}

.dossier-coverflow {
  position: relative;
  display: block;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  perspective: none;
}

.dossier-panel,
.dossier-panel.is-near-left,
.dossier-panel.is-near-right,
.dossier-panel.is-outer-left,
.dossier-panel.is-outer-right {
  position: relative;
  inset: auto;
  display: none;
  width: 100%;
  height: 100%;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  transform: none;
}

.dossier-panel.is-active,
.dossier-panel.is-center {
  position: relative;
  inset: auto;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.dossier-panel__surface {
  width: 100%;
  height: 100%;
  padding: 12px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.dossier-arrow {
  display: none;
}

.dossier-equations b {
  overflow: visible;
  text-overflow: clip;
}

.dossier-tabs {
  min-height: calc(56px + var(--action-safe-bottom));
  padding: 6px 8px var(--action-safe-bottom);
}

.dossier-tab {
  min-height: 44px;
  border-radius: 0;
  font-size: 11px;
}

.dossier-tab.is-active {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--field);
}

/* Title */

.title-screen .ink-screen {
  display: block;
}

.title-main {
  display: flex;
  width: 100%;
  max-width: 760px;
  height: 100%;
  min-height: 0;
  gap: 0;
  margin: 0 auto;
  padding: clamp(20px, 6vh, 54px) clamp(16px, 5vw, 44px);
}

.title-composition {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
}

.title-main h1 {
  margin: 18px 0 0;
  font-size: clamp(52px, 18vw, 92px);
  line-height: 0.9;
}

.title-thesis {
  max-width: 440px;
  margin: 18px 0 0;
  font-size: clamp(12px, 3vw, 17px);
  line-height: 1.25;
}

.title-setup {
  max-width: 440px;
  margin: 16px 0 0;
}

.title-setup .dock-kicker {
  margin: 0 0 6px;
}

.title-setup p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: clamp(11px, 2.6vw, 14px);
  line-height: 1.3;
}

.title-setup p:first-of-type {
  margin-top: 0;
}

.title-actions {
  width: 100%;
  flex: 0 0 auto;
}

.title-actions .button-primary {
  width: 100%;
  height: 60px;
  min-height: 60px;
  border: 0;
  border-radius: 0;
  background: var(--volt);
  box-shadow: none;
  color: var(--field);
  font-size: 12px;
}

@media (max-height: 640px) {
  .title-main {
    padding-block: 14px;
  }

  .title-main h1 {
    font-size: clamp(48px, 16vw, 68px);
  }

  .title-thesis {
    margin-top: 10px;
  }

  .title-setup {
    margin-top: 10px;
  }

  .title-setup p {
    margin-top: 4px;
  }

  .flow-overlay,
  .decision-dock {
    max-height: calc(100% - 88px);
  }
}

@media (min-width: 680px) {
  .market-board {
    padding-right: 12px;
    padding-left: 12px;
  }

  .task-label,
  .task-state {
    font-size: 11px;
  }

  .price-rail > span:not(.price-axis-title),
  .iq-ticks span,
  .board-legend {
    font-size: 12px;
  }

  .price-axis-title,
  .iq-axis__label {
    font-size: 13px;
  }

  .board-legend__label,
  .price-rail .price-axis-title,
  .iq-axis .iq-axis__label {
    font-size: 14px;
  }

  .fleet-section {
    padding-inline: 12px;
  }

  .fleet-grid {
    gap: 8px;
  }

  .fleet-card {
    padding-inline: 10px;
  }

  .lab-card__name strong {
    font-size: 12px;
  }

  .flow-overlay,
  .decision-dock {
    right: 12px;
    left: auto;
    width: min(540px, calc(100% - 24px));
    border-right: 1px solid var(--line);
    border-left: 1px solid var(--line);
  }
}

@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .board-section {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    touch-action: pan-y;
  }

  .market-board {
    min-height: 335px;
    flex: 0 0 335px;
  }

  .board-plot {
    height: 265px;
    min-height: 265px;
  }

  .price-rail {
    padding-top: 1px;
  }

  .market-grid {
    grid-template-rows: repeat(6, 44px);
  }

  .market-row,
  .board-cell {
    min-height: 44px;
  }
}

.takeover-stack {
  display: contents;
}

.peek-strip {
  --action-bar-height: 44px;
  z-index: 35;
  display: none;
  height: calc(var(--action-bar-height) + var(--action-safe-bottom));
  min-height: calc(var(--action-bar-height) + var(--action-safe-bottom));
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 5px 12px;
  border-top: 1px solid var(--line);
  background: var(--raised);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
}

.peek-strip .peek-return {
  min-height: 44px;
  flex: none;
}

.decision-screen.is-peeking .ink-screen {
  grid-template-rows: 28px minmax(0, 1fr) calc(44px + var(--action-safe-bottom));
}

.decision-screen.is-peeking .takeover-stack {
  display: none;
}

.decision-screen.is-peeking .peek-strip {
  display: flex;
}

@media (max-width: 1151px) {
  .flow-overlay__head {
    display: flex;
    min-height: 44px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  .flow-overlay__head h1 {
    grid-column: auto;
  }

  .takeover-peek {
    min-height: 44px;
    flex: none;
    padding: 0 10px;
    font-family: var(--mono);
    font-size: 11px;
  }
}

@media (min-width: 1152px) {
  .play-workspace #app {
    max-width: var(--content-max);
  }

  .segment-option input:checked + label,
  .dossier-tab.is-active {
    border-color: var(--ink);
    background: var(--ink);
    box-shadow: none;
    color: var(--field);
  }

  .segment-option input:checked + label strong,
  .segment-option input:checked + label small {
    color: var(--field);
  }

  .segment-option input:checked:focus-visible + label,
  .dossier-tab.is-active:focus-visible {
    outline-color: var(--ink);
  }

  .dossier-panel__kicker {
    color: var(--muted);
  }

  .dossier-headline strong {
    color: var(--ink);
  }

  .reveal-progress i {
    background: transparent;
    border: 2px solid var(--volt);
  }

  .drawer-handle {
    position: absolute;
    z-index: 25;
    top: 28px;
    right: 0;

    /* Clear the 110px fleet section as well as the 60px action bar — at
       60px the handle overlapped the third fleet card and clipped its
       FLEET column. The handle spans only the board region now. */
    bottom: 170px;
    display: grid;
    width: 28px;
    min-width: 28px;
    place-items: center;
    padding: 0;
    border: 0;
    border-left: 1px solid var(--line);
    border-radius: 0;
    background: var(--raised);
    color: var(--muted);
    cursor: pointer;
    font-family: var(--mono);
    font-size: 10px;
  }

  .drawer-handle span {
    letter-spacing: 0.08em;
    writing-mode: vertical-rl;
  }

  .drawer-handle:hover,
  .drawer-handle:focus-visible {
    color: var(--ink);
    outline-color: var(--ink);
  }

  .decision-screen:not(.is-peeking) .drawer-handle,
  .report-screen:not(.is-peeking) .drawer-handle {
    display: none;
  }

  .decision-screen.is-peeking .drawer-handle,
  .report-screen.is-peeking .drawer-handle {
    /* 44px peek strip + the 110px fleet section it sits under. */
    bottom: 154px;
  }

  .dossier-overlay.is-drawer {
    position: fixed;
    z-index: 45;
    inset: var(--shell-h) 0 0;
    display: block;
    overflow: hidden;
    background: rgb(0 0 0 / 55%);
    touch-action: auto;
  }

  .dossier-drawer {
    position: absolute;
    top: 0;
    right: 0;
    display: grid;
    width: min(520px, calc(100vw - 24px));
    height: 100%;
    min-height: 0;
    overflow: hidden;
    border-left: 1px solid var(--line);
    background: var(--board);
    color: var(--ink);
    font-size: 11px;
    grid-template-rows: 66px minmax(0, 1fr) 58px;
  }

  .dossier-drawer .dossier-header {
    min-height: 66px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--line);
    background: var(--board);
  }

  .dossier-drawer .dossier-header__title strong {
    overflow: visible;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.2;
    text-overflow: clip;
  }

  .dossier-drawer .dossier-header__title small {
    font-size: 11px;
    line-height: 1.2;
  }

  .dossier-drawer .dossier-close {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    font-size: 18px;
  }

  .dossier-drawer .dossier-coverflow {
    min-height: 0;
    padding: 0;
  }

  .dossier-drawer .dossier-panel__surface {
    gap: 12px;
    padding: 24px;
    background: var(--board);
    font-size: 11px;
  }

  .dossier-drawer .dossier-panel__kicker {
    font-size: 11px;
  }

  .dossier-drawer .dossier-panel h3 {
    margin: 0;
    font-size: 18px;
  }

  .dossier-drawer .dossier-headline {
    min-height: 32px;
    margin: 0;
  }

  .dossier-drawer .dossier-headline strong {
    color: var(--ink);
    font-size: 32px;
  }

  .dossier-drawer .dossier-headline span {
    font-size: 11px;
  }

  .dossier-drawer .dossier-equations {
    margin: 0;
    gap: 5px;
    font-size: 11px;
  }

  .dossier-drawer .dossier-equations li {
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 7px;
  }

  .dossier-drawer .dossier-equations small,
  .dossier-drawer .dossier-footnote,
  .dossier-drawer .dossier-empty {
    margin: 0;
    font-size: 11px;
  }

  .dossier-drawer svg.dossier-chart,
  .dossier-drawer svg.dossier-chart--money {
    width: 100%;
    height: auto;
    max-width: none;
    max-height: none;
    flex: 0 0 auto;
  }

  .dossier-drawer svg.dossier-chart:not(.dossier-chart--money) {
    max-height: 240px;
  }

  .dossier-drawer svg.dossier-chart--economics {
    max-height: none;
  }

  .dossier-drawer .dossier-chart-legend {
    min-height: 18px;
    margin: 0;
    gap: 5px 12px;
    font-size: 11px;
  }

  .dossier-drawer .dossier-chart-key {
    width: 10px;
    height: 10px;
  }

  .dossier-drawer .dossier-table {
    font-size: 12px;
    line-height: 1.25;
  }

  .dossier-drawer .dossier-table th,
  .dossier-drawer .dossier-table td {
    height: 30px;
    padding: 6px 3px;
    font-size: 12px;
  }

  .dossier-drawer .dossier-summary dt {
    font-size: 11px;
  }

  .dossier-drawer .dossier-summary dd {
    font-size: 12px;
  }

  .dossier-drawer .dossier-tabs {
    min-height: 58px;
    padding: 7px 10px;
    border-top: 1px solid var(--line);
    background: var(--board);
  }

  .dossier-drawer .dossier-tab {
    min-height: 44px;
    font-size: 11px;
  }

  .decision-screen .ink-screen {
    background: #000;
  }

  .report-screen .ink-screen,
  .verdict-screen .ink-screen {
    background: #000;
  }

  .decision-screen:not(.is-peeking) .year-strip,
  .decision-screen:not(.is-peeking) .screen-content {
    display: none;
  }

  .report-screen:not(.is-peeking) .year-strip,
  .report-screen:not(.is-peeking) .screen-content,
  .verdict-screen .year-strip,
  .verdict-screen .screen-content {
    display: none;
  }

  .takeover-stack {
    position: absolute;
    z-index: 32;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 24px 48px;
    background: #000;
  }

  .takeover-stack .decision-dock {
    position: relative;
    inset: auto;
    width: min(560px, calc(100vw - 96px));
    max-height: calc(100dvh - var(--shell-h) - 108px);
    gap: 8px;
    padding: 12px 28px;
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid var(--line);
    background: var(--board);
    box-shadow: none;
    animation: decision-card-in var(--dur) var(--ease) both;
  }

  .takeover-stack .flow-overlay__head {
    display: flex;
    min-height: 34px;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
  }

  .takeover-stack .flow-overlay__head h1 {
    font-size: 18px;
    font-weight: 800;
  }

  .takeover-peek,
  .peek-return {
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--muted);
    font-family: var(--mono);
    font-size: 11px;
  }

  .takeover-peek {
    flex: none;
  }

  .takeover-peek:hover,
  .takeover-peek:focus-visible,
  .peek-return:hover,
  .peek-return:focus-visible {
    border-color: var(--ink);
    color: var(--ink);
    outline-color: var(--ink);
  }

  .takeover-stack .decision-dock legend {
    font-size: 11px;
  }

  .takeover-stack .segment-option label {
    min-height: 56px;
  }

  .takeover-stack .segment-option label strong {
    font-size: 16px;
  }

  .takeover-stack .segment-option label small {
    font-size: 10px;
  }

  .takeover-stack .decision-preview small,
  .takeover-stack .preview-reserve em {
    font-size: 10px;
  }

  .takeover-stack .decision-preview span,
  .takeover-stack .decision-preview .preview-reserve {
    gap: 5px;
  }

  .takeover-stack .decision-preview b {
    font-size: 16px;
  }

  .takeover-stack .decision-actions {
    position: relative;
    width: min(560px, calc(100vw - 96px));
    flex: 0 0 60px;
    border: 1px solid var(--line);
    border-top: 0;
    background: var(--field);
  }

  .report-screen .route-overlay,
  .verdict-screen .route-overlay {
    padding: 24px 48px;
    background: #000;
  }

  .report-screen .route-overlay__card,
  .verdict-screen .route-overlay__card {
    width: min(600px, calc(100vw - 96px));
    max-height: calc(100dvh - var(--shell-h) - 48px);
    gap: 10px;
    padding: 28px;
    border: 1px solid var(--line);
    background: var(--board);
    box-shadow: none;
  }

  .report-screen .receipt-head h1 {
    font-size: 20px;
    font-weight: 800;
  }

  .report-screen .receipt-grid > span,
  .report-screen .receipt-grid > strong {
    min-height: 30px;
    padding: 7px 4px;
    font-size: 13px;
  }

  .report-screen .receipt-grid > strong.is-total {
    font-size: 15px;
  }

  .report-screen .standings > div {
    min-height: 28px;
    font-size: 12px;
  }

  .report-screen .causal-notes {
    font-size: 12px;
    line-height: 1.5;
  }

  .report-screen .report-actions,
  .verdict-screen .verdict-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .report-screen .report-actions .button,
  .verdict-screen .verdict-actions .button {
    min-height: 44px;
    border-radius: 0;
  }

  .report-screen .report-actions .button-primary,
  .verdict-screen .verdict-actions .button-primary {
    width: 100%;
    height: 60px;
    min-height: 60px;
    border: 0;
    background: var(--volt);
    box-shadow: none;
    color: var(--field);
    font-size: 12px;
    grid-column: 1 / -1;
  }

  .verdict-screen .verdict-overlay h1 {
    font-size: clamp(18px, 5.4vw, 22px);
  }

  .decision-screen.is-peeking .ink-screen,
  .report-screen.is-peeking .ink-screen {
    grid-template-rows: 28px minmax(0, 1fr) calc(44px + var(--action-safe-bottom));
    background: var(--board);
  }

  .decision-screen.is-peeking .takeover-stack,
  .report-screen.is-peeking .route-overlay {
    display: none;
  }

  .decision-screen.is-peeking .year-strip,
  .report-screen.is-peeking .year-strip {
    display: flex;
  }

  .decision-screen.is-peeking .screen-content,
  .report-screen.is-peeking .screen-content {
    display: grid;
  }

  .peek-strip {
    z-index: 35;
    display: none;
    height: calc(44px + var(--action-safe-bottom));
    min-height: calc(44px + var(--action-safe-bottom));
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 5px 12px;
    border-top: 1px solid var(--line);
    background: var(--raised);
    color: var(--muted);
    font-family: var(--mono);
    font-size: 11px;
  }

  .decision-screen.is-peeking .peek-strip,
  .report-screen.is-peeking .peek-strip {
    display: flex;
  }

  .peek-strip .peek-return {
    min-height: 44px;
    flex: none;
  }

  @keyframes decision-card-in {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .ink-stage *,
  .ink-stage *::before,
  .ink-stage *::after {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}

@media (forced-colors: active) {
  .ink-stage,
  .ink-screen,
  .fleet-card,
  .route-overlay__card,
  .ink-popover,
  .decision-dock,
  .dossier-panel__surface {
    border-color: CanvasText;
    background: Canvas;
    color: CanvasText;
    forced-color-adjust: auto;
  }

  .going-rate-line,
  .work-token,
  .task-inspector__figure,
  .iq-marker {
    forced-color-adjust: none;
  }

  .opening-actions .button-primary,
  .decision-actions .button-primary,
  .title-actions .button-primary {
    border: 1px solid CanvasText;
  }
}

/* Release typography and overlay hierarchy. */
.ink-replay,
.ink-stage .button,
.dossier-close,
.dossier-arrow,
.dialog-head button,
.takeover-peek,
.peek-return,
.drawer-handle {
  min-width: 44px;
  min-height: 44px;
}

.ink-stage .button,
.ink-replay {
  font-size: var(--game-action-size);
}

.dossier-close,
.dossier-arrow,
.dialog-head button {
  width: 44px;
  height: 44px;
  border-radius: 4px;
}

.task-label,
.task-state,
.ink-year,
.board-legend,
.price-rail > span:not(.price-axis-title),
.price-axis-title,
.iq-axis__label,
.iq-ticks span,
.avg-price,
.avg-price b,
.avg-price__label,
.avg-price__value,
.lab-card__name strong,
.lab-card__name small,
.lab-gold small,
.lab-iq small,
.lab-fleet small,
.lab-gold i,
.lab-plan,
.flow-overlay__head > span,
.flow-overlay__head p,
.decision-dock legend,
.segment-option label strong,
.segment-option label small,
.decision-preview small,
.preview-reserve em,
.market-pressure-strip,
.market-pressure-strip > strong,
.report-board-bar,
.receipt-head > span,
.route-overlay__card > p:first-child,
.route-overlay__card h2,
.receipt-grid > span,
.receipt-grid > strong,
.receipt-grid > .receipt-note,
.standings > div,
.causal-notes,
.verdict-overlay .route-overlay__card > p,
.rank-history small,
.dialog-head h2,
.dialog-body,
.dialog-body h3,
.task-share__heading,
.task-share__glyph,
.task-share__value,
.task-share__work,
.task-share__gold,
.task-inspector__capture,
.task-inspector__capture strong,
.task-inspector__extent,
.task-inspector__remainder,
.market-intro__head > span,
.intro-axis > span,
.intro-axis > b,
.intro-axis small,
.intro-bars p,
.intro-price,
.title-live,
.title-kicker,
.mode-select legend,
.mode-card strong,
.mode-card small,
.title-actions p,
.you-mark {
  font-size: var(--game-content-min);
}

.dossier-chart text {
  font-size: 11px;
}

.dossier-chart .dossier-waterfall-label,
.dossier-chart .dossier-waterfall-value,
.dossier-chart .dossier-net-strip__year {
  font-size: 11px;
}

.dossier-empty {
  align-self: flex-start;
  display: grid;
  justify-items: start;
  gap: 8px;
  margin: 2px 0 0;
  letter-spacing: 0;
  text-align: left;
}

.dossier-empty p {
  margin: 0;
}

.task-cell.is-locked .task-label,
.scoreloop-columns,
.scoreloop-textarea::placeholder,
.scoreloop-disclosure {
  color: var(--muted);
}

.segment-option input:checked + label,
.dossier-tab.is-active {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--field);
  box-shadow: none;
}

.segment-option input:checked + label strong,
.segment-option input:checked + label small {
  color: var(--field);
}

.segment-option input:checked:focus-visible + label,
.dossier-tab.is-active:focus-visible {
  outline: 3px solid var(--volt);
  outline-offset: 3px;
  outline-color: var(--volt);
}

.opening-brief {
  max-height: calc(100% - 72px);
  gap: 8px;
  background: rgb(8 11 16 / 98%);
}

.opening-brief summary,
.score-help summary {
  display: flex;
  min-height: 44px;
  align-items: center;
  color: var(--ink);
  cursor: pointer;
  font-family: var(--mono);
  font-size: var(--game-action-size);
  font-weight: 800;
  line-height: 1.2;
}

details.opening-brief:not([open]) {
  max-height: 44px;
  padding-block: 0;
  overflow: hidden;
}

.score-help {
  border-top: 1px solid var(--soft-line);
  border-bottom: 1px solid var(--soft-line);
}

.score-help p {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: var(--game-content-min);
  line-height: 1.4;
}

.opening-brief h2,
.opening-brief p {
  margin: 0;
}

.opening-brief h2 {
  font-family: var(--editorial);
  font-size: 16px;
  line-height: 1.2;
}

.opening-brief p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.opening-brief .button {
  align-self: start;
}

.decision-dock {
  max-height: calc(100% - 72px);
}

.advisor-card {
  display: grid;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.advisor-card h2,
.advisor-card p {
  margin: 0;
}

.advisor-card h2 {
  color: var(--ink);
  font-family: var(--editorial);
  font-size: var(--game-content-min);
  line-height: 1.25;
}

.advisor-card p,
.advisor-basis summary {
  color: var(--muted);
  font-size: var(--game-content-min);
  line-height: 1.35;
}

.advisor-basis summary {
  min-height: 44px;
  padding: 13px 0;
  cursor: pointer;
  font-family: var(--mono);
}

.advisor-basis p + p {
  margin-top: 6px;
}

.advisor-selected {
  padding: 8px;
  border: 1px solid var(--ink);
  background: var(--raised);
}

.advisor-selected p {
  color: var(--ink);
}

.advisor-forecast,
.advisor-fact {
  display: block;
}

.advisor-fact {
  margin-top: 3px;
  color: var(--muted);
}

.report-overlay .route-overlay__card {
  display: grid;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.receipt-body {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.industry-revenue-checkpoint {
  margin: 8px 0;
  padding: 9px;
  border: 1px solid var(--line);
  background: var(--paper);
}

.industry-revenue-checkpoint__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--mono);
}

.industry-revenue-checkpoint__row span,
.industry-revenue-checkpoint__row small {
  display: block;
}

.industry-revenue-checkpoint__row b,
.industry-revenue-checkpoint__row small,
.industry-revenue-checkpoint__row strong,
.industry-revenue-checkpoint p {
  font-size: var(--game-content-min);
}

.industry-revenue-checkpoint__row small {
  margin-top: 3px;
  color: var(--muted);
}

.industry-revenue-checkpoint__row strong {
  flex: 0 0 auto;
  color: var(--volt);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.industry-revenue-checkpoint p {
  margin: 8px 0 0;
  line-height: 1.45;
}

.report-actions {
  margin-top: 0;
  padding: 8px 0 max(12px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--raised);
}

.verdict-actions,
.reveal-controls {
  padding-bottom: max(12px, env(safe-area-inset-bottom));
}

.viewport-action-bar.peek-strip {
  padding: 5px 12px max(12px, env(safe-area-inset-bottom));
}

.report-board-bar {
  padding: 8px 10px max(12px, env(safe-area-inset-bottom));
}

.rank-history__label {
  font-size: 11px;
}

.price-rail > .price-rung {
  position: relative;
  justify-content: flex-start;
  padding-right: 22px;
}

.price-rung > b {
  position: absolute;
  left: 2px;
  color: inherit;
  font: inherit;
}

.price-marker {
  --price-nudge: 0px;
  position: absolute;
  z-index: 2;
  top: 50%;
  right: 1px;
  display: inline-flex;
  color: var(--ink);
  line-height: 0;
  transform: translateY(calc(-50% + var(--price-nudge)));
}

.price-marker--player {
  z-index: 3;
  color: var(--volt);
}

.price-marker--rivalA {
  color: var(--kiln);
}

.price-marker--rivalB {
  color: var(--para);
}

.price-rung:has(.price-marker ~ .price-marker) .price-marker--rivalA {
  --price-nudge: -14px;
}

.price-rung:has(.price-marker ~ .price-marker) .price-marker--rivalB {
  --price-nudge: 14px;
}

.rank-history {
  display: grid;
  grid-template-columns: repeat(6, minmax(44px, 1fr));
}

.rank-history span {
  width: auto;
  min-width: 44px;
  min-height: 44px;
  height: auto;
}

.task-cell:has(.token-number) .task-label,
.task-cell:has(.token-number) .task-state,
.receipt-grid > strong.is-total,
.causal-notes li,
.takeover-stack .segment-option label small,
.takeover-stack .decision-preview small,
.takeover-stack .preview-reserve em {
  font-size: var(--game-content-min);
}

.drawer-handle,
.dossier-tab,
.segment-option label strong,
.mode-card strong,
.advisor-basis summary {
  font-size: var(--game-action-size);
}

.opening-brief p + p {
  margin-top: 8px;
}

.intro-rule {
  display: block;
  margin-top: 6px;
}

@media (max-width: 767px) {
  .lab-card__metrics {
    grid-template-columns: minmax(0, 1fr);
  }

  .lab-iq,
  .lab-fleet,
  .reveal-footer .market-pressure-strip {
    display: none;
  }

  .reveal-footer .reveal-controls {
    grid-column: 1 / -1;
  }
}

.intro-brief {
  width: calc(100% - 32px);
  max-width: 60ch;
  margin: 0 auto;
}

.title-main h1,
.flow-overlay__head h1,
.receipt-head h1,
.verdict-overlay h1,
.fatal-shell h1 {
  font-family: var(--editorial);
}

.dossier-transposed {
  table-layout: auto;
}

.dossier-transposed thead th:not(:first-child),
.dossier-transposed td {
  min-width: 32px;
}

.dossier-transposed thead th:first-child,
.dossier-transposed th[scope="row"] {
  min-width: 104px;
}

@media (min-width: 768px) {
  .dossier-transposed thead th:not(:first-child),
  .dossier-transposed td {
    min-width: 30px;
  }
}