/* algorithm.css — NRP Algorithm page layout and components */

/* ── Palette tokens (unified with PediaSuite brand) ────────────────
   Semantic contract preserved for clinical audience:
   - critical (red) = emergency/HR<60/meds  · convention: NRP algorithm
   - standard (teal) = protocol steps       · brand-aligned
   - routine (emerald) = safe outcome       · convention: green = safe
   - post (slate)  = neutral/downstream
   - neutral (light slate) = flow lines     · guide, don't shout
   Text and fills follow site --ink and --panel so themes work.
─────────────────────────────────────────────────────────────────── */
:root{
  /* Algorithm palette */
  --alg-critical:#B91C1C;
  --alg-critical-strong:#991B1B;
  --alg-standard:#0D9488;
  --alg-routine:#059669;
  --alg-post:#64748B;
  --alg-neutral:#94A3B8;
  --alg-hex-fill:#FEF7F5;
  --alg-title:#0C1624;
  --alg-sub:#67788A;
  --alg-box-fill:#FFFFFF;
  --alg-box-stroke:#CBD5E1;
  --alg-hover-fill:#F0FDFA;

  /* Detail-panel color chips (map from legacy --pastel-* names) */
  --step-purple:#7C6BB0; --step-pink:#BE123C; --step-green:#0D9488;
  --step-yellow:#B45309; --step-cyan:#0E7490;
}
[data-theme="dark"]{
  --alg-critical:#EF8A8A;
  --alg-critical-strong:#F5A5A5;
  --alg-standard:#4DBAAF;
  --alg-routine:#5EC29A;
  --alg-post:#94A3B8;
  --alg-neutral:#4A5C72;
  --alg-hex-fill:#251821;
  --alg-title:#EDF1F4;
  --alg-sub:#A9B7C4;
  --alg-box-fill:#16233A;
  --alg-box-stroke:rgba(237,241,244,0.18);
  --alg-hover-fill:#1A2C42;

  --step-purple:#A99BD6; --step-pink:#F2879C; --step-green:#4DBAAF;
  --step-yellow:#E8A75C; --step-cyan:#5BB8D0;
}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --alg-critical:#EF8A8A;
    --alg-critical-strong:#F5A5A5;
    --alg-standard:#4DBAAF;
    --alg-routine:#5EC29A;
    --alg-post:#94A3B8;
    --alg-neutral:#4A5C72;
    --alg-hex-fill:#251821;
    --alg-title:#EDF1F4;
    --alg-sub:#A9B7C4;
    --alg-box-fill:#16233A;
    --alg-box-stroke:rgba(237,241,244,0.18);
    --alg-hover-fill:#1A2C42;

    --step-purple:#A99BD6; --step-pink:#F2879C; --step-green:#4DBAAF;
    --step-yellow:#E8A75C; --step-cyan:#5BB8D0;
  }
}

/* ── SVG overrides (higher specificity beats the SVG's inline <style>) ── */
.alg-canvas .box{
  fill:var(--alg-box-fill);
  stroke:var(--alg-box-stroke);
}
.alg-canvas .box:hover{
  fill:var(--alg-hover-fill);
  stroke:var(--alg-standard);
}
.alg-canvas g[data-step]:hover .fo-title{ fill:var(--alg-standard); }
/* Arrow markers — the SVG defines them with hardcoded #b4c6d8 / #b92d47 / #5a7d9a on inner <path>.
   Override at the marker path level so arrows follow theme. */
.alg-canvas marker#arrow path,
.alg-canvas marker#arrow-es path{ fill:var(--alg-neutral); }
.alg-canvas marker#arrow-yes path,
.alg-canvas marker#arrow-yes-es path{ fill:var(--alg-critical); }
.alg-canvas marker#arrow-no path,
.alg-canvas marker#arrow-no-es path{ fill:var(--alg-post); }

/* ── Workspace: split layout ── */
.alg-workspace{display:grid;grid-template-columns:1fr;gap:20px;margin-bottom:32px;}

@media(min-width:1024px){
  .alg-workspace{
    grid-template-columns:minmax(0,1.4fr) minmax(320px,1fr);
    align-items:start;
  }
}

/* ── Canvas (left column) ── */
.alg-canvas{
  width:100%;position:relative;border-radius:12px;
  border:1px solid var(--line);background:var(--panel);
  user-select:none;-webkit-user-select:none;
}
@media(min-width:1024px){
  .alg-canvas{
    height:78vh;overflow:auto;overscroll-behavior:contain;
  }
}
.alg-canvas svg{width:100%;height:auto;display:block;}
.alg-canvas [data-step]{cursor:pointer;transition:filter .25s ease,opacity .2s ease;}
.alg-canvas [data-step]:hover{
  filter:drop-shadow(0 4px 14px rgba(20,184,166,.4)) drop-shadow(0 0 8px rgba(20,184,166,.3));
}
.alg-canvas [data-step]:hover rect.box,
.alg-canvas [data-step]:hover polygon.hex{stroke-width:3.5px;}
.alg-canvas [data-step].active-node{
  animation:nodePulse 2s infinite ease-in-out;
}
@media(prefers-reduced-motion:reduce){
  .alg-canvas [data-step].active-node{animation:none;filter:drop-shadow(0 0 10px rgba(20,184,166,.5));}
}
@keyframes nodePulse{
  0%{filter:drop-shadow(0 0 4px rgba(20,184,166,.4));}
  50%{filter:drop-shadow(0 0 16px rgba(20,184,166,.7)) drop-shadow(0 0 8px rgba(20,184,166,.5));}
  100%{filter:drop-shadow(0 0 4px rgba(20,184,166,.4));}
}
.alg-canvas path[stroke-dasharray]{animation:flowDash 20s linear infinite;}
@keyframes flowDash{from{stroke-dashoffset:0;}to{stroke-dashoffset:-120;}}

/* ── Rail (right column) ──
   Subtle teal-tinted background differentiates the reading surface from the
   canvas while unifying rail + flowchart as one visual world (both algorithm).
   Amber stays reserved for pricing/CTA moments so it retains meaning. */
.alg-rail{
  /* Solid panel base + teal-wash tint on top that fades to transparent.
     Critical: keep background-color solid so the mobile bottom-sheet is opaque. */
  background-color:var(--panel);
  background-image:linear-gradient(180deg, var(--teal-wash) 0%, transparent 45%);
  border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;
}
.alg-rail-inner{background:transparent;}
.alg-detail-header{background:var(--teal-wash);}
@media(min-width:1024px){
  .alg-rail{position:sticky;top:80px;max-height:calc(100vh - 100px);overflow-y:auto;}
}

/* Rail empty state */
.alg-empty{
  padding:32px 24px;text-align:center;
}
.alg-empty p{
  font-family:var(--sans);font-size:.88rem;color:var(--ink-faint);line-height:1.6;
  margin:0 0 18px;
}
.alg-empty-sub{
  font-size:.78rem !important;margin-top:14px !important;margin-bottom:0 !important;
}

/* Start walkthrough button */
.btn-walkthrough{
  display:inline-flex;align-items:center;gap:6px;
  padding:10px 20px;
  background:var(--teal);color:#fff;
  font-family:var(--sans);font-size:.88rem;font-weight:700;
  border:0;border-radius:8px;cursor:pointer;
  transition:transform .12s ease, box-shadow .15s ease;
  box-shadow:0 2px 8px rgba(13,148,136,0.3);
}
.btn-walkthrough:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(13,148,136,0.4);
}
.btn-walkthrough:active{transform:translateY(0);}

/* Walkthrough mode: dim non-active nodes */
.alg-canvas.walkthrough-on [data-step]:not(.active-node){
  opacity:.28;
  transition:opacity .25s ease;
}
@media(prefers-reduced-motion:reduce){
  .alg-canvas.walkthrough-on [data-step]:not(.active-node){transition:none;}
}

/* Progress bar (inside detail panel, top) */
.alg-progress{padding:14px 20px 0;}
.alg-progress-label{
  display:flex;justify-content:space-between;align-items:center;
  font-family:var(--sans);font-size:.7rem;font-weight:700;color:var(--ink-faint);
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px;
}
.alg-progress-bar{
  height:4px;background:var(--line);border-radius:2px;overflow:hidden;
}
.alg-progress-fill{
  height:100%;background:var(--teal);
  transition:width .3s cubic-bezier(.4,0,.2,1);
}
.alg-walk-exit{
  background:transparent;border:0;color:var(--ink-faint);
  font-family:var(--sans);font-size:.68rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;cursor:pointer;
  padding:2px 6px;border-radius:4px;
}
.alg-walk-exit:hover{color:var(--ink);background:var(--line);}

/* Finish CTA (replaces "Next" at step 18 during walkthrough) */
.alg-nav .btn-finish{
  flex:2.5;
  background:var(--amber-surface,var(--amber));
  color:#fff;border-color:var(--amber-surface,var(--amber));
  font-weight:700;
  box-shadow:0 2px 8px rgba(217,119,6,0.25);
}
.alg-nav .btn-finish:hover{
  background:var(--amber);
  opacity:.92;
}

/* ── Detail panel (inside rail) ── */
.alg-detail[hidden]{display:none;}
.alg-detail-header{
  padding:16px 20px;display:flex;gap:12px;align-items:center;
  border-bottom:1px solid var(--line);
}
.alg-detail-step{
  font-family:var(--mono);font-size:.72rem;font-weight:700;
  padding:3px 8px;border-radius:6px;
  background:var(--teal-wash);color:var(--teal);white-space:nowrap;
}
.alg-detail-title{font-family:var(--sans);font-size:1rem;font-weight:700;flex:1;}
.alg-detail-cat{
  font-family:var(--sans);font-size:.72rem;font-weight:600;
  color:var(--ink-faint);text-transform:uppercase;letter-spacing:.06em;
}
.alg-detail-close{
  flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--line-strong);
  background:transparent;color:var(--ink-faint);font-size:1rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.alg-detail-close:hover{background:var(--line);color:var(--ink);}

.alg-detail-body{padding:18px 20px;}
.alg-detail-section{margin-bottom:16px;}
.alg-detail-section:last-child{margin-bottom:0;}
.alg-detail-section h4{
  font-family:var(--sans);font-size:.76rem;font-weight:700;color:var(--teal);
  text-transform:uppercase;letter-spacing:.06em;margin:0 0 8px;
}
.alg-detail-section ul{
  font-family:var(--sans);font-size:.86rem;color:var(--ink-soft);line-height:1.7;
  list-style:none;padding:0;margin:0;
}
.alg-detail-section ul li{margin-bottom:4px;}
.alg-detail-section ul li strong{color:var(--ink);font-weight:600;}

.alg-detail-section.actions-col{
  border-top:1px solid var(--line);padding-top:14px;
}

/* Locked annex teaser */
.alg-locked{
  display:flex;align-items:center;gap:10px;
  padding:12px 16px;margin-top:16px;
  background:var(--teal-wash);border-radius:8px;
  font-family:var(--sans);font-size:.78rem;color:var(--ink-soft);line-height:1.4;
}
.alg-locked a{
  flex:none;font-weight:700;color:var(--teal);text-decoration:none;white-space:nowrap;
}
.alg-locked a:hover{text-decoration:underline;}

/* Nav buttons */
.alg-nav{
  display:flex;gap:8px;padding:14px 20px;border-top:1px solid var(--line);
}
.alg-nav button{
  flex:1;padding:8px 12px;border:1px solid var(--line-strong);border-radius:8px;
  background:transparent;color:var(--ink);font-family:var(--sans);
  font-size:.82rem;font-weight:600;cursor:pointer;transition:background .15s;
}
.alg-nav button:hover{background:var(--teal-wash);}
.alg-nav button:disabled{opacity:.35;cursor:default;}
.alg-nav button:disabled:hover{background:transparent;}

/* ── Mobile bottom sheet (< 1024px) ── */
@media(max-width:1023px){
  .alg-rail{
    position:fixed;bottom:0;left:0;right:0;z-index:100;
    max-height:62vh;border-radius:16px 16px 0 0;
    box-shadow:0 -4px 24px rgba(0,0,0,.18);
    transform:translateY(100%);transition:transform .3s ease;
    overflow-y:auto;
  }
  .alg-rail.open{transform:translateY(0);}
  .alg-canvas.sheet-open{padding-bottom:40vh;}
}

/* ── Hint text ── */
.alg-hint{
  text-align:center;font-family:var(--sans);font-size:.82rem;color:var(--ink-faint);
  margin:-12px 0 20px;
}
@media(min-width:1024px){.alg-hint{display:none;}}