/* core/theme.css · shared chart tokens and styles for window.PGR (core/render.js).
 * House style: warm paper + ink, flat (no shadows), 1px frames, dashed dividers, Geist + Geist Mono, mono for every
 * number. Chart chrome is recessive: mono 10.5px ticks, dashed hairline grid, one solid baseline.
 * Mark colours are set by render.js (validated palette, per theme); these tokens cover the chrome, the legend,
 * the tooltip, states and the table. Dark theme: html[data-theme="dark"] (the house toggle).
 * Fonts are loaded by the page (Google Fonts: Geist, Geist Mono).
 */
:root {
  --pgr-paper: #fbf8f7;
  --pgr-ink: #15120d;
  --pgr-ink2: #3c3b3b;
  --pgr-muted: #8a8783;
  --pgr-frame: #cac9c4;
  --pgr-grid: #d6d3cd;
  --pgr-base: #8a8783;
  --pgr-tint: #f3f1ed;
  --pgr-tint2: #ebe8e2;
  --pgr-yellow: #fbe566;
  --pgr-hatch: #8a8783;
  --pgr-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --pgr-mono: "Geist Mono", ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Consolas, monospace;
}
:root[data-theme="dark"] {
  --pgr-paper: #15120d;
  --pgr-ink: #fbf8f7;
  --pgr-ink2: #cac9c4;
  --pgr-muted: #8a8783;
  --pgr-frame: #3c3b3b;
  --pgr-grid: #34302a;
  --pgr-base: #8a8783;
  --pgr-tint: #1e1b17;
  --pgr-tint2: #2a2621;
  --pgr-hatch: #8a8783;
}

/* ---------- the chart box ---------- */
.pgr {
  position: relative;
  font-family: var(--pgr-sans);
  color: var(--pgr-ink);
  -webkit-font-smoothing: antialiased;
  line-height: 1.3;
}
.pgr-body { position: relative; width: 100%; height: 100%; }
.pgr-body.pgr-leaving { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 1; }
.pgr-stage { position: relative; width: 100%; }
.pgr-svg { display: block; overflow: visible; }
.pgr-canvas { position: absolute; left: 0; top: 0; pointer-events: none; }
.pgr-html { position: absolute; inset: 0; overflow: auto; }

/* ---------- chrome: ticks, grid, baseline ---------- */
.pgr text { font-family: var(--pgr-mono); font-size: 10.5px; fill: var(--pgr-muted); font-variant-numeric: tabular-nums; }
.pgr .pgr-gridline { stroke: var(--pgr-grid); stroke-width: 1; stroke-dasharray: 2 3; shape-rendering: crispEdges; }
.pgr .pgr-base { stroke: var(--pgr-base); stroke-width: 1; shape-rendering: crispEdges; }
.pgr .pgr-tick-sep { stroke: var(--pgr-frame); stroke-width: 1; shape-rendering: crispEdges; }
.pgr .pgr-tick-year { fill: var(--pgr-ink2); }
.pgr .pgr-tick-partial { fill: var(--pgr-ink2); }
.pgr .pgr-partial-note { fill: var(--pgr-muted); font-size: 9.5px; }
.pgr .pgr-rowlabel { font-family: var(--pgr-sans); font-size: 11.5px; fill: var(--pgr-ink2); font-variant-numeric: normal; }
.pgr .pgr-rowlabel.pgr-muted, .pgr .pgr-tick.pgr-muted { fill: var(--pgr-muted); font-style: italic; }
.pgr .pgr-on { fill: var(--pgr-ink) !important; font-weight: 600; }
.pgr .pgr-panel-title { font-family: var(--pgr-sans); font-size: 11px; font-weight: 600; fill: var(--pgr-ink); }
.pgr .pgr-panel-title.pgr-muted { fill: var(--pgr-muted); font-weight: 500; }
.pgr .pgr-divider { stroke: var(--pgr-frame); stroke-dasharray: 3 3; shape-rendering: crispEdges; }
.pgr .pgr-shade { fill: var(--pgr-tint); }
.pgr .pgr-shade-label { fill: var(--pgr-muted); font-size: 9.5px; }

/* ---------- labels (text never wears the data colour) ---------- */
.pgr .pgr-labels, .pgr .pgr-axes, .pgr .pgr-grid, .pgr .pgr-back { pointer-events: none; }
.pgr .pgr-label { fill: var(--pgr-ink2); }
.pgr .pgr-label.pgr-strong { fill: var(--pgr-ink); font-weight: 600; }
.pgr .pgr-label-sans { font-family: var(--pgr-sans); font-size: 11.5px; font-variant-numeric: normal; }
.pgr .pgr-label.pgr-partial { fill: var(--pgr-muted); font-size: 9.5px; }
.pgr .pgr-label.pgr-in { font-size: 10px; }
.pgr .pgr-leader { stroke: var(--pgr-frame); stroke-width: 1; }
.pgr .pgr-cross { stroke: var(--pgr-ink); stroke-width: 1; stroke-opacity: .55; shape-rendering: crispEdges; pointer-events: none; }
.pgr .pgr-ring { fill: none; stroke: var(--pgr-ink); stroke-width: 1.5; pointer-events: none; }
.pgr .pgr-hitarea { cursor: crosshair; }
.pgr .pgr-runrate { fill: none; stroke: var(--pgr-ink2); stroke-width: 1; stroke-dasharray: 3 2; }

/* ---------- marks and hover ---------- */
.pgr .pgr-mark { transition: opacity .16s ease-out; }
.pgr-full .pgr-mark[data-hit] { cursor: pointer; }
.pgr .pgr-mark:focus { outline: none; }
.pgr .pgr-mark:focus-visible { stroke: var(--pgr-ink); stroke-width: 1.5; }
.pgr .pgr-dim .pgr-mark:not(.pgr-hover) { opacity: .34; }
.pgr .pgr-mark.pgr-hover { stroke: var(--pgr-ink); stroke-width: 1.25; }
.pgr .pgr-dim .pgr-labels text:not(.pgr-keep) { opacity: .45; }
/* heat grid: row + column stay lit, the rest recede */
.pgr .pgr-hl .pgr-mark { opacity: .26; }
.pgr .pgr-hl .pgr-mark.pgr-rel { opacity: 1; }
.pgr .pgr-hl .pgr-mark.pgr-hover { opacity: 1; stroke: var(--pgr-ink); stroke-width: 1.5; }
.pgr .pgr-hl .pgr-labels text { opacity: .3; }
.pgr .pgr-hl .pgr-labels text.pgr-rel { opacity: 1; }
.pgr .pgr-empty-cell { fill: var(--pgr-tint); }
.pgr-mini .pgr-mark { transition: none; }

/* ---------- legend strip: series, ramp, hatch keys, notes ---------- */
.pgr-legend {
  display: flex; flex-wrap: wrap; align-content: flex-start; gap: 3px 14px;
  overflow: hidden; padding: 0 2px 5px; box-sizing: border-box;
  font-family: var(--pgr-mono); font-size: 10.5px; line-height: 14px; color: var(--pgr-muted);
}
.pgr-li { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.pgr-li-note { white-space: normal; color: var(--pgr-muted); }
.pgr-sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; flex: none; }
.pgr-sw-line { height: 2px; width: 14px; border-radius: 1px; }
.pgr-sw-dot { width: 8px; height: 8px; border-radius: 50%; }
.pgr-sw-partial {
  background: repeating-linear-gradient(135deg, var(--pgr-ink2) 0 1.5px, var(--pgr-tint2) 1.5px 4px);
  outline: 1px solid var(--pgr-frame); outline-offset: -1px;
}
.pgr-sw-thin { background: repeating-linear-gradient(135deg, var(--pgr-paper) 0 1.3px, var(--pgr-muted) 1.3px 4px); }
.pgr-sw-faded { background: var(--pgr-muted); opacity: .42; }
.pgr-li-ramp span { font-variant-numeric: tabular-nums; }
.pgr-ramp { display: inline-block; width: 64px; height: 8px; border-radius: 2px; }

/* ---------- tooltip: ink 1px frame on paper, mono numbers ---------- */
.pgr-tip {
  position: fixed; z-index: 1000; pointer-events: none;
  background: var(--pgr-paper); color: var(--pgr-ink);
  border: 1px solid var(--pgr-ink); border-radius: 4px;
  padding: 7px 9px; min-width: 130px; max-width: 300px;
  font-family: var(--pgr-sans); font-size: 12px; line-height: 1.35;
}
.pgr-tip[hidden] { display: none; }
.pgr-tip-t { font-weight: 600; margin-bottom: 3px; }
.pgr-tip-r { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-family: var(--pgr-mono); font-size: 11px; color: var(--pgr-ink2); }
.pgr-tip-r b { color: var(--pgr-ink); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pgr-tip-l { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.pgr-tip-k { display: inline-block; width: 8px; height: 8px; border-radius: 2px; flex: none; }
.pgr-tip-k.pgr-tip-kl { width: 12px; height: 2px; border-radius: 1px; }
.pgr-tip-n { margin-top: 4px; padding-top: 4px; border-top: 1px dashed var(--pgr-frame); font-family: var(--pgr-mono); font-size: 10.5px; color: var(--pgr-muted); }
.pgr-tip-n + .pgr-tip-n { border-top: 0; margin-top: 0; padding-top: 0; }

/* ---------- states: empty, error, not drawn yet ---------- */
.pgr-state {
  position: absolute; inset: 4px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; text-align: center; padding: 16px;
  border: 1px dashed var(--pgr-frame); border-radius: 6px; color: var(--pgr-muted);
}
.pgr-state-t { font-size: 13px; color: var(--pgr-ink2); }
.pgr-state-s { font-family: var(--pgr-mono); font-size: 11px; max-width: 46ch; }
.pgr-state-error .pgr-state-t { color: var(--pgr-ink); }
.pgr-state-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; margin-top: 4px; font-family: var(--pgr-mono); font-size: 11px; }
.pgr-chip {
  font: inherit; font-family: var(--pgr-mono); font-size: 11px; color: var(--pgr-ink);
  background: var(--pgr-paper); border: 1px solid var(--pgr-frame); border-radius: 2px; padding: 3px 7px; cursor: pointer;
}
.pgr-chip:hover { border-color: var(--pgr-ink); }
.pgr-mini .pgr-state { inset: 2px; padding: 0; border-radius: 3px; font-family: var(--pgr-mono); font-size: 11px; }
.pgr-fallback-note { font-family: var(--pgr-mono); font-size: 10.5px; color: var(--pgr-muted); padding: 2px 2px 6px; }

/* ---------- table (every chart's twin) ---------- */
.pgr-table { font-size: 12.5px; color: var(--pgr-ink); }
.pgr-table table { width: 100%; border-collapse: collapse; }
.pgr-table th {
  position: sticky; top: 0; z-index: 1; background: var(--pgr-tint);
  text-align: left; font-weight: 500; font-size: 11px; color: var(--pgr-ink2);
  padding: 6px 10px; border-bottom: 1px solid var(--pgr-frame); cursor: pointer; white-space: nowrap; user-select: none;
}
.pgr-table th:hover { color: var(--pgr-ink); }
.pgr-table td { padding: 5px 10px; border-bottom: 1px dashed var(--pgr-frame); vertical-align: baseline; }
.pgr-table .pgr-num { text-align: right; font-family: var(--pgr-mono); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pgr-table tr.pgr-muted td { color: var(--pgr-muted); }
.pgr-table tr.pgr-thin td.pgr-num { color: var(--pgr-muted); }
.pgr-table tr.pgr-row-link { cursor: pointer; }
.pgr-table tr.pgr-row-link:hover td { background: var(--pgr-tint); }
.pgr-table tr:focus-visible { outline: 1.5px solid var(--pgr-ink); outline-offset: -1.5px; }
.pgr-table-compact td { padding: 4px 8px; }
.pgr-table-compact th { padding: 5px 8px; }
.pgr-tag-partial {
  display: inline-block; margin-left: 6px; padding: 0 4px; border-radius: 2px; vertical-align: 1px;
  font-family: var(--pgr-mono); font-size: 10px; color: var(--pgr-ink2);
  background: repeating-linear-gradient(135deg, var(--pgr-tint2) 0 3px, var(--pgr-paper) 3px 6px); border: 1px solid var(--pgr-frame);
}
.pgr-tag-thin {
  display: inline-block; width: 9px; height: 9px; margin-left: 6px; border-radius: 2px; vertical-align: -1px;
  background: repeating-linear-gradient(135deg, var(--pgr-paper) 0 1.3px, var(--pgr-muted) 1.3px 4px);
}
.pgr-table-foot { padding: 7px 10px; font-family: var(--pgr-mono); font-size: 10.5px; color: var(--pgr-muted); display: flex; align-items: center; gap: 8px; }
.pgr-table-foot button { font: inherit; color: var(--pgr-ink); background: none; border: 1px solid var(--pgr-frame); border-radius: 2px; padding: 1px 6px; cursor: pointer; }

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .pgr .pgr-mark { transition: none; }
}