/* ============================================================
   Chunking Viz v2 — rebuild #2
   - No outer frame; sits directly on page
   - No box-on-box: tracks get their weight from content, not borders
   - Green reserved for SVG / line elements only
   - Answer cards are both legible: muted off-white + ink
   ============================================================ */

.cviz-section {
  background: var(--bg);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

/* Section header: matches .how-header rhythm */
.cviz-header {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 64px;
  align-items: start;
  margin-bottom: 72px;
}
@media (max-width: 860px) {
  .cviz-header { grid-template-columns: 1fr; gap: 20px; margin-bottom: 48px; }
}
.cviz-header h2 {
  font-size: clamp(30px, 3.6vw, 44px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  font-weight: 500;
  margin: 0;
  color: var(--ink);
  text-wrap: pretty;
}
.cviz-header h2 em {
  font-style: italic;
  color: var(--bronze-2);
  font-weight: 500;
}
.cviz-header .body {
  max-width: 58ch;
}
.cviz-header .body p {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 24px 0 0;
}
.cviz-header .body p + p { margin-top: 16px; }
.cviz-header .body em {
  font-style: normal;
  color: var(--bronze-2);
  border-bottom: 1px dashed color-mix(in oklab, var(--bronze-2) 50%, transparent);
}

/* ─── The viz itself ─ NO outer frame ───────────────────── */
.cviz-v2 {
  /* Semantic colours — only used for line/SVG elements now.
     Bulk UI stays in the bronze/ink palette. */
  --cv-good:  #2f7d5f;   /* green — the signal colour (clue + truth) */
  --cv-cool:  #2f7d5f;   /* alias to --cv-good so clue reads as signal too */
  --cv-miss:  #b8860b;   /* noise line only (muted near-miss) */
  --cv-bad:   #c23d2a;   /* RAG failure — × arrows, MISSED badge, chunk highlight */
}

/* A rail is one horizontal story */
.cv-rail {
  position: relative;
}
.cv-rail + .cv-rail { margin-top: 56px; }

.cv-rail-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 16px;
}
.cv-rail-head .cv-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink);
}
.cv-rail-head .cv-sub {
  font-size: 13px;
  color: var(--ink-3);
}
.cv-rail-head .cv-sub b { color: var(--ink); font-weight: 500; }

@media (max-width: 720px) {
  .cv-rail-head { flex-direction: column; gap: 4px; }
}

/* ─── RAG track ─ no border, only bottom hairline ───────── */
.cv-track-rag {
  position: relative;
  height: 56px;
  background: transparent;
  overflow: visible;
}
.cv-chunk {
  position: absolute;
  top: 0; bottom: 0;
  border-right: 1px dotted color-mix(in oklab, var(--ink-4) 45%, transparent);
}
.cv-chunk:last-child { border-right: none; }
/* Retrieved state: ONLY the background shades red — borders stay identical,
   no layout change, no additional strokes. */
.cv-chunk.retrieved {
  background: color-mix(in oklab, var(--bg) calc(100% * var(--r, 1)), transparent);
  transition: background 160ms ease-out;
}


/* "retrieved" annotation — chip label centered in the rail.
   Wrapper fills the rail vertically; flexbox centers the label. */
.cv-retrieved-note {
  position: absolute;
  top: 0;
  bottom: 0;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 2;
  transition: opacity 0.3s ease;
}
.cv-retrieved-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cv-bad);
  white-space: nowrap;
  padding: 0 2px;
  line-height: 1.2;
  font-weight: 500;
}

/* MISSED callout — chip label centered in the rail. */
.cv-missed {
  position: absolute;
  top: 0;
  bottom: 0;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: opacity 0.4s ease;
  z-index: 3;
}
.cv-missed-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--cv-bad);
  border: 1px solid var(--cv-bad);
  padding: 3px 8px;
  font-weight: 500;
  white-space: nowrap;
}

/* ─── Document track ─ same 56px height as RAG and agent ──── */
.cv-track-doc {
  position: relative;
  height: 56px;
  background: transparent;
  border-bottom: 1px solid color-mix(in oklab, var(--rule) 60%, transparent);
  overflow: hidden;
}
/* Text-line elements — muted gray so coloured signals pop */
.cv-line {
  position: absolute;
  bottom: 6px;
  width: 2px;
  background: color-mix(in oklab, var(--ink-4) 35%, transparent);
  border-radius: 1px;
  transform: translateX(-1px);
}
.cv-line.k-empty { background: color-mix(in oklab, var(--ink-4) 30%, transparent); }
.cv-line.k-clue  { background: var(--cv-cool); opacity: 1; width: 3px; }
.cv-line.k-noise { background: var(--cv-miss); opacity: 1; width: 3px; }
.cv-line.k-truth { background: var(--cv-good); opacity: 1; width: 3px; }

.cv-reading-head {
  position: absolute;
  top: -6px; bottom: -6px;
  width: 2px;
  background: var(--bronze-2);
  box-shadow: 0 0 10px color-mix(in oklab, var(--bronze-2) 60%, transparent);
  transform: translateX(-1px);
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 4;
}

/* ─── Agent track ─ frameless, readbar is its signal ── */
.cv-track-agent {
  position: relative;
  height: 56px;
  background: transparent;
  overflow: hidden;
}
/* Sand Engine readbar — a uniform off-white sweep, identical in
   tone to the RAG retrieved chunks. Lighter color = "read". */
.cv-readbar {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: var(--bg);
  pointer-events: none;
  z-index: 1;
}

/* Attention markers — chip label centered in the rail. */
.cv-attention {
  position: absolute;
  top: 0;
  bottom: 0;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 80ms linear;
  pointer-events: none;
  z-index: 2;
}

/* Chip style — solid fill (MISSED vocabulary) for clue + truth;
   near-miss chips recede to plain text. */
.cv-attention .cv-note {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 3px 8px;
  color: var(--bg);
  background: var(--ink-3);
  /* Transparent border matches the MISSED chip so their visual
     sizes line up. */
  border: 1px solid transparent;
  font-weight: 500;
  line-height: 1.2;
  transition: background 80ms linear, color 80ms linear;
}
.cv-attention.k-clue  .cv-note { background: var(--cv-cool); border-color: var(--cv-cool); }
.cv-attention.k-truth .cv-note { background: var(--cv-good); border-color: var(--cv-good); }

/* Near-miss chips recede into plain colored text so the real signals
   — clue (blue) and truth (green) — read as the hierarchy. */
.cv-attention.k-noise .cv-note {
  background: transparent;
  border-color: transparent;
  color: var(--cv-miss);
  font-weight: 400;
  padding: 3px 4px;
}

/* Reasoning arc — pure SVG, full green */
.cv-arc {
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  overflow: visible;
  z-index: 3;
}

/* ─── Conclusion · asymmetric answers ────────────────────────
   Only the Sand Engine answer is framed. RAG's answer sits flat
   on the page as "the ambient default that gets things wrong",
   so the eye lands on the box that matters. */
.cv-conclude {
  margin-top: 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}
@media (max-width: 820px) {
  .cv-conclude { grid-template-columns: 1fr; gap: 28px; }
}

/* RAG answer — flat, typographic; aligned to the Sand Engine card
   via matching top padding and a 2px top border (the same visual
   cue the card uses, just without a surround) */
.cv-answer.bad {
  padding: 26px 0 0;
  background: transparent;
  border: none;
  border-top: 2px solid var(--cv-bad);
  position: relative;
}
.cv-answer.bad .cv-answer-tag {
  color: var(--cv-bad);
  margin-bottom: 12px;
}
.cv-answer.bad .cv-answer-body {
  color: var(--ink-2);
}

/* Sand Engine answer — the framed one; this is what should be read */
.cv-answer.good {
  padding: 26px 28px 24px;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--cv-good);
  position: relative;
}
.cv-answer.good .cv-answer-tag {
  color: var(--cv-good);
  margin-bottom: 12px;
}
.cv-answer.good .cv-answer-body { color: var(--ink); }

/* Shared typography */
.cv-answer-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.cv-answer-body {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
}
.cv-answer b { font-weight: 500; color: var(--ink); }
.cv-answer.good b { color: var(--cv-good); }
.cv-answer .cv-wrong { color: var(--cv-bad); }
.cv-answer .cv-right { color: var(--ink-4); }

.cv-answer-note {
  margin-top: 14px;
  font-size: 12px;
  color: var(--ink-4);
  font-family: var(--font-sans);
  line-height: 1.5;
}

/* Legend — sits between the rails and the conclusion as a quiet
   divider strip. Thin hairlines top + bottom turn it into a
   section break rather than a footer. */
.cv-legend {
  margin: 36px 0 0;
  padding: 14px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 28px;
  border-top: 1px solid color-mix(in oklab, var(--rule) 70%, transparent);
  border-bottom: 1px solid color-mix(in oklab, var(--rule) 70%, transparent);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.cv-legend + .cv-conclude { margin-top: 36px; }
.cv-legend-item { display: inline-flex; align-items: center; gap: 8px; }
.cv-legend-swatch {
  width: 10px; height: 10px;
  display: inline-block;
}
.cv-legend-swatch.clue  { background: var(--cv-cool); }
.cv-legend-swatch.noise { background: var(--cv-miss); }
.cv-legend-swatch.truth { background: var(--cv-good); }
.cv-legend-swatch.bad   { background: var(--cv-bad); }