/* FOOM sim tabs — Lab, Build, Train, Research, Serve, Biz, Arena, World (src/ui/tabs/*.js).
   Moved out of the JS-injected sheet so it shares the theme's panel recipe (css/theme.css) and the same tokens.
   Type scale: 32 huge numbers · 24 hero numbers · 16 titles & prose · 12 small caps for labels, meta and values. */

/* ---------- info panels (.gt-card shares the .card panel recipe in theme.css) ---------- */
.gt-card { margin: var(--px) var(--px) var(--sp-3); padding: 10px 12px; }
.gt-card--hi     { --pn-edge: var(--gold-1); --pn-hi: var(--gold); --pn-hi-h: 4px; --pn-bg: color-mix(in srgb, var(--gold-0) 14%, var(--surface)); padding-top: 14px; }
.gt-card--cyan   { --pn-edge: var(--teal); --pn-hi: var(--cyan); --pn-hi-h: 4px; --pn-bg: color-mix(in srgb, var(--teal-0) 40%, var(--surface)); padding-top: 14px; }
.gt-card--violet { --pn-edge: var(--violet-1); --pn-hi: var(--violet); --pn-hi-h: 4px; --pn-bg: color-mix(in srgb, var(--space) 70%, var(--surface)); padding-top: 14px; }
.gt-card--red    { --pn-edge: var(--wine); --pn-hi: var(--hot); --pn-hi-h: 4px; --pn-bg: color-mix(in srgb, var(--ember) 45%, var(--surface)); padding-top: 14px; }
.gt-card.is-clickable { cursor: pointer; }
.gt-card.is-clickable:active { translate: 0 var(--px); }
.gt-card.gt-in { animation: gtIn .4s steps(6); }
@keyframes gtIn { from { opacity: 0; translate: 0 -12px; } }
/* Dim state artwork, not the copy players still need to read. */
.gt-locked .card__icon { filter: grayscale(1) brightness(.7); }
.gt-hide { display: none !important; }
.gt-modelcard.card--hi { --pn-edge: var(--gold-1); }

.gt-row { display: flex; align-items: center; gap: var(--sp-2); }
.gt-row--wrap, .gt-wrap { flex-wrap: wrap; }
.gt-row + .gt-row, .gt-row + .gt-kv, .gt-kv + .gt-row, .gt-small + .gt-small { margin-top: var(--sp-2); }
.gt-grow { flex: 1 1 auto; min-width: 0; }
.gt-small { font-family: var(--font-small); font-size: var(--fs-small); line-height: calc(14px * var(--text-scale, 1)); color: var(--muted); text-transform: uppercase; text-wrap: balance; }
.gt-big { font-size: var(--fs-big); color: var(--text-hi); line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; text-shadow: var(--px) var(--px) 0 var(--ink); }
.gt-huge { font-size: var(--fs-huge); color: var(--gold); line-height: 1; white-space: nowrap; text-shadow: calc(2 * var(--px)) calc(2 * var(--px)) 0 var(--gold-0); }
.gt-big + .gt-small, .gt-huge + .gt-small { margin-top: var(--sp-2); }
.gt-h { color: var(--text-hi); line-height: 20px; }
.gt-gold { color: var(--gold); } .gt-cyan { color: var(--cyan); } .gt-green { color: var(--phos); } .gt-red { color: var(--hot); } .gt-violet { color: var(--lav); } .gt-dim { color: var(--dim); }
.gt-tabhint { color: var(--dim); text-align: center; margin: var(--sp-4) 0; font-family: var(--font-small); font-size: var(--fs-small); line-height: 18px; text-transform: uppercase; }
.gt-new { color: var(--ink); background: var(--gold); font-family: var(--font-small); font-size: var(--fs-small); padding: 0 4px; margin-left: 4px; }

/* empty states: a list that has nothing yet says so (data-empty on the container), in a dashed pixel well */
.gt-list:empty { display: block; margin: var(--sp-1) var(--px) var(--sp-3); padding: var(--sp-3) var(--sp-3); text-align: center; color: var(--dim);
  font-family: var(--font-small); font-size: var(--fs-small); line-height: 16px; text-transform: uppercase;
  background: var(--well-dash); }
.gt-list:empty::before { content: attr(data-empty); }
/* museum / inventory empty lines use the same dashed well (only when they have text) */
.museum-empty:not(:empty) { margin: var(--sp-1) var(--px) var(--sp-3); padding: var(--sp-3); line-height: 16px; background: var(--well-dash); }
.museum-empty:empty { display: none; }
.gt-list:empty:not([data-empty]) { display: none; }

/* ---------- stat sheet: label ...... value ---------- */
/* two columns when they fit (>= 156px each), one column on narrow phones */
.gt-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 156px), 1fr)); gap: 0 var(--sp-3); }
.gt-kv > div { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; min-width: 0; padding: 3px 0; min-height: 22px;
  font-family: var(--font-small); font-size: var(--fs-small); line-height: 16px; text-transform: uppercase; color: var(--dim); white-space: normal; flex-wrap: wrap; row-gap: 0;
  box-shadow: inset 0 calc(-1 * var(--px)) 0 0 var(--n2); }
/* A VALUE never wraps inside itself ("$16.0K", "29 of 65"): it is nowrap, and when label + value do not fit on one line the
   value drops to its own line, right-aligned (the label keeps its single line, or wraps at its spaces if it alone is too wide). */
.gt-kv > div > b { flex: none; max-width: 100%; margin-left: auto; color: var(--text-hi); text-align: right; font-weight: normal; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* A prose value ("Shared with active pretraining runs") may be wider than a phone column: it wraps instead of clipping. */
.gt-kv > div > b.gt-wrap { flex: 0 1 auto; white-space: normal; }
.gt-kv > div > b.gt-green { color: var(--phos); } .gt-kv > div > b.gt-red { color: var(--hot); }
.gt-kv + div, .gt-kv + .gt-label { margin-top: var(--sp-3); }
.gt-kv--one { grid-template-columns: 1fr; }
.gt-row + .gt-kv--one, .gt-small + .gt-kv--one, .gt-big + .gt-kv--one { margin-top: var(--sp-3); }
.gt-kv--one > div:nth-last-child(-n+2):nth-child(odd) { box-shadow: inset 0 calc(-1 * var(--px)) 0 0 var(--n2); }
.gt-kv--one > div:last-child { box-shadow: none; }
.gt-kv--one:empty { display: none; }

/* labelled control: LABEL ........ value, then the control under it */
.gt-label { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px var(--sp-2); margin: var(--sp-3) 2px 4px; min-height: calc(14px * var(--text-scale, 1));
  font-family: var(--font-small); font-size: var(--fs-small); line-height: calc(14px * var(--text-scale, 1)); color: var(--muted); text-transform: uppercase; }
.gt-label:first-child { margin-top: 0; }
.gt-label b { color: var(--text-hi); font-weight: normal; text-align: right; margin-left: auto; font-variant-numeric: tabular-nums; }
.gt-range { width: 100%; margin: 2px 0 var(--sp-1); }

/* ---------- Lab: objective ---------- */
.gt-obj__title { color: var(--gold); margin-bottom: var(--sp-2); text-shadow: var(--px) var(--px) 0 var(--gold-0); line-height: 20px; }
.gt-obj__item { display: flex; flex-wrap: wrap; gap: 0 var(--sp-2); align-items: center; padding: 3px 0; font-family: var(--font-small); font-size: var(--fs-small); line-height: 16px; color: var(--muted); text-transform: uppercase; }
.gt-obj__item > .gt-grow { flex: 1 1 auto; }
.gt-obj__item > span:last-child { flex: none; margin-left: auto; font-variant-numeric: tabular-nums; color: var(--text-lo); }
/* the value that cannot share the goal's line drops under it, still right-aligned */
.gt-obj__item.is-done { color: var(--phos); }
.gt-obj__item.is-done > span:last-child { color: var(--phos); }
.gt-obj__box { position: relative; flex: none; width: 12px; height: 12px; background: var(--ink); box-shadow: inset 0 0 0 var(--px) currentColor; }
.gt-obj__item.is-done .gt-obj__box { background: var(--green); box-shadow: inset 0 0 0 var(--px) var(--phos); }
.gt-obj__item.is-done .gt-obj__box::after { content: ''; position: absolute; left: 3px; top: 5px; width: var(--px); height: var(--px); background: var(--ink);
  box-shadow: var(--px) var(--px) 0 var(--ink), calc(2 * var(--px)) 0 0 var(--ink), calc(3 * var(--px)) calc(-1 * var(--px)) 0 var(--ink); }
.gt-obj__title + div + .bar, .gt-card--hi > .bar { margin-top: var(--sp-3); }

/* ---------- Lab: the Mechanical Turk terminal ---------- */
.gt-chat { position: relative; background: var(--crt-0); padding: var(--sp-3); margin: var(--px) var(--px) var(--sp-3); min-height: 132px;
  background-image: repeating-linear-gradient(180deg, transparent 0 3px, rgba(0, 0, 0, .22) 3px 4px);
  box-shadow: inset 0 var(--px) 0 0 #000, 0 calc(-1 * var(--px)) 0 0 var(--crt-1), 0 var(--px) 0 0 var(--crt-1), calc(-1 * var(--px)) 0 0 0 var(--crt-1), var(--px) 0 0 0 var(--crt-1), 0 calc(2 * var(--px)) 0 0 var(--ink); }
.gt-chat__who { font-family: var(--font-small); font-size: var(--fs-small); line-height: calc(14px * var(--text-scale, 1)); color: var(--sky); text-transform: uppercase; }
.gt-chat__who::before { content: '>'; margin-right: 6px; color: var(--phos); }
.gt-chat__q { color: var(--text-hi); margin: var(--sp-1) 0 var(--sp-3); line-height: calc(20px * var(--text-scale, 1)); }
.gt-chat__a { color: var(--phos); min-height: calc(40px * var(--text-scale, 1)); word-break: break-word; line-height: calc(20px * var(--text-scale, 1)); text-shadow: 0 0 6px rgba(79, 226, 127, .35); }
.gt-chat__a .gt-ghost { color: var(--crt-1); text-shadow: none; }
.gt-chat__a .gt-cursor { display: inline-block; width: 8px; height: 14px; background: var(--phos); vertical-align: -2px; animation: gtBlink 1s steps(1) infinite; }
.gt-chat__react { color: var(--amber); margin-top: var(--sp-2); min-height: calc(20px * var(--text-scale, 1)); line-height: calc(20px * var(--text-scale, 1)); }
@keyframes gtBlink { 50% { opacity: 0; } }
/* owner directive: the TYPE button below must never move while tapping, so every row of the terminal has a fixed
   height — prompt clamps at 3 lines, the answer is a 3-line window that follows the cursor (lab.js), the reaction is
   one reserved line. 95% of requests fit without clamping at 360 px. */
/* Compact terminal prose keeps its 20px leading (scaled with --text-scale so glyph ink never clips inside the
   fixed-height windows) and its fixed footprint, so the TYPE button never moves while tapping. */
.gt-chat { box-sizing: border-box; min-height: 0; height: calc(2 * var(--sp-3) + var(--sp-1) + var(--sp-3) + var(--sp-2) + (14px + 60px + 60px + 20px) * var(--text-scale, 1)); overflow: hidden; }
.gt-chat__who { height: calc(14px * var(--text-scale, 1)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gt-chat__q { max-height: calc(60px * var(--text-scale, 1)); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.gt-chat__a { max-height: calc(60px * var(--text-scale, 1)); min-height: 0; overflow: hidden; }
.gt-chat__react { height: calc(20px * var(--text-scale, 1)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* the big tap-verb button: centred, chunky */
.gt-tapbtn { width: calc(100% - 2 * var(--px)); min-height: 76px; justify-content: center; text-align: center; }
.gt-tapbtn .btn__body { justify-items: center; text-align: center; gap: var(--sp-2); }
.gt-tapbtn .btn__label { font-size: var(--fs-big); letter-spacing: 1px; line-height: 1.125; text-shadow: 0 calc(2 * var(--px)) 0 rgba(255, 255, 255, .22); }
.gt-tapbtn--tap .btn__label { font-size: var(--fs-huge); letter-spacing: 2px; line-height: 1.125; }
.gt-tapbtn--tap { min-height: 88px; }
.gt-tapbtn .btn__sub { white-space: normal; text-align: center; line-height: calc(14px * var(--text-scale, 1)); }
.gt-meter { display: flex; justify-content: space-between; gap: var(--sp-2); margin: 0 var(--sp-1) var(--sp-3); font-family: var(--font-small); font-size: var(--fs-small); line-height: calc(14px * var(--text-scale, 1)); color: var(--muted); text-transform: uppercase; }
.gt-meter span:last-child { color: var(--amber); text-align: right; }

/* Jules talking */
.gt-dialog { display: flex; gap: var(--sp-3); align-items: flex-start; }
.gt-dialog > .px-icon, .gt-dialog > canvas, .gt-dialog > img { background: var(--ink); box-shadow: 0 0 0 var(--px) var(--n4), 0 0 0 calc(2 * var(--px)) var(--ink); margin: 2px; }
.gt-dialog__who { color: var(--gold); font-family: var(--font-small); font-size: var(--fs-small); line-height: calc(14px * var(--text-scale, 1)); text-transform: uppercase; margin-bottom: 4px; }
.gt-dialog__text { color: var(--text-hi); margin: 0 0 var(--sp-3); line-height: var(--lh-prose); }
.gt-dialog + .btn { margin-top: var(--sp-1); }

/* ---------- Train: loss chart ---------- */
.gt-chartwrap { position: relative; margin: var(--px) var(--px) var(--sp-3); padding: 20px 0; background: var(--n1);
  box-shadow: 0 calc(-1 * var(--px)) 0 0 var(--edge), 0 var(--px) 0 0 var(--edge), calc(-1 * var(--px)) 0 0 0 var(--edge), var(--px) 0 0 0 var(--edge), 0 calc(2 * var(--px)) 0 0 var(--ink); }
.gt-chart { display: block; width: 100%; image-rendering: pixelated; background: var(--ink); box-shadow: 0 calc(-1 * var(--px)) 0 0 var(--n3), 0 var(--px) 0 0 var(--n3); }
.gt-chartwrap .gt-chart__label { position: absolute; font-family: var(--font-small); font-size: var(--fs-small); line-height: 12px; color: var(--n7); pointer-events: none; text-transform: uppercase;
  text-shadow: var(--px) var(--px) 0 var(--ink), calc(-1 * var(--px)) 0 0 var(--ink), 0 calc(-1 * var(--px)) 0 var(--ink); font-variant-numeric: tabular-nums; }

.gt-chartwrap .gt-chart__tag { left: 6px; padding: 0 2px; background: color-mix(in srgb, var(--ink) 80%, transparent); text-shadow: none; line-height: 12px; }
.gt-chartwrap .gt-chart__mid { left: 50%; top: 50%; transform: translate(-50%, -50%); color: var(--dim); letter-spacing: 1px; padding: 4px 8px; background: var(--ink); }
.gt-chartwrap .gt-chart__mid:empty { display: none; }

/* ---------- Serve: pills, the Vibes meter ---------- */
.gt-pills { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin: var(--sp-2) 0; }
.gt-pill { padding: 4px 8px; font-family: var(--font-small); font-size: var(--fs-small); line-height: 1; text-transform: uppercase; background: var(--n2); color: var(--text);
  box-shadow: 0 calc(-1 * var(--px)) 0 0 var(--edge), 0 var(--px) 0 0 var(--edge), calc(-1 * var(--px)) 0 0 0 var(--edge), var(--px) 0 0 0 var(--edge), inset 0 var(--px) 0 0 var(--n3); }
.gt-pill--gold  { background: var(--gold-0); color: var(--gold-hi); box-shadow: 0 calc(-1 * var(--px)) 0 0 var(--gold-1), 0 var(--px) 0 0 var(--gold-1), calc(-1 * var(--px)) 0 0 0 var(--gold-1), var(--px) 0 0 0 var(--gold-1), inset 0 var(--px) 0 0 var(--gold-1); }
.gt-pill--red   { background: var(--ember); color: var(--hot); box-shadow: 0 calc(-1 * var(--px)) 0 0 var(--wine), 0 var(--px) 0 0 var(--wine), calc(-1 * var(--px)) 0 0 0 var(--wine), var(--px) 0 0 0 var(--wine), inset 0 var(--px) 0 0 var(--wine); }
.gt-pill--green { background: var(--crt-0); color: var(--phos); box-shadow: 0 calc(-1 * var(--px)) 0 0 var(--crt-1), 0 var(--px) 0 0 var(--crt-1), calc(-1 * var(--px)) 0 0 0 var(--crt-1), var(--px) 0 0 0 var(--crt-1), inset 0 var(--px) 0 0 var(--crt-1); }
.gt-pill--cyan  { background: var(--teal-0); color: var(--cyan); box-shadow: 0 calc(-1 * var(--px)) 0 0 var(--teal), 0 var(--px) 0 0 var(--teal), calc(-1 * var(--px)) 0 0 0 var(--teal), var(--px) 0 0 0 var(--teal), inset 0 var(--px) 0 0 var(--teal); }

/* vibes: a pixel-segmented gauge with hard colour zones and labelled thresholds */
.gt-vibes { container-type: inline-size; position: relative; height: 16px; margin: var(--sp-2) var(--px) 22px; background: var(--ink);
  box-shadow: inset 0 var(--px) 0 0 #000, 0 calc(-1 * var(--px)) 0 0 var(--edge), 0 var(--px) 0 0 var(--edge), calc(-1 * var(--px)) 0 0 0 var(--edge), var(--px) 0 0 0 var(--edge); }
.gt-vibes::before { content: ''; position: absolute; inset: 0; opacity: .22;
  background: linear-gradient(90deg, var(--phos) 0 25%, var(--amber) 25% 50%, var(--orange) 50% 80%, var(--hot) 80% 100%);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 6px, transparent 6px 8px); mask: repeating-linear-gradient(90deg, #000 0 6px, transparent 6px 8px); }
.gt-vibes > i { position: absolute; left: 0; top: 0; bottom: 0; transition: width .2s steps(4);
  background: linear-gradient(90deg, var(--phos) 0 25%, var(--amber) 25% 50%, var(--orange) 50% 80%, var(--hot) 80% 100%) left / 100cqw 100% no-repeat;
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 6px, transparent 6px 8px); mask: repeating-linear-gradient(90deg, #000 0 6px, transparent 6px 8px); }
.gt-vibes > s { position: absolute; top: -4px; bottom: -6px; width: var(--px); background: var(--n7); text-decoration: none; }
.gt-vibes > s::after { position: absolute; top: 100%; left: 0; transform: translateX(-50%); margin-top: 2px; white-space: nowrap;
  font-family: var(--font-small); font-size: var(--fs-small); line-height: 12px; color: var(--dim); }
.gt-vibes > s:nth-of-type(1)::after { content: 'THREADS'; }
.gt-vibes > s:nth-of-type(2)::after { content: 'CHECK'; }
.gt-vibes > s:nth-of-type(3)::after { content: 'NERFGATE'; }

/* ---------- tables (Arena) ---------- */
.gt-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-family: var(--font-small); font-size: var(--fs-small); line-height: calc(14px * var(--text-scale, 1)); text-transform: uppercase; font-variant-numeric: tabular-nums; }
.gt-table td { padding: 6px 4px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: clamp(96px, 32vw, 260px); }
.gt-table + .gt-small { margin-top: var(--sp-2); }
.gt-table td:first-child { width: calc(3 * var(--fs-small)); padding-left: 6px; color: var(--dim); }
.gt-table tr { box-shadow: inset 0 calc(-1 * var(--px)) 0 0 var(--n2); }
.gt-table tr:first-child td:first-child { color: var(--gold); }
.gt-table tr.is-you td { color: var(--gold-hi); background: var(--gold-0); }
.gt-table tr.is-you td:first-child { color: var(--gold); box-shadow: inset var(--px) 0 0 0 var(--gold); }
.gt-table td.num { width: calc(4 * var(--fs-small) + 12px); text-align: right; padding-right: 6px; color: var(--text-hi); }
.gt-swatch { display: inline-block; width: 8px; height: 8px; margin-right: 6px; vertical-align: 0; box-shadow: 0 0 0 var(--px) var(--ink); }

/* ---------- misc controls ---------- */
.gt-seg:empty { display: none; }
.gt-seg[data-empty]:empty { display: block; padding: var(--sp-3); text-align: center; background: transparent; box-shadow: none; color: var(--dim);
  font-family: var(--font-small); font-size: var(--fs-small); line-height: 16px; text-transform: uppercase; }
.gt-seg[data-empty]:empty::before { content: attr(data-empty); }
.gt-input { width: 100%; padding: 8px 10px; background: var(--ink); color: var(--text-hi); border: 0; font-family: var(--font); font-size: var(--fs);
  box-shadow: inset 0 var(--px) 0 0 #000, 0 0 0 var(--px) var(--edge-hi); }
.gt-input:focus { outline: none; box-shadow: inset 0 var(--px) 0 0 #000, 0 0 0 var(--px) var(--gold); }
.gt-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 var(--sp-3); }
.gt-chips button { padding: 6px 10px; background: var(--n2); color: var(--sky); font-family: var(--font-small); font-size: var(--fs-small); line-height: 1; text-transform: uppercase;
  box-shadow: inset 0 var(--px) 0 0 var(--n3), 0 var(--px) 0 0 var(--ink); }
.gt-chips button:active { translate: 0 var(--px); }

/* ---------- World ---------- */
.gt-card .gt-card { margin: 0; }
.gt-row.gt-wrap > .gt-cell { flex: 1 1 calc(50% - var(--sp-2)); min-width: 0; padding: var(--sp-2) 10px 10px; --pn-bg: var(--ink); }
.gt-cell .gt-huge { white-space: normal; overflow-wrap: anywhere; }
.gt-cell .gt-huge { font-size: var(--fs-big); margin-top: 6px; text-shadow: var(--px) var(--px) 0 var(--gold-0); }
.gt-cell .gt-small + .gt-huge + .gt-small { margin-top: 6px; }
.gt-card.is-hot { --pn-edge: var(--orange); --pn-hi: var(--orange); --pn-hi-h: 4px; }
.gt-card.is-trip { --pn-edge: var(--hot); --pn-hi: var(--hot); --pn-hi-h: 4px; animation: tripBlink 1s steps(1) infinite; }
@keyframes tripBlink { 50% { --pn-bg: color-mix(in srgb, var(--wine) 40%, var(--surface)); } }
/* a button sitting in a row never shrinks (its label would spill out of the box); wrap rows size them below */
.gt-row > .gt-grow + .btn { flex: none; }
.gt-card > .btn--lg, .gt-card > .tk-hold { display: flex; width: calc(100% - 2 * var(--px)); margin-bottom: var(--sp-2); }
.gt-card > .btn--lg + .btn--lg { margin-top: 0; }
.gt-card > .gt-row.gt-wrap { margin-top: var(--sp-3); }
.gt-card > .gt-row.gt-wrap > .btn { flex: 1 1 140px; }
.gt-card > .gt-row.gt-wrap > .btn .btn__label { white-space: normal; line-height: 1.125; }

/* decision choices carry a description line: let it wrap so long options never widen the modal */
.panel[data-tab=build] .card__title, .panel[data-tab=train] .card__title, .panel[data-tab=research] .card__title, .panel[data-tab=biz] .card__title { white-space: normal; overflow: visible; text-overflow: clip; }

/* ---------- eras 4-6 tabs (fab / policy / moonshots / takeoff) ----------
   Those modules inject their own small sheets; the rules below re-skin them to the shared recipe. They are written one
   class deeper (.panel …) so they win over the injected sheets without !important. */
.gt-h { margin: var(--sp-3) 0 var(--sp-1); }
.gt-h:first-child { margin-top: 0; }
.gt-row:has(> .gt-cell) { align-items: stretch; }
.gt-row > .gt-cell { display: flex; flex-direction: column; justify-content: flex-start; }

.panel .pol-meter, .panel .tk-meter {
  height: 16px; background: var(--ink);
  box-shadow: inset 0 var(--px) 0 0 #000, 0 calc(-1 * var(--px)) 0 0 var(--edge), 0 var(--px) 0 0 var(--edge), calc(-1 * var(--px)) 0 0 0 var(--edge), var(--px) 0 0 0 var(--edge); }
.panel .pol-meter { margin: var(--sp-2) var(--px) 26px; }
.panel .tk-meter { margin: var(--sp-1) var(--px) var(--sp-3); }
.panel .pol-meter__fill, .panel .tk-meter__fill { box-shadow: inset 0 var(--px) 0 0 rgba(255, 255, 255, .28), inset 0 calc(-1 * var(--px)) 0 0 rgba(0, 0, 0, .28); }
.panel .pol-meter__tick, .panel .tk-meter__tick { top: -4px; bottom: -4px; background: var(--n7); opacity: 1; }
.panel .pol-meter__lab { top: 22px; font-size: var(--fs-small); line-height: 12px; color: var(--dim); text-transform: uppercase; }
.panel .pol-meter__val { top: 2px; right: 6px; font-size: var(--fs-small); line-height: 12px; color: var(--n9); text-shadow: var(--px) var(--px) 0 var(--ink); }
.panel .tk-meter__held { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .22) 0 4px, transparent 4px 8px); }
.panel .pol-hit, .panel .tk-warn, .panel .fab-warn, .panel .ms-race, .panel .ms-stall { color: var(--hot); }
.panel .pol-ok, .panel .fab-good { color: var(--phos); }

.panel .tk-big { font-family: var(--font); font-size: var(--fs-huge); line-height: 40px; letter-spacing: 0; color: var(--gold); text-shadow: calc(2 * var(--px)) calc(2 * var(--px)) 0 var(--gold-0); }
.panel .tk-ticks { gap: var(--px); margin: var(--sp-2) 0 var(--sp-1); }
.panel .tk-ticks i { height: 8px; background: var(--n2); box-shadow: inset 0 var(--px) 0 0 var(--n1); }
.panel .tk-ticks i.is-done { background: var(--gold); box-shadow: inset 0 var(--px) 0 0 var(--gold-hi), inset 0 calc(-1 * var(--px)) 0 0 var(--gold-1); }
.panel .tk-ticks i.is-run { background: var(--cyan); }
.panel .gt-card.tk-cov { box-shadow: inset 0 var(--pn-hi-h) 0 0 var(--gold-hi), 0 calc(-1 * var(--px)) 0 0 var(--gold), 0 var(--px) 0 0 var(--gold), calc(-1 * var(--px)) 0 0 0 var(--gold), var(--px) 0 0 0 var(--gold), 0 calc(2 * var(--px)) 0 0 var(--ink); }

.panel .fab-note { font-size: var(--fs-small); line-height: calc(14px * var(--text-scale, 1)); text-transform: uppercase; text-wrap: pretty; }
.panel .fab-canvas { background: var(--ink); box-shadow: 0 calc(-1 * var(--px)) 0 0 var(--edge), 0 var(--px) 0 0 var(--edge), calc(-1 * var(--px)) 0 0 0 var(--edge), var(--px) 0 0 0 var(--edge); }
.panel .fab-canvases { gap: var(--sp-3); padding: var(--sp-1) var(--px); }
.panel .fab-input { padding: 8px 10px; font-family: var(--font); font-size: var(--fs); border: 0; background: var(--ink); color: var(--text-hi); box-shadow: inset 0 var(--px) 0 0 #000, 0 0 0 var(--px) var(--edge-hi); }
.panel .fab-input:focus { outline: none; box-shadow: inset 0 var(--px) 0 0 #000, 0 0 0 var(--px) var(--gold); }
.panel .fab-seg { gap: var(--px); padding: var(--px); background: var(--ink); box-shadow: inset 0 var(--px) 0 0 #000; }
.panel .fab-seg button { flex: 1 1 auto; min-height: 32px; padding: 6px 10px; border: 0; background: var(--n2); color: var(--muted); box-shadow: inset 0 var(--px) 0 0 var(--n3); }
.panel .fab-seg button:active { translate: 0 var(--px); }
.panel .fab-seg button.is-on { background: var(--gold); color: var(--umber); box-shadow: inset 0 var(--px) 0 0 var(--gold-hi), inset 0 calc(-1 * var(--px)) 0 0 var(--gold-1); }
.panel .gt-card.fab-a0 { --pn-edge: var(--hot); --pn-hi: var(--hot); --pn-hi-h: 4px; }

.panel .ms-gold { color: var(--gold); text-shadow: var(--px) var(--px) 0 var(--gold-0); }
.panel .ms-track { font-size: var(--fs-small); line-height: 12px; padding: 2px 4px; background: var(--space); color: var(--lav); }
.panel .ms-mini { gap: var(--px); }
.panel .ms-mini i { height: 6px; background: var(--n2); }
.panel .ms-mini i.is-done { background: var(--phos); }
.panel .ms-mini i.is-on { background: var(--gold); }

/* ---------- staged shop lists (src/ui/tabs/lists.js): available first, OWNED folded, NEW pips ---------- */
.staged { margin-bottom: var(--sp-1); }
.stage { display: block; }
.card.is-teaser .card__icon, .gt-card.is-teaser .card__icon { filter: grayscale(1) brightness(.7); }
.card.is-teaser .btn, .gt-card.is-teaser .btn { filter: saturate(.5); }
.card.has-pip, .gt-card.has-pip { position: relative; }
.new-pip { position: absolute; left: 8px; top: -6px; z-index: 2; padding: 2px 4px; font-family: var(--font-small); font-size: var(--fs-small); line-height: 12px;
  color: var(--ink); background: var(--gold); box-shadow: 0 0 0 var(--px) var(--ink); pointer-events: none; animation: pipBlink 1.4s steps(1) infinite; }
@keyframes pipBlink { 0%, 70% { background: var(--gold); } 71%, 100% { background: var(--gold-hi); } }

/* the fold rows: "LATER +4 ▸" and "OWNED (12) ▸" */
.fold { display: flex; align-items: center; gap: var(--sp-2); width: calc(100% - 2 * var(--px)); min-height: 36px; margin: var(--px) var(--px) var(--sp-3); padding: 8px 10px; text-align: left;
  font-family: var(--font-small); font-size: var(--fs-small); line-height: calc(14px * var(--text-scale, 1)); text-transform: uppercase; color: var(--muted); background: var(--n1);
  box-shadow: inset 0 var(--px) 0 0 var(--n2), 0 calc(-1 * var(--px)) 0 0 var(--edge), 0 var(--px) 0 0 var(--edge), calc(-1 * var(--px)) 0 0 0 var(--edge), var(--px) 0 0 0 var(--edge), 0 calc(2 * var(--px)) 0 0 var(--ink); }
.fold:active { translate: 0 var(--px); }
.fold[hidden] { display: none; }
.fold__chev { flex: none; width: 0; height: 0; border: 4px solid transparent; border-left-color: currentColor; border-right: 0; margin-right: 2px; }
.fold.is-open .fold__chev { border: 4px solid transparent; border-top-color: currentColor; border-bottom: 0; margin-right: 0; margin-left: -2px; }
.fold__label { flex: 1; min-width: 0; color: var(--text-lo); }
.fold__n { flex: none; color: var(--dim); font-variant-numeric: tabular-nums; }
.fold--owned .fold__label { color: var(--phos); }
.fold--later { margin-top: calc(-1 * var(--sp-1)); border-style: dashed; }
.stage > .fold--later { background: transparent; box-shadow: inset 0 0 0 var(--px) var(--n3); }

/* expanded OWNED: tiny one-line rows (icon · name · ✓), no cards */
.minis { margin: calc(-1 * var(--sp-2)) var(--px) var(--sp-3); padding: var(--sp-1) 0; background: var(--n1);
  box-shadow: 0 calc(-1 * var(--px)) 0 0 var(--edge), 0 var(--px) 0 0 var(--edge), calc(-1 * var(--px)) 0 0 0 var(--edge), var(--px) 0 0 0 var(--edge), 0 calc(2 * var(--px)) 0 0 var(--ink); }
.minis[hidden] { display: none; }
.mini { display: flex; align-items: center; gap: var(--sp-2); min-height: 28px; padding: 2px 10px; }
.mini + .mini { box-shadow: inset 0 var(--px) 0 0 var(--n2); }
.mini__icon { flex: none; display: grid; place-items: center; width: 20px; height: 20px; }
.mini__icon > * { width: 16px; height: 16px; object-fit: contain; image-rendering: pixelated; }
.mini__dot { width: 6px; height: 6px; background: var(--n5); box-shadow: var(--px) var(--px) 0 var(--ink); }
.mini__name { flex: 1; min-width: 0; color: var(--text-lo); line-height: calc(20px * var(--text-scale, 1)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini__right { flex: none; font-family: var(--font-small); font-size: var(--fs-small); color: var(--dim); text-transform: uppercase; font-variant-numeric: tabular-nums; }
.mini__tick { flex: none; color: var(--phos); }
.mini__btn { flex: none; min-height: 24px; margin: 0; padding: 2px 8px 4px; }
.mini:has(.mini__btn) { padding-block: 3px; }
.mini:has(.mini__btn) .mini__name { white-space: normal; line-height: 1.125; text-wrap: balance; }   /* hardware names are long: wrap instead of clipping next to SELL */

/* ---------- World: compact purchase rows and button grids (short labels, details in the card body) ---------- */
.gt-btngrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: var(--sp-2); margin: var(--sp-1) var(--px) var(--sp-3); }
.gt-btngrid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gt-btngrid .btn, .wrow .btn { margin: var(--px); min-width: 0; width: calc(100% - 2 * var(--px)); min-height: 40px; padding-block: 4px 6px; }
.gt-btngrid .btn__label, .wrow .btn__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.gt-btngrid .btn__body, .wrow .btn__body { justify-items: center; text-align: center; }
.gt-card > .gt-label { margin-top: var(--sp-3); }
.gt-card > .gt-kv + .gt-label, .gt-card > .gt-small + .gt-label { margin-top: var(--sp-3); }
.gt-card > .gt-kv { margin-top: var(--sp-1); }

/* a hall sits recessed inside its site card */
.gt-card .gt-card.gt-hall { --pn-bg: var(--ink); margin: var(--sp-3) 0 var(--sp-1); padding: 10px; }
.gt-hall > .gt-h:first-child { margin-top: 0; }
.gt-hall > .gt-small { margin-top: 2px; }
.gt-hall > .bar { margin-inline: 0; }
.wrows { display: grid; gap: var(--sp-2); }
.wrows > .gt-label { margin: var(--sp-2) 2px 0; }
.wrow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px var(--sp-2); padding: 8px; background: var(--surface);
  box-shadow: inset 0 var(--px) 0 0 var(--n2), 0 calc(-1 * var(--px)) 0 0 var(--n3), 0 var(--px) 0 0 var(--n3), calc(-1 * var(--px)) 0 0 0 var(--n3), var(--px) 0 0 0 var(--n3); }
.wrow__icon { grid-column: 1; display: grid; place-items: center; width: 32px; height: 32px; background: var(--ink); }
.wrow__text { grid-column: 2; min-width: 0; }
.wrow__name { color: var(--text-hi); line-height: 20px; text-wrap: balance; }
.wrow__meta { font-family: var(--font-small); font-size: var(--fs-small); line-height: calc(14px * var(--text-scale, 1)); text-transform: uppercase; color: var(--muted); }
.wrow__act { grid-column: 3; width: 92px; }
.wrow__btns { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--sp-2); }

/* rental planner (build.js): tapped quantity — big readout, ±steps, quick picks; 44px targets */
.rent__head { display: flex; align-items: baseline; gap: var(--sp-2); margin: var(--sp-2) 0 var(--sp-1); flex-wrap: wrap; }
.rent__qty { font-size: var(--fs-big); color: var(--cyan); text-shadow: var(--px) var(--px) 0 #000; font-variant-numeric: tabular-nums; }
.rent__unit { color: var(--muted); min-width: 0; }
.rent__steps button, .rent__picks button, .rent__terms button { min-height: 44px; flex: 1 1 0; }
.rent__steps button { font-size: var(--fs); }
.rent__slider { width: 100%; height: 44px; margin: var(--sp-1) 0; accent-color: var(--cyan); touch-action: pan-x; }
.rent__row { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: var(--sp-2); align-items: stretch; }
.rent__row > .gt-seg { margin: 0; }