:root{
  --bg:#0d0d14; --card:#1a1a2e; --border:#2a2a4a; --user:#6b21a8;
  --ok:#4ade80; --warn:#f87171; --ref:#f59e0b; --text:#e0e0e0; --text2:#888888;
  --accent:#7c3aed;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,sans-serif;
  font-size:14px; line-height:1.5;
}
button{font-family:inherit;cursor:pointer}
a{color:inherit}

/* top nav */
.topbar{
  display:flex;align-items:center;gap:18px;height:44px;padding:0 16px;
  border-bottom:1px solid var(--border);background:#0b0b12;position:sticky;top:0;z-index:20;
}
.brand{font-weight:800;letter-spacing:.04em;display:flex;align-items:center;gap:6px}
.brand .orb{color:#38bdf8}
.nav{display:flex;gap:4px}
.nav button{
  background:transparent;border:none;color:var(--text2);padding:5px 12px;
  border-radius:7px;font-size:13px;font-weight:600;
}
.nav button.active{background:var(--card);color:var(--text)}
.nav button:hover{color:var(--text)}
.pill-right{
  margin-left:auto;background:rgba(74,222,128,.12);color:var(--ok);
  border:1px solid rgba(74,222,128,.3);border-radius:999px;padding:3px 12px;
  font-size:12px;font-weight:600;
}

/* generic layout */
.page{display:none}
.page.active{display:block}
.center-wrap{max-width:560px;margin:0 auto;padding:60px 20px}
h1.title{font-size:26px;font-weight:800;text-align:center;margin:14px 0 6px}
.subtitle{color:var(--text2);text-align:center;font-size:13px;margin-bottom:26px}

/* orb */
.orb-big{
  width:54px;height:54px;border-radius:50%;margin:0 auto;
  background:radial-gradient(circle at 35% 30%,#7dd3fc,#2563eb 70%);
  display:flex;align-items:center;justify-content:center;font-size:22px;
  box-shadow:0 0 24px rgba(56,189,248,.4);
}

/* form */
.label{font-size:11px;letter-spacing:.08em;color:var(--text2);font-weight:700;
  text-transform:uppercase;margin:16px 0 6px}
.input,select.input{
  width:100%;background:#12121d;border:1px solid var(--border);color:var(--text);
  border-radius:9px;padding:11px 13px;font-size:14px;outline:none;
}
.input:focus{border-color:var(--accent)}
.row2{display:flex;gap:12px}
.row2>div{flex:1}
.btn-primary{
  width:100%;background:var(--user);border:none;color:#fff;font-weight:700;
  padding:12px;border-radius:9px;margin-top:20px;font-size:14px;
}
.btn-primary:hover{background:#7c2db8}
.btn-primary:disabled{opacity:.45;cursor:not-allowed}
.foot-note{color:var(--text2);text-align:center;font-size:12px;margin-top:18px}
.dot-ok{color:var(--ok)}
.clear-all-btn{display:block;margin:14px auto 0;background:transparent;
  border:1px solid var(--border);color:var(--text2);border-radius:8px;
  padding:7px 14px;font-size:12px;font-weight:600}
.clear-all-btn:hover{border-color:var(--warn);color:var(--warn)}
.clear-all-btn.confirming{border-color:var(--warn);color:var(--warn);
  background:rgba(248,113,113,.08)}

/* resume chip */
.resume-chip{
  background:#12121d;border:1px solid var(--border);border-radius:9px;
  padding:10px 13px;display:flex;justify-content:space-between;align-items:center;
  cursor:pointer;font-size:13px;
}
.resume-chip:hover{border-color:var(--accent)}
.resume-chip .ago{color:var(--text2);font-size:12px}

/* cards (sources / thinking) */
.stack{max-width:680px;margin:0 auto;padding:40px 20px}
.src-card,.tm-card{
  background:var(--card);border:1px solid var(--border);border-radius:12px;
  padding:14px 16px;margin-bottom:12px;display:flex;align-items:center;gap:14px;
}
.src-card .ic,.tm-card .ic{
  width:34px;height:34px;border-radius:8px;background:#23233e;
  display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;
}
.src-card .body,.tm-card .body{flex:1}
.src-card .t,.tm-card .t{font-weight:700}
.src-card .d,.tm-card .d{color:var(--text2);font-size:12px}
.badge-live{color:var(--ok);font-size:12px;font-weight:600;white-space:nowrap}
.tm-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:760px;margin:0 auto;padding:0 20px}
.tm-card{margin:0;cursor:pointer;flex-direction:column;align-items:stretch}
.tm-head{display:flex;align-items:center;gap:12px}
.tm-q{color:var(--text);font-size:13px;margin-top:10px;display:none;
  border-top:1px solid var(--border);padding-top:10px}
.tm-card.open .tm-q{display:block}
.tm-chev{margin-left:auto;color:var(--text2)}
.spec-btn{
  display:inline-flex;align-items:center;gap:8px;background:var(--user);color:#fff;
  border:none;border-radius:9px;padding:10px 16px;font-weight:700;text-decoration:none;
}

/* investigation 3-panel */
.session{display:grid;grid-template-columns:230px 1fr 210px;height:calc(100vh - 44px)}
.col{overflow-y:auto;padding:14px}
.col.left{border-right:1px solid var(--border)}
.col.right{border-left:1px solid var(--border)}
.col.centre{display:flex;flex-direction:column;padding:0}
.build-id{font-weight:800;font-size:15px}
.build-sub{color:var(--text2);font-size:12px;margin-bottom:16px}
.sec-label{font-size:10px;letter-spacing:.1em;color:var(--text2);font-weight:700;
  text-transform:uppercase;margin:16px 0 8px}
.panel-block{margin-bottom:6px}
.panel-block .sec-label{margin-top:6px}

/* depth — active stepper */
.depth-now{font-size:12px;font-weight:700;color:var(--accent);
  background:rgba(124,58,237,.12);border:1px solid rgba(124,58,237,.3);
  border-radius:7px;padding:5px 9px;margin-bottom:8px}
.depth-step{display:flex;gap:9px;align-items:center;padding:3px 0;position:relative}
.depth-dot{width:10px;height:10px;border-radius:50%;background:var(--border);flex-shrink:0}
.depth-step.reached .depth-dot{background:var(--ok)}
.depth-step.current .depth-dot{background:var(--accent);
  box-shadow:0 0 0 4px rgba(124,58,237,.25)}
.depth-name{font-weight:600;color:var(--text2);font-size:13px}
.depth-step.reached .depth-name{color:var(--text)}
.depth-step.current .depth-name{color:var(--accent);font-weight:700}
.depth-sub{color:var(--text2);font-size:11px}
.chain-item{border-left:2px solid var(--user);padding:2px 0 8px 10px;margin-left:3px;font-size:12px}
.chain-w{color:#a855f7;font-weight:700;font-size:11px;margin-right:5px}
.chain-rc{border-left:2px solid var(--ok);padding:6px 0 6px 10px;margin-left:3px;
  font-size:12px;color:var(--ok)}
.chain-rc .lbl{font-weight:700;font-size:10px;letter-spacing:.08em;display:block}

/* chain — connected vertical timeline */
.chain-tl{position:relative;padding-left:4px}
.chain-node{position:relative;display:flex;gap:11px;padding:0 0 14px 0}
/* the spine connecting each badge to the next */
.chain-node::before{content:"";position:absolute;left:10px;top:21px;bottom:-1px;
  width:2px;background:var(--border)}
.chain-node:last-child::before{display:none}
.chain-node.rc::before,.chain-node.rc + *::before{display:none}
.chain-badge{position:relative;z-index:1;width:21px;height:21px;border-radius:50%;
  background:#23233e;border:2px solid var(--user);color:#c4b5fd;
  font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;
  flex-shrink:0}
.chain-badge.rc{background:rgba(74,222,128,.18);border-color:var(--ok);color:var(--ok)}
.chain-body{flex:1;min-width:0}
.chain-why{font-size:11px;font-weight:700;color:#a855f7;display:flex;align-items:center;
  gap:7px;flex-wrap:wrap;margin-bottom:2px}
.chain-node.rc .chain-why{color:var(--ok)}
.chain-layer{font-size:9px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--text2);background:#16162a;border:1px solid var(--border);
  border-radius:999px;padding:1px 7px}
.chain-layer.ok{color:var(--ok);border-color:rgba(74,222,128,.35);background:rgba(74,222,128,.1)}
.chain-text{font-size:12px;color:var(--text);line-height:1.45;word-wrap:break-word}

/* milestone journey panel */
.mj-head{font-size:12px;font-weight:700;color:var(--text);margin-bottom:6px}
.mj-win{color:var(--text2);font-weight:400}
.mj-row{display:flex;align-items:center;gap:6px;padding:3px 0;font-size:12px;
  border-bottom:1px solid rgba(42,42,74,.5)}
.mj-ms{font-weight:700;width:42px;flex-shrink:0}
.mj-counts{flex:1;color:var(--text2);font-size:11px}
.mj-net{font-weight:700;font-size:11px}
.mj-push{color:var(--warn)}
.mj-pull{color:var(--ok)}
.mj-sub{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--text2);
  font-weight:700;margin:10px 0 4px}

/* build-status strip (top of centre column) — Gestalt hierarchy */
.build-status{display:flex;align-items:stretch;border-bottom:1px solid var(--border);
  background:#101019;overflow:hidden}
.bs-accent{width:4px;flex-shrink:0;background:var(--text2)}
.build-status.sev-ok .bs-accent{background:var(--ok)}
.build-status.sev-warn .bs-accent{background:var(--ref)}
.build-status.sev-crit .bs-accent{background:var(--warn)}
.bs-zone{padding:9px 18px;display:flex;flex-direction:column;justify-content:center;gap:2px}
.bs-zone + .bs-zone{border-left:1px solid var(--border)}
.bs-label{font-size:9px;letter-spacing:.1em;color:var(--text2);font-weight:700;text-transform:uppercase}
.bs-id{font-weight:800;font-size:16px;letter-spacing:.01em;color:var(--text)}
.bs-meta{color:var(--text2);font-size:11px}
.bs-val{font-size:13px;font-weight:600;color:var(--text)}
/* hero severity zone */
.bs-hero{display:flex;align-items:center;gap:10px}
.bs-hero-num{font-size:19px;font-weight:800;line-height:1}
.build-status.sev-ok .bs-hero-num{color:var(--ok)}
.build-status.sev-warn .bs-hero-num{color:var(--ref)}
.build-status.sev-crit .bs-hero-num{color:var(--warn)}
.bs-pill{padding:3px 11px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.03em}
.build-status.sev-ok .bs-pill{background:rgba(74,222,128,.16);color:var(--ok)}
.build-status.sev-warn .bs-pill{background:rgba(245,158,11,.16);color:var(--ref)}
.build-status.sev-crit .bs-pill{background:rgba(248,113,113,.16);color:var(--warn)}
.bs-spacer{flex:1}
.bs-arrow{color:var(--text2);margin:0 4px}

/* centre conversation */
.sess-head{display:flex;justify-content:space-between;align-items:center;
  padding:12px 20px;border-bottom:1px solid var(--border)}
.sess-head .t{font-weight:700}
.sess-head .meta{color:var(--text2);font-size:12px}
.messages{flex:1;overflow-y:auto;padding:18px 22px}
.msg{display:flex;margin-bottom:16px;gap:10px}
.msg.user{justify-content:flex-end}
.avatar{width:26px;height:26px;border-radius:50%;background:#23233e;display:flex;
  align-items:center;justify-content:center;font-size:13px;flex-shrink:0}
.bubble{max-width:74%;padding:10px 14px;border-radius:12px;font-size:14px;white-space:pre-wrap}
.msg.agent .bubble{background:#16162a;border:1px solid var(--border)}
.msg.user .bubble{background:var(--user);color:#fff}
.msg.user .wrap{max-width:74%;display:flex;flex-direction:column;align-items:flex-end}
.valid{color:var(--text2);font-size:11px;margin-top:4px}
.ref-card{max-width:74%;background:rgba(245,158,11,.07);border-left:3px solid var(--ref);
  border-radius:8px;padding:10px 14px;font-size:13px;white-space:pre-wrap}
.ref-card .tag{color:var(--ref);font-weight:700;font-size:11px;letter-spacing:.04em;display:block;margin-bottom:5px}
.summary-card{max-width:80%;background:#16162a;border:1px solid var(--border);
  border-radius:10px;padding:12px 15px;font-size:13px;white-space:pre-wrap;font-family:ui-monospace,monospace}
.sys-line{color:var(--text2);font-size:12px;text-align:center;margin:8px 0}

/* input bar */
.inputbar{display:flex;gap:10px;padding:14px 20px;border-top:1px solid var(--border)}
.inputbar input{
  flex:1;background:#12121d;border:1px solid var(--border);color:var(--text);
  border-radius:10px;padding:12px 15px;font-size:14px;outline:none}
.inputbar input:focus{border-color:var(--accent)}
.send{width:42px;height:42px;border-radius:10px;border:none;background:var(--user);
  color:#fff;font-size:16px}
.send:disabled{opacity:.4}

/* right commands */
.cmd-btn{
  width:100%;text-align:left;background:#16162a;border:1px solid var(--border);
  color:var(--text);border-radius:8px;padding:9px 12px;margin-bottom:8px;font-size:13px;
}
.cmd-btn:hover{border-color:var(--accent)}
.cmd-btn:disabled{opacity:.4;cursor:not-allowed}
.cmd-btn.ok{color:var(--ok);border-color:rgba(74,222,128,.3)}
.cmd-btn.pending{background:rgba(74,222,128,.16);color:var(--ok);border-color:var(--ok)}
.cmd-back-row{display:flex;gap:6px;align-items:center;margin-bottom:8px}
.cmd-back-row input{width:54px;background:#12121d;border:1px solid var(--border);
  color:var(--text);border-radius:8px;padding:8px;text-align:center}
.src-mini{color:var(--text2);font-size:11px;padding:2px 0}
.src-mini.live::before{content:"• ";color:var(--ok)}
.hidden{display:none}


/* ============================================================
   Interaction & motion layer — flow, feedback, earned payoff
   (respects prefers-reduced-motion)
   ============================================================ */

/* micro-interactions: presses, hovers, focus */
.cmd-btn,.send,.btn-primary,.resume-chip,.src-card,.tm-card,.nav button{
  transition:transform .09s ease, background .15s ease,
             border-color .15s ease, box-shadow .18s ease, color .15s ease;
}
.cmd-btn:active,.send:active,.btn-primary:active{transform:scale(.96)}
.cmd-btn:hover:not(:disabled){border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent) inset, 0 4px 14px rgba(0,0,0,.3)}
.send:hover:not(:disabled){background:#7c2db8;
  box-shadow:0 0 14px rgba(124,58,237,.55)}
.btn-primary:hover:not(:disabled){box-shadow:0 6px 20px rgba(107,33,168,.5)}
.input:focus,.inputbar input:focus{
  box-shadow:0 0 0 2px rgba(124,58,237,.35); border-color:var(--accent)}
.src-card:hover,.tm-card:hover,.resume-chip:hover{
  transform:translateY(-2px); box-shadow:0 8px 22px rgba(0,0,0,.4)}

/* confirm button pulse while pending the lock */
.cmd-btn.pending{animation:pendPulse 1.4s ease-in-out infinite}
@keyframes pendPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(74,222,128,.0)}
  50%{box-shadow:0 0 0 3px rgba(74,222,128,.25)}
}

/* thinking indicator (agent is composing) */
.msg.thinking-row .bubble{padding:12px 16px}
.dots{display:inline-flex;gap:5px;align-items:center}
.dots i{width:7px;height:7px;border-radius:50%;background:var(--text2);
  display:inline-block;animation:blink 1.2s infinite}
.dots i:nth-child(2){animation-delay:.18s}
.dots i:nth-child(3){animation-delay:.36s}
@keyframes blink{0%,80%,100%{opacity:.25;transform:translateY(0)}
  40%{opacity:1;transform:translateY(-3px)}}

/* depth meter: connecting spine + reached fill */
#s-depth{position:relative}
.depth-step{position:relative}
.depth-dot{transition:background .3s ease, box-shadow .3s ease;
  box-shadow:0 0 0 0 rgba(74,222,128,0)}
.depth-step.reached .depth-dot{box-shadow:0 0 8px rgba(74,222,128,.5)}
.depth-step.pulse .depth-dot{animation:dotPulse .7s ease}
@keyframes dotPulse{
  0%{box-shadow:0 0 0 0 rgba(74,222,128,.6)}
  100%{box-shadow:0 0 0 12px rgba(74,222,128,0)}}
.depth-name{transition:color .3s ease}

@media (prefers-reduced-motion: no-preference){
  .msg.msg-new{animation:msgIn .3s cubic-bezier(.2,.8,.2,1)}
  .chain-node.is-new{animation:chainIn .32s ease both}
  .orb-big{animation:breathe 3.4s ease-in-out infinite}
  .page.active{animation:pageIn .26s ease}
}
@keyframes msgIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@keyframes chainIn{from{opacity:0;transform:translateX(-7px)}to{opacity:1;transform:none}}
@keyframes pageIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes breathe{
  0%,100%{box-shadow:0 0 18px rgba(56,189,248,.35)}
  50%{box-shadow:0 0 34px rgba(56,189,248,.65)}}

/* root-cause lock — the earned payoff */
.chain-node.rc.locked{animation:rcLock .7s cubic-bezier(.2,.8,.2,1)}
@keyframes rcLock{0%{opacity:0;transform:scale(.95)}
  55%{transform:scale(1.03)}100%{opacity:1;transform:none}}
#rc-flash{position:fixed;inset:0;pointer-events:none;z-index:50;opacity:0;
  background:radial-gradient(circle at 16% 55%,rgba(74,222,128,.20),transparent 45%);}
#rc-flash.go{animation:rcFlash 1.1s ease}
@keyframes rcFlash{0%{opacity:0}28%{opacity:1}100%{opacity:0}}

/* smooth scrolling in the message column */
.messages{scroll-behavior:smooth}

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


/* ============================================================
   Clarity layer — errors, loading, completion, no dead ends
   ============================================================ */

/* toast notifications (errors / confirmations) */
#toast-wrap{position:fixed;top:54px;right:16px;z-index:100;
  display:flex;flex-direction:column;gap:8px;max-width:340px}
.toast{background:var(--card);border:1px solid var(--border);
  border-left:3px solid var(--warn);color:var(--text);padding:11px 14px;
  border-radius:8px;font-size:13px;box-shadow:0 8px 24px rgba(0,0,0,.5);
  animation:toastIn .22s ease}
.toast.ok{border-left-color:var(--ok)}
.toast.info{border-left-color:var(--accent)}
.toast .tt{font-weight:700;display:block;margin-bottom:2px}
@keyframes toastIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}

/* button busy / loading state */
.btn-primary.busy,.cmd-btn.busy,.send.busy{opacity:.65;pointer-events:none}
.spin{display:inline-block;width:13px;height:13px;border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;
  vertical-align:-2px;margin-right:7px}
@keyframes spin{to{transform:rotate(360deg)}}

/* primary action disabled (no FBN yet) */
.btn-primary:disabled{opacity:.4;cursor:not-allowed}
.hint{color:var(--text2);font-size:11px;text-align:center;margin-top:8px}

/* investigation-complete bar (replaces the input bar) */
.complete-bar{display:flex;align-items:center;gap:14px;padding:13px 20px;
  border-top:1px solid var(--border);background:#16162a}
.complete-bar .done-msg{color:var(--text);font-weight:700;font-size:13px;flex:1}
.complete-bar .new-btn{background:var(--user);border:none;color:#fff;font-weight:700;
  padding:9px 16px;border-radius:9px;font-size:13px}
.complete-bar .new-btn:hover{background:#7c2db8}

/* end-session pending confirm */
#end-btn.confirming{color:var(--warn);border-color:var(--warn)}


/* ============================================================
   Left-panel UX overhaul — chunking, hierarchy, progressive
   disclosure (behavioural-science: reduce simultaneous load)
   ============================================================ */

/* collapsible reference sections */
.panel-acc{border-top:1px solid var(--border);margin-top:10px;padding-top:4px}
.panel-acc > summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  gap:6px;user-select:none}
.panel-acc > summary::-webkit-details-marker{display:none}
.acc-chev{margin-left:auto;color:var(--text2);transition:transform .2s ease}
.panel-acc[open] > summary .acc-chev{transform:rotate(90deg)}
.acc-badge{font-size:10px;font-weight:700;color:var(--text2);
  background:#16162a;border:1px solid var(--border);border-radius:999px;padding:1px 7px;
  text-transform:none;letter-spacing:0}

/* identity chips */
.ctx-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.ctx-chip{font-size:11px;font-weight:600;color:var(--text);background:#1d1d33;
  border:1px solid var(--border);border-radius:6px;padding:3px 9px}
.ctx-chip.alt{color:#c4b5fd;border-color:rgba(124,58,237,.4);background:rgba(124,58,237,.1)}

/* one focal risk pill */
.ctx-pill{display:inline-block;font-size:12px;font-weight:700;border-radius:7px;
  padding:5px 10px;margin-bottom:10px}
.ctx-pill.warn{color:var(--warn);background:rgba(248,113,113,.12);
  border:1px solid rgba(248,113,113,.35)}
.ctx-pill.ok{color:var(--ok);background:rgba(74,222,128,.12);
  border:1px solid rgba(74,222,128,.3)}

/* progressive-disclosure text blocks */
.ctx-block{margin-bottom:10px}
.ctx-mini-label{font-size:9px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text2);font-weight:700;margin-bottom:3px}
.ctx-clamp{font-size:12px;color:var(--text);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ctx-clamp.expanded{-webkit-line-clamp:unset;overflow:visible}
.clamp-toggle{background:none;border:none;color:var(--accent);font-size:11px;
  font-weight:600;padding:2px 0;cursor:pointer}
.clamp-toggle:hover{text-decoration:underline}

/* thread tags */
.ctx-tags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}
.ctx-tag{font-size:11px;color:var(--text2);background:#16162a;
  border:1px solid var(--border);border-radius:6px;padding:2px 8px}
.ctx-note{font-size:11px;color:var(--text2);border-left:2px solid var(--border);
  padding-left:8px;margin-top:6px}

/* strip — journey churn arrows */
.bs-up{color:var(--warn);font-weight:700}
.bs-down{color:var(--ok);font-weight:700}

/* confirm button states — neutral until depth-ready, green only when locked */
.cmd-btn.confirm-btn{color:var(--text2);border-style:dashed}
.cmd-btn.confirm-btn.ready{color:var(--ok);border-style:solid;
  border-color:rgba(74,222,128,.5);background:rgba(74,222,128,.06)}
.cmd-btn.confirm-btn.pending{background:rgba(74,222,128,.16);color:var(--ok);
  border-style:solid;border-color:var(--ok);animation:pendPulse 1.4s ease-in-out infinite}
.cmd-btn.confirm-btn.locked{background:rgba(74,222,128,.2);color:var(--ok);
  border-style:solid;border-color:var(--ok)}

/* completion bar — save next to new investigation */
.complete-bar .save-btn{background:transparent;border:1px solid var(--border);
  color:var(--text);font-weight:700;padding:9px 14px;border-radius:9px;font-size:13px}
.complete-bar .save-btn:hover{border-color:var(--ok);color:var(--ok)}
.complete-bar .save-btn:disabled{opacity:.6;cursor:default}


/* session-header buttons (Home / Guide) */
.sess-head{position:relative}
.head-btn{background:transparent;border:1px solid var(--border);color:var(--text2);
  border-radius:7px;padding:5px 11px;font-size:12px;font-weight:600}
.head-btn:hover{border-color:var(--accent);color:var(--text)}
#home-btn{margin-right:6px}
#guide-btn{margin-left:auto}

/* interface guide overlay (UK annotations) */
.guide-overlay{position:fixed;inset:0;z-index:120;background:rgba(0,0,0,.55);
  display:flex;align-items:center;justify-content:center;padding:24px}
.guide-overlay.hidden{display:none}
.guide-card{background:var(--card);border:1px solid var(--border);border-radius:14px;
  max-width:560px;width:100%;max-height:82vh;overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 20px 60px rgba(0,0,0,.6)}
.guide-head{display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;border-bottom:1px solid var(--border);font-weight:800}
.guide-close{background:transparent;border:none;color:var(--text2);font-size:16px}
.guide-close:hover{color:var(--text)}
.guide-body{padding:16px 18px;overflow-y:auto;font-size:13px;line-height:1.5}
.guide-body p{margin:6px 0;color:var(--text)}
.guide-body b{color:#fff}
.guide-body i{color:var(--text2);font-style:normal}
.guide-sec{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);
  font-weight:800;margin:16px 0 6px}
.guide-note{color:var(--text2);font-size:12px;border-top:1px solid var(--border);
  padding-top:10px;margin-top:12px}