* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

:root {
  /* Tells the OS this page is dark-themed, which is the only lever a web
     page has over the software keyboard's own colors — iOS/Android render
     the keyboard itself (numeric or full alphanumeric) in dark chrome to
     match rather than popping up a bright white keyboard over a dark app.
     There's no API to recolor the keyboard with the app's own accent/panel
     colors beyond that; this is as far as the platform allows. */
  color-scheme: dark;
  --bg: #0f172a;
  --panel: #16213a;
  --panel-2: #1c2a47;
  --border: #2a3a5c;
  --text: #e6ebf5;
  --muted: #93a2c2;
  --accent: #e2b93b;
  --accent-rgb: 226,185,59;   /* same color as --accent, for translucent tints; set per company */
  --vfr: #16a34a;
  --mvfr: #2563eb;
  --ifr: #dc2626;
  --lifr: #d946ef;
  --g: #16a34a;
  --y: #ca9a12;
  --r: #dc2626;
  /* True screen height, set by JS in app.js from window.screen.height before
     paint. On this device: innerHeight/dvh report 812 but the physical
     screen is 874 — iOS standalone PWAs can under-report the visible
     viewport by the status-bar height even though the page renders
     full-bleed. The 100dvh fallback keeps things sane before JS runs. THE
     EARLIER ATTEMPT to use screen.height here was correctly reverted, but
     not because screen.height was wrong — it's because html/body below used
     `inset:0`, which forces bottom:0 against the viewport (812) and silently
     overrides any `height` also set on it. That kept body's own box (and
     its overflow:hidden clip) pinned at 812 no matter what #app or .mob-nav
     claimed, so anything positioned past 812 got clipped off, not just
     shifted down. Fixed below by giving html/body an explicit height instead
     of a bottom-anchored inset. Don't revert this again without checking
     that fix is still in place. */
  --true-vh: 100dvh;
  --nav-h: 66px;
  --nav-gap: 16px;
  --nav-clear: calc(var(--nav-h) + var(--nav-gap) + max(14px, env(safe-area-inset-bottom, 0px)) + 4px);
}

/* Locks the document so iOS can't rubber-band the outer page (screens scroll
   inside .scroll). See the note inside the rule: html/body must NOT be
   position:fixed or carry a fixed height, or they clip the bottom pill. */
html, body {
  height: 100%;
  background: var(--bg); color: var(--text);
  /* No position:fixed and no fixed height on html/body: any box here with a
     short height (iOS reports 812 on a 874 screen) becomes a clip rectangle
     for everything past it, including the bottom pill. Overflow on body
     propagates to the viewport, so #app (true screen height) and the fixed
     pill paint past the short figure. */
  /* NO overflow:hidden here: on iOS standalone the viewport is 812 on an 874
     screen, and overflow:hidden on the root clips painting at 812, cutting
     off the bottom pill. #app below is the real clipping/scrolling shell;
     JS pins window scroll at 0 so the 62px overhang can't be dragged. */
  overscroll-behavior: none;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px; /* prevents iOS auto-zoom on input focus */
}

#app {
  display: flex;
  flex-direction: column;
  /* True screen height from --true-vh (JS, window.screen.height). Not 100dvh
     or 100% — those are the short figure on iOS standalone. */
  height: 100%;
  height: var(--true-vh);
  overflow: hidden;
}

.app-bar {
  flex-shrink: 0;
  padding: max(14px, env(safe-area-inset-top, 0px)) 16px 12px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 8px;
}
.app-bar-left { display: flex; align-items: center; min-width: 0; overflow: hidden; }
.brand { font-size: 21px; font-weight: 800; letter-spacing: 0.5px; color: var(--accent); white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }   /* company.js swaps in the short name when the full one doesn't fit */
.app-bar-right {
  display: flex; align-items: center; justify-content: flex-end; gap: 6px;
  justify-self: end; min-width: 0;
}
.header-username {
  font-size: 12px; color: var(--muted); font-weight: 600;
  max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.header-title-btn {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 4px 6px; margin: -4px 0;
  text-align: center; min-height: 44px; justify-content: center;
  justify-self: center;
}
.header-nnumber { font-size: 22px; font-weight: 800; letter-spacing: 0.5px; color: var(--accent); line-height: 1.15; }
.icon-btn {
  min-width: 40px; min-height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; color: var(--muted); font-size: 19px; cursor: pointer;
  flex-shrink: 0;
}
.avatar-btn { min-width: auto; min-height: auto; padding: 2px; }
.avatar-circle {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff;
  font-size: 12px; font-weight: 800; letter-spacing: 0.5px;
  flex-shrink: 0;
}
.avatar-btn:active .avatar-circle { opacity: 0.8; }

.screen { flex: 1; overflow: hidden; display: none; flex-direction: column; position: relative; }
.screen.active { display: flex; }
.scroll {
  flex: 1; overflow-y: auto; overflow-x: hidden; overflow-x: clip; padding: 16px 16px var(--nav-clear);
  -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain;
}

/* ---- Header gear dropdown (History + Settings) ---- */
.header-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 200;
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.4); overflow: hidden; min-width: 150px;
}
.header-menu[hidden] { display: none; }
.header-menu-item {
  display: block; width: 100%; text-align: left; padding: 12px 16px;
  background: none; border: none; color: var(--text); font-size: 14px; font-weight: 600;
  cursor: pointer; border-bottom: 1px solid var(--border);
}
.header-menu-item:last-child { border-bottom: none; }
.header-menu-item:active { background: var(--panel-2); }

/* ---- Bottom progress bar: 4 stages of the brief, tap any to jump there.
   Not a tab bar between unrelated sections — a position indicator for one
   continuous form, so the current stage's number is filled solid and past
   stages get a thin connecting line lit behind them. */
.mob-nav {
  /* Default (desktop, Android, Safari tab): an ordinary fixed pill. */
  position: fixed;
  bottom: calc(max(14px, env(safe-area-inset-bottom, 0px)) + 4px);
  top: auto;
  left: 50%; transform: translateX(-50%);
  width: calc(100% - 28px); max-width: 460px;
  display: flex; z-index: 105; align-items: flex-start;
  background: rgba(22, 33, 58, 0.97);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: 0 4px 24px rgba(0,0,0,.35);
  padding: 10px 6px 8px;
}
/* Earlier attempt at the installed-iPhone-PWA case lived here: switching the pill to
   position:absolute with its top computed from --true-vh, on the theory that iOS clips a
   fixed pill to its under-reported viewport. Reverted: this was never actually exercised on
   a real device in true standalone mode until the app.briefed.flights redirect bug (see
   js/app.js onAppHost/isStandalone) was fixed, and once it was, this pushed the pill below
   the visible screen entirely. position:fixed with env(safe-area-inset-bottom) (the default
   .mob-nav rule above) is the validated pattern for this: iOS does NOT clip a fixed element
   to the short reported viewport the way it clips overflow:hidden content, so the plain fixed
   pill already lands correctly against the real bottom edge once viewport-fit=cover and the
   safe-area meta tags are in place (see manifest.json / the <meta name=viewport> tag). Only
   #app's own height genuinely needed the --true-vh correction (the shell was a few pixels
   short, not the pill) — that part stays. Don't reintroduce an ios-standalone override here
   without validating it on a real installed device first; see the pwa-floating-tab-bar skill. */
.stage-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 4px; padding: 0 2px; background: none; border: none; cursor: pointer;
  color: var(--muted); position: relative;
}
.stage-item:active { opacity: .65; }
.stage-num {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; background: var(--panel-2); border: 1px solid var(--border);
  color: var(--muted);
}
.stage-item::before {
  content: ''; position: absolute; top: 11px; right: 50%; width: 100%; height: 2px;
  background: var(--border); z-index: -1;
}
.stage-item:first-child::before { display: none; }
.stage-item.active .stage-num, .stage-item.done .stage-num {
  background: var(--accent); border-color: var(--accent); color: #1a1300;
}
.stage-item.done::before, .stage-item.active::before { background: var(--accent); }   /* line runs up to and including the current step */
.stage-item.active .stage-label, .stage-item.done .stage-label { color: var(--accent); }
.stage-label { font-size: 9px; font-weight: 700; letter-spacing: .1px; text-align: center; line-height: 1.2; }

/* ---- Cards / form controls ---- */
.card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
  padding: 14px; margin-bottom: 14px;
}
.card h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--muted); margin-bottom: 10px; }
/* color baked in here rather than relying on pairing with .muted in the
   HTML — .muted's font-size is declared later in this file and was
   silently winning the cascade over this rule's font-size at equal
   specificity whenever both classes were combined on one element (the same
   class of bug the refresh-button width override hit earlier). */
.card-footer { font-size: 11px; margin-top: 10px; text-align: right; color: var(--muted); }
/* Shortcut back to the last organization this browser signed into at app.briefed.flights (see js/app.js resume logic).
   ":not([hidden])" rather than a plain ".resume" rule — otherwise this author rule's display:block ties in
   specificity with the browser's own "[hidden] { display:none }" default and wins it, showing the link even
   while hidden="" is set (same class of cascade bug flagged elsewhere in this file). */
.resume:not([hidden]) { display: block; text-decoration: none; background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; color: var(--text); font-weight: 700; }
.resume small { display: block; color: var(--muted); font-weight: 500; font-size: 12.5px; margin-top: 2px; }
.resume:hover { border-color: var(--accent); }
.card-head-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
/* Deliberately its own class, not combined with .ghost-btn/.primary-btn —
   those force width:100% later in this file, which silently wins the
   cascade over an earlier width:auto override at equal specificity and is
   exactly what made the first version of this button balloon to fill the
   card. */
.card-icon-btn {
  width: 32px; height: 32px; min-width: 32px; min-height: 32px; flex-shrink: 0;
  border-radius: 50%; border: 1px solid var(--border); background: var(--panel-2);
  color: var(--text); font-size: 16px; line-height: 1; padding: 0;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.card-icon-btn:active { opacity: 0.7; }
.small-action-btn {
  flex-shrink: 0; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--panel-2); color: var(--accent); font-size: 12px; font-weight: 700;
  cursor: pointer; white-space: nowrap;
}
.small-action-btn:active { opacity: 0.7; }
.row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; min-width: 0; }
.field { flex: 1 1 140px; display: flex; flex-direction: column; gap: 4px; min-width: 0; max-width: 100%; }
.field label { font-size: 12px; color: var(--muted); }
input, select {
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
  border-radius: 10px; padding: 10px 12px; font-size: 16px; min-height: 44px; width: 100%;
  min-width: 0; box-sizing: border-box; -webkit-appearance: none; appearance: none;
}
input:focus, select:focus { outline: 2px solid var(--accent); }
/* PIC on the Overview page: always the logged-in pilot, never typed — reads
   as a fixed value rather than an editable field. */
input[readonly] {
  background: var(--panel); color: var(--muted); font-weight: 700;
}
input[readonly]:focus { outline: none; }
textarea {
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
  border-radius: 10px; padding: 10px 12px; font-size: 16px; width: 100%;
  min-width: 0; box-sizing: border-box; font-family: inherit; resize: vertical;
}
textarea:focus { outline: 2px solid var(--accent); }

/* ---- Crew name autocomplete: saved names offered while typing, each
   removable in place with its own × so a mistyped entry never has to be
   re-typed correctly just to get rid of the bad one. ---- */
.autocomplete-wrap { position: relative; }
.autocomplete-list {
  position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px; z-index: 60;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px;
  max-height: 190px; overflow-y: auto; -webkit-overflow-scrolling: touch;
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
}
.autocomplete-list[hidden] { display: none; }
.autocomplete-list.floating { position: fixed; right: auto; margin: 0; z-index: 1000; overscroll-behavior: contain; }
.autocomplete-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 12px; font-size: 14px; border-bottom: 1px solid var(--border); cursor: pointer;
}
.autocomplete-item:last-child { border-bottom: none; }
.autocomplete-item:active { background: var(--panel); }
.autocomplete-item-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.autocomplete-item-del {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; border: none;
  background: none; color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer;
}
.autocomplete-item-del:active { color: var(--r); }

.gyr-group { display: flex; gap: 8px; }
.gyr-btn {
  flex: 1; min-height: 44px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--panel-2); color: var(--muted); font-weight: 700; cursor: pointer;
}
.gyr-btn[data-val="G"].on { background: var(--g); color: #fff; border-color: var(--g); }
.gyr-btn[data-val="Y"].on { background: var(--y); color: #1a1300; border-color: var(--y); }
.gyr-btn[data-val="R"].on { background: var(--r); color: #fff; border-color: var(--r); }

.station-table { width: 100%; max-width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 13px; }
.station-table td { overflow-wrap: anywhere; }
.station-table th, .station-table td { padding: 8px 4px; text-align: center; border-bottom: 1px solid var(--border); }
.station-table th { color: var(--muted); font-weight: 600; font-size: 11px; text-transform: uppercase; }
.station-table td:first-child, .station-table th:first-child { text-align: left; }
.cat { font-weight: 800; padding: 2px 8px; border-radius: 6px; font-size: 12px; display: inline-block; min-width: 44px; }
.cat.VFR { color: var(--vfr); }
.cat.MVFR { color: var(--mvfr); }
.cat.IFR { color: var(--ifr); }
.cat.LIFR { color: var(--lifr); }
.cat.none { color: var(--muted); }

.taf-dots { display: inline-flex; gap: 5px; align-items: center; }
.taf-dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; background: var(--border); }
.taf-dot.VFR { background: var(--vfr); }
.taf-dot.MVFR { background: var(--mvfr); }
.taf-dot.IFR { background: var(--ifr); }
.taf-dot.LIFR { background: var(--lifr); }

.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat { background: var(--panel-2); border-radius: 10px; padding: 10px; }
.stat .k { font-size: 11px; color: var(--muted); text-transform: uppercase; }
.stat .v { font-size: 18px; font-weight: 700; margin-top: 2px; }
.stat.tappable { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.stat.tappable:active { background: var(--panel); }

.notam-item { padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.notam-item:last-child { border-bottom: none; }

/* ---- History list: content + a two-step delete control per row ---- */
.history-item { display: flex; align-items: center; gap: 10px; }
.history-item-body { flex: 1; min-width: 0; cursor: pointer; }
.history-delete-btn {
  flex-shrink: 0; border: 1px solid var(--border); background: none;
  color: var(--muted); font-size: 12px; font-weight: 700;
  padding: 7px 12px; border-radius: 10px; cursor: pointer; min-height: 32px;
}
.history-delete-btn:active { opacity: 0.7; }
.history-pdf-btn {
  flex-shrink: 0; border: 1px solid var(--border); background: var(--panel-2);
  color: var(--accent); font-size: 12px; font-weight: 700;
  padding: 7px 12px; border-radius: 10px; cursor: pointer; min-height: 32px;
}
.history-pdf-btn:active { opacity: 0.7; }
.history-pdf-btn:disabled { opacity: 0.6; cursor: default; }
/* Brief detail: Back + Download PDF side by side */
.detail-actions { display: flex; gap: 10px; margin-bottom: 14px; }
.detail-actions .ghost-btn, .detail-actions .primary-btn { flex: 1 1 0; width: auto; margin: 0; }
.detail-actions .primary-btn:disabled { opacity: 0.6; }
.history-delete-btn.armed { border-color: var(--r); color: var(--r); }
.history-delete-btn:disabled { opacity: 0.6; cursor: default; }
.notam-meta { color: var(--muted); font-size: 11px; margin-bottom: 2px; }
.history-item:active { opacity: 0.7; }

/* Hazard cards (AIRMET/SIGMET/NOTAM) — tap to flip between raw text and a
   plain-language overview. A JS-driven rotate-swap-rotate (rather than a
   CSS 3D transform with two stacked absolutely-positioned faces) so the
   card's own vertical scrolling always works: WebKit doesn't reliably
   deliver touch-scroll gestures to a nested overflow:auto element that sits
   inside a perspective/preserve-3d/backface-hidden stack, and a fixed-height
   dual-face card clips any text taller than it. Here only one face is ever
   in the DOM, transform is applied only transiently during the flip
   animation, and the card's own overflow-y:auto scrolls normally at rest. */
.hazard-card {
  margin-bottom: 10px; cursor: pointer;
  max-height: 160px; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px;
  padding: 8px 10px; font-size: 13px;
  transition: transform 0.15s ease;
}
.hazard-card.flipping { transform: rotateY(90deg); }
.muted { color: var(--muted); font-size: 13px; }

/* Weather & Hazards Map modal — Leaflet map opened from "View Map" at the
   top of the Weather & Environmental page. Built on the app's standard
   .modal-overlay/.modal-panel chrome (same as the METAR/TAF pop-out), with
   its own sizing so the map gets real usable height instead of shrinking to
   fit content. Leaflet's own popup/control chrome is white by default so
   it's re-skinned here rather than left stock. */
.modal-panel.map-modal-panel {
  max-width: 640px;
  height: 72vh;
}
.modal-body.map-modal-body {
  display: flex; flex-direction: column; flex: 1; min-height: 0;
  overflow: hidden; /* the map fills this itself; no separate scroll region needed */
}
.hazards-map {
  flex: 1; min-height: 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--panel-2);
}

/* Full screen: rather than the browser's real Fullscreen API (unsupported
   for arbitrary elements in iOS Safari/PWA), the modal itself sheds its
   backdrop/centering and the panel goes edge-to-edge — same
   position:fixed;inset:0 pattern as the modal already uses, just filling the
   whole viewport instead of centering in it. Scoped to .map-modal
   specifically (not every .modal-overlay) so this never affects the
   METAR/TAF pop-out, which shares the base modal classes. */
.modal-overlay.map-modal.fullscreen { padding: 0; background: var(--bg); }
.modal-overlay.map-modal.fullscreen .map-modal-panel {
  max-width: 100%; width: 100%; height: 100%; max-height: 100%;
  border-radius: 0; border: none;
  /* A flat env(safe-area-inset-*) alone is 0px on most devices (no notch),
     which is exactly the "flush against the edge" bug reported — always add
     a baseline gutter and let the safe-area inset stack on top of it where
     one actually applies. */
  padding: calc(14px + env(safe-area-inset-top, 0px)) calc(14px + env(safe-area-inset-right, 0px))
           calc(14px + env(safe-area-inset-bottom, 0px)) calc(14px + env(safe-area-inset-left, 0px));
}
.hazards-map .leaflet-popup-content-wrapper,
.hazards-map .leaflet-popup-tip {
  background: var(--panel-2); color: var(--text);
}
.hazards-map .leaflet-popup-content { font-size: 13px; margin: 10px 12px; }
.hazards-map .leaflet-control-attribution {
  background: rgba(15, 23, 42, 0.75); color: var(--muted); font-size: 9px;
}
.hazards-map .leaflet-control-attribution a { color: var(--muted); }
.hazards-map .leaflet-control-zoom a {
  background: var(--panel-2); color: var(--text); border-color: var(--border);
}
.station-map-marker {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid #fff; box-shadow: 0 0 4px rgba(0,0,0,0.6);
}
.hazard-map-legend {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; font-size: 11px; color: var(--muted);
  flex-shrink: 0; /* keep the legend row from being squeezed by the map's flex:1 above it */
}
.hazard-map-legend span { display: inline-flex; align-items: center; gap: 4px; }
.hazard-map-legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.link { color: var(--accent); text-decoration: underline; }

/* ---- Save banner (toast) ---- */
.save-banner {
  position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 60px);
  transform: translateX(-50%); z-index: 300;
  background: var(--g); color: #fff; font-weight: 700; font-size: 13px;
  padding: 10px 18px; border-radius: 10px; box-shadow: 0 4px 16px rgba(0,0,0,.35);
  opacity: 1; transition: opacity .25s ease, transform .25s ease;
  max-width: calc(100% - 32px); text-align: center;
}
.save-banner.hide { opacity: 0; transform: translateX(-50%) translateY(-8px); pointer-events: none; }

/* ---- Stale weather data banner ---- */
/* Persistent (no auto-hide timer, unlike .save-banner) until the pilot
   either swipes it up or taps Refresh and gets fresh data — it's a warning
   to act on, not a confirmation to glance at. */
.stale-data-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 250;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px;
  background: #7a3b0a; color: #ffd9a8; font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  transition: transform .2s ease, opacity .2s ease;
  touch-action: pan-y; /* the JS swipe handler needs vertical touch moves, not the browser intercepting them */
}
.stale-data-banner[hidden] { display: none; }
.stale-data-banner.dismissing { transform: translateY(-100%); opacity: 0; }
.stale-data-banner-hint { font-size: 10px; font-weight: 600; color: #ffe9c8; opacity: 0.8; white-space: nowrap; }

/* ---- METAR/TAF detail pop-out ---- */
.tappable-badge { cursor: pointer; display: inline-block; -webkit-tap-highlight-color: transparent; }
.modal-overlay {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(0, 0, 0, 0.55);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.modal-overlay[hidden] { display: none; }
.modal-panel {
  width: 100%; max-width: 480px; max-height: 82vh;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 18px;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}
.modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex-shrink: 0; }
.modal-title { font-size: 17px; font-weight: 800; color: var(--accent); }
.modal-body { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.raw-block {
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; line-height: 1.5;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px; margin-bottom: 14px; color: var(--text);
  white-space: pre-wrap; word-break: break-word;
}
.raw-block.cat-VFR { color: var(--vfr); }
.raw-block.cat-MVFR { color: var(--mvfr); }
.raw-block.cat-IFR { color: var(--ifr); }
.raw-block.cat-LIFR { color: var(--lifr); }
.raw-seg { display: block; }
.raw-seg.cat-VFR { color: var(--vfr); }
.raw-seg.cat-MVFR { color: var(--mvfr); }
.raw-seg.cat-IFR { color: var(--ifr); }
.raw-seg.cat-LIFR { color: var(--lifr); }
.taf-seg-divider { border: none; border-top: 1px solid var(--accent); margin: 8px 0; }
.decoded-table { margin-bottom: 4px; }
.decoded-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 8px 2px; border-bottom: 1px solid var(--border); font-size: 14px;
}
.decoded-row:last-child { border-bottom: none; }
.decoded-k { color: var(--muted); flex-shrink: 0; }
.decoded-v { font-weight: 600; text-align: right; }
.decoded-period { margin-bottom: 14px; }
.decoded-period:last-child { margin-bottom: 0; }
.decoded-period + .decoded-period { border-top: 1px solid var(--accent); padding-top: 14px; }
.decoded-period-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }

/* ---- Med Crew Brief checklist ---- */
.med-checklist { display: flex; flex-direction: column; gap: 2px; }
.med-check-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 8px;
  border: 1px solid transparent; border-bottom-color: var(--border); border-radius: 8px; cursor: pointer;
}
.med-check-row:last-child { border-bottom-color: transparent; }
.med-check-row input[type="checkbox"] {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; min-height: 0; padding: 0; flex: 0 0 22px;
  border-radius: 50%; border: 2px solid var(--muted); background: transparent;
  cursor: pointer; position: relative;
}
.med-check-row input[type="checkbox"]:checked { background: var(--vfr); border-color: var(--vfr); }
.med-check-row input[type="checkbox"]:checked::after {
  content: ''; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.med-check-row label { font-size: 14px; font-weight: 600; cursor: pointer; flex: 1; }
/* Checked: just a thin green outline, no green fill. */
.med-check-row.checked, .med-check-row.checked:last-child { border-color: var(--vfr); }

/* ---- Review & Submit: SUBMIT lives on the nav bar itself, not as a
   separate floating bar — it used to sit as its own element directly above
   the pill and visually overlapped it. It's shown only via .mob-nav.on-review
   (toggled in goScreen), and it's positioned absolute so it never joins the
   pill's own flex row of stage items.
   - Portrait phone (default here, narrow & not landscape): a round yellow
     button centered just above the pill.
   - Tablet, phone landscape, or a laptop/desktop (media query below): a
     yellow extension welded onto the right end of the pill instead. */
.mob-nav-submit {
  display: none; position: absolute; z-index: 106;
  background: var(--accent); color: #1a1300; font-weight: 800; letter-spacing: .2px;
  border: none; cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,.35);
  text-align: center; line-height: 1.15;
}
.mob-nav.on-review .mob-nav-submit { display: flex; align-items: center; justify-content: center; }
.mob-nav-submit.submitted, .mob-nav-submit:disabled {
  background: var(--panel-2); color: var(--muted); box-shadow: none; cursor: default;
}
/* Portrait phone: round button centered above the pill. */
.mob-nav-submit {
  left: 50%; bottom: calc(100% + 12px); transform: translateX(-50%);
  width: 66px; height: 66px; border-radius: 50%; font-size: 11px; padding: 4px;
}
@media (min-width: 640px), (orientation: landscape) {
  /* Flatten the pill's right corners only while the extension is attached,
     so the two read as one continuous shape rather than a pill plus a
     separate floating chip. */
  .mob-nav.on-review { border-top-right-radius: 0; border-bottom-right-radius: 0; }
  .mob-nav-submit {
    left: 100%; right: auto; top: -1px; bottom: -1px; transform: none;
    width: 96px; height: auto; border-radius: 0 22px 22px 0;
    font-size: 13px; padding: 4px 10px;
  }
}
.review-readout { font-size: 14px; line-height: 1.6; }
.review-readout .review-row { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; }
.review-readout .review-k { color: var(--muted); }
.review-readout .review-v { font-weight: 600; text-align: right; }

.primary-btn {
  width: 100%; min-height: 48px; border-radius: 12px; border: none;
  background: var(--accent); color: #1a1300; font-weight: 800; font-size: 15px; cursor: pointer;
}
.ghost-btn {
  width: 100%; min-height: 44px; border-radius: 12px; border: 1px solid var(--border);
  background: transparent; color: var(--text); font-weight: 600; cursor: pointer;
}

.stale-badge {
  display: inline-block; font-size: 11px; background: #7a3b0a; color: #ffd9a8;
  padding: 2px 8px; border-radius: 6px; margin-bottom: 8px;
}

#login-screen { align-items: center; justify-content: center; padding: 24px; z-index: 400; }
.login-box { width: 100%; max-width: 360px; }
.login-box h1 { color: var(--accent); font-size: 28px; margin-bottom: 4px; text-align: center; }
.login-box .tagline { color: var(--muted); text-align: center; margin-bottom: 24px; font-size: 13px; }
.error-text { color: var(--ifr); font-size: 13px; margin-top: 8px; min-height: 16px; }

/* ---- Quick login: one-tap username, then just the password ---- */
.quick-login-list { display: flex; flex-direction: column; gap: 8px; }
.quick-login-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 14px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--panel-2); cursor: pointer;
}
.quick-login-row:active { background: var(--panel); opacity: 0.85; }
.quick-login-row.confirming { border-color: var(--r); background: rgba(220, 38, 38, 0.1); cursor: default; }
.quick-login-name { font-size: 15px; font-weight: 700; }
.quick-login-del {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; border: none;
  background: none; color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer;
}
.quick-login-del:active { color: var(--r); }
.quick-login-confirm-del {
  flex-shrink: 0; border: none; border-radius: 8px; background: var(--r); color: #fff;
  font-size: 12px; font-weight: 800; padding: 7px 12px; cursor: pointer;
}
.quick-login-confirm-del:active { opacity: 0.8; }
.login-back-btn {
  display: block; background: none; border: none; color: var(--accent);
  font-size: 13px; font-weight: 700; padding: 0; margin-bottom: 14px; cursor: pointer;
}

/* ---- Settings: Weather Stations list (add/remove/drag-reorder) ---- */
.stations-list { display: flex; flex-direction: column; gap: 8px; }
.station-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--panel-2);
}
.station-row.dragging {
  opacity: 0.9; box-shadow: 0 6px 18px rgba(0,0,0,.45);
  position: relative; z-index: 5;
}
/* Rows within the current "shown by default" count — mirrors exactly what
   the Weather & Environmental page will display, updating live as the
   pilot edits the count above. */
.station-row.station-row-shown { border-color: var(--accent); border-width: 2px; padding: 9px 11px; }
.station-drag-handle {
  color: var(--muted); font-size: 18px; line-height: 1; padding: 6px;
  cursor: grab; touch-action: none; flex-shrink: 0;
}
.station-row-name { flex: 1; font-size: 15px; font-weight: 700; }
.station-remove-btn {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; border: none;
  background: none; color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer;
}
.station-remove-btn:active { color: var(--r); }

/* Note: the bottom progress bar used to hide above 701px width, on the
   assumption that a wide viewport meant a desktop browser that would show
   some other navigation instead — but there never was one, and iPad (768px+
   portrait, 1024px+ landscape) falls well past that width too. This app is
   only ever used on a phone or tablet, so the progress bar now always
   shows regardless of screen size. */

/* ---- NOTAMs grouped by station, with acknowledge ---- */
.notam-section-title { font-size: 12px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); margin: 6px 0 8px; }
.notam-station { border: 1px solid var(--border); border-radius: 12px; margin-bottom: 10px; padding: 6px 8px 2px; background: var(--panel); }
.notam-station-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.notam-station-toggle {
  flex: 1; min-width: 0; text-align: left; background: none; border: none; color: var(--text);
  font-size: 14px; cursor: pointer; min-height: 40px; padding: 4px 2px;
}
.notam-count { margin-left: 8px; font-size: 12px; font-weight: 700; color: var(--accent); }
.notam-count.done { color: var(--muted); font-weight: 600; }
.notam-age { font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); margin: 8px 0 6px; }
.notam-row { display: flex; flex-direction: column; margin-bottom: 4px; }
.notam-row.acked .notam-card { opacity: .6; }
.notam-ack-btn {
  align-self: flex-end; margin-bottom: 8px; min-height: 34px; padding: 6px 12px;
  border-radius: 10px; border: 1px solid var(--border); background: none; color: var(--muted);
  font-size: 12px; font-weight: 700; cursor: pointer;
}
.notam-ack-btn.primary { border-color: var(--accent); color: var(--accent); }
.notam-ack-btn:active { opacity: .65; }
.notam-station-head .notam-ack-btn { margin-bottom: 0; flex-shrink: 0; }
.notam-acked-toggle { background: none; border: none; color: var(--muted); font-size: 12px; font-weight: 700; padding: 8px 2px; cursor: pointer; min-height: 36px; }
.notam-none { padding: 4px 2px 8px; }
.notam-badge { display: inline-block; font-size: 9px; font-weight: 800; letter-spacing: .5px; padding: 1px 6px; border-radius: 6px; margin-left: 4px; color: #1a1300; vertical-align: middle; }
.notam-badge.new { background: var(--accent); }
.notam-badge.updated { background: #f59e0b; }

/* ---- Keyboard open: pill out of the way, extra scroll room under the content
   (--kb is the measured keyboard height, set in app.js) so even the lowest
   field can scroll up above the keys. ---- */
html.kb-open .mob-nav { display: none; }
html.kb-open .scroll { padding-bottom: calc(var(--kb, 0px) + 40px); }
html.kb-open .modal-body { padding-bottom: calc(var(--kb, 0px) + 20px); }

/* ---- Stage swipe: while a drag or snap animation is running, the current
   step and its neighbours are stacked absolutely under the header so they can
   slide side by side. At rest they are ordinary flex children again. ---- */
#app { position: relative; }
.screen { touch-action: pan-y; }
.screen.swipe-layer {
  display: flex; position: absolute; left: 0; right: 0; bottom: 0;
  will-change: transform; background: var(--bg);
}

/* ===== NOTAMs: filter/sort controls, category sections, translated flip cards ===== */
.nt-controls { display: flex; align-items: center; gap: 8px; margin: 2px 0 10px; }
.nt-ctl {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px;
  background: none; border: 1.5px solid #3b8fd0; border-radius: 6px; color: #7cc0f5;
  font-size: 15px; font-weight: 600; cursor: pointer;
}
.nt-ctl:active { opacity: .65; }
.nt-ctl-ic { font-size: 16px; line-height: 1; }
.nt-ctl-badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px;
  border-radius: 11px; background: #3b8fd0; color: #fff; font-size: 13px; font-weight: 700;
}
.nt-ctl-count { margin-left: auto; }

.nt-section {
  margin: 6px -8px 0; padding: 6px 12px; font-size: 13px; font-weight: 700; letter-spacing: .7px;
  text-transform: uppercase; color: var(--muted); background: rgba(0,0,0,.28);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.notam-row { display: block; border-bottom: 1px solid var(--border); padding-bottom: 0; }
.notam-row:last-child { border-bottom: none; }
.notam-row.acked .nt-card { opacity: .55; }

/* flip card, ForeFlight-style flat row */
.hazard-card.nt-card {
  background: none; border: none; border-radius: 0; max-height: none; overflow: visible;
  padding: 7px 2px 2px; margin: 0; font-size: 15px;
}
.nt-main-row { display: flex; gap: 12px; align-items: flex-start; }
.nt-icon { flex: 0 0 34px; display: flex; justify-content: center; padding-top: 1px; }
.nt-main { flex: 1; min-width: 0; }
.nt-title { font-size: 16px; font-weight: 700; line-height: 1.2; color: #f1f4fb; overflow-wrap: anywhere; }
.nt-id { font-weight: 400; color: var(--muted); font-size: 15px; white-space: nowrap; }
.nt-id-line { margin-top: 3px; }
.nt-bad { color: #ef5a3e; }
.nt-warn { color: #f0a53a; }
.nt-source {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; line-height: 1.3;
  color: #dfe6f3; white-space: pre-wrap; overflow-wrap: anywhere; background: rgba(0,0,0,.22);
  border-radius: 6px; padding: 5px 8px;
}
.nt-dates { margin: 5px 0 0 46px; border-top: 1px solid var(--border); padding-top: 5px; }
.nt-row { display: flex; gap: 14px; align-items: baseline; margin-bottom: 2px; font-size: 15px; line-height: 1.25; }
.nt-lbl { flex: 0 0 52px; font-weight: 700; color: #e6ebf5; }
.nt-lbl.nt-act { color: #7ac143; }
.nt-lbl.nt-up { color: #f0a53a; }
.nt-lbl.nt-exp { color: var(--muted); }
.nt-val { font-weight: 700; color: #f1f4fb; }
.nt-rem { font-weight: 400; color: var(--muted); }
.nt-actions { display: flex; justify-content: flex-end; padding: 0 2px; }
.nt-actions .notam-ack-btn { margin-bottom: 4px; }

/* category icons */
.nicon { display: inline-block; flex-shrink: 0; }
.nic-rwy { background: #d9382b; color: #fff; font-size: 11px; font-weight: 800; padding: 3px 5px; border-radius: 3px; letter-spacing: .3px; }
.nic-twy { width: 26px; height: 26px; border: 2.5px solid #f2c230; color: #f2c230; border-radius: 3px; font-weight: 800; font-size: 16px; line-height: 21px; text-align: center; }
.nic-proc { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(#5b9bd5 0 50%, #3f7d3c 50% 100%); position: relative; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.25); }
.nic-proc::after { content: ''; position: absolute; left: 4px; right: 4px; top: 50%; height: 2px; background: rgba(255,255,255,.85); transform: translateY(-1px); }
.nic-ad { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #8aa0c4; color: #8aa0c4; font-size: 11px; font-weight: 800; line-height: 24px; text-align: center; }
.nic-other { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--muted); color: var(--muted); font-size: 15px; font-style: italic; font-weight: 700; line-height: 24px; text-align: center; }

/* ===== Bottom sheets: Filter + Sort ===== */
.sheet-overlay {
  position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,.35);
  display: flex; flex-direction: column; padding-top: calc(env(safe-area-inset-top, 0px) + 12px);
}
.sheet-overlay[hidden] { display: none; }
/* iOS installed app: fixed layers stop at the short 812 viewport, so stack this
   one on the true-height page instead (same reason as .mob-nav). */
html.ios-standalone .sheet-overlay { position: absolute; inset: auto; top: 0; left: 0; right: 0; height: var(--true-vh); }
html.sheet-open .mob-nav { display: none; }
.sheet-panel {
  flex: 0 0 auto; height: 66%; margin-top: auto; min-height: 0; display: flex; flex-direction: column; background: #0f1824;
  border-radius: 16px 16px 0 0; overflow: hidden; border: 1px solid var(--border); border-bottom: none;
}
.sheet-head { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px; background: #1f3752; border-bottom: 1px solid rgba(255,255,255,.08); min-height: 64px; }
.sheet-title { flex: 1; text-align: center; font-size: 20px; font-weight: 700; color: #fff; }
.sheet-btn { min-width: 64px; min-height: 40px; padding: 0 14px; border: none; border-radius: 6px; font-size: 17px; font-weight: 600; color: #fff; cursor: pointer; }
.sheet-btn.dark { background: #0b121b; }
.sheet-btn.blue { background: #3498db; }
.sheet-body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 40px; }
.sheet-sec {
  display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; margin-top: 0;
  background: #121c28; color: #8794a8; font-size: 17px; font-weight: 700; letter-spacing: .6px;
  border-top: 1px solid rgba(255,255,255,.04);
}
.nf-small { background: none; border: 1.5px solid #5d6b80; color: #9fb0c8; font-size: 15px; font-weight: 600; padding: 7px 12px; border-radius: 6px; cursor: pointer; }
.nf-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 8px; padding: 14px 12px; }
.nf-chips.two { grid-template-columns: 1fr 1fr; }
.nf-chip { min-height: 44px; border-radius: 22px; font-size: 16px; font-weight: 600; cursor: pointer; border: 2px solid #3498db; padding: 0 6px; }
.nf-chip.on { background: #3498db; color: #fff; }
.nf-chip.off { background: transparent; color: #3498db; }
.nf-slider { padding: 22px 16px 14px; }
.nf-slider input[type=range] { width: 100%; accent-color: #3498db; height: 32px; }
.nf-slider-labels { display: flex; justify-content: space-between; margin-top: 4px; color: #9fb0c8; font-size: 14px; }
.nf-seg { display: grid; grid-template-columns: 1fr 1fr; margin: 12px; border: 1px solid rgba(255,255,255,.08); border-radius: 4px; overflow: hidden; }
.nf-seg button { background: #0b121b; border: none; color: #fff; padding: 12px 10px 14px; display: flex; flex-direction: column; gap: 10px; align-items: stretch; cursor: pointer; text-align: center; }
.nf-seg button.on { background: #3498db; }
.nf-seg b { font-size: 17px; }
.nf-prev { display: block; background: rgba(255,255,255,.1); border-radius: 8px; padding: 10px; font-size: 15px; font-weight: 400; min-height: 64px; }
.nf-seg button:not(.on) .nf-prev { background: rgba(255,255,255,.06); }
.nf-prev.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; text-align: center; }
.sheet-note { padding: 8px 20px 20px; color: #7f8da3; font-size: 14px; text-align: center; line-height: 1.4; }
.sort-row { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 16px 14px; background: #101c2a; color: #fff; border: none; border-bottom: 1px solid rgba(255,255,255,.08); font-size: 22px; cursor: pointer; text-align: left; }
.radio { width: 30px; height: 30px; border-radius: 50%; border: 2.5px solid #4a5568; flex-shrink: 0; }
.radio.on { background: #3498db; border-color: #3498db; position: relative; }
.radio.on::after { content: ''; position: absolute; left: 9px; top: 4px; width: 8px; height: 15px; border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg); }

#notam-sort-sheet .sheet-panel { height: auto; max-height: 66%; }
.sheet-head, .modal-header { touch-action: none; }
.drag-closing { transition: transform .22s ease-out; }
.drag-snap { transition: transform .2s ease-out; }

/* METAR <-> TAF pager inside the station pop-out */
.sm-tabs { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.sm-tabs button { background: none; border: 1.5px solid var(--border); color: var(--muted); font-size: 13px; font-weight: 700; padding: 5px 14px; border-radius: 999px; cursor: pointer; }
.sm-tabs button.on { background: var(--accent); border-color: var(--accent); color: #0b121b; }
.sm-hint { margin-left: auto; font-size: 12px; color: var(--muted); }
.sm-pager { overflow: hidden; touch-action: pan-y; }
.sm-track { display: flex; width: 200%; align-items: flex-start; will-change: transform; }
.sm-pane { flex: 0 0 50%; width: 50%; box-sizing: border-box; }

/* Station METAR/TAF modal must stack above the map modal when opened from a map dot. */
#station-modal { z-index: 520; align-items: flex-start; padding-top: max(9vh, calc(env(safe-area-inset-top, 0px) + 14px)); }   /* top edge stays put; only the bottom grows/shrinks with the page */
#station-modal .modal-panel { max-height: calc(100vh - max(9vh, calc(env(safe-area-inset-top, 0px) + 14px)) - 20px); }

/* Hidden native switch riding on the iPhone REFRESH ALL DATA button (haptic trigger). Overrides the global input reset. */
input.fx-hap {
  position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0;
  opacity: .01; pointer-events: none; border: 0; background: none;
  -webkit-appearance: auto; appearance: auto;
}

/* Visible press feedback on REFRESH ALL DATA: instant squish while held, green flash after the tap. */
#flightinfo-refresh-btn { transition: transform .08s ease, background-color .08s ease, border-color .08s ease; -webkit-tap-highlight-color: transparent; }
#flightinfo-refresh-btn:active { transform: scale(.96); background: var(--panel-2); border-color: var(--vfr); }
#flightinfo-refresh-btn.tap-flash { animation: tapFlash .6s ease-out; }
@keyframes tapFlash {
  0%   { background: var(--vfr); border-color: var(--vfr); color: #fff; transform: scale(.96); }
  40%  { transform: scale(1); }
  100% { background: transparent; }
}

/* ---- App-styled alert / confirm dialog ---- */
.app-dialog-overlay {
  position: fixed; inset: 0; z-index: 900; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(0, 0, 0, 0.6);
}
.app-dialog-overlay[hidden] { display: none; }
html.ios-standalone .app-dialog-overlay { position: absolute; inset: auto; top: 0; left: 0; right: 0; height: var(--true-vh); }
.app-dialog {
  width: 100%; max-width: 340px; background: var(--panel); border: 1px solid var(--border);
  border-radius: 18px; padding: 20px 18px 16px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  animation: appDialogIn .16s ease-out;
}
@keyframes appDialogIn { from { transform: scale(.94); opacity: 0; } to { transform: none; opacity: 1; } }
.app-dialog-title { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.app-dialog-msg { font-size: 16px; line-height: 1.4; color: var(--text); margin-bottom: 18px; }
.app-dialog-btns { display: flex; gap: 10px; }
.app-dialog-btns button {
  flex: 1; min-height: 46px; border-radius: 12px; font-size: 15px; font-weight: 700; cursor: pointer;
  border: 1px solid var(--border); background: transparent; color: var(--text);
}
.app-dialog-btns button.primary { background: var(--accent); border-color: var(--accent); color: #1a1405; }
.app-dialog-btns button:active { transform: scale(.97); filter: brightness(1.2); }

/* Header brand is a Home button. */
.brand { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.brand:active { opacity: .7; }
/* Bottom brief-stage nav is hidden on pages opened from the avatar menu. */
.mob-nav.nav-off { display: none !important; }
/* Settings: preference rows, switch, collapsible card */
.pref-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; }
.pref-row .muted { font-size: 12px; margin-top: 2px; }
.pref-switch { position: relative; width: 50px; height: 30px; flex: 0 0 50px; display: block; }
.pref-switch input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; opacity: 0; margin: 0; padding: 0; z-index: 2; cursor: pointer; }
.pref-switch span { position: absolute; inset: 0; border-radius: 15px; background: var(--panel-2); border: 1px solid var(--border); transition: background .15s; }
.pref-switch span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--muted); transition: transform .15s, background .15s; }
.pref-switch input:checked + span { background: var(--accent); border-color: var(--accent); }
.pref-switch input:checked + span::after { transform: translateX(20px); background: #1a1405; }
.collapse-head { display: flex; align-items: center; justify-content: space-between; cursor: pointer; margin-bottom: 0; -webkit-tap-highlight-color: transparent; }
.collapse-chev { transition: transform .15s; font-size: 16px; color: var(--muted); }
.collapse-head[aria-expanded="false"] .collapse-chev { transform: rotate(-90deg); }
#stations-collapse-body { margin-top: 12px; }
#stations-collapse-body[hidden] { display: none; }

/* Shown only when a station's METAR is more than 1 hour old. */
.metar-old { font-size: 11px; font-weight: 700; color: #ffb454; margin-top: 2px; line-height: 1.2; }
.decoded-table + .metar-old, .sm-pane > .metar-old { margin: 0 0 8px; font-size: 12px; }

/* TAF forecast bar: segments sized by how long each flight category is forecast. */
.taf-bar { position: relative; display: flex; width: 84px; max-width: 100%; height: 12px; border-radius: 6px; overflow: hidden; background: var(--border); }
.taf-seg { height: 100%; min-width: 3px; background: var(--border); }
.taf-seg.VFR { background: var(--vfr); }
.taf-seg.MVFR { background: var(--mvfr); }
.taf-seg.IFR { background: var(--ifr); }
.taf-seg.LIFR { background: var(--lifr); }

/* Header N-number is tappable. */
.header-title-btn { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.header-title-btn:active { opacity: .7; }
/* Aircraft picker list */
.aircraft-row { display: flex; align-items: center; gap: 8px; border: 1px solid var(--border); background: var(--panel-2); border-radius: 12px; margin-bottom: 8px; }
.aircraft-row.current { border-color: var(--accent); }
.aircraft-pick { flex: 1; text-align: left; background: none; border: none; color: var(--text); font-size: 18px; font-weight: 700; letter-spacing: .5px; padding: 12px 14px; min-height: 48px; cursor: pointer; }
.aircraft-row.current .aircraft-pick { color: var(--accent); }
.aircraft-del { background: none; border: none; color: var(--muted); font-size: 22px; width: 44px; min-height: 48px; cursor: pointer; }
.aircraft-del:active { color: var(--r); }

/* 1px marker for "now" within the TAF window. */
.taf-now { position: absolute; top: 0; bottom: 0; width: 1px; background: #fff; box-shadow: 0 0 0 .5px rgba(0,0,0,.55); pointer-events: none; }
.taf-now[hidden] { display: none; }

/* ---- Guided tour (spotlight) ---- */
.tour-overlay { position: fixed; inset: 0; z-index: 950; }
.tour-overlay[hidden] { display: none; }
html.ios-standalone .tour-overlay { position: absolute; inset: auto; top: 0; left: 0; right: 0; height: var(--true-vh); }
.tour-overlay.dim { background: rgba(5, 9, 18, .82); }
.tour-hole { position: absolute; border-radius: 14px; pointer-events: none; z-index: 1;
  box-shadow: 0 0 0 9999px rgba(5, 9, 18, .78), 0 0 0 2px var(--accent), 0 0 18px 2px rgba(var(--accent-rgb), .45);
  transition: top .25s ease, left .25s ease, width .25s ease, height .25s ease; }
.tour-hole[hidden] { display: none; }
.tour-card { position: absolute; z-index: 2; left: 50%; transform: translateX(-50%); width: min(calc(100% - 24px), 440px); box-sizing: border-box;
  background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 12px 14px 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .55); display: flex; flex-direction: column; max-height: 62%; }
.tour-card.center { top: 50%; transform: translate(-50%, -50%); }
.tour-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.tour-step { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.tour-skip { background: none; border: 1px solid var(--border); color: var(--text); border-radius: 16px; padding: 4px 12px; font-size: 12px; font-weight: 600; min-height: 30px; cursor: pointer; }
.tour-body { overflow-y: auto; -webkit-overflow-scrolling: touch; min-height: 0; padding-right: 2px; }
.tour-body h2 { font-size: 19px; margin: 0 0 4px; color: var(--accent); }
.tour-body p { font-size: 14.5px; line-height: 1.45; color: var(--text); margin: 0 0 8px; }
.tour-body ul { margin: 0 0 8px; padding-left: 18px; }
.tour-body li { font-size: 14px; line-height: 1.4; margin-bottom: 4px; color: var(--text); }
.tour-body b { color: #fff; }
.tour-body .tour-tip { background: var(--panel-2); border-left: 3px solid var(--accent); border-radius: 8px; padding: 7px 10px; font-size: 13px; line-height: 1.4; margin: 6px 0 4px; }
.tour-code { font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; line-height: 1.6; background: var(--panel-2); border-radius: 8px; padding: 6px 8px; margin: 4px 0 8px; word-break: break-word; }
.tour-code span { padding: 1px 3px; border-radius: 4px; }
.tour-code .c1 { background: rgba(var(--accent-rgb), .22); } .tour-code .c2 { background: rgba(52,152,219,.28); } .tour-code .c3 { background: rgba(46,204,113,.25); }
.tour-code .c4 { background: rgba(231,76,60,.28); } .tour-code .c5 { background: rgba(192,57,192,.28); } .tour-code .c6 { background: rgba(147,162,194,.28); }
.tour-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 8px; }
.tour-chip { font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 11px; color: #fff; }
.tour-chip.VFR { background: var(--vfr); } .tour-chip.MVFR { background: var(--mvfr); } .tour-chip.IFR { background: var(--ifr); } .tour-chip.LIFR { background: var(--lifr); }
.tour-prog { height: 3px; background: var(--border); border-radius: 2px; margin: 8px 0 10px; overflow: hidden; }
.tour-prog i { display: block; height: 100%; background: var(--accent); width: 0; transition: width .25s ease; }
.tour-nav { display: flex; gap: 10px; }
.tour-nav button { flex: 1; min-height: 44px; }
.tour-nav button[hidden] { display: none; }

/* Floating "back to top" arrow (Weather page, once the NOTAM list has been scrolled into). */
.to-top-btn {
  position: absolute; right: 8px; bottom: calc(100% + 12px);
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(22, 33, 58, 0.97); color: var(--accent, #e3b53c);
  border: 1px solid var(--border); box-shadow: 0 4px 18px rgba(0,0,0,.45);
  cursor: pointer; padding: 0; z-index: 106;
  opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .18s, transform .18s;
}
.to-top-btn[hidden] { display: none; }
.to-top-btn.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top-btn:active { transform: scale(.92); }

.app-dialog-btns { flex-wrap: wrap; }
.app-dialog-btns button.wide { flex: 1 1 100%; }

/* ---- Org tree (Admin Settings) ---- */
.org-tree { position: relative; }
.org-node { position: relative; }
.org-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin: 5px 0;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px; cursor: pointer;
}
.org-row.me { border-color: var(--accent); }
.org-row.off { opacity: .5; }
.org-grip {
  width: 28px; height: 32px; display: flex; align-items: center; justify-content: center; flex: none;
  color: var(--muted); font-size: 20px; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none;
}
.org-grip.none { visibility: hidden; }
.org-main { flex: 1; min-width: 0; }
.org-name { font-weight: 700; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.org-user { font-size: 12px; color: var(--muted); }
.org-role { flex: none; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); }
.org-role.super_admin { color: #1a1405; background: var(--accent); border-color: var(--accent); }
.org-role.admin { color: #fca5a5; border-color: #7f1d1d; }
.org-role.manager { color: #93c5fd; border-color: #1e3a8a; }
.org-kids { margin-left: 16px; padding-left: 12px; border-left: 2px solid var(--border); }
.org-tree.dragging .org-row { opacity: .35; }
.org-tree.dragging .org-row.valid { opacity: 1; border-style: dashed; border-color: var(--accent); }
.org-tree.dragging .org-row.hover-ok { background: rgba(22,163,74,.25); border-color: var(--vfr); border-style: solid; }
.org-tree.dragging .org-row.src { opacity: .6; }
.org-ghost {
  position: fixed; z-index: 1000; pointer-events: none; padding: 8px 14px; border-radius: 12px;
  background: var(--accent); color: #1a1405; font-weight: 800; font-size: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.5);
  transform: translate(-50%, -140%);
}
.org-edit-btns { display: flex; gap: 10px; margin-top: 8px; }
.org-edit-btns .ghost-btn { flex: 1; }

/* Add-role modal: centred pop-up */
.role-center { align-items: center; justify-content: center; z-index: 910; }
.role-check { display: flex; align-items: center; gap: 10px; font-size: 14px; margin: 4px 0; }
.role-check input { width: 20px; height: 20px; min-height: 0; }
.role-list-head { margin: 16px 0 6px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.role-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--border); }
.role-pill { font-weight: 700; }
.role-sub { flex: 1; font-size: 12px; }
.role-del { background: none; border: none; color: #fca5a5; font-size: 22px; line-height: 1; cursor: pointer; padding: 2px 8px; }

/* ---- Weather cameras (map markers + viewer) ---- */
.legend-cam { color: var(--text); }
.cam-pin { width: 20px; height: 20px; border-radius: 50%; background: #0f172a; color: var(--accent); border: 2px solid #fff; display: flex; align-items: center; justify-content: center; box-sizing: border-box; box-shadow: 0 1px 4px rgba(0,0,0,.45); }
.cam-modal { z-index: 530; }
.cam-panel { max-width: 560px; }
.cam-body { padding-top: 6px; }
.cam-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.cam-chip { background: transparent; border: 1px solid var(--border); color: var(--text); border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 700; cursor: pointer; }
.cam-chip.on { background: var(--accent); border-color: var(--accent); color: #1a1405; }
.cam-stage { position: relative; border-radius: 12px; overflow: hidden; background: #000; }
.cam-stage { touch-action: none; user-select: none; -webkit-user-select: none; aspect-ratio: 4 / 3; }
.cam-stage img { width: 100%; height: 100%; object-fit: contain; display: block; will-change: transform; pointer-events: none; }
.cam-nav { position: absolute; border: none; background: rgba(15,23,42,.6); color: #fff; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.cam-nav.left, .cam-nav.right { top: 50%; transform: translateY(-50%); width: 30px; height: 54px; font-size: 28px; }
.cam-nav.left { left: 0; border-radius: 0 10px 10px 0; } .cam-nav.right { right: 0; border-radius: 10px 0 0 10px; }
.cam-nav.up, .cam-nav.down { left: 50%; transform: translateX(-50%); width: 54px; height: 26px; font-size: 18px; }
.cam-nav.up { top: 0; border-radius: 0 0 10px 10px; } .cam-nav.down { bottom: 0; border-radius: 10px 10px 0 0; }
.cam-nav[disabled] { opacity: .25; }
.cam-caption { margin-top: 8px; font-weight: 700; font-size: 15px; }
.cam-caption small { font-weight: 500; color: var(--muted); margin-left: 6px; }
.cam-hint, .cam-attr { font-size: 12px; margin-top: 4px; }
.cam-attr a { color: var(--accent); }
.cam-pin.stale { opacity: .55; }

.cam-where { font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.cam-where small { display: block; font-weight: 500; color: var(--muted, #888); font-size: 12.5px; }
.cam-sites { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }

.cs-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 8px; }
.cs-tile { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: 8px 2px; text-align: center; }
.cs-tile b { display: block; font-size: 20px; line-height: 1.1; }
.cs-tile span { display: block; font-size: 10px; margin-top: 3px; opacity: .8; }
.cs-tile.good b { color: #4ade80; } .cs-tile.warn b { color: #fbbf24; } .cs-tile.bad b { color: #f87171; } .cs-tile.off b { color: #94a3b8; }
.cs-lines { font-size: 13px; display: grid; gap: 4px; color: var(--text, #e5e7eb); }
.cs-bad { color: #f87171; }
.cs-states { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.cs-states span { font-size: 12px; background: rgba(255,255,255,.07); border-radius: 999px; padding: 2px 9px; }
.cs-key { font-size: 11px; margin-top: 8px; }

.stn-cam { background: none; border: 0; padding: 0 0 0 5px; margin: 0; color: var(--accent); vertical-align: -2px; line-height: 1; cursor: pointer; }
.stn-cam svg { display: inline-block; }

.legend-cam-old { opacity: .55; }
.map-layers { background: var(--panel, #1b2540); border-radius: 8px; overflow: hidden; border: 1px solid var(--border, rgba(255,255,255,.15)); }
.map-layers-btn { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: none; border: 0; color: var(--text, #e5e7eb); cursor: pointer; padding: 0; }
.map-layers-panel { padding: 6px 10px 8px; border-top: 1px solid var(--border, rgba(255,255,255,.15)); display: grid; gap: 6px; font-size: 13px; color: var(--text, #e5e7eb); white-space: nowrap; }
.map-layers-panel[hidden] { display: none; }
.map-layers-panel label { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.map-layers-panel input[type=checkbox] { width: 18px; height: 18px; min-width: 18px; flex: none; padding: 0; margin: 0; accent-color: var(--accent); background: none; border-radius: 4px; }
.map-layers-panel label { margin: 0; text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 13px; }
.map-layers-panel input[type=checkbox] { -webkit-appearance: checkbox !important; appearance: auto !important; width: 18px !important; height: 18px !important; min-height: 0 !important; min-width: 18px !important; }
.map-layers-panel label { min-height: 0 !important; height: auto !important; line-height: 1.2; }
.cs-alert { background: rgba(248,113,113,.12); border: 1px solid rgba(248,113,113,.5); color: #fca5a5; border-radius: 10px; padding: 8px 10px; font-size: 13px; margin-bottom: 8px; }

.cam-updating { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); background: rgba(8,12,24,.72); color: var(--accent); padding: 5px 13px; border-radius: 999px; font-size: 13px; font-weight: 600; pointer-events: none; white-space: nowrap; z-index: 3; }
.cam-updating[hidden] { display: none; }
.cam-dots i { font-style: normal; display: inline-block; margin-left: 3px; animation: camdot 1.2s infinite ease-in-out; }
.cam-dots i:nth-child(2) { animation-delay: .2s; } .cam-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes camdot { 0%, 20% { opacity: .15; } 50% { opacity: 1; } 100% { opacity: .15; } }

.haz-tabs { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 5px; overflow: hidden; margin: -2px 0 12px; }
.haz-tab { -webkit-appearance: none; appearance: none; flex: 0 1 auto; display: inline-flex; align-items: center; gap: 3px; width: auto; height: auto; min-height: 0; min-width: 0; margin: 0; background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; outline: none; -webkit-tap-highlight-color: transparent; color: var(--muted, #93a2c2); padding: 8px 0; font: inherit; font-size: 12.5px; font-weight: 800; letter-spacing: 0.2px; text-transform: uppercase; cursor: pointer; white-space: nowrap; }
.haz-sep { color: var(--muted, #93a2c2); opacity: .7; font-size: 12.5px; flex: 0 0 auto; user-select: none; padding: 0; margin: 0; }
.haz-tab.empty { opacity: 1; }
.haz-tab.on { color: var(--accent); opacity: 1; }
.haz-n { display: inline-flex; align-items: center; justify-content: center; min-width: 14px; height: 14px; padding: 0 4px; box-sizing: border-box; border-radius: 999px; background: rgba(147,162,194,.28); color: var(--text, #e5e7eb); font-size: 9.5px; font-weight: 800; line-height: 1; letter-spacing: 0; }
.haz-tab.on .haz-n { background: var(--accent); color: #111827; }

/* Maintenance due (Ramco report) */
.mx-next { font-size: 13px; line-height: 1.4; margin: 2px 0 10px; color: var(--text, #e5e7eb); }
.mx-next small { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }
.mx-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.mx-actions .ghost-btn { flex: 1 1 140px; margin: 0; }
.mx-over { color: #f87171; font-weight: 700; }
.mx-soon { color: var(--accent); font-weight: 700; }
.mx-ok { color: #4ade80; font-weight: 700; }
.mx-row { border-top: 1px solid rgba(147,162,194,.25); padding: 10px 0; }
.mx-row:first-child { border-top: 0; }
.mx-row .d { font-size: 14px; font-weight: 700; }
.mx-row .t { font-size: 11px; color: var(--muted); margin: 2px 0 4px; }
.mx-row .due { font-size: 13px; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.mx-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.mx-btns button { flex: 1 1 120px; }
.mx-kv { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 6px 0; border-top: 1px solid rgba(147,162,194,.2); }
.mx-kv:first-of-type { border-top: 0; }

/* Maintenance gauges (layout D) */
.mx-gauges { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 2px 0 14px; }
.mx-gauge { background: var(--input-bg, #1f2a47); border: 1px solid rgba(147,162,194,.28); border-radius: 16px; padding: 12px 8px 12px; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; text-align: center; }
.mx-gauge .tl { font-size: 11px; font-weight: 800; letter-spacing: .8px; color: var(--muted); text-transform: uppercase; }
.mx-ring { position: relative; width: 104px; height: 104px; }
.mx-ring svg { width: 100%; height: 100%; display: block; }
.mx-ring-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.mx-ring-c .n { font-size: 30px; font-weight: 800; line-height: 1; }
.mx-ring-c .n.sm { font-size: 26px; }
.mx-ring-c .u { font-size: 11px; color: var(--muted); margin-top: 2px; }
.mx-gauge .nm { font-size: 13px; font-weight: 700; line-height: 1.25; max-width: 100%; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mx-gauge .sb { font-size: 12px; color: var(--muted); }
.mx-gauge.none { opacity: .7; justify-content: center; min-height: 190px; }
.mx-cap { grid-column: 1 / -1; text-align: center; font-size: 11px; color: var(--muted); margin-top: -2px; }
.mx-actions .mx-pri { border-color: var(--accent); color: var(--accent); }
.mx-divider { height: 1px; background: rgba(147,162,194,.25); margin: 14px 0; }
.mx-actions { margin-top: 2px; }

.mx-seg { display: flex; gap: 0; border: 1px solid rgba(147,162,194,.35); border-radius: 12px; overflow: hidden; margin-bottom: 14px; }
.mx-seg-btn { -webkit-appearance: none; appearance: none; flex: 1; margin: 0; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--muted); font: inherit; font-size: 13px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; padding: 10px 0; cursor: pointer; }
.mx-seg-btn.on { background: var(--accent) !important; color: #111827; }
.mx-gauges-all { margin: 0; }
.mx-gauges-all .mx-ring { width: 92px; height: 92px; }
.mx-gauges-all .mx-ring-c .n { font-size: 26px; }
.mx-gauges-all .mx-ring-c .n.sm { font-size: 22px; }

/* ==========================================================================
   DESKTOP EXPERIENCE  (laptop / desktop with a mouse)
   Everything below is scoped to html.desktop, a class app.js sets only for a
   wide window with a precise pointer (see setDesktopMode). Phones and tablets
   never get the class, so nothing here can change how they look.
   ========================================================================== */
.desk-tab, .desk-subnav { display: none; }

html.desktop {
  --desk-w: 1320px;
  --desk-pad: max(32px, calc((100% - var(--desk-w)) / 2));
}
html.desktop body {
  background:
    radial-gradient(1200px 600px at 78% -10%, rgba(var(--accent-rgb), .05), transparent 60%),
    linear-gradient(rgba(42,58,92,.18) 1px, transparent 1px) 0 0 / 60px 60px,
    linear-gradient(90deg, rgba(42,58,92,.18) 1px, transparent 1px) 0 0 / 60px 60px,
    var(--bg);
}

/* ---- Top bar: brand, aircraft, page tabs, submit, account ---- */
html.desktop .app-bar {
  display: flex; align-items: center; gap: 14px;
  height: 60px; padding: 0 24px; background: rgba(14,21,48,.96);
}
html.desktop .app-bar-left { flex: 0 0 auto; }
html.desktop .brand { font-size: 19px; cursor: pointer; }
html.desktop .header-title-btn {
  flex-direction: row; gap: 8px; min-height: 36px; margin: 0; padding: 0 14px;
  border: 1px solid var(--border); border-radius: 9px; background: var(--panel-2); cursor: pointer;
}
html.desktop .header-title-btn::after { content: '\25BE'; color: var(--muted); font-size: 12px; }
html.desktop .header-title-btn:hover { border-color: var(--accent); }
html.desktop .header-nnumber { font-size: 15px; line-height: 1; }
html.desktop .app-bar-right { margin-left: auto; gap: 10px; }
html.desktop .header-username { max-width: 180px; font-size: 13px; }
html.desktop .avatar-btn { cursor: pointer; }
html.desktop .header-menu { min-width: 200px; }
html.desktop .header-menu-item { cursor: pointer; }
html.desktop .header-menu-item:hover { background: var(--panel-2); }

html.desktop .app-bar .mob-nav {
  position: static !important; transform: none !important; inset: auto !important;
  width: auto; max-width: none; flex: 1 1 auto; margin-left: 8px;
  background: none; border: 0; box-shadow: none; border-radius: 0; padding: 0;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  align-items: center; gap: 2px;
}
html.desktop .mob-nav.nav-off { display: flex !important; }
html.desktop .mob-nav[hidden] { display: none !important; }
html.desktop .stage-item, html.desktop .desk-tab {
  flex: 0 0 auto; flex-direction: row; align-items: center; gap: 8px;
  padding: 0 12px; height: 36px; border-radius: 8px; cursor: pointer;
  background: none; border: 0; color: var(--muted); position: relative;
}
html.desktop .desk-tab { display: flex; order: -1; font-weight: 700; font-size: 13.5px; margin-right: 6px; }
html.desktop .stage-item::before { display: none; }
html.desktop .stage-item:hover, html.desktop .desk-tab:hover { background: rgba(147,162,194,.1); color: var(--text); }
html.desktop .stage-num { width: 20px; height: 20px; font-size: 10.5px; }
html.desktop .stage-label { font-size: 13.5px; font-weight: 700; letter-spacing: 0; white-space: nowrap; }
html.desktop .stage-label br { display: none; }
html.desktop .stage-item.active, html.desktop .desk-tab.active { background: rgba(var(--accent-rgb), .13); }
html.desktop .stage-item.active .stage-label, html.desktop .desk-tab.active { color: var(--accent); }
html.desktop .desk-tab::after { content: ''; width: 1px; height: 18px; background: var(--border); position: absolute; right: -4px; }
html.desktop .mob-nav-submit {
  display: flex !important; position: static !important; transform: none !important;
  width: auto; height: 36px; border-radius: 8px; padding: 0 20px; margin-left: auto; font-size: 13px;
  align-items: center; justify-content: center; cursor: pointer; box-shadow: none;
}
html.desktop .to-top-btn { display: none !important; }

/* ---- Pages: wide panels, centered, with real columns ---- */
html.desktop .screen > .scroll {
  padding: 26px var(--desk-pad) 48px;
}
html.desktop .card {
  background: rgba(22,33,58,.94); border-radius: 14px; padding: 20px; margin-bottom: 20px;
  break-inside: avoid; -webkit-column-break-inside: avoid;
}
html.desktop .card h2 { font-size: 12px; letter-spacing: 1px; }
html.desktop #stale-badge-holder { break-inside: avoid; }
html.desktop .med-checklist { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
html.desktop .med-check-row { margin: 0; }
html.desktop .mx-gauges { gap: 14px; }
html.desktop .ghost-btn, html.desktop .primary-btn { cursor: pointer; }
html.desktop .ghost-btn:hover { border-color: var(--accent); }
html.desktop .gyr-btn { cursor: pointer; }
html.desktop .row { gap: 14px; }
html.desktop input, html.desktop select { min-height: 40px; border-radius: 9px; font-size: 14px; }
html.desktop textarea { font-size: 14px; border-radius: 9px; }
html.desktop .station-table td, html.desktop .station-table th { padding-top: 11px; padding-bottom: 11px; }
html.desktop .tappable-badge, html.desktop .stat.tappable, html.desktop .history-item-body { cursor: pointer; }

/* ---- Settings / Account / Admin / History: left sub-menu + content ---- */
html.desktop .screen.has-subnav.active { flex-direction: row; }
html.desktop .has-subnav .desk-subnav {
  display: flex; flex-direction: column; gap: 4px; flex: 0 0 240px; padding: 26px 16px;
  border-right: 1px solid var(--border); background: rgba(14,21,48,.55); overflow-y: auto;
}
html.desktop .desk-subnav-title { font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); padding: 0 10px 8px; }
html.desktop .desk-subnav button {
  text-align: left; height: 38px; padding: 0 12px; border-radius: 8px; border: 0; background: none;
  color: var(--text); font-size: 14px; font-weight: 600; cursor: pointer;
}
html.desktop .desk-subnav button:hover { background: rgba(147,162,194,.1); }
html.desktop .desk-subnav button.on { background: rgba(var(--accent-rgb), .13); color: var(--accent); }
html.desktop .desk-subnav button[hidden] { display: none; }
html.desktop .desk-subnav .desk-subnav-sep { height: 1px; background: var(--border); margin: 10px 4px; }

/* ---- Dashboard (desktop home) ---- */
.dash { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) 360px; gap: 20px; align-items: start; }
.dash .card { margin-bottom: 0; }
.dash-hero { grid-column: 1 / 3; border-color: rgba(var(--accent-rgb), .55) !important; padding: 24px 26px !important; }
.dash-hero-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.dash-date { font-size: 13px; color: var(--muted); }
.dash-hello { font-size: 28px; font-weight: 800; margin-top: 4px; }
.dash-sub { font-size: 13px; color: var(--muted); margin-top: 4px; }
.dash-cta { width: auto !important; padding: 0 26px; min-height: 46px !important; font-size: 14px !important; white-space: nowrap; }
.dash-steps { display: flex; gap: 14px; margin-top: 24px; }
.dash-step { flex: 1; min-width: 0; text-align: left; background: none; border: 0; color: var(--text); cursor: pointer; padding: 0; }
.dash-step-top { display: flex; align-items: center; gap: 8px; }
.dash-step-n {
  width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; background: var(--panel-2); border: 1px solid var(--border); color: var(--muted); flex: 0 0 auto;
}
.dash-step-line { flex: 1; height: 2px; background: var(--border); }
.dash-step.done .dash-step-n { background: var(--vfr); border-color: var(--vfr); color: #052e16; }
.dash-step.done .dash-step-line { background: var(--vfr); }
.dash-step.cur .dash-step-n { background: var(--accent); border-color: var(--accent); color: #1a1300; }
.dash-step b { display: block; font-size: 13px; margin-top: 8px; }
.dash-step span.s { font-size: 11.5px; color: var(--muted); }
.dash-step:hover b { color: var(--accent); }
.dash-side { grid-column: 3; grid-row: 1 / span 3; display: flex; flex-direction: column; gap: 20px; }
.dash-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.dash-head h2 { margin: 0 !important; }
.dash-chip { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 11.5px; font-weight: 800; letter-spacing: .3px; background: rgba(147,162,194,.14); color: var(--muted); }
.dash-chip.G { background: rgba(22,163,74,.18); color: #4ade80; }
.dash-chip.Y { background: rgba(202,154,18,.2); color: #fbbf24; }
.dash-chip.R { background: rgba(220,38,38,.2); color: #f87171; }
.dash-kv { display: flex; justify-content: space-between; font-size: 13px; padding: 7px 0; border-top: 1px solid var(--border); }
.dash-kv span { color: var(--muted); }
.dash-btns { display: flex; gap: 10px; margin-top: 14px; }
.dash-btns button { flex: 1; width: auto !important; }
.dash-stn { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel-2); margin-bottom: 8px; }
.dash-stn b { width: 52px; }
.dash-stn .t { flex: 1; font-size: 12.5px; color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-haz { padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel-2); margin-bottom: 8px; font-size: 12.5px; }
.dash-haz b { display: block; margin-bottom: 2px; }
.dash-haz span { color: var(--muted); }
.dash-hist { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-top: 1px solid var(--border); cursor: pointer; }
.dash-hist:hover b { color: var(--accent); }
.dash-hist .m { flex: 1; font-size: 12px; color: var(--muted); }
.dash-hist b { font-size: 13px; display: block; color: var(--text); }
.dash-link { color: var(--accent); font-size: 12.5px; font-weight: 700; background: none; border: 0; cursor: pointer; }
.dash-muted { color: var(--muted); font-size: 13px; }
html.desktop .dash .card { margin-bottom: 0; }
@media (max-width: 1300px) {
  html.desktop .header-username { display: none; }
  html.desktop .stage-item, html.desktop .desk-tab { padding: 0 8px; }
  html.desktop .app-bar { gap: 8px; padding: 0 16px; }
}

/* ---- Desktop: live weather map behind every page ---- */
.desk-map, .desk-map-exit { display: none; }
html.desktop #app { position: relative; z-index: 1; background: none; }
html.desktop .desk-map {
  display: block; position: fixed; left: 0; right: 0; bottom: 0; top: 60px; z-index: 0;
  flex: none; min-height: 0; border: 0; border-radius: 0; background: #0b1326;
}
html.desktop .desk-map .leaflet-tile-pane .leaflet-layer {
  filter: invert(1) hue-rotate(180deg) brightness(.82) contrast(.92) saturate(.55);
}
html.desktop .desk-map .leaflet-tile-pane { opacity: .5; transition: opacity .25s; }
html.desktop.on-weather .desk-map .leaflet-tile-pane,
html.desktop.map-focus .desk-map .leaflet-tile-pane { opacity: .95; }
/* Clicks fall through the empty space to the map; panels themselves stay clickable. */
html.desktop .screen, html.desktop .screen > .scroll { pointer-events: none; }
/* The login screen is also a .screen — it must stay clickable on desktop. */
html.desktop #login-screen, html.desktop #login-screen * { pointer-events: auto; }
html.desktop .screen > .scroll > *, html.desktop .desk-subnav { pointer-events: auto; }
html.desktop .dash { pointer-events: none; }
html.desktop .dash > * { pointer-events: auto; }
html.desktop .screen > .scroll { scrollbar-width: none; }
html.desktop .screen > .scroll::-webkit-scrollbar { display: none; }
/* Weather page: panels hug the left and right, the map shows in the middle. */
html.desktop .has-subnav .desk-subnav { background: rgba(14,21,48,.92); }
/* "View Map": slide the panels away and give the whole screen to the map. */
html.desktop.map-focus .screen { visibility: hidden; }
html.desktop.map-focus .desk-map-exit {
  display: block; position: fixed; z-index: 5; left: 24px; top: 76px; height: 38px; padding: 0 16px;
  border-radius: 9px; border: 1px solid var(--accent); background: rgba(14,21,48,.95); color: var(--accent);
  font-weight: 800; font-size: 13px; cursor: pointer;
}
html.desktop #dash-root { pointer-events: none; }
html.desktop #app { pointer-events: none; }
html.desktop #app > .app-bar, html.desktop #app > .save-banner { pointer-events: auto; }

/* Map hover card (station / airport / camera) */
.leaflet-tooltip.stn-tip {
  background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,.45); padding: 7px 10px; font-size: 12.5px; line-height: 1.35; white-space: nowrap;
}
.leaflet-tooltip.stn-tip b { font-size: 13px; }
.leaflet-tooltip.stn-tip .tip-sub { color: var(--muted); font-size: 11.5px; }
.leaflet-tooltip-top.stn-tip::before { border-top-color: var(--border); }


/* ---- Proposed map view: dark blue topo basemap, labels, route, halos, on-map card ---- */
html.desktop.map-proposed .desk-map { background: #0a1226; }
html.desktop.map-proposed .desk-map .leaflet-tile-pane { opacity: .8; }
html.desktop.map-proposed.on-weather .desk-map .leaflet-tile-pane,
html.desktop.map-proposed.map-focus .desk-map .leaflet-tile-pane { opacity: 1; }
html.desktop .desk-map .leaflet-tile-pane .leaflet-layer.topo-tiles {
  filter: invert(1) grayscale(1) sepia(1) hue-rotate(180deg) saturate(1.5) brightness(.9) contrast(1.15);
}
.stn-lbl-wrap { pointer-events: none; }
.stn-lbl { position: absolute; left: 13px; top: -9px; white-space: nowrap; font: 700 11px/1 system-ui, sans-serif; letter-spacing: .5px;
  color: #e8eefc; background: rgba(10,18,38,.72); padding: 3px 5px; border-radius: 4px; text-shadow: 0 1px 2px #000; }
.map-view-sw { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding-bottom: 8px; margin-bottom: 4px; padding-bottom: 6px; border-bottom: 1px solid var(--border, rgba(255,255,255,.15)); }
.map-view-sw > span { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.map-layers-panel input[type=radio] { width: 16px !important; height: 16px !important; min-height: 0 !important; accent-color: var(--accent); margin: 0; }
/* Station card floats on the map instead of dimming it. */
html.desktop.map-card #station-modal { background: none; pointer-events: none; justify-content: center; align-items: center; }
html.desktop.map-card #station-modal .modal-panel { pointer-events: auto; max-width: 420px; background: rgba(18,28,52,.97); box-shadow: 0 10px 40px rgba(0,0,0,.6), 0 0 0 1px rgba(var(--accent-rgb), .25); }

/* Satellite type: real imagery, dimmed toward navy so panels and labels stay readable. */
html.desktop .desk-map .leaflet-tile-pane .leaflet-layer.sat-tiles { filter: brightness(.6) saturate(.75) contrast(1.1); }
/* Radio buttons in the layer box: draw real, visible radios (the app's input reset hides them). */
.map-layers-panel input[type=radio] { -webkit-appearance: radio !important; appearance: auto !important; background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; width: 16px !important; height: 16px !important; min-width: 16px !important; accent-color: var(--accent); }

/* Dark / Clean map types: Esri Dark Gray tiles are mid-gray, so push them down to a true dark navy-black. */
html.desktop .desk-map .leaflet-tile-pane .leaflet-layer.dark-tiles,
html.desktop .desk-map .leaflet-tile-pane .leaflet-layer.clean-tiles { filter: brightness(.7) contrast(1.2) sepia(1) hue-rotate(190deg) saturate(2); }
html.desktop .desk-map .leaflet-tile-pane .leaflet-layer.dark-lbl-tiles { filter: brightness(1.9) contrast(1.1); }

/* ---- Company branding + Admin cards ---- */
#login-logo { display: block; margin: 0 auto 10px; max-height: 72px; max-width: 200px; object-fit: contain; }
html.has-logo:not(.dc) .brand::before { content: ''; display: inline-block; width: 22px; height: 22px; margin-right: 8px; vertical-align: -5px; background: var(--brand-logo) center / contain no-repeat; }
.co-accent-row, .co-logo-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.co-accent-row input[type=color] { width: 46px; height: 38px; padding: 2px; border-radius: 8px; flex: none; }
.co-accent-row input[type=text] { width: 110px; flex: none; }
.co-logo-prev { width: 56px; height: 56px; border: 1px solid var(--border); border-radius: 10px; display: flex; align-items: center; justify-content: center; overflow: hidden; flex: none; }
.co-logo-prev img { max-width: 100%; max-height: 100%; object-fit: contain; }
.co-file { cursor: pointer; display: inline-flex; align-items: center; width: auto !important; }
.co-accent-row .ghost-btn, .co-logo-row .ghost-btn, .pf-row .ghost-btn { width: auto; padding: 6px 12px; min-height: 0; }
.pf-row { border-top: 1px solid var(--border); padding: 10px 0; }
.pf-line { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.pf-line .pf-name { flex: 1 1 160px; }
.pf-slugwrap { display: flex; align-items: center; gap: 4px; flex: 1 1 180px; }
.pf-slugwrap input { flex: 1 1 90px; min-width: 0; }
.pf-meta .pf-actions { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.pf-adminform { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0; }
.pf-adminform input { flex: 1 1 120px; min-width: 0; }

/* ---- Shift picker (Overview → Flight Info) ---- */
.shift-group { display: flex; gap: 8px; flex-wrap: wrap; }
.shift-opt { flex: 1 1 140px; min-width: 0; cursor: pointer; }
.shift-opt input { position: absolute; opacity: 0; pointer-events: none; }
.shift-opt span {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 10px 12px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; font-weight: 700; letter-spacing: .02em;
}
.shift-opt span::before { content: ''; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--muted); box-sizing: border-box; flex: 0 0 auto; }
.shift-opt input:checked + span { border-color: var(--accent); background: rgba(var(--accent-rgb), .14); color: var(--accent); }
.shift-opt input:checked + span::before { border-color: var(--accent); background: radial-gradient(circle, var(--accent) 0 45%, transparent 50%); }
.shift-opt input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- Extra (highway / other) live cameras ---- */
.cam-pin.ext { color: #7dd3fc; border-color: #7dd3fc; }
.legend-cam-ext { color: #7dd3fc; }
.cam-ext-msg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px; font-size: 14px; color: #e2e8f0; background: rgba(2,6,23,.8); }
.cam-ext-msg[hidden] { display: none; }
.cam-ext-msg a { color: var(--accent); }
.ext-list { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; }
.ext-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; min-width: 0; }
.ext-row .ext-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ext-row .ext-name small { color: var(--muted); margin-left: 6px; }
.ext-row button { flex: 0 0 auto; background: none; border: 1px solid var(--border); color: var(--text); border-radius: 999px; padding: 3px 10px; font-size: 12px; cursor: pointer; }
.ext-row.off { opacity: .55; }
.ext-h { font-size: 14px; margin: 16px 0 8px; }
.ext-latlon { display: flex; gap: 8px; }
.ext-latlon .field { flex: 1 1 0; }