/* ─── 25 Oct 2026 — THE CIV PLAN PAGE: PRODUCTION CHAINS (src/ProductionChains.jsx, part 4 of the game-mod pages) ──
   Spec: docs/superpowers/specs/2026-10-25-production-chains-page.md. The page is the tracker's .view-page (the tier
   tabs and the filter pills stay the app's own: .vp-tab, .media-expand-pill); the tier rows, the chain panel, the
   building / good card and the "Show every chain" board are the IN-GAME look of Hugo's Figma boards: a dark navy
   panel with a thin pale border, near-black rounded icon tiles, a white name and the good in italics under each tile,
   thin pale elbow lines between the tiles.

   COLOURS ARE ROLE TOKENS (invariants #28 and #31). A skin may repaint the page by setting any of these on body
   (colour only), and each one falls back to the skin's own palette, resolved HERE, on the page, so it follows the
   skin's --blue / --ink-on-dark / --accent even when the skin does not name it:
     --chain-board-bg      the board and card panel              (Figma navy; the game's dark-blue base)
     --chain-board-line    panel border, group rules             (Figma 1 px pale border)
     --chain-tile-bg       the icon tile                         (Figma near-black tile)
     --chain-tile-line     the tile's edge                       (none in Figma)
     --chain-label         building name, values                 (Figma white)
     --chain-label-muted   the good in brackets, the value line  (Figma italic)
     --chain-link          the connector lines                   (Figma thin white elbows)
     --chain-select        the selected tab, the ringed node     (the game's Tyrian purple = selected)
     --chain-value-pos / --chain-value-neg   + / - values        (game green / red, lifted for the dark panel)
     --chain-assumed       the "≈" marker and the "derived" tags (a page addition)
     --chain-unknown       the dashed edge of an unknown step
     --chain-luxury        the luxury group's rule               (game gold)
   STRUCTURE is the same in every skin and lives here only: tile 96 px (72 on the phone), radius var(--r-card), panel
   var(--r-panel), labels var(--fs-12) / var(--fs-11-5), the value line var(--font-mono) var(--fs-10-5), the numeral
   var(--font-display). FIXED LAYOUT (invariant #20): the tab row, the head row, the tier rows, the chain panel, the buildings list,
   every card row and the chain box have fixed heights; a long value scrolls inside its own row. */

.pc-root {
  --pc-board: var(--chain-board-bg, color-mix(in srgb, var(--blue) 18%, var(--black)));
  --pc-board-line: var(--chain-board-line, color-mix(in srgb, var(--ink-on-dark) 32%, transparent));
  --pc-tile: var(--chain-tile-bg, color-mix(in srgb, var(--black) 58%, var(--pc-board)));
  --pc-tile-line: var(--chain-tile-line, transparent);
  --pc-label: var(--chain-label, var(--ink-on-dark));
  --pc-label-muted: var(--chain-label-muted, color-mix(in srgb, var(--ink-on-dark) 64%, transparent));
  --pc-link: var(--chain-link, color-mix(in srgb, var(--ink-on-dark) 70%, transparent));
  --pc-select: var(--chain-select, var(--accent));
  --pc-pos: var(--chain-value-pos, color-mix(in srgb, var(--ok) 72%, var(--mix-light)));
  --pc-neg: var(--chain-value-neg, color-mix(in srgb, var(--danger) 52%, var(--mix-light)));
  --pc-assumed: var(--chain-assumed, var(--warn));
  --pc-unknown: var(--chain-unknown, color-mix(in srgb, var(--ink-on-dark) 42%, transparent));
  --pc-luxury: var(--chain-luxury, var(--gold));
}

/* ── the page (cream, the app's own chrome) ── */
.view-page.pc-page { gap: 10px; }
.pc-gap { flex: 1 1 auto; }
.pc-tabrow { flex: none; display: flex; align-items: center; gap: 12px; height: 40px; min-width: 0; }
.pc-tabs { flex: 0 1 auto; min-width: 0; }
.view-page .pc-tabs.page-tabs { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.view-page .pc-tabs.page-tabs::-webkit-scrollbar { display: none; }
.pc-tabs .vp-tab.is-active { border-bottom-color: var(--pc-select); }
.pc-tab-num {
  display: inline-block;
  min-width: 1.4em;
  font-family: var(--font-display);
  font-size: var(--fs-17);
  line-height: 1;
  color: var(--ink);
}
.pc-draft {
  flex: none;
  height: 22px;
  line-height: 20px;
  box-sizing: border-box;
  padding: 0 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--pc-assumed);
  font-size: var(--fs-11);
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-08);
  text-transform: uppercase;
  color: var(--ink);
}
.pc-draft.is-hidden { visibility: hidden; }

.pc-head { flex: none; display: flex; align-items: center; gap: 12px; height: 30px; min-width: 0; }
.pc-head-note { flex: none; font-size: var(--fs-12); color: var(--ink-muted); white-space: nowrap; }
.pc-page .pc-head .media-expand-pill { margin-top: 0; flex: none; }
.pc-filters {
  flex: 1 1 auto;
  min-width: 0;
  height: 30px;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--ink-muted) 40%, transparent) transparent;
}
.pc-filters .media-expand-pill { flex: none; }
.pc-filter-gap { flex: 1 0 12px; }
.pc-pill-n { margin-left: 6px; font-variant-numeric: tabular-nums; opacity: 0.7; }

.pc-empty { margin: auto; max-width: 640px; padding: 48px 24px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.pc-empty-text { font-size: var(--fs-14); line-height: 1.5; color: var(--ink); }

/* ── the in-game panels ── */
.pc-board {
  background: var(--pc-board);
  border: 1px solid var(--pc-board-line);
  border-radius: var(--r-panel);
  color: var(--pc-label);
  box-sizing: border-box;
}
.pc-board-note { margin: auto; max-width: 640px; padding: 18px; text-align: center; font-size: var(--fs-13); line-height: 1.5; color: var(--pc-label-muted); }
.pc-board ::-webkit-scrollbar { width: 8px; height: 8px; }
.pc-board ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--pc-label) 28%, transparent); border-radius: var(--r-round); }

/* the resident's portrait (the every-chain board) */
.pc-portrait { flex: none; width: 172px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; min-width: 0; }
.pc-portrait-pic { position: relative; flex: none; height: 180px; }
.pc-portrait-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.pc-portrait-none { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border: 1px dashed var(--pc-unknown); border-radius: var(--r-card); font-size: var(--fs-11-5); color: var(--pc-label-muted); }
.pc-numeral.is-baked { visibility: hidden; }
.pc-numeral {
  position: absolute;
  right: 12px;
  bottom: 6px;
  font-family: var(--font-display);
  font-size: var(--fs-44);
  line-height: 1;
  color: var(--pc-label);
  text-shadow: 0 2px 8px color-mix(in srgb, var(--black) 70%, transparent);
}
.pc-portrait-cap { flex: none; height: 18px; line-height: 18px; text-align: center; font-size: var(--fs-12); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the tile: picture, name, (good), one value line — the same tile everywhere */
.pc-tile {
  --pc-ts: 96px;
  --pc-tw: 136px;
  flex: none;
  width: var(--pc-tw);
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: center;
}
button.pc-tile { cursor: pointer; }
.pc-tile.is-md { --pc-ts: 88px; }
.pc-tile.is-sm { --pc-ts: 64px; --pc-tw: 120px; }
.pc-tile.is-lg { --pc-ts: 120px; --pc-tw: 120px; }
.pc-tile-pic {
  position: relative;
  flex: none;
  width: var(--pc-ts);
  height: var(--pc-ts);
  margin-bottom: 4px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--r-card);
  background: var(--pc-tile);
  border: 1px solid var(--pc-tile-line);
  transition: box-shadow var(--dur-1) ease;
}
.pc-tile-pic img { width: 88%; height: 88%; object-fit: contain; }
.pc-tile.is-noicon .pc-tile-pic,
.pc-tile.is-unknown .pc-tile-pic { border: 1px dashed var(--pc-unknown); }
.pc-tile-noname { padding: 6px; font-size: var(--fs-11); line-height: 1.25; color: var(--pc-label-muted); overflow: hidden; }
.pc-tile-name,
.pc-tile-sub,
.pc-tile-val { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-tile-name { height: 16px; line-height: 16px; font-size: var(--fs-12); color: var(--pc-label); }
.pc-tile-sub { height: 16px; line-height: 16px; font-size: var(--fs-11-5); font-style: italic; color: var(--pc-label-muted); }
.pc-tile-val {
  height: 20px;
  line-height: 20px;
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-10-5);
  color: var(--pc-label-muted);
}
.pc-tile.is-sm .pc-tile-name { font-size: var(--fs-11-5); }
.pc-tile.is-sm .pc-tile-sub { font-size: var(--fs-11); }
.pc-tile.is-dim .pc-tile-pic img { opacity: 0.42; }
.pc-tile.is-dim .pc-tile-name,
.pc-tile.is-dim .pc-tile-sub { opacity: 0.6; }
button.pc-tile:hover .pc-tile-pic { box-shadow: 0 0 0 1px var(--pc-link); }
button.pc-tile:focus-visible { outline: none; }
button.pc-tile:focus-visible .pc-tile-pic { box-shadow: 0 0 0 2px var(--pc-select); }
.pc-tile.is-selected .pc-tile-pic,
button.pc-tile.is-selected:hover .pc-tile-pic { box-shadow: 0 0 0 2px var(--pc-select), 0 0 14px color-mix(in srgb, var(--pc-select) 45%, transparent); }
.pc-tile-chip,
.pc-tile-corner,
.pc-tile-count,
.pc-tile-vanilla {
  position: absolute;
  height: 16px;
  line-height: 16px;
  padding: 0 6px;
  border-radius: var(--r-pill);
  font-size: var(--fs-9-5);
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-06);
  text-transform: uppercase;
  white-space: nowrap;
  background: color-mix(in srgb, var(--black) 72%, transparent);
  color: var(--pc-label);
}
.pc-tile-chip { left: 4px; top: 4px; max-width: calc(100% - 8px); box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; }
.pc-tile.is-sm .pc-tile-chip,
.pc-tile.is-md .pc-tile-chip { top: auto; right: 3px; bottom: 3px; left: 3px; padding: 0 3px; text-align: center; overflow: hidden; text-overflow: ellipsis; font-size: var(--fs-9); }
.pc-tile-chip.is-dropped { background: color-mix(in srgb, var(--danger) 88%, var(--black)); color: var(--ink-on-danger); }
.pc-tile-chip.is-test { color: var(--pc-assumed); }
.pc-tile-corner { right: 4px; top: 4px; font-family: var(--font-display); font-size: var(--fs-12); letter-spacing: 0; }
.pc-tile-vanilla { right: 4px; bottom: 4px; text-transform: none; }
.pc-tile-count { right: 3px; top: 3px; padding: 0 5px; font-family: var(--font-mono); font-size: var(--fs-10); font-weight: var(--fw-med); letter-spacing: 0; text-transform: none; }

/* attributes and goods inside values */
.pc-glyph { flex: none; width: 16px; height: 16px; object-fit: contain; }
.pc-glyph.is-good { width: 20px; height: 20px; }
.pc-glyph.is-cat { width: 20px; height: 20px; }
.pc-tile-val .pc-glyph { width: 14px; height: 14px; }
.pc-gives { display: inline-flex; align-items: center; gap: 6px; vertical-align: top; height: 20px; }
.pc-gives.is-none { color: var(--pc-label-muted); }
.pc-attr { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.pc-attr.is-pos b { color: var(--pc-pos); }
.pc-attr.is-neg b { color: var(--pc-neg); }
.pc-attr-name { color: var(--pc-label); }

.pc-bgroup + .pc-bgroup { margin-top: 16px; }
.pc-bgroup-head {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 26px;
  margin-bottom: 10px;
  font-size: var(--fs-11);
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-08);
  text-transform: uppercase;
  color: var(--pc-label-muted);
  border-bottom: 1px solid var(--pc-board-line);
}

/* ── the card (building / good): a right-hand panel over a dimmed page ── */
.pc-scrim { position: fixed; inset: 0; z-index: var(--z-modal); background: color-mix(in srgb, var(--black) 45%, transparent); }
.pc-scrim.is-card { z-index: var(--z-modal-2); }
.pc-card {
  position: fixed;
  top: 12px;
  right: 12px;
  bottom: 12px;
  z-index: var(--z-modal-2);
  width: 560px;
  max-width: calc(100vw - 24px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 18px 50px color-mix(in srgb, var(--black) 55%, transparent);
}
.pc-card-head { flex: none; display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 12px; border-bottom: 1px solid var(--pc-board-line); }
.pc-card-btn {
  flex: none;
  height: 28px;
  padding: 0 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--pc-board-line);
  background: transparent;
  color: var(--pc-label);
  font: inherit;
  font-size: var(--fs-12);
  cursor: pointer;
}
.pc-card-btn:hover { border-color: var(--pc-link); }
.pc-card-btn.is-hidden { visibility: hidden; }
.pc-card-btn.is-x { width: 28px; padding: 0; }
.pc-card-crumb { flex: 1 1 auto; min-width: 0; text-align: right; font-size: var(--fs-12); color: var(--pc-label-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-card-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px 18px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--pc-label) 28%, transparent) transparent;
}
.pc-card-body .is-muted { color: var(--pc-label-muted); }
.pc-rule { flex: none; height: 1px; background: var(--pc-board-line); }

.pc-hero { flex: none; height: 124px; display: flex; align-items: flex-start; gap: 16px; }
.pc-hero-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pc-hero-name { height: 28px; line-height: 28px; font-size: var(--fs-20); font-weight: var(--fw-semi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-hero-alt { height: 16px; line-height: 16px; font-size: var(--fs-12); color: var(--pc-label-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-hero-makes { height: 30px; display: flex; align-items: center; gap: 6px; font-size: var(--fs-13); white-space: nowrap; overflow: hidden; }
.pc-hero-chips { height: 22px; display: flex; gap: 6px; overflow: hidden; }
.pc-chip {
  flex: none;
  height: 22px;
  line-height: 20px;
  box-sizing: border-box;
  padding: 0 9px;
  border-radius: var(--r-pill);
  border: 1px solid var(--pc-board-line);
  font-size: var(--fs-11);
  white-space: nowrap;
  color: var(--pc-label);
}
.pc-chip.is-dropped { border-color: var(--pc-neg); color: var(--pc-neg); }
.pc-chip.is-idea,
.pc-chip.is-icon,
.pc-chip.is-pictures { border-style: dashed; color: var(--pc-label-muted); }
.pc-chip.is-test { border-color: var(--pc-assumed); color: var(--pc-assumed); }

/* the stat rows: ALWAYS drawn, one fixed line each; a long value scrolls inside its own row */
.pc-stats { flex: none; display: flex; flex-direction: column; }
.pc-stat {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  align-items: center;
  height: 34px;
  border-bottom: 1px solid color-mix(in srgb, var(--pc-board-line) 45%, transparent);
}
.pc-stat-k { padding-right: 8px; font-size: var(--fs-10-5); font-weight: var(--fw-semi); letter-spacing: var(--track-08); text-transform: uppercase; color: var(--pc-label-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-stat-v {
  height: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  font-size: var(--fs-13);
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--pc-label) 24%, transparent) transparent;
}
.pc-stat.is-muted .pc-stat-v { font-size: var(--fs-12); color: var(--pc-label-muted); }
.pc-val { flex: none; display: inline-flex; align-items: center; gap: 5px; }
.pc-val.is-neg b { color: var(--pc-neg); }
.pc-dot { flex: none; color: var(--pc-label-muted); }
.pc-none { flex: none; display: inline-flex; align-items: baseline; gap: 8px; color: var(--pc-label); }
.pc-none em { font-style: normal; font-size: var(--fs-11); color: var(--pc-label-muted); }
.pc-tier-mark {
  flex: none;
  min-width: 18px;
  height: 18px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-round);
  border: 1px solid var(--pc-board-line);
  font-family: var(--font-display);
  font-size: var(--fs-11);
}
.pc-good {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  box-sizing: border-box;
  padding: 0 9px 0 4px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  background: color-mix(in srgb, var(--pc-tile) 75%, transparent);
  color: var(--pc-label);
  font: inherit;
  font-size: var(--fs-12-5);
  white-space: nowrap;
  cursor: pointer;
}
button.pc-good:hover { border-color: var(--pc-link); }
.pc-good.is-static { cursor: default; }
.pc-rate { font-family: var(--font-mono); font-size: var(--fs-11); color: var(--pc-label-muted); }
.pc-approx { font-style: normal; color: var(--pc-assumed); margin-right: 2px; }
.pc-gapnote { flex: none; height: 16px; line-height: 16px; font-size: var(--fs-11-5); font-style: italic; color: var(--pc-label-muted); }

/* the chain: a fixed box that scrolls both ways; tiles over one SVG layer of elbow lines */
.pc-sec-head { flex: none; height: 22px; display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.pc-sec-title { flex: none; font-size: var(--fs-11); font-weight: var(--fw-semi); letter-spacing: var(--track-08); text-transform: uppercase; color: var(--pc-label-muted); }
.pc-sec-sub { min-width: 0; font-size: var(--fs-13); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-chain-box {
  flex: none;
  height: 432px;
  overflow: auto;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--pc-tile) 45%, transparent);
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--pc-label) 28%, transparent) transparent;
}
.pc-chain-none { height: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: center; padding: 20px; text-align: center; font-size: var(--fs-13); color: var(--pc-label-muted); }
.pc-chain { position: relative; flex: none; margin: 0 auto; }
.pc-chain-links { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.pc-chain-links path { fill: none; stroke: var(--pc-link); stroke-width: 1px; vector-effect: non-scaling-stroke; shape-rendering: crispEdges; }
.pc-node { position: absolute; display: flex; justify-content: center; }
.pc-node > .pc-tile { width: 100%; }
.pc-rnode {
  position: absolute;
  width: 300px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.pc-rnode-pic { flex: none; width: 44px; height: 44px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border-radius: var(--r-card); background: var(--pc-tile); overflow: hidden; }
.pc-rnode-pic img { width: 86%; height: 86%; object-fit: contain; }
.pc-rnode.is-unknown .pc-rnode-pic { border: 1px dashed var(--pc-unknown); }
.pc-rnode.is-selected .pc-rnode-pic { box-shadow: 0 0 0 2px var(--pc-select); }
.pc-rnode-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pc-rnode-name { font-size: var(--fs-12); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-rnode-name em { color: var(--pc-label-muted); }
.pc-rnode-val { font-family: var(--font-mono); font-size: var(--fs-10-5); color: var(--pc-label-muted); }

.pc-totals { flex: none; display: flex; flex-direction: column; gap: 2px; }
.pc-line {
  height: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-12);
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--pc-label) 24%, transparent) transparent;
}
.pc-line b { flex: none; font-weight: var(--fw-semi); }
.pc-line.is-missing > span:last-child { color: var(--pc-label-muted); }
.pc-derived {
  flex: none;
  height: 16px;
  line-height: 14px;
  box-sizing: border-box;
  padding: 0 6px;
  border-radius: var(--r-pill);
  border: 1px solid var(--pc-assumed);
  font-size: var(--fs-9-5);
  letter-spacing: var(--track-06);
  text-transform: uppercase;
  color: var(--pc-assumed);
}
.pc-feeds { flex: none; height: 30px; display: flex; align-items: center; gap: 8px; overflow-x: auto; overflow-y: hidden; white-space: nowrap; font-size: var(--fs-12); scrollbar-width: thin; }
.pc-feeds b { flex: none; font-size: var(--fs-11); font-weight: var(--fw-semi); letter-spacing: var(--track-08); text-transform: uppercase; color: var(--pc-label-muted); }
.pc-link {
  flex: none;
  height: 24px;
  box-sizing: border-box;
  padding: 0 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--pc-board-line);
  background: transparent;
  color: var(--pc-label);
  font: inherit;
  font-size: var(--fs-12);
  white-space: nowrap;
  cursor: pointer;
}
.pc-link:hover { border-color: var(--pc-select); }

.pc-foot { flex: none; height: 164px; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 14px; }
.pc-concept {
  position: relative;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--pc-tile);
  font-size: var(--fs-12);
  color: var(--pc-label-muted);
}
.pc-concept img { width: 100%; height: 100%; object-fit: contain; }
.pc-concept-tag {
  position: absolute;
  left: 6px;
  top: 6px;
  height: 16px;
  line-height: 16px;
  padding: 0 6px;
  border-radius: var(--r-pill);
  font-size: var(--fs-9-5);
  text-transform: uppercase;
  background: color-mix(in srgb, var(--black) 72%, transparent);
  color: var(--pc-assumed);
}
.pc-foot-text { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 3px; overflow-y: auto; font-size: var(--fs-12-5); line-height: 1.45; scrollbar-width: thin; }
.pc-foot-text.is-wide { flex: none; height: 120px; }
.pc-foot-k { flex: none; font-size: var(--fs-10-5); font-weight: var(--fw-semi); letter-spacing: var(--track-08); text-transform: uppercase; color: var(--pc-label-muted); }
.pc-foot-k:not(:first-child) { margin-top: 6px; }
.pc-foot-v.is-muted { color: var(--pc-label-muted); }
.pc-footnote { flex: none; min-height: 34px; font-size: var(--fs-11); line-height: 1.5; color: var(--pc-label-muted); }

/* the good card's sections */
.pc-gsec { flex: none; display: flex; flex-direction: column; gap: 6px; }
.pc-gsec-k { height: 16px; line-height: 16px; font-size: var(--fs-10-5); font-weight: var(--fw-semi); letter-spacing: var(--track-08); text-transform: uppercase; color: var(--pc-label-muted); }
.pc-gsec-tiles {
  height: 128px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--pc-label) 28%, transparent) transparent;
}
.pc-gsec-tiles > .pc-none,
.pc-gsec-tiles > .pc-val { align-self: center; }
.pc-builds { height: 92px; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; overflow-y: auto; scrollbar-width: thin; }

/* ── "Show every chain": Hugo's expanded tier board over the page ── */
.pc-every {
  position: fixed;
  inset: 24px;
  z-index: var(--z-modal);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 18px 50px color-mix(in srgb, var(--black) 55%, transparent);
}
.pc-every-scroll {
  flex: 1 1 auto;
  min-height: 0;
  padding: 18px;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--pc-label) 28%, transparent) transparent;
}
.pc-every-board { width: max-content; min-height: 100%; display: flex; align-items: flex-end; gap: 18px; }
.pc-every-col { flex: none; display: flex; flex-direction: column; align-items: center; }
.pc-every-chain { border: 1px solid var(--pc-board-line); border-radius: var(--r-panel); background: color-mix(in srgb, var(--pc-tile) 35%, transparent); }
.pc-every-stem { flex: none; width: 1px; height: 16px; background: var(--pc-link); }

/* ── the phone (inside the phone shell): smaller tiles, a full-screen card, no expanded board ── */
body[data-ui-tier="s"] .pc-portrait { flex-direction: row; align-items: center; justify-content: flex-start; width: auto; height: 48px; gap: 10px; }
body[data-ui-tier="s"] .pc-head-note { display: none; }
body[data-ui-tier="s"] .pc-portrait-pic { width: 48px; height: 48px; border-radius: var(--r-round); overflow: hidden; background: var(--pc-tile); }
body[data-ui-tier="s"] .pc-portrait-pic img { object-position: center top; }
body[data-ui-tier="s"] .pc-numeral { right: 2px; bottom: 0; font-size: var(--fs-16); }
body[data-ui-tier="s"] .pc-portrait-cap { text-align: left; }
body[data-ui-tier="s"] .pc-tile { --pc-ts: 72px; --pc-tw: 100px; }
body[data-ui-tier="s"] .pc-tile.is-sm { --pc-ts: 56px; --pc-tw: 96px; }
body[data-ui-tier="s"] .pc-tile.is-lg { --pc-ts: 88px; --pc-tw: 88px; }
body[data-ui-tier="s"] .pc-card { inset: 0; width: auto; max-width: none; border-radius: 0; border: 0; }
body[data-ui-tier="s"] .pc-hero { height: 112px; gap: 12px; }
body[data-ui-tier="s"] .pc-stat { grid-template-columns: 112px minmax(0, 1fr); }
body[data-ui-tier="s"] .pc-chain-box { height: 360px; }
body[data-ui-tier="s"] .pc-foot { grid-template-columns: 140px minmax(0, 1fr); height: 140px; }

/* ── 26 Oct 2026 — TIDIED INTO ROWS (Hugo: "In Figma, I've got one row, and then I can click on each row and see the
   product chain ... I want to be able to see the information only when I click on it"). One row per tier (the
   resident, then every need as a small tile: building + good, no values) and one row for the chains no tier needs;
   the picked chain is drawn in the panel below; "All buildings" = one quiet line per building. FIXED LAYOUT
   (invariant #20): every row is 128 px, the chain panel fills the rest and scrolls inside itself, a pick moves nothing. */
.pc-rows { flex: none; display: flex; flex-direction: column; padding: 4px 16px 4px 12px; }
.pc-trow {
  flex: none;
  height: 128px;
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--pc-board-line) 55%, transparent);
}
.pc-trow:last-child { border-bottom: 0; }
.pc-trow-who { flex: none; width: 236px; height: 116px; display: flex; align-items: flex-end; gap: 10px; min-width: 0; }
.pc-trow-pic { position: relative; flex: none; width: 84px; height: 116px; }
.pc-trow-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.pc-trow-pic.is-glyph {
  align-self: center;
  width: 64px;
  height: 64px;
  margin: 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-card);
  background: var(--pc-tile);
  color: var(--pc-label-muted);
}
.pc-trow-text { min-width: 0; display: flex; flex-direction: column; padding-bottom: 6px; }
.pc-trow-num { height: 28px; line-height: 28px; font-family: var(--font-display); font-size: var(--fs-24); color: var(--pc-label); }
.pc-trow-name { height: 20px; line-height: 20px; font-size: var(--fs-14); font-weight: var(--fw-semi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-trow-sub { height: 16px; line-height: 16px; font-size: var(--fs-11-5); color: var(--pc-label-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-trow-tiles {
  flex: 1 1 auto;
  min-width: 0;
  height: 116px;
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--pc-label) 28%, transparent) transparent;
}
.pc-trow-none { font-size: var(--fs-12); color: var(--pc-label-muted); }
.pc-trow-every { flex: none; width: 104px; }
.pc-trow-every.is-hidden { visibility: hidden; }

/* the picked chain: one head line, the chain drawn like the game, its totals */
.pc-detail { flex: 1 1 0; min-height: 440px; display: flex; flex-direction: column; overflow: hidden; }
.pc-detail.is-empty { align-items: center; justify-content: center; }
.pc-detail-head {
  flex: none;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 0 16px 0 12px;
  border-bottom: 1px solid var(--pc-board-line);
}
.pc-detail-pic { flex: none; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: var(--r-card); background: var(--pc-tile); }
.pc-detail-pic img { width: 88%; height: 88%; object-fit: contain; }
.pc-detail-text { flex: 0 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pc-detail-name { height: 24px; line-height: 24px; display: flex; align-items: center; gap: 8px; font-size: var(--fs-17); font-weight: var(--fw-semi); white-space: nowrap; overflow: hidden; }
.pc-detail-sub { height: 16px; line-height: 16px; font-size: var(--fs-12); color: var(--pc-label-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-detail-gives {
  flex: 1 1 auto;
  min-width: 0;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  overflow: hidden;
  white-space: nowrap;
  font-size: var(--fs-12-5);
}
.pc-detail-gives b { flex: none; font-size: var(--fs-10-5); font-weight: var(--fw-semi); letter-spacing: var(--track-08); text-transform: uppercase; color: var(--pc-label-muted); }
.pc-detail-gives .is-muted { color: var(--pc-label-muted); }
.pc-detail-chain {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  padding: 18px;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--pc-label) 28%, transparent) transparent;
}
/* margin: auto centres the drawing while it fits and falls back to the start edge when it is bigger (it scrolls) */
.pc-detail-chain > .pc-chain { margin: auto; }
.pc-detail-chain > .pc-chain-none { height: auto; margin: auto; }
.pc-detail-foot { flex: none; height: 64px; box-sizing: border-box; padding: 6px 16px; border-top: 1px solid var(--pc-board-line); }

/* "All buildings": one quiet line per building */
.pc-blist {
  flex: 1 1 0;
  min-height: 440px;
  padding: 12px 16px 16px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--pc-label) 28%, transparent) transparent;
}
.pc-blines { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 6px 10px; }
.pc-bline {
  height: 52px;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0 10px 0 4px;
  box-sizing: border-box;
  border: 1px solid transparent;
  border-radius: var(--r-card);
  background: color-mix(in srgb, var(--pc-tile) 45%, transparent);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.pc-bline:hover { border-color: var(--pc-link); }
.pc-bline:focus-visible { outline: none; border-color: var(--pc-select); }
.pc-bline-pic { flex: none; width: 44px; height: 44px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: var(--r-md); background: var(--pc-tile); }
.pc-bline-pic.is-none { border: 1px dashed var(--pc-unknown); }
.pc-bline-pic img { width: 88%; height: 88%; object-fit: contain; }
.pc-bline-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pc-bline-name { height: 18px; line-height: 18px; font-size: var(--fs-12-5); color: var(--pc-label); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-bline-sub { height: 16px; line-height: 16px; font-size: var(--fs-11-5); font-style: italic; color: var(--pc-label-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-bline-tier { flex: none; width: 28px; text-align: center; font-family: var(--font-display); font-size: var(--fs-14); color: var(--pc-label-muted); }
.pc-bline-chip {
  flex: none;
  width: 64px;
  height: 18px;
  line-height: 16px;
  box-sizing: border-box;
  border-radius: var(--r-pill);
  border: 1px solid var(--pc-board-line);
  font-size: var(--fs-9-5);
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-06);
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--pc-label-muted);
}
.pc-bline-chip.is-none { visibility: hidden; }
.pc-bline-chip.is-dropped { border-color: var(--pc-neg); color: var(--pc-neg); }
.pc-bline-chip.is-test { border-color: var(--pc-assumed); color: var(--pc-assumed); }
.pc-bline.is-dim .pc-bline-pic img { opacity: 0.42; }
.pc-bline.is-dim .pc-bline-name { opacity: 0.7; }

/* the phone: a row = the resident on one line, the need tiles under it (fixed 176 px); the chain is a rail */
body[data-ui-tier="s"] .pc-rows { padding: 2px 10px; }
body[data-ui-tier="s"] .pc-trow { height: 176px; flex-direction: column; align-items: stretch; gap: 6px; padding: 8px 0; box-sizing: border-box; }
body[data-ui-tier="s"] .pc-trow-who { width: auto; height: 48px; align-items: center; }
body[data-ui-tier="s"] .pc-trow-pic { width: 48px; height: 48px; overflow: hidden; border-radius: var(--r-round); background: var(--pc-tile); }
body[data-ui-tier="s"] .pc-trow-pic img { object-position: center top; }
body[data-ui-tier="s"] .pc-trow-pic.is-glyph { margin: 0; }
body[data-ui-tier="s"] .pc-trow-text { flex-direction: row; align-items: baseline; gap: 8px; padding-bottom: 0; }
body[data-ui-tier="s"] .pc-trow-num { height: 22px; line-height: 22px; font-size: var(--fs-17); }
body[data-ui-tier="s"] .pc-trow-tiles { flex: none; height: 104px; }
body[data-ui-tier="s"] .pc-trow-every { display: none; }
body[data-ui-tier="s"] .pc-detail-head { height: 92px; flex-wrap: wrap; align-content: center; row-gap: 4px; }
body[data-ui-tier="s"] .pc-detail-gives { order: 3; flex: 1 1 100%; height: 22px; justify-content: flex-start; }
body[data-ui-tier="s"] .pc-detail-chain { padding: 10px; }
body[data-ui-tier="s"] .pc-blist { padding: 10px; }
body[data-ui-tier="s"] .pc-blines { grid-template-columns: minmax(0, 1fr); }