/* Radar direct control (docs/RADAR_CONTROL.md) — tool row, data blocks, command menu, pick modes and full-screen radar.
   Uses the HUD tokens of style.css. Kept in its own file: tests/command-panel-layout.test.js parses style.css only. */

/* Tool row under the radar toolbar */
.radar-tools { display:flex; flex-wrap:wrap; align-items:center; gap:4px; padding:0 8px 6px; }
.radar-tools button { min-height:24px; padding:2px 7px; font-size:11px; font-weight:650; color:var(--ink-2); background:transparent; border-color:var(--line); }
.radar-tools button:hover { color:var(--ink); }
.radar-tools button[aria-pressed=true] { color:var(--accent-strong); background:var(--accent-soft); border-color:var(--accent-line); }
.radar-airports { display:inline-flex; gap:0; margin-right:auto; }
.radar-airports button { border-radius:0; margin-left:-1px; }
.radar-airports button:first-child { border-radius:var(--r-1) 0 0 var(--r-1); margin-left:0; }
.radar-airports button:last-child { border-radius:0 var(--r-1) var(--r-1) 0; }
#radar-zoom-in,#radar-zoom-out,#radar-full { width:26px; padding:2px 0; font-size:14px; line-height:1; display:inline-flex; align-items:center; justify-content:center; }
#radar-full svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; }
.radar-tools { flex-wrap:nowrap; }
.radar-tools button { flex:none; white-space:nowrap; }
/* Radar toolbar: buttons keep their labels on one line; the weather chip gives up width first. */
.scope-toolbar button { white-space:nowrap; flex:none; }
.scope-toolbar .weather-chip { flex:1 1 auto; min-width:0; overflow:hidden; }
.scope-toolbar .weather-chip span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Tracks and data blocks */
#scope .data-block { cursor:context-menu; outline:none; }
#scope .data-block:hover rect,#scope .data-block:focus-visible rect { stroke:var(--accent-strong); }
#scope .dimmed { opacity:.32; }
#scope .radar-fix { cursor:pointer; outline:none; }
#scope .radar-fix:hover path,#scope .radar-fix:focus-visible path { stroke:#fff; }
#scope.radar-picking { cursor:crosshair; }
#scope.radar-picking .track { cursor:crosshair; }
.radar-mode { position:absolute; top:6px; left:50%; transform:translateX(-50%); max-width:calc(100% - 16px); padding:3px 10px; border-radius:999px; background:rgba(5,16,24,.86); border:1px solid var(--accent-line); color:var(--accent-strong); font-size:11.5px; font-weight:650; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; pointer-events:none; z-index:2; }

/* Command menu: fixed popover next to the pointer (bottom sheet on narrow screens) */
.radar-menu { position:fixed; z-index:40; width:min(300px,calc(100vw - 16px)); max-height:min(460px,calc(100dvh - 24px)); display:flex; flex-direction:column; background:var(--panel-2); border:1px solid var(--line-strong); border-radius:var(--r-3); box-shadow:var(--shadow-3); -webkit-backdrop-filter:blur(var(--blur)) saturate(1.25); backdrop-filter:blur(var(--blur)) saturate(1.25); overflow:hidden; }
.radar-menu-head { display:flex; align-items:center; gap:8px; padding:7px 8px; border-bottom:1px solid var(--hairline); background:var(--panel-raised); }
.radar-menu-back { min-height:28px; width:28px; padding:0; font-size:16px; line-height:1; flex:none; }
.radar-menu-title { display:flex; flex-direction:column; min-width:0; }
.radar-menu-title strong { font-size:13px; color:#fff; letter-spacing:.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.radar-menu-title span { font-size:11px; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.radar-menu-items { overflow:auto; padding:4px; display:flex; flex-direction:column; gap:2px; }
.radar-menu-item { flex:none; display:grid; grid-template-columns:18px 1fr auto; align-items:center; column-gap:8px; row-gap:1px; width:100%; min-height:34px; padding:5px 8px; text-align:left; font-weight:600; font-size:12.5px; background:transparent; border-color:transparent; border-radius:var(--r-2); color:var(--ink); }
.radar-menu-item.has-sub::after { content:"›"; grid-column:3; grid-row:1; color:var(--ink-3); font-size:15px; }
.radar-menu-item.focused,.radar-menu-item:focus-visible { background:var(--accent-soft); border-color:var(--accent-line); outline:none; }
.radar-menu-item[aria-disabled=true] { color:var(--ink-3); cursor:not-allowed; }
.radar-menu-item[aria-disabled=true].focused { background:var(--control); border-color:var(--line); }
.radar-menu-item.current .rm-label small { margin-left:4px; padding:0 5px; border-radius:999px; background:var(--accent-soft); color:var(--accent-strong); font-size:10px; }
.rm-key { grid-row:1/3; align-self:start; margin-top:2px; font-size:10.5px; color:var(--ink-3); font-weight:700; text-align:center; border:1px solid var(--line); border-radius:var(--r-1); line-height:16px; }
.rm-label { grid-column:2; grid-row:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rm-detail { grid-row:2; grid-column:2/4; font-size:11px; font-weight:500; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.radar-menu-item.has-sub .rm-detail { grid-column:2; }
.radar-menu-item.warn .rm-detail { color:var(--warning); }
.rm-reason { grid-column:2/4; grid-row:3; font-size:11px; font-weight:500; color:var(--late); white-space:normal; line-height:1.35; }
.radar-menu-empty { padding:10px; color:var(--ink-3); font-size:12px; }
.radar-menu-foot { padding:7px 10px 8px; border-top:1px solid var(--hairline); font-size:11.5px; line-height:1.45; color:var(--radio); background:var(--panel-inset); word-break:keep-all; }
.radar-menu-foot:empty { display:none; }
.radar-menu-foot.blocked { color:var(--late); }

/* Flight panel identity line and strip route row (schedule fields when the engine provides them) */
.flight-route { display:flex; flex-wrap:wrap; gap:4px 10px; margin-top:2px; font-size:11.5px; color:var(--ink-2); }
.flight-telephony { color:var(--ink-3); letter-spacing:.03em; }
.flight-game-schedule { padding:0 6px; border:1px solid var(--line-strong); border-radius:999px; color:var(--ink-3); font-size:10.5px; }
.strip.has-route { grid-template-rows:auto auto auto; }
.strip .strip-route { grid-column:1/4; grid-row:3; font-size:11px; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Full-screen radar: the scope takes the centre column, the radio console the left column, 3D hidden or mini. */
.game-stage[data-radar] .scene-caption,.game-stage[data-radar] #world-labels { display:none; }
.game-stage[data-radar] .scope-panel { left:calc(var(--left-width) + var(--edge) * 2); right:calc(var(--right-width) + var(--edge) * 2); width:auto; bottom:calc(var(--dock-height) + 22px); z-index:11; }
.game-stage[data-radar] .scope-panel[open] .scope-content { position:absolute; top:35px; left:0; right:0; bottom:0; display:flex; flex-direction:column; }
.game-stage[data-radar] .scope-panel .scope-wrap { flex:1 1 auto; height:auto; min-height:160px; }
.game-stage[data-radar] .event-panel { top:62px; max-height:none; }
.game-stage[data-radar="full"] #airport-scene { visibility:hidden; inset:auto; left:0; top:0; width:2px; height:2px; }
.game-stage[data-radar="full-3d"] #airport-scene { inset:auto; left:var(--edge); bottom:calc(var(--dock-height) + 22px); width:var(--left-width); height:170px; z-index:10; border:1px solid var(--line); border-radius:var(--r-3); box-shadow:var(--shadow); }
.game-stage[data-radar="full-3d"] .event-panel { bottom:calc(var(--dock-height) + 22px + 178px); }
@media(max-width:700px) {
  .radar-menu { left:8px!important; right:8px; top:auto!important; bottom:8px; width:auto; max-height:62dvh; }
  .radar-tools { padding:0 6px 5px; }
  .radar-tools button { padding:2px 5px; }
  /* Phone: radar on top, the flight panel (data, request, commands) below it; strips, radio and the 3D mini give way. */
  .game-stage[data-radar] .scope-panel { left:8px; right:8px; top:110px; bottom:auto; width:auto; height:min(44dvh,380px); z-index:13; }
  .game-stage[data-radar] .event-panel,.game-stage[data-radar] .traffic-section,#radar-3d { display:none; }
  .game-stage[data-radar] .flight-panel { left:8px; right:8px; width:auto; top:calc(110px + min(44dvh,380px) + 6px); bottom:calc(var(--dock-height) + 16px); max-height:none!important; min-height:0; z-index:12; }
  .game-stage[data-radar] .flight-panel.expanded { top:110px; z-index:16; }
  .game-stage[data-radar] .scope-panel[open] .scope-content { overflow-y:auto; }
  .game-stage[data-radar] .scope-panel .scope-wrap { flex-shrink:0; min-height:96px; }
  .game-stage[data-radar] #runway-status { flex-shrink:0; max-height:48px; overflow-y:auto; }
  .game-stage[data-radar="full-3d"] #airport-scene { visibility:hidden; inset:auto; left:0; top:0; width:2px; height:2px; }
}
@media(max-width:700px) and (max-height:522px) {
  .game-stage[data-radar] .flight-panel:not(.expanded) { top:auto; min-height:44px; max-height:44px!important; z-index:16; }
  .game-stage[data-radar] .flight-panel.expanded { top:92px; }
}

/* Compact toolbars keep all three airport shortcuts and the radar/3D controls reachable. */
@media(max-width:520px) {
  .radar-tools { flex-wrap:wrap; }
  .radar-airports { flex:1 0 auto; }
  .scope-toolbar { flex-wrap:wrap; }
  .scope-toolbar .weather-chip { flex-basis:100%; }
}

/* Area seats use the radar itself; airport models are owned only by local seats. */
.radar-flight-tools { display:flex; align-items:center; flex-wrap:wrap; gap:5px; padding:0 8px 6px; }
.radar-flight-tools label { color:var(--ink-2); font-size:11px; }
.radar-flight-tools :is(select,button) { min-height:28px; padding:3px 7px; font-size:11px; }
.radar-flight-tools #radar-next-request { margin-left:auto; }
.radar-selection { flex:none; margin:0; padding:5px 8px; color:var(--accent-strong); font-size:11.5px; line-height:1.45; border-block:1px solid var(--line); }
.radar-area-note { flex:none; margin:0; padding:4px 8px; color:var(--ink-2); font-size:10.5px; line-height:1.4; }
/* APP/DEP default to the full radar but may switch to the 3D view (docs/UI_FIXES_20261103.md §2): these area-seat
   radar layouts apply only while the full radar is shown, and the camera buttons stay available to leave it. */
.game-stage[data-control-view="radar"][data-radar] :is(#world-labels,.scene-caption,#scene-fallback) { display:none; }
.game-stage[data-control-view="radar"][data-radar] .scope-panel .scope-wrap { min-height:120px; }
@media(max-width:700px),(max-width:950px) and (max-height:520px) {
  .game-stage[data-control-view="radar"][data-radar] .scope-panel { left:8px; right:8px; top:100px; bottom:calc(var(--dock-height) + 52px); width:auto; height:auto; }
  .game-stage[data-control-view="radar"][data-radar] .scope-panel .scope-wrap { flex:1 1 auto; min-height:80px; }
  .game-stage[data-control-view="radar"][data-radar] .scope-panel .scope-content { overflow:hidden; }
  .game-stage[data-control-view="radar"][data-radar] .flight-panel[open] { top:auto; bottom:calc(var(--dock-height) + 56px); max-height:42dvh!important; min-height:0; z-index:16; }
  .game-stage[data-control-view="radar"][data-radar][data-mobile-panel="traffic-panel"] .traffic-section,
  .game-stage[data-control-view="radar"][data-radar][data-mobile-panel="radio-panel"] .event-panel { display:block; z-index:16; }
  .game-stage[data-control-view="radar"][data-radar] .radar-area-note { max-height:40px; overflow:auto; }
  .game-stage[data-control-view="radar"][data-radar] .radar-selection { max-height:44px; overflow:auto; }
}
@media(max-width:950px) and (max-height:520px) {
  .game-stage[data-control-view="radar"][data-radar] .scope-panel { top:64px; bottom:calc(var(--dock-height) + 8px); }
  .game-stage[data-control-view="radar"][data-radar] .radar-area-note { display:none; }
}

.radar-runway-details { flex:none; max-height:min(25dvh,200px); overflow:auto; }
/* Full-screen scope: an opened runway list stays short so the map keeps most of the height (2026-11-04 QA). */
.game-stage[data-radar] .radar-runway-details { max-height:min(16dvh,120px); }
.radar-runway-details>summary { padding:5px 8px; color:var(--ink-2); font-size:11px; cursor:pointer; }
@media(max-width:700px),(max-width:950px) and (max-height:520px) {
  .game-stage[data-control-view="radar"][data-radar] { --dock-height:80px; }
  .game-stage[data-control-view="radar"][data-radar] .game-dock { height:80px; grid-template-rows:34px 30px; }
  .game-stage[data-control-view="radar"][data-radar] .playback { grid-row:1; }
  .game-stage[data-control-view="radar"][data-radar] .utility-controls { grid-row:2; }
  .game-stage[data-control-view="radar"][data-radar] .scope-panel { bottom:calc(var(--dock-height) + 16px); }
}

/* Control label state (2026-11-04; src/core/control-label-state.js), same colours on the radar and the 3D labels:
   grey translucent >5 min before control, yellow within 5 min, green controllable, red blinking on a predicted conflict. */
#scope .data-block.ctl-pending { opacity:.5; }
#scope .data-block.ctl-pending text { fill:#8f9ca4; }
#scope .data-block.ctl-soon text { fill:#ffd24a; }
#scope .data-block.ctl-active text { fill:#6fe08a; }
#scope .data-block.ctl-risk text { fill:#ff4d4d; font-weight:700; }
#scope .data-block.ctl-risk rect { stroke:#ff4d4d; stroke-opacity:.9; }
#scope .data-block.ctl-risk { animation:ctl-blink .8s steps(1,end) infinite; }
#scope .data-block.selected text { font-weight:700; }
@keyframes ctl-blink { 50% { opacity:.2; } }
.world-label[data-control="pending"] { opacity:.5; color:#8f9ca4; border-color:rgba(143,156,164,.45); }
.world-label[data-control="soon"] { color:#ffd24a; border-color:rgba(255,210,74,.7); }
.world-label[data-control="active"] { color:#6fe08a; border-color:rgba(111,224,138,.7); }
.world-label[data-control="risk"] { color:#ff4d4d; border-color:#ff4d4d; font-weight:700; animation:ctl-blink .8s steps(1,end) infinite; }
.world-label[data-control] .world-label-meta { color:inherit; opacity:.85; }
@media (prefers-reduced-motion:reduce) { #scope .data-block.ctl-risk, .world-label[data-control="risk"] { animation-duration:1.6s; } }