/* Compute by any means — page-local styles.
 *
 * Tokens, .container, .page-head, .btn, .ref, .conf and the footer come from
 * ../styles.css. The glossary popover, .term, the glossary list, the sources
 * list and .facts follow /anatomy-of-a-cluster/styles.css: same objects,
 * copied rather than shared because there are two users. Promote at a third.
 *
 * Colour rules, as on the anatomy page: the board is ink on paper, and brat
 * marks only what you can act on (a picked card, the primary button hover,
 * the progress fill, the route you have chips moving on). Washington exposure
 * and Beijing standing are monochrome gauges, not red/green: brat means
 * "interactive" here, so a green gauge would read as a button.
 */

/* ---------- Frame ---------- */
.game-wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(48px, 6vw, 80px);
}
.game { position: relative; border: 1px solid var(--rule); background: var(--paper); --brat-pale: #C4E57F; /* the second run's green: brat lifted toward paper */ }
.game__body { padding: clamp(20px, 3vw, 36px); }

/* On a desktop the game fills the window below the nav, as the anatomy
   explorer does: the ledger across the top, and the menus and the side
   panel scrolling in their own columns. Reports and the end screen scroll
   inside the frame. Below 1181px it is an ordinary page. */
@media (min-width: 1181px) {
  .game-wrap { max-width: none; padding: 0 16px 16px; }
  .game {
    height: calc(100vh - 64px - 16px);
    height: calc(100dvh - 64px - 16px);
    min-height: 560px;
    display: flex; flex-direction: column;
  }
  .game .ledger { position: static; flex: 0 0 auto; }
  /* Scroll capture: app.js sizes the wrapper and drives the main column
     from the page's scroll, so the column itself mustn't take the wheel. */
  .game-wrap.is-scrolly .game { position: sticky; top: 72px; }
  .game-wrap.is-scrolly .game__body:not(.is-plan),
  .game-wrap.is-scrolly .game__body.is-plan .turn__main { overflow: hidden; }
  .game__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
  .game__body.is-plan { overflow: hidden; padding: 0; }
  .game__body.is-plan .turn { height: 100%; gap: 0; grid-template-columns: minmax(0, 1fr) 500px; grid-template-rows: minmax(0, 1fr); align-items: stretch; }
  .game__body.is-plan .turn__main { overflow-y: auto; min-height: 0; padding: 28px 32px 40px; }
  .game__body.is-plan .turn__side { position: static; overflow-y: auto; min-height: 0; padding: 24px 24px 32px; border-left: 1px solid var(--rule); }
}
.game__noscript { font-size: 16px; color: var(--ink-soft); padding: 24px; }

/* ---------- Full screen ---------- */
.stat--fs { justify-content: center; align-items: center; }
.fs-btn {
  font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--ink); white-space: nowrap;
  background: var(--paper); border: 1px solid var(--rule-strong); border-radius: var(--r-sm); padding: 6px 10px; cursor: pointer;
}
.fs-btn:hover { border-color: var(--ink); background: var(--brat); }
.game__corner { display: flex; justify-content: flex-end; padding: 12px 12px 0; }
.game__corner[hidden] { display: none; }
@media (min-width: 701px) {
  .game__corner { position: absolute; top: 14px; right: 14px; z-index: 5; padding: 0; }
}
.game.is-full {
  height: 100vh; height: 100dvh; width: 100vw; min-height: 0;
  display: flex; flex-direction: column; border: 0; overflow: hidden;
}
.game.is-full .ledger { position: static; flex: 0 0 auto; }
.game.is-full .game__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.game.is-pinned { position: fixed; inset: 0; z-index: 100; }
html.game-pinned { overflow: hidden; }
.game.is-full .mbar { position: absolute; }

/* ---------- Ledger: the running totals, pinned under the nav ---------- */
.ledger {
  position: sticky;
  top: 64px;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 1.6fr) repeat(2, minmax(0, 1.2fr)) auto;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.ledger[hidden] { display: none; }
.stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 14px;
  border-right: 1px solid var(--rule);
  min-width: 0;
}
.stat:last-child { border-right: 0; }
.stat__k { font-size: 12px; color: var(--ink-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat__v { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat__v.is-neg { text-decoration: underline; text-decoration-color: var(--ink); text-underline-offset: 3px; }
.stat__note { font-size: 12px; color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat__note sup, .tally sup, .report sup, .hist sup { font-size: 0.7em; }
@media (max-width: 1180px) {
  .ledger { grid-template-columns: repeat(4, minmax(0, 1fr)); position: static; }
  .stat { border-bottom: 1px solid var(--rule); }
  .stat:nth-child(4n) { border-right: 0; }
}
@media (max-width: 640px) {
  .ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(2n) { border-right: 0; }
  .stat:nth-child(4n) { border-right: 0; }
  .stat:nth-child(odd) { border-right: 1px solid var(--rule); }
}

.progress, .gauge__bar {
  display: block;
  height: 8px;
  background: var(--paper-soft);
  border: 1px solid var(--rule-strong);
  margin: 6px 0 2px;
}
.progress__fill { display: block; height: 100%; background: var(--brat); }
.gauge { display: flex; align-items: center; gap: 8px; }
/* The two gauges explain themselves on hover, focus or tap (the glossary popover). */
.term--gauge { display: flex; flex-direction: column; gap: 3px; border-bottom: 0; text-align: left; border-radius: var(--r-sm); }
.term--gauge .stat__k { text-decoration: underline dotted var(--brat-deep); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.gauge__bar { flex: 1 1 auto; margin: 4px 0; }
.gauge__fill { display: block; height: 100%; background: var(--ink-soft); }
.gauge__val { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; min-width: 2ch; text-align: right; }

/* ---------- Screens (intro, funding, report, end) ---------- */
.screen { max-width: 860px; }
.screen--end { max-width: 1000px; }
.screen__kicker { font-size: 13px; color: var(--ink-mute); margin: 0 0 6px; font-variant-numeric: tabular-nums; }
.screen__title { font-size: clamp(26px, 3.2vw, 38px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.12; margin: 0 0 16px; max-width: 26ch; }
.screen__sub { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; margin: 34px 0 10px; }
.screen__prose { font-size: 16.5px; line-height: 1.62; color: var(--ink-soft); max-width: 66ch; }
.screen__prose p { margin: 0 0 12px; }
.screen__prose strong { color: var(--ink); font-weight: 600; }
.screen__prose a, .card-opt__text a, .card-opt__more a { color: var(--ink); border-bottom: 1px solid var(--brat); }
.screen__prose a:hover, .card-opt__text a:hover, .card-opt__more a:hover { background: rgba(138, 206, 0, 0.18); }
.screen__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.btn { cursor: pointer; }

.brief {
  display: grid;
  grid-template-columns: minmax(120px, 190px) 1fr;
  margin: 22px 0 0;
  border-top: 1px solid var(--rule);
  max-width: 760px;
}
.brief dt, .brief dd { margin: 0; padding: 9px 0; border-bottom: 1px solid var(--rule); font-size: 14.5px; line-height: 1.5; }
.brief dt { color: var(--ink-mute); padding-right: 14px; }
.brief dd { color: var(--ink); }
@media (max-width: 600px) { .brief { grid-template-columns: 1fr; } .brief dt { border-bottom: 0; padding-bottom: 0; } }

.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 22px; max-width: 1000px; }
.choice { border: 1px solid var(--rule); padding: 20px; display: flex; flex-direction: column; gap: 10px; transition: border-color var(--t-fast); }
.choice:hover { border-color: var(--ink); }
.choice__title { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; margin: 0; }
.choice__nums { margin: 0; font-size: 14px; color: var(--ink-soft); display: flex; gap: 12px; font-variant-numeric: tabular-nums; }
.choice__nums strong { color: var(--ink); }
.choice__text { font-size: 14.5px; line-height: 1.58; color: var(--ink-soft); flex: 1 1 auto; }
.choice__text p { margin: 0 0 8px; }
.choice .btn { align-self: flex-start; }

/* ---------- A turn: news + menus on the left, plan and site on the right ---------- */
.turn { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: clamp(20px, 3vw, 40px); align-items: start; }
@media (max-width: 1000px) { .turn { grid-template-columns: minmax(0, 1fr); } }
.turn__head .screen__title { margin-bottom: 6px; }
.turn__blurb { font-size: 15.5px; color: var(--ink-soft); margin: 0 0 18px; max-width: 70ch; line-height: 1.6; }
.turn__side { display: flex; flex-direction: column; gap: 22px; position: sticky; top: 150px; }
@media (max-width: 1180px) { .turn__side { top: 80px; } }
@media (max-width: 1000px) { .turn__side { position: static; } }

.news { border-top: 1px solid var(--ink); margin: 6px 0 22px; max-width: 78ch; }
.news__title { font-size: 13px; font-weight: 600; margin: 10px 0 2px; color: var(--ink); }
.news__list { list-style: none; margin: 0; padding: 0; }
.news__item { padding: 8px 0; border-bottom: 1px solid var(--rule); }
.news__line { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
.news__line strong { color: var(--ink); font-weight: 600; }
.news__date { font-size: 12.5px; color: var(--ink-mute); margin-right: 4px; font-variant-numeric: tabular-nums; }
.news__fx { list-style: none; margin: 4px 0 0; padding: 0; }

/* overflow-y: hidden matters: with overflow-x alone the row computes to a
   vertical scroller too, the tabs' -1px margin gives it 1px to scroll, and
   it grabs the mouse wheel. */
.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--rule); margin: 0 0 12px; overflow-x: auto; overflow-y: hidden; }
.tabs__btn {
  background: none; border: 0; border-bottom: 2px solid transparent;
  font-family: var(--sans); font-size: 15px; font-weight: 500; color: var(--ink-soft);
  padding: 10px 16px 9px; cursor: pointer; white-space: nowrap; margin-bottom: -1px;
}
.tabs__btn:hover { color: var(--ink); }
.tabs__btn.is-on { color: var(--ink); font-weight: 600; border-bottom-color: var(--brat); }
.newslog { max-width: 78ch; }
.newslog__q { border-top: 1px solid var(--ink); padding: 10px 0 18px; }
.newslog__title { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 4px; }
.newslog__sub { font-size: 12.5px; font-weight: 600; color: var(--ink-mute); margin: 12px 0 2px; }
.newslog .report { margin-top: 0; }
.newslog .fx { font-size: 14px; padding: 6px 0 6px 22px; }
.newslog .fx::before { top: 13px; }
.tabs__note { font-size: 14px; color: var(--ink-soft); margin: 0 0 12px; max-width: 76ch; line-height: 1.58; }

/* ---------- Filter and sort bar above the cards ---------- */
.filters { display: flex; flex-direction: column; gap: 8px; margin: 0 0 16px; padding: 0 0 14px; border-bottom: 1px solid var(--rule); }
.filters__group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.filters__k { font-size: 12px; color: var(--ink-mute); min-width: 62px; }
.fpill {
  font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--ink-soft);
  background: var(--paper); border: 1px solid var(--rule-strong); border-radius: 999px;
  padding: 4px 11px; cursor: pointer; white-space: nowrap;
}
.fpill:hover { border-color: var(--ink); color: var(--ink); }
.fpill.is-on { background: var(--brat); border-color: var(--ink); color: var(--ink); }
.filters__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 2px; font-size: 13px; color: var(--ink-soft); }
.filters__check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.filters__check input { accent-color: var(--ink); margin: 0; }
.filters__sort { display: inline-flex; align-items: center; gap: 6px; }
.filters__sort select { font-family: var(--sans); font-size: 13px; color: var(--ink); background: var(--paper); border: 1px solid var(--rule-strong); border-radius: var(--r-sm); padding: 4px 6px; max-width: 100%; }
.filters__count { color: var(--ink-mute); font-variant-numeric: tabular-nums; }
.filters__clear { background: none; border: 0; padding: 0; font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--ink); border-bottom: 1px solid var(--brat); cursor: pointer; }
.filters__clear[hidden] { display: none; }
.filters__clear:hover { background: rgba(138, 206, 0, 0.18); }
.cards__empty { font-size: 14px; color: var(--ink-soft); margin: 4px 0; }
@media (max-width: 600px) { .filters__k { min-width: 0; width: 100%; } }

/* ---------- Option cards ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.card-opt {
  border: 1px solid var(--rule);
  padding: 16px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color var(--t-fast), background var(--t-fast);
  min-width: 0;
}
.card-opt:hover { border-color: var(--ink); }
.card-opt.is-picked { border-color: var(--brat); background: rgba(138, 206, 0, 0.06); }
.card-opt.is-locked { background: var(--paper-soft); }
.card-opt.is-locked .card-opt__title, .card-opt.is-locked .card-opt__nums { opacity: 0.55; }
.card-opt__top { display: flex; gap: 6px; flex-wrap: wrap; min-height: 0; }
.card-opt__title { font-size: 16.5px; font-weight: 600; letter-spacing: -0.01em; margin: 0; line-height: 1.3; }
.card-opt__nums { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; border-top: 1px solid var(--rule); padding-top: 9px; }
.card-opt__nums div { min-width: 0; }
.card-opt__nums dt { font-size: 11.5px; color: var(--ink-mute); }
.card-opt__nums dd { margin: 0; font-size: 13.5px; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.card-opt__nums small { font-size: 11.5px; color: var(--ink-mute); font-weight: 400; margin-left: 4px; }
.card-opt__text { font-size: 14px; line-height: 1.5; color: var(--ink-soft); margin: 0; }
.card-opt__more p { margin: 0 0 8px; }
.card-opt__more { font-size: 13.5px; line-height: 1.58; color: var(--ink-soft); border-top: 1px solid var(--rule); padding-top: 10px; }
.card-opt__more[hidden] { display: none; }
.card-opt__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 4px; flex-wrap: wrap; }
.card-opt__toggle {
  background: none; border: 0; padding: 0; font-family: var(--sans); font-size: 13px; font-weight: 500;
  color: var(--ink); border-bottom: 1px solid var(--brat); cursor: pointer;
}
.card-opt__toggle:hover { background: rgba(138, 206, 0, 0.18); }
.card-opt__lock { font-size: 12.5px; color: var(--ink-mute); margin-left: auto; text-align: right; }

.tag {
  font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-soft); border: 1px solid var(--rule-strong); padding: 2px 6px; border-radius: var(--r-sm);
}
.tag--smuggle { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.tag--gray { color: var(--ink); background: var(--rule); border-color: var(--rule); }
.tag--domestic, .tag--legal { color: var(--ink); }
.tag--rent { border-style: dashed; }
.tag--liquid { color: var(--ink); border-color: var(--ink); }
.tag--air { color: var(--ink-soft); }

.step { display: inline-flex; align-items: center; border: 1px solid var(--rule-strong); border-radius: var(--r-sm); margin-left: auto; }
.step__btn {
  font-family: var(--sans); font-size: 15px; font-weight: 600; min-width: 34px; height: 32px; padding: 0 10px;
  background: none; border: 0; cursor: pointer; color: var(--ink);
}
.step__btn--add { background: var(--ink); color: var(--paper); }
.step__btn--add:hover:not(:disabled) { background: var(--brat); color: var(--ink); }
.step__btn:disabled { opacity: 0.35; cursor: default; }
.step__btn[hidden] { display: none; }
.step__n { min-width: 28px; text-align: center; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.step__n[hidden] { display: none; }

/* ---------- The top of a turn: briefing left, campuses right ---------- */
.cmap { min-width: 0; }
.cmap__site { margin: 0 0 10px; }
.cmap__site svg { width: 100%; height: auto; display: block; }
.cmap__cap { margin: 2px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--ink-soft); }
.cmap__cap strong { color: var(--ink); }
.cmap__cap--off { margin: 0 0 8px; }
.cmap__models { margin: 4px 0 0; font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; }
.cmap__models strong { color: var(--ink); }
.cmap__models span { color: var(--ink-mute); }
.cmap__idle { margin: 0 0 8px; font-size: 13.5px; font-weight: 600; color: var(--ink); background: var(--paper-soft); padding: 8px 10px; border-left: 3px solid var(--ink); }

/* Over capacity: chips crated for lack of halls or power, or cash running out. */
.alert { margin: 4px 0 14px; padding: 12px 14px; border: 2px solid var(--ink); border-left-width: 6px; background: var(--paper-soft); border-radius: var(--r-sm); }
.alert__title { margin: 0 0 6px; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); }
.alert__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14.5px; color: var(--ink); }
.alert__go { font: inherit; font-size: 13px; font-weight: 600; color: var(--ink); background: none; border: 0; padding: 0 2px; cursor: pointer; text-decoration: underline; text-decoration-color: var(--brat); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.alert__go:hover { background: rgba(138, 206, 0, 0.18); }
.cmap__key { list-style: none; margin: 4px 0 0; padding: 0; font-size: 12px; line-height: 1.5; color: var(--ink-soft); }
.cmap__key li { padding: 2px 0 2px 15px; text-indent: -15px; }
.cmap__key li .cmap__sw { margin-right: 6px; }
.cmap__key strong { color: var(--ink); }
.cmap__key--off { margin: 0 0 10px; }
/* ---------- Capabilities tab ---------- */
.cap__legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 4px 0 8px; font-size: 13px; color: var(--ink); }
.cap__legend span { display: inline-flex; align-items: center; gap: 6px; }
.cap__chart { width: 100%; height: auto; display: block; }
.cap__note { font-size: 12.5px; color: var(--ink-mute); margin: 6px 0 14px; line-height: 1.5; }
.cap-grid { stroke: var(--rule); stroke-width: 1; }
.cap-ax { font-family: var(--sans); font-size: 11px; fill: var(--ink-mute); font-variant-numeric: tabular-nums; }
.cap-ax--now { fill: var(--ink); font-weight: 600; }
.cap-future { fill: var(--paper-soft); }
.cap-now { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 3 3; }
.cap-us { fill: none; stroke: var(--ink); stroke-width: 2; }
.cap-cn { fill: none; stroke: var(--ink-mute); stroke-width: 2; stroke-dasharray: 6 3; }
.cap-proj { stroke-dasharray: 2 4; stroke-width: 1.6; }
.cap-dot-us { fill: var(--ink); stroke: var(--paper); stroke-width: 2; }
.cap-dot-cn { fill: var(--ink-mute); stroke: var(--paper); stroke-width: 2; }
.cap-mine { fill: var(--brat); stroke: var(--ink); stroke-width: 1.5; }
.cap-proj-dot { fill: var(--paper); stroke: var(--brat-deep); stroke-width: 2.5; }
.cap-lab { font-family: var(--sans); font-size: 12px; font-weight: 600; fill: var(--ink); paint-order: stroke; stroke: var(--paper); stroke-width: 4px; stroke-linejoin: round; }
.cap-lab--mute { fill: var(--ink-mute); }
.cap__chart [data-tip] { cursor: help; }
.ctip__tag { font-style: normal; font-weight: 500; font-size: 11px; color: var(--ink-mute); }
.turn__top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 32px; margin-bottom: 8px; }
.oruns { min-width: 260px; max-width: 380px; flex: 0 1 380px; border-left: 1px solid var(--rule); padding: 2px 0 4px 18px; }
.oruns__title { font-size: 12.5px; font-weight: 600; color: var(--ink-mute); margin: 0 0 6px; }
.oruns__list { list-style: none; margin: 0; padding: 0; }
.oruns__list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name eci" "track when"; gap: 2px 12px; padding: 6px 0; border-bottom: 1px solid var(--rule); }
.oruns__list li:last-child { border-bottom: 0; }
.oruns__name { grid-area: name; margin: 0; font-size: 14px; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 6px; }
.oruns__eci { grid-area: eci; margin: 0; font-size: 14px; font-weight: 600; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.oruns__track { grid-area: track; display: flex; gap: 3px; align-items: center; }
.oruns__track span { flex: 1 1 0; height: 7px; border: 1px solid var(--rule-strong); background: var(--paper-soft); }
.oruns__track span.is-done { background: var(--ink-soft); border-color: var(--ink-soft); }
.oruns__track span.is-now { background: var(--brat); border-color: var(--ink); }
.oruns__when { grid-area: when; margin: 0; font-size: 12px; color: var(--ink-mute); text-align: right; }
.oruns__none { margin: 0; font-size: 13px; color: var(--ink-soft); }
.cmap { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--ink); }
.cmap__legend { margin: 10px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; font-size: 12.5px; color: var(--ink); }
.cmap__legend p { grid-column: 1 / -1; margin: 2px 0 0; font-size: 12px; color: var(--ink-mute); }
.cmap__lg { display: flex; align-items: center; gap: 8px; line-height: 1.25; }
.cmap__lg svg { flex: 0 0 auto; }
.cmap__lg small { display: block; font-size: 11px; color: var(--ink-mute); }
.cm-lab { font-family: var(--sans); font-size: 8.5px; font-weight: 600; fill: var(--ink); pointer-events: none; font-variant-numeric: tabular-nums; }
.cm-lab--empty { font-weight: 400; fill: var(--ink-mute); }
.cm-lab--rent { fill: var(--paper); }
.cm-lab--pend { font-weight: 400; fill: var(--ink-mute); }
.cmap__sw { flex: 0 0 auto; display: inline-block; width: 9px; height: 9px; border: 1px solid var(--rule-strong); background: var(--paper); transform: translateY(1px); }
.cmap__sw--g0 { background: var(--brat); border-color: var(--ink); }
.cmap__sw--g1 { background: var(--brat-pale); border-color: var(--ink); }
.cmap__sw--g2 { background: var(--brat-deep); border-color: var(--ink); }
.cmap__sw--g3 { background: repeating-linear-gradient(45deg, var(--brat-deep) 0 2px, var(--ink) 2px 3px); border-color: var(--ink); }
.cmap__sw--rent { background: var(--ink-soft); border-color: var(--ink-soft); }
.cm-name { font-family: var(--sans); font-size: 13px; font-weight: 600; fill: var(--ink); }
.cm-small { font-family: var(--sans); font-size: 11px; fill: var(--ink-soft); }
.cm-tiny { font-family: var(--sans); font-size: 9.5px; fill: var(--ink-mute); }
.cm-tiny--add { fill: var(--ink); font-weight: 600; }
.cm-fence { fill: var(--paper-soft); stroke: var(--rule-strong); stroke-width: 1; stroke-dasharray: 4 3; }
.cmap__site.is-training .cm-fence { stroke: var(--ink); }
.cm-sub rect { fill: var(--paper); stroke: var(--ink); stroke-width: 1; }
.cm-sub circle { fill: none; stroke: var(--ink); stroke-width: 1; }
.cm-pbar { fill: var(--paper); stroke: var(--rule-strong); stroke-width: 0.8; }
.cm-pfill { fill: var(--ink-soft); }
.cm-line { fill: none; stroke: var(--ink); stroke-width: 1.4; }
.cm-bldg { fill: var(--paper); stroke: var(--ink); stroke-width: 1.4; }
.cm-bldg--pend { fill: none; stroke: var(--ink-mute); stroke-dasharray: 4 3; }
.cm-cell { fill: var(--paper); stroke: var(--rule-strong); stroke-width: 0.8; }
.cm-cell--g0 { fill: var(--brat); stroke: var(--ink); }
.cm-cell--g1 { fill: var(--brat-pale); stroke: var(--ink); }
.cm-cell--g2 { fill: var(--brat-deep); stroke: var(--ink); }
.cm-cell--g3 { fill: url(#cm-hatch-g3); stroke: var(--ink); }
.cm-pat-bg--g0, .cm-pat-bg--g1 { fill: var(--brat); }
.cm-pat-bg--g2, .cm-pat-bg--g3 { fill: var(--brat-deep); }
.cm-pat-line { stroke: var(--ink); stroke-width: 1.2; }
[data-tip] { cursor: help; }
.cm-cell[data-tip]:hover { stroke-width: 1.6; stroke: var(--ink); }
.ctip { position: fixed; z-index: 70; width: 290px; background: var(--paper); border: 1px solid var(--ink); padding: 10px 12px 11px; pointer-events: none; box-shadow: 0 6px 18px rgba(0,0,0,0.08); }
.ctip[hidden] { display: none; }
.ctip__name { margin: 0 0 4px; font-size: 14px; font-weight: 600; color: var(--ink); display: flex; gap: 6px; align-items: center; }
.ctip__line { margin: 0 0 4px; font-size: 12.5px; line-height: 1.45; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.ctip__line strong { color: var(--ink); }
.ctip__list { list-style: none; margin: 2px 0 6px; padding: 0; font-size: 12.5px; }
.ctip__list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 10px; padding: 3px 0; border-bottom: 1px solid var(--rule); color: var(--ink); font-variant-numeric: tabular-nums; }
.ctip__list li span:last-child { color: var(--ink-soft); white-space: nowrap; }
.ctip__sub { margin: 6px 0 0; font-size: 11.5px; font-weight: 600; color: var(--ink-mute); }
.cm-hit { fill: transparent; stroke: none; }
.cm-sub[data-tip]:hover rect:not(.cm-hit) { fill: var(--brat); }
.ctip__track { display: flex; align-items: center; gap: 3px; margin: 6px 0 6px; }
.ctip__track span { width: 54px; height: 7px; border: 1px solid var(--rule-strong); background: var(--paper-soft); }
.ctip__track span.is-done { background: var(--ink-soft); border-color: var(--ink-soft); }
.ctip__track span.is-now { background: var(--brat); border-color: var(--ink); }
.ctip__track em { font-style: normal; font-size: 11.5px; color: var(--ink-mute); margin-left: 6px; }
.cm-cell--rent { fill: var(--ink-soft); stroke: var(--ink-soft); }
.cm-cell--alloc { fill: var(--paper); stroke: var(--brat-deep); stroke-width: 1.6; stroke-dasharray: 3 2; }
.cm-lab--alloc { fill: var(--ink); font-weight: 500; }
.cmap__sw--alloc { background: var(--paper); border: 1.5px dashed var(--brat-deep); }
.cm-cell--pend { fill: none; stroke: var(--rule); stroke-dasharray: 2 2; }

.status__t .is-neg { text-decoration: underline; }

/* ---------- Side panel ---------- */
.side__title { font-size: 14px; font-weight: 600; margin: 0 0 10px; color: var(--ink); }
.side__sub { font-size: 12.5px; font-weight: 600; color: var(--ink-mute); margin: 16px 0 6px; }
.side__cap { font-size: 12px; color: var(--ink-mute); margin: 6px 0 0; line-height: 1.45; }
.plan__empty { font-size: 13.5px; color: var(--ink-soft); margin: 0 0 12px; }
.plan__list { list-style: none; margin: 0 0 8px; padding: 0; font-size: 13.5px; }
.plan__list li { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--rule); font-variant-numeric: tabular-nums; }
.plan__list li span:first-child { color: var(--ink-soft); }
.plan__list--pipe { margin: 0; }
.plan__total { display: flex; justify-content: space-between; font-weight: 600; font-size: 14.5px; margin: 6px 0 10px; font-variant-numeric: tabular-nums; }
.plan__forecast { font-size: 13px; color: var(--ink-soft); line-height: 1.5; margin: 0 0 12px; }
.plan__end { width: 100%; justify-content: center; }
.status { margin: 0 0 14px; }
.status .side__sub { margin-top: 0; }
.status__t { border-collapse: collapse; width: 100%; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.status__t th, .status__t td { text-align: right; padding: 5px 0 5px 8px; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.status__t thead th { font-weight: 600; color: var(--ink); font-size: 11.5px; line-height: 1.3; border-bottom: 1px solid var(--ink); vertical-align: bottom; }
.status__t thead th span { font-weight: 400; color: var(--ink-mute); }
.status__t tbody th { text-align: left; font-weight: 400; color: var(--ink-mute); padding-left: 0; }
.status__t td { color: var(--ink); }
.status__t td strong { font-weight: 700; }
.status__t sup { font-size: 0.7em; }
.status__note { font-size: 12.5px; color: var(--ink-soft); line-height: 1.45; margin: 8px 0 0; }
.status__note strong { color: var(--ink); }


/* ---------- Reports ---------- */
.report, .news__fx { list-style: none; margin: 8px 0 0; padding: 0; max-width: 78ch; }
.fx { position: relative; padding: 9px 0 9px 22px; border-bottom: 1px solid var(--rule); font-size: 15px; line-height: 1.55; color: var(--ink-soft); }
.news__fx .fx { font-size: 13.5px; padding: 5px 0 5px 20px; border-bottom: 0; }
.fx::before { content: ""; position: absolute; left: 2px; top: 16px; width: 8px; height: 8px; }
.news__fx .fx::before { top: 11px; }
.fx--good::before { background: var(--ink); }
.fx--bad::before { background: var(--paper); border: 1.5px solid var(--ink); transform: rotate(45deg); }
.fx--neutral::before { background: var(--rule-strong); }
.fx strong { color: var(--ink); }

.tally { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink); margin-top: 24px; }
@media (max-width: 700px) { .tally { grid-template-columns: 1fr 1fr; } }
.tally div { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--rule); }
.tally dt { font-size: 12.5px; color: var(--ink-mute); }
.tally dd { margin: 2px 0 0; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.tally small { display: block; font-size: 12.5px; font-weight: 400; color: var(--ink-soft); letter-spacing: 0; }
.breakdown { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; max-width: 760px; }
@media (max-width: 600px) { .breakdown { grid-template-columns: 1fr; } }
.breakdown div { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--rule); font-size: 14.5px; }
.breakdown dt { color: var(--ink-soft); }
.breakdown dd { margin: 0; font-weight: 500; font-variant-numeric: tabular-nums; }
.hist { border-collapse: collapse; width: 100%; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.hist th, .hist td { text-align: left; padding: 7px 12px 7px 0; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.hist th { font-weight: 600; color: var(--ink-mute); font-size: 12px; border-bottom: 1px solid var(--ink); }
.hist thead tr { border-top: 1px solid var(--ink); }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- Reference sections below the game ---------- */
.glossary__title, .sources__title { font-size: clamp(22px, 2.4vw, 28px); font-weight: 600; letter-spacing: -0.02em; margin: 0 0 8px; }
.glossary__note, .sources__note { font-size: 14.5px; color: var(--ink-soft); max-width: 64ch; margin: 0 0 20px; line-height: 1.6; }
.facts { margin: 8px 0 0; display: grid; grid-template-columns: minmax(90px, auto) 1fr; font-size: 13px; border-top: 1px solid var(--rule); }
.facts dt, .facts dd { margin: 0; padding: 6px 0; border-bottom: 1px solid var(--rule); line-height: 1.45; }
.facts dt { color: var(--ink-mute); padding-right: 12px; }
.facts dd { color: var(--ink); font-variant-numeric: tabular-nums; }
.conf { display: inline-block; margin-left: 4px; font-size: 10.5px; font-weight: 500; color: var(--ink-mute); border: 1px solid var(--rule); padding: 0 5px; border-radius: var(--r-sm); vertical-align: 1px; white-space: nowrap; }
.conf--est, .conf--inf { border-style: dashed; }
.ref { display: inline-block; font-size: 10.5px; font-weight: 600; line-height: 1; vertical-align: super; margin-left: 2px; padding: 1px 3px; color: var(--ink); border-bottom: 1px solid var(--brat); font-variant-numeric: tabular-nums; }
.ref:hover { background: rgba(138, 206, 0, 0.18); }

.term { font: inherit; color: var(--ink); background: none; border: 0; padding: 0; border-bottom: 1.5px dotted var(--brat-deep); cursor: help; line-height: inherit; text-align: inherit; }
.term:hover, .term:focus-visible { background: rgba(138, 206, 0, 0.18); }
.tip { position: fixed; z-index: 60; background: var(--paper); border: 1px solid var(--ink); padding: 12px 14px 13px; pointer-events: none; }
.tip[hidden] { display: none; }
.tip__term { font-size: 13.5px; font-weight: 600; margin: 0 0 4px; color: var(--ink); }
.tip__def { font-size: 13.5px; line-height: 1.5; margin: 0; color: var(--ink-soft); }

.glossary { margin: 0; display: grid; grid-template-columns: minmax(140px, 200px) 1fr; max-width: 920px; border-top: 1px solid var(--rule); }
@media (max-width: 640px) { .glossary { grid-template-columns: 1fr; } .glossary dd { padding-top: 0; } .glossary dt { border-bottom: 0; padding-bottom: 2px; } }
.glossary dt, .glossary dd { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: 14.5px; line-height: 1.55; }
.glossary dt { font-weight: 600; color: var(--ink); padding-right: 16px; scroll-margin-top: 90px; }
.glossary dd { color: var(--ink-soft); }
.sources__list { margin: 0; padding-left: 24px; font-size: 14px; line-height: 1.55; color: var(--ink-soft); columns: 2; column-gap: 40px; }
@media (max-width: 800px) { .sources__list { columns: 1; } }
.src { break-inside: avoid; margin-bottom: 6px; scroll-margin-top: 150px; }
.src:target { background: rgba(138, 206, 0, 0.18); }
.src a { color: var(--ink); border-bottom: 1px solid var(--brat); }
.src a:hover { background: rgba(138, 206, 0, 0.18); }
.breakdown__total { grid-column: 1 / -1; border-top: 1px solid var(--ink); font-weight: 600; }
.breakdown__total dt { color: var(--ink); }
.conf--game { border-style: dotted; }

/* ---------- Phone: a pinned bar with the running total and the button ---------- */
.mbar { display: none; }
@media (max-width: 1000px) {
  .mbar {
    display: flex; align-items: center; gap: 12px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: var(--paper); border-top: 1px solid var(--ink);
  }
  .mbar__txt { margin: 0; flex: 1 1 auto; display: flex; flex-direction: column; font-size: 12.5px; color: var(--ink-soft); line-height: 1.35; font-variant-numeric: tabular-nums; min-width: 0; }
  .mbar__txt strong { color: var(--ink); }
  .mbar__btn { padding: 10px 14px; white-space: nowrap; }
  .game-wrap { padding-bottom: 96px; }
  .s-tiny { font-size: 11px; }
}