/* ==========================================================================
   agentsaw · /demo components
   The film player, the kill chain, the leaked-artifact mock and the stat
   strip. These were split between an inline block in the page and the old
   site stylesheet, and they spoke that stylesheet's vocabulary. One file now,
   on the site.css tokens, so /demo follows the theme like every other page.

   The leaked artifact is theme-aware rather than permanently dark: it is a
   wiki page in a browser, a document rather than a terminal.
   ========================================================================== */

/* the icon helper the page used to inherit. Without it every inline svg
   renders at its natural size, filled black. */
svg.ic{width:1em;height:1em;stroke:currentColor;stroke-width:1.75;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none}
.rail .num svg.ic{width:22px;height:22px;stroke-width:1.9}
.stamp svg.ic{width:14px;height:14px}
.who svg.ic{width:13px;height:13px}
.leak-bar svg.ic{width:13px;height:13px}

/* the film that leads the page */
.demo-hero{padding-bottom:56px}
.demo-hero .lead{max-width:70ch}
.film-lead{margin-top:36px}
.film-lead .vidcard{box-shadow:var(--shadow-lg)}

/* ── film cards and player ──────────────────────────────────────────────── */
.vidgrid{display:grid;grid-template-columns:1fr;gap:30px;margin-top:42px}
.vidcard{border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;background:var(--surface)}
.vidcard .vh{padding:15px 20px;border-bottom:1px solid var(--line);display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.vidcard .vh .vt{font-family:var(--display);font-weight:600;font-size:16.5px;color:var(--ink);letter-spacing:-.01em}
.vidcard .vh .vs{font-size:13px;color:var(--ink-3)}
.vidcard video{width:100%;height:auto;display:block;background:#02040a}
.pbar{display:flex;align-items:center;gap:10px;padding:10px 14px;border-top:1px solid var(--line);background:var(--bg-2)}
.pbtn{background:none;border:1px solid var(--line);color:var(--ink-2);width:34px;height:34px;flex:none;
  border-radius:var(--r);display:grid;place-items:center;cursor:pointer;transition:border-color .15s var(--ease),color .15s var(--ease)}
.pbtn:hover{border-color:var(--line-2);color:var(--ink)}
.pbtn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pbtn .i-pause{display:none}
.player.playing .i-play{display:none}
.player.playing .i-pause{display:block}
.pseek{flex:1;appearance:none;-webkit-appearance:none;height:22px;background:transparent;cursor:pointer;min-width:60px}
.pseek::-webkit-slider-runnable-track{height:5px;border-radius:var(--pill);
  background:linear-gradient(90deg,var(--blue) var(--p,0%),var(--line-2) var(--p,0%))}
.pseek::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;border-radius:var(--pill);background:var(--ink);
  border:none;margin-top:-5px;box-shadow:0 1px 4px rgb(0 0 0/.4)}
.pseek::-moz-range-track{height:5px;border-radius:var(--pill);background:var(--line-2)}
.pseek::-moz-range-progress{height:5px;border-radius:var(--pill);background:var(--blue)}
.pseek::-moz-range-thumb{width:15px;height:15px;border-radius:var(--pill);background:var(--ink);border:none}
.ptime{font-family:var(--mono);font-size:12px;color:var(--ink-3);flex:none;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.pspeed{min-width:46px;width:auto;padding:0 8px;font-family:var(--mono);font-size:11.5px;letter-spacing:.04em}
.player{outline:none}
.player:focus-visible{box-shadow:inset 0 0 0 2px var(--blue-line)}
.player:fullscreen{display:flex;flex-direction:column;background:#02040a}
.player:fullscreen video{flex:1;min-height:0;object-fit:contain}

/* ── kill chain, leaked artifact, stat strip ────────────────────────────── */
.stats{margin-top:48px;border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;display:grid;grid-template-columns:repeat(5,1fr);background:var(--surface)}
  .stat{padding:26px 22px;border-left:1px solid var(--line)}
  .stat:first-child{border-left:none}
  .stat .n{font-family:var(--display);font-weight:700;font-size:42px;line-height:1;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
  .stat .n.r{color:var(--red)}
  .stat .n.a{color:var(--warn)}
  .stat .l{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--ink-3);margin-top:13px;text-transform:uppercase;line-height:1.55}
  @media(max-width:820px){.stats{grid-template-columns:repeat(2,1fr)}.stat:nth-child(odd){border-left:none}}

  .chain{margin-top:52px;position:relative}
  .chain::before{content:"";position:absolute;left:25px;top:24px;bottom:120px;width:2px;background:linear-gradient(180deg,var(--green),var(--green) 66%,var(--red));opacity:.4}
  .step{display:grid;grid-template-columns:74px 1fr;margin-bottom:16px;position:relative}
  .rail{display:flex;justify-content:flex-start;padding-top:22px}
  .rail .num{width:50px;height:50px;border-radius:var(--pill);display:grid;place-items:center;background:var(--green);color:#04140a;box-shadow:0 0 0 5px var(--bg);z-index:2}
  .rail .num svg{width:22px;height:22px;stroke-width:1.9}
  .step.breach .rail .num{background:var(--red);color:#fff}
  .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:22px 26px;transition:border-color .18s var(--ease)}
  .step.breach .card{border-color:var(--blue-line);box-shadow:0 0 0 1px rgb(230 46 46 / .22),var(--shadow-lg)}
  .card-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
  .when{font-family:var(--mono);font-size:12px;letter-spacing:.05em;color:var(--ink-3)}
  .who{font-family:var(--mono);font-size:12px;letter-spacing:.05em;color:var(--ink);border:1px solid var(--line-2);padding:3px 10px;border-radius:8px;display:inline-flex;align-items:center;gap:6px}
  .who svg{width:13px;height:13px}
  .stamp{margin-left:auto;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;font-weight:500;text-transform:uppercase;display:flex;align-items:center;gap:7px;color:var(--green);background:var(--green-soft);padding:5px 12px;border-radius:var(--pill)}
  .stamp svg{color:var(--green);width:14px;height:14px}
  .stamp.bad{color:var(--red);background:var(--red-soft)}
  .stamp.bad svg{color:var(--red)}
  .card p{font-size:17px;color:var(--ink-2);line-height:1.62}
  .card p b{color:var(--ink);font-weight:600}
  .card .quote{color:var(--warn)}
  .card code{font-family:var(--mono);font-size:13.5px;color:var(--blue);background:var(--blue-soft);padding:1px 7px;border-radius:8px}

  .leak{margin-top:8px;border:1px solid var(--line-2);border-radius:var(--r-l);overflow:hidden;background:var(--bg-2);box-shadow:var(--shadow-lg);color:var(--ink-2)}
  .leak-bar{display:flex;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid var(--line);background:var(--surface);font-family:var(--mono);font-size:12px;color:var(--ink-3)}
  .leak-bar .tl{display:flex;gap:7px}
  .leak-bar .tl i{width:11px;height:11px;border-radius:var(--pill);background:rgb(255 255 255 / .14);display:block}
  .leak-bar .url{color:var(--ink-2)}
  .leak-bar .view{margin-left:auto;display:flex;align-items:center;gap:7px;color:var(--red);border:1px solid rgb(230 46 46 / .4);padding:4px 11px;border-radius:var(--pill);font-size:11px}
  .leak-bar .view svg{color:var(--red);width:13px;height:13px}
  .leak-body{padding:32px 36px 34px;font-family:var(--mono);font-size:14.5px;line-height:2}
  .leak-body h4{font-family:var(--display);font-weight:600;font-size:24px;color:var(--ink);margin-bottom:6px;letter-spacing:-.01em}
  .leak-body .meta{color:var(--ink-3);font-size:12px;letter-spacing:.04em;margin-bottom:24px}
  .leak-body .row{color:var(--ink-2)}
  .leak-body .k{color:var(--ink-3)}
  .secret{color:#fff;background:var(--red-soft);box-shadow:inset 0 -1px 0 var(--red);padding:2px 6px;border-radius:8px}
  .tag-real{font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--red);border:1px solid rgb(230 46 46 / .4);border-radius:8px;padding:1px 6px;margin-left:6px;vertical-align:middle}
  .leak-cap{margin-top:24px;font-family:var(--body);font-size:15px;color:var(--ink-2);border-left:2px solid var(--red);padding-left:18px;line-height:1.6}
  .leak-cap b{color:var(--ink);font-weight:600}

  .luxbox{margin-top:42px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-l);padding:40px 44px;position:relative;overflow:hidden}
  .luxbox::before{content:"";position:absolute;inset:0;background:radial-gradient(80% 130% at 100% 0,var(--blue-soft),transparent 60%);pointer-events:none}
  .luxbox .sec-tag{color:var(--blue);position:relative}
  .luxbox p{font-size:17.5px;color:var(--ink-2);line-height:1.72;max-width:780px;position:relative}
  .luxbox p b{color:var(--ink);font-weight:600}
  .luxbox .taint{color:var(--green);font-family:var(--mono);font-size:13px;background:var(--green-soft);padding:1px 7px;border-radius:8px}

/* ── corrections for the new surface ────────────────────────────────────── */
.stats{background:var(--surface)}
.chain .card p{font-size:16.5px}
.leak{background:var(--bg-2);color:var(--ink-2)}
.leak-bar{background:var(--surface)}
.leak-body h4{color:var(--ink)}
.leak-bar .tl i{background:var(--line-2)}
.secret{color:var(--ink);background:var(--red-soft);box-shadow:inset 0 -1px 0 var(--red)}
.rail .num{color:var(--surface)}
@media(max-width:820px){.step{grid-template-columns:56px 1fr}.rail .num{width:42px;height:42px}}