/* enteredStage.css — the LIVE entered-stage surface.
 *
 * A faithful port of the locked mock (mocks/starforge-entered-stage-library.html) —
 * its exact DOM + styling — driven by live data in src/enteredStageView.js. Every
 * selector is scoped under #sfes (the surface root) so it's a pixel port that can't
 * collide with the rest of the app's CSS (the mock uses generic names like .top/.grid).
 * Canon: STARFORGE_ENTERED_STAGE_DESIGN_LOCK_2026_06_28.md. Reduced-motion safe.
 */

#sfes {
  --bg: #04050c; --violet: #8b8bff; --violet-line: rgba(139, 139, 255, .22);
  --cyan: #36d6e0; --heat: #ffb24d; --gold: #ffd27a; --good: #5fd0a0; --rose: #ff6b6b;
  --ink: #eef0ff; --ink2: #aeb4d8; --ink3: #6b7099;
  --panel-line: rgba(150, 160, 220, .14);
  --mono: "Geist Mono", ui-monospace, Menlo, monospace; --sans: "Geist", Inter, system-ui, sans-serif;
  position: fixed; inset: 0; z-index: 1200; overflow: hidden;
  font-family: var(--sans); color: var(--ink); background: #04050c;
}
#sfes * { box-sizing: border-box; scrollbar-width: thin; scrollbar-color: rgba(150, 170, 235, .28) transparent; }
#sfes ::-webkit-scrollbar { width: 7px; height: 7px; }
#sfes ::-webkit-scrollbar-track { background: transparent; }
#sfes ::-webkit-scrollbar-thumb { background: rgba(150, 170, 235, .22); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
#sfes ::-webkit-scrollbar-thumb:hover { background: rgba(160, 180, 240, .4); background-clip: padding-box; }

#sfes .plate { position: absolute; inset: 0; z-index: 0; background-image: url('../assets/plate-briefing.png'); background-size: cover; background-position: center; opacity: .85; transition: opacity .8s ease; }
#sfes .scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(4, 5, 12, .66) 0%, rgba(4, 5, 12, .36) 30%, rgba(4, 5, 12, .62) 70%, rgba(4, 5, 12, .92) 100%); transition: opacity .8s ease; }

/* idle "screensaver" — fade the panels to reveal the plate (Director 2026-06-30, 30s). */
#sfes .top, #sfes .sh, #sfes .grid { transition: opacity .8s ease; }
#sfes.sfes--idle .top, #sfes.sfes--idle .sh, #sfes.sfes--idle .grid { opacity: 0; pointer-events: none; }
#sfes.sfes--idle .plate { opacity: 1; }
#sfes.sfes--idle .scrim { opacity: .35; }

#sfes .scr { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; }
/* header strip — a subtle translucent HUD bar (command-console vibe) so the top row reads
 * as a console rather than floating on the plate. Kept light to preserve the clean look. */
/* position+z-index so the header (and its station dropdown) stacks ABOVE the scene grid.
 * Needed because backdrop-filter makes .top a stacking context, which would otherwise trap
 * the dropdown's z-index inside the header and let the scene paint over it. */
#sfes .top { position: relative; z-index: 30; display: flex; align-items: center; gap: 13px; padding: 9px 22px 8px; flex: 0 0 auto; background: linear-gradient(180deg, rgba(10, 13, 26, .62), rgba(10, 13, 26, .22)); border-bottom: 1px solid var(--panel-line); backdrop-filter: blur(7px); }
#sfes .back { font: 600 11px var(--sans); color: var(--ink2); border: 1px solid var(--panel-line); background: rgba(10, 14, 30, .5); border-radius: 999px; padding: 6px 13px; cursor: pointer; }
#sfes .back:hover { border-color: var(--violet-line); color: var(--ink); }
#sfes .crumb { font-family: var(--mono); font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink3); }
#sfes .crumb b { color: var(--ink); } #sfes .crumb .z { color: var(--ink2); } #sfes .crumb .s { color: var(--gold); }
#sfes .crumb i { font-style: normal; margin: 0 6px; color: var(--ink3); }
#sfes .top__r { margin-left: auto; display: flex; align-items: center; gap: 9px; }
/* mode — segmented triple toggle (all options visible, no cycling) */
#sfes .modeseg { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--panel-line); background: rgba(10, 14, 30, .5); border-radius: 999px; padding: 3px; }
#sfes .modeseg__l { font: 700 8px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); padding: 0 7px 0 6px; }
#sfes .modeseg button { font: 700 9px var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink2); background: none; border: 0; border-radius: 999px; padding: 5px 11px; cursor: pointer; }
#sfes .modeseg button:hover { color: var(--ink); }
#sfes .modeseg button.on { color: #06210f; background: linear-gradient(135deg, var(--good), var(--cyan)); }

/* stage-within-zone indicator inside the station selector */
#sfes .stageno { font: 700 8px var(--mono); letter-spacing: .02em; color: var(--ink3); }
#sfes .evao { position: relative; width: 32px; height: 32px; border: 0; padding: 0; border-radius: 50%; cursor: pointer; background: radial-gradient(circle at 35% 32%, #cdd0ff, #8b8bff 55%, #5a5ad6); box-shadow: 0 0 16px rgba(139, 139, 255, .5); }
#sfes .evao:hover { box-shadow: 0 0 22px rgba(139, 139, 255, .8); }
#sfes .evao__b { position: absolute; top: -3px; right: -3px; min-width: 14px; height: 14px; border-radius: 7px; background: var(--violet); color: #0a0c1a; font: 700 8px var(--mono); display: flex; align-items: center; justify-content: center; padding: 0 3px; box-shadow: 0 0 8px var(--violet); }

/* station selector — the persistent construction line, in the header crumb. The dropdown
 * shows per-station WO OCCUPANCY (how many WOs are at each station now), grouped by zone. */
#sfes .stagesel-wrap { position: relative; display: inline-flex; align-items: center; }
#sfes .stagesel { font-family: var(--mono); font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--gold); background: rgba(255, 210, 122, .08); border: 1px solid rgba(255, 210, 122, .25); border-radius: 7px; padding: 3px 8px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
#sfes .stagesel:hover, #sfes .stagesel.open { border-color: var(--gold); background: rgba(255, 210, 122, .15); }
#sfes .stagesel .glyph { font-size: 11px; }
#sfes .stagesel .caret { font-size: 8px; opacity: .85; }
#sfes .stagemenu { position: absolute; top: calc(100% + 7px); left: 0; z-index: 50; min-width: 244px; max-height: 66vh; overflow-y: auto; background: linear-gradient(180deg, rgba(16, 20, 38, .99), rgba(10, 13, 26, .99)); border: 1px solid var(--panel-line); border-radius: 12px; padding: 8px; box-shadow: 0 22px 64px rgba(0, 0, 0, .6); }
#sfes .stagemenu[hidden] { display: none; }
#sfes .smzone { font: 700 7.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); margin: 9px 8px 4px; }
#sfes .smzone:first-child { margin-top: 2px; }
#sfes .smrow { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: none; border: 1px solid transparent; border-radius: 8px; padding: 7px 9px; cursor: pointer; text-align: left; }
#sfes .smrow:hover { background: rgba(95, 110, 200, .12); border-color: var(--violet-line); }
#sfes .smrow.here { background: rgba(255, 210, 122, .1); border-color: rgba(255, 210, 122, .3); }
#sfes .smname { font: 600 12px var(--sans); color: var(--ink2); }
#sfes .smrow.here .smname { color: var(--gold); }
#sfes .smcount { font: 700 8px var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--cyan); border: 1px solid rgba(54, 214, 224, .3); border-radius: 999px; padding: 2px 7px; white-space: nowrap; }
#sfes .smcount.zero { color: var(--ink3); border-color: var(--panel-line); }
#sfes .smrow.here .smcount { color: var(--gold); border-color: rgba(255, 210, 122, .4); }

/* idle station — no WO at this station */
#sfes .idlestation { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 11px; padding: 24px 6px; }
#sfes .idlestation .ig { font-size: 38px; color: var(--gold); opacity: .55; }
#sfes .idlestation h2 { font-size: 17px; font-weight: 300; color: var(--ink2); margin: 0; }
#sfes .idlestation p { font-size: 12px; color: var(--ink3); max-width: 380px; line-height: 1.6; margin: 0; } #sfes .idlestation p b { color: var(--ink2); }

/* pipeline navigator — zones × stages */
#sfes .pipe { display: flex; gap: 14px; padding: 0 22px 7px; flex: 0 0 auto; overflow-x: auto; align-items: flex-end; }
#sfes .pz { display: flex; flex-direction: column; gap: 4px; flex: 0 0 auto; }
#sfes .pz__l { font: 700 7.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); }
#sfes .pz__s { display: flex; gap: 4px; }
#sfes .pp { font: 700 9px var(--sans); color: var(--ink3); border: 1px solid var(--panel-line); background: rgba(10, 14, 30, .5); border-radius: 8px; padding: 6px 10px; cursor: pointer; white-space: nowrap; }
#sfes .pp:hover { border-color: var(--violet-line); color: var(--ink2); }
#sfes .pp.done { color: var(--ink2); }
#sfes .pp.now { color: #06210f; background: linear-gradient(135deg, var(--good), var(--cyan)); border-color: transparent; font-weight: 800; }
#sfes .pp.stub { opacity: .4; cursor: default; } #sfes .pp.stub:hover { border-color: var(--panel-line); color: var(--ink3); }

#sfes .sh { padding: 2px 24px 5px; flex: 0 0 auto; }
#sfes .sh .eye { font-family: var(--mono); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
#sfes .sh h1 { font-size: 17px; font-weight: 200; margin: 1px 0 0; color: var(--ink); }
#sfes .sh h1 .hl { color: var(--gold); font-weight: 700; } #sfes .sh h1 b { font-weight: 700; color: var(--ink); }

#sfes .grid { flex: 1; min-height: 0; display: grid; grid-template-columns: 258px 1fr 232px; gap: 15px; padding: 0 22px 12px; overflow: hidden; }
#sfes .panel { border: 1px solid var(--panel-line); border-radius: 16px; background: rgba(8, 11, 24, .64); backdrop-filter: blur(9px); min-height: 0; display: flex; flex-direction: column; }

/* envoy card.
 * NOTE: the app's workshop.css defines a GLOBAL `.amb { display:flex; flex-wrap:wrap; gap:6px }`
 * (its "ambient chips" class). Our panel is `.panel.amb`, so that global leaks flex-wrap:wrap +
 * gap into our vertical column — which made the lower sections (pillar bars, stops) WRAP into a
 * second column to the right (the "clipped stop beside the portrait" bug). We pin the column
 * layout explicitly here so nothing leaks in. (Lesson for future mock ports: namespace classes.) */
#sfes .amb { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 0; padding: 16px 14px; align-items: center; text-align: center; overflow-y: auto;
  /* Card tone (mock alignment 2026-07-07): the flat .panel bg reads cold under the
   * portrait; a subtle warm-amber top lift fading to the standard dark gives the
   * lit-top→dark-bottom tone of the zone-lobby mock. Tune the top stop for warmth. */
  background: linear-gradient(180deg, rgba(52, 42, 30, .5) 0%, rgba(20, 17, 26, .62) 34%, rgba(8, 11, 24, .64) 72%); }
#sfes .amb__hero { align-self: stretch; position: relative; flex: 0 0 auto; margin: -16px -14px 8px; height: 188px; overflow: hidden; border-radius: 15px 15px 0 0; }
#sfes .amb__face { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; }
/* temp framing for portrait-aspect envoys (not yet on the canonical landscape spec): show
 * the whole figure (contain) on a framed backdrop instead of a zoomed cover-crop. */
#sfes .amb__face--contain { object-fit: contain; object-position: 50% 100%; }
#sfes .amb__hero--framed { background: radial-gradient(120% 100% at 50% 26%, rgba(40, 48, 90, .55), rgba(8, 11, 24, .96)); }
#sfes .amb__ph { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 36%, rgba(40, 48, 90, .6), rgba(8, 11, 24, .95)); }
#sfes .amb__ph .gph { position: absolute; left: 50%; top: 46%; width: 120px; height: 120px; transform: translate(-50%, -50%); opacity: .6; }
#sfes .amb__ph .gph .g1 { transform-origin: 50% 50%; animation: sfes-spin 18s linear infinite; }
#sfes .amb__ph .gph .g2 { transform-origin: 50% 50%; animation: sfes-spin 11s linear infinite reverse; }
#sfes .amb__ph .gc { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); font-size: 30px; color: var(--gold); text-shadow: 0 0 16px rgba(255, 178, 77, .5); }
@keyframes sfes-spin { to { transform: rotate(360deg); } }
@keyframes sfes-pulse { 0%, 100% { transform: scale(1); opacity: .92; } 50% { transform: scale(1.05); opacity: 1; } }
#sfes .amb__hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(4, 6, 14, .46) 0%, rgba(4, 6, 14, .06) 18%, transparent 44%, transparent 78%, rgba(4, 6, 14, .2) 90%, rgba(4, 6, 14, .5) 100%); }
#sfes .amb__herotext { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; padding: 12px 13px 6px; pointer-events: none; }
#sfes .amb__name { font-size: 21px; font-weight: 700; text-shadow: 0 2px 9px rgba(0, 0, 0, .85); }
#sfes .amb__cls { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink); text-shadow: 0 1px 7px rgba(0, 0, 0, .9); margin-top: 4px; }
#sfes .amb__cls .bar { color: var(--ink3); margin: 0 5px; font-weight: 400; }
/* Cohort bar (A3) — co-op presence in the Ambassador panel (single-player shape for now) */
#sfes .sf-cohort { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--violet-line); background: rgba(139, 139, 255, .07); border-radius: 10px; margin: 12px 0 2px; }
#sfes .sf-cohort__l { font: 700 8px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #b9b9ff; }
#sfes .sf-cohort__av { width: 22px; height: 22px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font: 700 7.5px var(--mono); color: #cfd3f5; background: rgba(10, 14, 30, .6); border: 1px solid var(--panel-line); }
#sfes .sf-cohort__av.host { color: #06210f; background: linear-gradient(135deg, #5fd0a0, #36d6e0); border: 0; }
#sfes .sf-cohort__pill { font: 700 7.5px var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink3); padding: 4px 9px; border-radius: 999px; border: 1px solid var(--panel-line); }
#sfes .sf-cohort__pill.join { color: #b9b9ff; border-color: var(--violet-line); cursor: default; }
#sfes .sf-cohort__pill.solo { margin-left: auto; }
/* Vote tally (A3) — the standing vote on the chosen decision option */
#sfes .sf-votes { display: flex; align-items: center; gap: 6px; margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--panel-line); }
#sfes .sf-vav { width: 18px; height: 18px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font: 700 7px var(--mono); color: #06210f; background: linear-gradient(135deg, #5fd0a0, #36d6e0); }
#sfes .sf-vtally { font: 600 9px var(--mono); color: #7fe0b4; letter-spacing: .03em; }
/* Consensus clock (A3) — honest reframe of the decision auto-advance caption */
#sfes .sfes-consensus { font: 600 9px var(--mono); color: var(--gold, #ffd27a); letter-spacing: .04em; padding: 4px 22px 0; }
#sfes .sfes-consensus[hidden] { display: none; }
/* On-Station = the lobby (A3): honest observer line + the "who's in" cohort assembly */
#sfes .sfes-obs { display: inline-flex; align-items: center; gap: 8px; font: 600 10px var(--mono); color: #b9b9ff; background: rgba(139, 139, 255, .08); border: 1px solid var(--violet-line); border-radius: 999px; padding: 6px 12px; margin-bottom: 12px; }
#sfes .sfes-obs .dot { width: 7px; height: 7px; border-radius: 999px; background: #7fe0b4; box-shadow: 0 0 8px #7fe0b4; animation: sfesObsPulse 1.8s ease-in-out infinite; }
@keyframes sfesObsPulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
#sfes .sfes-lobbybar { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--violet-line); background: rgba(139, 139, 255, .06); border-radius: 11px; }
#sfes .sfes-lobbybar__l { font: 700 9px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #b9b9ff; }
#sfes .sfes-lobbybar__note { margin-left: auto; font: 600 9.5px var(--mono); color: var(--ink3); }
#sfes .amb__sec { width: 100%; text-align: left; font: 700 8px var(--mono); letter-spacing: .11em; text-transform: uppercase; color: var(--ink3); margin: 8px 0 5px; display: flex; align-items: center; gap: 7px; }
#sfes .amb__sec::after { content: ''; flex: 1; height: 1px; background: var(--panel-line); }
#sfes .amb__ways { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; justify-content: center; }
#sfes .way { position: relative; font-size: 15px; line-height: 1; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--panel-line); border-radius: 9px; color: var(--ink2); background: rgba(10, 14, 30, .5); cursor: default; }
#sfes .way.m { color: var(--gold); border-color: rgba(255, 210, 122, .45); box-shadow: 0 0 9px rgba(255, 210, 122, .18); }
#sfes .way:hover { border-color: var(--violet-line); color: var(--ink); }
#sfes .way:hover::after { content: attr(data-l); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); white-space: nowrap; font: 700 8px var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink); background: rgba(16, 20, 38, .99); border: 1px solid var(--panel-line); border-radius: 7px; padding: 6px 9px; z-index: 6; box-shadow: 0 6px 18px rgba(0, 0, 0, .55); pointer-events: none; }
#sfes .way:hover::before { content: ''; position: absolute; bottom: calc(100% + 3px); left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--panel-line); z-index: 6; }
#sfes .amb__xp { width: 100%; }
#sfes .xp__top { display: flex; justify-content: space-between; align-items: baseline; }
#sfes .xp__lvl { font: 700 11.5px var(--sans); color: var(--gold); } #sfes .xp__n { font: 600 8px var(--mono); color: var(--ink3); }
#sfes .xp__bar { height: 6px; border-radius: 3px; background: rgba(150, 160, 220, .12); overflow: hidden; margin-top: 6px; }
#sfes .xp__bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--heat)); border-radius: 3px; box-shadow: 0 0 8px rgba(255, 178, 77, .4); }
#sfes .amb__pillars { width: 100%; display: flex; flex-direction: column; gap: 5px; }
#sfes .pil { display: flex; align-items: center; gap: 9px; }
#sfes .pil__l { font: 600 8.5px var(--mono); text-transform: uppercase; letter-spacing: .03em; color: var(--ink3); width: 74px; text-align: left; flex: 0 0 auto; }
#sfes .pil__b { flex: 1; height: 5px; border-radius: 3px; background: rgba(150, 160, 220, .1); overflow: hidden; }
#sfes .pil__b i { display: block; height: 100%; border-radius: 3px; opacity: .9; }
/* Stops sit directly under the pillar affinity (contiguous) — NOT margin-top:auto, which
 * floated them to the panel's bottom edge (a large gap under the pillars + the icons
 * reading as misplaced when the panel is taller than the content). */
#sfes .amb__stops { width: 100%; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--panel-line); display: flex; gap: 8px; justify-content: center; }
#sfes .stop { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; font-size: 15px; color: var(--ink2); border: 1px solid var(--panel-line); background: rgba(10, 14, 30, .5); border-radius: 9px; padding: 9px 0; cursor: pointer; }
#sfes .stop:hover { border-color: var(--violet-line); background: rgba(95, 110, 200, .12); }
#sfes .stop .b { position: absolute; top: 3px; right: 6px; font: 700 8px var(--mono); color: var(--gold); }

/* sheet overlay */
#sfes .sheet { position: absolute; inset: 0; z-index: 40; display: none; align-items: center; justify-content: center; background: rgba(2, 4, 12, .66); backdrop-filter: blur(3px); }
#sfes .sheet.on { display: flex; }
#sfes .sheet__card { position: relative; width: min(560px, 86vw); max-height: 82vh; overflow-y: auto; background: linear-gradient(180deg, rgba(16, 20, 38, .98), rgba(10, 13, 26, .98)); border: 1px solid var(--panel-line); border-radius: 16px; padding: 22px 24px; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
#sfes .sheet__x { position: absolute; top: 13px; right: 14px; background: none; border: 1px solid var(--panel-line); color: var(--ink3); width: 28px; height: 28px; border-radius: 8px; cursor: pointer; }
#sfes .sheet__x:hover { color: var(--ink); border-color: var(--violet-line); }
#sfes .sheet__h { display: flex; align-items: center; gap: 9px; font: 700 12px var(--sans); color: var(--ink); margin-bottom: 3px; } #sfes .sheet__h .gl { font-size: 17px; }
#sfes .sheet__sub { font: 600 8.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); margin-bottom: 15px; }
#sfes .layer { border: 1px solid var(--panel-line); border-left: 2px solid var(--violet-line); border-radius: 10px; padding: 10px 13px; margin-bottom: 9px; background: rgba(10, 14, 30, .4); }
#sfes .layer__k { font: 700 8px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--violet); margin-bottom: 4px; }
#sfes .layer__b { font-size: 12.5px; line-height: 1.5; color: var(--ink2); } #sfes .layer__b b { color: var(--ink); }
#sfes .evagrid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
#sfes .evacard { border: 1px solid var(--panel-line); border-radius: 11px; padding: 11px 12px; background: rgba(10, 14, 30, .45); }
#sfes .evacard__t { display: flex; align-items: center; gap: 7px; font: 700 10px var(--sans); color: var(--ink2); } #sfes .evacard__t .ic { font-size: 14px; color: var(--ink3); }
#sfes .evacard__t .dot { margin-left: auto; width: 7px; height: 7px; border-radius: 50%; background: var(--ink3); opacity: .4; }
#sfes .evacard__p { font: 700 7.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); margin-top: 5px; }
#sfes .evacard__n { font-size: 11px; color: var(--ink3); line-height: 1.45; margin-top: 5px; }
#sfes .evacard.on { border-color: rgba(139, 139, 255, .4); background: rgba(139, 139, 255, .08); }
#sfes .evacard.on .ic { color: var(--violet); } #sfes .evacard.on .dot { background: var(--good); opacity: 1; box-shadow: 0 0 7px var(--good); } #sfes .evacard.on .evacard__p { color: var(--good); }
#sfes .tr { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--panel-line); } #sfes .tr:last-child { border-bottom: 0; }
#sfes .tr__w { font: 700 9px var(--mono); text-transform: uppercase; letter-spacing: .05em; width: 64px; flex: 0 0 auto; padding-top: 2px; } #sfes .tr__w.envoy { color: var(--gold); } #sfes .tr__w.you { color: var(--cyan); }
#sfes .tr__t { font-size: 12.5px; line-height: 1.5; color: var(--ink2); }

/* Eva — right side panel (consistent with the workshop home), opened by the top-right orb. */
#sfes .evapanel { position: absolute; top: 0; right: 0; bottom: 0; width: 304px; z-index: 60; border-left: 1px solid var(--panel-line); background: rgba(8, 11, 24, .94); backdrop-filter: blur(13px); padding: 16px 18px; transform: translateX(100%); transition: transform .3s cubic-bezier(.4, 0, .2, 1); box-shadow: -20px 0 50px rgba(0, 0, 0, .5); display: flex; flex-direction: column; }
#sfes .evapanel.on { transform: translateX(0); }
#sfes .evapanel__top { display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; margin-bottom: 13px; }
#sfes .evapanel__lbl { font: 700 11px var(--sans); color: var(--violet); }
#sfes .evapanel__x { border: 0; background: none; color: var(--ink3); font-size: 15px; cursor: pointer; } #sfes .evapanel__x:hover { color: var(--ink); }
#sfes .evapanel__body { flex: 1; min-height: 0; overflow-y: auto; }

/* scene */
#sfes .scene { position: relative; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
#sfes .banner { display: flex; gap: 11px; padding: 10px 18px; border-bottom: 1px solid var(--panel-line); flex: 0 0 auto; }
#sfes .banner__o { width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto; background: radial-gradient(circle at 38% 34%, #fff, var(--gold) 50%, rgba(255, 140, 60, .2)); box-shadow: 0 0 14px rgba(255, 178, 77, .4); }
#sfes .banner__t { font-size: 13.5px; line-height: 1.5; color: var(--ink); }
#sfes .banner__k { font-family: var(--mono); font-size: 8px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); margin-bottom: 3px; }
#sfes .body { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 18px; }

/* Dialogue flow — two distinct affordances:
 *  • thinking bar (#sfes-flowbar) — an INDETERMINATE shimmer = the envoy working (composing the
 *    artefact / applying its own picks);
 *  • Continue-button fill (.pbtn__fill) — a DETERMINATE L→R fill = the mode auto-advance timer,
 *    armed AFTER the dialogue finishes revealing (assisted/autonomous only; manual never arms). */
#sfes .sfes-flowbar { flex: 0 0 auto; height: 2px; margin: 0 18px; background: rgba(150, 160, 220, .1); border-radius: 2px; overflow: hidden; opacity: 0; transition: opacity .22s ease; }
#sfes .sfes-flowbar.on { opacity: 1; }
#sfes .sfes-flowbar i { display: block; height: 100%; width: 38%; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--cyan, #36d6e0), var(--violet, #8b8bff), transparent); box-shadow: 0 0 8px rgba(54, 214, 224, .5); transform: translateX(-120%); }
#sfes .sfes-flowbar.indet i { animation: sfesThink 1.15s ease-in-out infinite; }
@keyframes sfesThink { 0% { transform: translateX(-120%); } 100% { transform: translateX(360%); } }

/* Continue-button fill = the auto-advance countdown */
#sfes .pbtn { position: relative; overflow: hidden; }
#sfes .pbtn__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: rgba(255, 255, 255, .16); pointer-events: none; }
#sfes .pbtn__t { position: relative; z-index: 1; }

#sfes .sfes-prime > * { opacity: 0; } /* blocks held hidden until they flow in, one by one */
@keyframes sfesRise { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { #sfes .sfes-prime > * { opacity: 1; } #sfes .pbtn__fill, #sfes .sfes-flowbar.indet i { animation: none !important; transition: none !important; } }

/* Post-approval ceremony → landing — the WO sealing + moving out of the stage, then the onward choice. */
#sfes .sfes-cere { position: absolute; inset: 0; z-index: 60; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; background: radial-gradient(120% 90% at 50% 38%, rgba(10, 16, 34, .86), rgba(4, 5, 12, .95)); backdrop-filter: blur(10px); opacity: 0; transition: opacity .4s ease; }
#sfes .sfes-cere.on { opacity: 1; }
#sfes .sfes-cere__beat, #sfes .sfes-cere__landed { display: flex; flex-direction: column; align-items: center; gap: 13px; animation: sfesRise .5s ease both; }
#sfes .sfes-cere__landed { max-width: 460px; }
#sfes .sfes-cere__seal { width: 92px; height: 92px; border-radius: 50%; background: radial-gradient(circle at 40% 36%, #fff, var(--gold) 46%, rgba(255, 140, 60, .25) 72%, transparent); box-shadow: 0 0 40px rgba(255, 178, 77, .5); animation: sfesSeal 1.7s ease forwards; }
@keyframes sfesSeal { 0% { transform: scale(.4); opacity: 0; } 35% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); opacity: 1; box-shadow: 0 0 70px rgba(255, 178, 77, .85); } }
#sfes .sfes-cere__cap { font-family: var(--mono); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--heat); }
#sfes .sfes-cere__name { font-size: 19px; font-weight: 300; color: var(--ink); }
#sfes .sfes-cere__tick { width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 26px; color: #06210f; background: linear-gradient(135deg, var(--good, #5fd0a0), var(--cyan, #36d6e0)); box-shadow: 0 0 28px rgba(95, 208, 160, .5); }
#sfes .sfes-cere__cap2 { font-size: 22px; font-weight: 650; color: var(--ink); }
#sfes .sfes-cere__sub { font-size: 13.5px; line-height: 1.55; color: var(--ink2); } #sfes .sfes-cere__sub b { color: var(--ink); }
#sfes .sfes-cere__cta { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 11px; }
#sfes .sfes-cbtn { border: 1px solid var(--panel-line); background: rgba(10, 14, 30, .6); color: var(--ink2); border-radius: 11px; padding: 11px 18px; font: 700 12.5px var(--sans); cursor: pointer; }
#sfes .sfes-cbtn:hover { border-color: var(--violet-line); color: var(--ink); }
#sfes .sfes-cbtn--go { border-color: rgba(95, 208, 160, .5); background: linear-gradient(135deg, rgba(95, 208, 160, .3), rgba(54, 214, 224, .15)); color: var(--ink); }
#sfes .sfes-cbtn--go:hover { filter: brightness(1.08); box-shadow: 0 0 20px rgba(95, 208, 160, .35); }
@media (prefers-reduced-motion: reduce) { #sfes .sfes-cere, #sfes .sfes-cere__beat, #sfes .sfes-cere__landed, #sfes .sfes-cere__seal { animation: none !important; transition: none !important; opacity: 1; } }

#sfes .turnfoot { display: flex; align-items: center; gap: 10px; padding: 11px 18px; border-top: 1px solid var(--panel-line); flex: 0 0 auto; }
#sfes .verbs { display: flex; gap: 5px; }
#sfes .vb { font: 600 10px var(--sans); color: var(--ink3); border: 1px solid transparent; background: none; border-radius: 8px; padding: 6px 9px; cursor: pointer; } #sfes .vb:hover { color: var(--ink2); border-color: var(--panel-line); }
#sfes .prim { margin-left: auto; display: flex; gap: 8px; }
#sfes .pbtn { border: 1px solid rgba(95, 208, 160, .5); background: linear-gradient(135deg, rgba(95, 208, 160, .32), rgba(54, 214, 224, .16)); color: var(--ink); border-radius: 11px; padding: 11px 22px; font: 700 13px var(--sans); cursor: pointer; }
#sfes .pbtn:hover { filter: brightness(1.06); box-shadow: 0 0 22px rgba(95, 208, 160, .32); }
#sfes .pbtn.locked { border-color: rgba(255, 107, 107, .5); background: rgba(255, 107, 107, .12); color: #ffb0b0; cursor: not-allowed; }
#sfes .pbtn.ghost { border-color: var(--panel-line); background: rgba(10, 14, 30, .6); color: var(--ink2); } #sfes .pbtn.ghost:hover { border-color: var(--violet-line); color: var(--ink); box-shadow: none; }
#sfes .pbtn.gold { border-color: rgba(255, 210, 122, .5); background: linear-gradient(135deg, rgba(255, 210, 122, .28), rgba(255, 178, 77, .14)); }
/* Ceremonial Begin CTA (P7.5 mock-fidelity) — the mock's solid gold kernel→heat "▶ Begin · <stage>",
   dark text, the loudest button in the lobby (drops the cohort into the run). */
#sfes .pbtn.begin { border-color: var(--gold); background: linear-gradient(180deg, var(--gold), var(--heat)); color: #1a1206; font-weight: 750; padding: 12px 28px; box-shadow: 0 0 28px -8px var(--heat); }
#sfes .pbtn.begin:hover { filter: brightness(1.06); box-shadow: 0 0 34px -6px var(--heat); }

/* content atoms */
#sfes .eyebrow { font-family: var(--mono); font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); margin: 0 0 8px; }
#sfes .lead { font-size: 13px; color: var(--ink2); line-height: 1.6; } #sfes .lead b { color: var(--ink); }
#sfes .art { border: 1px solid var(--panel-line); border-radius: 13px; background: rgba(10, 14, 30, .45); overflow: hidden; margin-bottom: 12px; }
#sfes .art__h { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--panel-line); font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
#sfes .art__b { padding: 12px 14px; }
#sfes .dl { display: grid; grid-template-columns: 92px 1fr; gap: 7px 12px; font-size: 12.5px; }
#sfes .dl dt { font-family: var(--mono); font-size: 8.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink3); padding-top: 2px; }
#sfes .dl dd { margin: 0; color: var(--ink2); line-height: 1.45; }
#sfes .chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
#sfes .ch2 { font: 600 9px var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink2); border: 1px solid var(--panel-line); border-radius: 999px; padding: 5px 10px; } #sfes .ch2 b { color: var(--gold); } #sfes .ch2.rec { border-color: rgba(255, 210, 122, .4); }
#sfes .rationale { font-size: 11px; color: var(--ink3); margin-top: 7px; line-height: 1.45; }
#sfes .est { display: flex; align-items: baseline; gap: 12px; margin-top: 4px; } #sfes .est .big { font-size: 22px; font-weight: 300; } #sfes .est .rng { font-family: var(--mono); font-size: 10px; color: var(--ink3); } #sfes .est .ind { font-family: var(--mono); font-size: 8.5px; color: var(--ink3); text-transform: uppercase; letter-spacing: .05em; }
#sfes .aclist { display: flex; flex-direction: column; gap: 6px; } #sfes .aclist div { font-size: 12px; color: var(--ink2); } #sfes .aclist .ck { color: var(--cyan); margin-right: 6px; }
#sfes .risks { display: flex; flex-direction: column; gap: 6px; } #sfes .risks div { font-size: 12px; color: var(--ink2); } #sfes .risks .rk { color: var(--heat); margin-right: 6px; }

/* findings / lists */
#sfes .finds { display: flex; flex-direction: column; gap: 7px; }
#sfes .fnd { border: 1px solid var(--panel-line); border-radius: 10px; background: rgba(10, 14, 30, .42); padding: 9px 12px; } #sfes .fnd.flag { border-left: 2px solid var(--heat); }
#sfes .fnd__t { font-size: 12.5px; font-weight: 600; } #sfes .fnd__t .pin { float: right; font: 700 7px var(--mono); color: var(--heat); text-transform: uppercase; }
#sfes .fnd__b { font-size: 11px; color: var(--ink3); margin-top: 3px; line-height: 1.45; }
#sfes .fnd__d { font: 700 7.5px var(--mono); color: var(--cyan); margin-top: 5px; text-transform: uppercase; letter-spacing: .04em; }

/* sequence (Plan steps) */
#sfes .seq { display: flex; flex-direction: column; gap: 0; }
#sfes .seqs { display: flex; gap: 11px; padding: 8px 0; border-bottom: 1px solid var(--panel-line); } #sfes .seqs:last-child { border-bottom: 0; }
#sfes .seqs__n { font: 700 9px var(--mono); color: var(--good); flex: 0 0 auto; width: 48px; } #sfes .seqs__t { font-size: 12px; color: var(--ink2); line-height: 1.45; } #sfes .seqs__t b { color: var(--ink); }

/* verdict */
#sfes .vdict { display: flex; flex-direction: column; gap: 7px; }
#sfes .vdict .vd { display: flex; gap: 10px; align-items: baseline; border: 1px solid var(--panel-line); border-radius: 9px; background: rgba(10, 14, 30, .42); padding: 9px 12px; }
#sfes .vdict .vk { font: 700 8.5px var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--ink3); width: 96px; flex: 0 0 auto; } #sfes .vdict .vv { font-size: 12.5px; color: var(--ink2); }

/* turn slots + decisions */
#sfes .slots { display: flex; flex-direction: column; height: 100%; }
#sfes .ctx { border: 1px solid var(--panel-line); border-left: 2px solid rgba(255, 210, 122, .5); border-radius: 10px; background: rgba(255, 210, 122, .04); padding: 10px 13px; margin-bottom: 9px; flex: 0 0 auto; }
#sfes .ctx__k { font: 700 8px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); opacity: .85; margin-bottom: 5px; }
#sfes .ctx__b { font-size: 12px; line-height: 1.45; color: var(--ink2); } #sfes .ctx__b b { color: var(--ink); }
#sfes .q { border: 1px solid var(--panel-line); border-radius: 12px; background: rgba(10, 14, 30, .4); padding: 11px 14px; }
#sfes .q.boss { border-color: rgba(255, 107, 107, .36); background: rgba(255, 107, 107, .05); }
#sfes .q__top { display: flex; align-items: flex-start; gap: 8px; justify-content: space-between; } #sfes .q__q { font-size: 13.5px; font-weight: 600; }
#sfes .q__sev { font: 700 7.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink3); border: 1px solid var(--panel-line); border-radius: 999px; padding: 3px 8px; white-space: nowrap; } #sfes .q__sev.boss { color: var(--rose); border-color: rgba(255, 107, 107, .5); }
#sfes .opts { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
#sfes .opt { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--panel-line); border-radius: 10px; background: rgba(10, 14, 30, .5); padding: 8px 11px; cursor: pointer; transition: .13s; } #sfes .opt:hover { border-color: var(--violet-line); }
#sfes .opt.pick { border-style: dashed; border-color: var(--gold); } #sfes .opt.sel { border-color: var(--good); background: rgba(95, 208, 160, .1); box-shadow: 0 0 0 1px var(--good) inset; }
#sfes .opt .rad { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--ink3); flex: 0 0 auto; margin-top: 2px; } #sfes .opt.sel .rad { border-color: var(--good); background: radial-gradient(circle, #fff 30%, var(--good) 32%); }
#sfes .opt .ol { font-size: 12.5px; font-weight: 600; } #sfes .opt .ot { font-size: 11px; color: var(--ink3); margin-top: 1px; }
#sfes .opt .imp { display: flex; gap: 4px; margin-top: 5px; } #sfes .opt .imp span { font: 700 7px var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--ink3); border: 1px solid var(--panel-line); border-radius: 4px; padding: 2px 5px; }
#sfes .opt .tag { font: 700 7px var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--gold); border: 1px solid rgba(255, 210, 122, .4); border-radius: 999px; padding: 2px 7px; margin-left: auto; align-self: center; }
#sfes .esc { display: flex; gap: 14px; margin-top: 7px; font: 600 10px var(--sans); color: var(--ink3); } #sfes .esc button { background: none; border: 0; color: var(--ink3); cursor: pointer; text-decoration: underline dotted; } #sfes .esc button:hover { color: var(--ink2); }
#sfes .deflt { font-family: var(--mono); font-size: 9px; color: var(--good); margin-top: 9px; }

/* compare-slide (A/B/C) */
#sfes .cmp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
#sfes .cmpc { border: 1px solid var(--panel-line); border-radius: 11px; background: rgba(10, 14, 30, .5); padding: 10px 11px; cursor: pointer; transition: .13s; position: relative; }
#sfes .cmpc:hover { border-color: var(--violet-line); }
#sfes .cmpc.sel { border-color: var(--good); background: rgba(95, 208, 160, .1); box-shadow: 0 0 0 1px var(--good) inset; }
#sfes .cmpc.rec::after { content: '★ rec'; position: absolute; top: 8px; right: 9px; font: 700 7px var(--mono); color: var(--gold); }
#sfes .cmpc__l { font: 700 8px var(--mono); color: var(--ink3); }
#sfes .cmpc__t { font-size: 12.5px; font-weight: 650; margin-top: 3px; }
#sfes .cmpc__s { font-size: 10.5px; color: var(--ink3); margin-top: 4px; line-height: 1.4; }
#sfes .cmpc__m { display: flex; gap: 4px; margin-top: 7px; flex-wrap: wrap; }
#sfes .cmpc__m span { font: 700 7px var(--mono); text-transform: uppercase; color: var(--ink3); border: 1px solid var(--panel-line); border-radius: 4px; padding: 2px 5px; }

/* verdict-picker (rows + verb buttons) */
#sfes .vrows { display: flex; flex-direction: column; gap: 7px; margin-top: 8px; }
#sfes .vrow { border: 1px solid var(--panel-line); border-radius: 10px; background: rgba(10, 14, 30, .45); padding: 9px 11px; }
#sfes .vrow.sev-blocker { border-left: 2px solid var(--rose); } #sfes .vrow.sev-notable { border-left: 2px solid var(--heat); } #sfes .vrow.pass { border-left: 2px solid var(--good); }
#sfes .vrow__t { display: flex; align-items: center; gap: 8px; justify-content: space-between; } #sfes .vrow__n { font-size: 12px; font-weight: 600; } #sfes .vrow__id { font: 700 7.5px var(--mono); color: var(--ink3); }
#sfes .vrow__b { font-size: 10.5px; color: var(--ink3); margin-top: 3px; line-height: 1.4; }
#sfes .vbtns { display: flex; gap: 5px; margin-top: 7px; flex-wrap: wrap; }
#sfes .vb2 { font: 700 8px var(--mono); text-transform: uppercase; letter-spacing: .03em; color: var(--ink3); border: 1px solid var(--panel-line); background: rgba(10, 14, 30, .5); border-radius: 7px; padding: 5px 9px; cursor: pointer; } #sfes .vb2:hover { border-color: var(--violet-line); color: var(--ink2); }
#sfes .vb2.sel { color: #06210f; background: var(--good); border-color: transparent; }

/* squad + captain (Align) */
#sfes .squad { display: flex; flex-direction: column; gap: 7px; margin-top: 8px; }
#sfes .sq { display: flex; gap: 11px; align-items: flex-start; border: 1px solid var(--panel-line); border-radius: 11px; padding: 8px 12px; background: rgba(10, 14, 30, .5); cursor: pointer; transition: .13s; }
#sfes .sq:hover { border-color: var(--violet-line); }
#sfes .sq.sel { border-color: var(--gold); background: rgba(255, 210, 122, .08); box-shadow: 0 0 0 1px rgba(255, 210, 122, .3) inset; }
#sfes .sq__ic { width: 30px; height: 30px; border-radius: 8px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; font-size: 14px; border: 1px solid var(--panel-line); background: rgba(10, 14, 30, .6); margin-top: 1px; }
#sfes .sq__m { flex: 1; min-width: 0; }
#sfes .sq__top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#sfes .sq__n { font-size: 12.5px; font-weight: 600; }
#sfes .sq__role { font: 700 7px var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--cyan); border: 1px solid rgba(54, 214, 224, .4); border-radius: 999px; padding: 2px 7px; }
#sfes .sq__c { font: 600 8px var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--ink3); }
#sfes .sq__bio { font-size: 10.5px; color: var(--ink3); line-height: 1.4; margin-top: 4px; }
#sfes .sq__cap { flex: 0 0 auto; align-self: center; font: 700 7.5px var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--gold); border: 1px solid rgba(255, 210, 122, .4); border-radius: 999px; padding: 3px 8px; opacity: 0; }
#sfes .sq.sel .sq__cap { opacity: 1; }
#sfes .capnote { margin-top: 9px; font-size: 11px; color: var(--ink2); line-height: 1.45; border: 1px solid rgba(255, 210, 122, .3); border-radius: 9px; background: rgba(255, 210, 122, .05); padding: 9px 12px; } #sfes .capnote b { color: var(--gold); }
#sfes .capnote.empty { color: var(--ink3); border-color: var(--panel-line); background: rgba(10, 14, 30, .4); }
#sfes .capnote .flag { color: var(--ink3); font: 600 8px var(--mono); text-transform: uppercase; letter-spacing: .04em; display: block; margin-top: 5px; }

/* confidence rings (Align synthesis · framing) */
#sfes .cans { display: flex; flex-direction: column; gap: 9px; }
#sfes .can { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--panel-line); border-radius: 11px; padding: 10px 13px; background: rgba(10, 14, 30, .4); }
#sfes .ring { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; background: conic-gradient(var(--c) calc(var(--p) * 1%), rgba(150, 160, 220, .13) 0); display: flex; align-items: center; justify-content: center; position: relative; }
#sfes .ring::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: #0b0e1c; }
#sfes .ring span { position: relative; z-index: 1; font: 700 8.5px var(--mono); color: var(--c); }
#sfes .can__q { font-size: 10.5px; color: var(--ink3); } #sfes .can__a { font-size: 12.5px; color: var(--ink); margin-top: 2px; font-weight: 600; }
#sfes .can__n { font-size: 10.5px; color: var(--ink3); margin-top: 4px; line-height: 1.45; } #sfes .can__cf { font: 700 7px var(--mono); text-transform: uppercase; letter-spacing: .05em; margin-top: 5px; }

/* variant visual renders (Prototype · framing) */
#sfes .mockrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
#sfes .mockrow figure { margin: 0; } #sfes .mockrow figcaption { font: 700 8px var(--mono); text-transform: uppercase; color: var(--ink3); text-align: center; margin-top: 6px; letter-spacing: .05em; }
#sfes .mock { border: 1px solid var(--panel-line); border-radius: 12px; background: linear-gradient(180deg, rgba(18, 22, 42, .9), rgba(10, 13, 26, .9)); padding: 13px 12px; display: flex; flex-direction: column; align-items: center; gap: 7px; min-height: 100px; justify-content: center; }
#sfes .mock__ring { position: relative; flex: 0 0 auto; } #sfes .mock__ring svg { display: block; }
#sfes .mock__pct { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--ink); }
#sfes .mock__lbl { font-size: 11px; color: var(--ink2); font-weight: 600; } #sfes .mock__date { font: 600 9px var(--mono); color: var(--cyan); } #sfes .mock__hint { font: 600 8px var(--mono); color: var(--ink3); text-transform: uppercase; }
#sfes .mock__big { display: flex; align-items: center; gap: 12px; } #sfes .mock__bn { font: 800 30px var(--sans); color: var(--good); line-height: 1; }

/* idea */
#sfes .idea { border: 1px solid rgba(255, 210, 122, .36); border-radius: 13px; background: radial-gradient(120% 90% at 50% -10%, rgba(255, 210, 122, .08), transparent 60%), rgba(10, 14, 30, .5); padding: 15px 16px; animation: sfes-ideaIn .5s cubic-bezier(.2, .8, .25, 1) both; }
@keyframes sfes-ideaIn { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
#sfes .idea__k { font: 700 8.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); margin-bottom: 9px; }
#sfes .idea__steer { font-size: 12.5px; color: var(--ink2); font-style: italic; line-height: 1.5; margin-bottom: 11px; }
#sfes .idea__t { font-size: 14px; font-weight: 650; margin-bottom: 5px; } #sfes .idea__d { font-size: 12.5px; color: var(--ink2); line-height: 1.55; }

/* summary / locked rows */
#sfes .locked { display: flex; flex-direction: column; gap: 9px; font-size: 13px; }
#sfes .locked .row { display: flex; align-items: center; gap: 9px; color: var(--ink2); } #sfes .locked .row .c { color: var(--good); font-size: 14px; } #sfes .locked .row b { color: var(--ink); }
#sfes .fwd { margin-top: 14px; font-size: 12px; color: var(--ink3); line-height: 1.5; border-top: 1px solid var(--panel-line); padding-top: 12px; }

/* right rail — turn spine */
#sfes .rail { padding: 16px 15px; }
#sfes .rail__l { font-family: var(--mono); font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); margin-bottom: 12px; }
#sfes .tstep { display: flex; align-items: center; gap: 10px; padding: 6px 0; position: relative; cursor: pointer; }
#sfes .tstep::before { content: ''; position: absolute; left: 6px; top: 0; bottom: 0; width: 1.5px; background: var(--panel-line); } #sfes .tstep:first-child::before { top: 50%; } #sfes .tstep:last-child::before { bottom: 50%; }
#sfes .tstep__d { width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid var(--panel-line); background: rgba(10, 14, 30, .8); z-index: 2; flex: 0 0 auto; }
#sfes .tstep.done .tstep__d { background: var(--good); border-color: var(--good); } #sfes .tstep.now .tstep__d { background: radial-gradient(circle, #fff 30%, var(--gold) 32%); border-color: var(--gold); box-shadow: 0 0 9px var(--gold); }
#sfes .tstep__n { font-size: 12px; color: var(--ink3); flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #sfes .tstep.done .tstep__n { color: var(--ink2); } #sfes .tstep.now .tstep__n { color: var(--ink); font-weight: 650; } #sfes .tstep.locked2 { opacity: .45; cursor: default; }
#sfes .sf-turnback { font-size: 11px; padding: 9px 14px; opacity: .85; } #sfes .sf-turnback:hover { opacity: 1; }
#sfes .tstep__k { font-family: var(--mono); font-size: 7px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink3); margin-left: auto; }
#sfes .tgroup { font-family: var(--mono); font-size: 8px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); opacity: .8; margin: 8px 0 2px 22px; position: relative; }
#sfes .tgroup::before { content: ''; position: absolute; left: -16px; top: 50%; width: 9px; height: 1.5px; background: var(--gold); opacity: .5; }
#sfes .tstep.sub { margin-left: 18px; } #sfes .tstep.sub::before { left: 6px; } #sfes .tstep.sub .tstep__d { width: 11px; height: 11px; } #sfes .tstep.sub .tstep__n { font-size: 11px; }
#sfes .rail__eta { margin-top: auto; border-top: 1px solid var(--panel-line); padding-top: 12px; } #sfes .rail__eta .k { font-family: var(--mono); font-size: 8px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); } #sfes .rail__eta .v { font-size: 16px; font-weight: 300; margin-top: 3px; } #sfes .rail__eta .s { font-family: var(--mono); font-size: 8px; color: var(--ink3); }

/* forging (live compose wait) + error */
#sfes .forging { display: flex; flex-direction: column; gap: 7px; padding: 18px 4px; }
#sfes .forging-h { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--ink); }
#sfes .forging-sub { font-size: 11.5px; color: var(--ink3); line-height: 1.5; }
#sfes .forging-t { font-family: var(--mono); font-size: 10px; color: var(--gold); }
#sfes .spin { width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--violet-line); border-top-color: var(--violet); animation: sfes-spin .8s linear infinite; flex: 0 0 auto; }
#sfes .esError { color: #ffb0b0; font-size: 12.5px; border: 1px solid rgba(255, 107, 107, .4); border-radius: 10px; background: rgba(255, 107, 107, .08); padding: 12px 14px; }

/* end-of-WO */
#sfes .end { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 9px; }
#sfes .end__core { width: 118px; height: 118px; border-radius: 50%; position: relative; margin-bottom: 8px; }
#sfes .end__core::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, var(--gold), #ff7a3c, var(--violet), var(--cyan), var(--gold)); filter: blur(13px); opacity: .6; animation: sfes-spin 5s linear infinite; }
#sfes .end__core::after { content: ''; position: absolute; inset: 35px; border-radius: 50%; background: radial-gradient(circle at 42% 38%, #fff, var(--cyan) 50%, transparent); box-shadow: 0 0 30px rgba(54, 214, 224, .6); animation: sfes-pulse 1.8s ease-in-out infinite; }
#sfes .end__cap { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--cyan); }
#sfes .end__t { font-size: 24px; font-weight: 200; } #sfes .end__t b { font-weight: 700; }
#sfes .end__sub { color: var(--ink2); font-size: 13px; max-width: 520px; line-height: 1.55; }

@media (prefers-reduced-motion: reduce) { #sfes *, #sfes *::before, #sfes *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition: none !important; } }

/* ═══════════════════════════════════════════════════════════════════════════════
 * UPLIFT · Surface 4 (2026-07-03) — LB-2 dossier framing + TX-A/TX-B turn treatments.
 * Reskin/recompose over the live DOM (no rewire). Cold base preserved (no plate art on
 * everyday turns; TX-A envoy scene is the one background beat). .u-* foundation vocabulary
 * where it fits; reduced-motion gated throughout. Source mock: mocks/uplift-stage-lobby-mock.html
 * ═══════════════════════════════════════════════════════════════════════════════ */

/* PO1 dossier atoms — the envoy card grows to carry the full dossier (lock §3c): class + role
 * pills, a bio line, the envoy's quote — slotted between the hero and the way-of-working detail. */
#sfes .amb__pills { display: flex; gap: 6px; flex-wrap: wrap; width: 100%; justify-content: flex-start; margin: 2px 0 2px; }
#sfes .amb__pill { font: 600 8.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); border: 1px solid rgba(255, 210, 122, .34); border-radius: 999px; padding: 3px 9px; background: rgba(255, 210, 122, .07); white-space: nowrap; }
#sfes .amb__pill.q { color: var(--ink3); border-color: var(--panel-line); background: transparent; }
#sfes .amb__bio { width: 100%; text-align: left; font-size: 11.5px; color: var(--ink3); line-height: 1.5; margin: 4px 0 0; }
#sfes .amb__quote { width: 100%; text-align: left; font-size: 12px; font-style: italic; color: var(--ink2); line-height: 1.5; margin: 7px 0 2px; }

/* Ceremonial lobby head (LB-2) — centered Michroma title + grammar subtitle + arrival banner,
 * the "door of the game" beat at the top of the On-Station lobby turn. */
#sfes .sfes-lhead { text-align: center; margin: 0 0 12px; }
#sfes .sfes-lhead__eye { font: 600 9px var(--mono); letter-spacing: .3em; text-transform: uppercase; color: var(--good); }
#sfes .sfes-lhead__ttl { font-family: var(--u-font-zone, "Michroma", sans-serif); font-size: 21px; letter-spacing: .07em; text-transform: uppercase; margin: 8px 0 4px; text-shadow: 0 2px 12px rgba(0, 0, 0, .7); }
#sfes .sfes-lhead__ttl .hl { color: var(--good); } #sfes .sfes-lhead__ttl i { font-style: normal; color: var(--ink3); }
#sfes .sfes-lhead__sub { font-size: 12.5px; color: var(--ink2); font-style: italic; line-height: 1.45; } #sfes .sfes-lhead__sub b { color: var(--ink); font-style: normal; }
#sfes .sfes-lbanner { display: flex; align-items: center; justify-content: center; gap: 9px; flex-wrap: wrap; font-size: 12px; color: var(--ink2); border: 1px solid rgba(95, 208, 160, .3); background: linear-gradient(120deg, rgba(95, 198, 158, .09), rgba(8, 11, 24, .72)); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-radius: 999px; padding: 8px 16px; margin-bottom: 12px; }
#sfes .sfes-lbanner .tk { font: 700 7.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--good); border: 1px solid rgba(95, 208, 160, .35); border-radius: 999px; padding: 2px 8px; flex: 0 0 auto; }
#sfes .sfes-lbanner b { color: var(--ink); }

/* ── TX-A / TX-B turn treatments — driven by #sfes[data-tx] ──────────────────────
 * TX-A: the whole envoy is the scene — a feathered full-bleed background inside .scene;
 *       the turn UI (banner / body / foot) floats OVER it in translucent glass.
 * TX-B (default): contained — the scene layer is hidden, the panels keep their solid voice. */
#sfes .sfes-txscene { position: absolute; inset: 0; z-index: 0; display: none; pointer-events: none; overflow: hidden; border-radius: 16px; }
#sfes[data-tx="a"] .scene .sfes-txscene { display: block; }
#sfes .sfes-txscene__img {
  position: absolute; inset: 0; background-position: 78% 40%; background-size: contain; background-repeat: no-repeat; opacity: .9;
  -webkit-mask-image: radial-gradient(58% 74% at 72% 42%, #000 44%, rgba(0, 0, 0, .5) 68%, transparent 90%);
  mask-image: radial-gradient(58% 74% at 72% 42%, #000 44%, rgba(0, 0, 0, .5) 68%, transparent 90%);
}
/* portrait-less envoy (Edda / Kay) — a soft initials medallion instead of a hard edge */
#sfes .sfes-txscene__img--initials { display: flex; align-items: center; justify-content: center; right: 6%; left: auto; width: 46%; font: 300 108px var(--u-font-hud, "Chakra Petch", sans-serif); color: rgba(174, 180, 216, .16); background: radial-gradient(60% 60% at 60% 42%, rgba(40, 48, 90, .4), transparent 72%); -webkit-mask-image: none; mask-image: none; }
#sfes .sfes-txscene__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4, 5, 12, .78), rgba(4, 5, 12, .34) 34%, transparent 56%), linear-gradient(180deg, transparent 52%, rgba(2, 4, 10, .82)); }
@media (prefers-reduced-motion: no-preference) {
  #sfes[data-tx="a"] .scene .sfes-txscene__img { animation: sfesTxDrift 16s ease-in-out infinite alternate; }
  @keyframes sfesTxDrift { from { transform: scale(1.015) translateX(0); } to { transform: scale(1.05) translateX(-1.4%); } }
}
/* TX-A: scene chrome floats — banner + turnfoot go transparent, body panels become readable glass */
#sfes[data-tx="a"] .scene .banner { position: relative; z-index: 2; background: transparent; border-bottom-color: transparent; }
#sfes[data-tx="a"] .scene .body { position: relative; z-index: 2; }
#sfes[data-tx="a"] .scene .turnfoot { position: relative; z-index: 2; border-top-color: rgba(150, 160, 220, .1); background: linear-gradient(180deg, transparent, rgba(2, 4, 10, .5)); }
#sfes[data-tx="a"] .scene .sfes-flowbar { position: relative; z-index: 2; }
/* option / artefact cards read as translucent glass over the envoy (TX-A only) */
#sfes[data-tx="a"] .scene .art,
#sfes[data-tx="a"] .scene .opt,
#sfes[data-tx="a"] .scene .cmpc,
#sfes[data-tx="a"] .scene .q,
#sfes[data-tx="a"] .scene .can,
#sfes[data-tx="a"] .scene .sq,
#sfes[data-tx="a"] .scene .vrow {
  background: rgba(10, 14, 30, .5); -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%);
}
#sfes[data-tx="a"] .scene .opt.sel { background: rgba(95, 208, 160, .12); }
#sfes[data-tx="a"] .scene .sfes-obs,
#sfes[data-tx="a"] .scene .sfes-lobbybar { -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px); }

/* Begin → Turn cine transition (950ms blur-in, one-shot when leaving the On-Station lobby) */
@media (prefers-reduced-motion: no-preference) {
  #sfes .scene.sfes--cine .body { animation: sfesCine .95s var(--u-ease-cine, cubic-bezier(.2, .6, .2, 1)); }
  @keyframes sfesCine { from { opacity: 0; filter: blur(13px); transform: scale(.986); } to { opacity: 1; filter: none; transform: none; } }
}

/* Dev · turn-treatment override (in the Eva panel — dev-time A/B affordance) */
#sfes .sfes-devtx { margin-top: 15px; padding-top: 13px; border-top: 1px solid var(--panel-line); }
#sfes .sfes-devtx__l { font: 700 8px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); margin-bottom: 8px; }
#sfes .sfes-devtx__seg { display: flex; gap: 5px; flex-wrap: wrap; }
#sfes .sfes-devtx__seg button { font: 700 9px var(--mono); letter-spacing: .04em; color: var(--ink2); border: 1px solid var(--panel-line); background: rgba(10, 14, 30, .5); border-radius: 999px; padding: 6px 11px; cursor: pointer; }
#sfes .sfes-devtx__seg button:hover { border-color: var(--violet-line); color: var(--ink); }
#sfes .sfes-devtx__seg button.on { color: #06210f; background: linear-gradient(135deg, var(--good), var(--cyan)); border-color: transparent; }
#sfes .sfes-devtx__n { font-size: 10.5px; color: var(--ink3); line-height: 1.45; margin-top: 8px; } #sfes .sfes-devtx__n b { color: var(--gold); }

/* responsive — collapse side panels under the scene on narrow viewports */
@media (max-width: 900px) {
  #sfes .grid { grid-template-columns: 1fr; grid-auto-rows: min-content; overflow-y: auto; }
  #sfes .amb { order: 2; } #sfes .scene { order: 1; min-height: 60vh; } #sfes .rail { order: 3; }
  /* TX-A mobile: the envoy scene sits upper-centre so options still float clear of the figure */
  #sfes[data-tx="a"] .sfes-txscene__img { background-position: 50% 8%; -webkit-mask-image: radial-gradient(80% 52% at 50% 24%, #000 44%, rgba(0, 0, 0, .5) 68%, transparent 92%); mask-image: radial-gradient(80% 52% at 50% 24%, #000 44%, rgba(0, 0, 0, .5) 68%, transparent 92%); }
  #sfes[data-tx="a"] .sfes-txscene__scrim { background: linear-gradient(180deg, rgba(4, 5, 12, .28) 28%, rgba(2, 4, 10, .88) 76%); }
}

/* ═══════════════════════════════════════════════════════════════════════════════
 * UPLIFT · Surface 4 · P7.5-A1 — TURN BASE BAND (2026-07-03).
 * Mock-fidelity reconciliation: the turn's bottom furniture relocated to match the mock —
 * dispatch bubble bottom-LEFT · timeline strip bottom-CENTRE (wide) · affinity micro-rows
 * FAR-RIGHT. A LAYOUT move over the live spine + Way-pillar data (source: renderSpine /
 * renderAffinity / renderDispatch in enteredStageView.js). Applies to BOTH TX-A and TX-B.
 * The band is a flex-none row after .grid inside .scr, so the grid auto-shrinks (window never
 * scrolls). Source mock: mocks/uplift-stage-lobby-mock.html (.esband / .disp / .spinestrip / .afft).
 * ═══════════════════════════════════════════════════════════════════════════════ */
#sfes .esband { flex: 0 0 auto; display: flex; gap: 14px; align-items: stretch; padding: 11px 22px 12px; }
/* dispatch bubble — bottom-LEFT, the envoy's live line (mirrors the spoken line per turn) */
#sfes .disp { flex: 1.4 1 0; min-width: 0; display: flex; gap: 12px; padding: 12px 15px; border-radius: 14px; }
#sfes .disp .kern { width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto; background: radial-gradient(circle at 40% 35%, #fff, var(--gold) 45%, rgba(255, 140, 60, .5)); box-shadow: 0 0 16px rgba(255, 178, 77, .55); }
#sfes .disp .t { font-size: 13.5px; color: var(--ink2); line-height: 1.5; min-width: 0; } #sfes .disp .t b { color: var(--ink); }
#sfes .disp .t .micro { display: block; font: 600 8.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); margin-bottom: 4px; }
/* timeline strip — bottom-CENTRE, WIDE: horizontal chips (done ✓ / now ● / ahead) + arrows */
#sfes .spinestrip { flex: 1.6 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 5px; flex-wrap: wrap; padding: 8px 14px; border-radius: 999px; }
#sfes .spinestrip .st { display: inline-flex; align-items: center; gap: 6px; font: 600 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink3); padding: 4px 10px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; cursor: pointer; transition: color .2s var(--u-ease-calm), border-color .2s var(--u-ease-calm); }
#sfes .spinestrip .st:hover { color: var(--ink2); }
#sfes .spinestrip .st.done { color: var(--good); }
#sfes .spinestrip .st.now { color: var(--ink); border-color: rgba(255, 210, 122, .4); background: rgba(255, 210, 122, .07); }
#sfes .spinestrip .st.locked2 { color: var(--ink3); opacity: .42; cursor: default; }
#sfes .spinestrip .st.locked2:hover { color: var(--ink3); }
#sfes .spinestrip .arr { color: var(--ink3); font-size: 9px; flex: 0 0 auto; }
/* affinity — FAR-RIGHT thin slot: stacked micro-rows (label · compact 3px bar · tabular value) */
#sfes .afft { flex: .7 1 0; min-width: 0; padding: 9px 12px; border-radius: 14px; }
#sfes .affn { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
#sfes .affn .r { display: grid; grid-template-columns: 60px minmax(24px, 1fr) auto; gap: 6px; align-items: center; }
#sfes .affn .k { font: 600 7.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#sfes .affn .b { height: 3px; border-radius: 999px; background: rgba(150, 160, 220, .12); }
#sfes .affn .b i { display: block; height: 100%; border-radius: 999px; opacity: .92; }
#sfes .affn .v { font: 600 10px var(--sans); color: var(--ink2); font-variant-numeric: tabular-nums; text-align: right; }
/* TX-A: the band furniture floats as translucent glass over the envoy scene (mock TX-A rule).
 * TX-B (default): the .u-frost / .u-glass foundation voices stand on their own — no extra tint. */
#sfes[data-tx="a"] .esband { background: linear-gradient(180deg, transparent, rgba(2, 4, 10, .82) 42%); }
/* base-band mobile — stack the three regions; the strip scrolls sideways rather than wrapping tall */
@media (max-width: 900px) {
  #sfes .esband { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 14px 12px; }
  #sfes .disp, #sfes .spinestrip, #sfes .afft { flex: 0 0 auto; }
  #sfes .spinestrip { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
 * UPLIFT · Surface 4 · L3 TURN REBUILD (2026-07 — separate L2 lobby + corrected turn).
 * LIVE TX-A/TX-B toggle · TX-B contained pane · multi-voter tally.
 * ═══════════════════════════════════════════════════════════════════════════════ */

/* LIVE TX-A/TX-B toggle in the chrome (mock .ab segment) — flips the treatment in place */
#sfes .sfes-abtoggle { display: inline-flex; align-items: center; gap: 0; border: 1px solid var(--panel-line); border-radius: 999px; overflow: hidden; background: rgba(10, 14, 30, .5); }
#sfes .sfes-abtoggle button { font: 700 9px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); background: transparent; border: 0; padding: 5px 11px; cursor: pointer; min-height: 26px; }
#sfes .sfes-abtoggle button:hover { color: var(--ink2); }
#sfes .sfes-abtoggle button.on { color: #04211d; background: linear-gradient(135deg, #5fd0a0, #36d6e0); }

/* ← Lobby verb (only shown when entered from the L2 lobby) */
#sfes .verbs .vb#sfes-lobby { color: var(--cyan); }

/* scene main — body (qcol) + TX-B contained pane (bcol). TX-A: pane hidden, body full width.
 * TX-B: two-column split — the envoy sits in the framed pane beside the option column. */
#sfes .sfes-scenemain { position: relative; z-index: 2; flex: 1; min-height: 0; display: flex; gap: 0; overflow: hidden; }
#sfes .sfes-scenemain .body { flex: 1; min-height: 0; }
#sfes .sfes-bpane { display: none; flex: 0 0 300px; min-width: 0; flex-direction: column; gap: 12px; padding: 12px 16px 12px 6px; overflow-y: auto; }
#sfes[data-tx="b"] .sfes-scenemain { gap: 4px; }
#sfes[data-tx="b"] .sfes-bpane { display: flex; }
#sfes[data-tx="b"] .sfes-scenemain .body { flex: 1.3; }
/* the framed envoy pane (mock .pane) */
#sfes .sfes-bpane__pane { position: relative; flex: none; height: 280px; border: 1px solid var(--panel-line); border-radius: 14px; overflow: hidden; background: rgba(8, 11, 24, .64); }
#sfes .sfes-bpane__img { position: absolute; inset: 0; background-position: 50% 20%; background-size: cover; background-repeat: no-repeat; filter: saturate(1.05); }
#sfes .sfes-bpane__img--initials { display: flex; align-items: center; justify-content: center; font: 300 96px var(--u-font-hud, "Chakra Petch", sans-serif); color: rgba(174, 180, 216, .16); background: radial-gradient(70% 70% at 50% 40%, rgba(40, 48, 90, .5), transparent 74%); }
#sfes .sfes-bpane__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4, 6, 16, .1) 55%, rgba(4, 6, 16, .74)); }
#sfes .sfes-bpane__lbl { position: absolute; left: 12px; bottom: 8px; z-index: 2; font: 600 8.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--good); }
/* the pane's tiles (consensus clock + cohort) */
#sfes .sfes-bpane__grid { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr; grid-auto-rows: min-content; gap: 12px; }
#sfes .sfes-bpane__grid .tile { border: 1px solid var(--panel-line); border-radius: 12px; background: rgba(10, 14, 30, .5); padding: 12px 14px; min-height: 0; }
#sfes .sfes-bpane__grid .micro { display: block; font: 600 8.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); margin-bottom: 8px; }
#sfes .sfes-bpane__grid .clockv { font: 600 22px var(--u-font-hud, "Chakra Petch", sans-serif); color: var(--cyan); font-variant-numeric: tabular-nums; }
#sfes .sfes-bpane__grid .clockh { font-size: 10.5px; color: var(--ink3); line-height: 1.4; margin-top: 3px; } #sfes .sfes-bpane__grid .clockh b { color: var(--ink2); }
#sfes .sfes-bpane__grid .pres { display: flex; flex-direction: column; gap: 8px; }
#sfes .sfes-bpane__grid .pres .row { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--ink); }
#sfes .sfes-bpane__grid .pres .row .role { margin-left: auto; font: 600 8px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink3); }
#sfes .sfes-bpane__grid .tok.sm { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font: 700 8px var(--mono); color: #cfd3f5; background: rgba(10, 14, 30, .7); border: 1px solid var(--panel-line); flex: 0 0 auto; }
/* TX-B: the contained pane keeps its solid voice; TX-A never shows it */
#sfes[data-tx="a"] .sfes-bpane { display: none !important; }
/* multi-voter avatar row (voteRow) — a stack of avatars, mock idiom */
#sfes .sf-votes { flex-wrap: wrap; }
#sfes .sf-vav { min-width: 18px; padding: 0 3px; }

@media (max-width: 900px) {
  #sfes .sfes-scenemain { flex-direction: column; overflow-y: auto; }
  #sfes[data-tx="b"] .sfes-bpane { flex: 0 0 auto; }
  #sfes .sfes-bpane__pane { height: 180px; }
}