/* =============================================================
   PluRel interactive-widget styles — design tokens (from the
   original distill.css) with fonts remapped to the Tabular site,
   followed by the verbatim widget styling.
   ============================================================= */
:root {
  --d-text: rgba(22, 22, 26, 0.86);
  --d-text-strong: #16161a;
  --d-muted: #6b6b76;
  --d-faint: #9a9aa4;
  --d-bg: #ffffff;
  --d-bg-alt: #faf9f6;
  --d-rule: #eeece7;
  --d-rule-strong: #e0ddd6;
  --d-link: #8c1515;
  --d-link-hover: #6f0f0f;

  /* restrained palette: one Cardinal accent + warm greys, so the diagrams match
     the rest of the site. entity/source = cardinal; activity/categorical/latent =
     greys of decreasing weight; numeric = ink. */
  --tok-input: #8c1515;  --tok-input-fill: #a83232;  --tok-input-soft: #f6e9e9;  --tok-input-line: #e7cccc;
  --tok-reason: #6f6b73; --tok-reason-fill: #a6a1a9; --tok-reason-soft: #f1f0ee; --tok-reason-line: #ddd9d3;
  --tok-output: #5f5b63; --tok-output-fill: #8d8891; --tok-output-soft: #f0efed; --tok-output-line: #d9d6d0;
  --tok-exo: #8c1515;    --tok-exo-fill: #a83232;    --tok-exo-soft: #f6e9e9;    --tok-exo-line: #e7cccc;
  --d-graph-edge: #ccc6bd;
  --d-graph-hl: #8c1515;
  --d-ink-node: #4a4751;

  --d-serif: "Newsreader", Georgia, serif;
  --d-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --d-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
/* ============================================================================
   PluRel interactive widgets - Distill-flavoured styling.
   Uses the shared design tokens from distill.css (--tok-*, --d-*).
   ========================================================================== */

/* ---------- widget shell ---------- */
.pv-widget {
  border-top: 3px solid var(--pv-accent, #8c1515);
  background: transparent;
  padding: 1rem 0 1.2rem;
  font-family: var(--d-sans);
  color: var(--d-text);
  margin: 1.4rem 0 0.5rem;
}
.pv-stage1 { --pv-accent: #8c1515; }
.pv-stage2 { --pv-accent: #8c1515; }
.pv-stage4 { --pv-accent: #8c1515; }

.pv-head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.85rem; }
.pv-badge {
  font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em;
  padding: 0.2rem 0.6rem; border-radius: 999px; white-space: nowrap;
  background: color-mix(in srgb, var(--pv-accent) 11%, #fff);
  color: var(--pv-accent);
  border: 1px solid color-mix(in srgb, var(--pv-accent) 28%, #fff);
}
.pv-title { font-weight: 600; font-size: 0.95rem; color: var(--d-text-strong); }

/* ---------- controls ---------- */
.pv-controls { display: flex; flex-wrap: wrap; gap: 0.85rem 1.3rem; align-items: flex-end; margin-bottom: 0.95rem; }
.pv-control { display: flex; flex-direction: column; gap: 0.3rem; }
.pv-control > label {
  font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--d-muted); font-weight: 600;
}
.pv-control .pv-val { color: var(--pv-accent); font-variant-numeric: tabular-nums; }
.pv-spacer { margin-left: auto; }

/* compact grouped control panel (Stage 3) */
.pv-knobbox { border: 1px solid var(--d-rule); border-radius: 8px; background: var(--d-bg-alt); padding: 0.55rem 0.7rem; margin-bottom: 0.7rem; }
.pv-controls-compact { gap: 0.3rem 0.6rem; margin-bottom: 0; align-items: flex-end; }
.pv-controls-compact .pv-control { gap: 0.18rem; }
.pv-controls-compact .pv-control > label { font-size: 0.58rem; letter-spacing: 0.02em; white-space: nowrap; }
.pv-controls-compact input[type="range"].pv-range { width: 72px; margin: 3px 0; }
.pv-controls-compact .pv-seg button { padding: 0.26rem 0.46rem; font-size: 0.71rem; }
.pv-controls-compact .pv-btn { padding: 0.32rem 0.58rem; font-size: 0.73rem; }

input[type="range"].pv-range {
  -webkit-appearance: none; appearance: none;
  width: 150px; height: 4px; border-radius: 4px; background: var(--d-rule-strong); outline: none; margin: 6px 0;
}
input[type="range"].pv-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 15px; height: 15px; border-radius: 50%;
  background: var(--pv-accent, #8c1515); cursor: pointer; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
input[type="range"].pv-range::-moz-range-thumb {
  width: 15px; height: 15px; border-radius: 50%; background: var(--pv-accent, #8c1515); cursor: pointer; border: 2px solid #fff;
}

.pv-seg { display: inline-flex; border: 1px solid var(--d-rule-strong); border-radius: 7px; overflow: hidden; }
.pv-seg button {
  border: none; background: #fff; padding: 0.36rem 0.6rem; font-family: var(--d-sans); font-size: 0.76rem;
  cursor: pointer; color: var(--d-muted); border-right: 1px solid var(--d-rule); font-variant-numeric: tabular-nums; transition: background 0.12s, color 0.12s;
}
.pv-seg button:last-child { border-right: none; }
.pv-seg button:hover { background: var(--d-bg-alt); }
.pv-seg button.active { background: var(--pv-accent, #8c1515); color: #fff; }

.pv-btn {
  font-family: var(--d-sans); font-size: 0.78rem; font-weight: 600;
  border: 1px solid var(--d-rule-strong); background: #fff; color: var(--d-text);
  border-radius: 7px; padding: 0.4rem 0.8rem; cursor: pointer; transition: background 0.12s, border-color 0.12s;
}
.pv-btn:hover { background: var(--d-bg-alt); border-color: var(--d-faint); }
.pv-btn-accent { background: var(--pv-accent, #8c1515); color: #fff; border-color: transparent; }
.pv-btn-accent:hover { filter: brightness(1.08); background: var(--pv-accent, #8c1515); }
.pv-btn[disabled] { opacity: 0.45; cursor: default; }
.pv-runbar { display: flex; gap: 10px; justify-content: flex-end; margin: 10px 0 0; }
@media (max-width: 768px){ .pv-runbar { justify-content: flex-start; } }

/* keyboard focus (WCAG 2.4.7) */
.pv-seg button:focus-visible, .pv-btn:focus-visible, input[type="range"].pv-range:focus-visible,
.pv-node:focus-visible, .pv-scm-node:focus-visible, .pv-rowcell:focus-visible {
  outline: 2px solid var(--pv-accent, #8c1515); outline-offset: 2px;
}
.pv-node, .pv-scm-node, .pv-rowcell { cursor: pointer; }

/* ---------- canvases + layout ---------- */
.pv-svg { width: 100%; height: auto; display: block; background: var(--d-bg-alt); border-radius: 8px; }
.pv-split { display: grid; grid-template-columns: 1.55fr 1fr; gap: 1.1rem; align-items: start; }
.pv-split-even { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; align-items: start; }
@media (max-width: 768px) { .pv-split, .pv-split-even { grid-template-columns: 1fr; } }

.pv-note { font-size: 0.78rem; line-height: 1.5; color: var(--d-muted); margin: 0.75rem 0 0; }
.pv-note, .pv-readout, .pv-mech { text-wrap: pretty; }
.pv-note code, .pv-mech code { font-family: var(--d-mono); font-size: 0.85em; background: var(--d-bg-alt); border: 1px solid var(--d-rule); border-radius: 4px; padding: 0.04em 0.32em; }
.pv-tag { font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; color: var(--d-muted); margin-bottom: 0.4rem; }

.pv-readout {
  font-size: 0.82rem; line-height: 1.5; color: var(--d-text);
  background: var(--d-bg-alt); border: 1px solid var(--d-rule); border-left: 3px solid var(--pv-accent, #8c1515);
  border-radius: 6px; padding: 0.55rem 0.75rem; margin-top: 0.7rem; min-height: 1.2rem;
}
.pv-readout b { color: var(--d-text-strong); }
.pv-pill { font-size: 0.58rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #fff; padding: 0.12rem 0.45rem; border-radius: 999px; vertical-align: middle; margin-right: 0.4rem; }
.pv-pill.entity { background: var(--tok-input); }
.pv-pill.activity { background: var(--tok-output); }

.pv-legend { display: flex; gap: 0.55rem 0.7rem; flex-wrap: wrap; font-size: 0.68rem; color: var(--d-muted); margin: 0.55rem 0 0.2rem; }
.pv-legend span { display: inline-flex; align-items: center; gap: 0.35rem; }
.pv-sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.pv-sw.round { border-radius: 50%; }
.pv-sw.entity { background: var(--tok-input-fill); }
.pv-sw.activity { background: var(--tok-output-fill); }
.pv-sw.numeric { background: var(--d-ink-node); }
.pv-sw.categorical { background: var(--tok-reason-fill); }
.pv-sw.line { width: 16px; height: 0; border-top: 2px solid var(--d-graph-edge); border-radius: 0; }

/* ---------- Stage 1: schema DAG ---------- */
.pv-node rect { stroke: #fff; stroke-width: 2; transition: filter 0.12s, opacity 0.15s; }
.pv-node text { font-family: var(--d-sans); font-weight: 600; fill: #fff; pointer-events: none; }
.pv-node.entity rect { fill: var(--tok-input-fill); }
.pv-node.activity rect { fill: var(--tok-output-fill); }
.pv-node.dim { opacity: 0.24; }
.pv-node.sel rect { stroke: var(--d-graph-hl); stroke-width: 3; }
.pv-node.parent rect { stroke: var(--d-graph-hl); stroke-width: 3; stroke-dasharray: 4 2.5; }
.pv-edge { stroke: var(--d-graph-edge); stroke-width: 1.9; stroke-linecap: round; fill: none; marker-end: url(#pv-arrow); transition: stroke 0.12s, stroke-width 0.12s, opacity 0.15s; }
.pv-edge.hl { stroke: var(--d-graph-hl); stroke-width: 2.6; }
.pv-edge.dim { opacity: 0.14; }
.pv-genlabel { font-family: var(--d-sans); font-size: 10px; fill: var(--d-faint); text-transform: uppercase; letter-spacing: 0.04em; }

.pv-card { border: 1px solid var(--d-rule); border-radius: 8px; overflow: hidden; font-size: 0.8rem; }
.pv-card-hd { padding: 0.45rem 0.7rem; font-weight: 700; color: #fff; display: flex; justify-content: space-between; align-items: center; }
.pv-card-hd.entity { background: var(--tok-input); }
.pv-card-hd.activity { background: var(--tok-output); }
.pv-card-hd .pv-rows { font-size: 0.66rem; font-weight: 600; opacity: 0.92; }
.pv-card-body { padding: 0.55rem 0.7rem; }
.pv-coltable { width: 100%; border-collapse: collapse; font-size: 0.74rem; }
.pv-coltable td { padding: 0.18rem 0.3rem; border-bottom: 1px solid #f0f2f5; vertical-align: middle; }
.pv-coltable tr:last-child td { border-bottom: none; }
.pv-colname { font-family: var(--d-mono); color: var(--d-text-strong); }
.pv-keytag { font-size: 0.58rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.05rem 0.35rem; border-radius: 4px; }
.pv-keytag.pk { background: #efece6; color: var(--d-text-strong); border: 1px solid #ddd9d0; }
.pv-keytag.fk { background: var(--tok-exo-soft); color: var(--tok-exo); border: 1px solid var(--tok-exo-line); }
.pv-keytag.num { background: #efeef0; color: var(--d-ink-node); border: 1px solid #ddd9d3; }
.pv-keytag.cat { background: var(--tok-reason-soft); color: var(--tok-reason); border: 1px solid var(--tok-reason-line); }
.pv-card-empty { color: var(--d-faint); font-size: 0.78rem; padding: 0.9rem 0.5rem 0.2rem; text-align: center; }
/* schema summary - uniform aligned stat list */
.pv-summary { display: flex; flex-direction: column; gap: 0.55rem; margin: 0.15rem 0 0; }
.pv-srow { display: flex; align-items: baseline; gap: 0.6rem; }
.pv-snum { font-size: 1.2rem; font-weight: 700; color: var(--pv-accent); font-variant-numeric: tabular-nums; min-width: 1.7rem; text-align: right; line-height: 1; }
.pv-slbl { font-size: 0.68rem; color: var(--d-muted); text-transform: uppercase; letter-spacing: 0.03em; display: inline-flex; align-items: center; gap: 0.32rem; }
.pv-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.pv-dot.entity { background: var(--tok-input-fill); }
.pv-dot.activity { background: var(--tok-output-fill); }

/* ---------- Stage 2: bipartite HSBM ---------- */
.pv-bip-split { display: grid; grid-template-columns: 4.2fr 1fr; gap: 0.9rem; align-items: stretch; }
@media (max-width: 720px) { .pv-bip-split { grid-template-columns: 1fr; } .pv-bip-side { flex-direction: row; flex-wrap: wrap; } }
.pv-bip-side { display: flex; flex-direction: column; justify-content: space-around; gap: 0.4rem; padding: 0.15rem 0; }
.pv-bip-side .pv-stat { gap: 0.12rem; }
.pv-bip-side .pv-stat-num { font-size: 1.45rem; }
.pv-bip-side .pv-stat-lbl { font-size: 0.6rem; }
.pv-bip-svg { width: 100%; height: auto; display: block; background: transparent; border: 1px solid var(--d-rule); border-radius: 8px; }
/* light lines (stroke-opacity) but full-opacity arrowheads (marker fill) so the
   direction reads clearly even in a dense bundle */
.pv-bip-edge { stroke-width: 1.3; fill: none; stroke-opacity: 0.45; marker-end: url(#pv-bip-arrow); transition: opacity 0.15s, stroke-width 0.15s, stroke-opacity 0.15s; }
.pv-bip-edge.dim { opacity: 0.08; }
.pv-bip-edge.hl { stroke-opacity: 1; stroke-width: 2.6; }
.pv-rowcell { stroke: #fff; stroke-width: 1.2; transition: opacity 0.15s; }
.pv-rowcell.dim { opacity: 0.2; }
.pv-rowlabel { font-family: var(--d-sans); font-size: 10px; }
.pv-stat-grid { display: flex; gap: 1.4rem; flex-wrap: wrap; margin-top: 0.7rem; }
.pv-stat { display: flex; flex-direction: column; gap: 0.1rem; }
.pv-stat .pv-stat-num { font-size: 1.35rem; font-weight: 700; color: var(--d-graph-hl); font-variant-numeric: tabular-nums; line-height: 1; }
.pv-stat .pv-stat-lbl { font-size: 0.66rem; color: var(--d-muted); text-transform: uppercase; letter-spacing: 0.03em; }

/* ---------- Stage 3: temporal composer + SCM ---------- */
.pv-ts-svg { width: 100%; height: auto; display: block; background: transparent; border: 1px solid var(--d-rule); border-radius: 8px; }
.pv-ts-axis path, .pv-ts-axis line { stroke: var(--d-rule-strong); }
.pv-ts-axis text { font-family: var(--d-sans); font-size: 9px; fill: var(--d-muted); }
.pv-ts-grid line { stroke: #f0f1f4; }
/* components: dashed + light; the composed signal: solid + bold */
.pv-ts-comp { fill: none; stroke-width: 1.3; opacity: 0.6; stroke-dasharray: 4 3; }
.pv-ts-trend { stroke: #57555c; }
.pv-ts-cycle { stroke: #938f98; }
.pv-ts-noise { stroke: #c4bfb8; }
.pv-ts-sum { fill: none; stroke: #8c1515; stroke-width: 2.8; }
.pv-ts-legend { display: flex; gap: 0.6rem 0.7rem; flex-wrap: wrap; font-size: 0.67rem; color: var(--d-muted); margin-top: 0.45rem; align-items: center; }
.pv-ts-legend .dash { display: inline-block; width: 16px; border-top: 2px dashed currentColor; vertical-align: middle; margin-right: 4px; }
.pv-ts-legend .solid { display: inline-block; width: 16px; border-top: 3px solid currentColor; vertical-align: middle; margin-right: 4px; }
.pv-ts-legend .k-trend { color: #57555c; }
.pv-ts-legend .k-cycle { color: #938f98; }
.pv-ts-legend .k-noise { color: #c4bfb8; }
.pv-ts-legend .k-sum { color: #8c1515; font-weight: 700; }

.pv-scm-svg { width: 100%; height: auto; display: block; background: var(--d-bg-alt); border-radius: 8px; }
.pv-scm-node circle { stroke: #fff; stroke-width: 2; transition: opacity 0.15s, filter 0.15s; }
.pv-scm-node.source circle { fill: var(--tok-exo-fill); }
.pv-scm-node.numeric circle { fill: var(--d-ink-node); }
.pv-scm-node.categorical circle { fill: var(--tok-reason-fill); }
.pv-scm-node.latent circle { fill: #c0bbb4; }
.pv-scm-node.col circle { stroke: #8c1515; stroke-width: 3; }
.pv-scm-node text { font-family: var(--d-mono); font-size: 9px; font-weight: 600; fill: #fff; pointer-events: none; }
.pv-scm-node.latent text { fill: #57525b; }
.pv-scm-node.dim { opacity: 0.24; }
.pv-scm-node.active circle { filter: drop-shadow(0 0 4px rgba(140, 21, 21, 0.7)); }
.pv-scm-edge { stroke: var(--d-graph-edge); stroke-width: 1.8; stroke-linecap: round; fill: none; marker-end: url(#pv-scm-arrow); transition: stroke 0.15s, stroke-width 0.15s, opacity 0.15s; }
.pv-scm-edge.hl { stroke: var(--tok-exo); stroke-width: 2.4; }
.pv-scm-edge.dim { opacity: 0.12; }
.pv-mech {
  font-size: 0.78rem; line-height: 1.55; color: var(--d-text);
  background: var(--d-bg-alt); border: 1px solid var(--d-rule); border-left: 3px solid var(--tok-exo);
  border-radius: 6px; padding: 0.6rem 0.75rem; margin-top: 0.4rem;
}
.pv-mech .pv-formula { font-family: var(--d-mono); font-size: 0.72rem; background: #fff; border: 1px solid var(--d-rule); border-radius: 5px; padding: 0.4rem 0.5rem; margin: 0.4rem 0; display: block; overflow-x: auto; white-space: nowrap; }
.pv-mech .hl-parent { color: var(--d-graph-hl); font-weight: 700; }
.pv-mech .hl-noise { color: var(--tok-reason); font-weight: 700; }
.pv-mech .hl-exo { color: var(--tok-exo); font-weight: 700; }
.pv-val-chip { font-family: var(--d-mono); font-size: 0.72rem; padding: 0.1rem 0.4rem; border-radius: 5px; background: #fff; border: 1px solid var(--d-rule-strong); }

/* ---------- Synthesis: end-to-end table fill ---------- */
.pv-syn-split { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 1.1rem; align-items: start; }
@media (max-width: 768px) { .pv-syn-split { grid-template-columns: 1fr; } }
.pv-syn-table { overflow-x: auto; }
.pv-syn-tbl { border-collapse: collapse; width: 100%; font-family: var(--d-mono); font-size: 0.75rem; }
.pv-syn-tbl thead th { font-family: var(--d-sans); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--d-muted); font-weight: 600; text-align: right; padding: 0.4rem 0.55rem; border-bottom: 1px solid var(--d-rule-strong); white-space: nowrap; line-height: 1.3; }
.pv-syn-tbl thead th:first-child { text-align: left; }
.pv-syn-tbl thead .pv-coltype { display: block; font-size: 0.92em; color: var(--d-faint); font-weight: 400; text-transform: none; letter-spacing: 0; }
.pv-syn-tbl tbody td { text-align: right; padding: 0.42rem 0.55rem; border-bottom: 1px solid var(--d-rule); color: var(--d-text-strong); font-variant-numeric: tabular-nums; opacity: 0; transition: opacity 0.3s ease; }
.pv-syn-tbl tbody td.in { opacity: 1; animation: pv-place 0.6s ease; }
.pv-syn-tbl tbody td:first-child { text-align: left; color: var(--d-muted); }
.pv-syn-tbl tbody td.cat { color: var(--d-ink-node); }
.pv-syn-tbl tbody tr:last-child td { border-bottom: none; }
@keyframes pv-place { from { background: rgba(140, 21, 21, 0.16); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .pv-syn-tbl tbody td { transition: none; } .pv-syn-tbl tbody td.in { animation: none; } }
/* synthesis SCM: source = teal, feature = cardinal, latent = grey; values flow along edges */
.pv-syn-scm .pv-scm-edge { stroke: #d6d2cb; stroke-width: 1.6; fill: none; stroke-linecap: round; marker-end: url(#pv-syn-arrow); transition: stroke 0.12s, stroke-width 0.12s; }
.pv-syn-scm .pv-scm-edge.hl { stroke: #8c1515; stroke-width: 2.6; }
.pv-syn-scm .pv-scm-node text { font-family: var(--d-mono); font-size: 9px; font-weight: 600; fill: #fff; pointer-events: none; }
.pv-syn-scm .pv-scm-node.src circle { fill: #3f7d74; stroke: #fff; stroke-width: 2; transition: filter 0.15s; }
.pv-syn-scm .pv-scm-node.feat circle { fill: #8c1515; stroke: #fff; stroke-width: 2; transition: filter 0.15s; }
.pv-syn-scm .pv-scm-node.lat circle { fill: #cfcbc4; stroke: #fff; stroke-width: 1.5; }
.pv-syn-scm .pv-scm-node.src.lit circle { filter: drop-shadow(0 0 5px rgba(63, 125, 116, 0.9)); }
.pv-syn-scm .pv-scm-node.feat.lit circle { filter: drop-shadow(0 0 5px rgba(140, 21, 21, 0.85)); }
.pv-syn-scm .pv-flow.feat { fill: #8c1515; }
.pv-syn-scm .pv-flow.src { fill: #3f7d74; }
.pv-syn-scm .pv-nodeval { font-family: var(--d-mono); font-size: 8.5px; font-weight: 600; }
.pv-syn-scm .pv-nodeval.src { fill: #3f7d74; }
.pv-syn-scm .pv-nodeval.feat { fill: #8c1515; }
.pv-syn-scm .pv-sig-line { fill: none; stroke: #bdb8b1; stroke-width: 1.6; }
.pv-syn-scm .pv-sig-base { stroke: #e6e3dd; stroke-width: 1; }
.pv-syn-scm .pv-sig-marker { stroke: #3f7d74; stroke-width: 1.3; stroke-dasharray: 3 2; }
.pv-syn-scm .pv-sig-dot { fill: #3f7d74; stroke: #fff; stroke-width: 1; }
.pv-syn-scm .pv-sig-conn { stroke: #e0ddd6; stroke-width: 1; stroke-dasharray: 2 2; }
.pv-syn-legend { display: flex; gap: 0.5rem 0.8rem; flex-wrap: wrap; font-size: 0.64rem; color: var(--d-muted); margin-top: 0.45rem; }
.pv-syn-legend span { display: inline-flex; align-items: center; gap: 0.3rem; }