/* Decision Room · Changeprint bar, Difference surface, expanded sheet (measured fit, three density tiers).
   rgba() literals: 6,8,16 = shadows; 255,255,255 = glass; 214,218,226 = --accent. */
/* the bottom surface lays out by its own width (library open or collapsed), not the viewport's */
.dr-bottom{ flex:none; border-top:1px solid var(--line); background:var(--bg-subtle); container:dr-bottom / inline-size; }
.dr-cp-bar{ height:76px; display:flex; align-items:center; gap:36px; padding:0 24px; }
.dr-cp-head{ display:flex; flex-direction:column; gap:3px; min-width:104px; }
.dr-cp-title{ font-size:14px; font-weight:600; color:var(--ink); }
.dr-progress{ display:flex; gap:4px; }
.dr-progress span{ width:22px; height:3px; border-radius:2px; background:var(--line-2); transition:background-color var(--dr-t-base) var(--dr-e-io); }
.dr-progress span.is-on{ background:var(--accent); }
.dr-metric{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.dr-metric-value{ font-size:20px; font-weight:500; letter-spacing:-.01em; color:var(--ink); white-space:nowrap; font-variant-numeric:tabular-nums; }
.dr-diff{ height:136px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.45fr) auto; gap:28px; align-items:center; padding:0 24px; }
.dr-diff p{ margin:0; font-size:13px; line-height:1.5; color:var(--ink-dim); }
/* four rows shared by every delta (subgrid): labels, A values, B values and directions each sit on one line */
.dr-deltas{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-rows:auto auto auto auto; column-gap:18px; row-gap:4px; }
.dr-delta{ display:grid; grid-row:span 4; grid-template-rows:subgrid; gap:0; align-items:end; min-width:0; }
.dr-delta-a{ font-size:12px; color:var(--ink-mute); white-space:nowrap; font-variant-numeric:tabular-nums; }
.dr-delta-b{ font-size:18px; font-weight:500; color:var(--ink); white-space:nowrap; font-variant-numeric:tabular-nums; }
.dr-delta-dir{ font-size:11.5px; display:inline-flex; gap:5px; align-items:center; white-space:nowrap; color:var(--ink-mute); transition:color var(--dr-t-base) var(--dr-e-io); }
.dr-delta-dir.is-good{ color:var(--ok); }

/* Sheet: absolute over the canvas, 716px tall at 1440x900; content fits by measurement (data-tier 1..3). */
.dr-sheet{ position:absolute; left:12px; right:12px; top:72px; bottom:0; z-index:4; border-radius:18px 18px 0 0; background:linear-gradient(180deg,var(--bg-3),var(--bg-2)); border:1px solid var(--line-2); border-bottom:0; box-shadow:0 -16px 40px -12px rgba(6,8,16,.7), inset 0 1px 0 rgba(255,255,255,.06); padding:12px 26px 16px; display:flex; flex-direction:column; gap:var(--sh-gap); overflow:hidden; will-change:transform; }
.dr-sheet[data-tier="1"]{ --sh-read:14.5px; --sh-item:13.5px; --sh-metric:20px; --sh-gap:14px; --sh-traj:160px; --sh-row:11px; }
.dr-sheet[data-tier="2"]{ --sh-read:13.5px; --sh-item:12.5px; --sh-metric:18px; --sh-gap:10px; --sh-traj:140px; --sh-row:9px; }
.dr-sheet[data-tier="3"]{ --sh-read:12.5px; --sh-item:12px; --sh-metric:17px; --sh-gap:8px; --sh-traj:120px; --sh-row:7px; }
.dr-sheet.is-scroll{ overflow:auto; }
.dr-sheet-head{ display:flex; justify-content:space-between; align-items:center; gap:16px; min-height:48px; }
.dr-sheet-head .dr-h2{ margin:0; }
.dr-sheet-actions{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:8px; }
.dr-sheet-actions .btn{ justify-content:center; white-space:nowrap; }
/* The overlay sheet (>= 1024px) starts at 72px, inside the state line's 66-86px box: the line's glyph tops showed as
   a sliver above the sheet's edge (T11 QA-05). While the sheet is open the line is clipped away VISUALLY only: it is
   the page's aria-live region, so it stays in the accessibility tree (no visibility / display change) and keeps
   announcing WhatIF changes made with the sheet open (WCAG 4.1.3). Not opacity: canvas-chrome writes it inline. */
@media (min-width:1024px){ .dr-center:has(> .dr-sheet:not([hidden])) .dr-stateline{ clip-path:inset(50%); pointer-events:none; } }
/* the Loadpaths + trajectory column never drops under 216px: the trajectory's 11px labels need it (C3) */
.dr-sheet-grid{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr) minmax(216px,1fr); gap:24px; min-height:0; }
.dr-sheet-col{ min-width:0; }
/* the metrics column is sized by the sheet (library open or collapsed), not the viewport: measure it */
.dr-sheet-metrics{ container-type:inline-size; }
.dr-sheet h3{ margin:0 0 8px; font-size:13px; font-weight:600; color:var(--ink); }
.dr-sheet p{ margin:0; }
.dr-metric-row{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:var(--sh-row) 0; border-bottom:1px solid var(--line); font-size:12.5px; color:var(--ink-dim); }
@container (max-width:230px){
  .dr-metric-row{ flex-direction:column; align-items:flex-start; gap:2px; }
}
.dr-sheet .dr-metric-value{ font-size:var(--sh-metric); }
.dr-exposure{ display:flex; flex-direction:column; gap:6px; padding-top:12px; }
.dr-read{ font-size:var(--sh-read); line-height:1.5; color:var(--ink); margin-bottom:8px !important; }
.dr-changed-item{ display:flex; gap:12px; font-size:var(--sh-item); line-height:1.45; color:var(--ink-dim); margin-bottom:8px; }
.dr-changed-item span:first-child{ font-family:var(--mono); font-size:12px; color:var(--ink-mute); padding-top:2px; }
button.dr-lp{ width:100%; border-radius:12px; padding:10px 12px; display:flex; flex-direction:column; gap:5px; margin-bottom:8px; background:none; text-align:left; font:inherit; color:inherit; cursor:pointer; transition:border-color var(--dr-t-fast) var(--dr-e-out); }
button.dr-lp[aria-pressed="true"]{ border-color:rgba(214,218,226,.45); }
/* the viewBox is the rendered box (changeprint.js), so the SVG's 11px labels render at 11px */
.dr-traj{ display:block; width:100%; height:var(--sh-traj); margin-top:6px; }
.dr-traj text{ paint-order:normal; stroke:none; }
/* the peak label may sit on the curve (below a High peak): a ground-coloured halo keeps the curve out of its letters */
.dr-traj .dr-traj-ann{ paint-order:stroke; stroke:var(--bg-2); stroke-width:3px; stroke-linejoin:round; }

/* two columns by the sheet's own room (.dr-center, room.css), not the viewport: 1280 with the library open is
   718px wide and got three columns under a viewport rule (FIX-3). Metrics over the read on the left, Loadpaths and
   the trajectory on the right (the three-column order, folded): the text-in-one-column variant overflowed the
   longest entry even at tier 3 (736/715 at 1280x800 and 1366x768, library open); this one fits at tier 2.
   The single-column rules below still win. */
@container dr-center (max-width:820px){
  .dr-sheet-grid{ grid-template-columns:minmax(0,1.2fr) minmax(216px,1fr); }
  .dr-sheet-metrics{ grid-column:1; grid-row:1; }
  .dr-sheet-text{ grid-column:1; grid-row:2; }
  .dr-sheet-paths{ grid-column:2; grid-row:1 / span 2; }
}
@media (max-width:1023px){
  .dr-cp-bar{ height:auto; flex-wrap:wrap; gap:16px; padding:14px 16px; }
  .dr-diff{ height:auto; grid-template-columns:1fr; padding:16px; }
  .dr-deltas{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .dr-sheet{ position:static; height:auto; border-radius:0; overflow:visible; }
  /* at 390 the title and both actions do not fit one row: the actions wrap below, never "Pin as / A" (T11 QA-06) */
  .dr-sheet-head{ flex-wrap:wrap; row-gap:10px; }
  .dr-sheet-grid{ grid-template-columns:1fr; }
  .dr-sheet-metrics,.dr-sheet-paths,.dr-sheet-text{ grid-column:auto; grid-row:auto; }
}
/* Difference surface under 1180px of its own width: the explanation and Expand on top, the four deltas below at
   full width (after the viewport rules, so these win where both apply) */
@container dr-bottom (max-width:1180px){
  .dr-diff{ height:auto; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"why expand" "deltas deltas"; row-gap:12px; padding-block:14px; align-items:start; }
  .dr-diff > :first-child{ grid-area:why; }
  .dr-diff > .dr-deltas{ grid-area:deltas; }
  .dr-diff > #dr-expand{ grid-area:expand; }
}
@container dr-bottom (max-width:560px){
  .dr-deltas{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
/* 44px targets on touch and stacked layouts (I3); the bar (76px) and the sheet head (48px) have the room */
@media (max-width:1023px), (pointer:coarse){
  #dr-expand,#dr-collapse,.dr-sheet-actions .btn{ min-height:44px; }
}
@media (prefers-reduced-motion:reduce){
  :root[data-motion="always"] .dr-progress span,
  :root[data-motion="always"] .dr-delta-dir{ transition-duration:var(--dr-t-base) !important; }
  :root[data-motion="always"] button.dr-lp{ transition-duration:var(--dr-t-fast) !important; }
}