/* Nonmodal radar drawer. Uses the existing HUD tokens; does not own radar layout. */
.procedure-selection {
  flex:0 1 auto; min-width:0; max-height:min(480px,58dvh); overflow:auto; overscroll-behavior:contain; margin:0 8px 8px; padding:10px;
  border:1px solid var(--line-strong,rgba(150,190,206,.34)); border-radius:var(--r-2,6px);
  background:var(--scope,#0d1d2a); color:var(--ink,#e7f1f5);
  font-size:12px; line-height:1.5; color-scheme:dark;
}
.procedure-selection[hidden] { display:none; }
.procedure-selection button,.procedure-selection select,.procedure-selection input[type=search] { min-height:32px; font:inherit; }
.procedure-selection button { padding:4px 8px; white-space:normal; }
.procedure-selection :is(button,input,select,summary):focus-visible { outline:2px solid var(--focus,#9eeefb); outline-offset:2px; }
.procedure-selection button:disabled { opacity:.55; cursor:default; }
.procedure-selection :is(button,summary):hover { background:var(--control-hover,rgba(255,255,255,.1)); }
.procedure-selection ::selection { color:var(--accent-ink,#052229); background:var(--accent-strong,#7fe6f4); }
.ps-head { display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px; }
.ps-head strong { font-size:14px; }
.ps-head [data-ps-count] { color:var(--ink-2,#a4bac6); }
.ps-head button { margin-left:auto; }
.ps-master { display:flex; align-items:center; gap:8px; min-height:34px; }
.procedure-selection input[type=checkbox] { flex:none; width:18px; height:18px; margin:0; accent-color:var(--accent-strong,#7fe6f4); }
.ps-filters { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin-top:4px; }
.ps-filters label { display:flex; flex-direction:column; gap:3px; color:var(--ink-2,#a4bac6); }
.ps-filters :is(select,input) { min-width:0; width:100%; max-width:100%; box-sizing:border-box; color:var(--ink,#e7f1f5); background:var(--panel-raised,#152a3a); border:1px solid var(--line-strong,rgba(150,190,206,.34)); border-radius:4px; padding:4px 6px; caret-color:var(--accent-strong,#7fe6f4); }
.ps-filters input::placeholder { color:var(--ink-2,#a4bac6); opacity:1; }
.ps-search { grid-column:1/-1; }
.ps-actions { display:flex; flex-wrap:wrap; gap:4px; margin-top:10px; }
.ps-note,.ps-source { margin:8px 0 0; color:var(--ink-2,#a4bac6); font-size:11px; overflow-wrap:anywhere; }
.ps-list { list-style:none; padding:0; margin:8px 0 0; max-height:min(280px,36dvh); overflow:auto; overscroll-behavior:contain; scrollbar-color:var(--line-strong,rgba(150,190,206,.34)) var(--scope,#0d1d2a); scrollbar-width:thin; }
.ps-row { padding:8px 0; border-top:1px solid var(--line-strong,rgba(150,190,206,.34)); }
.ps-row[data-selected=true] { background:var(--accent-soft,rgba(60,203,224,.13)); }
.ps-row-head { display:flex; align-items:center; gap:6px; padding:0 4px; }
.ps-check { display:flex; align-items:center; gap:8px; flex:1; min-width:0; min-height:36px; cursor:pointer; }
.ps-check>span { min-width:0; overflow-wrap:anywhere; }
.ps-check strong { display:block; font-size:12px; font-weight:650; }
.ps-meta { display:block; color:var(--ink-2,#a4bac6); font-size:11px; }
.ps-row-head>button { flex:none; }
.ps-row details { padding:0 4px; }
.ps-row summary { min-height:28px; padding:4px 0 0; color:var(--ink-2,#a4bac6); cursor:pointer; font-size:11px; }
.ps-fixes { margin:6px 0; }
.ps-fix-group { margin-top:6px; }
.ps-fix-group dt { color:var(--ink-2,#a4bac6); font-size:11px; }
.ps-fix-group dd { margin:2px 0 0; line-height:1.8; overflow-wrap:anywhere; }
.ps-fix small,.ps-game { color:var(--ink-2,#a4bac6); }
.ps-route-separator { color:var(--ink-2,#a4bac6); }
.ps-legend { margin:8px 0 0; font-size:11px; color:var(--ink-2,#a4bac6); }
.ps-legend [data-type=SID] { color:#4aa3ff; }
.ps-legend [data-type=STAR] { color:#ff9f43; }
.ps-legend [data-type=IAP] { color:#3ddc84; }
.procedure-selection-overlay { pointer-events:none; }
@media(max-width:700px) {
  .procedure-selection { margin:0 6px 6px; padding:8px; }
  .procedure-selection button,.procedure-selection select,.procedure-selection input[type=search],.ps-check { min-height:36px; }
  .ps-list { max-height:28dvh; }
}
/* Desktop: a vertical side column on the full radar instead of a full-width band over the scope
   (docs/UI_FIXES_20261103.md §6). Phones keep the in-flow drawer above. --ps-top is set by app.js (scope top). */
@media (min-width:701px) and (min-height:521px), (min-width:951px) {
  .game-stage[data-radar] .scope-panel .procedure-selection:not([hidden]) { position:absolute; top:var(--ps-top,120px); right:8px; bottom:8px; width:min(340px,42%); max-height:none; margin:0; z-index:4; display:flex; flex-direction:column; box-shadow:var(--shadow,0 10px 28px rgba(2,10,16,.38)); }
  .game-stage[data-radar] .procedure-selection:not([hidden]) { padding:8px; }
  .game-stage[data-radar] .procedure-selection .ps-filters { grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; }
  .game-stage[data-radar] .procedure-selection .ps-filters label { font-size:10.5px; gap:2px; }
  .game-stage[data-radar] .procedure-selection :is(select,input[type=search]) { min-height:28px; padding:2px 6px; }
  .game-stage[data-radar] .procedure-selection .ps-master { min-height:26px; }
  .game-stage[data-radar] .procedure-selection .ps-actions { flex-wrap:nowrap; gap:4px; margin-top:6px; }
  .game-stage[data-radar] .procedure-selection .ps-actions button { flex:1 1 0; min-width:0; min-height:26px; padding:2px 4px; font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .game-stage[data-radar] .procedure-selection .ps-note { margin-top:4px; }
  .game-stage[data-radar] .procedure-selection .ps-list { flex:1 1 auto; max-height:none; min-height:120px; }
}
.ps-row:hover,.ps-row:focus-within { background:var(--control-hover,rgba(255,255,255,.08)); }
.ps-row[data-selected=true]:is(:hover,:focus-within) { background:var(--accent-soft,rgba(60,203,224,.2)); }
.ps-chart { color:var(--accent-strong,#7fe6f4); }