/* v3 token page (coin.html) and Growth Mind (gm.html); page-scoped, never in site.css, build.mjs PAGE_CSS cap 6 KB gz (owner: pixel).
   Token page = a buy page (layouts LG2, components GC0 to GC19): identity, market row, CA, Buy/Sell slab, chart above the fold, then one scroll of
   sections beside the sticky rail, the office full width, the rooms in the 868 column. Shared: rail, slot, chart, move log, rooms, mobile bar. */

.v3 .coin-grid { display: grid; gap: var(--s-4); padding: 0 0 var(--s-9); }
.v3 .coin-scene { min-width: 0; }
.v3 .coin-scene .scene { --dev-screen: var(--c-surface-3); }
/* ---------- dev card ---------- */
.v3 .dev-name { font-size: var(--t-dev-h1); line-height: 1.1; letter-spacing: -0.02em; }
.v3 .demo-bug { min-height: 24px; padding: var(--s-1) var(--s-3); border: var(--lbl-demo-edge); background: var(--lbl-bg); color: var(--lbl-fg); border-radius: var(--step-s);
  font-family: var(--mono); font-weight: var(--w-mono); font-size: var(--t-chip); position: relative; }
.v3 .demo-bug::after { content: ""; position: absolute; inset: -10px -4px; }
.v3 .demo-bug:hover { border-color: var(--c-text); }
/* ---------- rail (components.md 13) ---------- */
.v3 .coin-side { display: flex; flex-direction: column; gap: var(--s-4); }
@media (max-width: 63.99em) { .v3 .coin-grid > .coin-side, .v3 .coin-grid > .rooms { margin-inline: var(--gutter); min-width: 0; } }
.v3 .move-list > .room-d { display: block; }
.v3 .side-track { flex: 1 0 auto; }
.v3 .rail { background: var(--c-surface); border: 1px solid var(--c-edge); border-radius: var(--step); box-shadow: var(--el-rail); display: flex; flex-direction: column; gap: var(--rail-gap); }
.v3 .chg-up { color: var(--chg-up); }
.v3 .chg-down { color: var(--chg-down); }
.v3 .chg-flat { color: var(--chg-flat); }
.v3 .tabs-bs { display: grid; grid-template-columns: 1fr 1fr; height: var(--rail-tabs-h); margin-inline: var(--rail-pad); border: 1px solid var(--c-control); border-radius: var(--r-pill); padding: 1px; }
.v3 .tabs-bs button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: var(--r-pill); color: var(--c-muted); font-weight: var(--w-strong); font-size: var(--t-ui); border: 1px solid transparent; }
.v3 .tabs-bs button .tick { fill: currentColor; visibility: hidden; }
.v3 .tabs-bs button[aria-checked="true"] { background: var(--c-surface-3); color: var(--c-text); border-color: var(--c-text); }
.v3 .tabs-bs button[aria-checked="true"] .tick { visibility: visible; }
.v3 .tabs-bs button:hover { color: var(--c-text); }
.v3 .tabs-bs[aria-disabled="true"] button { background: var(--c-surface-2); color: var(--c-muted); border-color: transparent; cursor: not-allowed; }
.v3 .tabs-bs[aria-disabled="true"] button .tick { visibility: hidden; }
.v3 .slot { position: relative; height: var(--jup-h); margin-inline: var(--rail-pad); display: flex; flex-direction: column; gap: var(--s-4); outline: none; }
.v3 .slot:focus-visible { box-shadow: var(--focus-ring); }
.v3 .still { display: grid; gap: var(--s-3); }
.v3 .still-row { display: grid; gap: var(--s-2); }
.v3 .still-l { color: var(--c-muted); font-size: var(--t-small); }
.v3 .still-f { height: 56px; background: var(--c-surface-2); border-radius: var(--r2); }
.v3 .slot[data-state="demo"] { height: auto; }
.v3 .slot[data-state="demo"] .still { display: none; } /* the Jupiter ghost never opens on a demo coin: no empty boxes that read as loaders (nova note) */
.v3 .slot-act { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
.v3 .slot-act .btn { width: 100%; }
.v3 .drawn { display: grid; gap: var(--s-3); text-align: left; padding: 0; background: none; border: 0; border-radius: var(--step); cursor: pointer; color: inherit; }
.v3 .drawn:hover .plate { box-shadow: inset 0 0 0 1px var(--c-control); }
.v3 .plate { background: var(--c-surface-3); border-radius: var(--step); padding: var(--s-4); font-weight: var(--w-strong); font-size: var(--t-body); color: var(--c-text); }
.v3 .plate-help { color: var(--c-text-read); font-size: var(--t-small); }
.v3 .skel { display: block; height: 56px; background: var(--c-surface-2); border-radius: var(--r2); }
.v3 .slot-jup { position: absolute; inset: 0; }
.v3 .fee-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); min-height: var(--rail-fee-h); padding: 0 var(--rail-pad); margin: 0; font-size: var(--t-small); line-height: var(--lh-meta); color: var(--c-text-read); max-width: none; }
.v3 .fee-row .num { color: var(--c-text); }
.v3 .fee-line { padding: var(--s-2) var(--rail-pad) var(--s-4); font-size: var(--t-small); line-height: var(--lh-meta); color: var(--c-muted); }
/* host desk (Growth Mind) */
.v3 .desk { padding: var(--s-5); gap: var(--s-4); }
.v3 .desk h3 { margin-bottom: var(--s-2); }
.v3 .desk .fee-line { padding: 0; }
.v3 .desk .ctas .btn { flex: 1 1 auto; }
/* ---------- rooms: tablist and panels ---------- */
.v3 .room-tabs { display: flex; gap: var(--s-1); overflow-x: auto; padding: var(--s-2); margin: calc(-1 * var(--s-2)); border-bottom: 1px solid var(--c-line); scrollbar-width: thin; }
.v3 .room-tab { flex: none; min-height: 44px; padding: 0 var(--s-4); color: var(--c-muted); font-weight: var(--w-strong); font-size: var(--t-ui); border-bottom: 2px solid transparent; white-space: nowrap; }
.v3 .room-tab:hover { color: var(--c-text); }
.v3 .room-tab[aria-selected="true"] { color: var(--c-text); border-bottom-color: var(--c-text); }
.v3 .tab-n { color: var(--c-muted); font-size: var(--t-small); }
.v3 .room { padding: var(--s-6) 0; display: grid; gap: var(--s-4); align-content: start; outline: none; }
.v3 .room:focus-visible { box-shadow: var(--focus-ring); }
.v3 .room h3 { margin-top: var(--s-4); }
.v3 .room-h { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3); align-items: center; }
.v3 .room-wallet { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); align-items: center; font-size: var(--t-ui); color: var(--c-text); max-width: none; }
.v3 .mandate { font-size: var(--t-read); line-height: var(--lh-read); color: var(--c-text); }
.v3 .laws { display: grid; gap: var(--s-3); }
.v3 .laws li { display: grid; grid-template-columns: 3.5em 1fr; gap: var(--s-1) var(--s-3); font-size: var(--t-ui); color: var(--c-text-read); }
.v3 .laws li b { color: var(--c-text); font-weight: var(--w-strong); }
.v3 .laws .law-n { color: var(--c-muted); }
.v3 .laws .chip { justify-self: start; }
/* moves (move log) */
.v3 .move-list { display: grid; gap: var(--s-3); }
.v3 .move { padding: var(--s-4); border: 1px solid var(--c-line); border-radius: var(--step); border-left: 2px solid var(--dev-tint); display: grid; gap: var(--s-2); }
.v3 .move--refused { border-left-color: var(--c-control); }
.v3 .move-h { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); align-items: center; }
.v3 .move-h b { font-weight: var(--w-strong); color: var(--c-text); }
.v3 .move-h .num { color: var(--c-muted); font-size: var(--t-small); }
.v3 .move dl { display: grid; grid-template-columns: auto 1fr; gap: var(--s-1) var(--s-4); font-size: var(--t-small); margin: 0; }
.v3 .move dt { color: var(--c-muted); }
.v3 .move dd { margin: 0; color: var(--c-text-read); }
.v3 .move-status { font-size: var(--t-small); color: var(--c-text); }
/* composer (components.md 17) */
.v3 .composer { display: grid; gap: var(--s-3); padding: var(--s-4); border: 1px solid var(--c-edge); border-radius: var(--step); background: var(--c-surface); }
.v3 .composer:empty { display: none; }
.v3 .composer textarea { width: 100%; min-height: 86px; resize: vertical; background: var(--c-surface-2); color: var(--c-text); border: 1px solid var(--c-control); border-radius: var(--r2); padding: var(--s-3); font: inherit; }
.v3 .composer textarea:focus-visible { box-shadow: var(--focus-ring); }
.v3 .composer textarea[aria-invalid="true"] { border-color: var(--c-error); }
.v3 .composer-row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; justify-content: space-between; }
.v3 .composer-msg { font-size: var(--t-small); color: var(--c-text-read); }
.v3 .composer-msg[data-err] { color: var(--c-text); }
.v3 .composer-rules { font-size: var(--t-small); color: var(--c-muted); }
/* chart (components.md 12) */
.v3 .chart { margin: 0; background: var(--dev-wash); border-radius: var(--step); padding: var(--s-3) var(--s-4) var(--s-2); }
.v3 .chart-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-3); min-height: 36px; }
.v3 .chart-src { font-size: var(--t-small); color: var(--c-muted); display: flex; gap: var(--s-2); align-items: center; }
.v3 .chart-plot { position: relative; height: 216px; }
.v3 .chart-plot svg { display: block; width: 100%; height: 100%; overflow: visible; forced-color-adjust: none; }
.v3 .chart-line { fill: none; stroke: var(--dev-tint); stroke-width: 2; vector-effect: non-scaling-stroke; }
.v3 .chart-area { fill: color-mix(in srgb, var(--dev-tint) 8%, transparent); stroke: none; }
.v3 .chart-base { stroke: var(--c-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.v3 .chart-axis { display: flex; justify-content: space-between; font-family: var(--mono); font-size: var(--t-chip); color: var(--c-muted); min-height: 24px; align-items: center; }
.v3 .marks { position: absolute; inset: 0; }
.v3 .mark { position: absolute; width: 24px; height: 24px; transform: translate(-50%, -50%); display: grid; place-items: center; background: none; border: 0; padding: 0; border-radius: var(--step-s); }
.v3 .mark::before { content: ""; width: 8px; height: 8px; background: var(--c-text); box-shadow: 0 0 0 1px var(--c-bg); }
.v3 .mark--refused::before { background: var(--c-bg); box-shadow: inset 0 0 0 1px var(--c-text); }
.v3 .mark-tip { position: absolute; z-index: 4; transform: translate(-50%, calc(-100% - 16px)); background: var(--c-surface); border: 1px solid var(--c-edge); border-radius: var(--step); padding: var(--s-2) var(--s-3); font-size: var(--t-small); white-space: nowrap; pointer-events: none; }
.v3 .chart-msg { position: absolute; inset: 0; display: grid; place-items: center; color: var(--c-muted); font-size: var(--t-small); }
/* mobile bottom bar (components.md 14) */
.v3 .mbar { position: fixed; z-index: var(--z-bar); left: 0; right: 0; bottom: 0; min-height: var(--bar-h); background: var(--c-surface); box-shadow: var(--el-bar); padding: var(--s-3) var(--s-5) calc(var(--s-3) + env(safe-area-inset-bottom)); }
.v3 .mbar-in { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--s-3); }
.v3 .mbar .btn { min-height: 40px; width: 100%; }
@media (max-height: 500px) { .v3 .mbar { position: static; } }
@media (min-width: 64em) { .v3 .mbar { display: none !important; } }
/* ---------- 64em and up: stage column and rail column ---------- */
@media (min-width: 64em) {
  .v3 .coin-grid { grid-template-columns: minmax(0, var(--of-plate-max)) var(--rail-w); grid-template-rows: auto auto 1fr; grid-template-areas: "card side" "office side" "rooms side";
    column-gap: var(--s-5); row-gap: var(--s-3); justify-content: center; padding: var(--s-1) var(--gutter) var(--s-9); }
  .v3 .coin-grid > .office { grid-area: office; }
  .v3 .coin-side { grid-area: side; margin: 0; }
  .v3 .coin-grid > .rooms { grid-area: rooms; margin: 0; }
  .v3 .coin-scene .scene { border-radius: var(--step); }
}
/* ---------- under 64em: one column, rail under the dev card ---------- */
@media (max-width: 63.99em) {
  .v3 .slot { height: auto; min-height: var(--rail-idle-row); }
  .v3 .slot[data-open] { height: var(--jup-h); }
  .v3 .slot .still { display: none; }
  .v3 .slot[data-open] .still { display: grid; }
  .v3 .rail { gap: var(--s-3); padding-bottom: var(--s-2); }
  .v3 .slot-act--row { grid-template-columns: 1fr auto; align-items: stretch; }
  .v3 .slot-act--row .plate { font-size: var(--t-small); line-height: var(--lh-meta); padding: var(--s-2) var(--s-3); }
  .v3 .slot-act--row .plate-help { display: none; }
  .v3 .slot-act--row .btn { width: auto; }
  .v3 .slot[data-state="demo"] .still { display: none; }
}
.v3 .room-tab:focus-visible { box-shadow: inset 0 0 0 2px var(--c-focus); outline: none; }
.v3 .stage-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 28px; margin: 0 var(--gutter) var(--s-2); font-size: var(--t-hud-meta); color: var(--fgl); }
.v3 .stage-label { background: var(--hud-bg); border: var(--hud-edge); border-radius: var(--hud-step); padding: 2px 8px; }
.v3 .chg-down { color: var(--c-down, var(--fgl)); }
.v3 .chart-legend { font-size: var(--t-hud-meta); color: var(--c-muted); margin-top: var(--s-2); }
@media (min-width: 64em) {
  .v3 .stage-bar { margin: 0 0 var(--s-2); }
}
.v3 .chart-box { position: relative; }
.v3 .chart-box svg { display: block; width: 100%; }
.v3 .marks { margin: 0; padding: 0; list-style: none; pointer-events: none; }
.v3 .mark { left: calc(var(--mx) * 1%); top: calc(var(--my) * 1%); }
/* Today's activity (C7): under the zone panels, never in the rail */
.v3 .today { display: grid; gap: var(--s-4); padding: var(--s-6) 0; border-top: 1px solid var(--c-line); }
.v3 .today h3 { font-size: var(--t-panel-title); }
.v3 .today-list { display: grid; gap: var(--q-gap-item); margin: 0; padding: 0; list-style: none; }
.v3 .today-row { display: grid; grid-template-columns: 6.5em auto 1fr; gap: var(--s-3); align-items: baseline; font-size: var(--t-hud); line-height: var(--lh-hud); color: var(--c-text); }
.v3 .today-time { font-family: var(--mono); font-size: var(--t-hud-meta); color: var(--c-muted); }

/* the token page block (.tok, GC0 to GC27) moved to office.css in r15: coin.html only, next to the office hero it now wraps */