/* ===========================================================
   APPLE-STYLE SCROLL STORY — layout + all chapter visuals
   =========================================================== */

.xstory {
  position: relative;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.xstory-track {
  position: relative;
}

/* The stage is pinned to the viewport as you scroll. */
.xstory-stage {
  position: sticky;
  top: 56px;
  height: calc(100vh - 56px);
  min-height: 720px;
  display: grid;
  grid-template-columns: 320px 1fr 320px;
  grid-template-rows: 48px 1fr 60px;
  grid-template-areas:
    "topbar topbar topbar"
    "copy   canvas right"
    "ticker ticker ticker";
  background: var(--bg);
  overflow: hidden;
}

/* Top bar */
.xs-topbar {
  grid-area: topbar;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--dim);
}
.xs-top-left, .xs-top-right { display: flex; align-items: center; gap: 10px; }
.xs-act {
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 500;
}
.xs-act-name { text-transform: uppercase; letter-spacing: 0.08em; }
.xs-dot { width: 5px; height: 5px; background: var(--sig); display: inline-block; }
.xstory-stage[data-act="II"]  .xs-dot { background: var(--warn); }
.xstory-stage[data-act="III"] .xs-dot { background: var(--ok); }
.xs-cn { color: var(--ink); font-weight: 500; }

/* Copy column */
.xs-copy {
  grid-area: copy;
  padding: 36px 28px 24px;
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 20px;
}
.xs-copy-label { margin-bottom: 8px; }
.xs-copy-title {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 42px;
  line-height: 0.98;
  letter-spacing: -0.02em;
  margin: 0;
  animation: xsFade .4s ease;
}
.xs-copy-sub {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--dim);
  line-height: 1.5;
  margin: 0;
  max-width: 38ch;
  animation: xsFade .5s ease;
}
@keyframes xsFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* Mini-map inside copy column */
.xs-minimap {
  margin-top: auto;
  display: flex; flex-direction: column; gap: 14px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.xs-mini { display: flex; flex-direction: column; gap: 6px; opacity: 0.5; transition: opacity .3s; }
.xs-mini.on, .xs-mini.done { opacity: 1; }
.xs-mini-head { display: flex; gap: 10px; align-items: baseline; }
.xs-mini-bar {
  height: 2px; background: var(--line); position: relative; overflow: hidden;
}
.xs-mini-bar > i {
  position: absolute; inset: 0 auto 0 0;
  background: var(--ink);
  transition: width .3s;
}
.xs-mini.on .xs-mini-bar > i { background: var(--sig); }
.xs-mini.done .xs-mini-bar > i { background: var(--ok); }

/* Canvas */
.xs-canvas {
  grid-area: canvas;
  padding: 24px;
  overflow: hidden;
  position: relative;
  background: var(--panel-2);
}

/* Right rail */
.xs-right {
  grid-area: right;
  padding: 28px 22px;
  border-left: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 16px;
  overflow: hidden;
}
.xs-rail-card {
  border: 1px solid var(--line);
  background: var(--panel);
  padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
  animation: xsFade .4s ease;
}
.xs-rail-kv {
  display: grid;
  grid-template-columns: 100px 1fr;
  font-size: 12px;
  gap: 4px 12px;
}

/* Ticker */
.xs-ticker {
  grid-area: ticker;
  border-top: 1px solid var(--line);
  padding: 6px 24px;
  display: flex; flex-direction: column; gap: 6px;
  background: var(--panel-2);
}
.xs-ticker-row {
  display: grid;
  grid-template-columns: repeat(18, 1fr);
  gap: 4px;
}
.xs-tick {
  display: flex; align-items: center; justify-content: center;
  height: 22px;
  border: 1px solid var(--line);
  background: var(--bg);
  font-family: var(--mono);
  font-size: 9px;
  color: var(--dim);
  transition: all .2s;
}
.xs-tick.done { background: var(--ok-soft); color: var(--ok); border-color: var(--ok); }
.xs-tick.on   { background: var(--sig); color: #fff; border-color: var(--sig); }
.xs-ticker-bar {
  height: 2px; background: var(--line); position: relative; overflow: hidden;
}
.xs-ticker-fill {
  position: absolute; inset: 0 auto 0 0;
  background: var(--sig);
  transition: width .1s linear;
}

/* =========================================================
   ACT I CANVAS — stacked frame layout
   ========================================================= */
.xs-frame {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 16px;
  height: 100%;
  position: relative;
}
.xs-frame-final {
  grid-template-rows: 1fr auto auto;
}

/* Commit banner */
.xs-commit {
  border: 1px solid var(--line);
  background: var(--panel);
  padding: 12px 16px;
  display: flex; flex-direction: column; gap: 6px;
  opacity: 0; transform: translateY(-28px);
  transition: opacity .55s cubic-bezier(0.2, 0.8, 0.2, 1),
              transform .55s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.xs-commit.on { opacity: 1; transform: none; }
.xs-commit-row {
  display: flex; gap: 10px; align-items: center;
  font-size: 14px;
}

/* Code wrap + diff */
.xs-codewrap {
  border: 1px solid var(--line);
  background: var(--panel-2);
  overflow: hidden;
  display: flex; flex-direction: column;
  min-height: 0;
}
.xs-code-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}
.xs-sq {
  display: inline-block;
  width: 6px; height: 6px;
  background: currentColor;
  margin-right: 6px;
  vertical-align: middle;
}
.xs-code {
  overflow: hidden;
  padding: 8px 0;
  font-family: var(--mono); font-size: 11.5px; line-height: 1.55;
  flex: 1;
  min-height: 0;
}
/* CVE card — collapses flat until revealed so the code panel bottom
   border sits at the canvas bottom and never looks like it floats. */
.xs-cve {
  background: var(--panel);
  display: flex; flex-direction: column; gap: 10px;
  opacity: 0;
  max-height: 0;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-width: 0;
  overflow: hidden;
  transform: translateY(12px);
  transition: opacity .5s, transform .5s,
              max-height .5s, padding .5s, border-width .5s;
}
.xs-cve.on {
  opacity: 1;
  max-height: 600px;
  padding: 14px 16px;
  border-width: 1px;
  transform: none;
}
.xs-cve-head { display: flex; gap: 10px; align-items: center; }
.xs-cve-kv {
  display: grid; grid-template-columns: 90px 1fr;
  font-family: var(--mono); font-size: 12px;
  gap: 4px 12px;
}
.xs-cve-kv .k { color: var(--dim); }

/* Article — typewriter panel (same collapse pattern as CVE card) */
.xs-article {
  background: var(--panel);
  overflow: hidden;
  opacity: 0;
  max-height: 0;
  border: 1px solid var(--line);
  border-width: 0;
  transform: translateY(12px);
  transition: opacity .5s, transform .5s,
              max-height .5s, border-width .5s;
}
.xs-article.on {
  opacity: 1;
  max-height: 600px;
  border-width: 1px;
  transform: none;
}
.xs-article-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}
.xs-article-body {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.5;
  padding: 12px 16px;
  margin: 0;
  overflow: hidden;
  white-space: pre-wrap;
  flex: 1;
  min-height: 0;
}
.xa-h1 { color: var(--ink); font-size: 14px; font-weight: 600; margin-top: 4px; }
.xa-h2 { color: var(--sig); font-weight: 600; margin-top: 8px; }

/* =========================================================
   ACT II CANVAS
   ========================================================= */
.xs-tree, .xs-sinks, .xs-tracer, .xs-iters, .xs-candboard {
  opacity: 0; transform: translateY(10px);
  transition: opacity .4s, transform .4s;
}
.xs-tree.on, .xs-sinks.on, .xs-tracer.on, .xs-iters.on, .xs-candboard.on {
  opacity: 1; transform: none;
}
.xs-panel-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-bottom: 0;
  background: var(--panel);
}
.xs-tree-body, .xs-sinks-body, .xs-tracer-body {
  border: 1px solid var(--line);
  background: var(--panel-2);
  font-family: var(--mono);
  font-size: 10.5px;
  overflow: hidden;
  flex: 1;
  min-height: 0;
}

/* Tree rows */
.xs-tree-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 3px 14px;
  transition: background .2s;
  opacity: 0.3;
}
.xs-tree-row.on { opacity: 1; }
.xs-tree-row.sweep { background: var(--sig); color: #fff; }
.xs-tree-row.hit { background: var(--sig-soft); }
.xs-tree-path {
  font-size: 11px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Sink rules */
.xs-sink {
  display: grid;
  grid-template-columns: 80px 1fr 40px;
  gap: 10px;
  padding: 5px 14px;
  align-items: center;
  border-bottom: 1px solid var(--line-2);
}
.xs-sink:last-child { border-bottom: 0; }
.xs-sink-pat { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Tracer flow */
.xs-trace-row {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 14px;
  padding: 8px 14px;
  align-items: center;
  border-bottom: 1px solid var(--line-2);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity .3s, transform .3s;
}
.xs-trace-row:last-child { border-bottom: 0; }
.xs-trace-row.on { opacity: 1; transform: none; }
.xs-trace-row.user  .xs-trace-step { color: var(--sig); }
.xs-trace-row.taint .xs-trace-step { color: var(--warn); }
.xs-trace-row.sink  .xs-trace-step { color: var(--sig); font-weight: 600; }
.xs-trace-code { font-size: 11.5px; }

/* Iterations */
.xs-iters {
  display: flex; flex-direction: column; gap: 8px;
  border: 1px solid var(--line);
  background: var(--panel);
}
.xs-iter {
  padding: 10px 16px;
  border-bottom: 1px solid var(--line-2);
  opacity: 0.4;
  transition: opacity .3s, background .3s;
}
.xs-iter:last-child { border-bottom: 0; }
.xs-iter.active { opacity: 1; background: var(--sig-soft); }
.xs-iter.done   { opacity: 1; }
.xs-iter-head {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: 12px;
  align-items: center;
  margin-bottom: 6px;
}
.xs-iter-body {
  font-family: var(--mono); font-size: 11px;
  display: flex; flex-direction: column; gap: 3px;
}
.xs-iter-line {
  display: grid; grid-template-columns: 12px 1fr; gap: 8px;
  opacity: 0; transform: translateY(4px);
  transition: opacity .3s, transform .3s;
}
.xs-iter-line.on { opacity: 1; transform: none; }

/* ReAct tools */
.xs-react {
  margin-top: 10px;
  border: 1px solid var(--line);
  background: var(--panel-2);
}
.xs-react-body {
  font-family: var(--mono); font-size: 10px;
  overflow: hidden;
}
.xs-react-row {
  display: grid;
  grid-template-columns: 160px 1fr 50px 110px;
  gap: 10px;
  padding: 4px 12px;
  border-bottom: 1px solid var(--line-2);
  opacity: 0; transform: translateX(-6px);
  transition: opacity .25s, transform .25s;
}
.xs-react-row:last-child { border-bottom: 0; }
.xs-react-row.on { opacity: 1; transform: none; }
.xs-react-tool { color: var(--ink); }
.xs-react-arg  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Candidates board */
.xs-cand-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  border: 1px solid var(--line);
  padding: 10px;
  background: var(--panel);
}
.xs-cand {
  border: 1px solid var(--line);
  padding: 8px 10px;
  display: flex; flex-direction: column; gap: 4px;
  opacity: 0; transform: scale(0.96);
  transition: opacity .3s, transform .3s;
  background: var(--panel-2);
}
.xs-cand.on { opacity: 1; transform: none; }
.xs-cand-top { display: flex; justify-content: space-between; }

/* =========================================================
   ACT III CANVAS — lanes + verdict cards
   ========================================================= */
.xs-lanes {
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--line);
  background: var(--panel);
  min-height: 0;
  overflow: hidden;
}
.xs-lane-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
}
.xs-lane-header.tp { border-right: 1px solid var(--line); background: var(--sig-soft); }
.xs-lane-header.fp { background: var(--panel-2); }
.xs-lane-body {
  grid-column: 1 / span 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  min-height: 0;
}
.xs-lane {
  padding: 12px;
  display: flex; flex-direction: column; gap: 6px;
  overflow: hidden;
  min-height: 0;
}
.xs-lane-tp { border-right: 1px solid var(--line); background: linear-gradient(180deg, var(--sig-soft), transparent 40%); }
.xs-lane-fp { background: linear-gradient(180deg, var(--panel-2), transparent 40%); }

.xs-vcard {
  border: 1px solid var(--line);
  background: var(--panel);
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 6px;
  transition: transform .4s cubic-bezier(.22,.61,.36,1), opacity .3s;
}
.xs-vcard.tp.sorted { border-color: var(--sig); }
.xs-vcard.fp.sorted { opacity: 0.7; }
.xs-vcard-head {
  display: flex; align-items: center; gap: 10px;
}
.xs-vcard-stamp {
  margin-left: auto;
  font-family: var(--mono); font-size: 9px;
  text-transform: uppercase; letter-spacing: 0.12em;
  padding: 2px 6px;
  border: 1px solid var(--ok);
  color: var(--ok);
  opacity: 0; transform: scale(0.9);
  transition: opacity .3s, transform .3s;
}
.xs-vcard-stamp.on { opacity: 1; transform: none; }
.xs-vcard-file { }
.xs-vcard-reason {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--dim);
  line-height: 1.45;
  overflow: hidden;
  transition: max-height .4s, opacity .3s;
}
.xs-vcard-foot {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
}
.xs-vcard-bar {
  height: 3px; background: var(--line); overflow: hidden;
}
.xs-vcard-bar > i {
  display: block; height: 100%;
  background: var(--sig);
  transition: width .3s;
}
.xs-vcard.fp .xs-vcard-bar > i { background: var(--dim); }

/* Shipped artifacts strip */
.xs-shipstrip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line);
  background: var(--panel);
  opacity: 0; transform: translateY(8px);
  transition: opacity .4s, transform .4s;
}
.xs-shipstrip.on { opacity: 1; transform: none; }
.xs-ship {
  padding: 12px 14px;
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 4px;
}
.xs-ship:last-child { border-right: 0; }

/* Closing billboard */
.xs-billboard {
  padding: 24px 16px 0;
  display: flex; flex-direction: column; gap: 10px;
  transition: opacity .4s;
}
.xs-bb-line {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 16px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
  font-size: 14px;
}
.xs-bb-line:first-child { border-top: 0; }

/* =========================================================
   RESPONSIVE — tablet (single sidebar collapses)
   ========================================================= */
@media (max-width: 1100px) and (min-width: 821px) {
  .xstory-stage {
    grid-template-columns: 260px 1fr;
    grid-template-areas:
      "topbar topbar"
      "copy   canvas"
      "ticker ticker";
  }
  .xs-right { display: none; }
  .xs-copy-title { font-size: 32px; }
}

/* =========================================================
   RESPONSIVE — mobile (≤820px)
   Sticky stage stays, layout collapses to:
     topbar (thin)
     canvas (dominant, ~62vh)
     copy (headline + sub, compact)
     ticker (3-row dot grid)
   Right-rail telemetry moves into the copy block as a chip.
   ========================================================= */
@media (max-width: 820px) {
  .xstory-stage {
    top: 48px;
    height: calc(100dvh - 48px);
    min-height: 560px;
    grid-template-columns: 1fr;
    grid-template-rows: 36px minmax(0, 1fr) auto 46px;
    grid-template-areas:
      "topbar"
      "canvas"
      "copy"
      "ticker";
  }

  /* Top bar — thin, abbreviated */
  .xs-topbar {
    padding: 0 14px;
    font-size: 10px;
  }
  .xs-top-left { gap: 6px; min-width: 0; overflow: hidden; }
  .xs-top-left .xs-act-name {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 40vw;
  }
  .xs-top-right { gap: 6px; }

  /* Canvas — dominant, reduced padding */
  .xs-canvas {
    padding: 12px;
    border-bottom: 1px solid var(--line);
  }
  .xs-frame { gap: 10px; }

  /* Copy column becomes a compact horizontal strip below canvas */
  .xs-copy {
    padding: 12px 14px 10px;
    border-right: 0;
    border-top: 1px solid var(--line);
    gap: 6px;
    max-height: 34vh;
    overflow: hidden;
  }
  .xs-copy-label { margin: 0; font-size: 10px; }
  .xs-copy-title {
    font-size: 22px;
    line-height: 1.05;
    margin: 0;
  }
  .xs-copy-sub {
    font-size: 12.5px;
    line-height: 1.4;
    max-width: none;
  }
  /* Hide mini-map + desktop right-rail on mobile — ticker already shows progress */
  .xs-minimap { display: none; }
  .xs-right   { display: none; }

  /* Ticker — 3-row, 6-col dot grid */
  .xs-ticker {
    padding: 6px 14px 8px;
    gap: 4px;
  }
  .xs-ticker-row {
    grid-template-columns: repeat(9, 1fr);
    gap: 3px;
  }
  .xs-tick {
    height: 14px;
    font-size: 8px;
  }
  .xs-tick-n { letter-spacing: 0; }

  /* ---- Act I canvas tightening ---- */
  .xs-commit { gap: 4px; }
  .xs-commit.on { padding: 8px 12px; }
  .xs-commit-row { font-size: 12px; gap: 6px; flex-wrap: wrap; }
  .xs-code-head { padding: 7px 10px; }
  .xs-code { font-size: 10.5px; line-height: 1.6; padding: 6px 0; }
  .xs-code .ln { width: 26px; padding-right: 8px; }
  .xs-cve { gap: 6px; }
  .xs-cve.on { padding: 10px 12px; }
  .xs-cve-kv { grid-template-columns: 68px 1fr; font-size: 11px; gap: 3px 8px; }
  .xs-article-head { padding: 7px 10px; }
  .xs-article-body { font-size: 10px; padding: 8px 10px; }

  /* ---- Act II canvas tightening ---- */
  .xs-panel-head { padding: 6px 10px; }
  .xs-tree-body, .xs-sinks-body, .xs-tracer-body {
    font-size: 9.5px;
  }
  .xs-tree-row { padding: 2px 10px; }
  .xs-sink {
    grid-template-columns: 64px 1fr 34px;
    gap: 6px;
    padding: 4px 10px;
  }
  .xs-trace-row {
    grid-template-columns: 60px 1fr;
    gap: 6px;
    padding: 6px 10px;
  }
  .xs-trace-row > .mono.tiny.dim { display: none; } /* hide file col */
  .xs-trace-code { font-size: 10.5px; }
  .xs-iter { padding: 8px 12px; }
  .xs-iter-head { grid-template-columns: 90px 1fr auto; gap: 8px; }
  .xs-iter-body { font-size: 10px; }
  .xs-react-body { font-size: 9.5px; }
  .xs-react-row {
    grid-template-columns: 110px 1fr 80px;
    gap: 6px;
    padding: 3px 10px;
  }
  .xs-react-row > .mono.tiny:nth-child(3) { display: none; } /* hide time */
  .xs-cand-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    padding: 8px;
  }
  .xs-cand { padding: 6px 8px; }

  /* ---- Act III canvas — stack lanes vertically ---- */
  .xs-lanes {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
  }
  .xs-lane-header { padding: 10px 14px; }
  .xs-lane-header.tp { border-right: 0; }
  .xs-lane-body {
    grid-column: 1;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }
  .xs-lane { padding: 10px; gap: 6px; }
  .xs-lane-tp { border-right: 0; border-bottom: 1px solid var(--line); }
  .xs-vcard { padding: 8px 10px; }
  .xs-vcard-reason { font-size: 11px; }
  .xs-shipstrip { grid-template-columns: repeat(2, 1fr); }
  .xs-ship {
    padding: 8px 10px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .xs-ship:nth-child(2n)     { border-right: 0; }
  .xs-ship:nth-last-child(-n+2) { border-bottom: 0; }

  .xs-billboard { padding: 14px 10px 0; }
  .xs-bb-line {
    grid-template-columns: 1fr;
    gap: 2px;
    font-size: 12px;
    padding: 6px 0;
  }
}

/* Very narrow phones */
@media (max-width: 400px) {
  .xs-copy-title { font-size: 19px; }
  .xs-ticker-row { grid-template-columns: repeat(6, 1fr); }
}