/* Decision Room · room frame, header row, segmented controls, body grid, glass recipe.
   rgba() literals: 9,9,11 = --bg-subtle; 255,255,255 = landing glass-medallion recipe (index.html #cell-fill). */
/* Owner 2026-09-18: soften the step from the hero into the room. From 1440px the room is one framed panel,
   slightly wider than the text column (a deliberate breakout, 24px from the viewport at 1440, --max wide beyond),
   instead of a full-bleed band cut by a full-width hairline. It is NOT narrowed to the text column: the centre
   must keep >= GRID.minGridW (800px, org-layout.js) or the Organization Map drops to its row layout. Below 1440
   the room stays full-bleed for the same reason. overflow:clip rounds the rails' own backgrounds without making
   a scroll container; the drag clone is appended to body (motion.js), so nothing inside is meant to leave it. */
.dr-room{ position:relative; border-bottom:1px solid var(--line); background:var(--bg); scroll-margin-top:64px; }
/* full-bleed range: the top hairline fades out toward both edges, so it reads as a seam, not a cut */
.dr-room::before{ content:''; position:absolute; inset:0 0 auto; height:1px; background:linear-gradient(90deg,transparent,var(--line) 18%,var(--line) 82%,transparent); pointer-events:none; }
@media (min-width:1440px){
  .dr-room::before{ content:none; }
  .dr-room{ width:min(100% - 48px, var(--max)); margin-inline:auto; border:1px solid var(--line); border-radius:var(--radius-2xl); overflow:clip; box-shadow:inset 0 1px 0 rgba(255,255,255,.07); scroll-margin-top:88px; }
}
.dr-error{ padding:12px 24px; color:var(--danger); font-size:14px; }
.dr-head{ height:60px; display:flex; align-items:center; gap:20px; padding:0 24px; border-bottom:1px solid var(--line); }
.dr-company{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.dr-company-name{ font-size:15px; font-weight:600; letter-spacing:-.01em; color:var(--ink); }
.dr-spacer{ flex:1; }
.dr-basestate{ display:flex; align-items:center; gap:10px; }
.dr-chip{ display:inline-flex; align-items:center; gap:8px; padding:6px 11px; border-radius:999px; font-size:12px; color:var(--ink-mute); border:1px solid var(--line); background:rgba(9,9,11,.72); white-space:nowrap; }
.dr-dot{ width:6px; height:6px; border-radius:50%; background:var(--ink-mute); }
.dr-linkbtn{ background:none; border:0; padding:4px 0; font:inherit; font-size:13px; color:var(--ink-dim); cursor:pointer; }
.dr-linkbtn:hover{ color:var(--ink); }

.dr-seg{ display:inline-flex; align-items:center; gap:2px; padding:3px; border-radius:999px; background:var(--bg-2); border:1px solid var(--line); }
.dr-seg button{ padding:6px 12px; border-radius:999px; border:0; background:transparent; font:500 12.5px/1 var(--sans); color:var(--ink-mute); cursor:pointer; white-space:nowrap; display:inline-flex; align-items:center; gap:6px; }
.dr-seg button[aria-pressed="true"]{ background:var(--bg-3); color:var(--ink); box-shadow:inset 0 0 0 1px var(--line-2); }
.dr-seg button:disabled{ color:var(--ink-faint); cursor:not-allowed; }
.dr-seg .dr-changed-dot{ width:6px; height:6px; border-radius:50%; background:var(--accent-2); }

.dr-body{ display:grid; grid-template-columns:248px minmax(0,1fr) 312px; height:788px; }
.dr-body.is-lib-collapsed{ grid-template-columns:56px minmax(0,1fr) 312px; }
/* container: the sheet's column count follows the centre's own width (library open or collapsed), FIX-3 */
.dr-center{ position:relative; display:flex; flex-direction:column; min-width:0; container:dr-center / inline-size; }
.dr-glass{ background:linear-gradient(180deg,rgba(255,255,255,.060),rgba(255,255,255,.012)); border:1px solid rgba(255,255,255,.10); box-shadow:inset 0 1px 0 rgba(255,255,255,.07); }

/* Narrow: rails stack into a sequential builder above a reduced canvas */
@media (max-width:1023px){
  .dr-head{ height:auto; flex-wrap:wrap; padding:12px 16px; gap:10px; }
  .dr-body,.dr-body.is-lib-collapsed{ display:flex; flex-direction:column; height:auto; }
}
/* 44px targets on touch and stacked layouts (final review I3); desktop fine pointers keep the visual size. The
   segments grow their hit area vertically only (neighbours sit 2px apart) and take a 44px minimum width. */
@media (max-width:1023px), (pointer:coarse){
  .dr-seg button{ position:relative; min-width:44px; justify-content:center; }
  .dr-seg button::before{ content:''; position:absolute; inset:-10px 0; }
  #dr-open-methodology{ position:relative; }
  #dr-open-methodology::before{ content:''; position:absolute; inset:-12px -8px; }
}