/* Agent 09 — demos page only (demos.html).
   Shared contract tokens + demo-card, step-pill, progress, checkpoint
   and step-transition treatment. No webfonts, no external requests,
   no layout-moving motion (transform + opacity only, plus a progress
   fill whose width change is contained inside a fixed track).
   Loaded only by demos.html; main.js and calculator.js untouched. */
:root{
  --navy:#0B1220; --teal:#20C9C0; --blue:#0E5BD6; --ink:#0B1220;
  --muted:#5B6472; --paper:#fff; --line:#E5E7EB;
  --radius-sm:10px; --radius-md:14px; --radius-lg:18px;
  --shadow-sm:0 1px 2px rgba(11,18,32,.06);
  --shadow-md:0 8px 24px rgba(11,18,32,.08);
  --shadow-lg:0 20px 48px rgba(11,18,32,.16);
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --dur-fast:.15s; --dur-normal:.35s; --dur-slow:.6s;
}

/* Scroll reveal. The hidden state applies ONLY when JS has added
   .demo-motion to <html> (see demos-reveal.js), so with JS off or
   failed, every demo renders fully visible — content never depends
   on JS to be readable. */
html.demo-motion .reveal{
  opacity:0; transform:translateY(16px);
  transition:opacity var(--dur-slow) var(--ease-out),
             transform var(--dur-slow) var(--ease-out);
}
html.demo-motion .reveal.is-visible{opacity:1; transform:none}

/* Demo cards: lift on hover, clipped to the card's rounded corners
   so the navy header band bleeds edge to edge. */
.demo{
  position:relative; overflow:hidden;
  transition:transform var(--dur-normal) var(--ease-out),
             box-shadow var(--dur-normal) var(--ease-out);
}
.demo:hover{transform:translateY(-2px); box-shadow:var(--shadow-lg)}

/* Navy header band: wraps the existing tag + h3, plus an abstract
   geometric motif (inline SVG, aria-hidden, no text inside). */
.demo-head{
  position:relative;
  margin:-26px -26px 24px; padding:26px 150px 24px 26px;
  background:var(--navy); color:#fff;
}
.demo-head h3{color:#fff; font-size:clamp(22px,2.6vw,28px); margin:12px 0 0}
.demo-motif{
  position:absolute; top:22px; right:26px;
  width:132px; height:76px; pointer-events:none;
}

/* Outcome box: the first notice of each demo, now unmissable. */
.demo .notice.outcome{
  background:#EEF4FF; border-color:#BFD6FF;
  border-left:6px solid var(--blue); box-shadow:var(--shadow-sm);
}

/* Step-pill rail: a light panel strip so the pills read as one
   connected journey, not loose buttons. */
.demo .steps{
  background:#F2F4F7; border:1px solid var(--line);
  border-radius:var(--radius-md); padding:14px;
}
.demo .step-pill{
  transition:border-color var(--dur-fast) var(--ease-out),
             background-color var(--dur-fast) var(--ease-out),
             color var(--dur-fast) var(--ease-out),
             transform var(--dur-fast) var(--ease-out),
             box-shadow var(--dur-fast) var(--ease-out);
}
.demo .step-pill:hover{transform:translateY(-1px); box-shadow:var(--shadow-sm)}
.demo .step-pill.active{box-shadow:0 4px 14px rgba(11,18,32,.35)}
/* Teal dot marks every human-checkpoint pill (decorative, no text). */
.demo .step-pill.checkpoint::before{
  content:""; display:inline-block; width:8px; height:8px;
  border-radius:50%; background:var(--teal); margin-inline-end:6px;
}
/* The global blue focus ring is too faint on a navy active pill. */
.demo .step-pill.active:focus-visible{
  outline:3px solid #fff; outline-offset:2px;
  box-shadow:0 0 0 6px rgba(32,201,192,.45);
}

/* Progress: smooth fill. Width changes stay inside the fixed track,
   so no surrounding layout moves. */
.demo .progress-track{height:12px; box-shadow:inset 0 1px 2px rgba(11,18,32,.08)}
.demo .progress-fill{height:12px; transition:width .45s var(--ease-out)}

/* Counter becomes a small status badge (text still set by main.js). */
.demo .counter{
  display:inline-flex; align-items:center; gap:8px;
  background:#E6F7F6; color:#0B3B38; border-radius:999px;
  padding:6px 14px; font-size:14px;
}
.demo .counter::before{
  content:""; width:8px; height:8px; border-radius:50%; background:var(--teal);
}

/* Step panels + entrance transition. main.js toggles .on, which
   re-triggers this animation on every step change — no JS change. */
.demo .step{
  background:#F7F9FB; border:1px solid var(--line);
  border-radius:var(--radius-md); padding:22px 24px; margin-top:18px;
}
.demo .step.on{animation:demo-step-in var(--dur-normal) var(--ease-out)}
@keyframes demo-step-in{
  from{opacity:0; transform:translateY(10px)}
  to{opacity:1; transform:translateY(0)}
}

/* Human-checkpoint steps: teal-tinted panel + glow. The live inline
   6px teal left bar is kept untouched and still wins on that edge. */
.demo .step--checkpoint{
  background:#E6F7F6; border-color:#20C9C0;
  box-shadow:0 8px 24px rgba(32,201,192,.18);
}

/* Controls row + closing strip. */
.demo .demo-controls{display:flex; flex-wrap:wrap; gap:12px; align-items:center}
.demo .demo-changed{
  background:#F2F4F7; border-left:6px solid var(--teal);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0; padding:14px 18px;
}

/* Intro card accent + jump links as chips (text unchanged). */
.demo-intro{border-top:6px solid var(--teal)}
.demo-jump a{
  display:inline-block; border:1px solid #CBD2DC; border-radius:999px;
  padding:6px 14px; margin:3px 2px; text-decoration:none;
  font-weight:700; color:var(--navy); background:#fff;
  transition:border-color var(--dur-fast) var(--ease-out),
             background-color var(--dur-fast) var(--ease-out),
             color var(--dur-fast) var(--ease-out);
}
.demo-jump a:hover{background:#EEF4FF; border-color:var(--blue); color:var(--blue)}

/* Narrow screens: card padding drops to 20px, so the header band
   margins match; the motif hides rather than crowding the title. */
@media(max-width:640px){
  .demo-head{margin:-20px -20px 20px; padding:20px 20px 18px}
  .demo-motif{display:none}
  .demo .step{padding:18px}
}

/* Reduced motion: everything fully visible, no animation, no lift. */
@media (prefers-reduced-motion:reduce){
  html.demo-motion .reveal{opacity:1 !important; transform:none !important}
  .demo .step.on{animation:none}
  .demo:hover{transform:none}
  .demo .step-pill:hover{transform:none}
}