:root {
  --bg: rgba(10, 22, 44, 0.86);
  --bg2: rgba(10, 22, 44, 0.96);
  --fg: #eef3ff;
  --dim: #9fb0cc;
  --accent: #ffc83d;
  --ok: #3ddc84;
  --bad: #ff5c5c;
  --warn: #ff9f1c;
  --radius: 10px;
  --font: -apple-system, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "SF Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; touch-action: pan-x pan-y; }
:root { --ctlw: 90px; } /* room kept free on the right for the button column */
html, body { margin: 0; height: 100%; height: 100dvh; overflow: hidden; background: #0b1b33; color: var(--fg); font-family: var(--font); touch-action: none; overscroll-behavior: none; }
body { position: fixed; inset: 0; width: 100%; }
#map { position: absolute; inset: 0; }
.hidden { display: none !important; }
.spacer { flex: 1; }

#topbar {
  position: absolute; top: 0; left: 0; right: 0; height: calc(40px + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) 12px 0 12px; display: flex; align-items: center; gap: 12px;
  background: var(--bg); z-index: 10; font-size: 15px; overflow: hidden; white-space: nowrap;
}
@media (max-width: 900px) { #topbar { gap: 6px; padding-left: 8px; padding-right: 8px; } .clock { font-size: 14px; } }
.brand { font-weight: 700; letter-spacing: 2px; color: var(--accent); }
.ver { font: 11px var(--mono); color: var(--dim); letter-spacing: 0; margin-left: -4px; }
.seatbox .ver { font-size: 12px; margin-left: 2px; }
.badge { padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; background: #334; }
.badge.ok { background: var(--ok); color: #04240f; }
.badge.off { background: var(--bad); color: #fff; }
.badge.sim { background: #4c7fe0; color: #fff; }
.clock { font-family: var(--mono); font-size: 16px; color: var(--fg); }

#panel {
  position: absolute; top: calc(48px + env(safe-area-inset-top)); left: 8px; width: var(--panelw, 318px); z-index: 10;
  background: var(--bg); border-radius: var(--radius); padding: 8px 10px; box-shadow: 0 2px 10px rgba(0,0,0,.4);
  max-height: calc(100% - 56px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
}
.row { display: flex; gap: 6px; margin-bottom: 6px; }
.row:last-child { margin-bottom: 0; }
.cell { flex: 1; display: flex; align-items: baseline; gap: 3px; background: rgba(255,255,255,.06); border-radius: 6px; padding: 4px 5px; min-width: 0; overflow: hidden; }
.cell.wide { flex: 3; }
.lbl { font-size: 10px; color: var(--dim); font-weight: 700; width: 30px; flex: none; }
.val { font-family: var(--font); font-variant-numeric: tabular-nums; font-size: 17px; font-weight: 700; white-space: nowrap; }
.val.dim { color: var(--dim); font-weight: 400; }
.val.mono { font-size: 12px; font-weight: 400; }
.unit { font-size: 10px; color: var(--dim); }
.row.big .val { font-size: 26px; }
.row.big .cell { overflow: hidden; flex-wrap: wrap; row-gap: 0; }   /* a 5-digit altitude pushes the FL badge to its own line instead of over the digits */
.cell .fl { font-size: 11px; font-weight: 700; color: var(--accent); white-space: nowrap; }
.row.big .lbl { width: 34px; }
.row.small .val { font-size: 12px; }

#nearby { margin-top: 6px; }
#nearby:empty { display: none; }
.ad {
  display: block; padding: 0; margin-top: 6px; border-radius: 6px;
  background: rgba(255, 200, 61, 0.14); border: 1px solid rgba(255, 200, 61, 0.45); cursor: pointer;
}
.ad .adhead { display: flex; align-items: center; gap: 8px; padding: 6px 8px; }
.ad .arrow { color: var(--dim); font-size: 11px; padding: 2px 4px; transition: transform .15s; }
.ad.open .arrow { transform: rotate(180deg); color: var(--accent); }
.ad .addocs { display: none; border-top: 1px solid rgba(255, 200, 61, 0.3); padding: 3px 8px 6px; }
.ad.open .addocs { display: block; }
.ad .doc { display: flex; align-items: center; gap: 8px; padding: 6px 6px; border-radius: 4px; font-size: 12px; }
.ad .doc:hover, .ad .doc:active { background: rgba(255, 255, 255, 0.1); }
.ad .doc b { font-family: var(--mono); color: var(--accent); min-width: 56px; }
.ad .doc .t { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ad .doc .pages { color: var(--dim); font-size: 10px; white-space: nowrap; }
.ad .icao { font-family: var(--mono); font-weight: 700; font-size: 16px; color: var(--accent); }
.ad .name { flex: 1; font-size: 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ad .dist { font-family: var(--mono); font-size: 12px; color: var(--dim); white-space: nowrap; }
.ad .docs { display: flex; gap: 4px; }
.ad .docs button { font-size: 10px; padding: 3px 6px; }

#controls {
  position: absolute; right: 8px; top: calc(48px + env(safe-area-inset-top)); z-index: 10;
  display: flex; flex-direction: column; gap: 8px; align-items: stretch;
  max-height: calc(100% - 56px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
}
#controls::-webkit-scrollbar { display: none; }
@media (max-height: 980px) {
  :root { --ctlw: 150px; }
  #controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 6px; align-items: start; }
  #controls .ctl { min-width: 0; padding: 10px 6px; letter-spacing: .5px; }
}
@media (max-height: 700px) { #controls .ctl { padding: 8px 4px; font-size: 11px; } }
.ctlgroup { display: flex; flex-direction: column; background: var(--bg); border-radius: var(--radius); overflow: hidden; }
.ctlgroup .ctl { border-radius: 0; }
.ctl {
  appearance: none; border: 0; background: var(--bg); color: var(--fg); font: 600 12px var(--font);
  letter-spacing: 1px; padding: 10px 12px; border-radius: var(--radius); min-width: 64px; cursor: pointer; text-decoration: none; text-align: center;
}
.ctl.on { background: var(--accent); color: #1b1300; }
.ctl.close { background: var(--bad); color: #fff; min-width: 44px; }
.ctl:active { filter: brightness(1.3); }
/* exam mode: the aids the examiner switched off are not offered at all; the badge is a steady red */
.ctl.locked { display: none !important; }
.badge.exam { background: var(--bad); color: #fff; }
/* web edition (body.web): the session code on the pilot's badge, the SESSION block of the seat dialog, the controller's top bar */
.badge.room { background: #19c3e6; color: #042a3a; font-family: var(--mono); letter-spacing: 1px; }
body:not(.web) #seatRoomBox, body.web #seatXp, body.web #seatMs, body:not(.web) #roomBar { display: none !important; }
.roombox { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid #19c3e6; border-radius: 10px; background: rgba(25, 195, 230, .06); }
.roombox h3 { margin: 0; font-size: 12px; letter-spacing: 2px; color: #19c3e6; }
.roombox .chk { flex-direction: row; align-items: center; gap: 8px; font-size: 12px; }
.roombox .chk input { width: 16px; height: 16px; }
#roomBar { display: flex; align-items: center; gap: 8px; }
.roomcode { font: 700 18px var(--mono); letter-spacing: 3px; color: #042a3a; background: #19c3e6; border: 0; border-radius: 8px; padding: 3px 10px; cursor: pointer; }
.roomcode.big { font-size: 26px; text-align: center; margin: 0; padding: 8px; }
.roomctrl { font: 12px var(--mono); color: var(--dim); letter-spacing: 1px; }
#qrSheet { position: absolute; inset: 0; z-index: 30; background: rgba(5, 12, 26, .88); display: flex; align-items: flex-start; justify-content: center; padding: 16px; overflow: auto; }
#qrSheet .qr { width: 100%; max-width: 300px; margin: 0 auto; background: #fff; border-radius: 8px; image-rendering: pixelated; }
@media (max-width: 900px) { .roomcode { font-size: 14px; letter-spacing: 2px; } .roomctrl { display: none; } }
.ctl.tiny.exam.on { background: var(--bad); color: #fff; }
/* the running exam in the top bar (R1.3): id · code · elapsed, monospaced so the clock does not jitter */
.ctl.tiny.exam.on { font-family: var(--mono); font-size: 11px; letter-spacing: 0; }
.ctl.tiny.exam.on .el { opacity: .85; }
/* the END and the open-exam dialogs (R1.4, R7.3): the warning in red, the typed word plain (no uppercase transform) */
.seatbox .warn { color: var(--bad); font-weight: 700; font-size: 13px; margin: 0; line-height: 1.4; }
#examConfirm { text-transform: none; }
.sheetbtns .ctl:disabled { opacity: .4; cursor: default; filter: none; }
/* the recording overlay (R2.1): above every other sheet, the consent line plain and readable */
#examOverlay .consent { margin: 2px 0 4px 0; font-size: 14px; line-height: 1.45; }
#examOverlay h2 { font-family: var(--mono); font-size: 14px; letter-spacing: 1px; }
/* NO MICROPHONE / UPLOAD FAILING next to the exam badge (R2.2, R3.2) */
/* R11: the EXAM PAUSED panel on the pilot page: above everything, the page behind it takes no pointer events */
#examPause { z-index: 200; background: rgba(5, 12, 26, .96); }
#examPause h2 { font-family: var(--mono); font-size: 16px; letter-spacing: 1px; color: var(--warn); }
#examPause .consent.big { font-size: 15px; font-weight: 700; }
#examPause .micready { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--ok); }
#examPause .micready .vu { width: 90px; height: 12px; }
#examPauseMic .consent { margin: 2px 0 4px 0; font-size: 13px; line-height: 1.45; }
/* R11: the examiner's PAUSE / RESUME button: amber while the exam is paused */
.ctl.tiny.pausebtn.paused { background: var(--warn); color: #1b1300; }
.ctl.tiny.exam.on .paused { color: #1b1300; background: var(--warn); border-radius: 3px; padding: 0 3px; margin-left: 2px; }
.badge.mic { cursor: pointer; }
.badge.mic.bad { background: var(--bad); color: #fff; animation: blink 1s steps(2, start) infinite; }
@keyframes blink { 50% { opacity: .35; } }
/* the VU bar with the state colour (R3.6, R8.4): ok green, silent amber, stopped / offline red, none grey */
.vu { display: inline-block; width: 46px; height: 10px; border-radius: 3px; background: rgba(255,255,255,.14); vertical-align: middle; overflow: hidden; flex: none; position: relative; }
.vu i { display: block; height: 100%; width: 0; background: var(--ok); transition: width .15s linear; }
.vu.silent i { background: var(--warn); }
.vu.silent { box-shadow: inset 0 0 0 1px var(--warn); }
.vu.stopped, .vu.offline { background: var(--bad); animation: blink 1s steps(2, start) infinite; }
.vu.stopped i, .vu.offline i { width: 0 !important; }
.vu.none { box-shadow: inset 0 0 0 1px #556; }
#examinerMic { width: 60px; height: 12px; }
/* the recording panel (R8.3) */
.seatbox.wide { max-width: 640px; }
table.rec { width: 100%; border-collapse: collapse; font-size: 12px; }
table.rec th { text-align: left; color: var(--dim); font-size: 10px; letter-spacing: 1px; padding: 3px 6px; border-bottom: 1px solid #345; }
table.rec td { padding: 4px 6px; border-bottom: 1px solid rgba(255,255,255,.07); vertical-align: middle; }
table.rec .vu { margin-left: 6px; }
.micstate { font: 700 10px var(--mono); letter-spacing: 1px; padding: 1px 5px; border-radius: 3px; background: #556; color: #fff; }
.micstate.ok { background: var(--ok); color: #04240f; }
.micstate.silent { background: var(--warn); color: #1b1300; }
.micstate.stopped, .micstate.offline { background: var(--bad); }
#tfGroup { display: inline-flex; flex-direction: row; align-items: center; gap: 2px; flex-shrink: 0; }
#tfGroup .tflabel { font-size: 10px; color: var(--dim); letter-spacing: 1px; margin-right: 2px; }
#tfGroup .ctl.tiny { padding: 5px 6px; }
.meta.warn { color: #ffb347; font-weight: 600; }
/* the controller page: the aerodrome sheet beside the strips */
body.atc #adSheet { left: 8px; top: calc(48px + env(safe-area-inset-top)); width: 380px; max-height: calc(100% - 64px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); user-select: none; -webkit-user-select: none; }
/* the route's aerodromes in the pilot box: departure, touch and go, destination */
.ad .role { font: 700 9px var(--mono); letter-spacing: 1px; padding: 2px 5px; border-radius: 3px; background: rgba(255,255,255,.14); color: var(--fg); white-space: nowrap; }
.ad .role.departure { background: #3ddc84; color: #04240f; }
.ad .role.destination { background: #d400d4; color: #fff; }
.ad .role.touch-go { background: #4cc9f0; color: #042a3a; }

#banner {
  position: absolute; left: 50%; transform: translateX(-50%); top: calc(52px + env(safe-area-inset-top)); z-index: 11;
  padding: 8px 16px; border-radius: 8px; font-weight: 700; font-size: 14px; background: var(--warn); color: #1b1300; box-shadow: 0 2px 8px rgba(0,0,0,.4);
}
#banner.bad { background: var(--bad); color: #fff; }

/* aircraft marker and aerodrome markers */
.acft { width: 72px; height: 72px; display: block; filter: drop-shadow(0 0 3px #000) drop-shadow(0 0 6px rgba(0,0,0,.6)); }
.admark { display: flex; flex-direction: column; align-items: center; cursor: pointer; pointer-events: auto; }
/* a 16 px dot with a 32 px tap area around it (the ::after), so it can be hit when zoomed out */
.admark .dot { position: relative; width: 16px; height: 16px; border-radius: 50%; background: #d12; border: 2px solid #fff; box-shadow: 0 0 3px #000; }
.admark .dot::after { content: ''; position: absolute; inset: -8px; border-radius: 50%; }
.admark.hel .dot { border-radius: 3px; background: #15a; }
.admark.hel .dot::after { border-radius: 3px; }
.admark:hover .dot { filter: brightness(1.3); }
.admark .tag { font: 700 11px var(--mono); color: #111; background: rgba(255,255,255,.85); padding: 0 3px; border-radius: 3px; margin-top: 1px; }

/* document overlay */
#docOverlay {
  position: absolute; inset: 0; z-index: 20; background: #1a1a1a; display: flex; flex-direction: column;
  padding-top: env(safe-area-inset-top);
}
/* the document list of an aerodrome: a small panel under the buttons, the map stays visible */
/* the aerodrome sheet (from a map marker) sits under the left panel; its top follows the panel's height */
#adSheet { position: absolute; left: 8px; top: 420px; width: var(--panelw, 318px); max-height: 46%; z-index: 12; display: flex; flex-direction: column; border-radius: var(--radius); box-shadow: 0 4px 18px rgba(0,0,0,.6); overflow: hidden; }
.dochead { display: flex; align-items: center; gap: 6px; padding: 6px 8px; background: var(--bg2); font-weight: 700; }
#docTabs { display: flex; gap: 4px; padding: 4px 8px; background: #222; overflow-x: auto; }
#docTabs .ctl { min-width: 0; padding: 6px 10px; font-size: 11px; }
#docPages { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; padding: 6px; cursor: grab; }
#docPages.dragging { cursor: grabbing; user-select: none; }
#docPages img { max-width: none; user-select: none; -webkit-user-drag: none; }
#docPages img { display: block; margin: 0 auto 8px auto; background: #fff; box-shadow: 0 1px 6px rgba(0,0,0,.6); }
#adSheet { background: var(--bg2); }
#adDocs { padding: 10px; display: flex; flex-direction: column; gap: 8px; overflow: auto; }
#adDocs .doc { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; background: rgba(255,255,255,.08); font-size: 14px; cursor: pointer; }
#adDocs .doc .pages { color: var(--dim); font-size: 12px; margin-left: auto; }
#adDocs .meta { color: var(--dim); font-size: 13px; padding: 4px 2px; }

.maplibregl-ctrl-attrib { font-size: 10px; }
@media (max-width: 700px) {
  :root { --panelw: 250px; }
  .row.big .val { font-size: 20px; }
  .val { font-size: 15px; }
  .ctl { min-width: 52px; padding: 8px 8px; }
}

/* simulation sheet */
#simSheet { position: absolute; inset: 0; max-height: 100dvh; z-index: 20; background: var(--bg2); display: flex; flex-direction: column; padding-top: env(safe-area-inset-top); }
.sheetbody { flex: 1; min-height: 0; padding: 10px 11px calc(10px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 10px; max-width: 440px; width: 100%; margin: 0 auto; overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.sheetbody label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--dim); font-weight: 700; }
.sheetbody select { font: 13px var(--font); padding: 7px; border-radius: 8px; border: 1px solid #456; background: #0f2242; color: var(--fg); }
.sheetbody .meta { color: var(--dim); font-size: 11px; margin: 0; }
.sheetbtns { display: flex; gap: 10px; flex-wrap: wrap; }
.sheetbtns .ctl { flex: 1; padding: 11px; font-size: 11px; }
.ctl.sim { background: #4c7fe0; color: #fff; }
.ctl.sim.running { background: var(--ok); color: #04240f; }

.twocol { display: flex; gap: 12px; }
.twocol label { flex: 1; min-width: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 28px; }
.chips:empty::before { content: "direct"; color: var(--dim); font-weight: 400; font-size: 13px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 14px; background: rgba(255,255,255,.12); color: var(--fg); font-size: 13px; font-weight: 600; }
.chip b { cursor: pointer; color: var(--bad); }
.viaadd { display: flex; gap: 8px; align-items: stretch; }
.viaadd select { flex: 1; min-width: 0; }
.viaadd .ctl { min-width: 0; padding: 8px 10px; font-size: 11px; }
#pickHint { position: absolute; left: 50%; transform: translateX(-50%); bottom: 24px; z-index: 11; padding: 10px 16px; border-radius: 8px; background: var(--accent); color: #1b1300; font-weight: 700; display: flex; gap: 12px; align-items: center; }
#pickHint .ctl { padding: 6px 10px; min-width: 0; }
.wpmark { display: flex; flex-direction: column; align-items: center; pointer-events: auto; cursor: grab; touch-action: none; }
.wpmark.passed { opacity: .45; pointer-events: none; }
.wpmark.next .tri { border-bottom-color: #ff2d2d; }
.wpmark .tri { width: 0; height: 0; border-left: 11px solid transparent; border-right: 11px solid transparent; border-bottom: 20px solid #d400d4; filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 1px #000); }
.wpmark .tag { font: 700 12px var(--mono); color: #d400d4; background: rgba(255,255,255,.92); padding: 1px 5px; border-radius: 4px; margin-top: 2px; white-space: nowrap; border: 1px solid #d400d4; }
.wpmark .tag .agl { font-weight: 400; color: #555; }
.wpmark.issue .tag { border-color: #e8322d; color: #b3000c; }
.wpmark.issue .tri { border-bottom-color: #e8322d; }

.fl { font: 700 11px var(--mono); color: var(--accent); margin-left: 4px; }
.mini { appearance: none; border: 0; border-radius: 5px; background: rgba(255,255,255,.14); color: var(--fg); font: 700 14px var(--font); width: 30px; height: 26px; cursor: pointer; margin: 0 2px; }
.mini.txt { width: auto; padding: 0 8px; font-size: 10px; letter-spacing: 1px; }
#inside:empty { display: none; }
.asp { display: flex; align-items: center; gap: 8px; padding: 5px 8px; margin-top: 6px; border-radius: 6px; background: rgba(255,255,255,.08); border-left: 4px solid #888; }
.asp.CTR { border-left-color: #ff5c5c; } .asp.TMA { border-left-color: #ff9f1c; } .asp.CTA { border-left-color: #ffd166; } .asp.FIZ { border-left-color: #4cc9f0; }
.asp .t { font: 700 11px var(--mono); color: var(--dim); width: 30px; }
.asp .n { flex: 1; font-size: 13px; font-weight: 700; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.asp .lim { font: 11px var(--mono); color: var(--dim); white-space: nowrap; }
#banner.asp-warn { animation: blink 1s steps(2, start) infinite; font-size: 16px; }
#banner.asp-warn.CTR { background: var(--bad); color: #fff; }
#banner.asp-warn.TMA, #banner.asp-warn.CTA { background: var(--warn); color: #1b1300; }
#banner.asp-warn.FIZ { background: #4cc9f0; color: #042a3a; }
@keyframes blink { 50% { opacity: 0.35; } }
#ctxMenu { position: absolute; z-index: 15; max-height: calc(100% - 16px); overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 8px; background: var(--bg2); border-radius: var(--radius); box-shadow: 0 2px 12px rgba(0,0,0,.6); min-width: 200px; }
#ctxMenu .meta { color: var(--dim); font: 12px var(--mono); padding: 2px 4px; }

/* seat dialog, squawk keypad, traffic, next waypoint */
#seat, #voiceSheet, #sqkSheet, #altSheet, #comSheet, #clrSheet, #cardSheet, #hxSheet, #examEndSheet, #examOpenSheet, #examOverlay, #recSheet, #atcIdSheet, #examPause {
  position: absolute; inset: 0; z-index: 30; background: rgba(5, 12, 26, .88); display: flex; align-items: flex-start; justify-content: center;
  padding: calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom)); overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
.seatbox { width: 100%; max-width: 340px; max-height: calc(100dvh - 24px); overflow: auto; margin: auto; background: var(--bg2); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 6px 30px rgba(0,0,0,.6); }
/* short screens (iPad landscape in Safari): tighter keypads and dialogs so they fit without scrolling */
@media (max-height: 760px) {
  .seatbox { gap: 8px; padding: 14px; }
  .keypad { gap: 6px; }
  .keypad .ctl { padding: 9px; font-size: 18px; }
  .sqkval { font-size: 34px; padding: 2px; letter-spacing: 8px; }
  .ctl.big, .sheetbtns .ctl { padding: 10px; }
  .seatbox .meta, .sheetbody .meta { font-size: 12px; }
}
.seatbox h2 { margin: 0 0 3px 0; font-size: 15px; }
.seatbox label { display: flex; flex-direction: column; gap: 4px; font-size: 10px; color: var(--dim); font-weight: 700; }
.seatbox input, .sheetbody input { font: 700 15px var(--mono); padding: 7px; border-radius: 8px; border: 1px solid #456; background: #0f2242; color: var(--fg); text-transform: uppercase; }
.seatbox .meta { color: var(--dim); font-size: 11px; margin: 3px 0 0 0; }
.ctl.big { padding: 14px; font-size: 13px; }
.ctl.atc { background: #19c3e6; color: #042a3a; }
.ctl.tiny { padding: 5px 8px; min-width: 0; font-size: 10px; background: rgba(255,255,255,.12); }
.cell.tap { cursor: pointer; outline: 1px dashed rgba(255,255,255,.25); }
.sqkval { font: 700 44px var(--mono); letter-spacing: 10px; text-align: center; padding: 6px; }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.keypad .ctl { padding: 16px; font-size: 20px; }
.acft.traffic, .traffic .acft { width: 52px; height: 52px; }
.datablock { font: 700 12px var(--mono); color: #042a3a; background: rgba(25, 195, 230, .9); padding: 2px 6px; border-radius: 4px; white-space: pre; pointer-events: none; box-shadow: 0 0 2px #000; margin-left: 18px; }
.datablock.own { background: rgba(255, 45, 45, .9); color: #fff; }

/* controller page */
.badge.atc { background: #19c3e6; color: #042a3a; }
#strips { position: absolute; top: calc(48px + env(safe-area-inset-top)); left: 8px; bottom: 8px; width: 380px; z-index: 10; overflow: auto; display: flex; flex-direction: column; gap: 8px; }
#strips .meta { background: var(--bg); border-radius: var(--radius); padding: 10px; color: var(--dim); font-size: 13px; }
.strip { background: var(--bg); border-radius: var(--radius); padding: 8px 10px; border-left: 6px solid #888; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.4); font-size: 12px; }
.strip.selected { outline: 2px solid var(--accent); }
.strip.alert { animation: stripblink 1s steps(2, start) infinite; }
@keyframes stripblink { 50% { background: rgba(120, 20, 20, .9); } }
.strip .l1 { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.strip .cs { font: 700 18px var(--mono); color: var(--accent); }
.strip .kind { font-size: 10px; color: var(--dim); font-weight: 700; }
.strip .sqk { font: 700 14px var(--mono); margin-left: auto; }
.strip .sqk.emerg { color: #fff; background: var(--bad); padding: 0 4px; border-radius: 3px; }
.strip .online { font-size: 10px; color: var(--ok); }
.strip .online.off { color: var(--bad); }
.strip .l2, .strip .l3, .strip .l4 { margin-top: 3px; font-variant-numeric: tabular-nums; }
.strip b { font-size: 13px; }
.strip .dim { color: var(--dim); }
.aspchip { display: inline-block; padding: 1px 5px; border-radius: 4px; background: rgba(255,255,255,.1); border-left: 3px solid #888; font-weight: 700; }
.aspchip.CTR { border-left-color: #ff5c5c; } .aspchip.TMA { border-left-color: #ff9f1c; } .aspchip.CTA { border-left-color: #ffd166; } .aspchip.FIZ { border-left-color: #4cc9f0; }
.strip .warn { margin-top: 5px; padding: 4px 6px; border-radius: 5px; font-weight: 700; background: var(--warn); color: #1b1300; }
.strip .warn.CTR, .strip .warn.conflict, .strip .warn.emerg { background: var(--bad); color: #fff; }
.strip .warn.FIZ { background: #4cc9f0; color: #042a3a; }
#alerts { position: absolute; left: 396px; right: calc(var(--ctlw) + 6px); top: calc(48px + env(safe-area-inset-top)); z-index: 11; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; pointer-events: none; }
#alerts .alert.more { animation: none; background: var(--bg); color: var(--dim); font-weight: 400; }
body.atc #banner { top: auto; bottom: 40px; }
#alerts .alert { padding: 6px 14px; border-radius: 8px; font-weight: 700; font-size: 14px; background: var(--warn); color: #1b1300; box-shadow: 0 2px 8px rgba(0,0,0,.4); animation: blink 1s steps(2, start) infinite; white-space: nowrap; }
#alerts .alert.CTR, #alerts .alert.conflict, #alerts .alert.emerg { background: var(--bad); color: #fff; }
#alerts .alert.FIZ { background: #4cc9f0; color: #042a3a; }
.atc-acft .acft { width: 60px; height: 60px; }
.atc-acft.selected .acft { filter: drop-shadow(0 0 5px #fff) drop-shadow(0 0 3px #000); }
.atc-acft.red .acft { animation: blink 1s steps(2, start) infinite; }
.atc-acft .ering { position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; margin: -60px 0 0 -60px; border: 5px solid #e8322d; border-radius: 50%; box-shadow: 0 0 14px #e8322d, inset 0 0 14px #e8322d; pointer-events: none; animation: ering 1.1s ease-out infinite; }
@keyframes ering { 0% { transform: scale(.4); opacity: 1; } 100% { transform: scale(1.4); opacity: 0; } }
.atc-acft.emerg .acft { filter: drop-shadow(0 0 6px #e8322d); }
.atc-acft { cursor: pointer; }
.datablock.selected { outline: 2px solid var(--accent); }
.wpmark.atc .tri { border-bottom-color: var(--c, #d400d4); }
.wpmark.atc .tag { color: #111; }
.wpmark.atc { pointer-events: none; opacity: .95; }
.wpmark.atc .tag { border-color: var(--c, #d400d4); }
.wpmark.atc.sel { opacity: 1; }
.wpmark.atc.sel .tag { font-size: 13px; }
body.atc #controls { top: calc(48px + env(safe-area-inset-top)); }
@media (max-width: 1100px) { #strips { width: 290px; } #alerts { left: 306px; } #alerts .alert { font-size: 12px; white-space: normal; } }
@media (max-width: 700px) { #strips { width: 260px; } #alerts { left: 276px; } .strip .cs { font-size: 15px; } }

/* searchable aerodrome fields */
.pick { position: relative; }
.pick input { width: 100%; font: 16px var(--font); padding: 10px; border-radius: 8px; border: 1px solid #456; background: #0f2242; color: var(--fg); text-transform: none; }
.picklist { position: absolute; left: 0; right: 0; top: 100%; z-index: 5; max-height: 240px; overflow: auto; background: #132a4f; border: 1px solid #456; border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.6); -webkit-overflow-scrolling: touch; }
.pickrow { padding: 10px 12px; font-size: 15px; font-weight: 400; color: var(--fg); cursor: pointer; border-bottom: 1px solid rgba(255,255,255,.06); }
.pickrow b { font-family: var(--mono); color: var(--accent); margin-right: 6px; }
.pickrow i { font: 700 10px var(--font); color: #4cc9f0; }
.pickrow.on { background: rgba(255, 200, 61, .18); }
.pickrow.dim { color: var(--dim); font-style: italic; }
.pickrow:active, .pickrow:hover { background: rgba(255,255,255,.12); }
.viaadd .pick { flex: 1; min-width: 0; }

/* round 3: warnings acknowledged, FIS, vertical limits, 3D */
.asp.FIS { border-left-color: #3ddc84; }
.asp .frq { font: 700 12px var(--mono); color: var(--accent); flex: none; min-width: 52px; text-align: right; }
.asp.vert { opacity: .75; background: rgba(255,255,255,.04); }
.asp.vert .t { width: 52px; }
#banner.asp-warn.FIS { background: #3ddc84; color: #04240f; }
#banner.asp-warn.acked { animation: none; background: var(--ok); color: #04240f; }
.aspchip.FIS { border-left-color: #3ddc84; }
.aspchip.ok { background: rgba(61, 220, 132, .2); border-left-color: var(--ok); }
.aspchip.vert { opacity: .7; }
.strip .warn.FIS { background: #3ddc84; color: #04240f; }
.strip .warn.ok { background: rgba(61, 220, 132, .25); color: var(--fg); }
.ackbtn { appearance: none; border: 1px solid rgba(0,0,0,.35); border-radius: 5px; background: #fff; color: #1b1300; font: 700 11px var(--font); letter-spacing: 1px; padding: 5px 10px; margin-left: 8px; cursor: pointer; pointer-events: auto; box-shadow: 0 1px 2px rgba(0,0,0,.35); white-space: nowrap; }
.ackbtn:active { filter: brightness(.8); }
#alerts .alert { pointer-events: auto; display: flex; align-items: center; }
#alerts .alert.FIS { background: #3ddc84; color: #04240f; }
#alerts .alert.ok { animation: none; background: var(--ok); color: #04240f; }

/* round 4: jump along the route, places in the picker */
.mini.jmp { width: 26px; height: 22px; font-size: 11px; margin: 0 3px; }
.strip .jmp { appearance: none; border: 0; border-radius: 4px; background: rgba(255,255,255,.18); color: var(--fg); font: 700 11px var(--font); padding: 2px 7px; margin: 0 5px; cursor: pointer; }
.strip .jmp:active { background: var(--accent); color: #1b1300; }
.pickrow.place i { font: 700 10px var(--font); color: #4cc9f0; margin-right: 6px; text-transform: uppercase; }

/* round 5: 3D labels, draggable aircraft */
.labels3d { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 4; }
.lbl3d { position: absolute; left: 0; top: 0; font: 700 11px var(--mono); color: #fff; background: rgba(10, 22, 44, .82); padding: 2px 6px; border-radius: 4px; border-left: 4px solid #888; white-space: nowrap; text-align: left; line-height: 1.25; }
.lbl3d b { color: var(--accent); }
.lbl3d .lim { color: #e8eef7; font-weight: 600; }
.own, .atc-acft { cursor: grab; }
.own:active, .atc-acft:active { cursor: grabbing; }

/* ===== round 6: training features ===== */
/* pilot panel */
.onfreq { margin-left: auto; font: 700 10px var(--font); color: var(--ok); white-space: nowrap; }
.rp { display: inline-block; margin-right: 8px; font-size: 11px; }
.rp b { font-family: var(--mono); color: #fff; background: rgba(255,255,255,.18); padding: 0 4px; border-radius: 3px; }
.rp.comp b { background: var(--accent); color: #1b1300; }
.rp i { font-style: normal; color: var(--dim); }
.mini.on { background: var(--accent); color: #1b1300; }
#modeRow .mini.txt { width: auto; padding: 0 7px; }
#advice:empty, #trafficInfo:empty { display: none; }
.advice { margin-top: 6px; padding: 5px 8px; border-radius: 6px; font-size: 12px; font-weight: 700; background: rgba(61, 220, 132, .2); border-left: 4px solid var(--ok); }
.advice.hold, .advice.refused, .advice.squawk { background: rgba(255, 159, 28, .22); border-left-color: var(--warn); }
.advice.handover, .advice.fis { background: rgba(61, 220, 132, .14); }
.tinfo { margin-top: 6px; padding: 5px 8px; border-radius: 6px; font-size: 12px; font-weight: 700; background: rgba(255, 159, 28, .22); border-left: 4px solid var(--warn); }
.tinfo.alert { background: rgba(255, 92, 92, .3); border-left-color: var(--bad); animation: blink 1s steps(2, start) infinite; }
#radio { margin-top: 6px; padding: 6px 8px; border-radius: 6px; background: rgba(255, 200, 61, .12); border: 1px solid rgba(255, 200, 61, .5); }
.radiotitle { font: 700 11px var(--font); color: var(--accent); margin-bottom: 4px; }
.radiotext .say { font-size: 12px; line-height: 1.35; margin-bottom: 3px; }
.radiotext .say.ok { color: var(--ok); }
.radiobtns { display: flex; gap: 6px; margin-top: 4px; }
.radiobtns .ctl { padding: 6px 8px; min-width: 0; font-size: 10px; flex: 1; }
.radiobtns .ctl:disabled { opacity: .6; cursor: default; }
.asp.advisory { opacity: .7; border-left-color: #9aa3b2; }
.asp.cleared { background: rgba(61, 220, 132, .16); }
.asp.alert.CTR, .asp.alert.TMA, .asp.alert.FIZ { background: rgba(255, 92, 92, .12); }
.asp .n i { font: 700 9px var(--font); color: var(--dim); margin-left: 4px; }
.asp.vert.close { opacity: 1; background: rgba(255, 159, 28, .22); }
.asp.abeam { background: rgba(255, 159, 28, .16); border-left-color: var(--warn); }
.asp.abeam.close { background: rgba(255, 159, 28, .32); }
.asp.abeam .t { width: 52px; }
.ad .name small { color: var(--dim); font-size: 10px; }
#banner.asp-warn.prepare { animation: none; background: var(--warn); color: #1b1300; }
#banner.asp-warn.callnow { animation: blink 1s steps(2, start) infinite; background: var(--bad); color: #fff; }
#banner.asp-warn.hold { animation: none; background: var(--warn); color: #1b1300; }
#banner.asp-warn.advisory { animation: none; background: var(--ok); color: #04240f; }
.datablock.alert { background: rgba(255, 92, 92, .95); color: #fff; }
#profile { position: absolute; left: 8px; right: calc(var(--ctlw) + 4px); bottom: calc(30px + env(safe-area-inset-bottom)); height: 190px; z-index: 9; background: var(--bg); border-radius: var(--radius); padding: 4px 6px 2px 6px; }
#profileCanvas { width: 100%; height: calc(100% - 18px); display: block; }
#profileInfo { font-size: 10px; color: var(--dim); margin: 0; }
.comrow { display: flex; gap: 8px; align-items: center; justify-content: center; font-family: var(--mono); }
.comrow .ctl { min-width: 0; padding: 6px 10px; }
.suggest { background: rgba(255, 200, 61, .12); padding: 6px 8px; border-radius: 6px; }
.legs { display: flex; flex-direction: column; gap: 2px; }
.legs .leg { display: grid; grid-template-columns: 1fr 60px 70px 60px; font: 12px var(--mono); color: var(--fg); padding: 2px 6px; background: rgba(255,255,255,.05); border-radius: 4px; }
.legs .leg.total { color: var(--accent); font-weight: 700; }
.viaadd input { flex: 1; min-width: 0; font: 700 16px var(--mono); padding: 10px; border-radius: 8px; border: 1px solid #456; background: #0f2242; color: var(--fg); }
/* reporting points: triangles (filled = compulsory), holding = dashed circle, hel = square */
.rpmark { display: flex; flex-direction: column; align-items: center; pointer-events: auto; cursor: pointer; }
.rpmark .sym { width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 12px solid rgba(255,255,255,.25); filter: drop-shadow(0 0 1px #000); outline: 0; }
.rpmark.compulsory .sym { border-bottom-color: #fff; }
.rpmark.holding .sym { width: 14px; height: 14px; border: 2px dashed #fff; border-radius: 50%; background: none; }
.rpmark.hel .sym { width: 11px; height: 11px; border: 2px solid #fff; border-radius: 2px; }
.rpmark.entry .sym { border-bottom-color: var(--accent); }
.rpmark .tag { font: 700 10px var(--mono); color: #fff; text-shadow: 0 0 3px #000, 0 0 2px #000; margin-top: 1px; }
/* controller page: bays, strip levels, data blocks, cards, log */
.bay { display: flex; flex-direction: column; gap: 6px; }
.bay.empty { display: none; }
.bayhead { font: 700 10px var(--font); letter-spacing: 2px; color: var(--dim); padding: 2px 4px; }
.bayhead .count { color: var(--fg); }
.strip.red { border-color: var(--bad); animation: stripblink 1s steps(2, start) infinite; }
.strip.amber { box-shadow: 0 0 0 1px var(--warn) inset, 0 2px 10px rgba(0,0,0,.4); }
.strip.green { box-shadow: 0 0 0 1px rgba(61,220,132,.6) inset, 0 2px 10px rgba(0,0,0,.4); }
.strip.grey { opacity: .85; }
.strip .l1 { flex-wrap: wrap; }
.strip .src { font-size: 10px; color: var(--dim); font-weight: 700; }
.strip .tm { font: 10px var(--mono); color: var(--dim); margin-left: auto; }
.strip .sqk { margin-left: 0; cursor: pointer; }
.strip .assigned { color: var(--accent); font-size: 12px; }
.strip .assigned.mismatch { color: var(--warn); }
.strip .l5, .strip .l6 { margin-top: 3px; font-variant-numeric: tabular-nums; }
.strip .okmark { color: var(--ok); font-weight: 700; }
.strip .bad { color: var(--bad); }
.strip .amber { color: var(--warn); font-weight: 700; }
.aspchip.red { background: rgba(255, 92, 92, .25); border-left-color: var(--bad); }
.aspchip.grey { opacity: .7; border-left-color: #9aa3b2; }
.strip .clr { margin-top: 3px; padding: 3px 6px; border-radius: 5px; background: rgba(61, 220, 132, .18); font-size: 11px; }
.strip .clr.hold, .strip .clr.refused { background: rgba(255, 159, 28, .2); }
.strip .lnk { appearance: none; border: 0; background: none; color: var(--dim); font-size: 10px; text-decoration: underline; cursor: pointer; }
.strip .warn.red { background: var(--bad); color: #fff; }
.strip .warn.amber { background: var(--warn); color: #1b1300; animation: none; }
.strip .warn.green { background: rgba(61, 220, 132, .25); color: var(--fg); }
/* the buttons of a warning on their own line, wrapping when the strip is narrow: nothing leaves the box */
.strip .warn .acts { display: flex; flex-wrap: wrap; gap: 4px; margin: 5px 0 1px 0; }
.strip .warn .acts .ackbtn { margin-left: 0; }
.ackbtn.ok { background: var(--ok); color: #04240f; } .ackbtn.amber { background: #1b1300; color: var(--warn); } .ackbtn.bad { background: var(--bad); color: #fff; }
.histdot { width: 5px; height: 5px; border-radius: 50%; background: #0b3d91; box-shadow: 0 0 2px #fff; pointer-events: none; }
/* pilot assist off: the chart, the instruments and the documents only */
body.noassist #inside, body.noassist #rpRow, body.noassist #advice, body.noassist #radio, body.noassist #trafficInfo, body.noassist #profile, body.noassist #onFreq, body.noassist #btnWarn, body.noassist #btnProf, body.noassist #btnVec, body.noassist #btnAsp, body.noassist #btnRp { display: none !important; }
body.noassist #btnAssist { background: #3a3f4b; color: #fff; }
body.atc .datablock { margin-left: 0; text-align: left; line-height: 1.25; color: #fff; background: rgba(11, 61, 145, .92); box-shadow: 0 0 3px #000; }
body.atc .datablock.selected { background: rgba(232, 50, 45, .95); outline: 2px solid #fff; }
body.atc .datablock.emerg { background: rgba(190, 15, 15, .96); color: #fff; outline: 2px solid #fff; white-space: normal; max-width: 380px; font-size: 12px; line-height: 1.35; padding: 4px 8px; }
body.atc .datablock.emerg .big { font-size: 15px; animation: blink 1s steps(2, start) infinite; }
.datablock.flip { text-align: right; }
.datablock .red { color: #fff; background: var(--bad); border-radius: 3px; padding: 0 3px; animation: blink 1s steps(2, start) infinite; }
.datablock .amber { color: #1b1300; background: var(--warn); border-radius: 3px; padding: 0 3px; }
.datablock.red { outline: 2px solid var(--bad); }
.datablock s { opacity: .7; }
#alerts .alert.red { background: var(--bad); color: #fff; }
#alerts .alert.amber { background: var(--warn); color: #1b1300; animation: none; }
#alerts .alert.count { animation: none; background: var(--bg2); color: var(--fg); font-size: 12px; }
#alerts .alert .acts { display: inline-flex; gap: 4px; margin-left: 8px; }
#cards { position: absolute; right: calc(var(--ctlw) + 6px); top: calc(48px + env(safe-area-inset-top)); z-index: 10; display: flex; flex-direction: column; gap: 6px; max-width: 260px; }
.card { background: var(--bg); border-radius: var(--radius); padding: 6px 10px; font: 12px var(--mono); cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.4); }
.cardhead { font: 700 12px var(--font); color: var(--accent); margin-bottom: 2px; }
.card .bad { color: var(--bad); }
body.atc #alerts { right: calc(var(--ctlw) + 280px); }
#logSheet { position: absolute; inset: 0; z-index: 25; background: var(--bg2); display: flex; flex-direction: column; padding-top: env(safe-area-inset-top); }
#logBody { flex: 1; overflow: auto; padding: 8px 12px; font: 12px var(--mono); }
#logBody .ev { padding: 3px 6px; border-bottom: 1px solid rgba(255,255,255,.06); }
#logBody .ev.red { color: #ff8a8a; } #logBody .ev.amber { color: #ffc98a; }
#logBody .t { color: var(--dim); } #logBody .cs { color: var(--accent); font-weight: 700; } #logBody .k { display: inline-block; min-width: 60px; font-weight: 700; }
#clrSheet select, #cardSheet input, #clrSheet input { font: 12px var(--font); padding: 6px; border-radius: 8px; border: 1px solid #456; background: #0f2242; color: var(--fg); width: 100%; }
.phrase { font: 12px/1.4 var(--font); color: var(--fg); background: rgba(255, 200, 61, .12); padding: 8px 10px; border-radius: 6px; margin: 4px 0 0 0; }
.ctl.ok { background: var(--ok); color: #04240f; } .ctl.amber { background: var(--warn); color: #1b1300; }
.hxrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.08); font-size: 13px; }
.hxrow .ctl { min-width: 90px; padding: 6px 8px; }
@media (max-width: 1100px) { body.atc #alerts { right: calc(var(--ctlw) + 210px); } #cards { max-width: 200px; font-size: 11px; } }
@media (max-width: 820px) { #cards { display: none; } body.atc #alerts { right: calc(var(--ctlw) + 6px); } }
#strips { bottom: calc(8px + env(safe-area-inset-bottom)); }

/* the grip at the right edge of the pilot box: drag to widen it (the width is kept per browser) */
#panelGrip { position: absolute; top: calc(48px + env(safe-area-inset-top)); left: calc(8px + var(--panelw, 318px) - 6px); width: 12px; height: 40%; z-index: 11; cursor: ew-resize; touch-action: none; }
#panelGrip::after { content: ''; position: absolute; left: 4px; top: 30px; width: 4px; height: 36px; border-radius: 2px; background: rgba(255,255,255,.35); }
#panelGrip:hover::after, #panelGrip:active::after { background: var(--accent); }
/* the controller's END button on a strip: at the right end of the first line */
.strip .l1 .ackbtn.end { margin-left: auto; background: var(--bad); color: #fff; padding: 2px 7px; font-size: 10px; }
.strip .l1 .code { font: 700 11px var(--mono); color: var(--accent); letter-spacing: 1px; }
/* via chips: draggable to reorder (touch-action none so a finger drag is not a page scroll) */
.chip { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.chip.dragging { opacity: .55; cursor: grabbing; }
.chip.drop { outline: 2px solid var(--accent); outline-offset: 1px; }

/* the fourth clearance button: opens the editor instead of sending at once */
.ackbtn.adv { background: #16305c; color: #fff; }
/* the top bar on an iPad-wide window: the speed buttons shrink and lose their SIM label so the clock stays visible */
@media (max-width: 1150px) {
  #tfGroup .tflabel { display: none; }
  #tfGroup .ctl.tiny { padding: 5px 4px; font-size: 9px; }
  body.atc #topbar .ctl.tiny { padding: 5px 6px; }
}

/* the recording overlay (R2.1) sits above every other sheet */
#examOverlay { z-index: 40; }

/* controller map modes: NONE / RDR paint no map (the style's background is transparent, this shows through), RDR restyles the
   markers as a radar display: squares, grey circles and triangles, bare monospace data blocks in the aircraft's colour (--rc) */
body.nomap #map { background-color: #06090f; background-image: repeating-linear-gradient(0deg, #0e1726 0 1px, transparent 1px 100px), repeating-linear-gradient(90deg, #0e1726 0 1px, transparent 1px 100px); }
body.nomap #map .maplibregl-ctrl-scale { background: rgba(6, 9, 15, .6); color: #8aa0c0; border-color: #8aa0c0; }
body.rdr .atc-acft .acft { filter: none; }
body.rdr .atc-acft .acft path { display: none; }
body.rdr .atc-acft::before { content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border: 1.6px solid var(--rc, #ddd); box-shadow: 0 0 2px #000; }
body.rdr .atc-acft.selected::before { width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; border-width: 2px; box-shadow: 0 0 6px var(--rc, #ddd); }
body.rdr .atc-acft.red .acft { animation: none; }
body.rdr .atc-acft.red::before { animation: blink 1s steps(2, start) infinite; }
body.rdr .atc-acft.emerg .acft { filter: none; }
body.rdr .histdot { width: 4px; height: 4px; background: var(--rc, #ddd); box-shadow: none; }
body.rdr .datablock { font: 12px var(--mono); color: var(--rc, #ddd); background: none; box-shadow: none; padding: 0 2px; border-radius: 0; line-height: 1.2; }
body.rdr .datablock .cs { font-weight: 700; }
body.rdr .datablock .unit { opacity: .75; font-size: 11px; }
body.rdr .datablock.selected { outline: none; background: none; text-shadow: 0 0 5px var(--rc, #ddd); }
body.rdr .datablock.red { outline: none; }
body.rdr .datablock .red { color: var(--rc, #e8322d); background: none; padding: 0; font-size: 11px; animation: blink 1s steps(2, start) infinite; }
body.rdr .datablock .amber { color: #ffb347; background: none; padding: 0; font-size: 11px; }
body.rdr .admark .dot { width: 9px; height: 9px; background: none; border: 1px solid #8aa0c0; box-shadow: none; }
body.rdr .admark.hel .dot { background: none; }
body.rdr .admark .tag { font-weight: 400; font-size: 10px; color: #8aa0c0; background: none; padding: 0; }
body.rdr .rpmark .sym { border-left-width: 5px; border-right-width: 5px; border-bottom: 9px solid #6f85a8; filter: none; }
body.rdr .rpmark.compulsory .sym { border-bottom-color: #6f85a8; }
body.rdr .rpmark.holding .sym, body.rdr .rpmark.hel .sym { width: 10px; height: 10px; border-color: #6f85a8; }
body.rdr .rpmark .tag { font-weight: 400; font-size: 9px; color: #6f85a8; text-shadow: none; }
body.rdr .wpmark.atc .tri { filter: none; border-left-width: 6px; border-right-width: 6px; border-bottom-width: 11px; }
body.rdr .wpmark.atc .tag { font-weight: 400; font-size: 10px; color: var(--c, #d400d4); background: rgba(6, 9, 15, .7); border: 0; padding: 0 3px; }
/* the controller's top bar with an exam running: compact buttons so the exam display, PAUSE, the VU bar and RENDER fit at 1366 px */
body.atc #topbar .ctl.tiny.exam.on { padding: 4px 6px; font-size: 10px; }
body.atc #topbar .ctl.tiny { letter-spacing: .5px; }
/* --- admin begin --- the observer seat of the controller page and the time-limit banner (docs/web-edition.md "Admin page") */
.badge.observer { background: var(--warn); color: #1b1300; }
/* observer (body.observer): the action controls go (clearances, END, squawk, exam, speed, instructor, HX, seat, cards' save, PTT); everything else stays */
body.observer .ackbtn:not([data-say]):not([data-traffic]), body.observer #btnExam, body.observer #btnExamPause, body.observer #btnRender, body.observer #btnReplay,
body.observer #tfGroup, body.observer #btnInstr, body.observer #btnHx, body.observer #btnSeat, body.observer #cardSave, body.observer #micBadge, body.observer #examinerMic,
body.observer .ptt, body.observer #btnPtt, body.observer [data-ptt], body.observer .voice .ctl, body.observer #voiceBar .ctl { display: none !important; }
body.observer .strip .sqk, body.observer .jmp, body.observer #clrSheet .sheetbtns, body.observer #hxList button { pointer-events: none; }
#limitBanner { position: absolute; left: 50%; transform: translateX(-50%); top: calc(48px + env(safe-area-inset-top)); z-index: 25; background: var(--warn); color: #1b1300;
  font: 700 13px var(--font); letter-spacing: 1px; padding: 8px 14px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,.4); white-space: nowrap; pointer-events: none; }
/* --- admin end --- */

/* ---------- web edition voice (docs/web-edition.md section 7): the badge, the PTT button, the TX indicators, MUTE / HOLD MUTE ---------- */
.badge.voice { background: #334; color: var(--fg); cursor: pointer; }
.badge.voice.ok { background: var(--ok); color: #04240f; }
.badge.voice.wait { background: var(--warn); color: #1b1300; }
.badge.voice.bad { background: var(--bad); color: #fff; }
.badge.voice.rx { background: #19c3e6; color: #042a3a; animation: blink 1s steps(2, start) infinite; }
.badge.voice.rx.stepped { background: var(--bad); color: #fff; }
.ptt { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 12; width: 150px; height: 64px; border: 0; border-radius: 16px; background: #16305c; color: var(--fg); box-shadow: 0 4px 18px rgba(0,0,0,.55), inset 0 0 0 2px rgba(255,255,255,.18); cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font: 700 18px var(--font); letter-spacing: 2px; }
.ptt .pttx { font: 600 11px var(--font); letter-spacing: 1px; color: var(--dim); text-transform: uppercase; }
.ptt.on { background: var(--bad); color: #fff; box-shadow: 0 0 0 4px rgba(255,92,92,.35), 0 4px 18px rgba(0,0,0,.55); }
.ptt.on .pttx { color: #fff; }
.ptt.on.stepped { background: #a0004a; animation: blink .5s steps(2, start) infinite; }
.ptt.held { background: #444; color: #999; }
.ptt.nomic { background: #5a2a2a; }
@media (pointer: coarse) { .ptt { width: min(60vw, 260px); height: 92px; bottom: 22px; font-size: 24px; } .ptt .pttx { font-size: 13px; } }
#txBar { position: absolute; top: 58px; left: 50%; transform: translateX(-50%); z-index: 20; display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; max-width: 60vw; pointer-events: none; }
#txBar .txchip { background: #19c3e6; color: #042a3a; font: 700 12px var(--mono); letter-spacing: 1px; padding: 4px 10px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,.4); }
#txBar .txchip.stepped { background: var(--bad); color: #fff; animation: blink .6s steps(2, start) infinite; }
.strip .l1 .tx { font: 700 10px var(--mono); letter-spacing: 1px; padding: 1px 6px; border-radius: 3px; background: #19c3e6; color: #042a3a; }
.strip .l1 .tx.stepped { background: var(--bad); color: #fff; animation: blink .6s steps(2, start) infinite; }
.strip .l1 .tx.held { background: #444; color: #ddd; }
.strip .l1 .ackbtn.mute { background: var(--warn); color: #1b1300; padding: 2px 7px; font-size: 10px; margin-left: 4px; }
.strip .l1 .ackbtn.hold { background: #444; color: #fff; padding: 2px 7px; font-size: 10px; margin-left: 4px; }
.strip .l1 .ackbtn.hold.on { background: var(--bad); color: #fff; }
.strip.txing { box-shadow: 0 0 0 2px #19c3e6 inset, 0 2px 10px rgba(0,0,0,.4); }
#voiceSheet input[type=range] { width: 100%; accent-color: var(--accent); }
/* the PTT keeps the map UI clear: below every sheet and dialog (which hide it anyway), above the map and the profile;
   with the profile panel open at the bottom it moves up above it */
.ptt.lift { bottom: calc(232px + env(safe-area-inset-bottom)); }
@media (pointer: coarse) { .ptt.lift { bottom: calc(236px + env(safe-area-inset-bottom)); } }