/* appHeader.css — the SHARED, centralised header + Eva side panel.
 *
 * One set of classes used by every app surface (workshop home, entered-stage, …) so the
 * header reads identically everywhere (Director 2026-06-30 — "unified, centralised approach"):
 *   • STAR·FORGE wordmark on the LEFT
 *   • a translucent HUD strip
 *   • a consistent Mode triple-toggle in the header
 *   • a consistent Eva button (orb + "Eva" label + notification badge) → opens the side panel
 *   • the Eva side panel framing/position is the forge-line/workshop one (canonical)
 * Unscoped classes (sf-*) so they apply inside #sfes and the workshop mount alike. Tokens
 * come from tokens.css (var(--ink) etc.), available on both surfaces.
 */

/* HUD strip — the header bar */
.sf-strip { background: linear-gradient(180deg, rgba(10, 13, 26, .62), rgba(10, 13, 26, .22)); border-bottom: 1px solid var(--panel-line, rgba(150,160,220,.14)); backdrop-filter: blur(7px); position: relative; z-index: 30; }

/* breadcrumb — the stage-screen style, extensible: World › Ship › Zone · Stage · WO.
 * b = strong segment (world/ship), .z = zone, .s = stage (gold), i = separator. */
/* Breadcrumb — matches the Oversight look (.o3__crumb): mixed-case, 13px, no mono/uppercase. */
.sf-crumb { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink2, #aeb4d8); flex-wrap: wrap; }
.sf-crumb b { color: var(--ink, #eef0ff); font-weight: 600; }
.sf-crumb .z { color: var(--ink2, #aeb4d8); }
.sf-crumb .s { color: var(--gold, #ffd27a); }
.sf-crumb i { font-style: normal; margin: 0; color: var(--ink3, #6b7099); }

/* STAR·FORGE wordmark (left) — matches the Oversight look (.o3__brand): wider tracking, 13px. */
.sf-brandmark { font-family: var(--mono, ui-monospace, monospace); font-size: 13px; letter-spacing: .34em; text-transform: uppercase; color: var(--ink, #eef0ff); white-space: nowrap; }
.sf-brandmark i { color: var(--heat, #ffb24d); font-style: normal; margin: 0 1px; }

/* Mode — segmented triple toggle (all options visible) */
.sf-modeseg { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--panel-line, rgba(150,160,220,.14)); background: rgba(10, 14, 30, .5); border-radius: 999px; padding: 3px; }
.sf-modeseg__l { font: 700 8px var(--mono, monospace); letter-spacing: .1em; text-transform: uppercase; color: var(--ink3, #6b7099); padding: 0 7px 0 6px; }
.sf-modeseg button { font: 700 9px var(--mono, monospace); letter-spacing: .05em; text-transform: uppercase; color: var(--ink2, #aeb4d8); background: none; border: 0; border-radius: 999px; padding: 5px 11px; cursor: pointer; }
.sf-modeseg button:hover { color: var(--ink, #eef0ff); }
.sf-modeseg button.on { color: #06210f; background: linear-gradient(135deg, var(--good, #5fd0a0), var(--cyan, #36d6e0)); }
/* Mode cascade (A2): allowed = offered-not-selected · blocked = not allowed by the entity/product ceiling */
.sf-modeseg button.allowed { color: var(--ink2, #aeb4d8); background: rgba(10, 14, 30, .4); }
.sf-modeseg button.blocked { color: var(--ink4, #4a4f6b); text-decoration: line-through; cursor: not-allowed; opacity: .7; }
.sf-modeseg button.blocked:hover { color: var(--ink4, #4a4f6b); }
.sf-modecascade { display: inline-flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.sf-modenote { font: 600 7.5px var(--mono, monospace); letter-spacing: .02em; color: var(--ink3, #6b7099); white-space: nowrap; }
.sf-modenote b { color: var(--good, #7fe0b4); }

/* Stand-up countdown chip (uplift P1 — ported from uplift-chrome-ceremonies-mock
 * .chip.standup, lock §3e: "stand-up countdown + pressure stay; seal-call chrome
 * REMOVED — seal notifications are Eva's job"). Quiet by default; .hot = PRESSURE
 * (inside 5m of a required stand-up, or the ad-hoc call unlocked) — amber + pulse.
 * Built by mountStandupChip (src/upliftFooter.js); hides itself when the
 * /meetings/status feed doesn't answer. NO seal-call chrome rides this strip —
 * Eva's chips (header button + floating footer) carry seal attention. */
/* Matches the Oversight stand-up chip (.o3__mtg): violet pill, mono label, violet countdown. */
.sf-standup { display: inline-flex; align-items: center; gap: 9px; font: 600 10px var(--mono, monospace); letter-spacing: .06em; color: var(--ink2, #aeb4d8); border: 1px solid rgba(139,139,255,.35); border-radius: 999px; padding: 6px 12px; background: rgba(139,139,255,.08); white-space: nowrap; min-height: 22px; }
.sf-standup[hidden] { display: none; }
button.sf-standup { cursor: pointer; appearance: none; }
.sf-standup__l { font: 600 8.5px var(--mono, monospace); letter-spacing: .12em; text-transform: uppercase; color: var(--ink3, #6b7099); }
.sf-standup__cd { font-size: 13px; font-weight: 600; color: var(--violet, #8b8bff); font-variant-numeric: tabular-nums; }
.sf-standup__go { color: var(--violet, #8b8bff); }
.sf-standup.hot { border-color: rgba(255, 178, 77, .5); color: var(--heat, #ffb24d); }
.sf-standup.hot .sf-standup__l, .sf-standup.hot .sf-standup__cd, .sf-standup.hot .sf-standup__go { color: var(--kernel, #ffd27a); }
/* Oversight's richer meeting chip (o3__mtg) shares the same pressure state */
.o3__mtg.hot { border-color: rgba(255, 178, 77, .5); background: rgba(255, 178, 77, .08); }
.o3__mtg.hot .v b { color: var(--heat, #ffb24d); }
@media (prefers-reduced-motion: no-preference) {
  .sf-standup.hot, .o3__mtg.hot { animation: sf-standup-pulse 2.2s ease-in-out infinite; }
  @keyframes sf-standup-pulse {
    0%, 100% { box-shadow: 0 0 14px -4px var(--heat, #ffb24d); }
    50% { box-shadow: 0 0 3px -2px var(--heat, #ffb24d); }
  }
}

/* Eva button — orb + "Eva" label + notification badge */
.sf-evabtn { position: relative; display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono, monospace); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink2, #aeb4d8); border: 1px solid var(--panel-line, rgba(150,160,220,.14)); border-radius: 999px; padding: 5px 13px 5px 11px; background: rgba(10, 14, 30, .5); cursor: pointer; }
.sf-evabtn:hover { border-color: var(--violet-line, rgba(139,139,255,.22)); color: var(--ink, #eef0ff); box-shadow: 0 0 14px rgba(139, 139, 255, .28); }
.sf-evabtn__orb { width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 32%, #cdd0ff, #8b8bff 55%, #5a5ad6); box-shadow: 0 0 10px rgba(139, 139, 255, .55); flex: 0 0 auto; }
.sf-evabtn__b { min-width: 15px; height: 15px; border-radius: 8px; background: var(--violet, #8b8bff); color: #0a0c1a; font: 700 8px var(--mono, monospace); display: flex; align-items: center; justify-content: center; padding: 0 4px; box-shadow: 0 0 8px var(--violet, #8b8bff); }
.sf-evabtn__b[hidden] { display: none; }

/* Eva side panel — canonical framing = the forge-line/workshop slide-out */
.sf-evapanel { position: fixed; top: 62px; right: 0; bottom: 14px; width: 300px; z-index: 1300; border: 1px solid var(--panel-line, rgba(150,160,220,.14)); border-right: 0; border-radius: 16px 0 0 16px; background: rgba(8, 11, 24, .92); backdrop-filter: blur(13px); padding: 16px 18px; transform: translateX(108%); transition: transform .32s cubic-bezier(.4, 0, .2, 1); box-shadow: -20px 0 50px rgba(0, 0, 0, .5); display: flex; flex-direction: column; }
.sf-evapanel.open { transform: translateX(0); }
.sf-evapanel__top { display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; margin-bottom: 13px; }
.sf-evapanel__lbl { display: inline-flex; align-items: center; gap: 8px; font: 700 11px var(--sans, system-ui); color: var(--violet, #8b8bff); }
.sf-evapanel__lbl .o { width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 32%, #cdd0ff, #8b8bff 55%, #5a5ad6); box-shadow: 0 0 10px rgba(139, 139, 255, .6); }
.sf-evapanel__x { border: 0; background: none; color: var(--ink3, #6b7099); font-size: 15px; cursor: pointer; line-height: 1; } .sf-evapanel__x:hover { color: var(--ink, #eef0ff); }
.sf-evapanel__body { flex: 1; min-height: 0; overflow-y: auto; }

/* ══════════ Canonical shared header controls (headerCommon.js) — one look on every surface ══════════ */
.hc-auto-host, .hc-profile-host { position: relative; display: inline-flex; align-items: center; }
/* shared pop shell (autonomy + profile) — anchored below its host, right-aligned */
.hc-pop { position: fixed; z-index: 1200; width: 236px; background: rgba(9,12,26,.98); border: 1px solid var(--violet-line, rgba(139,139,255,.22)); border-radius: 14px; padding: 12px; box-shadow: 0 20px 50px rgba(0,0,0,.55); opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity .16s, transform .16s; }
.hc-pop.open { opacity: 1; transform: none; pointer-events: auto; }
.hc-pop__t { font: 600 9px var(--mono, monospace); letter-spacing: .12em; text-transform: uppercase; color: var(--ink3, #6b7099); margin-bottom: 8px; }
.hc-pop__sep { height: 1px; background: var(--panel-line, rgba(150,160,220,.14)); margin: 10px -12px; }

/* Autonomy lens chip — compact, replaces the old 3-way Mode seg */
.hc-auto { display: inline-flex; align-items: center; gap: 7px; font: 600 10px var(--mono, monospace); letter-spacing: .06em; text-transform: uppercase; color: var(--ink2, #aeb4d8); border: 1px solid var(--panel-line, rgba(150,160,220,.14)); background: rgba(10,14,30,.55); border-radius: 999px; padding: 5px 11px; cursor: pointer; transition: .15s; }
.hc-auto:hover { border-color: var(--violet-line, rgba(139,139,255,.3)); color: var(--ink, #eef0ff); }
.hc-auto__dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; box-shadow: 0 0 8px currentColor; }
.hc-auto__dot[data-l="supervised"] { background: #6b7099; color: #6b7099; }
.hc-auto__dot[data-l="assisted"] { background: var(--cyan, #36d6e0); color: var(--cyan, #36d6e0); }
.hc-auto__dot[data-l="autonomous"] { background: var(--kernel, #ffd27a); color: var(--kernel, #ffd27a); }
.hc-auto__c { font-style: normal; font-size: 8px; color: var(--ink3, #6b7099); }
.hc-lens__cap { font: 600 9.5px var(--mono, monospace); color: var(--ink3, #6b7099); }
.hc-lens__cap b { color: var(--kernel, #ffd27a); }
.hc-lens__lbl { display: flex; align-items: center; justify-content: space-between; font: 600 11px var(--sans, system-ui); color: var(--ink2, #aeb4d8); margin-bottom: 8px; }
.hc-lens__seg { display: flex; gap: 4px; margin: 9px 0 7px; }
.hc-lens__seg button { flex: 1; font: 600 9.5px var(--mono, monospace); letter-spacing: .04em; color: var(--ink3, #6b7099); border: 1px solid var(--panel-line, rgba(150,160,220,.14)); background: rgba(10,14,30,.5); border-radius: 8px; padding: 6px 4px; cursor: pointer; transition: .14s; }
.hc-lens__seg button:hover:not([disabled]) { border-color: var(--violet-line, rgba(139,139,255,.3)); color: var(--ink, #eef0ff); }
.hc-lens__seg button.on { border-color: var(--violet, #8b8bff); color: var(--ink, #eef0ff); background: rgba(139,139,255,.12); }
.hc-lens__seg button[disabled] { opacity: .35; cursor: not-allowed; }
.hc-lens__note { font-size: 10px; line-height: 1.45; color: var(--ink3, #6b7099); }

/* Profile badge — circle portrait of the signed-in user; click → account menu */
.hc-prof { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--violet-line, rgba(139,139,255,.3)); background: rgba(139,139,255,.1); cursor: pointer; padding: 0; transition: .16s; }
.hc-prof:hover { border-color: var(--violet, #8b8bff); box-shadow: 0 0 14px rgba(139,139,255,.5); }
.hc-prof__av { font: 700 11px var(--mono, monospace); letter-spacing: .04em; color: var(--violet, #8b8bff); }
.hc-prof__av--lg { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--violet-line, rgba(139,139,255,.3)); background: rgba(139,139,255,.12); font-size: 12px; flex: 0 0 auto; }
.hc-prof-pop { width: 244px; }
.hc-prof__id { display: flex; align-items: center; gap: 10px; }
.hc-prof__idtx { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hc-prof__idtx b { font-size: 12.5px; color: var(--ink, #eef0ff); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc-prof__idtx i { font-size: 10px; font-style: normal; color: var(--ink3, #6b7099); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc-prof__row { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; font: 600 11.5px var(--sans, system-ui); color: var(--ink2, #aeb4d8); border: 1px solid transparent; border-radius: 9px; background: none; padding: 8px 9px; cursor: pointer; transition: .14s; }
.hc-prof__row:hover { background: rgba(10,14,30,.6); color: var(--ink, #eef0ff); }
.hc-prof__row--out:hover { color: var(--rose, #ff7a90); }

/* Compact meeting chip — a ring that fills toward the next stand-up; pulses "join" when ready */
.hc-mtg-host { display: inline-flex; align-items: center; }
.hc-mtg { position: relative; width: 32px; height: 32px; border: 0; background: none; padding: 0; display: grid; place-items: center; cursor: default; }
.hc-mtg[hidden] { display: none; }
.hc-mtg__ring { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(var(--cyan, #36d6e0) var(--fill, 0deg), rgba(150,160,220,.16) 0deg); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px)); }
.hc-mtg__c { position: relative; z-index: 1; font: 700 11px var(--mono, monospace); color: var(--ink2, #aeb4d8); line-height: 1; }
.hc-mtg__c--go { font-size: 12px; }
.hc-mtg.is-pressure { cursor: pointer; }
.hc-mtg.is-pressure .hc-mtg__ring { background: conic-gradient(var(--heat, #ffb24d) var(--fill, 0deg), rgba(255,178,77,.18) 0deg); }
.hc-mtg.is-pressure .hc-mtg__c { color: var(--heat, #ffb24d); }
.hc-mtg.is-ready { cursor: pointer; }
.hc-mtg.is-ready .hc-mtg__ring { background: conic-gradient(var(--kernel, #ffd27a) 360deg, var(--kernel, #ffd27a) 0deg); }
.hc-mtg.is-ready .hc-mtg__c { color: var(--kernel, #ffd27a); }
.hc-mtg.is-optional { opacity: .55; }
@media (prefers-reduced-motion: no-preference) { .hc-mtg.is-ready { animation: hc-mtg-pulse 1.8s ease-in-out infinite; border-radius: 50%; } @keyframes hc-mtg-pulse { 0%, 100% { box-shadow: 0 0 0 rgba(255,210,122,0); } 50% { box-shadow: 0 0 12px rgba(255,210,122,.6); } } }

/* Shared nav — the 🧭 button + pop, anchored below the button (works wherever it sits) */
.hc-nav-host { position: relative; display: inline-flex; align-items: center; }
.hc-nav { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 15px; line-height: 1; border: 1px solid var(--panel-line, rgba(150,160,220,.14)); background: rgba(10,14,30,.6); color: var(--ink2, #aeb4d8); cursor: pointer; transition: .15s; }
.hc-nav:hover { border-color: var(--cyan, #36d6e0); color: var(--ink, #eef0ff); }
.hc-navpop { position: fixed; top: 60px; left: 20px; z-index: 1200; width: 258px; background: rgba(9,12,26,.98); border: 1px solid var(--violet-line, rgba(139,139,255,.22)); border-radius: 14px; padding: 12px; box-shadow: 0 20px 50px rgba(0,0,0,.55); opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity .16s, transform .16s; }
.hc-navpop.open { opacity: 1; transform: none; pointer-events: auto; }
.hc-navpop__here { margin-left: auto; align-self: center; font: 600 8px var(--mono, monospace); letter-spacing: .1em; text-transform: uppercase; color: var(--cyan, #36d6e0); border: 1px solid rgba(54,214,224,.4); border-radius: 999px; padding: 2px 7px; white-space: nowrap; }
.hc-navpop__t { font: 600 9px var(--mono, monospace); letter-spacing: .12em; text-transform: uppercase; color: var(--ink3, #6b7099); margin-bottom: 8px; }
.hc-navpop__row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 10px; border: 1px solid var(--panel-line, rgba(150,160,220,.14)); border-radius: 11px; background: rgba(10,14,30,.5); cursor: pointer; margin-bottom: 6px; transition: .15s; color: inherit; font: inherit; }
.hc-navpop__row:last-child { margin-bottom: 0; }
.hc-navpop__row:hover { border-color: var(--cyan, #36d6e0); }
.hc-navpop__row.is-current { opacity: .55; cursor: default; border-color: var(--violet-line, rgba(139,139,255,.3)); }
.hc-navpop__ic { font-size: 15px; color: var(--violet, #8b8bff); }
.hc-navpop__tx { display: flex; flex-direction: column; gap: 1px; }
.hc-navpop__tx b { font-size: 12.5px; font-weight: 600; color: var(--ink, #eef0ff); }
.hc-navpop__tx i { font-size: 10px; font-style: normal; color: var(--ink3, #6b7099); }

/* ══════════ Shared ZONE MINI-MAP ("constant anchor" · miniMap.js) — every zone hub + Oversight ══════════ */
.mm-zn { cursor: pointer; }
.mm-zn .c { transition: stroke .25s, fill .25s; }
.mm-zn:hover .c { stroke: var(--cyan, #36d6e0); }
.mm-zn.on .c { stroke: var(--kernel, #ffd27a); fill: rgba(255,210,122,.16); }

/* ══════════ In-tile forge-line geometry toggle (winding/band · shared persisted mode) ══════════ */
.fg-toggle-host { display: inline-flex; }
.fg-seg { display: inline-flex; border: 1px solid var(--panel-line, rgba(150,160,220,.14)); border-radius: 7px; overflow: hidden; background: rgba(10,14,30,.5); }
.fg-seg button { font-size: 12px; line-height: 1; color: var(--ink3, #6b7099); background: transparent; border: 0; padding: 3px 6px; cursor: pointer; transition: .14s; display: grid; place-items: center; min-width: 22px; }
.fg-seg button:hover { color: var(--ink2, #aeb4d8); }
.fg-seg button.on { color: var(--cyan, #36d6e0); background: rgba(54,214,224,.12); }

/* Brandmark as the ascend trigger (hover glow → click = Polaris) */
.sf-brandmark--btn, .o3__brand--btn { cursor: pointer; transition: text-shadow .18s, color .18s; }
.sf-brandmark--btn:hover, .o3__brand--btn:hover { color: #fff; text-shadow: 0 0 15px var(--heat, #ffb24d); }
/* Single location chip (Floor ⇄ current) — replaces the nav menu */
.hc-loc-host { display: inline-flex; }
.hc-locchip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--panel-line, rgba(150,160,220,.14)); background: rgba(10,14,30,.6); color: var(--ink2, #aeb4d8); font: 600 9.5px var(--mono, monospace); letter-spacing: .09em; text-transform: uppercase; cursor: pointer; transition: .15s; white-space: nowrap; }
.hc-locchip:hover { border-color: var(--cyan, #36d6e0); color: var(--ink, #eef0ff); }
.hc-locchip__g { font-size: 13px; line-height: 1; }