/* ============================================================================
   Interview Lifeline — shared component styles (2026-09-06).
   ONE embeddable component rendered full-width under the host page's own chrome
   on admin.html / client-admin.html / portal.html. Dark "Midnight Indigo"
   everywhere (verified: all three pages load the same styles.css/app.css — there
   is no separate light client theme). EVERY selector is scoped under `.ivl` so
   the generic class names (.stage, .node, .panel, .doc…) cannot collide with the
   host page. Palette + layout match the approved prototype exactly.
   ============================================================================ */
.ivl{
  --ivl-bg:#0f172a; --ivl-bg-alt:#131c31; --ivl-surface:#192134; --ivl-surface-2:#1d2740;
  --ivl-ink:#f6f3ec; --ivl-slate:#ece8de; --ivl-muted:#b8bcc5; --ivl-faint:#7f8698;
  --ivl-heading:#dcb75f;
  --ivl-indigo-700:#818cf8; --ivl-indigo-500:#a5b4fc; --ivl-indigo-400:#c7d0ff; --ivl-violet:#a78bfa;
  --ivl-border:rgba(255,255,255,.11); --ivl-glass:rgba(255,255,255,.05); --ivl-glass-bd:rgba(255,255,255,.12);
  --ivl-ok:#34d399; --ivl-live:#f5a524; --ivl-err:#f87171;
  --ivl-shadow:0 18px 46px -22px rgba(0,0,0,.7);
  color:var(--ivl-ink); font-size:15px; line-height:1.55;
}
.ivl *{box-sizing:border-box}
.ivl [hidden]{display:none!important}
.ivl h2,.ivl h3{font-family:Newsreader,Georgia,serif; color:var(--ivl-heading); font-weight:600; letter-spacing:-.01em; margin:0}

/* ---- loading / error / empty ---- */
.ivl-loading,.ivl-error{padding:34px 22px; text-align:center; color:var(--ivl-muted); font-size:14px}
.ivl-error{color:var(--ivl-err)}
.ivl-skel{height:44px;border-radius:12px;background:linear-gradient(90deg,var(--ivl-glass),rgba(255,255,255,.09),var(--ivl-glass));
  background-size:200% 100%; animation:ivl-shimmer 1.3s linear infinite; margin:8px 0}
@keyframes ivl-shimmer{to{background-position:-200% 0}}

/* ---- person header ---- */
.ivl-backlink{display:inline-flex; align-items:center; gap:7px; color:var(--ivl-indigo-400); text-decoration:none; font-size:13px; font-weight:500; margin-bottom:14px; background:none; border:0; cursor:pointer; font-family:inherit}
.ivl-backlink svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}
.ivl-welcomeline{font-size:15px; color:var(--ivl-slate); margin:-2px 2px 18px}
.ivl-welcomeline b{color:var(--ivl-heading); font-family:Newsreader,serif}
.ivl-person{display:flex; align-items:center; gap:16px; padding:18px 20px; background:var(--ivl-glass); border:1px solid var(--ivl-glass-bd);
  border-radius:18px; box-shadow:var(--ivl-shadow); margin-bottom:22px}
.ivl-avatar{flex:0 0 auto; width:52px; height:52px; border-radius:50%; display:grid; place-items:center;
  font-family:Newsreader,serif; font-size:22px; color:#0f1424; font-weight:600; background:linear-gradient(135deg,var(--ivl-indigo-500),var(--ivl-violet))}
.ivl-who{min-width:0; flex:1}
.ivl-nm{font-family:Newsreader,serif; font-size:21px; color:var(--ivl-ink); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ivl-rl{font-size:13px; color:var(--ivl-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ivl-metarow{display:flex; gap:18px; flex-wrap:wrap; margin-top:6px; font-size:12px; color:var(--ivl-faint)}
.ivl-metarow b{color:var(--ivl-muted); font-weight:500}
.ivl-statuschip{flex:0 0 auto; display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px;
  font-size:12.5px; font-weight:600; white-space:nowrap; --c:var(--ivl-live);
  background:color-mix(in srgb, var(--c) 12%, transparent); border:1px solid color-mix(in srgb, var(--c) 42%, transparent); color:var(--c)}
.ivl-statuschip .ball{width:11px;height:11px;border-radius:50%;flex:0 0 auto; background:var(--c); box-shadow:0 0 10px color-mix(in srgb,var(--c) 70%, transparent)}

/* ---- admin manage bar (P5 parity: interview-level actions) ---- */
.ivl-managebar{display:flex; flex-wrap:wrap; gap:8px; margin:0 2px 16px}
.ivl-mb-btn{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--ivl-slate);
  background:var(--ivl-glass); border:1px solid var(--ivl-glass-bd); border-radius:999px; padding:6px 13px; cursor:pointer; font-family:inherit; white-space:nowrap}
.ivl-mb-btn:hover{color:var(--ivl-ink); border-color:color-mix(in srgb,var(--ivl-indigo-700) 45%, transparent); background:color-mix(in srgb,var(--ivl-indigo-700) 12%, transparent)}
.ivl-mb-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;flex:0 0 auto}
.ivl-mb-btn.danger{color:var(--ivl-err); border-color:color-mix(in srgb,var(--ivl-err) 34%, transparent)}
.ivl-mb-btn.danger:hover{background:color-mix(in srgb,var(--ivl-err) 12%, transparent); border-color:color-mix(in srgb,var(--ivl-err) 55%, transparent)}

/* admin: why the interview is stopped (halted / auto-paused) — under the manage bar */
.ivl-statebar{margin:-6px 2px 16px; border:1px solid color-mix(in srgb,var(--acc) 34%, transparent); border-radius:12px; font-weight:500; line-height:1.45}
.ivl-statebar b{font-weight:700}

/* ---- section head + from pill ---- */
.ivl-sec-h{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:0 2px 6px; flex-wrap:wrap}
.ivl-sec-h h2{font-size:19px}
.ivl-sec-h .hint{font-size:12px; color:var(--ivl-faint)}
.ivl-frompill{display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--ivl-indigo-400); background:color-mix(in srgb,var(--ivl-indigo-700) 12%, transparent);
  border:1px solid color-mix(in srgb,var(--ivl-indigo-700) 34%, transparent); padding:3px 10px; border-radius:999px; margin-left:10px; vertical-align:middle}
.ivl-frompill svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2}

/* ---- zone strip (inputs | outputs) ---- */
.ivl-zonestrip{display:flex; align-items:stretch; margin:0 4px 2px; gap:10px}
.ivl-zonestrip .zg{border-top:2px solid var(--ivl-glass-bd); padding:6px 0 0; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ivl-muted); position:relative}
.ivl-zonestrip .zg::before{content:""; position:absolute; left:0; top:-2px; width:2px; height:9px; background:var(--ivl-glass-bd)}
.ivl-zonestrip .zg.input{color:var(--ivl-indigo-400); border-color:rgba(129,140,248,.4)} .ivl-zonestrip .zg.input::before{background:rgba(129,140,248,.65)}
.ivl-zonestrip .zg.output{color:var(--ivl-heading); border-color:rgba(220,183,95,.4)} .ivl-zonestrip .zg.output::before{background:rgba(220,183,95,.7)}
.ivl-zonestrip .zg small{display:block; font-weight:500; text-transform:none; letter-spacing:0; color:var(--ivl-faint); font-size:10.5px}

/* ---- lifeline (the spine of stage nodes) ---- */
.ivl-lifeline{list-style:none; margin:0 0 22px; padding:8px 4px 4px; display:flex; align-items:flex-start; gap:0}
.ivl-stage{position:relative; flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; text-align:center;
  --acc:rgba(255,255,255,.16); --accglow:transparent}
.ivl-stage.done{ --acc:var(--ivl-ok);   --accglow:rgba(52,211,153,.75)}
.ivl-stage.active{--acc:var(--ivl-live); --accglow:rgba(245,165,36,.85)}
.ivl-stage.stuck{ --acc:var(--ivl-err);  --accglow:rgba(248,113,113,.92)}
.ivl-stage.waitother{--acc:var(--ivl-live); --accglow:transparent}
.ivl-stage.stuckother{--acc:var(--ivl-err); --accglow:transparent}
.ivl-stage.future{--acc:rgba(255,255,255,.14); --accglow:transparent}
.ivl-stage.zonestart::after{content:""; position:absolute; left:-1px; top:6px; bottom:34px; border-left:2px dashed rgba(220,183,95,.35)}
.ivl-stage .conn{position:absolute; top:21px; right:50%; width:100%; height:3px; border-radius:3px; z-index:0}
.ivl-stage:first-child .conn{display:none}
.ivl-stage .conn .fill{position:absolute; inset:0; border-radius:3px; background:rgba(255,255,255,.10)}
.ivl-stage.reached .conn .fill{background:var(--ivl-ok)}
.ivl-stage.ecg-live .conn .fill{background:linear-gradient(90deg,var(--acc),rgba(255,255,255,.05))}
.ivl-stage .ecg{position:absolute; inset:-14px 0; display:none; align-items:center; overflow:hidden}
.ivl-stage.ecg-live .ecg{display:flex}
.ivl-ecg-svg{width:100%; height:34px; display:block}
.ivl .trace{fill:none; stroke:rgba(255,255,255,.14); stroke-width:2}
.ivl .spark{fill:none; stroke:var(--acc); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round;
  filter:drop-shadow(0 0 5px var(--accglow)); stroke-dasharray:34 300; stroke-dashoffset:334; animation:ivl-sweep 2.1s linear infinite}
@keyframes ivl-sweep{to{stroke-dashoffset:0}}
.ivl-node{position:relative; z-index:1; background:none; border:0; cursor:pointer; padding:0 2px; display:flex; flex-direction:column; align-items:center; gap:9px; width:100%; color:inherit; font:inherit}
.ivl-dot{width:44px;height:44px;border-radius:50%; display:grid; place-items:center; position:relative;
  background:var(--ivl-surface); border:2px solid var(--acc); color:var(--acc); transition:transform .2s ease, border-color .2s ease}
.ivl-dot svg{width:19px;height:19px; stroke:currentColor;fill:none;stroke-width:1.8}
.ivl-stage.waitother .ivl-dot,.ivl-stage.stuckother .ivl-dot{border-style:dashed}
.ivl-dot .rb{position:absolute; right:-4px; bottom:-4px; width:17px;height:17px;border-radius:50%; background:var(--ivl-bg-alt); border:1px solid var(--acc); display:grid; place-items:center}
.ivl-dot .rb svg{width:11px;height:11px; stroke:var(--ivl-heading)}
.ivl-node:hover .ivl-dot{transform:translateY(-2px)}
.ivl-node:focus-visible{outline:none}
.ivl-node:focus-visible .ivl-dot{box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 45%, transparent)}
.ivl-stage.future{opacity:.5}
.ivl-stage.active .ivl-dot::before,.ivl-stage.active .ivl-dot::after,
.ivl-stage.stuck .ivl-dot::before,.ivl-stage.stuck .ivl-dot::after{content:""; position:absolute; inset:-2px; border-radius:50%;
  border:2px solid var(--acc); opacity:0; animation:ivl-pulse 2.1s ease-out infinite}
.ivl-stage.active .ivl-dot::after,.ivl-stage.stuck .ivl-dot::after{animation-delay:1.05s}
@keyframes ivl-pulse{0%{transform:scale(1); opacity:.7} 100%{transform:scale(1.85); opacity:0}}
.ivl-node .lbl{font-size:11.5px; font-weight:600; color:var(--ivl-slate); line-height:1.22; max-width:12ch}
.ivl-stage.future .ivl-node .lbl{color:var(--ivl-muted)}
.ivl-node .sub{font-size:10px; color:var(--ivl-faint); letter-spacing:.02em; text-transform:uppercase}
.ivl-stage.active .ivl-node .sub,.ivl-stage.stuck .ivl-node .sub,.ivl-stage.waitother .ivl-node .sub,.ivl-stage.stuckother .ivl-node .sub{color:var(--acc); font-weight:700}
.ivl-stage.sel .ivl-node .lbl{color:var(--ivl-indigo-400)}
.ivl-stage.sel .ivl-dot{box-shadow:0 0 0 3px rgba(129,140,248,.30)}

/* ---- panel ---- */
.ivl-panel{background:var(--ivl-glass); border:1px solid var(--ivl-glass-bd); border-radius:20px;
  box-shadow:var(--ivl-shadow); overflow:hidden; --acc:var(--ivl-indigo-400); --accglow:rgba(165,180,252,.6)}
.ivl-panel-h{display:flex; align-items:center; gap:14px; padding:18px 22px; border-bottom:1px solid var(--ivl-border)}
.ivl-panel-h .p-ic{width:40px;height:40px;border-radius:12px; display:grid; place-items:center; flex:0 0 auto;
  background:color-mix(in srgb,var(--acc) 12%, transparent); border:1px solid color-mix(in srgb,var(--acc) 40%, transparent)}
.ivl-panel-h .p-ic svg{width:21px;height:21px; stroke:var(--acc);fill:none;stroke-width:1.8}
.ivl-panel-h .t{flex:1; min-width:0}
.ivl-panel-h .t h3{font-size:17px; color:var(--ivl-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ivl-panel-h .t .st{font-size:12px; margin-top:2px; display:flex; align-items:center; gap:6px; color:var(--acc); font-weight:600}
.ivl-panel-h .t .st svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8}
.ivl-mini{width:120px;height:34px; flex:0 0 auto; display:none}
.ivl-panel-h .ivl-mini.on{display:block}
.ivl-infobar{display:flex; align-items:center; gap:10px; padding:11px 22px; font-size:12.5px; font-weight:600; color:var(--acc);
  background:color-mix(in srgb,var(--acc) 9%, transparent); border-bottom:1px solid color-mix(in srgb,var(--acc) 24%, transparent)}
.ivl-infobar svg{width:16px;height:16px;stroke:currentColor;flex:0 0 auto;fill:none;stroke-width:1.8}
.ivl-infobar .act{margin-left:auto; font-weight:700; display:inline-flex; align-items:center; gap:5px; color:var(--acc); background:none; border:0; cursor:pointer; font:inherit; font-weight:700}
.ivl-infobar .act:hover{text-decoration:underline}

/* ---- docs list inside panel ---- */
.ivl-docs{padding:10px 14px 16px}
.ivl-doc{display:flex; align-items:center; gap:13px; padding:13px 12px; border-radius:12px; color:inherit; transition:background .18s ease}
.ivl-doc+.ivl-doc{border-top:1px solid rgba(255,255,255,.06)}
.ivl-doc.ready:hover,.ivl-doc.review:hover,.ivl-doc.email:hover{background:rgba(129,140,248,.09)}
.ivl-doc.email .d-ic{background:color-mix(in srgb,var(--ivl-indigo-700) 14%, transparent); border-color:color-mix(in srgb,var(--ivl-indigo-700) 34%, transparent)}
.ivl-acts{display:flex; align-items:center; gap:14px; flex:0 0 auto}
.ivl-d-eml{font-size:12px; font-weight:600; color:var(--ivl-indigo-400); display:inline-flex; align-items:center; gap:5px; text-decoration:none; white-space:nowrap; background:none; border:0; cursor:pointer; font-family:inherit}
.ivl-d-eml:hover{color:#dbe1ff}
.ivl-d-eml svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.8}
.ivl-doc .d-ic{width:34px;height:34px;border-radius:9px; display:grid; place-items:center; flex:0 0 auto; background:var(--ivl-surface-2); border:1px solid var(--ivl-border)}
.ivl-doc .d-ic svg{width:17px;height:17px; stroke:var(--ivl-indigo-400);fill:none;stroke-width:1.8}
.ivl-doc .d-main{flex:1; min-width:0}
.ivl-doc .d-nm{font-size:14px; font-weight:600; color:var(--ivl-slate); display:flex; align-items:center; gap:8px}
.ivl-doc .d-nm span.txt{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ivl-doc .d-meta{font-size:11.5px; color:var(--ivl-faint); margin-top:1px}
.ivl-doc .d-go{flex:0 0 auto; font-size:12px; font-weight:600; color:var(--ivl-indigo-400); display:inline-flex; align-items:center; gap:5px; text-decoration:none; white-space:nowrap; background:none; border:0; cursor:pointer; font-family:inherit; font-weight:600}
.ivl-doc .d-go svg{width:14px;height:14px; stroke:currentColor;fill:none;stroke-width:1.8}
.ivl-doc .d-go:hover{color:#dbe1ff}
.ivl-doc .d-go.act{color:var(--ivl-live)}
.ivl-doc.pending{opacity:.55}
.ivl-doc.pending .d-go{color:var(--ivl-faint); cursor:default}
.ivl-doc.info .d-go{display:none}
.ivl-doc.info{opacity:.9}
.ivl-editchip{display:inline-flex; align-items:center; gap:4px; font-size:10px; font-weight:700; letter-spacing:.02em; text-transform:uppercase; color:var(--ivl-heading);
  background:rgba(220,183,95,.12); border:1px solid rgba(220,183,95,.34); padding:2px 7px; border-radius:999px}

/* ---- Remy provenance ball (drills to source) ---- */
.ivl-prov{width:15px;height:15px;border-radius:50%;flex:0 0 auto; position:relative; cursor:pointer; padding:0; border:0;
  background:radial-gradient(circle at 34% 30%, #ff9d9d 0 18%, #e23b3b 55%, #a01414 100%);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.25), 0 1px 3px rgba(0,0,0,.4)}
.ivl-prov::after{content:attr(data-tip); position:absolute; left:50%; bottom:145%; transform:translateX(-50%) translateY(4px);
  white-space:nowrap; background:#0b1120; color:var(--ivl-slate); border:1px solid var(--ivl-border); font-size:11px; font-weight:500;
  padding:5px 9px; border-radius:8px; opacity:0; pointer-events:none; transition:opacity .16s ease, transform .16s ease; z-index:5}
.ivl-prov:hover::after,.ivl-prov:focus::after{opacity:1; transform:translateX(-50%) translateY(0)}

/* ---- P5c extras: host-rendered disclosures under a stage panel ---- */
.ivl-extras{padding:0 14px 16px; display:flex; flex-direction:column; gap:8px; min-width:0}
.ivl-disc{border:1px solid var(--ivl-border); border-radius:12px; background:rgba(255,255,255,.03); min-width:0}
.ivl-disc[open]{border-color:color-mix(in srgb,var(--ivl-indigo-700) 40%, transparent); background:rgba(129,140,248,.05)}
.ivl-disc summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:9px; padding:10px 13px; font-size:13px; font-weight:600; color:var(--ivl-slate); user-select:none}
.ivl-disc summary::-webkit-details-marker{display:none}
.ivl-disc summary::before{content:""; width:7px; height:7px; border-right:2px solid var(--ivl-indigo-400); border-bottom:2px solid var(--ivl-indigo-400); transform:rotate(-45deg); transition:transform .18s ease; flex:0 0 auto; margin-right:2px}
.ivl-disc[open] summary::before{transform:rotate(45deg)}
.ivl-disc summary svg{width:15px;height:15px; stroke:var(--ivl-indigo-400); fill:none; stroke-width:1.8; flex:0 0 auto}
.ivl-disc summary .x-lbl{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ivl-disc summary .hint{font-size:11.5px; font-weight:500; color:var(--ivl-faint); margin-left:auto; white-space:nowrap}
.ivl-disc summary:hover{color:var(--ivl-ink)}
.ivl-disc summary:focus-visible{outline:none; box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--ivl-indigo-700) 55%, transparent); border-radius:12px}
/* wide host content (tables, cost trails) scrolls INSIDE the body — never the page (no-h-scroll covenant) */
.ivl-disc-body{padding:4px 13px 13px; font-size:13.5px; color:var(--ivl-slate); overflow-x:auto; min-width:0; max-height:60vh; overflow-y:auto}
.ivl-disc-body .muted{color:var(--ivl-muted)}
.ivl-disc-body textarea{width:100%; box-sizing:border-box; min-height:60px; font-family:inherit; font-size:13.5px; padding:9px 11px; border:1.5px solid var(--ivl-border); border-radius:9px; background:var(--ivl-surface); color:var(--ivl-ink); margin-top:6px}

.ivl-emptydocs{padding:26px 22px 30px; text-align:center; color:var(--ivl-faint)}
.ivl-emptydocs svg{width:30px;height:30px;stroke:var(--ivl-faint);fill:none;stroke-width:1.8; opacity:.6; margin-bottom:8px}
.ivl-emptydocs .big{color:var(--ivl-muted); font-weight:600; font-size:14px}
.ivl-legend{display:flex; gap:15px; flex-wrap:wrap; margin:2px 4px 22px; font-size:12px; color:var(--ivl-muted)}
.ivl-legend .li{display:inline-flex; align-items:center; gap:8px}
.ivl-legend .sw{width:15px;height:15px;border-radius:50%; background:var(--ivl-surface)}
.ivl-legend .sw.d{border:2px solid var(--ivl-ok)} .ivl-legend .sw.a{border:2px solid var(--ivl-live)} .ivl-legend .sw.w{border:2px dashed var(--ivl-live)} .ivl-legend .sw.s{border:2px solid var(--ivl-err)} .ivl-legend .sw.f{border:2px solid rgba(255,255,255,.16)}
.ivl-note{margin-top:22px; font-size:12px; color:var(--ivl-faint); border-top:1px solid var(--ivl-border); padding-top:14px}
.ivl-note b{color:var(--ivl-muted)}

@media (max-width:920px){
  .ivl-zonestrip{display:none}
  .ivl-lifeline{flex-direction:column; align-items:stretch; gap:0; padding-left:6px}
  .ivl-stage{flex-direction:row; text-align:left; align-items:flex-start; gap:14px; padding-bottom:20px}
  .ivl-stage .conn{top:0; left:20px; right:auto; width:3px; height:100%}
  .ivl-stage:first-child .conn{display:none}
  .ivl-stage.zonestart::after{display:none}
  .ivl-stage.zonestart{border-top:1px dashed rgba(220,183,95,.35); margin-top:6px; padding-top:18px}
  .ivl-stage.ecg-live .ecg{display:none}
  .ivl-node{flex-direction:row; align-items:center; gap:14px; width:auto}
  .ivl-node .txtcol{display:flex; flex-direction:column; align-items:flex-start}
  .ivl-node .lbl{max-width:none}
}
@media (min-width:921px){ .ivl-node .txtcol{display:contents} }
@media (prefers-reduced-motion:reduce){
  .ivl .spark{animation:none; stroke-dashoffset:0; stroke-dasharray:none}
  .ivl-stage.active .ivl-dot::before,.ivl-stage.active .ivl-dot::after,.ivl-stage.stuck .ivl-dot::before,.ivl-stage.stuck .ivl-dot::after{animation:none; opacity:0}
  .ivl-skel{animation:none}
}