/* ═══════════════════════════════════════════════════════════════════════
   tour-demos.css — styling + animation for the demos ported from the
   product's own Quick Tour.

   The originals are inline SVG drawn from the app's design tokens and are
   deliberately staleness-proof: a couple of KB each, no images, no video,
   so a 2026 build cannot make them wrong in 2027. The port keeps that
   property and re-points every colour at THIS site's palette, so a demo
   reads as part of the page rather than as a screenshot pasted onto it.

   One rule carries over from the house style: the luma accent means "this
   drives your date". It is spent on driving chains, over-capacity bars and
   the P80 marker — nowhere else.

   Markup comes from tour-demos.js. Class prefix is `td-`.
   ═══════════════════════════════════════════════════════════════════════ */

.td-demo{
  width:100%;max-width:660px;display:block;margin:0 auto;
  font-family:var(--display);
}

/* ── surfaces ─────────────────────────────────────────────────────────── */
.td-bg{fill:#0B1424;stroke:var(--slate-600);}
.td-grid{stroke:#1A2740;stroke-width:1;}
.td-split{stroke:var(--slate-600);stroke-width:1;}
.td-axis{stroke:var(--slate-600);stroke-width:1;}
.td-panel{fill:#111C31;stroke:var(--slate-600);}
.td-band{fill:#0F1A2C;stroke:var(--slate-600);}
.td-plan{fill:#101B2E;stroke:var(--slate-600);}
.td-page{fill:#101B2E;stroke:var(--slate-600);}
.td-skel{fill:#22304B;}
.td-chrome-bar{fill:#101B2E;}
.td-chrome-head{fill:#0F1A2C;}
.td-chrome-pill{fill:rgba(255,194,71,.14);stroke:var(--luma-500);stroke-width:1;}
.td-cellbox{fill:#101B2E;stroke:#1A2740;}
.td-cell-head{fill:#18253C;stroke:#1A2740;}

/* ── type ─────────────────────────────────────────────────────────────── */
.td-label{font-size:11px;fill:var(--slate-300);}
.td-micro{font-size:9px;fill:var(--slate-400);letter-spacing:.05em;font-family:var(--mono);}
.td-bold{font-weight:700;}
.td-right{text-anchor:end;}
.td-tab{font-size:8.5px;fill:var(--slate-400);text-anchor:middle;}

/* ── bars ─────────────────────────────────────────────────────────────── */
.td-bar{fill:#31456B;}
.td-bar-2{fill:#3B527C;}
.td-bar-3{fill:#4A628E;}
.td-bar-lit{fill:var(--luma-500);}
.td-bar-ghost{fill:#1C2942;}
.td-summary{fill:var(--slate-300);}
.td-milestone{fill:var(--luma-500);}
.td-node{fill:#111C31;stroke:var(--slate-600);}
.td-node-lit{fill:rgba(255,194,71,.16);stroke:var(--luma-500);}
.td-card{fill:#141F35;stroke:var(--slate-600);}
.td-card-lit{fill:rgba(255,194,71,.14);stroke:var(--luma-500);}

/* ── links, markers, labels that carry a verdict ──────────────────────── */
.td-link{stroke:var(--slate-400);stroke-width:1.5;fill:none;}
.td-link-head{fill:var(--slate-400);}
.td-link-lit{stroke:var(--luma-500);stroke-width:2;fill:none;}
.td-link-lit-head{fill:var(--luma-500);}
.td-datadate{stroke:var(--luma-700);stroke-width:1.5;stroke-dasharray:5 3;}
.td-capacity{stroke:var(--luma-700);stroke-width:1;stroke-dasharray:4 3;}
.td-slip{font-size:11px;fill:var(--luma-500);font-weight:600;font-family:var(--mono);}
.td-float{font-size:10px;fill:var(--slate-300);font-family:var(--mono);}
.td-lit-label{font-size:10px;fill:var(--luma-500);font-family:var(--mono);}
.td-dot-lit{fill:var(--luma-500);}
.td-dot-mid{fill:var(--luma-700);}
.td-dot-dim{fill:var(--slate-400);}
.td-dot-plan{fill:#22304B;}

/* ── charts ───────────────────────────────────────────────────────────── */
.td-hist{fill:#31456B;}
.td-hist-over{fill:var(--luma-500);}
.td-hist-mc{fill:#31456B;}
.td-pmark{stroke:var(--slate-300);stroke-width:1.5;stroke-dasharray:3 3;}
.td-pmark-80{stroke:var(--luma-500);stroke-dasharray:none;}
.td-map{stroke:var(--slate-400);stroke-width:1.5;fill:none;}
.td-meter-bg{fill:#1C2942;}
.td-meter{fill:var(--luma-500);}
.td-zone{fill:#16233A;stroke:var(--slate-600);}
.td-curve{stroke:var(--luma-500);stroke-width:2;fill:none;}
.td-kpi{fill:#141F35;stroke:var(--slate-600);}

/* ═══ animation — one shared 6 s clock, exactly as the originals ═══════ */
@keyframes tdLate{0%,42%{opacity:0}52%,100%{opacity:1}}
.td-a-late{animation:tdLate 6s linear infinite;}
@keyframes tdVLate{0%,62%{opacity:0}72%,100%{opacity:1}}
.td-a-vlate{animation:tdVLate 6s linear infinite;}

/* import: columns are given meaning, rows land, coverage is priced */
@keyframes tdMap{0%,10%{stroke-dashoffset:110}40%,100%{stroke-dashoffset:0}}
.td-a-map{stroke-dasharray:110;animation:tdMap 6s ease-in-out infinite;}
@keyframes tdLand{0%,30%{opacity:0;transform:translateX(-12px)}55%,100%{opacity:1;transform:translateX(0)}}
.td-a-land{animation:tdLand 6s ease-out infinite;}
@keyframes tdMeter{0%,30%{width:0}70%,100%{width:83px}}
.td-a-meter{animation:tdMeter 6s ease-out infinite;}

/* progress: bars earn progress, the data date sweeps */
@keyframes tdFill{0%,10%{width:0}55%,100%{width:150px}}
.td-a-fill{animation:tdFill 6s ease-out infinite;}
@keyframes tdFill2{0%,40%{width:0}80%,100%{width:58px}}
.td-a-fill2{animation:tdFill2 6s ease-out infinite;}
@keyframes tdSweep{0%,10%{transform:translateX(0)}60%,100%{transform:translateX(186px)}}
.td-a-sweep{animation:tdSweep 6s ease-in-out infinite;}

/* cross-project: the slip leaves one schedule and lands in another */
@keyframes tdXpGrow{0%,18%{width:120px;fill:#31456B}52%,100%{width:280px;fill:var(--luma-500)}}
.td-a-xp-grow{animation:tdXpGrow 6s ease-in-out infinite;}
@keyframes tdXpMs{0%,20%{opacity:0;transform:translateX(-160px)}54%,100%{opacity:1;transform:translateX(0)}}
.td-a-xp-ms{animation:tdXpMs 6s ease-in-out infinite;}
@keyframes tdXpDraw{0%,48%{stroke-dashoffset:82}68%,100%{stroke-dashoffset:0}}
.td-a-xp-draw{stroke-dasharray:82;animation:tdXpDraw 6s ease-in-out infinite;}
@keyframes tdXpHead{0%,66%{opacity:0}72%,100%{opacity:1}}
.td-a-xp-head{animation:tdXpHead 6s linear infinite;}
@keyframes tdXpShift{0%,66%{transform:translateX(0);fill:#31456B}88%,100%{transform:translateX(138px);fill:var(--luma-500)}}
.td-a-xp-shift{animation:tdXpShift 6s ease-in-out infinite;}
@keyframes tdXpSlip{0%,84%{opacity:0}92%,100%{opacity:1}}
.td-a-xp-slip{animation:tdXpSlip 6s linear infinite;}
@keyframes tdXpFloat{0%,88%{opacity:0}96%,100%{opacity:1}}
.td-a-xp-float{animation:tdXpFloat 6s linear infinite;}

/* risk: iterations pile into a distribution, then P50 / P80 land */
@keyframes tdMc{0%,6%{transform:scaleY(0)}40%,100%{transform:scaleY(1)}}
.td-a-mc{animation:tdMc 6s ease-out infinite;}

/* the view family: the pill walks the strip, the canvas morphs */
@keyframes tdPill{
  0%,18%{transform:translateX(0)}
  25%,43%{transform:translateX(214px)}
  50%,68%{transform:translateX(384px)}
  75%,93%{transform:translateX(291px)}
  100%{transform:translateX(0)}
}
.td-a-pill{animation:tdPill 12s ease-in-out infinite;}
@keyframes tdView1{0%,21%{opacity:1}24%,97%{opacity:0}100%{opacity:1}}
@keyframes tdView2{0%,23%{opacity:0}26%,46%{opacity:1}49%,100%{opacity:0}}
@keyframes tdView3{0%,48%{opacity:0}51%,71%{opacity:1}74%,100%{opacity:0}}
@keyframes tdView4{0%,73%{opacity:0}76%,96%{opacity:1}99%,100%{opacity:0}}
.td-a-view1{animation:tdView1 12s linear infinite;}
.td-a-view2{animation:tdView2 12s linear infinite;}
.td-a-view3{animation:tdView3 12s linear infinite;}
.td-a-view4{animation:tdView4 12s linear infinite;}

/* ── Reduced motion: show every demo in its FINISHED state, never a
      half-drawn one. The site-wide rule collapses durations to ~0, which
      would otherwise leave a `0%` keyframe (a bar at zero width, an arrow
      not yet drawn) on screen as the permanent picture. ──────────────── */
@media (prefers-reduced-motion:reduce){
  .td-demo *{animation:none !important;}
  .td-a-late,.td-a-vlate,.td-a-land,.td-a-xp-ms,.td-a-xp-head,
  .td-a-xp-slip,.td-a-xp-float{opacity:1;transform:none;}
  .td-a-map,.td-a-xp-draw{stroke-dashoffset:0;}
  .td-a-meter{width:83px;}
  .td-a-fill{width:150px;}
  .td-a-fill2{width:58px;}
  .td-a-sweep{transform:translateX(186px);}
  .td-a-xp-grow{width:280px;fill:var(--luma-500);}
  .td-a-xp-shift{transform:translateX(138px);fill:var(--luma-500);}
  .td-a-mc{transform:scaleY(1);}
  .td-a-view1{opacity:1;}
  .td-a-view2,.td-a-view3,.td-a-view4{opacity:0;}
  .td-a-pill{transform:none;}
}