/* ============================================================
   Ledger of the Field: the margin taproot layer (v4).
   Owned by the Engine (assets/js/ledger.js builds the SVG).
   Pager mode: one fixed layer over the whole viewport, behind
   the content. Flow mode: the same SVG sits at the top of
   .sections and scrolls with the page, drawn at rest.
   It never takes pointer events and never covers text: the
   engine routes every path clear of the measured text boxes.
   ============================================================ */
#ledger-root {
  position: fixed; left: 0; top: 0; width: 100vw; height: 100vh;
  z-index: 0; pointer-events: none; overflow: visible;
  color: var(--n-70, #c9ced2);           /* kit icons draw in currentColor */
}
#ledger-root.is-flow { position: absolute; width: 100%; height: auto; }
#ledger-root .lg-sym { color: var(--n-70, #c9ced2); }

/* The rest state is the only state when motion is off. */
@media (prefers-reduced-motion: reduce) {
  #ledger-root * { transition: none !important; animation: none !important; }
}
/* High contrast and print: the layer is decoration only. */
@media (forced-colors: active) { #ledger-root { display: none; } }
@media print { #ledger-root { display: none; } }

/* Kit symbols drawn inline: the one signal dot is mint, as in kit.css. */
#ledger-root .node { fill: var(--nominal, #3fd9a4); }

/* ---- Hero roots (hero-roots.js): the operating layer figure in [data-hero-roots] ----
   The figure fills its container's width and height (it falls back to a 0.78 aspect when
   the container has no height of its own). Labels: mono, uppercase, --n-50 or brighter. */
[data-hero-roots] { position: relative; min-width: 0; }
.hr-svg { display: block; width: 100%; overflow: visible; }
.hr-svg text { font-family: var(--font-mono, "IBM Plex Mono", ui-monospace, monospace); font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; fill: var(--n-50, #8b9297); }
.hr-svg text.hr-op { fill: var(--nominal, #3fd9a4); }
/* A ground-coloured halo cuts any riser behind a label, so no line passes behind text. */
.hr-svg text { paint-order: stroke; stroke: var(--bg, #050607); stroke-width: 6px; stroke-linejoin: round; }
@media (forced-colors: active) { .hr-svg text { fill: CanvasText; } }
@media print { .hr-svg [opacity] { opacity: 1; } }