/* ============================================================================
   Realtime Lever Interviewer — KOS "Atlas" cockpit shell
   Light theme on paper; indigo → violet → sky accents; Playfair title + caps
   eyebrows; the Jarvis visualizer lives in a DARK stage pocket so the orb glows.
   Tokens come from web/kos-tokens.css — this file only styles the shell.
   ============================================================================ */

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

body {
  background: var(--lav-100);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* full-screen lavender aurora field — the whole page is the "stage" now */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(1200px 820px at 80% -12%, rgba(167, 139, 250, .50), transparent 62%),
    radial-gradient(1000px 720px at 8% 4%, rgba(129, 140, 248, .34), transparent 58%),
    radial-gradient(1100px 1100px at 50% 118%, rgba(196, 181, 253, .46), transparent 60%),
    linear-gradient(165deg, #f4f0ff 0%, #ece7fb 48%, #e6def9 100%);
}
/* a second, slowly drifting glow layer so the glass has something to refract */
body::after {
  content: "";
  position: fixed; inset: -12%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 36% at 24% 28%, rgba(167, 139, 250, .26), transparent 60%),
    radial-gradient(34% 34% at 80% 66%, rgba(129, 140, 248, .20), transparent 62%),
    radial-gradient(30% 30% at 60% 90%, rgba(196, 181, 253, .22), transparent 60%);
  filter: blur(34px);
  animation: meshDrift 24s ease-in-out infinite;
}

::selection { background: rgba(99, 102, 241, .22); }

/* scrollbars — quiet, on-brand */
.log-stream, .transcript, .factor-grid { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.log-stream::-webkit-scrollbar, .transcript::-webkit-scrollbar { width: 8px; }
.log-stream::-webkit-scrollbar-thumb, .transcript::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }

/* shared eyebrow */
.eyebrow {
  font-family: var(--serif);
  font-size: 11px; font-weight: 700; letter-spacing: 2.4px;
  text-transform: uppercase; color: var(--lav-600);
}
.eyebrow-inline { display: inline; }
.muted { color: var(--mute); font-size: 12.5px; }

/* ============================================================================
   HEADER — sticky, light, grid backdrop, bottom hairline
   ============================================================================ */
.hdr {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  padding: 18px 40px;
  background-color: rgba(255, 255, 255, .42);
  backdrop-filter: saturate(170%) blur(18px);
  -webkit-backdrop-filter: saturate(170%) blur(18px);
  border-bottom: 1px solid rgba(255, 255, 255, .5);
  box-shadow: 0 10px 30px -22px rgba(124, 58, 237, .4);
}
.hdr-brand { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.brand-title {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 800; letter-spacing: -.3px; color: var(--ink);
  display: flex; align-items: center; gap: 10px;
}
.brand-diamond {
  background: var(--brand-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-size: .92em;
}

.hdr-controls { display: flex; align-items: center; gap: 12px; }

/* client-context chip: shows the active client + interviewee role for non-personal sessions */
.hdr-context { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 46vw;
  padding: 7px 15px; border-radius: 999px; background: var(--lav-50, rgba(124, 58, 237, .07)); border: 1px solid var(--lav-200); }
.hdr-context[hidden] { display: none; }
.ctx-dot { width: 8px; height: 8px; border-radius: 999px; flex: none; background: var(--lav-500); box-shadow: 0 0 0 3px rgba(139, 92, 246, .16); }
.ctx-pre { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--mute-2); flex: none; }
.ctx-client { font-size: 13px; font-weight: 800; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctx-role { font-size: 13px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctx-role[hidden] { display: none; }
.ctx-role::before { content: '·'; margin: 0 7px 0 4px; color: var(--mute-2); }

/* buttons */
.btn {
  font-family: var(--sans); font-size: 13px; font-weight: 700;
  letter-spacing: .1px; color: var(--ink-2);
  background: rgba(255, 255, 255, .55); backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, .65); border-radius: 11px;
  padding: 10px 16px; cursor: pointer;
  transition: transform .14s ease, box-shadow .18s ease, border-color .18s ease, color .18s ease, background .18s ease;
  box-shadow: 0 6px 18px -10px rgba(124, 58, 237, .22);
}
.btn:hover:not(:disabled) { border-color: var(--lav-400); color: var(--lav-600); transform: translateY(-1px); box-shadow: 0 10px 22px -10px rgba(124, 58, 237, .35); background: rgba(255, 255, 255, .72); }
.btn:active:not(:disabled) { transform: translateY(0); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary {
  color: #fff; border: none;
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--brand-grad);
  background-size: 160% 160%;
  box-shadow: 0 8px 22px rgba(99, 102, 241, .32);
}
/* Magical hover — a brighter aurora gradient + glow + a light sweep, so pressing Start
   feels like crossing into a new experience. (Also fixes the Safari white-out: the generic
   .btn:hover white background was bleeding through because .btn-primary:hover never set its
   own background.) */
.btn-primary:hover:not(:disabled):not(.recording) {
  color: #fff;
  background: linear-gradient(120deg, var(--lav-600) 0%, var(--lav-400) 46%, var(--cyan) 100%);
  background-size: 185% 185%;
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 18px 44px -10px rgba(124, 58, 237, .62), 0 0 26px rgba(34, 211, 238, .4), inset 0 0 0 1px rgba(255, 255, 255, .45);
  animation: brandSheen 3.2s ease-in-out infinite;
}
.btn-primary::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
  background: linear-gradient(110deg, transparent 32%, rgba(255, 255, 255, .55) 50%, transparent 68%);
  transform: translateX(-140%); opacity: 0;
}
.btn-primary:hover:not(:disabled):not(.recording)::after { animation: btnSheen 1.05s ease forwards; }
@keyframes btnSheen { 0% { transform: translateX(-140%); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateX(140%); opacity: 0; } }
.btn-primary.recording {
  background: linear-gradient(135deg, var(--rose), #f43f5e);
  box-shadow: 0 8px 22px rgba(220, 38, 38, .34);
  animation: recPulse 1.6s ease-in-out infinite;
}
@keyframes recPulse { 0%, 100% { box-shadow: 0 8px 22px rgba(220, 38, 38, .34); } 50% { box-shadow: 0 8px 30px rgba(220, 38, 38, .55); } }
.btn-ghost { background: rgba(255, 255, 255, .42); }

/* status pill */
.pill {
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.2px;
  padding: 6px 13px; border-radius: 999px; white-space: nowrap;
  border: 1px solid transparent; display: inline-flex; align-items: center; gap: 6px;
}
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: currentColor; box-shadow: 0 0 0 3px currentColor; opacity: .85; }
.pill-idle { background: var(--paper-3); color: var(--mute-2); border-color: var(--line); }
.pill-connecting { background: #fff7ed; color: var(--gold); border-color: #fed7aa; }
.pill-thinking { background: #faf5ff; color: var(--violet-2); border-color: #e9d5ff; }
.pill-ready, .pill-listening { background: #f0fdf4; color: var(--emerald); border-color: #bbf7d0; }
.pill-hearing { background: #ecfeff; color: var(--teal); border-color: #a5f3fc; }
.pill-speaking { background: #eff6ff; color: var(--sky); border-color: #bae6fd; }
.pill-error, .pill-closed { background: var(--rose-soft); color: var(--rose); border-color: #fecaca; }
.pill-reconnecting { background: #fff7ed; color: var(--gold); border-color: #fed7aa; }
.pill-offline { background: var(--rose-soft); color: var(--rose); border-color: #fecaca; }

/* ============================================================================
   BODY — 3-zone cockpit grid
   ============================================================================ */
.cockpit {
  display: grid;
  grid-template-columns: minmax(320px, 400px) minmax(420px, 1fr) minmax(360px, 460px);
  gap: 26px;
  align-items: start;
  max-width: 1760px; margin: 0 auto;
  padding: 30px 40px 64px;
}
.rail { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

/* premium light card */
.panel {
  background: rgba(255, 255, 255, .48);
  backdrop-filter: blur(22px) saturate(165%);
  -webkit-backdrop-filter: blur(22px) saturate(165%);
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 20px;
  padding: 24px 26px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .7),
    inset 0 0 0 1px rgba(167, 139, 250, .06),
    0 22px 56px -26px rgba(124, 58, 237, .34);
  position: relative;
}
.panel-title {
  margin: 6px 0 14px;
  font-family: var(--serif);
  font-size: 19px; font-weight: 700; letter-spacing: -.2px; color: var(--ink);
}
.panel-subtitle { margin: 4px 0 12px; font-size: 12px; font-weight: 500; color: var(--mute); }

/* ---------------------------------------------------------------------------
   LEFT RAIL — Copilot
   --------------------------------------------------------------------------- */
.ctab {
  font-family: var(--sans); font-size: 12px; font-weight: 700; color: var(--mute);
  background: transparent; border: none; border-radius: 8px; padding: 7px 14px; cursor: pointer;
  transition: background .16s ease, color .16s ease, box-shadow .16s ease;
}
.ctab:hover { color: var(--ink-2); }
.ctab.active { background: rgba(255, 255, 255, .9); color: var(--lav-600); box-shadow: 0 2px 8px rgba(124, 58, 237, .14); }

.log-wrap { flex: 1; min-height: 0; display: flex; }

/* the star of the left panel — live harness event log */
.log-stream {
  flex: 1; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 1px;
  padding: 8px;
  background: rgba(255, 255, 255, .28);
  border: 1px solid rgba(255, 255, 255, .5); border-radius: 13px;
  font-size: 12.5px; line-height: 1.45;
}
.log-row {
  display: grid; grid-template-columns: 18px 1fr auto; align-items: baseline; gap: 8px;
  padding: 5px 8px; border-radius: 8px;
  animation: logIn .26s ease;
  border-bottom: 1px solid transparent;
}
.log-row:hover { background: rgba(99, 102, 241, .05); }
.log-row .log-icon { font-size: 13px; line-height: 1.2; text-align: center; font-weight: 800; }
.log-row .log-text { color: var(--ink-2); word-break: break-word; }
.log-row .log-ts { font-size: 10px; color: var(--mute-3); font-variant-numeric: tabular-nums; }
@keyframes logIn { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }

/* per-kind color coding (icon + text tint) */
.log-connect  .log-icon { color: var(--indigo); }
.log-turn     .log-icon { color: var(--ink); }
.log-scoring  .log-icon { color: var(--violet); animation: spinSlow 1.4s linear infinite; }
.log-factor   .log-icon { color: var(--emerald); }
.log-lever    .log-icon { color: var(--violet-2); }
.log-question .log-icon { color: var(--sky); }
.log-recommend .log-icon { color: var(--gold); }
.log-error    .log-icon { color: var(--rose); }
.log-recommend { background: rgba(217, 119, 6, .07); }
.log-error    { background: rgba(220, 38, 38, .06); }
.log-error    .log-text { color: var(--rose); }

/* transcript bubbles */
.transcript { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 6px 4px; }
.bubble {
  position: relative; max-width: 88%;
  padding: 10px 13px; border-radius: 14px; line-height: 1.45; font-size: 13px;
  border: 1px solid var(--line); animation: bubbleIn .24s ease;
}
.bubble small { display: block; font-size: 9.5px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; margin-bottom: 4px; opacity: .75; }
.bubble.interviewer { align-self: flex-start; background: #f5f3ff; border-color: #ddd6fe; color: var(--ink-2); border-bottom-left-radius: 5px; }
.bubble.interviewer small { color: var(--indigo); }
.bubble.client { align-self: flex-end; background: #ecfeff; border-color: #a5f3fc; color: var(--ink-2); border-bottom-right-radius: 5px; }
.bubble.client small { color: var(--teal); }
.bubble.partial { opacity: .62; font-style: italic; }
@keyframes bubbleIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------------------
   CENTER STAGE — Jarvis visualizer in a DARK pocket
   --------------------------------------------------------------------------- */
/* the stage is now FRAMELESS — the orb floats directly on the page's aurora field */

.stage {
  position: relative;
  background: transparent;
  min-height: 480px;
  aspect-ratio: 1 / 1;
  /* keep the orb + bottom action dock within the first viewport — without this the
     1:1 stage grows taller than the screen on wide layouts and the dock falls below the fold */
  max-height: calc(100vh - 240px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  overflow: visible;
  border: none; box-shadow: none;
}
/* the orb canvas fills the pocket */
.viz-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block; z-index: 1;
}
/* Lumen Arc face — a transparent layer drawn directly over the orb */
.face-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block; z-index: 2; pointer-events: none;
}

.stage-status {
  position: absolute; top: 16px; left: 50%; transform: translateX(-50%); z-index: 3;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .2px;
  color: var(--lav-600);
  background: rgba(255, 255, 255, .72); border: 1px solid rgba(167, 139, 250, .4);
  padding: 6px 12px; border-radius: 999px; backdrop-filter: blur(6px);
  box-shadow: 0 4px 14px rgba(124, 58, 237, .12);
  max-width: 86%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.stage-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--lav-500); box-shadow: 0 0 10px var(--lav-400); animation: shimmer 2.4s ease-in-out infinite; flex: none; }
/* floating caption that tells the client the agent is listening / thinking / waiting */
.stage-status { transition: opacity .45s ease, transform .45s ease; }
.stage-status.is-hidden { opacity: 0; transform: translateX(-50%) translateY(-8px); pointer-events: none; }
.stage-status[data-mood="hearing"] { color: var(--teal); border-color: rgba(34, 211, 238, .45); }
.stage-status[data-mood="hearing"] .stage-dot { background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }
.stage-status[data-mood="thinking"] .stage-dot { background: var(--lav-500); box-shadow: 0 0 12px var(--lav-400); }
.stage-status[data-mood="listening"] .stage-dot,
.stage-status[data-mood="ready"] .stage-dot { background: var(--lav-400); }

/* bottom action dock — the control console beneath Milo (replaces the mic orb) */
.stage-actions {
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 4;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 10px;
  background: rgba(255, 255, 255, .46);
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 17px;
  backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 18px 44px -20px rgba(124, 58, 237, .55), inset 0 1px 0 rgba(255, 255, 255, .75);
}
/* a soft halo shelf so the dock reads as a lit surface, not a floating box */
.stage-actions::before {
  content: ""; position: absolute; inset: -14px -22px;
  background: radial-gradient(60% 120% at 50% 120%, rgba(167, 139, 250, .35), transparent 70%);
  filter: blur(10px); z-index: -1; pointer-events: none;
}
.btn-stage { padding: 11px 20px; font-size: 13.5px; border-radius: 12px; white-space: nowrap; }
.stage-actions .btn-ghost { background: rgba(255, 255, 255, .72); border-color: rgba(255, 255, 255, .85); }
.stage-actions .btn-ghost:hover:not(:disabled) { background: rgba(255, 255, 255, .9); }

/* the primary CTA drifts its gradient slowly — alive, not loud */
.btn-primary:not(.recording) { animation: brandSheen 9s ease-in-out infinite; }
@keyframes brandSheen { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* scoring… indicator near the stage */
.thinking {
  position: absolute; top: 16px; right: 16px; z-index: 3;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .3px;
  color: var(--lav-600); background: rgba(255, 255, 255, .82);
  border: 1px solid rgba(167, 139, 250, .45); box-shadow: 0 4px 14px rgba(124, 58, 237, .12);
  padding: 5px 11px; border-radius: 999px;
  opacity: 0; transform: translateY(-4px); pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}
.thinking.on { opacity: 1; transform: none; }

/* next-question card */
.panel-next .next-body { margin: 10px 0 4px; }
.next-body .nq-name { font-size: 15.5px; font-weight: 800; color: var(--ink); margin-bottom: 6px; line-height: 1.3; }
.next-body .nq-q { color: var(--ink-2); line-height: 1.5; font-size: 14px; padding-left: 12px; border-left: 3px solid var(--indigo-2); }
.next-body .nq-why { margin-top: 10px; font-size: 12px; color: var(--violet-2); line-height: 1.45; }
.next-body .nq-tag {
  display: inline-block; margin: 10px 6px 0 0;
  font-size: 10.5px; font-weight: 700; color: var(--teal);
  background: #ecfeff; border: 1px solid #a5f3fc; padding: 4px 9px; border-radius: 7px;
}

/* coverage bar */
.coverage { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.coverage-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.coverage-label { font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--mute); }
.coverage-count { font-size: 13px; font-weight: 800; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.coverage-track { height: 9px; background: rgba(255, 255, 255, .45); border: 1px solid rgba(255, 255, 255, .6); border-radius: 999px; overflow: hidden; }
.coverage-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--indigo), var(--violet), var(--sky));
  background-size: 200% 100%;
  border-radius: 999px;
  transition: width .6s cubic-bezier(.4, 0, .2, 1);
  animation: shimmer 3s ease-in-out infinite;
}

/* ---------------------------------------------------------------------------
   RIGHT RAIL — live diagnosis
   --------------------------------------------------------------------------- */
/* archetype */
.panel-arch .panel-title { margin-bottom: 4px; }
.rationale { font-size: 12.5px; line-height: 1.55; color: var(--mute); margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.rationale:empty { display: none; }

/* lever board */
.lever-col-ready .lcol-title { color: var(--emerald); }
.lever-col-gated .lcol-title { color: var(--gold); }
.lcol-title { line-height: 1.25; }
.lever {
  background: rgba(255, 255, 255, .55); border: 1px solid rgba(255, 255, 255, .65); border-radius: 12px; padding: 10px 12px;
  box-shadow: 0 6px 18px -12px rgba(124, 58, 237, .3);
  animation: leverIn .34s cubic-bezier(.2, .8, .2, 1);
}
.lever.ready { border-left: 3px solid var(--emerald); }
.lever.gated { border-left: 3px solid var(--gold); background: rgba(255, 251, 240, .6); }
@keyframes leverIn { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }

/* factor grid */
.factor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 9px; }
.factor {
  background: rgba(255, 255, 255, .5); border: 1px solid rgba(255, 255, 255, .6); border-radius: 11px; padding: 9px 10px;
  position: relative; transition: opacity .4s ease, border-color .4s ease, box-shadow .4s ease, transform .3s ease;
}
.factor.undet { opacity: .42; }
.factor.det { background: rgba(240, 253, 244, .55); border-color: rgba(134, 239, 172, .7); box-shadow: 0 4px 12px -6px rgba(22, 163, 74, .35); }
.factor .fc { display: flex; align-items: center; gap: 6px; }
.factor .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--mute-3); flex: none; transition: background .4s ease, box-shadow .4s ease; }
.factor.det .dot { background: var(--emerald); box-shadow: 0 0 0 3px rgba(22, 163, 74, .16); }
.factor .fcode { font-size: 9.5px; font-weight: 800; letter-spacing: .3px; color: var(--mute); }
.factor .fband { margin-left: auto; font-size: 9.5px; font-weight: 800; padding: 1px 6px; border-radius: 6px; }
.fband.High { background: #f0fdf4; color: var(--emerald); border: 1px solid #bbf7d0; }
.fband.Medium { background: #fff7ed; color: var(--gold); border: 1px solid #fed7aa; }
.fband.Low { background: var(--rose-soft); color: var(--rose); border: 1px solid #fecaca; }
.factor .fname { font-size: 11px; color: var(--ink-2); margin-top: 5px; line-height: 1.35; font-weight: 500; }
.factor .fval { font-size: 10.5px; color: var(--teal); margin-top: 4px; font-weight: 700; }
.factor .fev {
  font-size: 10px; color: var(--mute); margin-top: 5px; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---- a factor set by hand (a saved session may still carry one) ---- */
.factor .fset { margin-left: 4px; font-size: 11px; color: var(--lav-600); font-weight: 800; }
/* a hand-set factor reads lavender (vs. the emerald of one inferred from speech) */
.factor.locked { background: var(--lav-50); border-color: var(--lav-200); box-shadow: 0 4px 12px -6px rgba(124, 58, 237, .3); }
.factor.locked .dot { background: var(--lav-500); box-shadow: 0 0 0 3px rgba(139, 92, 246, .16); }
.factor.locked .fval { color: var(--lav-600); }

/* the evolving "AI-readiness so far" headline above the scoresheet */
.readiness-head { margin: 0 0 13px; padding: 11px 13px; border-radius: 12px; background: var(--lav-50); border: 1px solid var(--lav-200); }
.readiness-head .rh-empty { font-size: 12px; color: var(--mute); line-height: 1.45; }
.readiness-head .rh-row { display: flex; align-items: baseline; justify-content: space-between; }
.readiness-head .rh-label { font-size: 12px; font-weight: 700; color: var(--ink-2); }
.readiness-head .rh-score { font-size: 24px; font-weight: 900; line-height: 1; }
.readiness-head .rh-score small { font-size: 11px; font-weight: 700; color: var(--mute-3); margin-left: 1px; }
.readiness-head .rh-score.band-Low { color: var(--rose); }
.readiness-head .rh-score.band-Medium { color: var(--gold); }
.readiness-head .rh-score.band-High { color: var(--emerald); }
.readiness-head .rh-track { height: 7px; border-radius: 999px; background: var(--lav-100); margin: 9px 0 7px; overflow: hidden; }
.readiness-head .rh-track i { display: block; height: 100%; border-radius: 999px; transition: width .5s cubic-bezier(.4, 0, .2, 1); }
.readiness-head .rh-track i.band-Low { background: linear-gradient(90deg, #f87171, var(--rose)); }
.readiness-head .rh-track i.band-Medium { background: linear-gradient(90deg, #fbbf24, var(--gold)); }
.readiness-head .rh-track i.band-High { background: linear-gradient(90deg, #34d399, var(--emerald)); }
.readiness-head .rh-sub { font-size: 10.5px; color: var(--mute-2); }

/* ============================================================================
   SSO + daily-usage chrome
   ============================================================================ */

/* header chips: signed-in user + "voice left today" */
.usage-chip {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: 11.5px; font-weight: 600; padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--ink-2); background: rgba(255, 255, 255, .6);
}
.usage-chip[hidden] { display: none; }
.usage-chip { color: var(--lav-600); border-color: var(--lav-200); background: var(--lav-50); }
.usage-chip::before { content: '⏱'; font-size: 11px; }
.usage-chip.depleted { color: var(--rose); border-color: #fecaca; background: var(--rose-soft); }
.usage-chip.depleted::before { content: '⛔'; }

/* header profile avatar — person glyph when unauthenticated, gradient initials when signed in */
.avatar {
  width: 30px; height: 30px; border-radius: 999px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--lav-600); background: rgba(255, 255, 255, .6); border: 1px solid var(--line);
  transition: transform .15s ease, box-shadow .15s ease;
}
.avatar:hover { transform: translateY(-1px); }
.avatar.has-initials {
  color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .3px;
  background: var(--brand-grad); border: 1.5px solid rgba(255, 255, 255, .7);
  box-shadow: 0 4px 12px -4px rgba(124, 58, 237, .5);
}

/* center identity block — the greeting, centered under the welcome */
.stage-head { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 4px 0 0; }
.stage-head .stage-greeting { margin: 0; }

/* NB: no 'both' fill — a filled animation pins opacity:1 and would defeat the .live fade-out */
.stage-greeting { text-align: center; margin: 6px 0 0; animation: greetIn .6s ease; }
.stage-greeting[hidden] { display: none; }
.greet-line { font-family: var(--serif); font-size: 21px; font-weight: 600; color: var(--ink-2); letter-spacing: .2px; }
.greet-line b { font-weight: 800; background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
@keyframes greetIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }

/* full-screen branded sign-in gate — sign-in panel (left) + image hero (right), Entra ID SSO */
.auth-gate { position: fixed; inset: 0; z-index: 1000; display: grid; grid-template-columns: .88fr 1.12fr; overflow: hidden; background: var(--paper); }
.auth-gate[hidden] { display: none; }

/* left: clean sign-in panel — Kearney wordmark top-left, card centred, privacy footer */
.auth-panel { position: relative; display: flex; flex-direction: column; padding: 30px 44px 26px; background: linear-gradient(180deg, #fff, var(--paper)); }
.auth-kearney { line-height: 0; color: var(--ink); }
.auth-kearney svg { display: block; height: 20px; width: auto; }
.auth-card-wrap { flex: 1 1 auto; display: grid; place-items: center; }
.auth-privacy { margin: 18px 0 0; font-size: 11px; line-height: 1.55; color: var(--mute); text-align: left; }
.auth-privacy-link { color: var(--lav-600); text-decoration: underline; font-weight: 700; white-space: nowrap; }
.auth-privacy-link:hover { color: var(--lav-500); }

/* right: full-bleed image hero under a deep-violet scrim, carrying the ORA product brand */
.auth-hero { position: relative; overflow: hidden;
  background: url('/assets/auth-hero.jpg') center/cover no-repeat; }
.auth-hero-scrim { position: absolute; inset: 0;
  background: linear-gradient(145deg, rgba(20, 18, 48, .90) 0%, rgba(49, 32, 98, .74) 48%, rgba(124, 58, 237, .42) 100%); }
.auth-hero-copy { position: absolute; left: 44px; right: 44px; bottom: 48px; z-index: 2; max-width: 540px; }
.auth-hero-brand { font-family: var(--serif); font-size: 30px; font-weight: 800; color: #fff; letter-spacing: .5px; margin: 0 0 18px; }
.auth-hero-brand .brand-diamond { color: #c4b5fd; }
.auth-headline { font-family: var(--serif); color: #fff; font-size: 42px; line-height: 1.06; font-weight: 800; letter-spacing: -.4px; margin: 0 0 16px; }
.auth-hero-sub { color: rgba(255, 255, 255, .78); font-size: 15px; line-height: 1.6; max-width: 460px; }

.auth-card { position: relative; text-align: center; max-width: 360px; }
.auth-title { margin: 0 0 6px; font-size: 21px; font-weight: 800; color: var(--ink); }
.auth-sub { margin: 0 0 22px; font-size: 13.5px; line-height: 1.55; color: var(--mute); }
.auth-btn { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border: none;
  padding: 10px 26px; border-radius: 6px; font: inherit; font-weight: 600; font-size: 14px; color: #fff;
  background: #7c3aed; transition: background .15s ease; }
.auth-btn:hover { background: #6d28d9; }

@media (max-width: 860px) {
  .auth-gate { grid-template-columns: 1fr; }
  .auth-hero { display: none; }
}

/* market backdrop (collapsible) */
.cf-grid .factor { padding: 8px 9px; }

/* ============================================================================
   RESPONSIVE — stack to one column under 1100px
   ============================================================================ */
@media (max-width: 1380px) {
  .cockpit { grid-template-columns: minmax(300px, 360px) 1fr; }
}
@media (max-width: 1100px) {
  .cockpit { grid-template-columns: 1fr; padding: 18px 18px 48px; }
  .rail { position: static; }
  .log-stream { max-height: 320px; }
  .transcript { max-height: 320px; }
  .stage { min-height: 360px; aspect-ratio: auto; height: 60vw; max-height: 460px; }
}
@media (max-width: 680px) {
  .hdr { padding: 14px 18px; }
  .hdr-controls { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
  .stage { height: 78vw; }
}

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

/* ============================================================================
   REDESIGN — minimised harness "now" card (left) + pill-tabbed panel (right)
   ============================================================================ */

/* left panel: now-card (fixed) + transcript (flex scroll) + dev input (fixed) */
.panel-copilot > .eyebrow { margin-bottom: 12px; }

.harness-now {
  flex: none;
  background: rgba(255, 255, 255, .5);
  border: 1px solid rgba(255, 255, 255, .65);
  border-radius: 14px;
  padding: 13px 14px;
  box-shadow: 0 8px 22px -14px rgba(124, 58, 237, .3);
}
.harness-now.pop { animation: nowPop .4s cubic-bezier(.2, .8, .2, 1); }
@keyframes nowPop { 0% { transform: scale(.995); } 40% { transform: scale(1.012); } 100% { transform: scale(1); } }

.hn-head { display: flex; align-items: flex-start; gap: 10px; }
.hn-icon {
  flex: none; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center;
  font-size: 14px; font-weight: 800; color: #fff; background: var(--brand-grad);
  box-shadow: 0 4px 12px -4px rgba(124, 58, 237, .5);
}
.hn-icon.hn-scoring { background: linear-gradient(135deg, var(--lav-500), var(--lav-400)); animation: spinPulse 1.6s ease-in-out infinite; }
.hn-icon.hn-factor { background: linear-gradient(135deg, var(--emerald), #34d399); }
.hn-icon.hn-question { background: linear-gradient(135deg, var(--sky), var(--cyan)); }
.hn-icon.hn-error { background: linear-gradient(135deg, var(--rose), #f43f5e); }
@keyframes spinPulse { 0%, 100% { opacity: .85; } 50% { opacity: 1; } }
.hn-caption { font-size: 12.5px; line-height: 1.45; color: var(--ink-2); font-weight: 600; padding-top: 4px; }

.hn-scored { margin-top: 12px; padding-top: 11px; border-top: 1px solid rgba(167, 139, 250, .22); }
.hn-scored-top { display: flex; align-items: center; justify-content: space-between; }
.hn-scored-label { font-size: 9.5px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--mute-2); }
.hn-band { font-size: 10px; font-weight: 800; padding: 1px 7px; border-radius: 6px; }
.hn-band.High { background: #ecfdf5; color: var(--emerald); }
.hn-band.Medium { background: #fffbeb; color: var(--gold); }
.hn-band.Low { background: var(--rose-soft); color: var(--rose); }
.hn-scored-name { font-size: 13px; font-weight: 800; color: var(--ink); margin: 4px 0 7px; }
.hn-bar { height: 8px; border-radius: 999px; background: rgba(124, 58, 237, .1); overflow: hidden; }
.hn-fill { height: 100%; border-radius: 999px; transition: width .7s cubic-bezier(.2, .8, .2, 1); background: var(--lav-400); }
.hn-fill.High { background: linear-gradient(90deg, var(--emerald), #34d399); }
.hn-fill.Medium { background: linear-gradient(90deg, var(--gold), #fbbf24); }
.hn-fill.Low { background: linear-gradient(90deg, var(--rose), #f43f5e); }
.hn-ev { font-size: 11px; font-style: italic; color: var(--mute); margin-top: 7px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.hn-focus { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 11px; border-top: 1px solid rgba(167, 139, 250, .22); }
.hn-focus-dot { flex: none; width: 8px; height: 8px; border-radius: 999px; background: var(--lav-400); box-shadow: 0 0 0 3px rgba(167, 139, 250, .2); animation: shimmer 1.8s ease-in-out infinite; }
.harness-now[data-mood="hearing"] .hn-focus-dot { background: var(--cyan); box-shadow: 0 0 0 3px rgba(34, 211, 238, .25); }
.harness-now[data-mood="thinking"] .hn-focus-dot { background: var(--lav-500); }
.hn-focus-text { font-size: 12px; color: var(--ink-2); min-width: 0; }
.hn-focus-text b { font-weight: 800; color: var(--ink); }
.hn-state { color: var(--lav-600); font-weight: 700; }
.hn-state::before { content: " · "; color: var(--mute-3); font-weight: 400; }

.hn-divider { flex: none; display: flex; align-items: center; gap: 10px; margin: 16px 0 10px; }
.hn-divider span { font-size: 10px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--mute-2); }
.hn-divider::after { content: ""; flex: 1; height: 1px; background: rgba(167, 139, 250, .25); }
.panel-copilot .transcript { flex: 1; min-height: 80px; }

/* right panel: pill tabs + panes */
.rtabs { display: flex; gap: 4px; background: rgba(255, 255, 255, .4); border: 1px solid rgba(255, 255, 255, .55); border-radius: 12px; padding: 4px; margin-bottom: 14px; flex: none; }
.rtab { flex: 1; font-family: var(--sans); font-size: 11.5px; font-weight: 700; color: var(--mute); background: transparent; border: none; border-radius: 9px; padding: 8px 6px; cursor: pointer; transition: background .16s ease, color .16s ease, box-shadow .16s ease; white-space: nowrap; }
.rtab:hover { color: var(--ink-2); }
.rtab.active { background: rgba(255, 255, 255, .92); color: var(--lav-600); box-shadow: 0 2px 8px rgba(124, 58, 237, .14); }
.rpane { max-height: calc(100vh - 210px); overflow-y: auto; padding-right: 2px; animation: paneIn .28s ease; }
.rpane[hidden] { display: none; }
@keyframes paneIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

/* steering-toward pane: next-question card already styled; folded levers below */
.steer-levers { margin-top: 14px; padding-top: 13px; border-top: 1px solid rgba(167, 139, 250, .22); }
.sl-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.sl-counts { font-size: 11px; font-weight: 700; color: var(--mute); }
.sl-list { display: flex; flex-direction: column; gap: 8px; }
.sl-row { background: rgba(255, 255, 255, .5); border: 1px solid rgba(255, 255, 255, .6); border-left: 3px solid var(--emerald); border-radius: 10px; padding: 8px 11px; animation: leverIn .34s cubic-bezier(.2, .8, .2, 1); }
.sl-line { display: flex; align-items: baseline; gap: 7px; }
.sl-rank { font-size: 10px; font-weight: 800; color: var(--teal); background: #ecfeff; border: 1px solid #a5f3fc; border-radius: 6px; padding: 0 6px; flex: none; }
.sl-name { font-size: 12.5px; font-weight: 800; color: var(--ink); }
.sl-theme { font-size: 10.5px; color: var(--mute); margin-top: 2px; }
.sl-quote { font-size: 11px; font-style: italic; color: var(--ink-2); margin-top: 5px; padding-left: 8px; border-left: 2px solid var(--line-2); line-height: 1.4; }
.sl-gated { font-size: 11.5px; color: var(--gold); margin-top: 10px; line-height: 1.45; }

/* coverage tucked at the bottom, deliberately muted (least important thing here) */
.coverage-foot { margin-top: 20px; padding-top: 13px; border-top: 1px solid rgba(167, 139, 250, .16); opacity: .68; }
.coverage-foot .coverage-head { margin-bottom: 6px; }
.coverage-foot .coverage-label { font-size: 9.5px; font-weight: 700; letter-spacing: 1px; color: var(--mute-2); }
.coverage-foot .coverage-count { font-size: 11px; font-weight: 700; color: var(--mute); }
.coverage-foot .coverage-track { height: 5px; background: rgba(124, 58, 237, .07); border-color: transparent; }
.coverage-foot .coverage-fill { background: linear-gradient(90deg, var(--lav-300), var(--lav-400)); }

/* ---- MILO brand row + commodity / discovery meta-pills ---- */
.brand-tag { font-size: 11px; font-weight: 600; letter-spacing: .3px; color: var(--mute-2); white-space: nowrap; }
.brand-tag::before { content: "· "; color: var(--lav-300); }
.brand-tag b { font-weight: 800; color: var(--ink); }

/* ============================================================================
   RECOMMENDATIONS SPOTLIGHT — strategic moves lifted to center, enumerated.
   Purely client-side; opened by the Recommend button from the live lever board.
   ============================================================================ */
.reco-overlay { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; gap: 26px; padding: 32px; }
.reco-overlay[hidden] { display: none; }

/* ORA's read-back as a chat bubble to the LEFT of the moves; everything behind both is blurred by the scrim */
.reco-bubble {
  position: relative; z-index: 1; flex: 0 0 auto; align-self: center;
  width: min(340px, 30vw); max-height: 80vh; overflow-y: auto;
  background: rgba(255, 255, 255, .93); border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 22px 22px 22px 7px; padding: 19px 22px;
  backdrop-filter: blur(30px) saturate(175%); -webkit-backdrop-filter: blur(30px) saturate(175%);
  box-shadow: 0 30px 88px -30px rgba(18, 7, 46, .62);
  opacity: 0; transform: translateY(18px) scale(.97);
  transition: opacity .42s cubic-bezier(.2, .8, .2, 1) .07s, transform .42s cubic-bezier(.2, .8, .2, 1) .07s;
}
.reco-overlay.open .reco-bubble { opacity: 1; transform: none; }
/* little tail pointing right, toward the moves */
.reco-bubble::after {
  content: ""; position: absolute; right: -6px; top: 34px; width: 14px; height: 14px; border-radius: 3px;
  background: rgba(255, 255, 255, .93); transform: rotate(45deg);
}
.reco-bubble-who { display: block; font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--lav-600); margin-bottom: 8px; }
.reco-bubble-text { margin: 0; font-family: var(--serif); font-size: 16px; line-height: 1.5; color: var(--ink-2); transition: opacity .22s ease; }
.reco-bubble-text.is-waiting { font-style: italic; color: var(--mute); }

/* "organising…" beat — a soft sheen sweep + gentle breathe while gpt-4.1-mini structures the
   spoken read-back into markdown. Contained to the bubble; the ::after tail is untouched. */
.reco-bubble.formatting { overflow: hidden; }
.reco-bubble.formatting::before {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(124, 58, 237, .14) 50%, transparent 65%);
  transform: translateX(-120%); animation: bubbleSheen 1.4s ease-in-out infinite;
}
@keyframes bubbleSheen { to { transform: translateX(120%); } }
.reco-bubble.formatting .reco-bubble-text { animation: bubbleBreathe 1.4s ease-in-out infinite; }
@keyframes bubbleBreathe { 0%, 100% { opacity: .72; } 50% { opacity: 1; } }

/* the organised markdown read — lead sentence + staggered, marker-led bullets */
.reco-md { font-family: var(--serif); font-size: 15px; }
.reco-md p { margin: 0 0 9px; }
.reco-md p:last-child { margin-bottom: 0; }
.reco-md ul { margin: 9px 0 2px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.reco-md li { position: relative; padding-left: 18px; line-height: 1.5; animation: mdLiIn .45s cubic-bezier(.2, .8, .2, 1) both; }
.reco-md li::before { content: '›'; position: absolute; left: 3px; top: -1px; color: var(--lav-500); font-weight: 800; font-family: var(--sans); }
.reco-md strong { color: var(--ink); font-weight: 800; }
.reco-md em { font-style: italic; color: var(--ink); }
@keyframes mdLiIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.reco-md li:nth-child(1) { animation-delay: .04s; }
.reco-md li:nth-child(2) { animation-delay: .12s; }
.reco-md li:nth-child(3) { animation-delay: .20s; }
.reco-md li:nth-child(4) { animation-delay: .28s; }
.reco-md li:nth-child(5) { animation-delay: .36s; }
.reco-md li:nth-child(6) { animation-delay: .44s; }
.reco-md li:nth-child(7) { animation-delay: .52s; }
.reco-md li:nth-child(n+8) { animation-delay: .58s; }

/* ---- format-on-arrival for EVERY ORA turn in the transcript stream ----
   the spoken line streams in as plain prose, shows a brief "organising…" shimmer when it
   finishes, then fade-swaps to gpt-4.1-mini-structured markdown (bold concepts, bullets only
   for genuine lists). Same premium beat as the read-back bubble, tuned for the smaller chat bubble. */
.bubble .btext { transition: opacity .2s ease; }
.bubble.interviewer.formatting { overflow: hidden; }
.bubble.interviewer.formatting::before {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  background: linear-gradient(105deg, transparent 35%, rgba(124, 58, 237, .12) 50%, transparent 65%);
  transform: translateX(-120%); animation: bubbleSheen 1.4s ease-in-out infinite;
}
.bubble.interviewer.formatting .btext { animation: bubbleBreathe 1.4s ease-in-out infinite; }

.btext.md-body { display: block; }
.md-body p { margin: 0 0 6px; }
.md-body p:last-child { margin-bottom: 0; }
.md-body ul { margin: 6px 0 1px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.md-body li { position: relative; padding-left: 15px; line-height: 1.4; animation: mdLiIn .4s cubic-bezier(.2, .8, .2, 1) both; }
.md-body li::before { content: '›'; position: absolute; left: 2px; top: -1px; color: var(--lav-500); font-weight: 800; font-family: var(--sans); }
.md-body strong { color: var(--ink); font-weight: 800; }
.md-body em { font-style: italic; }
.md-body li:nth-child(1) { animation-delay: .04s; }
.md-body li:nth-child(2) { animation-delay: .12s; }
.md-body li:nth-child(3) { animation-delay: .20s; }
.md-body li:nth-child(4) { animation-delay: .28s; }
.md-body li:nth-child(n+5) { animation-delay: .34s; }

.reco-scrim {
  position: absolute; inset: 0; cursor: pointer;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(124, 58, 237, .42), transparent 64%),
    rgba(26, 12, 52, .66);
  backdrop-filter: blur(12px) saturate(120%); -webkit-backdrop-filter: blur(12px) saturate(120%);
  opacity: 0; transition: opacity .4s ease;
}
.reco-overlay.open .reco-scrim { opacity: 1; }

.reco-modal {
  position: relative; z-index: 1; width: min(620px, 94vw); max-height: 88vh; overflow: hidden;
  display: flex; flex-direction: column;
  background: rgba(255, 255, 255, .94);
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 26px; padding: 32px 34px 26px;
  backdrop-filter: blur(30px) saturate(175%); -webkit-backdrop-filter: blur(30px) saturate(175%);
  box-shadow: 0 44px 120px -26px rgba(18, 7, 46, .72), inset 0 1px 0 rgba(255, 255, 255, .95);
  opacity: 0; transform: translateY(20px) scale(.965);
  transition: opacity .42s cubic-bezier(.2, .8, .2, 1), transform .42s cubic-bezier(.2, .8, .2, 1);
}
.reco-overlay.open .reco-modal { opacity: 1; transform: none; }

.reco-close {
  position: absolute; top: 16px; right: 18px; z-index: 2;
  width: 32px; height: 32px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(124, 58, 237, .18); background: rgba(255, 255, 255, .72); color: var(--mute);
  font-size: 19px; line-height: 1; display: grid; place-items: center;
  transition: background .16s ease, color .16s ease, transform .2s ease;
}
.reco-close:hover { background: #fff; color: var(--ink); transform: rotate(90deg); }

.reco-head { text-align: center; margin-bottom: 22px; flex: 0 0 auto; }
.reco-title { margin: 7px 0 5px; font-family: var(--serif); font-size: 27px; font-weight: 800; letter-spacing: -.4px; color: var(--ink); }
.reco-sub { margin: 0; font-size: 12.5px; color: var(--mute); line-height: 1.45; }

.reco-steps { list-style: none; margin: 0; padding: 0 4px 0 0; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; min-height: 0; flex: 1 1 auto; }
.reco-step {
  display: flex; align-items: flex-start; gap: 15px;
  background: linear-gradient(180deg, rgba(248, 246, 255, .96), rgba(243, 240, 253, .96));
  border: 1px solid rgba(196, 181, 253, .5);
  border-left: 3px solid var(--lav-400);
  border-radius: 16px; padding: 15px 18px;
  box-shadow: 0 16px 36px -24px rgba(124, 58, 237, .45);
  /* resting state is visible (fallback if keyframes can't run); the animation's
     `backwards` fill hides each step until its staggered turn to cascade in. */
  animation: recoStepIn .52s cubic-bezier(.2, .8, .2, 1) both;
  animation-delay: calc(var(--i, 0) * 150ms + 240ms);
}
@keyframes recoStepIn { from { opacity: 0; transform: translateX(36px); } to { opacity: 1; transform: none; } }

.reco-step-num {
  flex: none; width: 38px; height: 38px; border-radius: 12px;
  display: grid; place-items: center;
  font-family: var(--serif); font-size: 17px; font-weight: 800; color: #fff;
  background: var(--brand-grad); box-shadow: 0 9px 20px -6px rgba(124, 58, 237, .6);
}
.reco-step-body { min-width: 0; }
.reco-step-label { font-size: 9.5px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--lav-500); }
.reco-step-name { font-size: 15.5px; font-weight: 800; color: var(--ink); line-height: 1.3; margin: 2px 0; }
.reco-step-theme { font-size: 11.5px; color: var(--mute); }
.reco-step-quote { margin-top: 8px; font-size: 12px; font-style: italic; color: var(--ink-2); padding-left: 10px; border-left: 2px solid var(--line-2); line-height: 1.45; }

/* the overall visual that leads the picture — a RAG "shape" bar per dimension */
.reco-ov-li { list-style: none; animation: recoStepIn .52s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 150ms + 200ms); }
.dim-overview {
  background: linear-gradient(180deg, rgba(255, 255, 255, .97), rgba(248, 246, 255, .9));
  border: 1px solid rgba(196, 181, 253, .5); border-radius: 16px; padding: 15px 17px;
  box-shadow: 0 16px 38px -26px rgba(124, 58, 237, .45);
}
.dim-ov-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.ov-eyebrow { font-family: var(--serif); font-size: 14.5px; font-weight: 800; color: var(--ink); letter-spacing: -.2px; }
.ov-counts { display: flex; gap: 11px; flex-wrap: wrap; }
.ov-count { font-size: 10px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; display: inline-flex; align-items: center; gap: 5px; }
.ov-count::before { content: ''; width: 8px; height: 8px; border-radius: 999px; background: currentColor; }
.ov-count.is-gap { color: var(--rose); }
.ov-count.is-developing { color: var(--gold); }
.ov-count.is-strength { color: var(--emerald); }
.dim-bars { display: flex; flex-direction: column; gap: 8px; }
.dim-bar { display: grid; grid-template-columns: minmax(96px, 40%) 1fr; align-items: center; gap: 11px; }
.dim-bar-name { font-size: 11.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dim-bar-track { height: 9px; border-radius: 999px; background: rgba(124, 58, 237, .09); overflow: hidden; }
.dim-bar-track i { display: block; height: 100%; border-radius: 999px; animation: dimBarGrow .6s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes dimBarGrow { from { transform: scaleX(0); transform-origin: left; } to { transform: scaleX(1); } }
.dim-bar.is-gap .dim-bar-track i { background: linear-gradient(90deg, #f87171, var(--rose)); }
.dim-bar.is-developing .dim-bar-track i { background: linear-gradient(90deg, #fbbf24, var(--gold)); }
.dim-bar.is-strength .dim-bar-track i { background: linear-gradient(90deg, #34d399, var(--emerald)); }

/* expand a dimension card to read every cited phrase it rests on */
.reco-dim.has-more { cursor: default; }
.reco-more {
  margin-top: 9px; padding: 0; border: none; background: none; cursor: pointer;
  font-family: var(--sans); font-size: 11.5px; font-weight: 800; letter-spacing: .2px;
  color: var(--lav-600); display: inline-flex; align-items: center; gap: 4px;
}
.reco-more:hover { color: var(--lav-500); text-decoration: underline; }
.reco-cites { display: none; margin-top: 10px; flex-direction: column; gap: 9px; }
.reco-dim.expanded .reco-cites { display: flex; }
.reco-dim.expanded .reco-step-quote { display: none; } /* the full list supersedes the single preview */
.reco-cite {
  padding-left: 11px; border-left: 2px solid var(--line-2);
}
.reco-cite-factor { display: block; font-size: 10px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; color: var(--lav-500); margin-bottom: 2px; }
.reco-cite-quote { display: block; font-size: 12.5px; font-style: italic; color: var(--ink-2); line-height: 1.45; }

.reco-empty { text-align: center; padding: 22px 8px; }

/* the consultant Diagnosis pane reuses the complete-picture cards, compacted + static
   (no slide-in on every state tick, tighter sizing to fit the scratchpad column) */
.diag-body .dim-overview { margin-bottom: 11px; }
.diag-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.diag-steps .reco-step { animation: none; padding: 13px 14px; gap: 12px; box-shadow: 0 8px 22px -18px rgba(124, 58, 237, .4); }
.diag-steps .reco-step-num { width: 30px; height: 30px; border-radius: 9px; font-size: 14px; }
.diag-steps .reco-step-name { font-size: 14px; }
.diag-steps .reco-step-quote { font-size: 11.5px; }

.reco-foot { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(124, 58, 237, .12); display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; flex: 0 0 auto; }
.reco-foot .btn { padding: 11px 28px; }

/* ---- v3 process journey (the swimlane surface) — the active to-be flow with the client
   placed on each step along the as-is → to-be range. Shift #2 made visible. Lives as the
   lead card inside .reco-steps; colour is the only instrument (rose/gold/emerald). ---- */
.reco-flow-li {
  list-style: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .97), rgba(248, 246, 255, .9));
  border: 1px solid rgba(196, 181, 253, .55);
  border-radius: 18px; padding: 16px 18px 15px;
  box-shadow: 0 18px 42px -26px rgba(124, 58, 237, .5);
  animation: recoStepIn .52s cubic-bezier(.2, .8, .2, 1) both;
  animation-delay: calc(var(--i, 0) * 150ms + 220ms);
}
.flow-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.flow-eyebrow { font-size: 9.5px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--lav-500); }
.flow-name { font-family: var(--serif); font-size: 17px; font-weight: 800; color: var(--ink); line-height: 1.25; margin-top: 3px; }
.flow-legend { display: flex; gap: 11px; flex: none; padding-top: 3px; flex-wrap: wrap; justify-content: flex-end; }
.fl-key { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 600; color: var(--mute); white-space: nowrap; }
.fl-key .flow-node { width: 9px; height: 9px; box-shadow: none; }

/* flow ribbon: one chevron per step, in sequence (left→right = flow order); colour = where
   the client sits today (NOT position on an axis). Caption + legend make that explicit. */
.flow-railhead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 4px 0 6px; }
.flow-railcap { font-size: 9.5px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: var(--mute-2); }
.flow-raildir { font-size: 10px; font-style: italic; color: var(--mute-3); flex: none; }
.flow-ribbon { display: flex; gap: 2px; margin-bottom: 10px; }
.flow-seg { flex: 1 1 0; height: 15px; min-width: 6px; background: #d9d4ec;
  clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 50%, calc(100% - 5px) 100%, 0 100%, 5px 50%); }
.flow-seg.is-as_is { background: var(--rose); }
.flow-seg.is-emerging { background: var(--gold); }
.flow-seg.is-to_be { background: var(--emerald); }
.flow-seg.is-not_discussed { background: #d9d4ec; }
.flow-node { width: 11px; height: 11px; border-radius: 999px; flex: none; background: #d9d4ec; box-shadow: 0 0 0 2px rgba(255, 255, 255, .92); }
.flow-node.is-as_is { background: var(--rose); box-shadow: 0 0 0 2px rgba(255, 255, 255, .92), 0 0 8px -1px var(--rose); }
.flow-node.is-emerging { background: var(--gold); box-shadow: 0 0 0 2px rgba(255, 255, 255, .92), 0 0 8px -1px var(--gold); }
.flow-node.is-to_be { background: var(--emerald); box-shadow: 0 0 0 2px rgba(255, 255, 255, .92), 0 0 8px -1px var(--emerald); }

.flow-summary { font-size: 11.5px; color: var(--mute); line-height: 1.5; }

.flow-obs { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.flow-ob { padding: 11px 13px; border-radius: 13px; background: rgba(255, 255, 255, .72); border: 1px solid var(--line-2); border-left: 3px solid #d9d4ec; }
.flow-ob.is-as_is { border-left-color: var(--rose); }
.flow-ob.is-emerging { border-left-color: var(--gold); }
.flow-ob.is-to_be { border-left-color: var(--emerald); }
.flow-ob-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.flow-ob-name { font-size: 13.5px; font-weight: 700; color: var(--ink); line-height: 1.25; }
.flow-ob-tag { font-size: 9px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; flex: none; white-space: nowrap; }
.flow-ob-tag.is-as_is { background: var(--rose-soft); color: var(--rose); }
.flow-ob-tag.is-emerging { background: #fff7ed; color: var(--gold); }
.flow-ob-tag.is-to_be { background: #f0fdf4; color: var(--emerald); }
.flow-ob-track { position: relative; height: 4px; border-radius: 999px; margin: 10px 0 4px; background: linear-gradient(90deg, var(--rose-soft), #fff7ed 50%, #f0fdf4); }
.flow-ob-dot { position: absolute; top: 50%; width: 13px; height: 13px; border-radius: 999px; transform: translate(-50%, -50%); border: 2px solid #fff; box-shadow: 0 2px 7px rgba(18, 7, 46, .32); }
.flow-ob-dot.is-as_is { background: var(--rose); }
.flow-ob-dot.is-emerging { background: var(--gold); }
.flow-ob-dot.is-to_be { background: var(--emerald); }
.flow-ob-ends { display: flex; justify-content: space-between; font-size: 9px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--mute-3); }
.flow-ob-ev { margin-top: 7px; font-size: 11.5px; font-style: italic; color: var(--ink-2); padding-left: 9px; border-left: 2px solid var(--line-2); line-height: 1.45; }

/* the bubble+modal row needs width; below this, drop the bubble and centre the moves alone */
@media (max-width: 920px) { .reco-bubble { display: none; } }

@media (max-width: 560px) {
  .reco-modal { padding: 24px 20px; border-radius: 20px; }
  .reco-title { font-size: 22px; }
  .reco-step { gap: 12px; padding: 13px 14px; }
  /* stack the flow header so the legend never clips off the panel edge */
  .flow-head { flex-direction: column; gap: 8px; }
  .flow-legend { justify-content: flex-start; }
}

/* ============================================================================
   ✦ "CELESTIAL ORBITS" — the living orb stage (LIGHT, full-bleed, orb = hero)
   The orb is the centre of the whole space; the four operating-model dimensions
   grow as luminous arcs around it; everything else is quiet light on a dreamy
   lavender field with soft corner blooms in the four dimension colours.
   Scoped under body.stage-light. Less is more.
   ============================================================================ */
body.stage-light {
  background: #ece9f8;
  color: var(--ink-2);
  overflow: hidden; /* the stage is a fixed arena; nothing scrolls behind it */
}
/* bright centre so the pearl glows, easing to soft lavender at the edges */
body.stage-light::before {
  content: "";
  position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(125% 125% at 50% 36%, #ffffff 0%, #f4f1ff 34%, #eae5fc 66%, #ddd7f3 100%);
}
/* drifting corner blooms in the four dimension hues — depth + a sense the
   dimensions live around the orb (violet NE, sky SE, teal SW, indigo… ) */
body.stage-light::after {
  content: "";
  position: fixed; inset: -15%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 36% at 22% 22%, rgba(124, 58, 237, .20), transparent 60%),
    radial-gradient(36% 36% at 82% 24%, rgba(14, 165, 233, .16), transparent 62%),
    radial-gradient(40% 40% at 80% 84%, rgba(8, 145, 178, .14), transparent 62%),
    radial-gradient(36% 36% at 20% 82%, rgba(168, 85, 247, .16), transparent 62%);
  filter: blur(50px);
  animation: meshDrift 34s ease-in-out infinite;
}

/* ---- minimal header floating over the stage ---- */
body.stage-light .hdr {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 28px; background: none; border: none;
}
body.stage-light .hdr-brand { display: flex; flex-direction: column; gap: 1px; }
body.stage-light .brand-title {
  margin: 0; font-family: var(--serif); font-weight: 800;
  font-size: 23px; letter-spacing: .5px; color: var(--ink);
  display: flex; align-items: center; gap: 9px;
}
body.stage-light .brand-diamond { color: var(--lav-500); font-size: 15px; opacity: .9; }
body.stage-light .brand-tag { font-size: 11.5px; color: var(--mute-2); letter-spacing: .2px; }
body.stage-light .hdr-controls { display: flex; align-items: center; gap: 12px; }

/* header chips on light */
body.stage-light .hist-toggle,
body.stage-light .avatar {
  width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px; background: rgba(255, 255, 255, .72);
  border: 1px solid var(--line-2); color: var(--mute);
  box-shadow: 0 2px 8px rgba(20, 16, 45, .06);
  cursor: pointer; transition: background .2s, border-color .2s;
}
body.stage-light .hist-toggle:hover { background: #fff; color: var(--ink-3); }
body.stage-light .avatar.has-initials { background: var(--brand-grad); color: #fff; font-size: 12px; font-weight: 800; border: none; }
body.stage-light .usage-chip {
  font-size: 11.5px; color: var(--mute); background: rgba(255, 255, 255, .72);
  border: 1px solid var(--line-2); padding: 6px 11px; border-radius: 999px;
  box-shadow: 0 2px 8px rgba(20, 16, 45, .06);
}
body.stage-light .usage-chip.depleted { color: var(--rose); border-color: rgba(220, 38, 38, .3); }
body.stage-light .pill {
  font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .72);
  border: 1px solid var(--line-2); color: var(--mute-2);
  box-shadow: 0 2px 8px rgba(20, 16, 45, .06);
}
body.stage-light .pill-ready, body.stage-light .pill-listening { color: var(--emerald); border-color: rgba(16, 163, 74, .35); }
body.stage-light .pill-hearing { color: var(--indigo-2); border-color: rgba(99, 102, 241, .4); }
body.stage-light .pill-speaking, body.stage-light .pill-thinking { color: var(--lav-600); border-color: rgba(124, 58, 237, .4); }
body.stage-light .pill-error, body.stage-light .pill-closed { color: var(--rose); border-color: rgba(220, 38, 38, .35); }
body.stage-light .pill-connecting { color: var(--gold); border-color: rgba(217, 119, 6, .4); }
body.stage-light .pill-reconnecting { color: var(--gold); border-color: rgba(217, 119, 6, .45); animation: pillPulse 1.1s ease-in-out infinite; }
body.stage-light .pill-offline { color: var(--rose); border-color: rgba(220, 38, 38, .4); }
@keyframes pillPulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
.conn-failure { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--rose); }
.conn-failure[hidden] { display: none; }
.conn-cta { color: var(--lav-600); font-weight: 800; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.conn-cta:hover { color: var(--violet-2); }

/* ---- the arena ---- */
body.stage-light .stage-wrap { position: fixed; inset: 0; z-index: 1; }
body.stage-light .stage {
  position: absolute; inset: 0; overflow: visible;
  background: none; border: none; box-shadow: none; border-radius: 0; margin: 0;
  width: auto; height: auto; max-width: none; max-height: none; min-height: 0; aspect-ratio: auto;
  /* nudge the whole orb system (pearl + halo + face + dim-labels, all children of
     .stage) up a hair so it sits closer to the "Good morning" greeting above it. */
  transform: translateY(-3vh);
}
body.stage-light .halo-canvas,
body.stage-light .viz-canvas,
body.stage-light .face-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  max-width: none; max-height: none; aspect-ratio: auto; pointer-events: none;
}
body.stage-light .halo-canvas { z-index: 1; }
body.stage-light .viz-canvas  { z-index: 2; }
body.stage-light .face-canvas { z-index: 3; }
/* Standby: a very light, stage-wide blur over the orbit rings, with the orb cleared out by a
   radial mask so it (and the labels above) stay sharp. Sits above the canvases (z3) but below
   the dimension labels (z5). Fades out the instant an interview goes live → rings sharp + reactive. */
body.stage-light .orbit-blur {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 18%, #000 44%);
  mask-image: radial-gradient(circle at 50% 50%, transparent 18%, #000 44%);
  opacity: 1; transition: opacity .5s ease;
}
body.stage-light.live .orbit-blur { opacity: 0; }

/* ---- greeting + persona scope, top-centred; greeting fades once live ---- */
body.stage-light .stage-head {
  /* Same header-clearance floor as the now-exploring card: at a bare 12vh the greeting tucked
     under the fixed ~93px header on shorter viewports (only ~1px gap at 820px tall). */
  position: absolute; top: max(108px, 13vh); left: 50%; transform: translateX(-50%);
  z-index: 6; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center;
}
body.stage-light .stage-greeting {
  font-family: var(--serif); font-size: clamp(22px, 2.4vw, 32px); font-weight: 700;
  color: var(--ink); letter-spacing: .3px; transition: opacity .8s ease, transform .8s ease;
  text-shadow: 0 1px 2px rgba(255, 255, 255, .7);
}
body.stage-light .stage-greeting .greet-line b { color: var(--lav-600); font-weight: 700; }
body.stage-light.live .stage-greeting { opacity: 0; transform: translateY(-8px); pointer-events: none; }

/* ---- over-orb caption: Your turn / Listening / Thinking ---- */
body.stage-light .stage-status {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, calc(-50% + 17vh));
  z-index: 5; display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--ink-2); font-weight: 500; letter-spacing: .3px;
  text-shadow: 0 1px 2px rgba(255, 255, 255, .9), 0 0 14px rgba(255, 255, 255, .8);
  opacity: 1; transition: opacity .4s ease;
}
body.stage-light .stage-status.is-hidden { opacity: 0; }
body.stage-light .stage-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--lav-500); box-shadow: 0 0 10px var(--lav-400); }

/* ---- understanding: a soft "thinking" bubble at the orb's top-right ---- */
/* Not a stage-wide scrim and not a centred slab — a calm thought ORA has while you talk.
   It floats up-right of the orb, trails two little puffs back toward it, and (instead of
   blurring the whole stage) just lets the dimension chips recede so it owns the moment. */
body.stage-light .reflect-bubble {
  position: absolute; left: 61.5%; top: 13.5%; z-index: 7;
  display: flex; flex-direction: column; gap: 5px;
  max-width: min(330px, 30vw); padding: 13px 17px 14px; text-align: left; pointer-events: none;
  background: rgba(255, 255, 255, .97); border: 1px solid var(--lav-200); border-radius: 20px;
  box-shadow: 0 12px 34px rgba(80, 60, 160, .14), 0 0 0 6px rgba(167, 139, 250, .045);
  opacity: 0; transform: translateY(-7px) scale(.97); transform-origin: bottom left;
  transition: opacity .6s ease, transform .6s cubic-bezier(.22, .61, .36, 1);
}
body.stage-light .reflect-bubble.show { opacity: 1; transform: translateY(0) scale(1); }
/* thought-bubble tail: two shrinking puffs trailing down-left toward the orb */
body.stage-light .reflect-bubble::before,
body.stage-light .reflect-bubble::after {
  content: ""; position: absolute; border-radius: 50%;
  background: rgba(255, 255, 255, .97); border: 1px solid var(--lav-200);
  box-shadow: 0 5px 14px rgba(80, 60, 160, .10);
}
body.stage-light .reflect-bubble::before { width: 15px; height: 15px; left: 5px;  bottom: -11px; }
body.stage-light .reflect-bubble::after  { width: 8px;  height: 8px;  left: -11px; bottom: -25px; }
body.stage-light .reflect-eyebrow {
  font-size: 9.5px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--lav-500);
}
body.stage-light .reflect-text {
  font-family: var(--serif); font-weight: 600; font-style: italic;
  font-size: clamp(14px, 1.2vw, 18px); line-height: 1.36; color: var(--ink-2);
}
/* ---- live conversation: floating bubbles on the left of the orb ---- */
body.stage-light .stage-stream {
  position: absolute; left: 3vw; bottom: 30vh; z-index: 4;
  width: min(330px, 27vw); max-height: 40vh;
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: auto; /* hoverable + scrollable so you can read back the feed (was none) */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 16%);
  /* fade-in scrollbar: invisible at rest, eases in the moment the cursor enters the feed */
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  transition: scrollbar-color .22s ease;
}
body.stage-light .stage-stream:hover {
  scrollbar-color: rgba(139, 92, 246, .55) transparent; /* fallback */
  scrollbar-color: color-mix(in srgb, var(--lav-500) 55%, transparent) transparent;
}
body.stage-light .stage-stream::-webkit-scrollbar { width: 11px; }
body.stage-light .stage-stream::-webkit-scrollbar-track { background: transparent; }
body.stage-light .stage-stream::-webkit-scrollbar-thumb {
  background-color: transparent;
  border: 3px solid transparent; background-clip: padding-box; border-radius: 999px;
  transition: background-color .22s ease;
}
body.stage-light .stage-stream:hover::-webkit-scrollbar-thumb {
  background-color: rgba(139, 92, 246, .5); /* fallback */
  background-color: color-mix(in srgb, var(--lav-500) 52%, transparent);
}
body.stage-light .stage-stream:hover::-webkit-scrollbar-thumb:hover {
  background-color: rgba(124, 58, 237, .72); /* fallback */
  background-color: color-mix(in srgb, var(--lav-600) 72%, transparent);
}
body.stage-light .stage-stream .bubble {
  max-width: 94%; padding: 9px 13px; border-radius: 14px; font-size: 13px; line-height: 1.4;
  background: rgba(255, 255, 255, .85); border: 1px solid var(--line-2);
  box-shadow: 0 5px 18px rgba(80, 60, 160, .08); animation: bubbleIn .4s ease both;
  flex: 0 0 auto; /* keep natural height so the feed overflows + scrolls instead of compressing */
}
/* bottom-anchor the feed via auto margin (NOT justify-content: flex-end, which makes
   the overflow unreachable): short feed sits at the bottom; a tall feed scrolls to top. */
body.stage-light .stage-stream > .bubble:first-child { margin-top: auto; }
body.stage-light .stage-stream .bubble small {
  display: block; font-size: 9.5px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--lav-500); margin-bottom: 2px; font-weight: 700;
}
body.stage-light .stage-stream .bubble .btext { color: var(--ink-2); }
body.stage-light .stage-stream .bubble.interviewer { align-self: flex-start; }
body.stage-light .stage-stream .bubble.client { align-self: flex-end; background: rgba(124, 58, 237, .10); border-color: rgba(124, 58, 237, .18); }
body.stage-light .stage-stream .bubble.client small { color: var(--lav-600); }
body.stage-light .stage-stream .bubble.partial { opacity: .72; }
@keyframes bubbleIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---- bottom-right tools: history + detailed thinking, labelled ---- */
.stage-tools {
  position: fixed; right: 22px; bottom: 20px; z-index: 30;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
}
.stage-tools .tool-btn {
  display: inline-flex; align-items: center; gap: 8px; max-width: 290px;
  padding: 9px 15px; border-radius: 999px; cursor: pointer;
  background: rgba(255, 255, 255, .88); border: 1px solid var(--line-2); color: var(--ink-3);
  font-size: 12.5px; font-weight: 600; box-shadow: 0 4px 16px rgba(20, 16, 45, .1);
  transition: background .2s, color .2s, box-shadow .2s;
}
.stage-tools .tool-btn svg { flex: none; color: var(--lav-500); }
.stage-tools .tool-btn span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stage-tools .tool-btn:hover { background: #fff; color: var(--ink); box-shadow: 0 6px 22px rgba(20, 16, 45, .14); }
.stage-tools .tool-consult[aria-pressed="true"] { background: var(--brand-grad); color: #fff; border-color: transparent; }
.stage-tools .tool-consult[aria-pressed="true"] svg { color: #fff; }

/* ---- emerging moves: minimal "coming into view" whisper ---- */
body.stage-light .emerging {
  position: absolute; left: 50%; bottom: 17%; transform: translateX(-50%);
  z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 3px;
  text-align: center; opacity: 0; transition: opacity .6s ease;
}
body.stage-light .emerging.show { opacity: 1; }
body.stage-light .emerging-eyebrow {
  font-size: 10px; font-weight: 700; letter-spacing: 2.2px; text-transform: uppercase;
  color: var(--lav-600);
}
body.stage-light .emerging-name { font-size: 13px; color: var(--ink-2); text-shadow: 0 1px 1px rgba(255, 255, 255, .7); }

/* ---- theme-graph: the calm "now exploring" surface ---- */
/* One quiet card in its OWN space at the top of the stage — clear of the (quieted) orb, no
   overlap. Top: the 3-area PROCESS RIBBON (where we are + progress; the active area is the ONE
   place the area is named — highlighted, not repeated below). Then a muted eyebrow, the THEME
   large in plain human language, a plain-language gloss of it, and a number-free receipt.
   Exactly one thing changes per turn; a re-ask must not lurch, so nothing here animates on
   content change — only the mount/unmount fades. No text is ever truncated. */
body.stage-light .now-exploring {
  /* Clear the fixed, translucent header (~93px + its blur/shadow band). At the old max(96px,11vh)
     the ribbon (top row of the card) rendered ~22px UNDER the header and got washed out. This
     drops it to a comfortable ~22px below the header on desktop while staying above the orb. */
  position: absolute; left: 50%; top: max(140px, 16vh);
  transform: translateX(-50%);
  z-index: 6; width: min(780px, 94vw);
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  text-align: center; pointer-events: none;
  opacity: 0; transition: opacity .6s ease;
}
body.stage-light .now-exploring.show { opacity: 1; }
body.stage-light .now-exploring[hidden] { display: none; }
/* The now-exploring card is the DURING-interview surface. Keep it off the cold-open — otherwise
   it sits at the same top-centre spot as the greeting ("Good morning, {name}") and they collide.
   It appears only once the interview goes live, exactly as the greeting fades out. */
body.stage-light:not(.live) .now-exploring { display: none; }
body.stage-light .ne-eyebrow {
  font-size: 9.5px; font-weight: 700; letter-spacing: 2.2px; text-transform: uppercase;
  color: var(--lav-500); margin-top: 4px;
}
body.stage-light .ne-theme {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(20px, 2.2vw, 28px); line-height: 1.24; color: var(--ink);
  text-shadow: 0 1px 2px rgba(255, 255, 255, .95), 0 0 16px rgba(255, 255, 255, .8);
  text-wrap: balance; max-width: 620px;
}
/* the plain-language gloss of what ORA is drawing out right now (never truncated) */
body.stage-light .ne-hint {
  font-size: 13px; line-height: 1.45; color: var(--mute-2); max-width: 480px;
  text-shadow: 0 1px 2px rgba(255, 255, 255, .85);
}
body.stage-light .ne-hint:empty { display: none; }
/* the 3-area PROCESS RIBBON: done = filled+check · current = filled+halo (highlighted active area)
   · upcoming = faint outline. Arrows show the value-chain progression strategy → source → sign. */
body.stage-light .ne-ribbon {
  display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 2px 4px; row-gap: 6px; max-width: 100%;
  padding: 8px 16px; border-radius: 999px;
  background: rgba(255, 255, 255, .55); backdrop-filter: blur(3px);
  box-shadow: 0 1px 10px rgba(80, 60, 140, .06);
}
body.stage-light .ne-ribbon:empty { display: none; }
body.stage-light .ne-node {
  display: inline-flex; align-items: center; gap: 7px;
}
body.stage-light .ne-dot {
  width: 16px; height: 16px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  border: 1.5px solid var(--lav-300); background: rgba(255, 255, 255, .9);
  transition: background .5s ease, border-color .5s ease, box-shadow .5s ease;
}
body.stage-light .ne-dot svg { width: 9px; height: 9px; color: #fff; display: none; }
body.stage-light .ne-node.is-done .ne-dot { background: var(--lav-500); border-color: var(--lav-500); }
body.stage-light .ne-node.is-done .ne-dot svg { display: block; }
body.stage-light .ne-node.is-current .ne-dot {
  background: var(--lav-500); border-color: var(--lav-500);
  box-shadow: 0 0 0 4px rgba(139, 92, 246, .18);
}
body.stage-light .ne-node.is-upcoming .ne-dot { background: rgba(255, 255, 255, .7); border-color: var(--lav-200); }
/* labels: full text, never truncated. current (active) area is emphasised. */
body.stage-light .ne-label {
  font-size: 11px; font-weight: 600; letter-spacing: .1px; color: var(--mute-2); white-space: nowrap;
}
body.stage-light .ne-node.is-current .ne-label { color: var(--ink); font-weight: 700; }
body.stage-light .ne-node.is-upcoming .ne-label { color: var(--mute-3); font-weight: 600; }
/* the arrow connector between areas — the value-chain progression */
body.stage-light .ne-arrow { color: var(--lav-300); font-size: 13px; margin: 0 5px; flex: none; }
body.stage-light .ne-node.is-done + .ne-arrow { color: var(--lav-400); }
/* number-free receipt line: "Understood so far: how it works today · where it snags" */
body.stage-light .ne-receipt {
  margin-top: 3px; font-size: 11.5px; line-height: 1.45; color: var(--mute-2);
  max-width: 560px;
}
body.stage-light .ne-receipt[hidden] { display: none; }
body.stage-light .ne-receipt .ne-rc-lbl { font-weight: 600; color: var(--mute); }

/* ---- control dock ---- */
body.stage-light .stage-actions {
  position: absolute; left: 50%; bottom: 7vh; transform: translateX(-50%);
  z-index: 7; display: flex; gap: 12px;
}
body.stage-light .btn-stage {
  padding: 13px 26px; border-radius: 999px; font-size: 14px; font-weight: 700;
  letter-spacing: .2px; cursor: pointer; transition: transform .15s ease, box-shadow .25s ease, background .2s;
}
body.stage-light .btn-primary {
  background: var(--brand-grad); color: #fff; border: none;
  box-shadow: 0 8px 28px rgba(124, 58, 237, .32);
}
body.stage-light .btn-primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 12px 34px rgba(124, 58, 237, .42); }
body.stage-light .btn-primary.recording { background: linear-gradient(135deg, #be123c, #e11d48); box-shadow: 0 8px 28px rgba(225, 29, 72, .34); }
body.stage-light .btn-ghost {
  background: rgba(255, 255, 255, .82); color: var(--ink-2); border: 1px solid var(--line);
  box-shadow: 0 4px 14px rgba(20, 16, 45, .08);
}
body.stage-light .btn-ghost:hover:not(:disabled) { background: #fff; }
body.stage-light .btn-stage:disabled { opacity: .45; cursor: default; }
/* No live socket → ORA can't hear or reply, so gate the stage actions until we're reconnected. */
body.conn-down .btn-stage { opacity: .4; pointer-events: none; filter: grayscale(.3); cursor: default; }

/* ---- consultant side sheet — a LIGHT instrument panel (dual-reading) ---- */
.consult-sheet {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 28;
  width: min(440px, 92vw); display: flex; flex-direction: column; gap: 0;
  padding: 20px 20px 16px; overflow-y: auto;
  background: rgba(250, 249, 255, .97); color: var(--ink);
  border-left: 1px solid var(--line-2); box-shadow: -24px 0 60px rgba(20, 16, 45, .35);
  transform: translateX(100%); transition: transform .34s cubic-bezier(.4, 0, .2, 1);
  backdrop-filter: blur(8px);
}
.consult-sheet.open { transform: translateX(0); }
.consult-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.consult-title { font-family: var(--serif); font-size: 13px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--lav-600); }
.consult-close { width: 30px; height: 30px; border: none; background: var(--paper-3); border-radius: 8px; color: var(--mute); font-size: 18px; cursor: pointer; }
.consult-close:hover { background: var(--line-2); }
.consult-sheet .rtabs { position: sticky; top: 0; }
.consult-sheet .transcript { max-height: 220px; margin-top: 8px; }

/* hide the consultant scaffolding when the sheet is closed so nothing flashes on the stage */
.consult-sheet[hidden] { display: none; }

/* ---- responsive: stack the dock + shrink the orb labels on narrow screens ---- */
@media (max-width: 760px) {
  body.stage-light .stage-head { top: 9vh; }
  body.stage-light .reflect-bubble { left: 50%; top: 9%; transform: translateX(-50%) translateY(-7px) scale(.97); max-width: 80%; }
  body.stage-light .reflect-bubble.show { transform: translateX(-50%) translateY(0) scale(1); }
  body.stage-light .reflect-bubble::before, body.stage-light .reflect-bubble::after { display: none; }
  /* the floating left transcript doesn't fit a phone — fall back to the
     consult sheet there; keep the stage clean for the quadrant orb */
  body.stage-light .stage-stream { display: none; }
  /* collapse the tool buttons to icons so they don't crowd a phone */
  .stage-tools { right: 14px; bottom: 14px; gap: 8px; }
  .stage-tools .tool-btn { padding: 9px; }
  .stage-tools .tool-btn span { display: none; }
}

/* landing chooser — ORA centred above; pick a client (org-chart interview) or a personal chat */
.landing-choose { position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%); z-index: 6; display: flex; justify-content: center; }
.landing-choose[hidden] { display: none; }
.lc-menu-item.add { color: var(--lav-600, #7c3aed); font-weight: 600; border-top: 1px solid var(--line, #e2e8f0); margin-top: 4px; }

/* ---- workspace gating: two mutually-exclusive states, deterministic regardless of app.js timing ----
   ora-choosing : landing — greeting + orb + the client/personal chooser ONLY.
   ora-scoped   : a workspace/person is chosen — Start dock only; no chooser, no redundant lens picker. */
body.ora-choosing #stageActions { display: none !important; }
body.ora-scoped #landingChoose { display: none !important; }
/* "Show the complete picture" stays hidden until the interview has produced a diagnosis
   (app.js un-hides it once a factor is scored); [hidden] must beat .btn's display. */
#recBtn[hidden] { display: none !important; }
/* ---- the belief ledger (consultant sheet → "What ORA knows") -------------------------------
   Colour carries the epistemic type, because that distinction is the whole point of the panel:
   an absence and a wish read almost identically in a transcript and mean opposite things. */
.belief-body { display: flex; flex-direction: column; gap: 16px; }
.bel-block { border-left: 2px solid var(--line, #2a2a33); padding-left: 11px; }
.bel-block.bel-denial { border-left-color: #c0362c; }
.bel-block.bel-wish   { border-left-color: #b26b00; }
.bel-block.bel-fact   { border-left-color: #2e7d6b; }
.bel-block.bel-refusal{ border-left-color: #6b6b78; }
.bel-block.bel-agenda { border-left-color: #6d3bd1; }
.bel-h { margin: 0 0 3px; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; opacity: .78; font-weight: 600; }
.bel-n { opacity: .5; font-weight: 400; }
.bel-note { margin: 0 0 7px; font-size: 11px; line-height: 1.45; opacity: .55; }
.bel-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.bel-row { display: flex; flex-direction: column; gap: 2px; }
.bel-gist { font-size: 12.5px; line-height: 1.4; }
.bel-quote { font-size: 11.5px; line-height: 1.45; opacity: .62; font-style: italic; }
.bel-turn { font-size: 10px; opacity: .38; font-variant-numeric: tabular-nums; }
.bel-plan .bel-quote { font-style: normal; }
/* Live participant previews use the real controller but are deliberately ephemeral. */
.ora-preview-badge { border-color: rgba(173, 92, 20, .42) !important; color: #8b4b11 !important; background: #fff8ed !important; }