/* Shared stage-by-stage scrub viewer (console and public demo).
   Markup comes from tools/scrub_view_assets.py; this file and
   js/scrub_view.js are its styles and behaviour. */
  /* ---- Scrub Test: stage-by-stage viewer ----
     Tokens live on :root, not a wrapper class -- the peek popover (#peek)
     is appended as a page-level sibling, not nested inside any one
     component, and a custom property is invisible to var() outside the
     element that declares it. */
  :root {
    /* Every alias points at a theme-aware role token from tokens.css, so
       the viewer follows light/dark with no per-surface block. --ink-fill
       is --redact, which flips so the redaction bar always contrasts with
       the page; text on it is --redact-text. */
    --paper-card: var(--surface); --paper-card-2: var(--surface-2); --ink: var(--fg); --ink-soft: var(--fg-muted);
    --ink-faint: var(--fg-faint); --border: var(--line); --sv-accent: var(--accent-text); --sv-accent-bright: var(--sv-accent);
    --preserved: var(--pass); --preserved-bg: var(--pass-wash);
    --ink-fill: var(--redact); --ink-fill-text: var(--redact-text);
    --routing-good-bg: var(--pass-wash); --routing-good-fg: var(--pass);
    --routing-bad-bg: var(--flag-wash); --routing-bad-fg: var(--flag);
    --font-display: var(--display);
    --font-mono: var(--mono);
  }
  .icon-btn { font-size: 13px; background: var(--paper-card-2); border: 1px solid var(--border); color: var(--ink); border-radius: var(--r-lg); padding: var(--s2) var(--s3); cursor: pointer; }
  .icon-btn.primary { background: var(--sv-accent-bright); color: var(--accent-ink); border-color: var(--sv-accent-bright); }
  .icon-btn:disabled { opacity: .4; cursor: default; }
  .stepper-row { display: flex; align-items: center; gap: var(--s4); background: var(--paper-card); border: 1px solid var(--border); border-radius: var(--r-xl); padding: var(--s3) var(--s4); margin: var(--s4) 0 var(--s1); }
  .stepper { position: relative; display: flex; flex: 1; justify-content: space-between; min-width: 240px; }
  .stepper-track { position: absolute; top: 13px; left: 13px; right: 13px; height: 2px; background: var(--border); }
  .stepper-fill { position: absolute; top: 13px; left: 13px; height: 2px; background: var(--sv-accent-bright); width: 0%; transition: width .4s ease; }
  .stage-node-wrap { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: var(--s2); background: transparent; border: none; cursor: pointer; padding: 0; font-family: inherit; }
  .stage-dot { width: 24px; height: 24px; border-radius: 50%; background: var(--paper-card); border: 2px solid var(--border); color: var(--ink-faint); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; transition: background .3s ease, border-color .3s ease, color .3s ease; }
  .stage-node-wrap.done .stage-dot { background: var(--sv-accent-bright); border-color: var(--sv-accent-bright); color: var(--accent-ink); }
  .stage-node-wrap.current .stage-dot { background: var(--ink); border-color: var(--ink); color: var(--paper-card); box-shadow: 0 0 0 4px var(--paper-card-2); }
  .stage-label { font-size: 11px; color: var(--ink-soft); text-align: center; max-width: 92px; line-height: 1.2; }
  .stage-node-wrap.current .stage-label { color: var(--ink); font-weight: 600; }
  .stepper-controls { display: flex; gap: var(--s2); flex-shrink: 0; }
  .stage-caption { font-size: 13px; color: var(--ink-soft); margin: var(--s2) 0 var(--s4); }
  .workspace { display: grid; grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr); gap: var(--s4); align-items: start; }
  @media (max-width: 860px) { .workspace { grid-template-columns: 1fr; } }
  .doc-card { background: var(--paper-card); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; margin-bottom: var(--s4); }
  .doc-card-head { padding: var(--s3) var(--s4); border-bottom: 1px solid var(--border); font-family: var(--font-display); font-weight: 600; font-size: 13px; color: var(--ink); }
  .doc-body { padding: var(--s4); font-family: var(--font-mono); font-size: 13px; line-height: 2; white-space: pre-wrap; word-break: break-word; }
  .tok-redact { background: var(--ink-fill); color: var(--ink-fill-text); border-radius: var(--s1); padding: 1px var(--s2); cursor: pointer; font-weight: 600; }
  .tok-preserve { background: var(--preserved-bg); color: var(--preserved); border-bottom: 2px solid var(--preserved); border-radius: 2px 2px 0 0; padding: 1px 3px; cursor: pointer; font-weight: 600; }
  /* Synthetic replacement text -- deliberately NOT an ink bar. The whole
     point of substituting a fake name/email/org instead of redacting to
     [Person 1] is that the trace still reads like prose; a solid block
     here would erase that. A dotted underline in the accent colour plus a
     faint wash is enough to mark it as "swapped" without visually
     re-introducing the redaction bar this is meant to replace. */
  .tok-synthetic {
    background: var(--accent-wash); color: var(--ink); border-bottom: 2px dotted var(--sv-accent);
    border-radius: 2px 2px 0 0; padding: 1px 3px; cursor: pointer; font-style: italic;
  }
  .stats-rail { display: flex; flex-direction: column; gap: var(--s3); }
  .stat-block { background: var(--paper-card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s4); }
  .stat-title { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); margin: 0 0 var(--s2); }
  .gauge-wrap { display: flex; flex-direction: column; align-items: center; gap: 2px; }
  .gauge-value { font-family: var(--font-mono); font-size: 30px; font-weight: 500; margin-top: -32px; color: var(--ink); }
  .gauge-note { font-size: 10.5px; color: var(--ink-faint); }
  .counts-list { display: flex; flex-direction: column; gap: var(--s2); }
  .count-row { display: flex; align-items: center; justify-content: space-between; font-size: 13px; }
  .count-key { display: flex; align-items: center; gap: var(--s2); color: var(--ink-soft); }
  .count-swatch { width: 10px; height: 10px; border-radius: 2px; }
  .count-val { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink); }
  .routing-badge { display: inline-block; font-size: 12px; font-weight: 700; padding: var(--s1) var(--s3); border-radius: var(--r-pill); margin-bottom: var(--s2); }
  .routing-badge.good { background: var(--routing-good-bg); color: var(--routing-good-fg); }
  .routing-badge.bad { background: var(--routing-bad-bg); color: var(--routing-bad-fg); }
  .routing-badge.pending { background: var(--paper-card-2); color: var(--ink-faint); }
  .reason-list { margin: 0; padding-left: var(--s4); font-size: 12px; color: var(--ink-soft); display: flex; flex-direction: column; gap: var(--s1); }
  .legend-row { display: flex; align-items: center; gap: var(--s2); font-size: 12px; color: var(--ink-soft); margin-bottom: var(--s2); }
  .legend-row:last-child { margin-bottom: 0; }
  .legend-chip { width: 26px; height: 11px; border-radius: 3px; flex-shrink: 0; }
  .legend-chip.redact { background: var(--ink-fill); }
  .legend-chip.synthetic { background: var(--accent-wash); border-bottom: 2px dotted var(--sv-accent); }
  .legend-chip.preserve { background: var(--preserved-bg); border-bottom: 2px solid var(--preserved); }
  .legend-chip.flag { background: transparent; border-bottom: 2px dotted var(--flag); }
  .peek { position: absolute; z-index: 20; max-width: 300px; background: var(--paper-card); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--r-lg); padding: var(--s3); font-size: 12px; box-shadow: var(--shadow-pop); line-height: 1.5; }
  .peek[hidden] { display: none; }
  .peek-cat { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; margin-bottom: var(--s1); color: var(--sv-accent); }
  .peek-row { margin-bottom: var(--s1); opacity: .92; }
  .peek-row.small { opacity: .7; font-size: 11px; }
  .peek code { background: var(--paper-card-2); padding: 1px var(--s1); border-radius: var(--s1); font-family: var(--font-mono); }
  .peek-reveal { margin-top: var(--s2); background: var(--paper-card-2); border: 1px solid var(--border); color: var(--ink); font-size: 11px; padding: var(--s1) var(--s2); border-radius: var(--r); cursor: pointer; }
  .peek-reveal:hover { border-color: var(--ink-faint); }
  .peek-original { margin-top: var(--s2); padding-top: var(--s2); border-top: 1px solid var(--border); font-family: var(--font-mono); font-size: 12px; word-break: break-word; }