/* Decision Room · canvas chrome and Network Layer. rgba() literals: 228,232,240 = --accent-glow.
   Link ramp (A3): the only new colours in the program. Pastel = --ok mixed toward --ink (toward white on a dark
   ground, never a lower alpha); pure --ok at the saturated end; Loadpaths pure --ok. */
:root{
  --dr-link-light:#b7dfcb;    /* sRGB fallback: 40% --ok / 60% --ink */
  --dr-link-mod:#89cfab;      /* 70% / 30% */
  --dr-link-strong:var(--ok);
  --dr-lp:var(--ok);
}
@supports (color:color-mix(in oklab, red, blue)){
  :root{ --dr-link-light:color-mix(in oklab, var(--ok) 40%, var(--ink)); --dr-link-mod:color-mix(in oklab, var(--ok) 70%, var(--ink)); }
}
.dr-canvas{ position:relative; flex:1; min-height:0; overflow:hidden; background:radial-gradient(60% 50% at 50% 0%,rgba(228,232,240,.07) 0%,rgba(228,232,240,.025) 38%,transparent 72%),var(--bg); }
.dr-toolbar{ position:absolute; left:0; right:0; top:0; height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 20px; z-index:2; }
.dr-stateline{ position:absolute; left:20px; top:66px; margin:0; font-size:13px; color:var(--ink-dim); z-index:2; }
.dr-stateline b{ font-weight:400; color:var(--ink); }
.dr-svg{ position:absolute; inset:0; width:100%; height:100%; display:block; font-family:var(--sans); }
.dr-svg text{ paint-order:stroke; stroke:var(--bg); stroke-width:4px; stroke-linejoin:round; }
/* Paint transitions (RS3 Q1): every animated paint property is written to style by the renderer. */
.dr-svg .dr-node{ transition:fill-opacity var(--dr-t-base) var(--dr-e-io), stroke var(--dr-t-base) var(--dr-e-io), stroke-width var(--dr-t-base) var(--dr-e-io); }
.dr-svg .dr-node-g{ transition:transform var(--dr-t-base) var(--dr-e-io), opacity var(--dr-t-fast) var(--dr-e-io); }
.dr-svg .dr-ring{ transition:stroke-opacity var(--dr-t-base) var(--dr-e-io); }
.dr-svg .dr-edge{ transition:stroke var(--dr-t-base) var(--dr-e-io), stroke-opacity var(--dr-t-base) var(--dr-e-io), opacity var(--dr-t-fast) var(--dr-e-in); }
.dr-svg .dr-lp{ transition:opacity var(--dr-t-fast) var(--dr-e-in); }
.dr-svg .dr-lp-edge,.dr-svg .dr-lp-halo,.dr-svg .dr-lp-gap{ transition:stroke var(--dr-t-base) var(--dr-e-io), stroke-opacity var(--dr-t-base) var(--dr-e-io), stroke-width var(--dr-t-base) var(--dr-e-io); }
/* stroke-dasharray is deliberately NOT transitioned: a retained segment keeps its rank (keys are rank/segment), so its
   dash never changes, and a transition would interpolate drawOn's full-length dash into the rank pattern (flicker). */
.dr-svg .dr-lp-chevron{ transition:transform var(--dr-t-base) var(--dr-e-io), opacity var(--dr-t-base) var(--dr-e-io); }
.dr-legend{ position:absolute; left:20px; bottom:22px; display:flex; gap:20px; align-items:center; z-index:2; flex-wrap:wrap; }
.dr-key{ display:inline-flex; align-items:center; gap:7px; font-size:12px; color:var(--ink-mute); white-space:nowrap; }

@media (max-width:1023px){
  /* the legend stays: under 1024px the marks still need their key (FIX-2); the extra 60px keeps it clear */
  .dr-canvas{ height:480px; flex:none; }
  /* 12px between wrapped rows: each segment's 44px hit area reaches 6px past its bar (room.css, I3), so none overlap;
     z-index 3 keeps the lower row's hit area over the (non-interactive) state line that follows */
  .dr-toolbar{ position:relative; height:auto; flex-wrap:wrap; gap:12px 8px; padding:12px 16px 0; z-index:3; }
  .dr-stateline{ position:relative; left:auto; top:auto; padding:8px 16px 0; }
  .dr-legend{ left:16px; right:16px; bottom:12px; gap:8px 14px; }
}
/* A4 override (ledger L-1): same media query, higher specificity than shared.css's universal kill-switch. */
@media (prefers-reduced-motion:reduce){
  :root[data-motion="always"] .dr-svg .dr-node,
  :root[data-motion="always"] .dr-svg .dr-ring,
  :root[data-motion="always"] .dr-svg .dr-lp-edge,
  :root[data-motion="always"] .dr-svg .dr-lp-halo,
  :root[data-motion="always"] .dr-svg .dr-lp-gap,
  :root[data-motion="always"] .dr-svg .dr-lp-chevron{ transition-duration:var(--dr-t-base) !important; }
  :root[data-motion="always"] .dr-svg .dr-node-g{ transition-duration:var(--dr-t-base), var(--dr-t-fast) !important; }
  :root[data-motion="always"] .dr-svg .dr-edge{ transition-duration:var(--dr-t-base), var(--dr-t-base), var(--dr-t-fast) !important; }
  :root[data-motion="always"] .dr-svg .dr-lp{ transition-duration:var(--dr-t-fast) !important; }
}