:root{
  --bg:#020609; --panel:#0d141b; --panel-2:#101a23; --stroke:#1f2a35;
  --text:#cfe4ff; --text-dim:#96acc5; --ok:#2cb67d;
  --track-green:#00FF55; --track-white:#ffffff; --track-gray:#bfbfbf;
  --track-blue:#2277ff; --track-amber:#ff9259; --track-red:#ff6659;
  --track-red-strong:#ff5050;
}
*{ box-sizing:border-box }
html,body{ height:100%; margin:0; background:var(--bg); color:var(--text); font:14px/1.35 'Aldrich', system-ui, -apple-system, 'Segoe UI', Roboto; overflow:hidden }
#app{ display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr) auto; height:100%; width:100vw; min-height:100svh }
/* TOP BAR */
header#topbar{ position:relative; z-index:100; min-height:48px; display:flex; align-items:center; gap:8px; padding:6px 112px 6px 8px; background:var(--panel); border-bottom:1px solid var(--stroke); flex-wrap:wrap }
.spawn-control{ position:absolute; right:8px; top:10px; }
.spawn-button{ height:30px; padding:0 10px; border:1px solid #315845; border-radius:8px; background:#10241a; color:var(--track-green); font:inherit; font-size:12px; cursor:pointer; }
.spawn-button:hover:not(:disabled){ background:#193a29; }
.spawn-button:focus-visible{ outline:2px solid var(--track-green); outline-offset:2px; }
.spawn-button:disabled{ opacity:.5; cursor:wait; }
.spawn-feedback{ display:none; position:absolute; top:38px; right:0; width:max-content; max-width:min(380px,calc(100vw - 24px)); padding:10px 12px; border:1px solid var(--stroke); border-radius:8px; background:var(--panel); color:var(--text); font-size:12px; box-shadow:0 6px 18px #0008; }
.spawn-feedback.visible{ display:block; }
.topgroup{ display:flex; align-items:center; gap:6px; padding:4px 6px; background:var(--panel-2); border:1px solid var(--stroke); border-radius:10px }
@media(max-width:600px){ header#topbar .topgroup{ flex-wrap:wrap; max-width:100%; } }
.label{ color:var(--text-dim); font-size:12px }
.dropdown,.info,.input{ height:30px; display:flex; align-items:center; gap:6px; padding:0 10px; border:1px solid var(--stroke); border-radius:8px; background:#0b1117; }
.info{ cursor:default } .info .value{ font-weight:600 }
.dropdown{ position:relative } .dropdown .value{ min-width:56px }
.dropdown-panel{ position:absolute; top:36px; left:0; min-width:220px; background:var(--panel); border:1px solid var(--stroke); border-radius:10px; padding:8px; display:none; z-index:10; box-shadow:0 8px 24px rgba(0,0,0,.35) }
.dropdown.open .dropdown-panel{ display:block }
.dropdown-panel .option{ padding:6px 8px; border-radius:8px; cursor:pointer }
.dropdown-panel .option:hover{ background:#18212b }
.dropdown-panel .option.active{ background:#122030; border:1px solid #233242 }
.row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap }
.input input{ width:64px; background:transparent; color:var(--text); border:none; outline:none; text-align:center }
/* Text-button toggle */
.textbtn{ height:30px; display:flex; align-items:center; gap:6px; padding:0 10px; border:1px solid var(--stroke); border-radius:8px; background:#0b1117; cursor:pointer; user-select:none }
.textbtn.active{ background:#122030; border-color:#2c3d4f; box-shadow:0 0 0 1px #2c3d4f inset }
/* CANVAS */
#main{ position:relative; overflow:hidden } #radar{ width:100%; height:100%; display:block; background:#0b1117; touch-action:none }
#track-overlay{ position:absolute; inset:0; pointer-events:none; font-family:'VCR OSD Mono','Aldrich','Courier New',monospace; font-size:12px; line-height:1.2; color:var(--track-white); }
.track-label{ position:absolute; width:max-content; padding:2px 4px; background:transparent; border:none; border-radius:4px; box-shadow:none; display:flex; flex-direction:column; gap:1px; pointer-events:auto; text-transform:uppercase; transition:transform .1s ease-out; font-size:12px; line-height:1.15; font-variant-numeric:tabular-nums; }
.track-label.dragging{ transition:none; cursor:grabbing; }
.track-label .row{ display:flex; align-items:center; gap:5px; flex-wrap:nowrap; white-space:nowrap; justify-content:flex-start; text-align:left; }
.track-label .row0{ min-height:10px; letter-spacing:1px; color:var(--track-red); }
.track-label .callsign{ letter-spacing:.5px; padding:0 1px; }
.track-label .toggle{ cursor:pointer; user-select:none; padding:0 1px; border-radius:3px; transition:background .15s ease-out, color .15s ease-out; }
.track-label .toggle:hover{ background:rgba(255,255,255,.08); }
.track-label .row2{ gap:0; }
.track-label .row2 .levels{ display:inline-flex; letter-spacing:0; cursor:default; }
.track-label .levels__detail{ display:inline-flex; gap:8px; align-items:center; }
.track-label .level-segment{ position:relative; display:inline-flex; align-items:center; flex:none; }
/* Fit the trend into the normal column gap instead of adding another slot. */
.track-label .level-segment__trend{ position:absolute; left:100%; width:8px; text-align:center; }
.track-label .level-segment__label{ display:none; }
.track-label .level-segment__value{ appearance:none; box-sizing:content-box; display:inline-block; width:3ch; margin:0; padding:0 1px; border:0; border-radius:3px; background:transparent; color:inherit; font:inherit; letter-spacing:inherit; text-align:left; }
.track-label .level-segment.is-repeated .level-segment__value{ opacity:0; }
/* Only an empty XFL has a persistent outline. Filled values retain normal
   duplicate hiding and hover behavior without changing column geometry. */
.track-label .level-segment.is-empty-exit .level-segment__value{ opacity:1; outline:1px solid currentColor; outline-offset:1px; }
.track-label .levels:hover .level-segment__value,
.track-label .levels:focus-within .level-segment__value{ opacity:1; }
.track-label .level-segment.editable .level-segment__value{ cursor:pointer; }
.track-label .level-segment.editable .level-segment__value:hover{ background:rgba(255,255,255,.1); }
.track-label .level-segment.editable .level-segment__value:active{ background:rgba(255,255,255,.18); }
.track-label .level-segment__value:focus-visible{ outline:1px solid currentColor; outline-offset:1px; }
.track-label .row3, .track-label .row4{ letter-spacing:.5px; }
.track-label .row4{ gap:4px; }
.track-label .row4 span{ min-width:2ch; text-align:left; cursor:pointer; padding:0 1px; border-radius:3px; transition:background .15s ease-out, color .15s ease-out; }
.track-label .row4 span:hover{ background:rgba(255,255,255,.1); }
.track-label .row4 span:active{ background:rgba(255,255,255,.18); }
.track-label .row4 .assigned-vertical{ min-width:14px; }
.track-label .row4 .assigned-vertical[data-mode="pending"]{ color:var(--track-amber); }
.track-label .level-segment.is-unable .level-segment__value,
.track-label .row4 .assigned-vertical.is-unable{ color:var(--track-amber); opacity:1; }
.track-label .muted{ color:var(--track-gray); }
.track-label.status-accepted{ color:var(--track-green); }
.track-label.status-accepted .callsign{ color:var(--track-green); }
.track-label.status-accepted .muted{ color:var(--track-green); }
.track-label.status-inbound{ color:var(--track-white); }
.track-label.status-inbound .callsign{ color:var(--track-green); }
.track-label.status-inbound .muted{ color:var(--track-white); }
.track-label.status-preinbound{ color:var(--track-gray); }
.track-label.status-preinbound .callsign{ color:var(--track-white); }
.track-label.status-intruder{ color:var(--track-red); }
.track-label.status-intruder .callsign{ color:var(--track-amber); }
.track-label.status-intruder .muted{ color:var(--track-red); }
.track-label.status-unconcerned{ color:var(--track-gray); }
.track-label.status-unconcerned .callsign{ color:var(--track-gray); }
.track-label.status-unconcerned .muted{ color:var(--track-gray); }
.track-label[data-side="left"],
.track-label[data-side="right"]{ align-items:flex-start; text-align:left; }
.track-label[data-side="left"] .row,
.track-label[data-side="right"] .row{ justify-content:flex-start; }
.track-label .row:hover .muted{ color:inherit; }
.track-label .row:hover .levels{ color:inherit; }
.track-label .row4 span[data-empty="true"]{ color:rgba(255,255,255,.35); }
.track-label .row4 span[data-empty="true"],
.track-label .row4 .assigned-ecl{ opacity:0; }
.track-label:hover .row4 span{ opacity:1; }
.track-label .level-segment .level-segment__value.is-proposed,
.track-label .row4 span.is-proposed,
.track-label .row4 .assigned-vertical.is-proposed,
.track-label .destination.is-proposed{ color:#ff4040; opacity:1; }

.track-label .destination{ appearance:none; margin:0; padding:0; border:0; border-radius:3px; background:transparent; font:inherit; letter-spacing:inherit; cursor:pointer; }
.track-label .destination:hover{ background:rgba(255,255,255,.1); }
.track-label .destination:focus-visible{ outline:1px solid currentColor; outline-offset:1px; }
.track-picker.track-picker--direct-to{ width:300px; min-width:0; max-width:calc(100vw - 16px); max-height:calc(100vh - 16px); overflow-y:auto; }
.direct-to__input,.dropdown-search{ min-width:0; width:100%; background:#101820; border:1px solid #233242; border-radius:6px; padding:6px 8px; color:var(--text); font:inherit; }
.direct-to__input{ text-transform:uppercase; }
.direct-to__hint{ color:var(--text-dim); font-size:11px; }
.track-picker .direct-to__points{ max-height:130px; flex-shrink:0; }
.direct-to__error{ color:#ff9292; font-size:11px; }
.direct-to__error:empty{ display:none; }
button.direct-to__apply{ background:#15372c; border-color:#276348; text-align:center; }
.dropdown-search{ margin-bottom:6px; }
.dropdown-panel [hidden]{ display:none !important; }

.track-picker{ background:#0b1117; border:1px solid var(--stroke); border-radius:10px; padding:10px; display:flex; flex-direction:column; gap:8px; min-width:160px; max-width:220px; max-height:280px; box-shadow:0 12px 28px rgba(0,0,0,.45); color:var(--text); font-size:12px; }
.track-picker__options{ display:flex; flex-direction:column; gap:4px; max-height:170px; overflow-y:auto; padding-right:4px; }
.track-picker__option{ background:transparent; border:1px solid transparent; border-radius:6px; padding:6px 8px; color:inherit; text-align:left; cursor:pointer; font-size:12px; }
.track-picker__option:hover{ background:rgba(255,255,255,.08); }
.track-picker__option.selected{ background:#122030; border-color:#1f2c3b; }
.track-picker__manual{ display:flex; gap:6px; align-items:center; }
.track-picker__manual input{ flex:1; min-width:0; width:100%; background:#101820; border:1px solid #233242; border-radius:6px; padding:4px 6px; color:inherit; font-size:12px; }
.track-picker__clear,.track-picker__controls button,.track-picker__mode-toggle button{ background:#101820; border:1px solid #233242; border-radius:6px; padding:4px 8px; color:inherit; cursor:pointer; font-size:11px; letter-spacing:.5px; text-transform:uppercase; }
.track-picker__clear:hover,.track-picker__controls button:hover,.track-picker__mode-toggle button:hover{ background:#162230; }
.track-picker__controls{ display:flex; gap:6px; justify-content:flex-end; }
.track-picker__controls button.active,.track-picker__mode-toggle button.active{ background:#1f2d3d; border-color:#2f4258; }
.track-picker__mode-toggle{ display:flex; gap:6px; justify-content:flex-end; }
.track-picker--speed .track-picker__options{ max-height:140px; }
.track-picker--vertical .track-picker__options{ max-height:140px; }
.track-picker__manual .track-picker__clear{ background:#181f2a; }
.track-picker__levels{ display:flex; flex-direction:column; gap:8px; }
.track-picker__level{ display:flex; flex-direction:column; gap:6px; }
.track-picker__level-header{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.track-picker__level-label{ min-width:36px; font-weight:600; letter-spacing:.5px; }
.track-picker__level .track-picker__options{ max-height:140px; }
.track-picker__level input{ flex:1; background:#101820; border:1px solid #233242; border-radius:6px; padding:4px 6px; color:inherit; font-size:12px; }

@media (max-width: 960px){
  #track-overlay{ font-size:11px; }
  .track-label{ font-size:11px; }
}
/* BOTTOM BAR */
.sector-panel{ position:absolute; z-index:100; width:360px; max-width:100%; max-height:100%; overflow:auto; background:var(--panel); border:1px solid var(--stroke); border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.3); color:#fff; font:13px/22px 'Courier New',monospace; }
.sector-panel__header{ padding:8px 12px; border-bottom:1px solid var(--stroke); color:#fff; font:12px/18px 'Aldrich',system-ui,sans-serif; cursor:grab; touch-action:none; user-select:none; }
.sector-panel.dragging .sector-panel__header{ cursor:grabbing; }
.sector-panel__header:focus-visible{ outline:1px solid var(--text); outline-offset:-2px; }
.elw-content{ padding:10px 12px 12px; }
.elw-row{ display:flex; align-items:baseline; gap:8px; min-height:22px; white-space:nowrap; overflow-x:auto; }
.elw-row > span{ flex:none; }
.elw-green,.elw-sector--current{ color:var(--track-green); }
.elw-yellow,.elw-sector--skipped{ color:#ffff00; }
.elw-sector--next{ color:#fff; }
.elw-sector--later{ color:var(--track-gray); }
.elw-freetext{ width:20ch; max-width:20ch; overflow:hidden; }
.elw-row [data-field="status"]{ min-width:3ch; }
.elw-mode-s{ display:grid; grid-template-columns:1.3fr 1fr 1fr; }
.elw-mode-s__pair{ display:grid; grid-template-columns:18px max-content; align-items:baseline; }
.elw-mode-s__pair:first-child{ grid-template-columns:42px max-content; }
.elw-mode-s__pair small{ font-size:10px; text-align:right; }
footer#bottombar{ background:var(--panel); border-top:1px solid var(--stroke); padding:8px }
footer.hidden{ display:none } .chip{ padding:6px 10px; background:#0b1117; border:1px solid var(--stroke); border-radius:999px }
/* helpers */
.kv{ display:flex; gap:6px; align-items:center } .k{ color:var(--text-dim) } .v{ font-weight:600 }
/* Live ACC sectorisation */
.sectorisation-trigger{ color:inherit; font:inherit; font-size:12px; }
.sectorisation-editor{ width:min(880px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); overflow:auto; padding:22px; color:var(--text); background:var(--panel); border:1px solid #426078; border-radius:12px; font:13px/1.4 system-ui,sans-serif; }
.sectorisation-editor::backdrop{ background:#0008; }
.sectorisation-editor h2{ margin:0 0 8px; font-size:20px; }
.sectorisation-editor h3{ margin:0 0 6px; font-size:14px; }
.sectorisation-editor p{ color:var(--text-dim); margin:0 0 14px; }
.sectorisation-editor button,.sectorisation-editor select{ padding:7px 10px; border:1px solid #365069; border-radius:6px; background:#142230; color:var(--text); font:inherit; cursor:pointer; }
.sectorisation-editor button:hover:not(:disabled){ background:#20374b; }
.sectorisation-editor button:disabled{ opacity:.4; cursor:default; }
.sectorisation-editor :focus-visible{ outline:2px solid #6cc3ff; outline-offset:2px; }
.sectorisation-toolbar,.sectorisation-actions,.sectorisation-footer{ display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; align-items:center; }
.sectorisation-layout{ display:grid; grid-template-columns:minmax(0,1.4fr) minmax(210px,1fr); gap:20px; }
.sectorisation-matrix{ width:100%; border-collapse:collapse; table-layout:fixed; }
.sectorisation-matrix th:first-child{ width:56px; }
.sectorisation-matrix th{ text-align:left; font-size:12px; color:var(--text-dim); padding:7px; }
.sectorisation-matrix td{ border:1px solid #253846; background:#101a23; }
.sectorisation-matrix label{ display:flex; align-items:center; gap:5px; padding:8px 5px; cursor:pointer; overflow-wrap:anywhere; }
.sectorisation-matrix .is-controlled{ background:#173328; color:#8ee5ae; }
.sectorisation-matrix td:has(input:checked){ outline:2px solid #6cc3ff; outline-offset:-2px; }
.sectorisation-editor input{ accent-color:#66bcff; flex:none; }
.sectorisation-groups{ max-height:440px; overflow:auto; padding:8px; background:#0b1117; border-radius:8px; }
.sectorisation-group{ display:flex; align-items:center; gap:6px; padding:7px; border-radius:5px; cursor:pointer; }
.sectorisation-group:has(input:checked){ background:#173328; color:#8ee5ae; }
.sectorisation-footer{ justify-content:flex-end; margin-bottom:0; }
.sectorisation-editor .sectorisation-apply{ background:#194132; border-color:#3d8460; }
.sectorisation-feedback{ min-height:20px; }
@media(max-width:650px){ .sectorisation-layout{ grid-template-columns:1fr; } .sectorisation-groups{ max-height:170px; } .sectorisation-editor{ padding:14px; } }
/* Multiplayer rooms and human coordination */
.multiplayer-panel{ width:min(520px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); overflow:auto; padding:22px; background:var(--panel); color:var(--text); border:1px solid #426078; border-radius:12px; font:14px/1.4 system-ui,sans-serif; }
.multiplayer-panel::backdrop{ background:#0008; }
.multiplayer-panel h2{ margin-top:0; }
.multiplayer-panel input,.multiplayer-panel select,.multiplayer-panel button{ max-width:100%; padding:8px; margin:4px; border:1px solid #365069; border-radius:5px; background:#142230; color:var(--text); font:inherit; }
.multiplayer-panel input[readonly]{ width:calc(100% - 8px); }
.multiplayer-panel button{ cursor:pointer; }
.multiplayer-panel button:disabled{ opacity:.4; }
.multiplayer-panel [hidden]{ display:none; }
.multiplayer-panel :focus-visible{ outline:2px solid #8fbfff; }
.multiplayer-players{ margin:12px 0; padding:8px; background:#0b1117; }
.multiplayer-players p{ margin:4px; }
.multiplayer-message{ color:#b7d5ff; }
.multiplayer-toast{ position:fixed; bottom:18px; left:50%; transform:translateX(-50%); z-index:15000; max-width:calc(100vw - 24px); padding:10px 14px; border:1px solid #426078; border-radius:6px; background:#142230; color:var(--text); font:13px system-ui,sans-serif; pointer-events:none; }
.track-label .is-incoming{ color:#8fbfff !important; opacity:1 !important; cursor:pointer; }
.track-label .is-incoming::after{ color:#8fbfff !important; }
.track-picker--proposal{ display:flex; flex-direction:column; gap:8px; padding:12px; }
.sectorisation-group select{ min-width:0; max-width:100%; }