/* workshopHome.css — the WORKSHOP home view (workshopHome.js) · UPLIFT PORT P2.
 *
 * Ported to the Zone Hub charter (STARFORGE_UI_UPLIFT_DESIGN_LOCK_2026_07_03 §3d/§3e,
 * mock mocks/uplift-zone-hub-mock.html). COLD BASE — no body.u-base, no everyday plate art;
 * plate lives ONLY in the arrival beat (.wh-arr). Foundation classes (.u-glass/.u-frost/
 * .u-action) carry the tile voices; this sheet is the charter LAYOUT + wh- namespace. Window
 * never scrolls (inner-region scroll on the station column only). tokens.css supplies vars.
 * NB: CSS url() is stylesheet-relative → ../assets. */

.wh { position: relative; z-index: 3; height: 100vh; overflow: hidden; display: flex; flex-direction: column;
  --wh-zc: var(--violet); /* active-zone accent (set per open zone; violet on the base Floor) */
  font: 13px/1.45 var(--sans); color: var(--ink); }
/* B1 2026-07-07 (Director): the Floor rides a BACKGROUND PLATE like Oversight — the yard
   plate as placeholder, dimmed under a scrim so the glass tiles keep their read. */
.wh::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url('../assets/plate-workshop.png') center / cover no-repeat; opacity: .85; }
.wh__scrim { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5,7,15,.78), rgba(5,7,15,.5) 42%, rgba(6,8,18,.86)),
    radial-gradient(120% 90% at 50% 0%, rgba(90,110,200,.05), transparent 70%); }

/* ── chrome strip (sf-* shared header; carries the P1 stand-up chip #wh-standup) ── */
.wh__top { position: relative; z-index: 5; display: flex; align-items: center; gap: 13px; padding: 5px 24px; flex: 0 0 auto; } /* vertical padding matched to Oversight's .o3__bar (5px) — top bar now the same height across surfaces (was 13px → too fat on the Floor) */
.wh__pill { display: inline-flex; align-items: center; gap: 6px; font: 600 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink2); border: 1px solid var(--panel-line); background: rgba(10,14,30,.5); border-radius: 999px; padding: 6px 12px; cursor: pointer; }
.wh__pill:hover { border-color: var(--violet-line); color: var(--ink); }
.wh__pill--over { border-color: rgba(255,210,122,.4); color: var(--kernel); }
.wh__top-r { margin-left: auto; display: inline-flex; align-items: center; gap: 9px; }

/* ── Header common items (Oversight-pattern, mirrored for cross-surface consistency) ── */
/* Ascend-to-Polaris — a glowing icon that lifts + brightens on hover (right of the brandmark). */
.wh-ascend-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 15px; line-height: 1; border: 1px solid rgba(139,139,255,.35); background: rgba(139,139,255,.1); color: var(--violet, #8b8bff); cursor: pointer; transition: .18s; animation: wh-ascend-glow 3.2s ease-in-out infinite; }
.wh-ascend-ic:hover { color: #fff; border-color: var(--violet, #8b8bff); background: rgba(139,139,255,.24); box-shadow: 0 0 18px rgba(139,139,255,.6); transform: translateY(-1px); animation: none; }
@keyframes wh-ascend-glow { 0%, 100% { box-shadow: 0 0 6px rgba(139,139,255,.22); } 50% { box-shadow: 0 0 15px rgba(139,139,255,.5); } }
/* Nav/Compass button — the Oversight .o3-mbtn treatment. */
.wh-navbtn { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 15px; line-height: 1; border: 1px solid var(--panel-line); background: rgba(10,14,30,.6); color: var(--ink2); cursor: pointer; transition: .15s; }
.wh-navbtn:hover { border-color: var(--cyan, #36d6e0); color: var(--ink); }
/* Nav pop — the Oversight .o3-pop menu, anchored below the nav button (top-left). */
.wh-navpop { position: fixed; top: 60px; left: 20px; z-index: 60; width: 252px; background: rgba(9,12,26,.97); border: 1px solid var(--violet-line, rgba(139,139,255,.22)); border-radius: 15px; padding: 12px; box-shadow: 0 20px 50px rgba(0,0,0,.55); opacity: 0; transform: translateY(-8px); pointer-events: none; transition: .16s; }
.wh-navpop.open { opacity: 1; transform: none; pointer-events: auto; }
.wh-navpop__t { font: 600 9.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); margin-bottom: 9px; }
.wh-navpop__row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 10px 11px; border: 1px solid var(--panel-line); border-radius: 11px; background: rgba(10,14,30,.5); cursor: pointer; margin-bottom: 7px; transition: .15s; color: inherit; font: inherit; }
.wh-navpop__row:last-child { margin-bottom: 0; }
.wh-navpop__row:hover { border-color: var(--cyan, #36d6e0); }
.wh-navpop__ic { font-size: 15px; color: var(--violet, #8b8bff); }
.wh-navpop__tx { display: flex; flex-direction: column; gap: 1px; }
.wh-navpop__tx b { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.wh-navpop__tx i { font-size: 10px; font-style: normal; color: var(--ink3); }
@media (prefers-reduced-motion: reduce) { .wh-ascend-ic { animation: none; } }

/* ── stage + charter grid (desktop ≥1200: board + 288px rail) ── */
.wh__stage { position: relative; z-index: 3; flex: 1; min-height: 0; padding: 12px 20px 16px; display: flex; transition: opacity .8s ease; }
.wh__stage.wh--idle { opacity: .06; transition: opacity 1.6s ease; pointer-events: none; }
.wh-hub { width: 100%; min-height: 0; display: grid; gap: 12px; grid-template-columns: minmax(0,1fr) 288px; grid-template-rows: auto minmax(0,1fr); grid-template-areas: "greet rail" "board rail"; }

/* ══ FLOOR BASE (whEl[data-floor="1"], set by showStructure) — the zone-less ship's map.
 *   The hub chrome that does NOT belong on the base is REMOVED (display:none, out of the
 *   grid): the greet-Eva band, the whole right rail (mini-map / Open-product / crew), and
 *   the LINE STATUS numbers tile. The grid collapses to a SINGLE full-width column (no
 *   288px rail). Their functions live in the Floor top strip (Open+presence) or the forge
 *   band (zone nav, replacing the removed mini-map). These elements stay in the DOM for
 *   ZONE views (openZone clears data-floor) — never composed on the base. ══ */
.wh[data-floor="1"] .wh-hub { grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(0,1fr); grid-template-areas: "board"; }
.wh[data-floor="1"] .wh-greet,
.wh[data-floor="1"] .wh-rail,
.wh[data-floor="1"] .wh-info,
.wh[data-floor="1"] .wh-raise { display: none !important; }
/* the Floor top strip is ONLY part of the Floor base (hidden in every zone board geometry) */
.wh-floortop { display: none; }
.wh[data-floor="1"] .wh-board[data-geo="floor"] .wh-floortop { display: flex; }

.wh-micro { display: block; font: 600 10.5px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink3); }
.wh-micro b { color: var(--wh-zc); }

/* ── greet band — HEIGHT-CAPPED · zone name stacked ABOVE the descriptive title · voice 2-line clamp ── */
.wh-greet { grid-area: greet; display: flex; align-items: center; gap: 14px; padding: 8px 16px; min-height: 64px; max-height: 80px; overflow: hidden; border-radius: 14px; }
.wh-greet__tok { width: 44px; height: 44px; flex: none; border-radius: 50%; border: 2px solid var(--wh-zc); background: #0a0e1e; overflow: hidden; display: grid; place-items: center; font: 700 13px var(--sans); color: var(--ink); box-shadow: 0 0 12px -3px var(--wh-zc); cursor: default; }
.wh-greet__tok img { width: 100%; height: 100%; object-fit: cover; }
.wh-greet__who { min-width: 132px; flex: none; }
.wh-greet__role { display: block; margin-bottom: 2px; font: 600 10px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--wh-zc); white-space: nowrap; }
.wh-greet__nm { font-family: var(--u-font-hud, "Chakra Petch", sans-serif); font-weight: 600; font-size: 16px; }
.wh-greet__say { flex: 1; min-width: 0; color: var(--ink2); font-size: 12.5px; font-style: italic; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wh-greet__say b { color: var(--ink); font-style: normal; }
.wh-greet__zt { text-align: right; flex: none; }
.wh-greet__zone { font-family: var(--u-font-zone, "Michroma", sans-serif); font-size: 15px; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; color: var(--ink); }
.wh-greet__title { font-family: var(--u-font-zone, "Michroma", sans-serif); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--wh-zc); white-space: nowrap; margin-top: 3px; }
.wh-greet__sub { font: 600 9px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); white-space: nowrap; margin-top: 3px; }

/* ── board — signature ORGANISM (forge-line) · CONTEXT (ship map / zone stations) · INFO · gold Raise.
 * Base geometry = organism spans the tall left column, context beside it, info + raise stacked far-right.
 * Per-zone geometries (data-geo) re-shape the grid for distinctness (mock's five boards). ── */
.wh-board { grid-area: board; min-height: 0; display: grid; gap: 12px;
  grid-template-columns: minmax(0,1.35fr) minmax(0,1.15fr) minmax(0,.8fr);
  grid-template-rows: minmax(0,1fr) minmax(0,.85fr);
  grid-template-areas: "organ ctx info" "organ ctx raise"; }
.wh-organ { grid-area: organ; }
.wh-ctx { grid-area: ctx; }
.wh-info { grid-area: info; }
.wh-raise { grid-area: raise; }

/* per-zone distinct geometries — the ctx (ranked stations) grows in the zones that carry more,
 * organism narrows; each visibly different from the next. Zones beyond the five keep the default. */
.wh-board[data-geo="briefing"] { grid-template-columns: minmax(0,1fr) minmax(0,1.4fr) minmax(0,.75fr); grid-template-areas: "organ ctx info" "organ ctx raise"; }
.wh-board[data-geo="shaping"]  { grid-template-columns: minmax(0,1.2fr) minmax(0,1.3fr) minmax(0,.75fr); grid-template-areas: "organ ctx ctx" "organ info raise"; }
.wh-board[data-geo="build"]    { grid-template-columns: minmax(0,1.45fr) minmax(0,1.1fr) minmax(0,.8fr); grid-template-areas: "organ ctx info" "organ ctx raise"; }
.wh-board[data-geo="validation"] { grid-template-columns: minmax(0,1fr) minmax(0,1.5fr) minmax(0,.7fr); grid-template-areas: "info ctx ctx" "organ ctx raise"; }
/* FLOOR base (zone-less ship's map) — the mock's clean composition:
 *   row 1 = TOP STRIP (title · presence · Open · toggles · gold Raise)
 *   row 2 = forge-line ORGANISM band across the full width (the zone nav)
 *   row 3 = Structure map LEFT | WO-list RIGHT.
 * NO info/raise tiles here (info removed on the base; Raise lives in the top strip). The
 * organism is a trimmed band; structure is the dominant field. */
.wh-board[data-geo="floor"] {
  /* structure ~70% (map + recent-activity column) · WO-list ~30% (Director rebalance 2026-07-07) */
  grid-template-columns: minmax(0,7fr) minmax(0,3fr);
  grid-template-rows: auto auto minmax(0,1fr);
  grid-template-areas: "top top" "organ organ" "ctx woline"; }
.wh-floortop { grid-area: top; }
/* the WO-list tile is ONLY part of the Floor geometry; hidden in every zone geometry */
.wh-woline { grid-area: woline; display: none; }
.wh-board[data-geo="floor"] .wh-woline { display: flex; }
/* organism trims to an instrument BAND on the Floor (structure is the dominant field). The band
 * top-aligns now, so the tile can be shorter — the reclaimed height flows to the ctx/WO row below. */
.wh-board[data-geo="floor"] .wh-organ { min-height: 104px; max-height: 148px; }
.wh-board[data-geo="floor"] .wh-forge__canvas { min-height: 64px; }

/* ── FLOOR TOP STRIP — title · live-presence · slim Open · A/B toggles · gold Raise.
 * Folds in the affordances lifted off the removed rail (Open-product + presence). ── */
.wh-floortop { align-items: center; gap: 12px; flex-wrap: wrap; border-radius: 14px; padding: 10px 16px; }
.wh-floortop__ttl { min-width: 0; }
.wh-floortop__t { font-family: var(--u-font-zone, "Michroma", sans-serif); font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.wh-floortop__t b { color: var(--wh-zc); }
.wh-floortop__sub { font: 600 9px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); margin-top: 3px; white-space: nowrap; }
.wh-floortop__sp { flex: 1 1 auto; }
.wh-presence { display: inline-flex; align-items: center; gap: 6px; font: 600 10px var(--mono); letter-spacing: .06em; color: var(--cyan); border: 1px solid var(--panel-line); border-radius: 999px; padding: 4px 11px; background: rgba(10,14,30,.5); white-space: nowrap; }
.wh-presence b { color: var(--ink); }
.wh-floortop__open { display: inline-flex; align-items: center; gap: 6px; font: 600 10.5px var(--sans); color: #04211d; border: 0; border-radius: 999px; padding: 6px 14px; background: linear-gradient(135deg,#5fd0a0,#36d6e0); cursor: pointer; white-space: nowrap; }
.wh-floortop__open:hover { filter: brightness(1.08); }
/* segmented A/B toggle (forge geometry · structure view) — shared .wh-seg idiom */
.wh-seg { display: inline-flex; border: 1px solid var(--panel-line); border-radius: 999px; overflow: hidden; background: rgba(10,14,30,.55); flex: none; }
.wh-seg button { appearance: none; border: 0; background: transparent; color: var(--ink3); font: 600 9.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 5px 12px; cursor: pointer; min-height: 26px; }
.wh-seg button.on { color: #0a0e1e; background: linear-gradient(135deg, var(--violet), #a9befc); font-weight: 700; }
.wh-floortop__raise { display: inline-flex; align-items: center; gap: 7px; font-family: var(--u-font-hud, "Chakra Petch", sans-serif); font-weight: 600; font-size: 12.5px; color: var(--ink); border-radius: 999px; padding: 7px 15px; cursor: pointer; white-space: nowrap; }
.wh-floortop__rg { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; flex: none; color: #1a1206; background: radial-gradient(circle at 40% 35%, #fff, var(--kernel) 45%, var(--heat2)); box-shadow: 0 0 10px rgba(255,178,77,.5); }

/* glass region shells (u-glass/u-frost carry the surface; these add padding + flex) */
.wh-organ, .wh-ctx, .wh-info { border-radius: 14px; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.wh-organ { padding: 12px 14px; }
.wh-ctx { padding: 0; }
.wh-info { padding: 12px 14px; }

/* ── ORGANISM (forge-line tile — minimal: TITLE ONLY + the renderer). Legend + status
 *   sub-text removed (Director verdict 2026-07-04): the mock's band tile carries no legend
 *   and no status line — just the title and the band. ── */
.wh-forge__ttl { flex: 0 0 auto; margin-bottom: 6px; }
.wh-forge__canvas { flex: 1; min-height: 0; position: relative; }
.wh-forge__canvas canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Forge-line tile header: title left, discreet glyph toggle pinned right — one row, no wasted height. */
.wh-forge__hd { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 2px; flex: 0 0 auto; }
.wh-board[data-geo="floor"] .wh-organ { min-height: 104px; max-height: 148px; }
/* Zone hub: this tile drops the forge-line and hosts the HOTTEST station (slot-0). */
.wh-organ.is-zone .wh-forge__hd, .wh-organ.is-zone .wh-forge__canvas { display: none; }
.wh-organ__hero { flex: 1; min-height: 0; display: flex; overflow: auto; }
.wh-organ:not(.is-zone) .wh-organ__hero { display: none; }
.wh-organ__hero .tsq-st { flex: 1; margin: 0; }

/* ── BAND (HTML .zoneband — mock parity, mocks/uplift-floor-mock.html). One horizontal strip:
 *   6 zone segments; each = a zone header label ABOVE, a 2px zone-coloured segment line, and its
 *   station nodes BELOW; travelling WO motes ride the strip. Namespaced wh-band__* (mock CSS-class
 *   collision guard — memory: namespace mock classes on port). ── */
/* Top-ALIGN the band (was align-items:center) so the strip hugs the tile title — the band's
 * content is short, so centring it in the canvas left a fat dead-gap between the "FORGE-LINE"
 * label and the station row (Director-marked). Top-align + a slimmer zseg top-pad reclaims it;
 * the freed vertical space flows to the taller structure/WO tiles below (board rows are auto). */
.wh-band { position: absolute; inset: 0; display: flex; align-items: flex-start; }
.wh-band__strip { flex: 1; display: flex; position: relative; min-width: 0; }
.wh-band__zseg { flex: 1; position: relative; padding-top: 4px; cursor: pointer; }
.wh-band__zl { font: 600 8.5px var(--mono); letter-spacing: .18em; text-transform: uppercase; text-align: center; display: block; margin-bottom: 7px; color: var(--sc, var(--ink3)); }
.wh-band__pr { color: var(--cyan); margin-left: 5px; letter-spacing: .02em; }
/* line + motes sit at ABSOLUTE offsets from the zseg's top edge — shifted up with the slimmer
 * top-pad above so the segment line stays under the nodes and the motes ride the rings. */
.wh-band__zseg::after { content: ""; position: absolute; left: 0; right: 0; top: 30px; height: 2px; background: linear-gradient(90deg, var(--sc, rgba(150,160,220,.3)), rgba(150,160,220,.18)); }
.wh-band__zseg.sel::after { height: 3px; box-shadow: 0 0 8px var(--sc); }
.wh-band__nodes { display: flex; justify-content: space-around; position: relative; z-index: 2; }
.wh-band__stn { display: flex; flex-direction: column; align-items: center; gap: 5px; font: 600 8px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink3); cursor: pointer; transition: color .28s ease; }
.wh-band__stn i { width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--planned); background: #0a0e1e; display: block; pointer-events: none; }
/* ── HOVER-INSPECT (B1 2026-07-07) — banded twin of the winding hover-expand: the hovered
      station's ring expands (JS lerp on its i, same engine the charge uses, so a charging
      droplet stays centred) and its label lifts; every OTHER station's label fades away
      while inspecting. Rings + motes stay visible throughout. ── */
.wh-band.insp .wh-band__stn:not(.insp-exp) { color: transparent; }
.wh-band__stn.insp-exp { color: var(--ink, #eef0ff); font-weight: 700; letter-spacing: .1em; font-size: 9.5px; }
/* the ballooning ring needs headroom — let it overflow its flex cell without clipping */
.wh-band__stn.insp-exp i { position: relative; z-index: 5; }
.wh-band__stn.done i { border-color: #5fd0a0; background: rgba(95,208,160,.4); }
.wh-band__stn.hotn i { border-color: var(--heat); background: rgba(255,178,77,.35); box-shadow: 0 0 12px rgba(255,178,77,.6); }
.wh-band__stn.parkn i { border-color: #ff7a90; background: rgba(255,122,144,.32); box-shadow: 0 0 10px rgba(255,122,144,.5); }
.wh-band__stn.livec i { border-color: var(--cyan); background: rgba(54,214,224,.3); box-shadow: 0 0 10px rgba(54,214,224,.5); }
.wh-band__stn.sel { color: var(--ink); }
.wh-band__stn.sel i { border-color: #fff; box-shadow: 0 0 0 3px rgba(139,167,255,.1), 0 0 16px var(--sc, #8ba7ff); }
/* ── MOTE-TRACKING active-station highlight (tracks the droplet every frame — the station a WO is
      charging at reads HOT, passed stations relax to a dim DONE trail, upcoming stay pending). These
      follow the live mote, overriding the render-time state class so exactly the droplet's current
      station reads active (Director bug: WO at ALIGN but PROPOSE stayed lit). ── */
.wh-band__stn.mote-active { color: var(--ink); }
.wh-band__stn.mote-active i { border-color: var(--sc, var(--heat)); background: color-mix(in srgb, var(--sc, #ffb24d) 34%, transparent); box-shadow: 0 0 13px var(--sc, rgba(255,178,77,.65)), 0 0 4px #fff; }
.wh-band__stn.mote-passed { color: var(--ink3); }
.wh-band__stn.mote-passed i { border-color: rgba(95,208,160,.55); background: rgba(95,208,160,.16); box-shadow: none; }
.wh-band__stn.mote-ahead { color: var(--ink3); }
.wh-band__stn.mote-ahead i { border-color: var(--planned); background: #0a0e1e; box-shadow: none; }
.wh-band__wm { position: absolute; top: 19px; width: 24px; height: 24px; margin-left: -12px; display: grid; place-items: center; cursor: pointer; z-index: 4; }
.wh-band__wm i { width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff, var(--mc, #ffd27a) 50%, var(--heat2)); box-shadow: 0 0 12px rgba(255,178,77,.8); pointer-events: none; }
/* floating WO-title label — rides a HOVERED WO's droplet (row-hover on the WO-list); positioned by
   JS from the mote's live % x, so it tracks smoothly as the WO charges/fires. */
.wh-band__wolabel { position: absolute; top: 2px; transform: translateX(-50%); z-index: 5; pointer-events: none; white-space: nowrap; max-width: 180px; overflow: hidden; text-overflow: ellipsis; padding: 2px 7px; border-radius: 999px; border: 1px solid var(--violet-line, rgba(139,139,255,.3)); background: rgba(10,14,30,.86); color: var(--ink); font: 600 9.5px var(--sans, system-ui); letter-spacing: .02em; box-shadow: 0 2px 10px rgba(0,0,0,.4); }

/* ── INFO tile — real line numbers (folds the old rail dashboard) ── */
.wh-nums { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; text-align: center; margin: 10px 0 8px; }
.wh-n { font: 600 22px var(--u-font-hud, "Chakra Petch", sans-serif); font-variant-numeric: tabular-nums; }
.wh-n.h { color: var(--heat); } .wh-n.c { color: #ff6b6b; }
.wh-l { font: 600 8.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); margin-top: 2px; }
.wh-cap2 { margin-top: auto; padding-top: 7px; font: 500 8.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wh-cap2 b { color: var(--ink2); }

/* ── gold Raise action tile ── */
.wh-raise { border-radius: 14px; min-height: 0; display: flex; flex-direction: column; gap: 6px; justify-content: center; padding: 14px 16px; cursor: pointer; text-align: left; color: var(--ink); }
.wh-raise__g { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 18px; flex: none; color: #1a1206; background: radial-gradient(circle at 40% 35%, #fff, var(--kernel) 45%, var(--heat2)); box-shadow: 0 0 14px rgba(255,178,77,.5); }
.wh-raise__t { font-family: var(--u-font-hud, "Chakra Petch", sans-serif); font-weight: 600; font-size: 15px; }
.wh-raise__s { font-size: 10.5px; color: var(--ink3); }

/* ── FLOOR STRUCTURE SECTION MAP (.wh-fs) — real blueprint areas as named sections tinted
 * by maturity: planned ghost · forming heat+kernel · built teal (mock uplift-floor-mock). ── */
.wh-fs { width: 100%; height: auto; }
.wh-fs .sh { transition: fill .6s, stroke .6s; }
.wh-fs g[data-st="planned"] .sh { fill: rgba(150,160,220,.02); stroke: rgba(174,180,216,.32); stroke-dasharray: 5 6; stroke-width: 1.4; }
.wh-fs g[data-st="forming"] .sh { fill: rgba(255,178,77,.07); stroke: rgba(255,178,77,.5); stroke-dasharray: 4 5; stroke-width: 1.5; }
.wh-fs g[data-st="built"] .sh { fill: rgba(95,208,160,.08); stroke: rgba(95,208,160,.55); stroke-dasharray: none; stroke-width: 1.5; }
.wh-fs g[data-st="planned"] .slb { fill: #565c85; }
.wh-fs g[data-st="forming"] .slb { fill: #ffb24d; }
.wh-fs g[data-st="built"] .slb { fill: #5fd0a0; }
.wh-fs .kg { opacity: 0; transition: opacity .5s; }
.wh-fs g[data-st="forming"] .kg { opacity: 1; }

/* ── WO-LIST ("WORK ORDERS ON THE LINE", Floor base) ── */
.wh-woline { grid-area: woline; border-radius: 14px; min-height: 0; flex-direction: column; overflow: hidden; padding: 12px 14px; }
.wh-woline > .wh-micro { flex: 0 0 auto; margin-bottom: 9px; }
.wh-woline__list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.wh-woline__quiet { color: var(--ink3); font-size: 12px; padding: 12px 4px; }
/* B1 2026-07-07 (round 2): WO TITLE column removed (it only truncated) — row = id ·
   zone-glyph/stage · single bar · crew. The bar stays narrow (76px). */
.wh-worow { display: grid; grid-template-columns: auto minmax(0,1fr) 76px auto; align-items: center; gap: 12px; border: 1px solid var(--panel-line); border-radius: 11px; padding: 9px 12px; background: rgba(10,14,30,.5); font-size: 12.5px; cursor: pointer; }
.wh-worow:hover { border-color: var(--violet-line); }
.wh-worow__id { font: 700 11px var(--mono); color: var(--kernel); }
.wh-worow__nm { color: var(--ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wh-worow__nm b { color: var(--ink); }
/* zone·stage is a FIRST-CLASS, non-truncated cell — always legible on the narrow (30%) Floor
   tile. Zone reads as the uppercase accent (--sc), stage as the plain label; never clipped. */
.wh-worow__loc { display: flex; align-items: baseline; gap: 5px; white-space: nowrap; min-width: 0; }
.wh-worow__zn { font: 600 8.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--sc, var(--violet)); }
/* B1: zone shows as its GLYPH (❂◎◇⬡✓⛨◈), zone-coloured; stage stays text */
.wh-worow__zg { font: 700 13px var(--mono); color: var(--sc, var(--violet)); line-height: 1; }
/* ── the SINGLE first-past-the-post bar (B1) — colour = the leading racer:
      work/budget leads → heat-amber (finishing by doing) · time leads → steel (running long).
      'zonebar'/'blend' = the back-pocket A/B modes (localStorage sf-wobar-mode). ── */
/* (base .wh-drail is a COLUMN flex — flex:1 on the solo child collapsed its height to 0;
   size it explicitly instead.) */
.wh-drail--one { display: flex; align-items: center; justify-content: stretch; }
.wh-drail__rl.solo { height: 8px; width: 100%; flex: 0 0 auto; border-radius: 5px; }
.wh-drail__rl.solo.work i { background: linear-gradient(90deg, var(--heat2, #ffb24d), var(--heat)); box-shadow: 0 0 8px rgba(255,178,77,.35); }
.wh-drail__rl.solo.budget i { background: linear-gradient(90deg, #1f8f9c, var(--cyan)); box-shadow: 0 0 8px rgba(54,214,224,.3); }
.wh-drail__rl.solo.elapsed i { background: linear-gradient(90deg, #5a6480, #8b95b3); }
.wh-drail__rl.solo.zonebar i { background: linear-gradient(90deg, color-mix(in srgb, var(--sc, #8b8bff) 60%, transparent), var(--sc, #8b8bff)); }
.wh-drail__rl.solo.zonebar.overrun i { background: linear-gradient(90deg, #5a6480, #ff7a90); }
.wh-drail__rl.solo.blend i { background: linear-gradient(90deg, var(--heat) 0%, var(--heat) var(--mix, 50%), #8b95b3 100%); }
/* crew presence — the band's cyan presence-dot language beside the original round counter */
.wh-worow__pr { color: var(--cyan); font: 700 7px var(--mono); letter-spacing: .18em; margin-right: 6px; align-self: center; }
.wh-worow__toks { align-items: center; }
.wh-worow__sep { color: var(--ink3); font-size: 9px; }
.wh-worow__stg { font: 600 10px var(--sans, system-ui); color: var(--ink2); }
.wh-worow__drail { min-width: 0; }
/* Smooth-UI (Director directive 2026-07-05): tween the dual-rail run-bar FILL between the
   discrete run.progress ticks (~1.2s apart at 1x) so the bar reads as continuous streaming,
   not a stepped snap. The ~.9s width transition lands well inside the tick cadence — each new
   width is reached before the next tick arrives, so it never fights the telemetry updates.
   Scoped to the Floor's inline-width rail fills (.wh-drail__rl i, defined in workshop.css). */
.wh-drail__rl i { transition: width .9s cubic-bezier(.4,.9,.3,1); }
.wh-worow__crew { display: flex; justify-content: flex-end; }
.wh-worow__toks { display: flex; } .wh-worow__toks .tsq-av { width: 24px; height: 24px; margin-left: -7px; font-size: 9px; } .wh-worow__toks .tsq-av:first-child { margin-left: 0; }
.wh-worow__none { color: var(--ink3); font: 600 11px var(--mono); }
/* crew-cost chip slot (recon B3) — rides inside the zone cell; empty slot renders nothing */
.wh-worow__cost { display: inline-flex; vertical-align: middle; margin-left: 4px; }
/* B10 — awaiting-your-call rows: kernel-gold voice (matches the station tiles'
   [data-state=awaiting] treatment) + a 6th grid track for the Decide CTA. */
.wh-worow--await { grid-template-columns: auto minmax(0,1fr) auto 116px auto auto; border-color: rgba(255,210,122,.5); background: rgba(255,210,122,.045); box-shadow: 0 0 0 1px rgba(255,210,122,.14), 0 0 22px rgba(255,210,122,.09); }
.wh-worow--await:hover { border-color: rgba(255,210,122,.75); }
.wh-worow__decide { border: 1px solid rgba(255,210,122,.55); border-radius: 999px; padding: 5px 12px; background: rgba(255,210,122,.12); color: var(--kernel, #ffd27a); font: 600 11px var(--sans, system-ui); cursor: pointer; white-space: nowrap; transition: background .15s, box-shadow .15s; }
.wh-worow__decide:hover { background: rgba(255,210,122,.22); box-shadow: 0 0 14px rgba(255,210,122,.25); }

/* ── CONTEXT panel — Structure ghost ⇄ ranked-slot zone stations (tsq-* preserved) ── */
.tsq-body { flex: 1; min-height: 0; position: relative; }
.tsq-view { position: absolute; inset: 0; padding: 14px 16px; display: none; flex-direction: column; min-height: 0; }
.tsq-view.on { display: flex; }

.wh-smap__head { display: flex; align-items: baseline; gap: 12px; flex: 0 0 auto; flex-wrap: wrap; }
.wh-smap__t { font-size: 17px; font-weight: 650; }
.wh-smap__chip { font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; color: #5fc69e; }
.wh-smap__sub { font-family: var(--mono); font-size: 9px; color: var(--ink3); margin: 3px 0 0; letter-spacing: .04em; flex: 0 0 auto; }
.tsq-travel-note { font: 600 8.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--cyan); margin-left: auto; }
/* map + recent-activity in one row: the map takes the field, activity is a slim side column.
 * The map stage keeps flex:1 (fills the row's left). The activity aside only shows on the Floor
 * base (data-floor) — in a zone the struct view isn't on screen anyway; scoping keeps it honest. */
.wh-smap__row { flex: 1; min-height: 0; display: flex; gap: 12px; margin-top: 10px; }
.wh-smap__stage { flex: 1; min-height: 0; min-width: 0; display: flex; align-items: center; justify-content: center; position: relative; background: radial-gradient(120% 100% at 50% 40%, rgba(90,110,200,.06), transparent 70%), linear-gradient(rgba(150,160,220,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(150,160,220,.045) 1px, transparent 1px); background-size: auto, 32px 32px, 32px 32px; border-radius: 12px; border: 1px solid var(--panel-line); }
/* B1 2026-07-07: the blueprint takes ALL the tile space (subline + text legend removed);
   aspect-meet keeps it fully visible — never scrolls, never crops. */
.wh-smap__stage svg { width: 100%; height: 100%; max-width: none; overflow: visible; }
/* recent-activity column (Floor base beside the map) */
/* activity aside is slightly WIDER (+~10% of the row, shed by the map which stays flex:1); map still
   legible. WO tile outer width (30%) is unchanged — only this internal map:activity split moves. */
/* B1 2026-07-07: aside SLIMMED (290→200px — freed width flows to the blueprint stage);
   entries stack into up-to-3-line rows so they stay readable at the narrower width. */
.wh-activity { display: none; flex: 0 0 200px; min-width: 0; flex-direction: column; min-height: 0; border: 1px solid var(--panel-line); border-radius: 12px; padding: 10px 12px; background: rgba(10,14,30,.4); }
.wh-ev--stack { display: block; }
.wh-ev--stack .k { display: flex; align-items: center; gap: 5px; }
.wh-ev--stack .t { margin-top: 2px; font-size: 11.5px; line-height: 1.35; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wh[data-floor="1"] .wh-activity { display: flex; }
.wh-activity > .wh-micro { flex: 0 0 auto; margin-bottom: 4px; }
.wh-activity__list { flex: 1; min-height: 0; overflow-y: auto; }
.wh-activity__list .wh-ev:first-child { border-top: 0; }
.wh-activity__quiet { color: var(--ink3); font-size: 11px; padding: 8px 2px; line-height: 1.4; }
/* "View all →" affordance (shown when the inline cap hides history) + full-log modal */
.wh-activity__more { display: block; width: 100%; margin-top: 6px; padding: 5px 8px; border: 1px solid var(--panel-line); border-radius: 8px; background: rgba(139,139,255,.06); color: var(--ink2); font: 600 9.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: border-color .15s, background .15s; }
.wh-activity__more:hover { border-color: var(--violet-line, rgba(139,139,255,.4)); background: rgba(139,139,255,.12); color: var(--ink); }
.wh-actmodal { position: absolute; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: rgba(4,6,14,.66); backdrop-filter: blur(3px); }
.wh-actmodal[hidden] { display: none; }
.wh-actmodal__box { width: min(460px, 92%); max-height: 76%; display: flex; flex-direction: column; border-radius: 14px; padding: 14px 16px; }
.wh-actmodal__hd { display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; margin-bottom: 10px; }
.wh-actmodal__x { border: 1px solid var(--panel-line); border-radius: 8px; background: transparent; color: var(--ink2); width: 26px; height: 26px; cursor: pointer; line-height: 1; }
.wh-actmodal__x:hover { color: var(--ink); border-color: var(--violet-line, rgba(139,139,255,.4)); }
.wh-actmodal__list { flex: 1; min-height: 0; overflow-y: auto; }
.wh-actmodal__list .wh-ev:first-child { border-top: 0; }
@media (max-width: 1100px) { .wh-activity { flex-basis: 172px; } }
@media (max-width: 860px) { .wh-smap__row { flex-direction: column; } .wh[data-floor="1"] .wh-activity { flex: 0 0 auto; max-height: 130px; } }
.wh-smap__legend { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 8px; font-family: var(--mono); font-size: 8.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink3); flex: 0 0 auto; }
/* SYSTEM CHIPS (B1) — the legend row IS the filter: click a chip to focus that system's
   sections on the hull; click the chip again or the blueprint background to clear. */
.wh-syschip { display: inline-flex; align-items: center; gap: 5px; background: rgba(10,14,30,.6); border: 1px solid color-mix(in srgb, var(--sa, #8b95b3) 45%, transparent); border-radius: 999px; padding: 2.5px 9px 2.5px 6px; cursor: pointer; color: var(--sa, #8b95b3); font: 700 8px var(--mono); letter-spacing: .08em; transition: box-shadow .15s, border-color .15s; }
.wh-syschip i { width: 8px; height: 8px; border-radius: 2px; border: 1px solid var(--sa, #8b95b3); display: block; font-style: normal; }
.wh-syschip.on { border-color: var(--sa); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--sa) 55%, transparent), 0 0 12px color-mix(in srgb, var(--sa) 40%, transparent); color: #eef0ff; }
.wh-syschip--tail { cursor: default; border-style: dashed; color: #8b95b3; }
.wh-syschip--tail i { border-style: dashed; background: none; }
.wh-smap__legend i { font-style: normal; } .lg-ghost { color: #7a82b0; } .lg-form { color: var(--heat); } .lg-built { color: var(--built); }
.wh-smap__legend .lg-scan { color: var(--cyan); } .wh-smap__legend .lg-edit { color: #ffd27a; } .wh-smap__legend .lg-check { color: #36d6e0; }

/* ── STRUCTURE MAP (.ss-map) — TWO honest views of ONE live blueprint (src/shipStructure.js),
      sharing one data path + one lighting language. data-mode = "ship" (Mode A, side-view class
      hull) | "settlement" (Mode B, top-down radial districts). Nodes glow by heat, tint by maturity,
      and carry the phase-keyed forge vocabulary (scan/forming/editing/validating). --ss-breath (rAF,
      structTween) gives a smooth breathing glow — not stepped — shared by both modes. ── */
.ss-map { width: 100%; height: auto; overflow: visible; --ss-breath: 1; }
.ss-map .ss-seglbl { paint-order: stroke; stroke: rgba(5,7,15,.7); stroke-width: 2.2px; }
.ss-map[data-mode="ship"] [clip-path] ellipse[fill^="url"] { opacity: var(--ss-breath); }  /* ship core-glow breathes */
.ss-map[data-mode="ship"] g > line[filter*="bloom"] { opacity: var(--ss-breath); }         /* ship spine bloom breathes */
.ss-map[data-mode="settlement"] circle[fill^="url"] { opacity: var(--ss-breath); }         /* settlement hearth breathes */
.ss-map circle, .ss-map line, .ss-map ellipse, .ss-map path { transition: opacity .5s, r .5s; }
@media (prefers-reduced-motion: reduce) { .ss-map animate { display: none; } .ss-map { --ss-breath: 1 !important; } }

/* zone header */
.tsq-zhead { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; margin-bottom: 12px; }
.tsq-back { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--panel-line); background: rgba(10,14,30,.5); color: var(--ink2); font: 600 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; margin-right: 4px; }
.tsq-back:hover { border-color: var(--cyan); color: var(--ink); }
.tsq-zhead .g { font-size: 18px; }
.tsq-zhead .n { font: 700 13px var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.tsq-zhead .c { margin-left: auto; font: 600 9px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); }
.tsq-stations { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; overflow: auto; }

/* ranked-slot sizing (§3e): the hero slot (wh-slot0) carries the hot glass + the biggest
 * footprint; deeper slots step down. Slotting is by activity rank (workshopHome.js). */
.tsq-st.wh-slot0 { flex: 0 0 auto; }
.tsq-st.wh-slot0 .tsq-st__name { font-size: 17px; }
.tsq-st.wh-slot1 .tsq-st__name { font-size: 15px; }
.tsq-st.wh-slot2 .tsq-st__name, .tsq-st.wh-slot3 .tsq-st__name, .tsq-st.wh-slot4 .tsq-st__name { font-size: 14px; }
.wh-st__dot { align-self: center; }

/* station card (tsq-* — glass now carried by .u-glass on the hero; keep the structural rules) */
.tsq-st { border: 1px solid var(--panel-line); border-radius: 13px; background: rgba(10,14,30,.5); padding: 15px 16px; position: relative; }
.tsq-st.u-glass { background: transparent; border: 0; }
.tsq-st--active { border-color: var(--violet-line); }
.tsq-st[data-state=awaiting] { border-color: rgba(255,210,122,.5); box-shadow: 0 0 0 1px rgba(255,210,122,.14), 0 0 26px rgba(255,210,122,.09); }
.tsq-st[data-state=parked] { border-color: rgba(255,122,144,.4); }
.tsq-st--quiet { opacity: .6; }
.tsq-st__top { display: flex; align-items: baseline; gap: 10px; }
.tsq-st__name { font: 650 15px var(--sans); }
.tsq-st__stage { font: 600 9px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); }
.tsq-st__wo { margin-left: auto; font: 600 9.5px var(--mono); color: var(--cyan); letter-spacing: .05em; }
.tsq-st__title { font-size: 13px; color: var(--ink2); margin-top: 3px; }
.tsq-st__state { display: inline-flex; align-items: center; gap: 7px; margin-top: 11px; font: 600 9.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.tsq-st__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink3); }
[data-state=composing] .tsq-st__state .tsq-st__dot, [data-state=composing] .tsq-st__dot { background: var(--heat); box-shadow: 0 0 8px var(--heat); animation: tsqpulse 1.4s ease-in-out infinite; }
[data-state=composing] .tsq-st__state { color: var(--heat); }
[data-state=awaiting] .tsq-st__state .tsq-st__dot, [data-state=awaiting] .tsq-st__dot { background: var(--kernel); box-shadow: 0 0 10px var(--kernel); }
[data-state=awaiting] .tsq-st__state { color: var(--kernel); }
[data-state=parked] .tsq-st__state .tsq-st__dot, [data-state=parked] .tsq-st__dot { background: #ff7a90; }
[data-state=parked] .tsq-st__state { color: #ff7a90; }
/* FAULT — a WO that produced no output (execute-success gate, RCA WO-HWA2). Loudest state:
   pulsing critical-red so a failed order can never read as green/done. */
.tsq-st[data-state=fault] { border-color: rgba(255,107,107,.6); box-shadow: 0 0 0 1px rgba(255,107,107,.25), 0 0 28px rgba(255,107,107,.15); }
[data-state=fault] .tsq-st__state .tsq-st__dot, [data-state=fault] .tsq-st__dot { background: #ff6b6b; box-shadow: 0 0 10px #ff6b6b; animation: tsqpulse 1.4s ease-in-out infinite; }
[data-state=fault] .tsq-st__state { color: #ff6b6b; }
@keyframes tsqpulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* progress */
.tsq-prog { margin-top: 12px; }
.tsq-prog__meta { display: flex; justify-content: space-between; font: 600 9px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink3); margin-bottom: 5px; }
.tsq-prog__bar { height: 5px; border-radius: 999px; background: rgba(150,160,220,.14); overflow: hidden; }
/* W3 motion layer (game-HUD fills): station dual-rail bars ride the SAME ~.9s width tween as the Floor's
   drails — discrete run.progress ticks (~1.2s) read as continuous streaming, never a stepped snap. */
.tsq-prog__fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg,var(--cyan),var(--heat)); transition: width .9s cubic-bezier(.4,.9,.3,1); }
.tsq-prog__note { font-size: 11.5px; color: var(--ink2); margin-top: 7px; } .tsq-prog__note b { color: var(--ink); }

/* participants */
.tsq-part { margin-top: 13px; }
.tsq-part__lbl { font: 600 8.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); margin-bottom: 8px; }
.tsq-part__row { display: flex; align-items: center; gap: 9px; padding: 5px 0; }
.tsq-av { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 600 10px var(--sans); border: 1.5px solid var(--panel-line); background: #0a0e1e; color: var(--ink); flex: none; }
.tsq-av--you { border-color: var(--cyan); box-shadow: 0 0 8px rgba(54,214,224,.4); }
.tsq-av--worker { border-color: var(--heat); }
.tsq-av--spec { border-style: dashed; color: var(--ink3); }
.tsq-part__who { font-size: 12px; color: var(--ink); }
.tsq-part__act { font-size: 11px; color: var(--ink3); margin-left: auto; }
.tsq-amb { display: flex; align-items: center; gap: 7px; margin-top: 11px; font-size: 11.5px; color: var(--ink3); } .tsq-amb b { color: var(--violet); }

/* actions */
.tsq-acts { display: flex; gap: 9px; margin-top: 15px; flex-wrap: wrap; }
.tsq-btn { flex: 1; min-width: 92px; text-align: center; border-radius: 10px; padding: 11px; font: 700 11.5px var(--sans); cursor: pointer; border: 1px solid var(--panel-line); background: rgba(10,14,30,.6); color: var(--ink2); }
.tsq-btn:hover { border-color: var(--violet-line); color: var(--ink); }
.tsq-btn--go { border-color: rgba(255,210,122,.55); background: linear-gradient(135deg,rgba(255,210,122,.26),rgba(255,122,60,.14)); color: var(--ink); }
.tsq-btn--go2 { border-color: rgba(95,208,160,.5); background: linear-gradient(135deg,rgba(95,208,160,.24),rgba(54,214,224,.12)); color: var(--ink); }
.tsq-quiet-cta { font-size: 11.5px; color: var(--ink3); margin-top: 10px; } .tsq-quiet-cta a { color: var(--cyan); cursor: pointer; }

/* "next on the line" footer */
.tsq-next { flex: 0 0 auto; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--panel-line); display: flex; align-items: center; gap: 9px; font-size: 11.5px; color: var(--ink3); cursor: pointer; }
.tsq-next:hover { color: var(--ink2); } .tsq-next b { color: var(--ink2); } .tsq-next .arr { margin-left: auto; color: var(--cyan); }

/* queue at a station */
.tsq-queue { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--panel-line); }
.tsq-queue__lbl { font: 600 8.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); margin-bottom: 8px; }
.tsq-queue__row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--panel-line); border-radius: 9px; background: rgba(10,14,30,.4); margin-bottom: 6px; cursor: pointer; }
.tsq-queue__row:hover { border-color: var(--violet-line); }
.tsq-queue__pos { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font: 700 9px var(--mono); color: var(--ink3); border: 1px solid var(--panel-line); flex: none; }
.tsq-queue__ttl { font-size: 12px; color: var(--ink); }
.tsq-queue__wo { margin-left: auto; font: 600 9px var(--mono); color: var(--cyan); }
.tsq-queue__arr { font: 600 9px var(--mono); color: var(--ink3); }

.tsq-st--focus { animation: tsqFocus 1.5s ease; }
@keyframes tsqFocus { 0%,100% { box-shadow: none; } 28% { box-shadow: 0 0 0 2px var(--cyan), 0 0 24px rgba(54,214,224,.32); } }

/* ── RAIL 288px — LOCKED order: mini-map (top) · Open-product (middle) · crew (bottom) ── */
.wh-rail { grid-area: rail; display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.wh-mm { flex: none; border-radius: 14px; padding: 12px 14px; }
.wh-mm svg { display: block; width: 100%; max-height: 168px; height: auto; margin: 6px auto 0; }
.wh-mm__hint { font: 500 9.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); text-align: center; margin-top: 6px; }
.wh-mm__hint b { color: var(--violet); }
.wh-mm__zn { cursor: pointer; }
.wh-mm__zn .c { transition: fill-opacity .32s var(--u-ease-calm, cubic-bezier(.4,0,.2,1)); }
.wh-mm__zn.on .c { fill: currentColor; fill-opacity: .22; }
.wh-mm__zn .rng { opacity: 0; } .wh-mm__zn.on .rng { opacity: 1; }
.wh-mm__zn .lb { opacity: .55; } .wh-mm__zn.on .lb { opacity: 1; }
.wh-open { flex: none; border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; cursor: pointer; text-align: left; color: var(--ink); }
.wh-open__g { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; flex: none; color: #04211d; background: linear-gradient(135deg,#5fd0a0,#36d6e0); }
.wh-open__t { font-family: var(--u-font-hud, "Chakra Petch", sans-serif); font-weight: 600; font-size: 14px; }
.wh-open__s { font-size: 10.5px; color: var(--ink3); }
.wh-crew { flex: 1; min-height: 0; border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; overflow: hidden; }
.tsq-floor { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.tsq-floor__who { display: flex; }
.tsq-floor__who .tsq-av { width: 28px; height: 28px; margin-right: -7px; }
.tsq-floor__tag { font-size: 12px; color: var(--ink2); width: 100%; }

/* ── ARRIVAL BEAT — plate art lives ONLY here (Director amendment) ── */
.wh-arr { position: fixed; inset: 0; z-index: 40; overflow: hidden; visibility: hidden; opacity: 0; --wh-zc: var(--violet);
  transition: opacity .55s var(--u-ease-cine, cubic-bezier(.2,.6,.2,1)), visibility .55s; }
.wh--arriving .wh-arr { visibility: visible; opacity: 1; }
.wh-arr__im { position: absolute; inset: 0; background: center/cover no-repeat; }
.wh-arr__scr { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,6,16,.3) 30%, rgba(4,6,16,.85) 75%, rgba(4,6,16,.97)); }
.wh-arr__txt { position: absolute; left: 16px; right: 16px; bottom: 10%; text-align: center; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.wh-arr__card { width: 250px; padding: 10px; display: flex; flex-direction: column; gap: 8px; text-align: left; border-radius: 12px; }
.wh-arr__port { display: grid; place-items: center; border-radius: 10px; overflow: hidden; height: 160px; background: rgba(139,167,255,.10); font-family: var(--u-font-zone, "Michroma", sans-serif); font-size: 42px; letter-spacing: .1em; color: var(--wh-zc); }
.wh-arr__port img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wh-arr__nm { font-family: var(--u-font-hud, "Chakra Petch", sans-serif); font-weight: 600; font-size: 17px; }
.wh-arr__pills { display: flex; gap: 6px; flex-wrap: wrap; }
.wh-pill { font: 600 8.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--wh-zc); border: 1px solid var(--wh-zc); border-radius: 999px; padding: 2px 9px; background: rgba(139,167,255,.08); white-space: nowrap; }
.wh-pill.dim { color: var(--ink3); border-color: var(--panel-line); background: transparent; }
.wh-arr__kick { font: 600 10px var(--mono); letter-spacing: .42em; text-transform: uppercase; color: var(--wh-zc); }
.wh-arr__zp { font-family: var(--u-font-zone, "Michroma", sans-serif); font-size: 32px; letter-spacing: .12em; text-transform: uppercase; }
.wh-arr__zp b { color: var(--wh-zc); }
.wh-arr__voice { font-size: 15px; font-style: italic; color: var(--ink2); max-width: 56ch; }
.wh-arr__voice b { color: var(--ink); font-style: normal; }

/* ── Eva side panel (sf-evapanel shell shared; wh-eva__* body content kept) ── */
.wh-eva__msg { display: flex; gap: 11px; margin-top: 4px; flex: 0 0 auto; }
.wh-eva__orb { width: 42px; height: 42px; border-radius: 50%; flex: 0 0 auto; background: radial-gradient(circle at 35% 32%, #cdd0ff, #8b8bff 55%, #5a5ad6); box-shadow: 0 0 20px rgba(139,139,255,.5); animation: whBreathe 3.5s ease-in-out infinite; }
@keyframes whBreathe { 0%,100% { transform: scale(1); opacity: .92; } 50% { transform: scale(1.05); opacity: 1; } }
.wh-eva__txt { font-size: 12.5px; line-height: 1.5; color: var(--ink2); } .wh-eva__txt b { color: var(--heat); }
.wh-eva__sec { font-family: var(--mono); font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); margin: 18px 0 9px; flex: 0 0 auto; }
.wh-eva__roles { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; flex: 0 0 auto; }
.wh-role { font: 600 8.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink2); border: 1px solid var(--panel-line); border-radius: 8px; padding: 7px 8px; display: flex; align-items: center; gap: 6px; }
.wh-role i { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); }
.wh-eva__feed { flex: 1; min-height: 0; overflow-y: auto; margin-top: 4px; }
.wh-ev { display: flex; gap: 9px; padding: 8px 0; border-top: 1px solid var(--panel-line); font-size: 11.5px; line-height: 1.35; color: var(--ink2); }
.wh-ev .ic { font-size: 9px; margin-top: 3px; } .wh-ev b { color: var(--ink); }
.wh-ev .k { font: 600 7.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink3); }

/* ── motion (all gated) ── */
@media (prefers-reduced-motion: no-preference) {
  .tsq-st { transition: transform .32s var(--u-ease-calm, cubic-bezier(.4,0,.2,1)); }
  .tsq-st--active:hover { transform: translateY(-2px); }
  .wh--arriving .wh-arr__im { animation: whArrZoom 2.5s var(--u-ease-cine, cubic-bezier(.2,.6,.2,1)) both; }
  @keyframes whArrZoom { from { transform: scale(1.06); } to { transform: scale(1); } }
  .wh--arriving .wh-arr__txt > * { animation: whArrIn .9s var(--u-ease-cine, cubic-bezier(.2,.6,.2,1)) .15s both; }
  @keyframes whArrIn { from { opacity: 0; transform: translateY(14px); filter: blur(5px); } to { opacity: 1; transform: none; filter: none; } }
  /* structure sections in flight — forming sections breathe, the kernel glows (mock parity) */
  .wh-fs g[data-st="forming"] .sh { animation: whFsForm 2.6s ease-in-out infinite; }
  @keyframes whFsForm { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
  .wh-fs .kg { animation: whFsKg 2.2s ease-in-out infinite; }
  @keyframes whFsKg { 0%,100% { opacity: .95; } 50% { opacity: .45; } }
}
@media (prefers-reduced-motion: reduce) {
  .wh-eva__orb { animation: none; }
  .wh__stage { transition: none; }
  .wh-arr { display: none !important; } /* arrival beat skipped entirely */
}

/* ── TABLET ≤1199: board stacks, rail flattens to a horizontal shelf ── */
@media (max-width: 1199px) {
  .wh-hub { grid-template-columns: minmax(0,1fr); grid-template-rows: auto auto auto; grid-template-areas: "greet" "board" "rail"; }
  .wh[data-floor="1"] .wh-hub { grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(0,1fr); grid-template-areas: "board"; }
  .wh__stage { overflow-y: auto; }
  .wh-board, .wh-board[data-geo] { grid-template-columns: 1fr 1fr; grid-template-rows: auto; grid-template-areas: "organ organ" "ctx ctx" "info raise"; }
  .wh-board[data-geo="floor"] { grid-template-columns: 1fr 1fr; grid-template-areas: "top top" "organ organ" "ctx ctx" "woline woline"; }
  .wh-board[data-geo="floor"] .wh-woline { min-height: 200px; }
  .wh-organ { min-height: 240px; }
  .wh-board[data-geo="floor"] .wh-organ { min-height: 150px; max-height: none; }
  .wh-rail { flex-direction: row; }
  .wh-rail > * { flex: 1; min-width: 0; }
  .wh-mm svg { max-height: 120px; }
}
/* ── MOBILE ≤767: single column, rail below ── */
@media (max-width: 767px) {
  .wh__top { padding: 10px 12px; gap: 8px; }
  .wh__stage { padding: 10px 12px; }
  .wh-greet { padding: 8px 12px; }
  .wh-greet__say { display: none; }
  .wh-board, .wh-board[data-geo] { grid-template-columns: 1fr; grid-template-areas: "organ" "ctx" "info" "raise"; }
  .wh-board[data-geo="floor"] { grid-template-columns: 1fr; grid-template-areas: "top" "organ" "ctx" "woline"; }
  .wh-organ { min-height: 200px; }
  .wh-floortop { gap: 8px; }
  .wh-floortop__sub { display: none; }
  .wh-worow { grid-template-columns: auto minmax(0,1fr) auto; }
  .wh-worow--await { grid-template-columns: auto minmax(0,1fr) auto auto; }
  .wh-worow__drail, .wh-worow__crew { display: none; }
  .wh-rail { flex-direction: column; }
}

/* WO-list ↔ forge-line focus (C): band motes + stations light up when a WO is focused from the list. */
.wh-band__wm.foc-lock::after { content:''; position:absolute; inset:-6px; border-radius:50%; border:1.5px solid #fff; opacity:.9; box-shadow:0 0 10px #fff; }
.wh-band__wm.foc-hover::after { content:''; position:absolute; inset:-4px; border-radius:50%; border:1px solid #fff; opacity:.45; }
.wh-band__stn.lit > i { box-shadow:0 0 11px currentColor,0 0 4px #fff; transform:scale(1.5); }
.wh-band__stn.lit { color:#fff; }
.wh-band__stn.lit-faint > i { box-shadow:0 0 7px currentColor; transform:scale(1.25); }
/* WO-list row focus states (mirror the forge-line focus) */
.wh-worow.foc-lock { border-color: var(--cyan, #36d6e0); background: rgba(54,214,224,.07); }
.wh-worow.foc-hover { border-color: var(--violet-line, rgba(139,139,255,.3)); }