/* =========================================================================
   Dr. Insanity — Production Pipelines
   Interactive drill-in, cases.insanity.team light/pastel style.
   ========================================================================= */
:root{
  --bg:#f4f6fb; --ink:#0b1220; --muted:#5b6472; --line:#e6e9f0;
  --slate50:#f8fafc; --slate100:#f1f5f9; --slate200:#e2e8f0; --slate300:#cbd5e1;
  --slate400:#94a3b8; --slate500:#64748b; --slate600:#475569; --slate700:#334155; --slate900:#0f172a;
  --sky50:#f0f9ff;   --sky200:#bae6fd;   --sky500:#0ea5e9;   --sky700:#0369a1;
  --indigo50:#eef2ff;--indigo200:#c7d2fe;--indigo500:#6366f1;--indigo700:#4338ca;
  --violet50:#f5f3ff;--violet200:#ddd6fe;--violet500:#8b5cf6;--violet700:#6d28d9;
  --emerald50:#ecfdf5;--emerald200:#a7f3d0;--emerald500:#10b981;--emerald700:#047857;
  --teal50:#f0fdfa; --teal200:#99f6e4; --teal500:#14b8a6; --teal700:#0f766e;
  --rose50:#fff1f2; --rose200:#fecdd3; --rose500:#f43f5e; --rose700:#be123c;
  --amber50:#fffbeb; --amber200:#fde68a; --amber500:#f59e0b; --amber700:#b45309;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:
    radial-gradient(1200px 600px at 100% -10%, #eef2ff 0%, transparent 55%),
    radial-gradient(900px 500px at -10% 0%, #ecfeff 0%, transparent 50%),
    var(--bg);
  color:var(--ink);
  font-family:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  height:100vh; height:100dvh; overflow:hidden;
  display:grid; grid-template-rows:auto 1fr;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* tone helpers (50 bg / 200 ring / 500 dot / 700 text) */
.tone-slate  {--b:var(--slate50);  --r:var(--slate200);  --d:var(--slate400); --t:var(--slate600)}
.tone-sky    {--b:var(--sky50);    --r:var(--sky200);    --d:var(--sky500);   --t:var(--sky700)}
.tone-indigo {--b:var(--indigo50); --r:var(--indigo200); --d:var(--indigo500);--t:var(--indigo700)}
.tone-violet {--b:var(--violet50); --r:var(--violet200); --d:var(--violet500);--t:var(--violet700)}
.tone-emerald{--b:var(--emerald50);--r:var(--emerald200);--d:var(--emerald500);--t:var(--emerald700)}
.tone-teal   {--b:var(--teal50);   --r:var(--teal200);   --d:var(--teal500);  --t:var(--teal700)}
.tone-rose   {--b:var(--rose50);   --r:var(--rose200);   --d:var(--rose500);  --t:var(--rose700)}
.tone-amber  {--b:var(--amber50);  --r:var(--amber200);  --d:var(--amber500); --t:var(--amber700)}

/* ---------- topbar ---------- */
.topbar{display:flex; align-items:center; gap:16px; padding:11px 22px; background:rgba(255,255,255,.85); border-bottom:1px solid var(--line); backdrop-filter:blur(8px)}
.brand{display:flex; align-items:center; gap:11px; flex:none}
.brand__logo{display:grid; place-items:center; width:34px; height:34px; border-radius:10px; background:var(--slate900); color:#fff; font-size:13px; font-weight:800; letter-spacing:.5px}
.brand__title{font-size:15px; font-weight:700; letter-spacing:-.2px; color:var(--slate900)}
.crumbs{display:flex; align-items:center; gap:5px; flex:1; overflow-x:auto; scrollbar-width:none}
.crumbs::-webkit-scrollbar{display:none}
.crumb{border:0; background:transparent; color:var(--slate500); font:inherit; font-size:13px; font-weight:600; padding:5px 9px; border-radius:8px; cursor:pointer; white-space:nowrap}
.crumb:hover{background:var(--slate100); color:var(--slate900)}
.crumb--cur{color:var(--slate900); cursor:default}
.crumb--cur:hover{background:transparent}
.crumb__sep{color:var(--slate300); font-size:13px}
.ghostbtn{border:1px solid var(--slate200); background:#fff; color:var(--teal700); font:inherit; font-size:12.5px; font-weight:600; padding:7px 13px; border-radius:9px; cursor:pointer; flex:none}
.ghostbtn:hover{border-color:var(--teal200)}

/* back button (in topbar) */
.backbtn{flex:none; height:32px; padding:0 12px; border-radius:9px; border:1px solid var(--slate200); background:#fff; color:var(--slate600); font-size:13px; font-weight:700; cursor:pointer; transition:.15s; white-space:nowrap}
.backbtn:hover{border-color:var(--teal200); color:var(--teal700)}

/* ---------- content area holds both Explore + Full-map views ---------- */
.content{position:relative; min-height:0; overflow:hidden}
.hidden{display:none !important}

/* mode toggle */
.modes{display:flex; gap:2px; background:var(--slate100); border:1px solid var(--slate200); border-radius:9px; padding:2px; flex:none}
.mode{border:0; background:transparent; color:var(--slate500); font:inherit; font-size:12.5px; font-weight:700; padding:6px 12px; border-radius:7px; cursor:pointer}
.mode.is-on{background:#fff; color:var(--slate900); box-shadow:0 1px 2px rgba(15,23,42,.08)}

/* ---------- stage (Explore) ---------- */
/* top-anchored so the bottom panel changing height on hover never re-centers
   (and jumps) the cards above it */
/* horizontal padding reserves room for the side peeks so they never overlap cards */
.stage{position:absolute; inset:0; overflow:auto; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; padding:clamp(18px,6vh,64px) clamp(16px,18vw,260px) 28px; gap:6px}

/* big header card = the current node */
.big{width:min(680px,100%); background:var(--b,#fff); border-radius:16px; padding:18px 22px; box-shadow:inset 0 0 0 1px var(--r,var(--line)); text-align:left}
.big--root{background:transparent; box-shadow:none; text-align:center; padding:8px}
.big.pop{animation:bigPop .3s cubic-bezier(.2,.7,.2,1)}
@keyframes bigPop{from{opacity:0; transform:translateY(-8px) scale(.985)} to{opacity:1; transform:none}}
.big__label{display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--t)}
.big__title{margin:5px 0 0; font-size:23px; font-weight:800; letter-spacing:-.4px; color:var(--slate900)}
.big--root .big__title{font-size:26px}
.big__desc{margin:9px 0 0; font-size:14px; line-height:1.6; color:var(--slate600)}
.big--root .big__desc{margin:6px auto 0; max-width:620px}
.big .opill{margin-top:8px}
.big .panel__result{margin-top:11px}

.downconn{display:flex; justify-content:center; color:var(--slate300); padding:2px 0}
.downconn svg{display:block}

/* ---------- board (Full map — pannable) ---------- */
.board{position:absolute; inset:0; overflow:auto; display:none; cursor:grab}
.board.on{display:block}
.board.grabbing{cursor:grabbing}
.board.grabbing *{cursor:grabbing !important; user-select:none}
.board__hint{position:sticky; top:12px; left:0; margin:12px 0 -10px 16px; display:inline-block; font-size:11px; font-weight:600; color:var(--slate500); background:rgba(255,255,255,.88); border:1px solid var(--line); border-radius:999px; padding:4px 11px; z-index:5; pointer-events:none}
.track{display:flex; align-items:flex-start; gap:0; padding:18px 30px 30px; width:max-content}

.seg{display:flex; flex-direction:column; gap:10px; flex:none}
.seg__label{position:sticky; left:8px; align-self:flex-start; display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.4px; color:var(--t); background:var(--b); padding:5px 11px; border-radius:999px; box-shadow:inset 0 0 0 1px var(--r); z-index:3}
.seg__flow{display:flex; align-items:flex-start; gap:0}
.phasemark{writing-mode:vertical-rl; transform:rotate(180deg); align-self:stretch; display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; color:var(--slate400); padding:6px 3px; margin:0 4px; border-left:1px dashed var(--slate200); max-height:170px; text-align:center}

.bcol{display:flex; flex-direction:column}
.brow{display:flex; align-items:center}
.bcard{width:172px; min-height:76px; display:flex; flex-direction:column; gap:5px; align-items:flex-start; background:var(--b); border-radius:12px; padding:10px 12px; box-shadow:inset 0 0 0 1px var(--r)}
.bcard__title{font-size:13px; font-weight:700; line-height:1.25; color:var(--slate900)}
.bdrop{padding-left:14px; padding-top:3px; display:flex; flex-direction:column; gap:5px; align-items:flex-start}
.bdrop__tick{height:9px; width:2px; background:var(--slate300); margin-left:1px}
.bchip{font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.2px; color:var(--t); background:var(--b); border-radius:7px; padding:4px 8px; box-shadow:inset 0 0 0 1px var(--r); max-width:158px; line-height:1.2}

.seghop{flex:none; align-self:flex-start; margin-top:46px; display:flex; flex-direction:column; align-items:center; gap:3px; padding:0 12px; max-width:150px}
.seghop__arr{color:var(--teal500)} .seghop__arr svg{display:block}
.seghop__tag{font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.6px; color:var(--teal700)}
.seghop__art{font-size:10.5px; font-weight:600; text-align:center; line-height:1.25; color:var(--slate600); background:var(--teal50); border:1px dashed var(--teal200); border-radius:8px; padding:3px 8px}

/* ---------- cards (wrap — no horizontal scroll) ---------- */
.cards{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 6px; width:100%; max-width:1120px; padding:6px 4px}
.cards--options{max-width:780px; gap:12px}
.unit{display:flex; align-items:center; flex:none}
.cards.anim > .unit{animation:cardIn .34s cubic-bezier(.2,.7,.2,1) backwards}
@keyframes cardIn{from{opacity:0; transform:translateY(16px) scale(.95)} to{opacity:1; transform:none}}
.cards.leaving{opacity:.25; transform:scale(.98); transition:.16s}

.card{
  flex:none; width:198px; min-height:104px; text-align:left; cursor:pointer;
  display:flex; flex-direction:column; gap:6px; align-items:flex-start;
  background:var(--b); border-radius:14px; padding:13px 15px; color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--r); transition:transform .14s, box-shadow .14s;
}
.cards--options .card{min-height:0; width:232px}
.card:hover{transform:translateY(-3px); box-shadow:inset 0 0 0 2px var(--d), 0 10px 24px rgba(15,23,42,.08)}
.card.is-active{box-shadow:inset 0 0 0 2px var(--d), 0 10px 24px rgba(15,23,42,.10)}
.card.is-leaf{cursor:default}
.card.go{transform:scale(1.08); opacity:.35; transition:.16s}

.node__label{display:flex; align-items:center; gap:6px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--t)}
.dot{width:6px; height:6px; border-radius:50%; background:var(--d)}
.node__title{font-size:15.5px; font-weight:700; line-height:1.28; color:var(--slate900)}
.opill{align-self:flex-start; font-size:10.5px; font-weight:700; color:var(--t); background:rgba(255,255,255,.72); padding:2px 8px; border-radius:999px; box-shadow:inset 0 0 0 1px var(--r)}
.card__go{margin-top:auto; padding-top:4px; font-size:11.5px; font-weight:700; color:var(--t)}
.card__go--leaf{color:var(--slate400); font-weight:600}

/* connectors / hand-offs */
.arrow{display:flex; align-items:center; justify-content:center; padding:0 2px; color:var(--slate300); flex:none}
.arrow svg{display:block}
.hop{flex:none; display:flex; flex-direction:column; align-items:center; gap:2px; padding:5px 4px; max-width:142px; cursor:pointer; border-radius:10px; transition:background .14s, box-shadow .14s; outline:none}
.hop:hover,.hop.is-active,.hop:focus-visible{background:var(--teal50); box-shadow:inset 0 0 0 1px var(--teal200)}
.hop__arr{color:var(--teal500); display:flex}
.hop__arr svg{display:block}
.hop__tag{font-size:9px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:var(--teal700)}
.hop__art{font-size:10.5px; font-weight:600; line-height:1.25; text-align:center; color:var(--slate600); background:#fff; border:1px dashed var(--teal200); border-radius:8px; padding:3px 8px}
.hop__to{color:var(--slate400); font-weight:700}

/* ---------- detail panel ---------- */
.panel{width:min(720px,100%); flex:none; min-height:86px; background:rgba(255,255,255,.78); border:1px solid var(--line); border-radius:14px; padding:15px 18px; transition:box-shadow .2s; display:flex; flex-direction:column; justify-content:center}
.panel.pulse{animation:pulse .4s ease}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(20,184,166,.35)} 100%{box-shadow:0 0 0 10px rgba(20,184,166,0)}}
.panel__tip{margin:0; font-size:13px; color:var(--slate500); text-align:center}
.panel__tip b{color:var(--teal700)}
.panel__head{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:7px}
.panel__title{font-size:15.5px; font-weight:800; color:var(--slate900)}
.panel__badges{display:flex; align-items:center; gap:7px; flex-wrap:wrap}
.panel__hint{font-size:11px; font-weight:700; color:var(--teal700); background:var(--teal50); padding:2px 9px; border-radius:999px; box-shadow:inset 0 0 0 1px var(--teal200)}
.pill{font-size:10.5px; font-weight:700; padding:2px 9px; border-radius:999px; text-transform:uppercase; letter-spacing:.3px}
.pill-slate{background:var(--slate50); color:var(--slate600); box-shadow:inset 0 0 0 1px var(--slate200)}
.pill-sky{background:var(--sky50); color:var(--sky700); box-shadow:inset 0 0 0 1px var(--sky200)}
.pill-indigo{background:var(--indigo50); color:var(--indigo700); box-shadow:inset 0 0 0 1px var(--indigo200)}
.pill-violet{background:var(--violet50); color:var(--violet700); box-shadow:inset 0 0 0 1px var(--violet200)}
.pill-emerald{background:var(--emerald50); color:var(--emerald700); box-shadow:inset 0 0 0 1px var(--emerald200)}
.pill-teal{background:var(--teal50); color:var(--teal700); box-shadow:inset 0 0 0 1px var(--teal200)}
.pill-rose{background:var(--rose50); color:var(--rose700); box-shadow:inset 0 0 0 1px var(--rose200)}
.panel__body{margin:0; font-size:13.5px; line-height:1.65; color:var(--slate600)}
.panel__result{margin:9px 0 0; font-size:12.5px; font-weight:600; color:var(--teal700); background:var(--teal50); border-radius:8px; padding:7px 11px; box-shadow:inset 0 0 0 1px var(--teal200); display:inline-block}

/* ---------- in/out hand-offs flanking the content (click to browse) ---------- */
.peek{position:absolute; top:min(40%,178px); transform:translateY(-50%); z-index:8; cursor:pointer; width:clamp(124px,15vw,204px);
  display:flex; flex-direction:column; gap:3px; padding:13px 15px; border-radius:13px;
  border:1.5px dashed var(--teal200); background:repeating-linear-gradient(135deg,var(--teal50),var(--teal50) 9px,#fff 9px,#fff 18px);
  box-shadow:0 6px 16px rgba(15,23,42,.07); transition:border-color .15s, box-shadow .15s, transform .15s; text-align:left}
.peek--prev{left:16px}
.peek--next{right:16px; text-align:right; align-items:flex-end}
.peek:hover{border-color:var(--teal500); box-shadow:0 10px 26px rgba(15,23,42,.14)}
.peek--prev:hover{transform:translateY(-50%) translateX(-3px)}
.peek--next:hover{transform:translateY(-50%) translateX(3px)}
.peek__tag{font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; color:var(--teal700)}
.peek__title{font-size:13px; font-weight:700; color:var(--slate900); line-height:1.2}
.peek__art{font-size:10.5px; color:var(--slate600); line-height:1.3}
.peek__kicker{font-size:10.5px; font-weight:600; color:var(--teal700)}
.peek__go{margin-top:3px; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.4px; color:var(--slate400)}
.peek:hover .peek__go{color:var(--teal700)}
@media(max-width:900px){ .peek{width:108px; padding:10px 10px} .peek__art,.peek__kicker{display:none} }

/* ---------- pipeline view: phase rows + inline branch chips ---------- */
.cards--pipeline{max-width:1000px}
.phaserow{flex-basis:100%; width:100%; margin:8px 0 2px; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; color:var(--rose700); display:flex; align-items:center; gap:10px}
.phaserow::after{content:""; flex:1; height:1px; background:var(--line)}
/* alternate / conditional path section */
.altrow{flex-basis:100%; width:100%; margin:18px 0 4px; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.6px; color:var(--amber700); display:flex; align-items:center; gap:10px}
.altrow::before{content:"⤣"; font-size:14px}
.altrow::after{content:""; flex:1; height:1px; border-top:1px dashed var(--amber200)}
.card--alt{border-style:dashed !important; box-shadow:inset 0 0 0 1px var(--amber200)}
.card--alt:hover{box-shadow:inset 0 0 0 2px var(--amber500)}
.card__chips{display:flex; flex-wrap:wrap; gap:4px; margin-top:8px}
.minichip{font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.2px; color:var(--t); background:var(--b); border-radius:6px; padding:2px 6px; box-shadow:inset 0 0 0 1px var(--r)}
.branch__text{font-size:12px; color:var(--slate600); line-height:1.45; margin-top:4px}

/* incoming / outgoing hand-offs — visually distinct from solid stage boxes */
.iohandoff{flex:none; width:186px; min-height:104px; display:flex; flex-direction:column; gap:5px; justify-content:center;
  padding:12px 14px; border-radius:12px; border:1.5px dashed var(--teal200); background:repeating-linear-gradient(135deg,var(--teal50),var(--teal50) 9px,#fff 9px,#fff 18px)}
.io__tag{font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; color:var(--teal700)}
.io__title{font-size:13.5px; font-weight:700; color:var(--slate900); line-height:1.2}
.io__art{font-size:11px; color:var(--slate600); line-height:1.4}
.bcard{cursor:pointer; transition:box-shadow .12s, transform .12s}
.bcard:hover{box-shadow:inset 0 0 0 2px var(--d); transform:translateY(-2px)}

/* ---------- roster modal ---------- */
.modal{position:fixed; inset:0; background:rgba(15,23,42,.42); display:none; align-items:center; justify-content:center; z-index:50; padding:24px; backdrop-filter:blur(3px)}
.modal.open{display:flex}
.modal__card{position:relative; width:min(880px,96vw); max-height:88vh; overflow-y:auto; background:#fff; border:1px solid var(--line); border-radius:18px; padding:28px; box-shadow:0 24px 60px rgba(15,23,42,.18)}
.modal__close{position:absolute; top:14px; right:14px; width:32px; height:32px; border:1px solid var(--slate200); background:#fff; color:var(--slate500); font-size:19px; cursor:pointer; border-radius:9px}
.modal__close:hover{color:var(--slate900); border-color:var(--slate300)}
.modal__card h2{margin:0; font-size:20px; font-weight:800; color:var(--slate900)}
.modal__sub{margin:6px 0 20px; color:var(--muted); font-size:13px}
.roster__grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px}
.roster__group{border-radius:13px; padding:15px 16px; background:var(--b); box-shadow:inset 0 0 0 1px var(--r)}
.roster__group h3{margin:0 0 10px; font-size:12px; letter-spacing:.3px; text-transform:uppercase; color:var(--t); display:flex; align-items:center; gap:8px}
.roster__group h3::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--d)}
.roster__group ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:7px}
.roster__group li{font-size:13px; color:var(--slate600); line-height:1.45; padding-left:13px; position:relative}
.roster__group li::before{content:"›"; position:absolute; left:0; color:var(--slate400)}

/* ---------- responsive ---------- */
@media(max-width:760px){
  .brand__title{font-size:13px}
  .stage{padding:16px; gap:16px; justify-content:flex-start}
  .level__title{font-size:20px}
  .card{width:180px}
}