/* Decision Room · library (single-open accordion) and slot rails. rgba() literals: 214,218,226 = --accent;
   228,232,240 = --accent-glow; 255,255,255 = glass recipe. */
.dr-library,.dr-slots{ padding:20px 16px; display:flex; flex-direction:column; gap:14px; overflow:auto; background:var(--bg); }
.dr-library{ border-right:1px solid var(--line); transition:box-shadow var(--dr-t-fast) var(--dr-e-out); }
.dr-library.is-droppable{ box-shadow:inset 0 0 0 2px rgba(214,218,226,.35); }
.dr-slots{ border-left:1px solid var(--line); padding:20px 18px; gap:14px; }
.dr-rail-title{ font-size:13.5px; font-weight:600; color:var(--ink); }
.dr-rail-title-lg{ font-size:15px; font-weight:600; letter-spacing:-.01em; color:var(--ink); }
.dr-lib-head{ display:flex; flex-direction:column; gap:6px; padding-bottom:4px; }

/* Accordion groups */
.dr-library .dr-group{ display:flex; flex-direction:column; border-top:1px solid var(--line); }
.dr-library .dr-group:last-of-type{ border-bottom:1px solid var(--line); }
.dr-group-head{ width:100%; min-height:44px; padding:6px 2px; display:flex; align-items:center; gap:8px; background:none; border:0; border-radius:8px; font:500 12.5px/1.2 var(--sans); color:var(--ink-dim); cursor:pointer; text-align:left; }
.dr-group-head:hover{ color:var(--ink); }
.dr-group-head:focus-visible{ outline:none; box-shadow:var(--focus-ring); }
.dr-group-name{ flex:none; }
.dr-next{ flex:none; font-size:12px; color:var(--accent); }
.dr-group-value{ flex:1; min-width:0; text-align:right; font-size:12px; font-weight:400; color:var(--ink-mute); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dr-group-value.is-hint{ color:var(--ink-faint); }
.dr-chev{ flex:none; color:var(--ink-mute); transition:transform var(--dr-t-base) var(--dr-e-out); }
.dr-group[data-open="true"] .dr-chev{ transform:rotate(180deg); }
.dr-group-body{ display:flex; flex-direction:column; gap:8px; padding:2px 0 12px; }
.dr-families{ display:flex; flex-direction:column; }

/* Tiles */
.dr-tile{ display:flex; align-items:center; gap:10px; width:100%; min-height:44px; padding:11px 12px; border-radius:12px; font:500 13.5px/1.3 var(--sans); color:var(--ink); text-align:left; cursor:grab; touch-action:none; transition:transform var(--dr-t-fast) var(--dr-e-out), border-color var(--dr-t-fast) var(--dr-e-out), box-shadow var(--dr-t-fast) var(--dr-e-out), opacity var(--dr-t-fast) var(--dr-e-out); }
.dr-tile:hover{ transform:translateY(-1px); border-color:rgba(214,218,226,.3); }
.dr-tile:focus-visible{ outline:none; box-shadow:var(--focus-ring); }
.dr-tile:active{ cursor:grabbing; }
.dr-tile.is-dragging{ opacity:.4; }
/* Pick-up placeholder (R7): the tile's home, styled like the highlighted target slot. */
.dr-tile.is-home{ border:1px dashed rgba(214,218,226,.45); background:rgba(214,218,226,.06); box-shadow:0 0 0 3px rgba(228,232,240,.07); cursor:default; transform:none; }
.dr-tile.is-home > *{ visibility:hidden; }
.dr-fly{ border-radius:12px; }
/* Stacked or touch layouts: a thumb on a tile must still scroll the page; placement there is tap-only. */
@media (max-width:1023px), (pointer:coarse){ .dr-tile,.dr-slot-filled.is-draggable{ touch-action:auto; } }
.dr-grip{ flex:none; }
.dr-tile.is-guiding{ animation:dr-guide 4s var(--dr-e-out) infinite; border-color:rgba(214,218,226,.34); }
@keyframes dr-guide{ 0%,55%,100%{ transform:translateX(0); box-shadow:inset 0 1px 0 rgba(255,255,255,.07); } 25%,35%{ transform:translateX(18px); box-shadow:0 0 0 1px rgba(214,218,226,.20),0 10px 26px -10px rgba(228,232,240,.45); } }
.dr-pills{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.dr-pills .dr-tile{ justify-content:center; padding:9px 0; font-size:13px; }
.dr-family-row{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:11px 2px; border-top:1px solid var(--line); font-size:12.5px; font-weight:500; color:var(--ink-dim); }
/* The family name wraps; "Coming next" keeps one line and a 12px gap (T11 QA-03: the two ran together). */
.dr-family-row > .dr-cap{ flex:none; white-space:nowrap; }
.dr-families .dr-family-row:first-child{ border-top:0; }
.dr-library.is-collapsed{ align-items:center; padding:18px 0; gap:16px; }
.dr-lib-toggle{ position:relative; width:32px; height:32px; border-radius:10px; border:1px solid var(--line-2); background:transparent; display:flex; align-items:center; justify-content:center; cursor:pointer; }
/* 44px hit areas at unchanged visual size: an invisible ::before extends each small control (A4 targets). */
/* inset is measured from the padding box: 30px (32 minus the 1px border) + 2 x 7 = 44 */
.dr-lib-toggle::before{ content:''; position:absolute; inset:-7px; border-radius:inherit; }
.dr-vertical{ writing-mode:vertical-rl; transform:rotate(180deg); font-size:12px; color:var(--ink-mute); }

/* Slots */
.dr-slot{ display:flex; flex-direction:column; gap:6px; }
.dr-slot-head{ display:flex; justify-content:space-between; align-items:center; font-size:12.5px; font-weight:500; color:var(--ink-dim); }
.dr-slot-empty{ min-height:52px; width:100%; border:1px dashed var(--line-2); border-radius:12px; display:flex; align-items:center; padding:0 14px; color:var(--ink-mute); font:400 13px/1.3 var(--sans); background:transparent; text-align:left; transition:border-color var(--dr-t-fast) var(--dr-e-out), background-color var(--dr-t-fast) var(--dr-e-out), box-shadow var(--dr-t-fast) var(--dr-e-out); }
.dr-slot-empty.is-target{ border-color:rgba(214,218,226,.45); background:rgba(214,218,226,.06); box-shadow:0 0 0 3px rgba(228,232,240,.07); }
.dr-slot-empty.is-droppable{ border-color:var(--accent); background:rgba(214,218,226,.10); }
.dr-slot-filled{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:11px 12px; border-radius:12px; font:500 13.5px/1.3 var(--sans); color:var(--ink); transition:opacity var(--dr-t-fast) var(--dr-e-out), border-color var(--dr-t-fast) var(--dr-e-out); }
.dr-slot-filled.is-draggable{ cursor:grab; touch-action:none; }
.dr-slot-filled.is-draggable:active{ cursor:grabbing; }
.dr-slot-filled.is-dragging{ opacity:.4; }
.dr-slot-filled.is-changed{ border-color:rgba(214,218,226,.42); }
.dr-clear{ position:relative; background:none; border:0; padding:2px; cursor:pointer; color:var(--ink-mute); display:flex; }
/* Extends up, down and RIGHT only: leftward it would cover the slot's own label, a dead zone for drag-back (R6). */
.dr-clear::before{ content:''; position:absolute; inset:-13px -26px -13px 0; }
.dr-changed{ font-size:12px; color:var(--accent); }
.dr-drag-hint{ padding-top:2px; }
.dr-slot-foot{ border-top:1px solid var(--line); padding-top:14px; display:flex; flex-direction:column; gap:8px; }
.dr-slot-foot .btn{ justify-content:center; min-height:44px; }
.dr-prompt{ position:relative; background:none; border:0; padding:2px 0; text-align:left; font:400 13px var(--sans); color:var(--accent); cursor:pointer; }
/* Asymmetric: only 6px up (the gap under the filled Support slot, whose drag area it must not take), the rest over
   the non-interactive drag hint below. */
.dr-prompt::before{ content:''; position:absolute; inset:-6px 0 -18px; }
.dr-library .dr-linkbtn,.dr-slots .dr-linkbtn{ position:relative; }
.dr-library .dr-linkbtn::before,.dr-slots .dr-linkbtn::before{ content:''; position:absolute; inset:-8px -5px; }
.dr-pinned{ border-radius:14px; padding:12px 14px; display:flex; flex-direction:column; gap:6px; }

@media (max-width:1023px){
  .dr-library,.dr-slots{ border:0; border-bottom:1px solid var(--line); padding:16px; }
  .dr-slots{ order:-1; }
  /* collapsed, the library is one row (toggle + label), not a tall block with a rotated label (FIX-1) */
  .dr-library.is-collapsed{ flex-direction:row; justify-content:center; align-items:center; gap:10px; padding:12px 16px; }
  .dr-library.is-collapsed .dr-vertical{ writing-mode:horizontal-tb; transform:none; }
}
/* A4 override (ledger L-1) */
@media (prefers-reduced-motion:reduce){
  :root[data-motion="always"] .dr-tile,
  :root[data-motion="always"] .dr-slot-empty,
  :root[data-motion="always"] .dr-slot-filled,
  :root[data-motion="always"] .dr-library{ transition-duration:var(--dr-t-fast) !important; }
  :root[data-motion="always"] .dr-chev{ transition-duration:var(--dr-t-base) !important; }
  :root[data-motion="always"] .dr-tile.is-guiding{ animation-duration:4s !important; animation-iteration-count:infinite !important; }
}