/* flight.css — the flight screen. */
/* ── live position block, in the flight modal ── */
.livebox{margin-top:14px;border:1px solid rgba(13,156,103,.35);border-radius:12px;padding:12px 13px 10px;background:linear-gradient(150deg,rgba(13,156,103,.12),transparent 65%)}
.livebox .lt{font-size:10px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--air);display:flex;align-items:center;gap:6px}
.livebox .lt small{font-family:var(--mono);font-size:10px;font-weight:600;color:var(--faint);letter-spacing:0;text-transform:none}
/* A pulsing dot, because "live" claimed in text alone is just a word. */
.livebox .lt .dot{width:6px;height:6px;border-radius:50%;background:var(--air);animation:cc-halo 2s ease-in-out infinite}
.lg{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}
.lg > div{min-width:0}
.lg b{display:block;font-family:var(--mono);font-size:19px;font-weight:800;line-height:1.1;color:var(--txt)}
.lg span{display:block;font-size:10px;color:var(--faint);text-transform:uppercase;letter-spacing:.6px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lbar{height:4px;border-radius:3px;background:rgba(255,255,255,.10);overflow:hidden;margin-top:11px}
:root[data-theme="light"] .lbar{background:rgba(0,0,0,.08)}
.lbar i{display:block;height:100%;background:var(--air);border-radius:3px;transition:width .6s ease}
.livebox .ls{font-size:11px;color:var(--dim);margin-top:9px;line-height:1.55}
.livebox .lsrc{font-family:var(--mono);font-size:10px;color:var(--faint);margin-top:7px}
@media(max-width:620px){.lg{grid-template-columns:repeat(2,1fr);gap:11px}}
/* Aerodrome weather. The category chip carries the standard colours a pilot
   already reads without thinking — green/blue/red/magenta — so the severity
   lands before any of the numbers do. */
.wxbox{margin-top:14px;border:1px solid var(--line);border-radius:12px;padding:11px 13px 12px}
.wxbox .lt{font-size:10px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--dim)}
.wxs{display:flex;align-items:baseline;gap:8px;margin-top:11px;flex-wrap:wrap}
.wxs .code{font-family:var(--mono);font-size:15px;font-weight:800;color:var(--txt)}
.wxs .icao{font-family:var(--mono);font-size:10px;color:var(--faint)}
.wxs .role{font-size:10px;text-transform:uppercase;letter-spacing:.7px;color:var(--faint)}
.cat{font-family:var(--mono);font-size:10px;font-weight:800;letter-spacing:.6px;padding:2px 6px;border-radius:8px;color:var(--on-acc)}
.cat-VFR{background:var(--air)} .cat-MVFR{background:var(--flt)}
.cat-IFR{background:var(--bad)} .cat-LIFR{background:var(--dh)}
:root[data-theme="light"] .cat{color:#fff}
.wxl{font-size:12px;color:var(--txt);margin-top:5px;line-height:1.6}
.wxbox .sep{color:var(--faint);padding:0 4px}
.wxeta{margin-top:8px;padding:8px 10px;border-radius:8px;background:var(--raise);font-size:12px;line-height:1.6}
.wxeta .h{font-size:10px;text-transform:uppercase;letter-spacing:.7px;color:var(--faint);display:block;margin-bottom:2px}
.wxeta .but{display:block;margin-top:4px;color:var(--trn);font-size:11px}
.wxraw{font-family:var(--mono);font-size:10px;color:var(--faint);margin-top:7px;line-height:1.5;word-break:break-word;white-space:pre-wrap}
.wxbox .miss{font-size:11px;color:var(--dim);margin-top:4px;line-height:1.55}
.wxbox .lsrc{font-family:var(--mono);font-size:10px;color:var(--faint);margin-top:10px;border-top:1px solid var(--line2);padding-top:7px}
.wxbox details{margin-top:6px}
.wxbox summary{font-size:10px;color:var(--faint);cursor:pointer;list-style:none}
.wxbox summary::-webkit-details-marker{display:none}
/* Scoped to the nested "Full TAF" disclosure. Unscoped it also decorated the
   weather block's own summary once that became a <details> — which is what the
   stray bullet above the WEATHER label was, not a list marker. */
.wxbox details summary:before{content:"▸ ";font-size:10px}
.wxbox details[open] summary:before{content:"▾ "}
.ap{fill:#3d5480}.ap.hot{fill:var(--air)}
/* Airport and flight labels collide wherever the network is dense — Europe is
   a pile of them at any useful zoom. A halo in the ocean colour, painted under
   the glyphs, is the cartographer's answer: overlapping labels stay readable
   instead of dissolving into each other, and nothing has to be hidden. */
.aplabel{fill:#8ea3c8;font-family:var(--mono);font-size:10px;
  paint-order:stroke fill;stroke:var(--ocean);stroke-width:2.6px;
  stroke-linejoin:round;stroke-linecap:round}
.plane{fill:var(--txt)}
.plane-halo{r:6;fill:var(--air);opacity:.14}
/* weather, collapsed by default */
/* The summary is NOT the flex container. Chromium turns the disclosure marker
   into a flex ITEM when the summary itself is display:flex, and then neither
   list-style:none nor ::marker can remove it — it just sits there as a 13px
   box in front of the label. Flexing an inner div sidesteps it entirely. */
details.wxbox>summary{cursor:pointer;list-style:none;padding:2px 0}
details.wxbox>summary::-webkit-details-marker{display:none}
details.wxbox>summary::marker{content:''}
.wxsum{display:flex;align-items:center;gap:9px}
.wxsum::after{content:'▾';margin-left:auto;color:var(--dim);font-size:13px;
 line-height:1;transition:transform .15s}
details.wxbox[open] .wxsum::after{transform:rotateY(180deg)}
.wxsum .lt{margin:0}
.wxchip{display:inline-flex;align-items:center;gap:4px;font-family:var(--mono);font-size:11px;
 color:var(--dim)}