/* SiftingSignal viz system
   --------------------------------
   Pure SVG viz styles. Inherits BRAND_GUIDE.md tokens; never hard-codes
   palette hex except in token defs. Drop the :root token block into the
   host page (or import it from a shared sheet) — viz.css extends it.
*/

/* Viz-scoped tokens (extend root) */
:root {
  /* viz axis ink */
  --viz-axis:        var(--border-strong);
  --viz-grid:        var(--border);
  --viz-label:       var(--muted);
  --viz-label-strong:var(--ink-2);
  /* quadrant labels for Topic Landscape */
  --viz-quad:        rgba(100,116,139,.45);
  /* heatmap ramp anchors */
  --viz-cold:        var(--surface-2);
  --viz-warm:        var(--warn);
  --viz-hot:         var(--alert);
  /* sparkline base */
  --viz-spark:       var(--signal-2);
  --viz-spark-soft:  var(--signal-soft);
}

/* ===== reusable wrappers ===== */
.viz {
  display: block;
  font-family: var(--font-sans);
  color: var(--ink);
}
.viz svg { display: block; max-width: 100%; height: auto; overflow: visible; }
.viz text { font-family: var(--font-sans); fill: var(--ink); }
.viz .num, .viz .tabular { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.viz .axis-line { stroke: var(--viz-axis); stroke-width: 1; }
.viz .grid-line { stroke: var(--viz-grid); stroke-width: 1; stroke-dasharray: 2 3; }
.viz .label     { font-size: 11px; fill: var(--viz-label); font-weight: 500; }
.viz .label-strong { font-size: 11px; fill: var(--viz-label-strong); font-weight: 600; }
.viz .axis-label { font-size: 10px; fill: var(--viz-label); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.viz .tick      { font-family: var(--font-mono); font-size: 10px; fill: var(--viz-label); }
.viz .title     { font-size: 14px; font-weight: 600; fill: var(--ink); }
.viz .sub       { font-size: 12px; fill: var(--muted); }

/* ===== Topic Landscape ===== */
.viz-topic-landscape { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 18px; }
/* When mounted inside an editorial frame canvas, suppress double-card chrome */
.ed-figure-canvas .viz-topic-landscape,
.ed-figure-canvas .viz-mirror-radar,
.ed-figure-canvas .viz-tier-strip,
.ed-figure-canvas .viz-heatmap,
.ed-figure-canvas .viz-pyramid,
.ed-figure-canvas .viz-trajectory,
.ed-figure-canvas .viz-stance,
.ed-figure-canvas .viz-constellation { background: transparent; border: none; padding: 0; box-shadow: none; border-radius: 0; }
.viz-topic-landscape .header { display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:8px; }
.viz-topic-landscape h3 { font-weight: 600; font-size: 16px; letter-spacing: -0.01em; }
.viz-topic-landscape .header .sub { color: var(--muted); font-size: 12px; }
.viz-topic-landscape .filters { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.viz-topic-landscape .filter-pill {
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; font-weight:500; letter-spacing:.04em; text-transform:uppercase;
  padding:3px 9px; border-radius:999px;
  background: var(--surface-2); color: var(--ink-2);
  border: 1px solid var(--border);
  cursor: pointer; user-select: none;
  transition: border-color 150ms ease-out, background 150ms ease-out, color 150ms ease-out;
}
.viz-topic-landscape .filter-pill .swatch { width:6px; height:6px; border-radius:50%; display:inline-block; }
.viz-topic-landscape .filter-pill[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.viz-topic-landscape .filter-pill[aria-pressed="false"] { opacity: .7; }
.viz-topic-landscape .filter-pill:hover { border-color: var(--border-strong); }

.viz-topic-landscape .quad-line { stroke: var(--viz-grid); stroke-width: 1; }
.viz-topic-landscape .quad-text {
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  fill: var(--viz-quad);
}
.viz-topic-landscape .dot {
  cursor: pointer;
  transition: stroke-width 150ms ease-out, opacity 150ms ease-out;
  stroke: var(--surface);
  stroke-width: 1.25;
}
.viz-topic-landscape .dot:hover { stroke: var(--ink); stroke-width: 2; }
.viz-topic-landscape .dot[data-hidden="true"] { opacity: 0; pointer-events: none; }
.viz-topic-landscape .dot-label {
  font-size: 10.5px; font-weight: 500; fill: var(--ink); pointer-events: none;
}
.viz-topic-landscape .dot-label.muted { fill: var(--muted); }
.viz-topic-landscape .tooltip {
  position: absolute;
  pointer-events: none;
  background: var(--ink);
  color: var(--bg);
  padding: 8px 10px;
  border-radius: 4px;
  font-size: 11.5px;
  line-height: 1.4;
  box-shadow: 0 1px 2px rgba(15,23,42,.10);
  opacity: 0;
  transition: opacity 150ms ease-out;
  max-width: 240px;
  white-space: normal;
  z-index: 50;
}
.viz-topic-landscape .tooltip[data-show="true"] { opacity: 1; }
.viz-topic-landscape .tooltip .t-title { font-weight: 600; margin-bottom: 2px; }
.viz-topic-landscape .tooltip .t-meta { color: rgba(250,250,250,.65); font-family: var(--font-mono); font-size: 10.5px; }
.viz-topic-landscape .landscape-wrap { position: relative; }

/* ===== Tier Position Strip ===== */
.viz-tier-strip { display: block; width: 100%; }
.viz-tier-strip .baseline { stroke: var(--viz-grid); stroke-width: 1; }
.viz-tier-strip .range-line { stroke: var(--border-strong); stroke-width: 1.25; }
.viz-tier-strip .consensus-mark { stroke: var(--ink); stroke-width: 1.25; }
.viz-tier-strip .tier-dot { stroke: var(--surface); stroke-width: 1.25; }
.viz-tier-strip .endcap { font-size: 9.5px; fill: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }

/* ===== DI Badge (inline micro-viz) ===== */
.viz-di-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--surface-2);
  font-family: var(--font-mono); font-size: 11px; color: var(--ink);
  border: 1px solid var(--border);
  font-weight: 500;
}
.viz-di-badge[data-level="settled"]         { background: rgba(16,185,129,.08); border-color: rgba(16,185,129,.20); }
.viz-di-badge[data-level="contested"]       { background: rgba(245,158,11,.10); border-color: rgba(245,158,11,.25); }
.viz-di-badge[data-level="highly-contested"]{ background: rgba(239,68,68,.10); border-color: rgba(239,68,68,.25); }
.viz-di-badge svg { display:block; }
.viz-di-badge .di-num { font-variant-numeric: tabular-nums; font-weight: 600; }
.viz-di-badge .di-lbl { font-size: 9.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }

/* ===== Mirror Alignment Radar ===== */
.viz-mirror-radar { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 14px; }
.viz-mirror-radar .ring { fill: none; stroke: var(--viz-grid); stroke-width: 1; }
.viz-mirror-radar .ring.center { stroke-dasharray: 2 3; }
.viz-mirror-radar .axis { stroke: var(--viz-grid); stroke-width: 1; }
.viz-mirror-radar .axis-label { font-size: 10px; fill: var(--viz-label-strong); font-weight: 600; }
.viz-mirror-radar .axis-tick { font-family: var(--font-mono); font-size: 9px; fill: var(--muted); }
.viz-mirror-radar .quad { fill: var(--signal); fill-opacity: 0.18; stroke: var(--signal-2); stroke-width: 1.25; }
.viz-mirror-radar .quad-vertex { fill: var(--signal-2); stroke: var(--surface); stroke-width: 1.25; }

/* ===== Velocity Sparkline ===== */
.viz-spark { display:inline-block; vertical-align: middle; line-height: 0; }
.viz-spark .bar { transition: opacity 150ms ease-out; }
.viz-spark .label { font-size: 10px; fill: var(--muted); font-family: var(--font-mono); }

/* ===== Persona Constellation ===== */
.viz-constellation { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 14px 18px; position: relative; }
.viz-constellation h3 { font-weight: 600; font-size: 16px; letter-spacing: -0.01em; margin-bottom: 4px; }
.viz-constellation .sub { color: var(--muted); font-size: 12px; margin-bottom: 10px; }
.viz-constellation .point {
  cursor: pointer;
  transition: stroke-width 150ms ease-out;
  stroke: var(--surface);
  stroke-width: 1.25;
}
.viz-constellation .point:hover { stroke: var(--ink); stroke-width: 2; }
.viz-constellation .legend { display:flex; flex-wrap:wrap; gap:10px 14px; margin-top:10px; font-size:11px; color: var(--muted); }
.viz-constellation .legend span { display:inline-flex; align-items:center; gap:6px; }
.viz-constellation .legend .swatch { width:8px; height:8px; border-radius:50%; display:inline-block; }
.viz-constellation .tooltip {
  position:absolute; pointer-events:none; background: var(--ink); color: var(--bg);
  padding:6px 10px; border-radius: 4px; font-size: 11.5px; line-height: 1.4;
  opacity: 0; transition: opacity 150ms ease-out; z-index: 50;
}
.viz-constellation .tooltip[data-show="true"] { opacity: 1; }

/* ===== Source Tier Pyramid ===== */
.viz-pyramid { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 14px 18px; }
.viz-pyramid h3 { font-weight: 600; font-size: 14px; margin-bottom: 8px; }
.viz-pyramid .band { transition: opacity 150ms ease-out; }
.viz-pyramid .band:hover { opacity: 0.85; }
.viz-pyramid .band-label { font-size: 11px; font-weight: 600; fill: var(--surface); }
.viz-pyramid .band-count { font-family: var(--font-mono); font-size: 11px; font-weight: 500; fill: var(--ink-2); }

/* ===== Trajectory Timeline ===== */
.viz-trajectory { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 14px 18px; }
.viz-trajectory .lane-bg { fill: var(--surface-2); }
.viz-trajectory .lane-mid { stroke: var(--border); stroke-width: 1; stroke-dasharray: 2 3; }
.viz-trajectory .track { fill: none; stroke: var(--signal-2); stroke-width: 1.5; }
.viz-trajectory .track-dot { fill: var(--signal-2); }
.viz-trajectory .lane-label { font-size: 11px; fill: var(--ink-2); font-weight: 500; }
.viz-trajectory .date-tick { font-family: var(--font-mono); font-size: 9.5px; fill: var(--muted); }

/* ===== Stance Distribution ===== */
.viz-stance { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 14px 18px; }
.viz-stance .bar-platform { fill: var(--ink-2); }
.viz-stance .bar-tribe    { fill: var(--signal); }
.viz-stance .bin-label { font-size: 11px; fill: var(--ink-2); }
.viz-stance .pct       { font-family: var(--font-mono); font-size: 11px; fill: var(--ink-2); }
.viz-stance .legend    { display:flex; gap:14px; margin-top: 6px; font-size: 11px; color: var(--muted); }
.viz-stance .legend .swatch { display:inline-block; width:10px; height:10px; margin-right:6px; vertical-align:middle; }

/* ===== Disagreement Heatmap ===== */
.viz-heatmap { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 14px 18px; }
.viz-heatmap.editorial { padding: 18px 22px; }
.viz-heatmap .cell { stroke: var(--surface); stroke-width: 2; transition: stroke 150ms ease-out; }
.viz-heatmap .cell:hover { stroke: var(--ink); }
.viz-heatmap .cell-val { font-family: var(--font-mono); font-size: 10px; pointer-events: none; }
.viz-heatmap .row-label, .viz-heatmap .col-label { font-size: 10.5px; fill: var(--ink-2); font-weight: 600; }

/* ===== Editorial frame system =====
 * Wraps any viz in a published-figure typographic scaffold.
 */
.viz-figure { display: block; width: 100%; }
.ed-figure {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 28px 32px 22px;
  margin: 0;
  position: relative;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.ed-figure-head {
  margin-bottom: 18px;
  position: relative;
}
.ed-figure-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--ink);
  display: inline-block;
  margin-bottom: 14px;
}
.ed-figure-title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.18;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0 0 8px 0;
  max-width: 760px;
}
.ed-figure-subtitle {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
  max-width: 760px;
}
.ed-figure-subtitle b, .ed-figure-subtitle strong { color: var(--ink-2); font-weight: 500; }
.ed-figure-header-right {
  position: absolute;
  top: 0;
  right: 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: right;
  line-height: 1.5;
}
.ed-figure-canvas {
  position: relative;
  margin: 8px 0 4px;
}
.ed-figure-canvas svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.ed-figure-foot {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
}
.ed-figure-foot-left {
  flex: 1 1 auto;
  min-width: 0;
}
.ed-figure-source,
.ed-figure-method,
.ed-figure-signature {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.6;
}
.ed-figure-source { color: var(--ink-2); }
.ed-figure-method { margin-top: 4px; color: var(--muted); }
.ed-figure-signature { text-align: right; white-space: nowrap; }

/* ===== Editorial annotation system ===== */
.ed-annotation { pointer-events: none; }
.ed-annotation .ed-annotation-leader { stroke-linecap: round; }
.ed-annotation .ed-annotation-halo { opacity: 0.5; }
.ed-annotation .ed-annotation-badge { transition: stroke-width 150ms ease-out; }
.ed-annotation .ed-annotation-title,
.ed-annotation .ed-annotation-body {
  paint-order: stroke;
  stroke: var(--surface);
  stroke-width: 3.5;
  stroke-linejoin: round;
}

/* Topic landscape — editorial mode tweaks */
.viz-topic-landscape .quad-text {
  font-size: 9.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  fill: var(--viz-quad);
}
.viz-topic-landscape .filters.hidden { display: none; }

/* DI thermometer (replaces 5-dot DI badge in editorial contexts) */
.viz-di-thermometer {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--surface-2);
  font-family: var(--font-mono); font-size: 11px; color: var(--ink);
  border: 1px solid var(--border);
  font-weight: 500;
}
.viz-di-thermometer[data-level="settled"]         { background: rgba(16,185,129,.06); border-color: rgba(16,185,129,.20); }
.viz-di-thermometer[data-level="contested"]       { background: rgba(245,158,11,.08); border-color: rgba(245,158,11,.25); }
.viz-di-thermometer[data-level="highly-contested"]{ background: rgba(239,68,68,.08); border-color: rgba(239,68,68,.25); }
.viz-di-thermometer svg { display: block; }
.viz-di-thermometer .di-num { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); }
.viz-di-thermometer .di-lvl {
  font-size: 9.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; font-weight: 600;
}

/* Mirror radar — editorial mode */
.viz-mirror-radar.editorial {
  padding: 22px 18px 18px;
}
.viz-mirror-radar .ring.baseline {
  stroke: var(--border-strong);
  stroke-dasharray: 3 3;
  stroke-width: 1;
  fill: none;
}
.viz-mirror-radar.editorial .quad { fill: var(--signal); fill-opacity: 0.15; stroke: var(--signal-2); stroke-width: 1.5; }

/* Tier strip — editorial mode */
.viz-tier-strip.editorial {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
}