/* ============================================================================
   tracer.css — styles for the Prompt Tracer deep-dive page (tracer.html only).
   app.css supplies the base system + the interactive atlas widget; this file
   adds the page intro tweaks, the stage-by-stage walk-through, and the
   "bridge to your real library" section. Reuses the app.css design tokens.
   ============================================================================ */

/* ---- page intro (reuses .atlas / .atlas-head) ---- */
.trace-top{display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin-bottom:1.1rem}
.trace-back{font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); text-decoration:none; display:inline-flex; align-items:center; gap:.5em}
.trace-back:hover{color:var(--copper-ink)}
.trace-tag{font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--copper-ink); border:1px solid var(--line-warm); border-radius:999px; padding:.32em .8em}
.atlas-head h1{font-family:var(--display); font-weight:600; line-height:1.02; letter-spacing:-.01em;
  font-size:clamp(2.1rem,3.8vw+1rem,3.7rem); margin:0}
.atlas-lede.lg{font-size:clamp(1.05rem,.6vw+.95rem,1.24rem); line-height:1.55; max-width:64ch}
.trace-leadin{margin:clamp(20px,3vw,30px) 0 0; font-family:var(--mono); font-size:.76rem;
  letter-spacing:.04em; color:var(--muted)}
.trace-leadin b{color:var(--tarnished); font-weight:600}

/* ---- simplified hero: single "Start the Tour" entry point ---- */
.atlas-start-wrap{display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center;
  margin:clamp(20px,3vw,30px) 0 6px}
.atlas-start-wrap.hide{display:none}
.atlas-start{font-size:1.02rem; padding:.85em 1.75em}
.atlas-start-note{font-family:var(--mono); font-size:.75rem; letter-spacing:.02em; color:var(--muted); margin:0; max-width:44ch}
.atlas-tour-panel{display:none}
.atlas-tour-panel.show{display:block; animation:atlasPanelIn .45s ease both}
@keyframes atlasPanelIn{from{opacity:0; translate:0 10px} to{opacity:1; translate:0 0}}
@media (prefers-reduced-motion:reduce){ .atlas-tour-panel.show{animation:none} }
/* small tooltip-info trigger for compact contexts (pipeline strip) */
.term-btn.info.sm{width:14px; height:14px; font-size:9px; margin-left:.4em}

/* ============================ stage-by-stage (dark) ============================ */
.stages{background:var(--teal-deep); color:var(--on-teal); border-block:1px solid var(--teal-deeper)}
.stages .kicker{color:var(--on-teal-muted)}
.stages .kicker .n{color:var(--accent-teal)}
.stages .kicker::before{background:var(--accent-teal)}
.stages h2{color:var(--on-teal); font-size:clamp(2rem,3.6vw+1rem,3.4rem); letter-spacing:-.01em; max-width:20ch}
.stages .intro{max-width:60ch; color:var(--on-teal-muted); margin-top:1.4rem; font-size:1.08rem}

.tstack{margin-top:clamp(44px,6vw,80px); display:grid; gap:clamp(34px,5vw,72px)}
.tstage{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  gap:clamp(22px,4vw,58px); align-items:center}
/* alternate the visual side for rhythm (DOM order is text → visual) — mobile/no-JS layout only */
.tstage:nth-child(even) .tvis{order:-1}

/* ---- scrollytelling: on wide screens the visual pins beside the text ---- */
.tvis-rail{display:none}
.tvis-slot{display:none}
.tvis-slot.active{display:block; animation:tvSlotIn .35s ease both}
@keyframes tvSlotIn{from{opacity:0} to{opacity:1}}
@media (prefers-reduced-motion:reduce){ .tvis-slot.active{animation:none} }
.tvis-steps{list-style:none; margin:16px 0 0; padding:14px 0 0; border-top:1px solid var(--line-dark);
  display:grid; gap:8px; font-family:var(--mono); font-size:.72rem; letter-spacing:.04em; color:var(--on-teal-muted)}
.tvis-steps li{position:relative; padding-left:1.3em; transition:color .2s ease}
.tvis-steps li::before{content:""; position:absolute; left:0; top:.4em; width:6px; height:6px; border-radius:50%;
  background:var(--line-dark); transition:background .2s ease}
.tvis-steps li.on{color:var(--on-teal)}
.tvis-steps li.on::before{background:var(--accent-teal)}

@media (min-width:900px){
  .tstack{grid-template-columns:minmax(280px,380px) 1fr; align-items:stretch; gap:clamp(40px,5vw,74px)}
  .tvis-rail{display:block; position:relative}
  .tvis-pin{position:sticky; top:clamp(90px,12vh,140px)}
  .ttext{display:grid; gap:clamp(80px,10vw,150px)}
  /* the paired visual now lives in the rail; hide the inline duplicate and simplify each stage to text-only */
  .tstage{grid-template-columns:1fr; gap:0}
  .tstage .tvis{display:none}
}

.tbody .s-row{display:flex; align-items:baseline; gap:.7em; margin-bottom:.5rem}
.tbody .s-n{font-family:var(--display); font-weight:500; font-size:clamp(1.9rem,3vw,2.7rem);
  color:var(--accent-teal); line-height:.9; font-feature-settings:"tnum"}
.tbody .s-tech{font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--on-teal-muted); border:1px solid var(--line-dark); border-radius:999px; padding:.34em .75em}
.tbody h3{font-family:var(--display); font-weight:600; color:var(--on-teal);
  font-size:clamp(1.4rem,1.6vw+1rem,2rem); letter-spacing:-.005em; margin:0 0 .6rem}
.tbody p{color:var(--on-teal-muted); font-size:1.02rem; line-height:1.6; max-width:52ch; margin:0}
.tbody p em{color:var(--accent-teal); font-style:italic}
.tbody .s-more{display:inline-block; margin-top:.9rem; font-family:var(--mono); font-size:.74rem;
  letter-spacing:.03em; color:var(--accent-teal); text-decoration:none; border-bottom:1px solid transparent}
.tbody .s-more:hover{border-bottom-color:var(--accent-teal)}

/* the stage mini-visual card */
.tvis{margin:0; border:1px solid var(--line-dark); border-radius:var(--r-lg);
  background:rgba(244,241,234,.05); padding:clamp(14px,2vw,22px);
  box-shadow:0 16px 34px -18px rgba(0,0,0,.55)}
.tvis svg{display:block; width:100%; height:auto}
.tvis figcaption{margin-top:.7rem; font-family:var(--mono); font-size:.68rem; letter-spacing:.04em;
  color:var(--on-teal-muted); text-align:center; opacity:.85}

/* shared SVG element theming (used across the five stage diagrams) */
.tv-panel{fill:rgba(12,23,18,.4); stroke:var(--line-dark)}
.tv-dot{fill:var(--on-teal-muted); opacity:.42}
.tv-dot.hit{fill:var(--accent-teal); opacity:1}
.tv-dot.q{fill:var(--copper); opacity:1; stroke:var(--accent-teal); stroke-width:1.5}
.tv-ring{fill:none; stroke:var(--accent-teal); stroke-width:1.4; stroke-dasharray:4 5; opacity:.7}
.tv-link{stroke:var(--accent-teal); stroke-width:1.4; opacity:.5}
.tv-flow{fill:none; stroke:var(--on-teal-muted); stroke-width:1.6; opacity:.45}
.tv-flow.hot{stroke:var(--accent-teal); opacity:.9}
.tv-chip{fill:rgba(244,241,234,.06); stroke:var(--line-dark)}
.tv-chip.hot{fill:rgba(227,168,106,.16); stroke:var(--accent-teal)}
.tv-chip.win{fill:rgba(143,211,176,.18); stroke:var(--verdigris-lt)}
.tv-bar{fill:var(--accent-teal); opacity:.85}
.tv-bar.dim{fill:var(--on-teal-muted); opacity:.4}
.tv-word{fill:var(--on-teal-muted); opacity:.55}
.tv-word.match{fill:var(--copper); opacity:1}
.tv-t{fill:var(--on-teal); font-family:var(--mono); font-size:12px}
.tv-t.sm{fill:var(--on-teal-muted); font-size:10.5px; opacity:.9}
.tv-t.cite{fill:var(--accent-teal); font-size:10px}
.tv-node{fill:rgba(46,68,56,.85); stroke:var(--accent-teal); stroke-width:1.6}
.tv-arrow{fill:var(--on-teal-muted); opacity:.7}

@media (max-width:820px){
  .tstage{grid-template-columns:1fr; gap:20px}
  .tstage .tvis{order:0}
  .tbody p{max-width:60ch}
}

/* ============================ bridge to your library ============================ */
.bridge{background:var(--limestone); border-block:1px solid var(--line)}
.bridge .head{max-width:64ch}
.bridge h2{font-size:clamp(2rem,3.4vw+1rem,3.3rem); letter-spacing:-.01em}
.bridge .intro{margin-top:1.3rem; max-width:62ch; color:var(--ash-soft); font-size:1.08rem}

.bridge-cards{margin-top:clamp(34px,4.5vw,56px); display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(18px,3vw,28px)}
@media (max-width:720px){ .bridge-cards{grid-template-columns:1fr} }
.bcard{border:1px solid var(--line-warm); border-radius:var(--r-lg); background:var(--limestone-2);
  padding:clamp(22px,2.6vw,32px); box-shadow:var(--shadow)}
.bcard.real{background:var(--teal-deep); border-color:var(--teal-deeper); color:var(--on-teal)}
.bcard .lbl{display:block; font-family:var(--mono); font-size:.7rem; font-weight:500; letter-spacing:.12em;
  text-transform:uppercase; color:var(--copper-ink); margin-bottom:1.1rem}
.bcard.real .lbl{color:var(--accent-teal)}
.bstats{list-style:none; margin:0; padding:0; display:grid; gap:.85rem}
.bstat{display:flex; align-items:baseline; gap:.7em; line-height:1.2}
.bstat b{font-family:var(--display); font-weight:600; font-size:clamp(1.5rem,1.4vw+1.1rem,2rem);
  color:var(--copper-ink); font-feature-settings:"tnum"; min-width:4.4ch}
.bcard.real .bstat b{color:var(--accent-teal)}
.bstat span{font-size:.98rem; color:var(--ash-soft)}
.bcard.real .bstat span{color:var(--on-teal-muted)}

.bnote{margin:clamp(30px,4vw,46px) 0 0; max-width:66ch; font-size:1.04rem; line-height:1.6; color:var(--ash-soft)}
.bnote b{color:var(--copper-ink); font-weight:600}
.bridge .actions{display:flex; flex-wrap:wrap; align-items:center; gap:14px 20px; margin-top:clamp(24px,3vw,34px)}
.bridge .actions .meta{font-family:var(--mono); font-size:.74rem; letter-spacing:.03em; color:var(--muted)}
.textlink{display:inline-flex; align-items:center; gap:.45em; font-weight:600; color:var(--copper-ink);
  text-decoration:none}
.textlink:hover{color:var(--copper-deep)}
.textlink .arrow{transition:transform .18s ease}
.textlink:hover .arrow{transform:translateX(4px)}

/* ---- Embedding strips (Stage 1) ---- */
.emb-strips{
  margin-top:14px; padding-top:12px;
  border-top:1px dashed var(--line-warm);
}

.emb-cap{
  font-family:var(--mono); font-size:.72rem;
  color:var(--muted); font-style:italic;
  margin-bottom:8px;
}

.emb-row{
  display:grid; grid-template-columns:minmax(7.5em,auto) 1fr;
  gap:12px; align-items:center;
  opacity:0; transform:translateY(4px);
  transition:opacity .3s ease, transform .3s ease;
}

@media (prefers-reduced-motion:reduce){
  .emb-row{
    opacity:1; transform:translateY(0);
    transition:none;
  }
}

.emb-row.in{
  opacity:1; transform:translateY(0);
}

.emb-row.in.stagger{
  animation:embStagger .3s ease both;
}

@keyframes embStagger{
  from{opacity:0; transform:translateY(4px)}
  to{opacity:1; transform:translateY(0)}
}

@media (prefers-reduced-motion:reduce){
  .emb-row.in.stagger{
    animation:none;
  }
}

.emb-label{
  font-family:var(--mono); font-size:.72rem;
  color:var(--muted); text-align:right;
  min-width:7.5em;
  word-break:break-word;
}

.emb-canvas{
  height:14px; width:100%;
  border-radius:2px;
  display:block;
  image-rendering:crisp-edges;
}

.emb-canvas.query{
  border:1px solid var(--accent-teal);
}

/* ============================================================================
   Unit 2 — Per-chunk Sankey ribbon flow (Stage 3, retrieval fusion)
   ============================================================================ */
.sankey-flow{
  border-top:1px dashed var(--line-warm, #d8cfc0);
  padding-top:14px; margin-top:14px;
}
.sankey-flow svg{display:block; width:100%; height:auto}

/* ============================================================================
   Unit 3 — Score heatmap with progressive disclosure (Stage 4, reranked)
   ============================================================================ */
.score-heatmap{
  margin-top:14px; padding-top:14px;
  border-top:1px dashed var(--line-warm, #d8cfc0);
  font-family:var(--mono, ui-monospace); font-size:.8rem;
  color:var(--muted, #8a7f6f);
}
.score-heatmap *{box-sizing:border-box}
.hm-header-row,.hm-row{
  display:grid; grid-template-columns:2.4rem repeat(4,1fr);
  gap:4px; margin-bottom:4px;
}
.hm-header-row{margin-bottom:6px; text-align:center; font-weight:600}
.hm-header-cell{
  padding:.4rem .2rem; border:1px solid var(--line-warm, #d8cfc0);
  border-radius:4px; cursor:pointer; font-size:.62rem; letter-spacing:.04em;
  text-transform:uppercase; color:var(--muted, #8a7f6f);
  background:var(--limestone-2, #f4f1ea);
  transition:opacity .2s ease, color .2s ease;
}
.hm-header-cell:hover{color:var(--accent-teal, #5C7D73)}
.hm-header-cell.dimmed{opacity:.4; filter:blur(1px); cursor:default}
.hm-row{opacity:0; transition:opacity .3s ease}
.hm-row.in{opacity:1}
.hm-row-label{
  display:flex; align-items:center; justify-content:center; font-weight:600;
  color:var(--muted, #8a7f6f); border:1px solid var(--line-warm, #d8cfc0); border-radius:4px;
  background:var(--limestone-2, #f4f1ea);
}
.hm-cell{
  display:flex; align-items:center; justify-content:center; min-height:2.2rem;
  border:1px solid var(--line-warm, #d8cfc0); border-radius:4px;
  transition:opacity .2s ease, filter .2s ease, box-shadow .2s ease;
}
.hm-cell.dimmed{opacity:.35; filter:blur(.5px); background:var(--limestone-2, #f4f1ea) !important}
.hm-score{font-weight:600; font-size:.72rem; color:#1a1a1a}
.hm-cell.highlight{box-shadow:inset 3px 0 0 var(--accent-teal, #5C7D73); border-left-width:3px}
@media (prefers-reduced-motion: no-preference){
  .hm-cell.highlight-pulse{animation:hm-pulse .6s ease 1}
}
@keyframes hm-pulse{
  0%{box-shadow:inset 3px 0 0 var(--accent-teal,#5C7D73), 0 0 0 0 rgba(92,125,115,.35)}
  60%{box-shadow:inset 3px 0 0 var(--accent-teal,#5C7D73), 0 0 0 8px rgba(92,125,115,0)}
  100%{box-shadow:inset 3px 0 0 var(--accent-teal,#5C7D73), 0 0 0 0 rgba(92,125,115,0)}
}
.hm-control-row{display:flex; align-items:center; gap:1.2rem; margin-top:1rem}
.hm-reveal-btn{
  padding:.44rem .9rem; background:var(--accent-teal, #5C7D73); color:#fff; border:none;
  font-family:var(--mono, ui-monospace); font-size:.72rem; letter-spacing:.04em;
  font-weight:600; cursor:pointer; border-radius:5px; transition:transform .1s ease, background .2s ease;
}
.hm-reveal-btn:hover{transform:translateX(2px)}
.hm-dots{display:flex; gap:.45rem}
.hm-dot{width:.5rem; height:.5rem; border-radius:50%; background:var(--line-warm, #d8cfc0); cursor:pointer; transition:background .2s ease, transform .15s ease}
.hm-dot:hover{transform:scale(1.3)}
.hm-dot.active{background:var(--accent-teal, #5C7D73)}
.hm-caption{margin-top:.9rem; font-size:.72rem; color:var(--muted, #8a7f6f); font-style:italic; line-height:1.5}
@media (max-width:600px){
  .hm-header-row,.hm-row{grid-template-columns:1.8rem repeat(4,1fr); gap:2px}
  .hm-header-cell{font-size:.54rem}
  .hm-cell{min-height:1.9rem}
  .hm-score{font-size:.6rem}
  .hm-control-row{flex-direction:column; align-items:flex-start; gap:.8rem}
}