/* ============================================================================
   FLOW GRAPHIC KIT — shared theme for Skipper's animated process explainers
   ----------------------------------------------------------------------------
   Every flow graphic in this folder links this file and inherits the same
   world: midnight-navy stage, mono captions, glowing cards, traveling chips,
   a typed receipt line, and a record mode for clean video capture.
   To build a NEW flow graphic, see README.md in this folder.
   ========================================================================== */

:root{
  --bg:#0A0F1E; --panel:#111830; --line:#232D4D;
  --ink:#C6CFE2; --ink-dim:#7C88A6; --ink-faint:#7481A3;
  /* accent roster — pick per actor in your flow, keep meanings consistent:
     coral = the lead/seat · teal = second vendor/builder · peri = reader/support
     red = hard stop/danger · green = live/clean · amber = narration */
  --a-coral:#E8825A; --a-teal:#45C4B0; --a-peri:#8FA3E8;
  --good:#7BD88F; --danger:#E06C75; --warn:#E5C07B;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --sans:-apple-system,"Helvetica Neue",Segoe UI,Arial,sans-serif;
}

html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:var(--sans);}
body{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:20px 14px 40px;box-sizing:border-box;}

/* ---------- header + controls ---------- */
header{width:100%;max-width:1060px;display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px;}
h1{font-size:clamp(17px,2.4vw,24px);font-weight:700;letter-spacing:-.02em;margin:0;text-wrap:balance;}
.controls{display:flex;gap:8px;}
.controls button{font-family:var(--mono);font-size:12px;letter-spacing:.04em;background:var(--panel);
  color:var(--ink-dim);border:1px solid var(--line);border-radius:6px;padding:6px 12px;cursor:pointer;}
.controls button.on{color:var(--ink);border-color:var(--ink-faint);background:#182142;}
.controls button:focus-visible{outline:2px solid var(--a-teal);outline-offset:2px;}

/* ---------- the stage ---------- */
.stage{position:relative;width:100%;max-width:1060px;aspect-ratio:16/9;background:linear-gradient(180deg,#0D1428 0%,#0A0F1E 100%);
  border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;box-sizing:border-box;}
body.m916 .stage{aspect-ratio:9/16;max-width:min(94vw,420px);max-height:88vh;}

/* phase caption — the amber narrator line */
.caption{flex:0 0 auto;padding:14px 20px 6px;font-family:var(--mono);font-size:clamp(11px,1.5vw,14px);
  color:var(--warn);min-height:2.4em;letter-spacing:.02em;}
body.m916 .caption{font-size:11.5px;min-height:3em;padding:12px 14px 4px;}
.caption .step{color:var(--ink-faint);margin-right:8px;}

/* step tracker strip */
.stepsbar{flex:0 0 auto;display:flex;gap:4px;padding:2px 20px 8px;}
.stp{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px;
  font-family:var(--mono);font-size:clamp(9.5px,.95vw,10px);color:var(--ink-faint);letter-spacing:.02em;
  transition:color .35s;white-space:nowrap;overflow:hidden;}
.stp .bar{width:100%;height:3px;border-radius:2px;background:var(--line);transition:background .35s;}
.stp.done .bar{background:var(--ink-faint);} .stp.cur .bar{background:var(--warn);}
.stp.cur{color:var(--warn);} .stp.done{color:var(--ink-dim);}
body.m916 .stepsbar{padding:2px 12px 6px;}

/* ---------- actor cards ---------- */
.card{border:1.5px solid var(--line);border-radius:12px;background:var(--panel);padding:11px 13px;
  transition:border-color .4s,box-shadow .4s;box-sizing:border-box;}
.card.active{border-color:var(--glow);box-shadow:0 0 24px -6px var(--glow);}
.who{font-weight:700;font-size:clamp(12px,1.6vw,17px);letter-spacing:-.01em;display:flex;align-items:center;gap:7px;}
.dot{width:8px;height:8px;border-radius:50%;background:var(--glow);flex:0 0 auto;}
.role{font-family:var(--mono);font-size:clamp(9.5px,1.05vw,11px);color:var(--ink-dim);margin-top:5px;line-height:1.45;}
.model{font-family:var(--mono);font-size:clamp(9.5px,1.05vw,11px);color:var(--glow);margin-top:2px;}
.status{font-family:var(--mono);font-size:clamp(9.5px,1.1vw,11.5px);min-height:1.5em;color:var(--ink-dim);padding:2px 3px 0;}
.status .hot{color:var(--glow);} .status .clean{color:var(--good);font-weight:700;}

/* scanning sweep on a card that's reading something */
.card.scanning{position:relative;overflow:hidden;}
.card.scanning::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--glow);
  opacity:.85;animation:scan 1s linear infinite;}
@keyframes scan{from{top:6%}to{top:92%}}

/* ---------- traveling chips ---------- */
.chip{position:absolute;font-family:var(--mono);font-size:clamp(9.5px,1.25vw,12.5px);background:#1A2340;
  border:1.5px solid var(--a-coral);color:var(--ink);border-radius:8px;padding:6px 10px;white-space:nowrap;
  transition:left 1s cubic-bezier(.45,0,.25,1),top 1s cubic-bezier(.45,0,.25,1),opacity .35s,border-color .35s;
  opacity:0;z-index:3;}
.chip.show{opacity:1;}
.chip.live{border-color:var(--good);color:var(--good);}
.chip.mini{font-size:clamp(9.5px,1.05vw,10.5px);padding:4px 8px;z-index:2;}

/* ---------- receipt terminal line ---------- */
.receipt{flex:0 0 auto;margin:6px 20px 16px;background:#060A14;border:1px solid var(--line);border-radius:9px;
  padding:11px 15px;font-family:var(--mono);font-size:clamp(10px,1.4vw,13.5px);min-height:1.6em;
  color:var(--good);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
body.m916 .receipt{white-space:normal;font-size:11px;line-height:1.55;margin:6px 12px 14px;}
.receipt .cursor{display:inline-block;width:.6em;height:1.05em;background:var(--good);vertical-align:-2px;
  animation:blink 1s steps(1) infinite;}
@keyframes blink{50%{opacity:0}}
.receipt.dim{color:var(--ink-faint);}

/* ---------- footer ---------- */
footer{width:100%;max-width:1060px;margin-top:14px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-family:var(--mono);font-size:11.5px;color:var(--ink-dim);line-height:1.6;}
footer .fb{max-width:60ch;}
footer b{color:var(--ink);font-weight:600;}
footer a{color:var(--a-teal);text-decoration:none;}
footer a:hover,footer a:focus-visible{text-decoration:underline;}

/* ---------- record mode: stage only, for clean video capture ---------- */
body.rec header,body.rec footer{display:none;}
body.rec{padding:10px;justify-content:center;}
body.rec .stage{max-height:96vh;}

@media (prefers-reduced-motion: reduce){
  .chip,.card{transition:none!important;}
  .card.scanning::after,.receipt .cursor{animation:none!important;}
}

/* ---------- simulated-example badge + screen-reader-only text ---------- */
.demo-badge{position:absolute;top:10px;right:12px;z-index:5;font-family:var(--mono);
  font-size:9.5px;letter-spacing:.08em;color:var(--warn);border:1px solid var(--warn);
  border-radius:5px;padding:2px 7px;background:#0D1428;opacity:.9;pointer-events:none;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;}