/* EuroScope-style workstation: teal toolbar, grey menu strip, black radar, small floating windows, message area + command strip. */
:root{
  --radar:#0b0d0e; --ink:#d9d9d9; --dim:#8b8b8b; --line:#8c8c8c;
  --teal:#0e6b5d; --teal2:#14897a; --tealD:#0a4a41; --tealT:#d9f2ec; --hdr:#3fd0bc;
  --menu:#adadad; --strip:#d2d2d2; --msg:#2b2b2b; --red:#d4141a; --amber:#f0c23c; --ok:#6be28d; --warn:#ff5448; --cyan:#4fd6e0;
  --ui:Tahoma,Verdana,"DejaVu Sans",Arial,sans-serif; --mono:"Lucida Console","DejaVu Sans Mono",Consolas,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden}
body{background:var(--radar);color:var(--ink);font:11px/1.25 var(--ui)}
[hidden]{display:none!important}
#app{position:fixed;inset:0;display:flex;flex-direction:column;user-select:none;-webkit-user-select:none}
/* toolbar */
#tool{display:flex;align-items:stretch;height:18px;background:var(--teal);border-bottom:1px solid #06352e;color:var(--tealT);flex:none;overflow:hidden;white-space:nowrap}
.tb{display:flex;align-items:center;justify-content:center;flex-direction:column;min-width:20px;padding:0 5px;border:0;border-right:1px solid var(--tealD);border-left:1px solid #1d8776;font:700 7.5px/8px var(--ui);text-align:center;color:var(--tealT);background:none;cursor:default;letter-spacing:.02em}
button.tb{cursor:pointer}
button.tb:hover{background:var(--teal2)}
button.tb[aria-pressed=true]{background:#065347;box-shadow:inset 0 0 0 1px #5fd6c4}
.tb.wide{font:700 10px var(--ui);flex-direction:row;gap:6px}
.tb.clock{font:700 10px var(--mono);padding:0 8px}
.tb i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#3fe06a;margin-right:4px}
.tb.bad{background:#8c1d18;color:#fff;animation:blink 1s steps(2) infinite}.tb.bad i{background:#ff6a5e}
.tb.warn{background:#7a5a10}
@keyframes blink{50%{background:#c0332b}}
#tool .sp{flex:1}
/* menu */
#menu{display:flex;align-items:center;height:14px;background:var(--menu);color:#000;font:11px var(--ui);flex:none;position:relative;z-index:80;border-bottom:1px solid #6d6d6d}
#menu>span{padding:0 5px;height:14px;line-height:14px;cursor:default}
#menu>span:hover,#menu>span.on{background:#000;color:#e8e8e8}
.dd{position:absolute;top:14px;background:#c9c9c9;border:1px solid #000;box-shadow:2px 2px 0 rgba(0,0,0,.4);min-width:170px;padding:1px 0;z-index:90;max-height:70vh;overflow:auto}
.dd div{padding:1px 14px 1px 18px;color:#000;position:relative;cursor:default;white-space:nowrap}
.dd div:hover{background:#000;color:#fff}
.dd div.chk::before{content:"\2713";position:absolute;left:5px}
.dd div.dis{color:#777}.dd div.dis:hover{background:none;color:#777}
.dd hr{margin:1px 0;border:0;border-top:1px solid #888}
/* radar */
#stage{position:relative;flex:1;min-height:0;background:var(--radar);overflow:hidden}
#cv{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:default;touch-action:none}
/* windows */
.win{position:absolute;background:var(--radar);border:1px solid #0d5a4e;display:flex;flex-direction:column;min-width:80px;min-height:24px;box-shadow:0 0 0 1px #000}
.win>.t{height:11px;background:var(--teal);display:flex;align-items:center;gap:1px;padding:0 1px;font:8.5px/11px var(--ui);color:var(--tealT);cursor:default;touch-action:none;flex:none}
.win>.t b{width:8px;height:8px;border:1px solid var(--tealD);background:#1c8b7a;font:700 6.5px/8px var(--ui);text-align:center;color:#d9f5ee}
.win>.t em{flex:1;text-align:center;font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.win>.t u{text-decoration:none;width:9px;text-align:center;cursor:pointer;font-size:8px}
.win>.t u:hover{background:#c33}
.win .b{overflow:auto;min-height:0;flex:1;font:11px/1.25 var(--mono);scrollbar-width:thin;scrollbar-color:#14897a #0b0d0e;user-select:text;-webkit-user-select:text}
.win .rs{position:absolute;right:0;bottom:0;width:9px;height:9px;cursor:nwse-resize;background:linear-gradient(135deg,transparent 55%,#14897a 55% 62%,transparent 62% 76%,#14897a 76% 83%,transparent 83%)}
.win.col .b,.win.col .rs{display:none}
table{border-collapse:collapse;width:100%;font:inherit}
th{font-weight:400;color:var(--hdr);text-align:left;padding:0 5px 1px 3px;white-space:nowrap;position:sticky;top:0;background:var(--radar)}
td{padding:0 5px 0 3px;white-space:nowrap;color:#dcdcdc}
tbody tr{cursor:default}tbody tr:hover td{background:#16302c}
tr.sel td{background:#1d5f55;color:#fff}
tr.call td:first-child,tr.call td:nth-child(2){color:var(--amber)}
td.s{color:var(--cyan)}td.hs{color:var(--amber)}td.go{color:var(--ok)}td.pk{color:#9a9a9a}td.bl{color:var(--warn)}td.dim{color:#7d8a88}
.metar{padding:3px 5px}.metar .raw{color:#fff;margin-bottom:3px;word-break:break-word}.metar .kv{display:grid;grid-template-columns:auto 1fr;gap:0 10px}.metar .kv span{color:var(--hdr)}
.strip{border-bottom:1px solid #1d2b29;padding:1px 4px 1px 6px;border-left:4px solid #888;color:#ddd;font-size:10.5px;cursor:default}
.strip.dep{border-left-color:#4fb3d6}.strip.arr{border-left-color:#d6a24f}.strip.sel{background:#1d5f55}.strip.call{background:#3a3210}.strip.off{opacity:.55}
.strip .r1{display:flex;gap:6px;white-space:nowrap}.strip .r1 b{color:#fff;font-weight:400;min-width:58px}.strip .r2{color:#9fd8cf;white-space:nowrap}
.bay{color:var(--hdr);padding:1px 4px;background:#10201e;font-size:10px}
.rad .b{padding:2px 4px;font:11px/1.3 var(--mono)}
.rad .t{color:#7f8c8a}.rad .c{color:#fff}.rad .p{color:#8df0e6}.rad .n{color:#ffcf6a}.rad .tw{color:#9aa}
.rad .src{color:#667;font-size:9px}
.al .b{padding:2px 5px}.al .crit{color:var(--warn)}.al .warn{color:var(--amber)}.al .info{color:#9ad}.al .none{color:#7f8c8a}
.hist .b{padding:2px 4px}.hist div{cursor:default}.hist div:hover{background:#16302c}.hist .t{color:#7f8c8a}
.dbg .b{padding:3px 5px;font-size:10.5px;white-space:pre-wrap;word-break:break-word}
.dbg h4{margin:5px 0 1px;color:var(--hdr);font:400 10.5px var(--mono)}
.dbg pre{margin:0;white-space:pre-wrap;word-break:break-word;color:#cfe}
.dbg input,.dbg select,.dbg button{font:10.5px var(--mono);background:#16201f;color:#dfe;border:1px solid #2c4a46;padding:0 3px;height:15px}
.dbg button{cursor:pointer;background:#0e6b5d}.dbg label{color:#9fc}
.help .b{padding:4px 7px;font:11px/1.45 var(--ui);color:#cfdcd9}.help code{font:11px var(--mono);color:#fff}.help h4{margin:6px 0 1px;color:var(--hdr);font:700 11px var(--ui)}
/* message area + command strip */
#msgwrap{flex:none;display:flex;flex-direction:column;background:#3a3a3a}
#msgwrap>label{font:10px var(--ui);color:#ddd;padding:1px 4px;line-height:11px}
#msg{height:64px;overflow:auto;background:var(--msg);color:#d0d0d0;font:11px/1.35 Arial,var(--ui);padding:3px 14px;user-select:text;-webkit-user-select:text;border-top:1px solid #111;scrollbar-width:thin;scrollbar-color:#777 #2b2b2b;resize:vertical}
#msg .w{color:#ffcf6a}#msg .e{color:#ff8d84}#msg .g{color:#a9ecb5}#msg .tw{color:#9fd3ff}
#cmd{display:flex;align-items:center;gap:4px;background:var(--strip);height:16px;border-top:1px solid #fff}
#sel{font:700 10px var(--ui);color:#124;padding:0 6px;min-width:60px;white-space:nowrap}
#cmd input{flex:1;height:14px;border:0;border-left:1px solid #777;background:#fff;color:#000;font:12px var(--mono);padding:0 3px;outline:none;text-transform:uppercase;min-width:0;border-radius:0}
#cmd small{color:#222;font:9px var(--ui);padding-right:6px;white-space:nowrap}
:focus-visible{outline:1px dotted #fff;outline-offset:-2px}
/* login dialog */
#login{position:fixed;inset:0;background:var(--radar);display:flex;align-items:center;justify-content:center;z-index:200}
.dlg{width:min(320px,92vw);background:#d4d0c8;color:#000;border:2px solid #fff;border-right-color:#404040;border-bottom-color:#404040;box-shadow:0 0 0 1px #000,6px 6px 0 rgba(0,0,0,.5);font:11px var(--ui)}
.dlg .dt{background:var(--teal);color:var(--tealT);font:700 11px var(--ui);padding:2px 6px}
.dlg .db{padding:10px 12px 12px}.dlg label{display:block;margin:8px 0 2px}
.dlg input{width:100%;height:20px;border:2px solid #808080;border-right-color:#fff;border-bottom-color:#fff;background:#fff;font:12px var(--mono);padding:0 4px}
.dlg .err{color:#a00;min-height:14px;margin:4px 0}.dlg .row{display:flex;justify-content:flex-end}
.dlg button{font:11px var(--ui);padding:2px 16px;background:#d4d0c8;border:2px solid #fff;border-right-color:#404040;border-bottom-color:#404040;cursor:pointer}
.dlg button:active{border-color:#404040 #fff #fff #404040}
@media (max-width:820px){.hide-sm{display:none}.tb.opt{display:none}}

#login,#login *{user-select:text;-webkit-user-select:text;-webkit-touch-callout:default}
#login input{pointer-events:auto;-webkit-appearance:none;appearance:none;border-radius:0}
#login{touch-action:manipulation}