/* =============================================================
   RT-J interactive widget — random-walk context construction.
   Builds on the shared .pv-* widget vocabulary in
   plurel-widgets.css; this file adds only the pieces unique to
   the walk/collect simulator. Honors prefers-reduced-motion.
   ============================================================= */
.pv-rtj { --pv-accent: #8c1515; --rtj-cust: #a83232; --rtj-prod: #5b6b86;
  --rtj-rev: #b1aca3; --rtj-edge: #cfc9c0; --rtj-future: #d8d3cb; }

/* ---------- step rail ---------- */
.rtj-rail { display: flex; flex-wrap: wrap; gap: 6px; margin: 0.2rem 0 0.9rem; }
.rtj-step {
  display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer;
  font-family: var(--d-sans); font-size: 0.72rem; font-weight: 600; color: var(--d-muted);
  background: #fff; border: 1px solid var(--d-rule-strong); border-radius: 999px;
  padding: 0.26rem 0.66rem 0.26rem 0.32rem; transition: background .15s, color .15s, border-color .15s;
}
.rtj-step .rtj-stepn {
  display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
  background: var(--d-rule); color: var(--d-muted); font-size: 0.66rem; font-variant-numeric: tabular-nums;
  transition: background .15s, color .15s;
}
.rtj-step:hover { border-color: var(--d-faint); background: var(--d-bg-alt); }
.rtj-step.active { background: var(--pv-accent); color: #fff; border-color: transparent; }
.rtj-step.active .rtj-stepn { background: rgba(255,255,255,.24); color: #fff; }
.rtj-step.done .rtj-stepn { background: var(--pv-accent); color: #fff; }
.rtj-step:focus-visible { outline: 2px solid var(--pv-accent); outline-offset: 2px; }

/* ---------- layout ---------- */
.rtj-main { display: grid; grid-template-columns: 1.42fr 1fr; gap: 1.1rem; align-items: start; }
@media (max-width: 820px) { .rtj-main { grid-template-columns: 1fr; } }
.rtj-stage-wrap { position: relative; }
.rtj-side { display: flex; flex-direction: column; gap: 0.7rem; min-width: 0; }

.rtj-svg { width: 100%; height: auto; display: block; background: var(--d-bg-alt); border-radius: 8px; }

/* ---------- graph: nodes ---------- */
.rtj-grouplbl { font-family: var(--d-mono); font-size: 10px; fill: var(--d-faint); text-transform: uppercase; letter-spacing: 0.05em; }
.rtj-node rect { stroke: #fff; stroke-width: 2; transition: opacity .2s, filter .15s; }
.rtj-node text { font-family: var(--d-sans); font-size: 11px; font-weight: 600; fill: #fff; pointer-events: none; }
.rtj-node.cust rect { fill: var(--rtj-cust); }
.rtj-node.prod rect { fill: var(--rtj-prod); }
.rtj-node.dim { opacity: 0.2; }
.rtj-node.future rect { fill: var(--rtj-future); }
.rtj-node.future text { fill: #8d8780; }
.rtj-node.target rect { stroke: var(--pv-accent); stroke-width: 3.4; }
.rtj-node.transit rect { filter: drop-shadow(0 0 5px rgba(91,107,134,.55)); }
.rtj-node.scored rect { filter: drop-shadow(0 0 6px rgba(140,21,21,.6)); }

.rtj-rev { fill: #fff; stroke: var(--rtj-rev); stroke-width: 2.2; transition: opacity .2s, stroke .15s; }
.rtj-rev.future { opacity: 0.34; stroke-dasharray: 2.5 2.5; }
.rtj-rev.transit { stroke: var(--rtj-prod); stroke-width: 3; }
.rtj-revid { font-family: var(--d-mono); font-size: 7.5px; fill: var(--d-faint); pointer-events: none; }

.rtj-edge { stroke: var(--rtj-edge); stroke-width: 1.7; fill: none; stroke-linecap: round; transition: stroke .15s, stroke-width .15s, opacity .2s; }
.rtj-edge.future { stroke-dasharray: 4 3.5; opacity: 0.4; }
.rtj-edge.hot { stroke: var(--pv-accent); stroke-width: 2.8; opacity: 1; }
.rtj-edge.dim { opacity: 0.12; }

/* BFS edges: parent always (solid), child subsampled (kept solid / pruned dashed+x) */
.rtj-bfs { fill: none; stroke-linecap: round; }
.rtj-bfs.parent { stroke: var(--pv-accent); stroke-width: 2.6; marker-end: url(#rtj-bfs-arrow); }
.rtj-bfs.child-keep { stroke: #5b6b86; stroke-width: 2.2; marker-end: url(#rtj-bfs-arrow); }
.rtj-bfs.child-prune { stroke: #cbb0aa; stroke-width: 1.8; stroke-dasharray: 3 3; }
.rtj-prune-x { stroke: #b5503f; stroke-width: 2.6; stroke-linecap: round; }
.rtj-prune-halo { fill: #fff; stroke: #d8b3ab; stroke-width: 1.4; }

.rtj-token { fill: var(--pv-accent); stroke: #fff; stroke-width: 1.5; }
.rtj-cutoff-tag { font-family: var(--d-mono); font-size: 10px; fill: var(--d-muted); }
.rtj-cutoff-pill { fill: #fff; stroke: var(--d-rule-strong); }

/* ---------- task table ---------- */
.rtj-tt-wrap { border: 1px solid var(--d-rule); border-radius: 8px; overflow: hidden; }
.rtj-tt-hd { font-family: var(--d-mono); font-size: 0.64rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--d-muted); padding: 0.4rem 0.6rem; background: var(--d-bg-alt); border-bottom: 1px solid var(--d-rule); display: flex; justify-content: space-between; }
.rtj-tt { border-collapse: collapse; width: 100%; font-size: 0.76rem; }
.rtj-tt th { font-family: var(--d-sans); font-size: 0.58rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--d-faint); font-weight: 600; text-align: left; padding: 0.35rem 0.6rem; border-bottom: 1px solid var(--d-rule-strong); }
.rtj-tt th.num, .rtj-tt td.num { text-align: right; }
.rtj-tt td { padding: 0.34rem 0.6rem; border-bottom: 1px solid var(--d-rule); vertical-align: middle; }
.rtj-tt tr:last-child td { border-bottom: none; }
.rtj-tt tr.target td { background: rgba(140,21,21,.045); }
.rtj-tt tr.target td:first-child { box-shadow: inset 3px 0 0 var(--pv-accent); }
.rtj-tt tr.seed td:first-child { box-shadow: inset 3px 0 0 #5b6b86; }
.rtj-tt tr.unreached { opacity: 0.5; }
.rtj-cust-cell { font-weight: 600; color: var(--d-text-strong); display: inline-flex; align-items: center; gap: 0.34rem; }
.rtj-cust-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--rtj-cust); flex: none; }
.rtj-vstar { font-family: var(--d-mono); font-size: 0.6rem; font-weight: 700; color: var(--pv-accent); background: rgba(140,21,21,.1);
  border: 1px solid rgba(140,21,21,.28); border-radius: 4px; padding: 0 0.28rem; }
.rtj-seedrank { font-family: var(--d-mono); font-size: 0.6rem; font-weight: 700; color: #44516b; background: rgba(91,107,134,.12);
  border: 1px solid rgba(91,107,134,.3); border-radius: 4px; padding: 0 0.28rem; }
.rtj-cutoffcell { font-family: var(--d-mono); font-size: 0.72rem; color: var(--d-muted); }
.rtj-churn { font-family: var(--d-mono); font-size: 0.72rem; display: inline-flex; align-items: center; gap: 0.3rem; }
.rtj-churn .d { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.rtj-churn.c1 { color: #9a5a2c; } .rtj-churn.c1 .d { background: #c8843f; }
.rtj-churn.c0 { color: #4f6a42; } .rtj-churn.c0 .d { background: #6f8f5a; }
.rtj-masked { font-family: var(--d-mono); font-size: 0.72rem; color: var(--pv-accent); font-weight: 700;
  background: repeating-linear-gradient(45deg, rgba(140,21,21,.1) 0 4px, rgba(140,21,21,.02) 4px 8px);
  border: 1px dashed rgba(140,21,21,.5); border-radius: 4px; padding: 0.02rem 0.34rem; }
.rtj-visits { display: flex; align-items: center; gap: 0.4rem; justify-content: flex-end; }
.rtj-visits .n { font-family: var(--d-mono); font-variant-numeric: tabular-nums; color: var(--d-text-strong); min-width: 2.6ch; text-align: right; }
.rtj-vbar { height: 6px; border-radius: 3px; background: var(--pv-accent); width: 0; transition: width .4s var(--ease, ease); }

/* ---------- SQL card ---------- */
.rtj-sql { font-family: var(--d-mono); font-size: 0.63rem; line-height: 1.6; color: #3a3a42;
  background: var(--d-bg-alt); border: 1px solid var(--d-rule); border-left: 3px solid var(--pv-accent);
  border-radius: 6px; padding: 0.6rem 0.7rem; overflow-x: auto; white-space: pre; }
.rtj-sql .kw { color: #8c1515; font-weight: 600; }
.rtj-sql .fn { color: #44516b; }
.rtj-sql .lit { color: #4f6a42; }
.rtj-sql .future { background: rgba(140,21,21,.09); border-radius: 3px; padding: 0 2px; }
.rtj-sql .cm { color: var(--d-faint); font-style: italic; }

/* ---------- cell tape (rows -> cells) + budgets ---------- */
.rtj-tape-wrap { margin-top: 0.4rem; }
.rtj-tape-hd { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.45rem; }
.rtj-budgets { display: flex; gap: 0.9rem; align-items: center; }
.rtj-meter { display: flex; align-items: center; gap: 0.34rem; font-family: var(--d-mono); font-size: 0.66rem; color: var(--d-muted); }
.rtj-meter .track { width: 84px; height: 6px; border-radius: 3px; background: var(--d-rule-strong); overflow: hidden; }
.rtj-meter .fill { height: 100%; width: 0; background: var(--pv-accent); transition: width .35s ease; }
.rtj-meter .fill.l { background: #5b6b86; }
.rtj-meter.full .num { color: var(--pv-accent); font-weight: 700; }

.rtj-tape { display: flex; flex-wrap: wrap; gap: 5px; align-items: flex-start; padding: 0.6rem; min-height: 2.4rem;
  background: var(--d-bg-alt); border: 1px solid var(--d-rule); border-radius: 8px; }
.rtj-seedgroup { display: flex; flex-direction: column; gap: 4px; padding: 0.3rem 0.4rem 0.34rem; border-radius: 6px; }
.rtj-seedgroup.s0 { background: rgba(140,21,21,.06); }
.rtj-seedgroup.s1 { background: rgba(91,107,134,.08); }
.rtj-seedlbl { font-family: var(--d-mono); font-size: 0.6rem; text-transform: uppercase; letter-spacing: .03em; color: var(--d-muted); }
.rtj-seedlbl b { color: var(--d-text-strong); }
.rtj-cellrow { display: flex; flex-wrap: wrap; gap: 4px; }
.rtj-cell { font-family: var(--d-mono); font-size: 0.66rem; color: var(--d-text-strong); background: #fff;
  border: 1px solid var(--d-rule-strong); border-radius: 5px; padding: 0.12rem 0.4rem; white-space: nowrap;
  opacity: 0; transform: translateY(4px); transition: opacity .3s ease, transform .3s ease; }
.rtj-cell.in { opacity: 1; transform: none; }
.rtj-cell .col { color: var(--d-faint); }
.rtj-cell.masked { color: var(--pv-accent); border-color: rgba(140,21,21,.5); border-style: dashed;
  background: repeating-linear-gradient(45deg, rgba(140,21,21,.08) 0 4px, rgba(140,21,21,.01) 4px 8px); }
.rtj-predict { display: inline-flex; align-items: center; gap: 0.45rem; font-family: var(--d-mono); font-size: 0.7rem; color: var(--d-muted); }
.rtj-predict .arr { color: var(--pv-accent); font-weight: 700; }

/* ---------- legend additions ---------- */
.rtj-legend .sw.cust { background: var(--rtj-cust); }
.rtj-legend .sw.prod { background: var(--rtj-prod); }
.rtj-legend .sw.rev { background: #fff; border: 2px solid var(--rtj-rev); }
.rtj-legend .sw.future { background: var(--rtj-future); }
.rtj-legend .sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; flex: none; }
.rtj-legend .sw.round { border-radius: 50%; }

@media (prefers-reduced-motion: reduce) {
  .rtj-vbar, .rtj-meter .fill, .rtj-cell { transition: none; }
  .rtj-cell { opacity: 1; transform: none; }
}

/* =============================================================
   Widget 2 — context-window budget fill
   ============================================================= */
.pv-rtj { --rtj-listener: #a83232; --rtj-track: #5b6b86; --rtj-play: #c8a986; --rtj-empty: #e9e5de; }
.rtj-ctx-main { display: grid; grid-template-columns: 1.12fr 1fr; gap: 1.1rem; align-items: start; position: relative; }
@media (max-width: 760px) { .rtj-ctx-main { grid-template-columns: 1fr; } }
.rtj-ctx-window { min-width: 0; }
.rtj-window-hd { font-family: var(--d-mono); font-size: .62rem; text-transform: uppercase; letter-spacing: .05em; color: var(--d-muted); margin-bottom: .4rem; display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; }
.rtj-window-hd b { font-family: var(--d-mono); color: var(--pv-accent); }
.rtj-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 5; overflow: visible; }
.rtj-flycell { position: absolute; width: 9px; height: 9px; border-radius: 2px; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.rtj-flycell.listener { background: var(--rtj-listener); } .rtj-flycell.track { background: var(--rtj-track); } .rtj-flycell.play { background: var(--rtj-play); }
.rtj-cellsq { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 2px; vertical-align: middle; }
.rtj-cellsq.listener { background: var(--rtj-listener); } .rtj-cellsq.track { background: var(--rtj-track); } .rtj-cellsq.play { background: var(--rtj-play); }
.rtj-gnode.pop { transition: r .12s ease; }

/* BFS-rule schematic + composition */
.rtj-ctx-rule { display: flex; flex-direction: column; gap: 0.7rem; }
.rtj-rule-svg { width: 100%; height: auto; display: block; background: var(--d-bg-alt); border-radius: 8px; padding: 4px; }
.rtj-rule-node { stroke: #fff; stroke-width: 1.6; }
.rtj-rule-node.seed { fill: var(--rtj-listener); }
.rtj-rule-node.track { fill: var(--rtj-track); }
.rtj-rule-node.play { fill: var(--rtj-play); }
.rtj-rule-node.skip { fill: #d8d3cb; }
.rtj-rule-lbl { font-family: var(--d-sans); font-size: 10px; font-weight: 600; fill: #fff; }
.rtj-rule-node.skip + .rtj-rule-lbl, g:has(.rtj-rule-node.skip) .rtj-rule-lbl { fill: #7c766e; }
.rtj-rule-edge { fill: none; stroke-linecap: round; }
.rtj-rule-edge.fp { stroke: var(--rtj-listener); stroke-width: 2.4; }
.rtj-rule-edge.pf { stroke: var(--rtj-track); stroke-width: 2; }
.rtj-rule-edge.skip { stroke: #cfc9c0; stroke-width: 1.6; stroke-dasharray: 3 3; }
.rtj-rule-tag { font-family: var(--d-mono); font-size: 7.5px; }
.rtj-rule-tag.fp { fill: var(--rtj-listener); }
.rtj-rule-tag.pf { fill: var(--rtj-track); }
.rtj-rule-tag.skip { fill: var(--d-faint); }

.rtj-comp { display: flex; flex-direction: column; gap: 0.32rem; font-size: 0.7rem; }
.rtj-comp-hd { font-family: var(--d-mono); font-size: 0.6rem; text-transform: uppercase; letter-spacing: .05em; color: var(--d-faint); margin-bottom: 0.05rem; }
.rtj-comp-row { display: grid; grid-template-columns: 14px 1fr auto; gap: 0.3rem 0.45rem; align-items: center; }
.rtj-comp-row.skip { opacity: 0.7; grid-template-columns: 14px 1fr auto; }
.rtj-comp-sw { width: 11px; height: 11px; border-radius: 3px; }
.rtj-comp-sw.listener { background: var(--rtj-listener); }
.rtj-comp-sw.track { background: var(--rtj-track); }
.rtj-comp-sw.play { background: var(--rtj-play); }
.rtj-comp-sw.skipsw { background: repeating-linear-gradient(45deg, #d8d3cb 0 3px, #efebe4 3px 6px); }
.rtj-comp-lbl { color: var(--d-text-strong); font-weight: 600; }
.rtj-comp-row.skip .rtj-comp-lbl { font-weight: 400; color: var(--d-muted); }
.rtj-comp-n { font-family: var(--d-mono); font-size: 0.62rem; color: var(--d-faint); grid-column: 2; justify-self: start; }
.rtj-comp-c { font-family: var(--d-mono); color: var(--d-muted); font-variant-numeric: tabular-nums; }

/* budget bar + counter */
.rtj-ctx-fill { min-width: 0; }
.rtj-budget-hd { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.3rem; }
.rtj-budget-count { font-size: 0.84rem; color: var(--d-text); }
.rtj-budget-count b { font-family: var(--d-mono); font-size: 1.05rem; color: var(--pv-accent); font-variant-numeric: tabular-nums; }
.rtj-budget-count [data-el="Lval"], .rtj-budget-count [data-el="rows"] { font-family: var(--d-mono); }
.rtj-budget-state { font-family: var(--d-mono); font-size: 0.72rem; color: var(--d-faint); }
.rtj-budget-state.full { color: #4f6a42; font-weight: 700; }
.rtj-budget-bar { height: 12px; border-radius: 6px; background: var(--d-rule-strong); overflow: hidden; }
.rtj-budget-fill { display: block; height: 100%; width: 0; border-radius: 6px;
  background: linear-gradient(90deg, var(--rtj-listener), #b0533f); transition: width 0.18s linear; }
.rtj-budget-fill.done { background: linear-gradient(90deg, #4f6a42, #6f8f5a); }
@media (prefers-reduced-motion: reduce) { .rtj-budget-fill { transition: none; } }

/* the L-cell window grid (legacy mini-grid, kept for the side preview) */
.rtj-grid { display: grid; gap: 1.5px; margin-top: 0.7rem; }
.rtj-gcell { aspect-ratio: 1; border-radius: 1.5px; background: var(--rtj-empty); transition: background 0.12s ease; }
.rtj-gcell.filled.listener { background: var(--rtj-listener); }
.rtj-gcell.filled.track { background: var(--rtj-track); }
.rtj-gcell.filled.play { background: var(--rtj-play); }
@media (prefers-reduced-motion: reduce) { .rtj-gcell { transition: none; } }

/* ---- widget 1: ER diagram (table cards + FK connectors) + derivation ---- */
.rtj-er { position: relative; margin: 0.2rem 0 0.4rem; }
.rtj-er-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: visible; }
.rtj-er-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 2.3rem; align-items: start; position: relative; z-index: 1; }
.rtj-er-grid .pv-card { background: #fff; transition: box-shadow .2s, transform .2s; }
.rtj-er .pv-card-hd { padding: 0.3rem 0.55rem; font-size: 0.78rem; }
.rtj-er .pv-coltable td { padding: 0.12rem 0.3rem; font-size: 0.71rem; }
.rtj-er .pv-keytag { font-size: 0.52rem; padding: 0.03rem 0.28rem; }
@media (max-width: 640px) { .rtj-er-grid { grid-template-columns: 1fr; gap: 0.9rem; } .rtj-er-svg { display: none; } }
.pv-card.dimmed { opacity: 0.5; }
.pv-card.source { box-shadow: 0 0 0 2px var(--pv-accent), 0 6px 18px rgba(140,21,21,.12); }
.pv-card.istarget { box-shadow: 0 0 0 2px #5b6b86, 0 6px 18px rgba(91,107,134,.14); }
.pv-card-hd.track-hd { background: #5b6b86; }
.pv-coltable tr.fkrow .pv-colname, .pv-coltable tr.pkrow .pv-colname { font-weight: 600; }
.pv-coltable tr.hl td { background: rgba(140,21,21,.07); }
.rtj-fk-line { fill: none; stroke: #b9b4ab; stroke-width: 1.8; }
.rtj-fk-line.listener { stroke: var(--rtj-listener, #a83232); }
.rtj-fk-line.track { stroke: var(--rtj-track, #5b6b86); }
.rtj-fk-dot { stroke: #fff; stroke-width: 1.3; }
.rtj-fk-dot.listener { fill: var(--rtj-listener, #a83232); }
.rtj-fk-dot.track { fill: var(--rtj-track, #5b6b86); }
.rtj-fk-tag { font-family: var(--d-mono); font-size: 8.5px; fill: var(--d-faint); }

/* derivation: SQL  ->  task table */
.rtj-derive { display: grid; grid-template-columns: 1fr auto 0.92fr; gap: 0.7rem; align-items: center; margin-top: 1rem; }
.rtj-derive .rtj-sql { font-size: 0.59rem; line-height: 1.46; padding: 0.5rem 0.6rem; }
.rtj-task-tbl td, .rtj-task-tbl th { padding: 0.26rem 0.55rem; }
@media (max-width: 720px) { .rtj-derive { grid-template-columns: 1fr; } .rtj-derive-arrow { transform: rotate(90deg); justify-self: center; } }
.rtj-derive-arrow { color: var(--pv-accent); font-size: 1.5rem; line-height: 1; }
.rtj-task-card { border: 1px solid var(--d-rule); border-radius: 8px; overflow: hidden; }
.rtj-task-hd { background: var(--pv-accent); color: #fff; font-family: var(--d-mono); font-size: 0.66rem; letter-spacing: .03em; padding: 0.4rem 0.6rem; display: flex; justify-content: space-between; align-items: center; }
.rtj-task-hd .tag { font-size: 0.56rem; opacity: .85; text-transform: uppercase; }
.rtj-task-tbl { border-collapse: collapse; width: 100%; font-size: 0.74rem; }
.rtj-task-tbl th { font-family: var(--d-sans); font-size: 0.55rem; text-transform: uppercase; letter-spacing: .04em; color: var(--d-faint); font-weight: 600; text-align: left; padding: 0.3rem 0.6rem; border-bottom: 1px solid var(--d-rule-strong); }
.rtj-task-tbl td { padding: 0.32rem 0.6rem; border-bottom: 1px solid var(--d-rule); }
.rtj-task-tbl tr:last-child td { border-bottom: none; }
.rtj-task-tbl tbody tr { opacity: 0; transform: translateX(6px); transition: opacity .35s ease, transform .35s ease; }
.rtj-task-tbl tbody tr.in { opacity: 1; transform: none; }
.rtj-task-tbl tr.target td { background: rgba(140,21,21,.05); }
@media (prefers-reduced-motion: reduce) { .rtj-task-tbl tbody tr { transition: none; opacity: 1; transform: none; } .rtj-er-grid .pv-card { transition: none; } }

/* ---- relational entity graph: every row is a node, walk visits them ---- */
.rtj-graph-svg { width: 100%; height: auto; display: block; background: var(--d-bg-alt); border-radius: 8px; }
.rtj-glink { stroke: #d7d2ca; stroke-width: 1; fill: none; }
.rtj-glink.lit { stroke: var(--rtj-listener); stroke-width: 1.8; }
.rtj-gnode { stroke: #fff; stroke-width: 1.3; transition: fill .18s ease, opacity .2s ease, r .15s ease; }
.rtj-gnode.listener { fill: #ecd6d6; } .rtj-gnode.track { fill: #d7dde6; } .rtj-gnode.play { fill: #ede2d3; }
.rtj-gnode.visited.listener { fill: var(--rtj-listener); }
.rtj-gnode.visited.track { fill: var(--rtj-track); }
.rtj-gnode.visited.play { fill: var(--rtj-play); }
.rtj-gnode.future { fill: #e6e2db; stroke: #d3cdc4; stroke-dasharray: 2 2; opacity: .6; }
.rtj-gnode.seed { stroke: var(--pv-accent); stroke-width: 2.6; }
.rtj-gtoken { fill: var(--pv-accent); stroke: #fff; stroke-width: 1.6; }
.rtj-glabel { font-family: var(--d-mono); font-size: 9px; fill: var(--d-muted); }
.rtj-graph-hd { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; flex-wrap: wrap; margin: .1rem 0 .35rem; }
.rtj-graph-cap { font-size: .72rem; color: var(--d-muted); }