/* ZSX "Glass Cockpit" reskin — Phase 1 (ui/v1 design system applied to the
   live app as a pure override layer; no IDs/JS touched; rollback = remove link) */
:root{
  --bg-0:#070d1a;--bg-1:#0b1424;--glass:rgba(19,32,58,.78);--glass-hi:rgba(32,50,84,.8);
  --glass-brd:rgba(120,160,220,.18);--ink:#e8eefb;--ink-2:#9fb2d2;--ink-3:#5c6f92;
  --cyan:#2fd6e8;--cyan-soft:rgba(47,214,232,.14);--amber:#ffb547;--green:#3ddc97;
}
/* Base */
body,.foreflight-app{background:radial-gradient(1200px 700px at 75% -10%,#14264a 0%,var(--bg-0) 60%)!important;color:var(--ink)!important}
/* Sidebar -> glass rail */
.ff-sidebar{background:rgba(11,20,36,.9)!important;backdrop-filter:blur(16px);border-right:1px solid var(--glass-brd)!important;box-shadow:0 0 40px rgba(3,8,20,.6)!important}
.ff-nav-item{border-radius:12px!important;margin:2px 8px!important;color:#d7e4f7!important;border:1px solid transparent!important}
.ff-nav-item:hover{background:var(--glass-hi)!important;color:var(--ink)!important}
.ff-nav-item.active{background:var(--cyan-soft)!important;color:var(--cyan)!important;border-color:rgba(47,214,232,.35)!important;box-shadow:inset 0 1px 0 rgba(47,214,232,.25),0 4px 14px rgba(47,214,232,.12)!important}
.ff-nav-item.active span,.ff-nav-item.active i{color:var(--cyan)!important}
/* Panels: chart picker, control panels */
.ff-control-panel,.ff-chart-toggle{background:var(--glass)!important;backdrop-filter:blur(18px) saturate(1.3);border:1px solid var(--glass-brd)!important;border-top-color:rgba(160,200,255,.28)!important;border-radius:18px!important;box-shadow:0 14px 40px rgba(0,0,0,.5)!important;color:var(--ink)!important}
.ff-chart-section-header{color:var(--ink)!important}
.ff-chart-section-header:hover{background:var(--glass-hi)!important}
.ff-chart-section,.ff-chart-section+.ff-chart-section{border-color:var(--glass-brd)!important}
.ff-region-item{color:var(--ink-2)!important;border-radius:8px!important}
.ff-region-item:hover{background:var(--glass-hi)!important;color:var(--ink)!important}
.ff-chart-mini-btn{background:var(--glass-hi)!important;border:1px solid var(--glass-brd)!important;color:var(--ink)!important;border-radius:8px!important}
.ff-chart-mini-btn:hover{background:var(--cyan-soft)!important;border-color:rgba(47,214,232,.4)!important;color:var(--cyan)!important}
.ff-chart-count{color:var(--ink-3)!important}
/* Airport hub panel */
.apt-panel{background:rgba(11,20,36,.92)!important;backdrop-filter:blur(20px);border-left:1px solid var(--glass-brd)!important;box-shadow:-14px 0 50px rgba(3,8,20,.7)!important;color:var(--ink)!important}
.apt-panel-header,.apt-panel-tabs,.apt-panel-footer{border-color:var(--glass-brd)!important}
.apt-panel-code{color:var(--cyan)!important;font-family:ui-monospace,Menlo,monospace;text-shadow:0 0 18px rgba(47,214,232,.35)}
.apt-panel-name,.apt-row-label,.apt-note,.apt-rwy-sub,.apt-freq-note{color:var(--ink-2)!important}
.apt-tab{color:var(--ink-2)!important}
.apt-tab:hover{color:var(--ink)!important}
.apt-tab.active{color:var(--cyan)!important;border-bottom-color:var(--cyan)!important;background:var(--glass-hi)!important;border-radius:8px 8px 0 0}
.apt-row,.apt-freq-row,.apt-remark{border-color:rgba(120,160,220,.1)!important}
.apt-freq-val{color:var(--cyan)!important;font-family:ui-monospace,Menlo,monospace}
.apt-rwy-card{background:rgba(9,17,32,.55)!important;border:1px solid var(--glass-brd)!important}
.apt-rwy-end{border-color:rgba(120,160,220,.12)!important}
.apt-wx-block{background:rgba(6,12,24,.7)!important;border:1px solid var(--glass-brd)!important;color:var(--ink-2)!important}
.apt-action-btn{background:var(--glass-hi)!important;border:1px solid var(--glass-brd)!important;color:var(--ink)!important;border-radius:9px!important}
.apt-action-btn:hover{background:linear-gradient(160deg,#18b6c9,#0d8fa5)!important;border-color:rgba(47,214,232,.5)!important;color:#fff!important}
/* Destructive Delete button (admin console, super_admin only). Own !important
   rules so it stays RED (the shared .apt-action-btn glass style used to win). */
.zsx-del-btn{background:#dc2626!important;border:1px solid #dc2626!important;color:#fff!important;border-radius:9px!important;cursor:pointer!important;font-weight:600!important}
.zsx-del-btn:hover{background:#b91c1c!important;border-color:#b91c1c!important;color:#fff!important}
.apt-section-header{color:var(--ink-3)!important}
/* Modals (plates, admin) */
.ff-modal{background:rgba(4,8,18,.7)!important;backdrop-filter:blur(6px)}
.ff-modal-content{background:rgba(13,23,42,.95)!important;border:1px solid var(--glass-brd)!important;border-radius:18px!important;color:var(--ink)!important;box-shadow:0 24px 70px rgba(0,0,0,.65)!important}
.ff-modal-header{border-color:var(--glass-brd)!important}
.ff-modal-close{color:var(--ink-2)!important}
.plate-item{color:var(--ink)!important}
.plate-item:hover{background:var(--glass-hi)!important;color:var(--cyan)!important}
.plates-group-header{color:var(--ink-3)!important;border-color:var(--glass-brd)!important}
/* Search + inputs (any input inside our surfaces) */
.ff-modal-content input,.ff-modal-content select,.apt-panel input,#admin-modal input,#admin-modal select{background:rgba(6,12,24,.7)!important;border:1px solid var(--glass-brd)!important;color:var(--ink)!important;border-radius:8px!important}
.search-result-item{border-radius:10px}
.search-result-item:hover{background:var(--glass-hi)!important}
.search-result-code{color:var(--cyan)!important}
.search-no-results{color:var(--ink-2)!important}
/* Admin table */
#admin-users table th{color:var(--ink-3)!important}
#admin-users table td{border-color:rgba(120,160,220,.1)!important}
/* Layers launcher: the collapsed round button's layer glyph was legacy
   dark-gray (#374151) on the dark glass circle — near-invisible. Super
   white (user 2026-08-14). */
.ff-chart-icon,.ff-chart-icon:hover{color:#fff!important}
/* Leaflet chrome */
/* Tile-seam mitigation (#184): the container background is set per-basemap
   in applyBaseMap() so any rendering gap between tiles reads as a
   low-contrast line, never white. (A will-change GPU hint and 1px tile
   overlaps were tried 2026-08-13 and made the artifact worse — GPU-layer
   edge filtering and non-native bitmap scaling each create their own
   hairlines. Do not reintroduce either.)
   The actual Chrome fix: disable bilinear filtering on OUR tile layers —
   no filtering, no edge bleed, no white lines. Applies to the aero terrain
   (overzoomed past z7) and all chart modes (.zsx-ct — VFR/TAC/IFR render
   scaled below their minNativeZoom, e.g. TAC z9 tiles shown at z3-8). At
   native zoom chart tiles are 1:1 with device pixels, where pixelated and
   bilinear are identical — so normal chart rendering is unaffected.
   Azure road/satellite/dark basemaps are native at all zooms and keep
   default filtering.
   Chromium-only (.zsx-chromium root gate set in app.html): Safari clamps
   edge sampling, never shows seams, keeps native smooth rendering. */
.zsx-chromium .zsx-aero-tiles,.zsx-chromium .zsx-ct{image-rendering:pixelated}
/* Smooth-filter during the zoom gesture only: pixelated scaling reads
   blocky and zoomAnimation:false reads jumpy (both rejected 2026-08-13).
   Faint transient seams while the animation runs are the accepted
   Leaflet-tier trade-off; the still map stays line-free. Definitive fix
   = #203 V3 MapLibre GL web map. */
.zsx-chromium .zsx-zooming .zsx-aero-tiles,
.zsx-chromium .zsx-zooming .zsx-ct{image-rendering:auto}
.leaflet-control-zoom a,.leaflet-control-attribution{background:var(--glass)!important;color:var(--ink)!important;border-color:var(--glass-brd)!important}
.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:rgba(13,23,42,.96)!important;color:var(--ink)!important;border:1px solid var(--glass-brd)}
.leaflet-popup-content-wrapper h3{color:var(--cyan)!important}
/* Scrollbars */
::-webkit-scrollbar{width:9px;height:9px}::-webkit-scrollbar-thumb{background:rgba(120,160,220,.25);border-radius:9px}::-webkit-scrollbar-track{background:transparent}
/* Touch targets (tablet/phone) */
@media (pointer:coarse){.ff-nav-item,.apt-tab,.apt-action-btn,.ff-chart-mini-btn,.ff-chart-section-header{min-height:44px}}
/* Phone: chart picker + panel become sheets */
@media (max-width:600px){
  .apt-panel{width:100vw!important;max-width:100vw!important;border-radius:22px 22px 0 0;top:auto!important;height:70vh}
  .ff-control-panel,.ff-chart-toggle{max-width:92vw}
}

/* --- Phase 1b: structural match to ui/v1 --- */
/* Wide sidebar -> narrow icon rail (ui/v1 map-home) */
/* Sidebar rev 2026-08-10 (user): collapsible FF-style rail. EXPANDED
   (default) = 216px, brand row top-left (logo 30px + name, one row), nav as
   icon+label rows. COLLAPSED = 86px icon-only (labels + wordmark hidden).
   Old cyan "ZSX" ::before removed — the brand row IS the branding now. */
.ff-sidebar{width:238px!important;min-width:238px!important;transition:width .25s ease,min-width .25s ease}
.foreflight-app.sidebar-collapsed .ff-sidebar{width:86px!important;min-width:86px!important}
.ff-sidebar .ff-ai-response{display:none!important}
.ff-logo{gap:10px!important;padding:14px 12px!important}
.ff-logo-icon{width:48px!important;height:48px!important;background:none!important;border-radius:0!important;flex:0 0 auto}
.ff-logo-image{width:48px!important;height:48px!important;border-radius:10px!important}
.ff-logo-content{flex:0 0 auto!important}
.ff-logo-text{font-size:20px!important;line-height:48px!important;font-weight:700!important;letter-spacing:.01em!important;color:var(--ink)!important;white-space:nowrap}
.ff-logo-subtitle{display:none!important}
.foreflight-app.sidebar-collapsed .ff-logo-content{display:none!important}
.ff-nav-item{flex-direction:row!important;gap:12px!important;padding:10px 14px!important;margin:3px 10px!important;text-align:left;justify-content:flex-start!important;align-items:center!important;width:calc(100% - 20px)!important;box-sizing:border-box}
.ff-nav-item i{font-size:19px!important;margin:0!important;width:24px;text-align:center;color:#e8f1fd!important}
.ff-nav-item span{font-size:13.5px!important;display:block!important;white-space:nowrap;overflow:hidden}
.foreflight-app.sidebar-collapsed .ff-nav-item{flex-direction:column!important;gap:0!important;padding:11px 4px!important;margin:3px 8px!important;justify-content:center!important;width:calc(100% - 16px)!important}
.foreflight-app.sidebar-collapsed .ff-nav-item i{font-size:20px!important}
.foreflight-app.sidebar-collapsed .ff-nav-item span{display:none!important}
.ff-sidebar-toggle{display:block!important;color:var(--ink-2)!important}
/* collapsed: base absolutely centers the toggle OVER the logo — instead show
   logo on top with the expand chevron beneath it */
.foreflight-app.sidebar-collapsed .ff-logo{flex-direction:column!important;gap:0!important;padding:14px 8px 10px!important;position:relative!important;justify-content:center!important}
/* small expand arrow as a badge at the logo's BOTTOM-RIGHT (user 2026-08-10) */
.foreflight-app.sidebar-collapsed .ff-sidebar-toggle{position:absolute!important;left:calc(50% + 16px)!important;
  top:49px!important;transform:none!important;width:17px!important;height:17px!important;
  background:var(--glass-hi)!important;color:var(--ink-2)!important;box-shadow:0 2px 6px rgba(3,8,20,.5)!important;
  padding:0!important;border-radius:50%!important;display:flex!important;align-items:center!important;
  justify-content:center!important;border:1px solid var(--glass-brd)!important}
.foreflight-app.sidebar-collapsed .ff-sidebar-toggle i{font-size:8px!important}
/* user badge fits the rail */
.ff-sidebar [id*="user"],.ff-user-role{font-size:8.5px!important;text-align:center}
#admin-open-btn{font-size:10px!important;padding:5px 2px!important}
/* Checkboxes -> ui/v1 toggle switches */
.ff-region-item input[type=checkbox]{appearance:none;-webkit-appearance:none;width:34px;height:19px;border-radius:999px;background:rgba(6,12,24,.7);border:1px solid var(--glass-brd);position:relative;cursor:pointer;flex:0 0 34px;margin-left:auto!important;order:2}
.ff-region-item{justify-content:space-between}
.ff-region-item input[type=checkbox]::after{content:"";position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;background:var(--ink-3);transition:all .15s}
.ff-region-item input[type=checkbox]:checked{background:var(--cyan-soft);border-color:rgba(47,214,232,.5)}
.ff-region-item input[type=checkbox]:checked::after{left:17px;background:var(--cyan);box-shadow:0 0 8px var(--cyan)}
/* Typography closer to ui/v1 */
body,.foreflight-app,button,input,select{font-family:'Inter',-apple-system,'Segoe UI',sans-serif!important}
/* Freq/data values in mono like the design */
.apt-row-value{font-family:ui-monospace,Menlo,monospace}

/* --- Phase 2: floating map surface (ui/v1 map-home) --- */
.zsx-topbar{position:absolute;top:14px;left:14px;z-index:600;display:flex;gap:10px}
.zsx-search-pill{display:flex;align-items:center;gap:10px;padding:11px 16px;min-width:320px;cursor:pointer;
  background:var(--glass);backdrop-filter:blur(18px);border:1px solid var(--glass-brd);border-top-color:rgba(160,200,255,.28);
  border-radius:14px;box-shadow:0 14px 40px rgba(0,0,0,.45);font-size:13px;color:var(--ink)}
.zsx-search-pill:hover{border-color:rgba(47,214,232,.4)}
.zsx-dim{color:var(--ink-2)}
.zsx-kbd{font-family:ui-monospace,Menlo,monospace;font-size:11px;color:var(--ink-3);border:1px solid var(--glass-brd);border-radius:6px;padding:2px 6px;margin-left:auto}
.zsx-3d-btn{position:absolute;top:14px;right:14px;z-index:600;padding:11px 16px;font-weight:700;font-size:13px;cursor:pointer;color:var(--ink);
  background:var(--glass);backdrop-filter:blur(18px);border:1px solid var(--glass-brd);border-top-color:rgba(160,200,255,.28);border-radius:14px;box-shadow:0 14px 40px rgba(0,0,0,.45)}
.zsx-3d-btn:hover{color:var(--cyan);border-color:rgba(47,214,232,.45)}
.zsx-status{position:absolute;bottom:16px;left:14px;z-index:600;display:flex;gap:8px}
.zsx-chip{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;font-size:11px;font-weight:600;color:var(--ink-2);
  background:var(--glass);backdrop-filter:blur(14px);border:1px solid var(--glass-brd)}
.zsx-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green)}
/* UTC clock -> glass chip (ui/v1 top-right pairing with 3D button) */
.ff-utc-time{background:var(--glass)!important;backdrop-filter:blur(14px);border:1px solid var(--glass-brd)!important;border-radius:999px!important;color:var(--ink)!important;box-shadow:0 6px 20px rgba(0,0,0,.4)!important}
.ff-utc-value{color:var(--cyan)!important;font-family:ui-monospace,Menlo,monospace}
/* phone: search pill narrows */
@media (max-width:600px){.zsx-search-pill{min-width:0;flex:1}.zsx-topbar{right:70px}}

/* --- Phase 3: airport panel -> ui/v1 hub look --- */
.apt-panel{width:440px!important}
.apt-panel-header{padding:18px 18px 12px!important}
.apt-panel-code{font-size:30px!important;font-weight:800!important;letter-spacing:.02em}
.apt-panel-name{font-size:var(--fly-row)!important;display:block;margin-top:2px}
/* rows -> card strips (design card-grid feel without touching renderers) */
.apt-panel-body{padding:14px 16px!important}
.apt-row,.apt-freq-row{background:rgba(9,17,32,.5);border:1px solid rgba(120,160,220,.1)!important;border-radius:10px;padding:9px 12px!important;margin-bottom:6px}
.apt-row{border-bottom:1px solid rgba(120,160,220,.1)!important}
.apt-freq-use{color:var(--ink)!important}
.apt-freq-val{font-size:14px!important;text-shadow:0 0 12px rgba(47,214,232,.25)}
.apt-section-header{margin:18px 0 8px!important;padding-left:2px}
.apt-section-header:first-child{margin-top:2px!important}
/* runway cards elevated like the design */
.apt-rwy-card{background:linear-gradient(160deg,rgba(27,44,77,.55),rgba(15,26,48,.55))!important;border-radius:12px!important;box-shadow:0 6px 18px rgba(0,0,0,.35),inset 0 1px 0 rgba(160,200,255,.12)!important;padding:12px 14px!important}
.apt-rwy-title{font-family:ui-monospace,Menlo,monospace;font-size:17px!important;color:var(--ink)!important}
/* remarks as quiet cards */
.apt-remark{background:rgba(9,17,32,.4);border:1px solid rgba(120,160,220,.08)!important;border-radius:9px;padding:8px 11px!important;margin-bottom:6px;color:var(--ink-2)!important}
/* footer actions: first = primary gradient */
.apt-panel-footer{padding:12px 16px!important}
.apt-panel-footer .apt-action-btn:first-child{background:linear-gradient(160deg,#18b6c9,#0d8fa5)!important;border-color:rgba(47,214,232,.5)!important;color:#fff!important;box-shadow:0 6px 18px rgba(31,180,200,.3)!important}
/* wx tab metar block mono glow */
.apt-wx-block{border-radius:10px!important;font-size:var(--fly-row)!important;box-shadow:inset 0 1px 0 rgba(160,200,255,.08)}
@media (max-width:600px){.apt-panel{width:100vw!important}}

/* --- Phase 4: floating AI chat window (ui/v1) --- */
.ff-chat-container{position:fixed!important;right:20px;bottom:20px;left:auto;top:auto;width:400px!important;max-width:92vw;max-height:560px;z-index:950;
  background:var(--glass)!important;backdrop-filter:blur(20px) saturate(1.3);border:1px solid var(--glass-brd)!important;border-top-color:rgba(160,200,255,.28)!important;
  border-radius:18px!important;box-shadow:0 24px 60px rgba(3,8,20,.7)!important;display:flex;flex-direction:column;overflow:hidden}
.ff-chat-container .ff-chat-header,.ff-chat-container>div:first-child{cursor:grab;user-select:none}
.ff-chat-messages{background:transparent!important;color:var(--ink)!important}
.ff-chat-input{background:rgba(6,12,24,.7)!important;border:1px solid var(--glass-brd)!important;color:var(--ink)!important;border-radius:10px!important}
.ff-chat-send{background:linear-gradient(160deg,#18b6c9,#0d8fa5)!important;border-radius:10px!important;color:#fff!important}
/* minimized -> Ask ZSX AI pill */

@media (max-width:600px){.ff-chat-container{right:0;bottom:0;width:100vw!important;max-width:100vw;border-radius:18px 18px 0 0!important}}

/* --- Phase 4b: ui/v1 parity patches --- */
.ff-nav-item.zsx-soon{opacity:.45}
.ff-nav-item.zsx-soon::after{content:"soon";font-size:8px;color:var(--amber);display:block;margin-top:1px}
.zsx-soon-card{background:var(--glass);backdrop-filter:blur(20px);border:1px solid var(--glass-brd);border-top-color:rgba(160,200,255,.28);
  border-radius:20px;box-shadow:0 24px 70px rgba(0,0,0,.65);padding:34px 40px;text-align:center;color:var(--ink)}
/* Brief me = primary action (plates becomes secondary) */
#apt-brief-btn{background:linear-gradient(160deg,#18b6c9,#0d8fa5)!important;border-color:rgba(47,214,232,.5)!important;color:#fff!important;box-shadow:0 6px 18px rgba(31,180,200,.3)!important}
.apt-panel-footer .apt-action-btn:first-child{background:var(--glass-hi)!important;color:var(--ink)!important;box-shadow:none!important}
.apt-panel-footer #apt-brief-btn{background:linear-gradient(160deg,#18b6c9,#0d8fa5)!important;color:#fff!important}

/* --- Parity pass: exact ui/v1 token alignment --- */
:root{
  --glass:rgba(19,32,58,.62);--glass-hi:rgba(32,50,84,.66);           /* design values */
  --r-lg:20px;--r-md:14px;--r-sm:9px;
}
.ff-control-panel,.ff-chart-toggle{border-radius:var(--r-lg)!important;
  background:rgba(19,32,58,.62)!important;box-shadow:0 0 0 1px var(--glass-brd),0 18px 50px rgba(3,8,20,.65)!important}
.zsx-search-pill,.zsx-3d-btn{border-radius:var(--r-md)}
/* Picker header + section typography per design (.h2 / .section) */
.ff-chart-toggle-header span{font-size:15px!important;font-weight:700!important;color:var(--ink)!important}
.ff-chart-section-header{font-size:11px!important;font-weight:700!important;text-transform:uppercase!important;
  letter-spacing:.12em!important;color:var(--ink-3)!important;padding:10px 14px 6px!important}
.ff-chart-section-header:hover{color:var(--ink-2)!important;background:transparent!important}
.ff-chart-section-header i{display:none!important}       /* design has no chevrons */
.ff-chart-count{font-size:10px!important;letter-spacing:0!important;text-transform:none!important}
.ff-region-item{font-size:13px!important;color:var(--ink-2)!important;padding:7px 10px!important}
/* Modals adopt design radius + glass */
.ff-modal-content{border-radius:var(--r-lg)!important;background:rgba(19,32,58,.9)!important}
/* apt panel + chat use design glass */
.apt-panel{background:rgba(11,20,36,.86)!important}
.ff-chat-container{background:rgba(19,32,58,.85)!important;border-radius:var(--r-lg)!important}
/* headings across surfaces match design .h1/.h2 weights */
.ff-modal-header h3{font-size:15px!important;font-weight:700!important;color:var(--ink)!important}

/* --- Fix: white hover/base states on the Layers panel --- */
.ff-chart-toggle,.ff-chart-toggle:hover,.ff-chart-toggle:focus-within{
  background:rgba(19,32,58,.62)!important}
.ff-chart-toggle-content,.ff-chart-toggle-header{background:transparent!important;color:var(--ink)!important}
.ff-chart-toggle-header:hover{background:var(--glass-hi)!important}
.ff-chart-toggle-btn{color:var(--ink-2)!important}
.ff-chart-toggle-btn:hover{background:var(--glass-hi)!important;color:var(--cyan)!important}
/* same trap on other hover-white surfaces */
.ff-control-panel:hover{background:rgba(19,32,58,.62)!important}

/* --- Airport hub: centered card per ui/v1 (was right-side drawer) --- */
@media (min-width:601px){
  .apt-panel{
    left:50%!important;right:auto!important;top:50%!important;bottom:auto!important;
    transform:translate(-50%,-50%);
    width:760px!important;max-width:94vw;height:auto!important;max-height:86vh;
    border-radius:20px!important;border:1px solid var(--glass-brd)!important;
    border-top-color:rgba(160,200,255,.28)!important;
    /* huge spread shadow doubles as a dimmed backdrop like the design */
    box-shadow:0 24px 70px rgba(0,0,0,.65),0 0 0 100vmax rgba(4,8,18,.55)!important}
  .apt-panel-body{max-height:56vh;column-count:2;column-gap:14px}
  .apt-row,.apt-freq-row,.apt-rwy-card,.apt-remark,.apt-wx-block,.apt-section-header{break-inside:avoid}
  .apt-section-header{column-span:none}
  .apt-panel-code{font-size:34px!important}
}
/* phone keeps the bottom-sheet behavior (matches mobile artboards) */

/* --- Fix: user profile crushed by rail; Settings/Logout unreachable --- */
.ff-sidebar{overflow:visible!important}
.ff-user-profile{display:flex!important;flex-direction:column!important;align-items:center!important;
  gap:4px!important;padding:10px 4px!important;overflow:visible!important;border-top:1px solid var(--glass-brd)}
.ff-user-avatar{font-size:20px!important;color:var(--ink-2)!important}
.ff-user-info{text-align:center;width:100%}
.ff-user-name{font-size:9px!important;color:var(--ink-2)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:74px;margin:0 auto}
.ff-user-role{font-size:8px!important;color:var(--cyan)!important}
.ff-user-menu-btn{width:64px!important;min-height:30px!important;border-radius:8px!important;
  background:var(--glass-hi)!important;border:1px solid var(--glass-brd)!important;color:var(--ink-2)!important;cursor:pointer}
.ff-user-menu-btn:hover{color:var(--cyan)!important;border-color:rgba(47,214,232,.4)!important}
/* dropdown escapes the narrow rail: floats beside it, bottom-left */
.ff-user-dropdown{position:fixed!important;left:92px!important;bottom:14px!important;top:auto!important;right:auto!important;
  width:190px!important;z-index:1200!important;padding:6px!important;
  background:rgba(19,32,58,.96)!important;border:1px solid var(--glass-brd)!important;
  border-top-color:rgba(160,200,255,.28)!important;border-radius:14px!important;
  box-shadow:0 18px 50px rgba(3,8,20,.65)!important}
.ff-dropdown-item{display:flex!important;gap:9px!important;align-items:center!important;width:100%!important;
  text-align:left!important;padding:9px 12px!important;border:none!important;background:none!important;
  border-radius:8px!important;color:var(--ink)!important;font-size:13px!important;cursor:pointer}
.ff-dropdown-item:hover{background:var(--glass-hi)!important;color:var(--cyan)!important}
.ff-dropdown-divider{border-color:var(--glass-brd)!important;margin:4px 0!important}

/* --- Fix: Layers card overlapped the search pill/top bar --- */
.ff-chart-toggle{top:74px!important;left:14px!important}
@media (max-width:600px){.ff-chart-toggle{top:70px!important}}

/* --- Contrast pass: design glass was tuned for a dark map; live OSM tiles
   are bright, so panels need higher opacity + brighter text to stay readable --- */
:root{--ink:#f2f6ff;--ink-2:#b9c8e4;--ink-3:#8195b8}
.ff-chart-toggle,.ff-chart-toggle:hover,.ff-chart-toggle:focus-within,
.ff-control-panel,.ff-control-panel:hover{background:rgba(13,23,42,.94)!important}
.zsx-search-pill,.zsx-3d-btn,.zsx-chip,.ff-utc-time{background:rgba(13,23,42,.92)!important;color:var(--ink)!important}
.zsx-dim{color:var(--ink-2)}
.apt-panel{background:rgba(11,20,36,.97)!important}
.ff-chat-container{background:rgba(13,23,42,.95)!important}
.ff-modal-content{background:rgba(13,23,42,.97)!important}
#appr-card{background:rgba(13,23,42,.95)!important}
.ff-sidebar{background:rgba(9,16,30,.97)!important}
/* labels and values pop against the darker glass */
.ff-region-item{color:var(--ink-2)!important}
.ff-region-item:hover{color:var(--ink)!important}
.ff-chart-section-header{color:var(--ink-3)!important}
.apt-row-label,.apt-freq-note,.apt-panel-name{color:var(--ink-2)!important}
.apt-row-value{color:var(--ink)!important}
.search-result-name{color:var(--ink)!important}
.search-result-location{color:var(--ink-2)!important}

/* --- Aeronautical airport marks (ui/v1 .apt-tag / --rwy tokens) ---
   The ICAO tag floats fully ABOVE its anchor (the footprint's north edge):
   translate(-50%, -100% - gap) guarantees it never overlaps the slab. */
.zsx-apt-tag{
    position:absolute; transform:translate(-50%, calc(-100% - 9px));
    padding:2px 8px; border-radius:6px; white-space:nowrap;
    font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;
    font-size:11px; font-weight:700; letter-spacing:.06em;
    color:#f2f6ff; background:rgba(17,21,28,.92);
    border:1px solid rgba(120,160,220,.16);
    box-shadow:0 2px 6px rgba(0,0,0,.5);
    pointer-events:auto; cursor:pointer;
}
.zsx-apt-tag::after{
    content:""; position:absolute; left:50%; bottom:-4px; width:6px; height:6px;
    transform:translateX(-50%) rotate(45deg); background:rgba(17,21,28,.92);
    border-right:1px solid rgba(120,160,220,.16);
    border-bottom:1px solid rgba(120,160,220,.16);
}

/* Taxiway designator badge (z>=14) — ui/v1 .twy-badge */
.zsx-twy-badge{
    position:absolute; transform:translate(-50%,-50%);
    display:inline-block; min-width:17px; padding:1px 4px; border-radius:4px;
    text-align:center; white-space:nowrap;
    font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;
    font-size:10px; font-weight:700; color:#f2f6ff;
    background:rgba(17,21,28,.88); border:1px solid rgba(242,246,255,.45);
    pointer-events:none;
}

/* Surface landmark chip variants (ui/v1 .twy-badge.cat/.hs) */
.zsx-twy-badge.cat{ border-color:rgba(242,246,255,.3); color:#9fb2d2; }
.zsx-twy-badge.hs{ background:rgba(59,42,10,.92); border-color:#ffb547; color:#ffb547; }

/* --- FAA-briefing chat formatting (ui/v1 ai-chat spec, 2026-08-08) --- */
.zsx-sect{display:block;margin-top:7px;font-size:10.5px;font-weight:800;letter-spacing:.12em;color:var(--ink-3);text-transform:uppercase}
.zsx-cat-vfr{color:#3ddc97;font-weight:700}
.zsx-cat-mvfr{color:#58a6ff;font-weight:700}
.zsx-cat-ifr{color:#ff5d73;font-weight:700}
.zsx-cat-lifr{color:#d268f0;font-weight:700}
.zsx-freq{font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;color:#2fd6e8;font-weight:700}
.zsx-warn{color:#ffb547;font-weight:600}
/* markdown-lite renderer additions (lists, inline code, paragraph gaps) */
.zsx-list{margin:4px 0 4px 4px;padding-left:16px}
.zsx-list li{margin:2px 0;line-height:1.45}
.zsx-list li::marker{color:var(--ink-3)}
.zsx-code{font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:.92em;
  background:rgba(6,12,24,.55);border:1px solid var(--glass-brd);border-radius:5px;padding:1px 5px;color:#dbe6ff}
.zsx-gap{display:block;height:6px}

/* FAA navaid chart symbols (ui/v1 map-home spec 2026-08-08) */
.zsx-navaid{filter:drop-shadow(0 1px 2px rgba(0,0,0,.35));cursor:pointer}

/* User menu trigger must read as a BUTTON (ui/v1 map-home rev 2026-08-08 —
   user couldn't find logout behind the bare chevron) */
.ff-user-menu-btn{background:var(--glass-hi)!important;border:1px solid var(--glass-brd)!important;
  border-radius:999px!important;color:var(--ink)!important;padding:5px 12px!important;
  font-size:11px!important;cursor:pointer;width:auto!important;margin:4px auto 8px;display:block}
/* label now comes from the button's own <span>Settings</span> (user 2026-08-12);
   removed the CSS-injected " Menu" ::after so it reads "Settings", not "Settings Menu" */
.ff-user-menu-btn{font-weight:700;font-size:11px;letter-spacing:.04em}
.ff-user-menu-btn:hover{background:var(--cyan-soft)!important;border-color:rgba(47,214,232,.45)!important;color:var(--cyan)!important}
/* the dropdown itself on glass */
.ff-user-dropdown{background:rgba(13,23,42,.97)!important;border:1px solid var(--glass-brd)!important;
  border-radius:12px!important;box-shadow:0 18px 50px rgba(0,0,0,.6)!important;z-index:1500!important}
.ff-dropdown-item{color:var(--ink)!important}
.ff-dropdown-item:hover{background:var(--glass-hi)!important;color:var(--cyan)!important}
#logout-btn{color:#ff8d9d!important}
#logout-btn:hover{background:rgba(255,93,115,.12)!important;color:#ff5d73!important}
/* Sidebar must sit ABOVE the map's positioned container: backdrop-filter
   made it a stacking context on a static element, so the user dropdown
   (child, any z-index) painted UNDER the map. Lift the whole rail. */
.ff-sidebar{position:relative!important;z-index:1200!important}

/* Flight-category labels (ForeFlight scheme, 2026-08-08): code + category
   word colored VFR green / MVFR blue / IFR red / LIFR magenta; white halo
   for legibility over light chart art; zoom-relative sizing inline */
.zsx-cat-lbl{font-weight:800;letter-spacing:.02em;white-space:nowrap;pointer-events:none;
  text-shadow:0 0 3px #fff,0 0 3px #fff,0 0 4px #fff,0 1px 2px rgba(255,255,255,.9)}


/* Admin console modal: scrollable + resizable (2026-08-09). The base
   .ff-modal-content caps at 600px with overflow:hidden, which CLIPPED the
   admin body's own 70vh scroll region — user list + Data Ops were cut off
   with no way to reach them. Flex column + resize handle (bottom-right). */
#admin-modal .ff-modal-content{display:flex;flex-direction:column;width:min(92vw,900px);
  max-height:86vh;min-width:520px;min-height:340px;resize:both;overflow:hidden}
#admin-modal .ff-modal-body{flex:1 1 auto;min-height:0;overflow-y:auto;max-height:none!important}


/* ===== AI chat DOCK (issue #22, user spec 2026-08-11) =====
   Pinned right, resizable (default 20% of window), collapsible to the
   right; PUSH layout — map/panels shift left via --dockw, never covered.
   WEB-ONLY: phone/pad chat stays in its bottom tab (recorded divergence). */
:root{--dockw:0px}
.ff-chat-container{position:fixed!important;top:0!important;right:0!important;bottom:0!important;
  left:auto!important;width:var(--dockw)!important;height:auto!important;border-radius:0!important;
  border-left:1px solid var(--glass-brd)!important;z-index:950!important;
  background:rgba(11,20,36,.94)!important;backdrop-filter:blur(20px);
  display:flex!important;flex-direction:column!important;overflow:hidden;
  max-height:none!important;min-height:0!important;
  transition:width .18s ease}
.ff-chat-container.zsx-dock-min{width:0!important;border-left:none!important}
.ff-chat-messages{flex:1 1 auto!important;min-height:0}
/* dock chrome */
.ff-chat-header{background:rgba(6,12,24,.6)!important;border-bottom:1px solid var(--glass-brd)!important;
  color:var(--ink)!important;padding:12px 14px!important}
.ff-chat-header i{color:var(--cyan)!important}
.ff-chat-minimize{color:var(--ink-2)!important}
.ff-chat-input-container{border-top:1px solid var(--glass-brd)!important;background:rgba(6,12,24,.5)!important}
.ff-chat-input{background:rgba(6,12,24,.7)!important;border:1px solid var(--glass-brd)!important;color:var(--ink)!important}
/* left-edge resize grip */
.zsx-dock-grip{position:absolute;left:0;top:0;bottom:0;width:7px;cursor:ew-resize;z-index:5}
.zsx-dock-grip:hover{background:rgba(47,214,232,.25)}
/* collapsed re-open handle on the right edge */
.zsx-dock-handle{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:951;
  writing-mode:vertical-rl;padding:16px 7px;border-radius:10px 0 0 10px;cursor:pointer;
  background:rgba(11,20,36,.92);border:1px solid var(--glass-brd);border-right:none;
  color:var(--cyan);font-weight:700;font-size:13px;letter-spacing:.06em;display:none;
  box-shadow:-6px 0 18px rgba(3,8,20,.5)}
.zsx-dock-handle.show{display:block}
/* PUSH: everything right-anchored respects the dock */
.ff-map-container{margin-right:var(--dockw)!important;transition:margin-right .18s ease}
.apt-panel{right:var(--dockw)!important}
#appr-card{right:calc(var(--dockw) + 70px)!important}


/* ===== Map controls rail (issue #69) — top-right, ALWAYS visible ===== */
.ff-map-controls{top:76px!important;bottom:auto!important;
  right:16px!important;z-index:930!important;   /* inside the pushed map container — no dockw */
  transition:right .18s ease}
.ff-map-control{background:rgba(11,20,36,.9)!important;color:#e8f1fd!important;
  border:1px solid var(--glass-brd)!important;backdrop-filter:blur(14px);
  width:42px!important;height:42px!important;border-radius:12px!important;
  box-shadow:0 6px 18px rgba(3,8,20,.5)!important;font-size:15px!important}
.ff-map-control:hover{background:var(--glass-hi)!important;color:var(--cyan)!important}

/* #68: collapsed rail — the whole user area is an obvious click target */
.foreflight-app.sidebar-collapsed .ff-user-profile{cursor:pointer!important}
.foreflight-app.sidebar-collapsed .ff-user-profile:hover{background:var(--glass-hi)!important;border-radius:12px}

/* 2026-08-11 readability pass v2 (user: one size bigger + more
   contrast) — layer picker + map labels. App-wide scaling stays #95. */
.ff-region-item{font-size:15px!important;padding:8px 10px!important;color:var(--ink)!important}
.ff-region-item span{color:var(--ink)!important}
.ff-chart-section-header{font-size:13.5px!important}
.ff-chart-section-header span{font-size:13.5px!important;letter-spacing:1.1px!important;color:var(--ink)!important}
.ff-chart-mini-btn{font-size:13.5px!important;padding:6px 13px!important}
.ff-chart-count{font-size:12px!important;color:var(--ink-2)!important}
.zsx-country-chip em{font-size:13.5px!important;color:#232b33!important;font-weight:700!important;
    text-shadow:0 1px 2px rgba(255,255,255,.95),0 0 5px rgba(255,255,255,.85)!important}
/* highlight the parent option whose sublayer is OPEN (user request) */
.ff-chart-section-header.zsx-open{background:var(--cyan-soft)!important;border-radius:8px}
.ff-chart-section-header.zsx-open span{color:var(--cyan)!important}
.ff-chart-section-header.zsx-open i{color:var(--cyan)!important}

/* 2026-08-11 app-wide readability v3 (user: match the Layers font size
   everywhere) — nav, search, chat, status bar, airport panel, plates.
   Target scale: primary text 15px, secondary 13.5px, labels 12px. */
/* left nav */
.ff-nav-item{font-size:16px!important}
.ff-nav-item span{font-size:16px!important}
/* search bar + results */
.ff-search-input,#airport-search{font-size:16px!important}
.search-result-code{font-size:16px!important}
.search-result-name{font-size:16px!important;color:var(--ink)!important}
.search-result-location{font-size:14px!important;color:var(--ink-2)!important}
/* AI chatbox — bubbles go GLASS-DARK (was: base white bubble; forcing
   light ink on it made white-on-white — the reported bug) */
.ff-chat-header{font-size:16px!important}
.ff-chat-input{font-size:16px!important}
.ff-message-content{font-size:15px!important;line-height:1.55!important;color:var(--ink)!important;
    background:rgba(6,12,24,.6)!important;border:1px solid var(--glass-brd)!important;border-radius:12px!important}
.ff-ai-typing .ff-message-content{color:var(--ink-2)!important}
.ff-chat-message i{font-size:16px!important}
/* bottom-left status bar */
.ff-status-bar{font-size:14px!important;color:var(--ink-2)!important}
.ff-status-bar span{color:var(--ink-2)!important}
/* user block (bottom of nav) */
.ff-user-name{font-size:13px!important}
.ff-user-role{font-size:11px!important}
.ff-user-menu-btn{font-size:14px!important}
/* airport panel */
.apt-panel-body{font-size:14.5px!important}
.apt-panel-name{font-size:14.5px!important}
.apt-tab{font-size:var(--fly-row)!important}
.apt-action-btn{font-size:14px!important}
.apt-rwy-end{font-size:var(--fly-row)!important}
.apt-rwy-sub{font-size:var(--fly-row)!important}
.apt-remark,.apt-wx-block{font-size:var(--fly-row)!important}
.apt-note,.apt-freq-note,.apt-section-header{font-size:var(--fly-row)!important}
.apt-freq-val{font-size:15px!important}
/* plates */
.plate-item{font-size:14px!important}
.plates-group-header{font-size:13px!important}
.plates-cycle-note{font-size:12px!important}

/* 2026-08-11 readability v5 (user): nav matches the Layers ITEM style
   exactly (15px, primary ink, same weight); tighter nav rows; bottom-left
   user/menu block matches the nav. */
.ff-nav-item{padding:7px 14px!important;margin:1px 10px!important;color:var(--ink)!important}
.ff-nav-item span{font-size:15px!important;font-weight:400!important;letter-spacing:0!important}
.ff-nav-item i{font-size:18px!important}
.ff-sidebar-nav{gap:0!important}
/* bottom-left user + menu block — same scale/style as nav rows */
.ff-user-name{font-size:15px!important;font-weight:500!important;color:var(--ink)!important}
.ff-user-role{font-size:11px!important;letter-spacing:.8px!important}
.ff-user-menu-btn{font-size:15px!important;color:var(--ink-2)!important}
.ff-user-menu-btn:hover{color:var(--ink)!important}
.ff-user-dropdown,.ff-user-dropdown *{font-size:14px!important}
.ff-user-dropdown a,.ff-user-dropdown button{color:var(--ink)!important}

/* 2026-08-11 readability v6 (user): nav rows take the SAME visual style
   as the Layers section headers (bold + uppercase + letter-spacing) at a
   step larger; bottom-left user/menu matches. */
.ff-nav-item span{font-size:14.5px!important;font-weight:700!important;
    text-transform:uppercase!important;letter-spacing:1.1px!important}
.ff-user-name{font-size:14.5px!important;font-weight:700!important;letter-spacing:.4px!important}
.ff-user-role{font-size:11.5px!important;font-weight:700!important;letter-spacing:1px!important}
.ff-user-menu-btn{font-size:16px!important}
.ff-user-dropdown,.ff-user-dropdown *{font-size:14.5px!important;font-weight:600!important;letter-spacing:.4px!important}

/* 2026-08-11 readability v7 — the bottom-left block was pinned tiny by
   `.ff-sidebar [id*="user"]{font-size:8.5px!important}` (higher
   specificity than class rules). ID selectors outrank it. */
#user-name{font-size:14.5px!important;font-weight:700!important;letter-spacing:.4px!important;
    color:var(--ink)!important;max-width:none!important}
#user-role{font-size:11.5px!important;font-weight:700!important;letter-spacing:1px!important}
#user-menu-btn{font-size:16px!important}
#user-menu-btn::after{font-size:12px!important}
#user-dropdown,#user-dropdown *{font-size:14.5px!important;font-weight:600!important;
    letter-spacing:.4px!important;color:var(--ink)!important}
#user-dropdown i{font-size:15px!important}

/* Country sublayer (2026-08-12): under each category, countries list; each
   entitled country is a chevron row that opens a REGION FLYOUT to the side.
   Locked (unpaid) countries are greyed + not clickable. */
.ff-chart-country-list{display:flex;flex-direction:column;gap:4px}
.ff-country-item{display:flex;align-items:center;gap:8px;padding:8px 10px;
    border-radius:9px;cursor:pointer;user-select:none;
    background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);
    transition:background .12s,border-color .12s}
.ff-country-item:hover{background:rgba(120,156,220,.14)}
.ff-country-item.locked{cursor:not-allowed;opacity:.5}
.ff-country-item.locked:hover{background:rgba(255,255,255,.04)}
.ff-country-flag{font-size:16px;line-height:1}
.ff-country-name{flex:1;font-size:13.5px;font-weight:600;color:var(--ink)}
.ff-country-count{font-size:12px;font-weight:700;opacity:.7;min-width:20px;text-align:right}
.ff-country-lock{font-size:11px;opacity:.8;margin-left:2px}
.ff-country-chev{font-size:11px;opacity:.55;margin-left:2px}

/* Region flyout — opens beside the country row (portaled to body). */
.ff-region-flyout{position:fixed;z-index:1200;min-width:210px;max-width:260px;
    max-height:70vh;overflow:hidden;display:flex;flex-direction:column;
    border-radius:12px;padding:8px;background:var(--glass,rgba(18,24,33,.96));
    border:1px solid rgba(255,255,255,.12);
    box-shadow:0 12px 40px rgba(0,0,0,.5);backdrop-filter:blur(18px)}
.ff-region-flyout-head{display:flex;align-items:center;justify-content:space-between;
    gap:8px;padding:2px 4px 8px}
#ff-region-flyout-title{font-size:13.5px;font-weight:700;color:var(--ink)}
.ff-region-flyout-actions{display:flex;gap:6px}
.ff-region-flyout .ff-chart-region-list{overflow-y:auto;max-height:56vh;padding:0 2px}
.ff-region-empty{font-size:12.5px;opacity:.6;padding:8px 4px}

/* --- Notes window typography = left-nav voice (user 2026-08-15) ---
   Primary rows match .ff-nav-item span (16px, same family/weight);
   secondary meta steps down consistently. */
#notes-modal .nc-cat{font-size:16px!important}
#notes-modal .nc-day{font-size:15px!important}
#notes-modal #nc-records{font-size:15px!important}
#notes-modal #nc-records div{line-height:1.5}
#notes-modal #notes-list > div{font-size:16px!important}
#notes-modal #notes-title{font-size:16px!important}
#notes-modal #notes-text{font-size:15px!important}
#notes-modal .notes-src{font-size:14px!important}
#notes-modal .apt-action-btn{font-size:var(--fly-row)!important}

/* 2026-08-15 (user): bigger cloud/notes action buttons — web parity with
   the iOS 22px touch-target bump (View/Play, Acknowledged, Delete) */
#notes-modal .nc-view,#notes-modal .nc-ack,#notes-modal .nc-del{
  font-size:13.5px!important;padding:7px 16px!important;border-radius:8px!important}

/* ── Nav-tool FLYOUTS (user 2026-08-16): every left-nav tool (Aircraft,
   Notes, Checklists, W&B — Map/Airports keep their current format) opens
   as a full-height panel flying out to the RIGHT of the nav, filling the
   rest of the screen — easy to see and modify. Bodies scroll (this also
   fixes the Aircraft window's missing scroll). ── */
#aircraft-modal.ff-modal,#notes-modal.ff-modal,#checklists-modal.ff-modal,#wb-modal.ff-modal{
  justify-content:flex-end!important;align-items:stretch!important;padding:0!important;
  background:transparent!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
#aircraft-modal .ff-modal-content,#notes-modal .ff-modal-content,
#checklists-modal .ff-modal-content,#wb-modal .ff-modal-content{
  width:calc(100vw - 238px)!important;max-width:calc(100vw - 238px)!important;
  height:100vh!important;max-height:100vh!important;margin:0!important;
  border-radius:0!important;display:flex!important;flex-direction:column!important;
  border-left:1px solid var(--glass-brd)!important;
  animation:zsxFlyIn .18s ease-out}
.foreflight-app.sidebar-collapsed #aircraft-modal .ff-modal-content,
.foreflight-app.sidebar-collapsed #notes-modal .ff-modal-content,
.foreflight-app.sidebar-collapsed #checklists-modal .ff-modal-content,
.foreflight-app.sidebar-collapsed #wb-modal .ff-modal-content{
  width:calc(100vw - 86px)!important;max-width:calc(100vw - 86px)!important}
#aircraft-modal .ff-modal-body,#notes-modal .ff-modal-body,
#checklists-modal .ff-modal-body,#wb-modal .ff-modal-body{
  flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;
  -webkit-overflow-scrolling:touch}
@keyframes zsxFlyIn{from{transform:translateX(24px);opacity:.6}to{transform:none;opacity:1}}
/* aircraft detail column scrolls inside the flyout */
#ac-detail{max-height:none!important;overflow-y:auto!important;min-height:0}
#ac-list{min-height:0}

/* ── Flyout SURFACE goes LIGHT (user 2026-08-16: dark scheme had poor
   contrast with the tools' dark-slate fonts — make it shallower). The
   four tool flyouts get a bright glass surface so their existing
   dark-ink text/labels read cleanly; the rest of the app stays dark. ── */
#aircraft-modal .ff-modal-content,#notes-modal .ff-modal-content,
#checklists-modal .ff-modal-content,#wb-modal .ff-modal-content{
  background:var(--fly-sur-0)!important;color:var(--fly-tx-0)!important;
  border-left:1px solid var(--fly-brd-1)!important}
#aircraft-modal .ff-modal-header,#notes-modal .ff-modal-header,
#checklists-modal .ff-modal-header,#wb-modal .ff-modal-header{
  color:var(--fly-tx-0)!important;border-bottom:1px solid var(--fly-brd-2)!important;
  background:var(--fly-head)!important}
#aircraft-modal .ff-modal-header h3,#notes-modal .ff-modal-header h3,
#checklists-modal .ff-modal-header h3,#wb-modal .ff-modal-header h3{
  color:var(--fly-tx-0)!important}
#aircraft-modal .ff-modal-close,#notes-modal .ff-modal-close,
#checklists-modal .ff-modal-close,#wb-modal .ff-modal-close{
  color:var(--fly-tx-1)!important}
/* rail + inputs on the light surface */
#aircraft-modal input,#aircraft-modal select{background:var(--fly-input)!important;color:var(--fly-tx-0)!important}
#ac-list .ac-row div:first-child{color:var(--fly-tx-0)}


/* ── Aircraft flyout polish (user 2026-08-16, points 1/2/6/7) ── */
/* 6: visible vertical divider between rail and detail */
#aircraft-modal .ff-modal-body>div:first-child{border-right:2px solid #b9c7da!important}
/* 1: cap the detail reading width — was stretching to the right edge */
#ac-detail{max-width:780px}
/* 2: tight, aligned form rows (label column + input column) */
.ac-row-f{display:grid;grid-template-columns:150px 1fr;align-items:center;gap:0 10px;padding:2px 0}
.ac-row-f>span:first-child{color:var(--fly-tx-2);font-weight:600;font-size:var(--fly-row);text-align:right}
.ac-row-f input,.ac-row-f select{width:200px;padding:4px 8px;border:1px solid #cbd5e1;border-radius:6px;font-size:var(--fly-row);justify-self:start}
.ac-kv{display:grid;grid-template-columns:150px 1fr;gap:0 10px;padding:2px 0;font-size:var(--fly-row)}
.ac-kv>span:first-child{color:var(--fly-tx-2);font-weight:600;text-align:right}
.ac-kv>span:last-child{color:#334155}
/* 7: clearly visible section dividers */
.ac-sec{font-size:var(--fly-meta);letter-spacing:.08em;text-transform:uppercase;color:#64748b;
  border-bottom:2px solid #c3d0e2;padding-bottom:4px;margin:16px 0 8px;font-weight:800}
/* 3: lookup spinner */
.ac-spin{display:inline-block;width:13px;height:13px;border:2px solid #94a3b8;
  border-top-color:transparent;border-radius:50%;animation:acspin .7s linear infinite;
  vertical-align:middle;margin-left:6px}
@keyframes acspin{to{transform:rotate(360deg)}}

/* ── Aircraft flyout responsiveness (user 2026-08-16 round 2) ── */
/* wider content, still aligned; never horizontal-scrolls */
#ac-detail{max-width:1150px!important;padding-right:22px;overflow-x:hidden}
/* the adopted W&B panel must WRAP, not overflow: table + CG diagram flex */
#ac-wb-embed #wb-body{display:flex!important;flex-wrap:wrap;gap:18px}
#ac-wb-embed #wb-body>div:first-child{flex:1 1 360px;min-width:300px}
#ac-wb-embed #wb-body>div:last-child{flex:1 1 280px;min-width:260px;max-width:100%}
#ac-wb-embed #wb-env{max-width:100%;height:280px}
#ac-wb-embed table{max-width:100%}
/* checklists embed wraps likewise */
#ac-cl-embed #cl-body{display:flex!important;flex-wrap:wrap;gap:14px}
#ac-cl-embed #cl-body>div{min-width:240px;flex:1 1 240px}

/* round-2b: allow everything to SHRINK (grid/flex min-width:auto trap) */
#aircraft-modal .ff-modal-body{grid-template-columns:minmax(170px,250px) 1fr!important}
#aircraft-modal .ff-modal-body>div{min-width:0}
#ac-detail *{max-width:100%}
.ac-row-f{grid-template-columns:minmax(110px,150px) 1fr}
.ac-kv{grid-template-columns:minmax(110px,150px) 1fr}
.ac-row-f input,.ac-row-f select{width:min(220px,100%)}
#ac-wb-embed #wb-body>div{min-width:0!important}
#ac-wb-embed #wb-body>div:first-child{flex:1 1 300px;overflow-x:auto}
#ac-wb-embed #wb-body>div:last-child{flex:1 1 240px}
/* round-2c: every inline flex row in the detail may wrap at tight widths */
#ac-detail div[style*="display:flex"]{flex-wrap:wrap}
/* buttons in the aircraft flyout are TEXT-SIZED, never flex-stretched
   (base .apt-action-btn has flex:1 for panel footers) */
#aircraft-modal .apt-action-btn{flex:0 0 auto!important;width:auto!important}

/* ══ SHARED FLYOUT FRAMEWORK (user 2026-08-16) — every left-nav flyout,
   current AND future (flights/documents/imagery/flight-logs/weather/track),
   adopts class="zsx-flyout" on its .ff-modal and inherits: full-height
   right panel, fluid scaling on resize/zoom, shrink-safe layout, text-sized
   buttons, boxed section cards. Per-flyout CSS should be rare. ══ */
.zsx-flyout.ff-modal{justify-content:flex-end!important;align-items:stretch!important;padding:0!important;
  /* NO SCRIM (#348 owner bug 2026-08-19): the default .ff-modal scrim
     (rgba(4,8,18,.7) full-viewport) slid UNDER the translucent nav rail,
     swapping its backdrop from bright chart to near-black — the rail
     visibly changed scheme the moment any flyout opened. The flyout
     content already covers everything right of the rail, so the scrim
     only polluted the rail strip. */
  background:transparent!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.zsx-flyout .ff-modal-content{
  width:calc(100vw - 238px)!important;max-width:calc(100vw - 238px)!important;
  height:100vh!important;max-height:100vh!important;margin:0!important;
  border-radius:0!important;display:flex!important;flex-direction:column!important;
  border-left:1px solid var(--fly-brd-1)!important;background:var(--fly-sur-0)!important;
  color:var(--fly-tx-0)!important;animation:zsxFlyIn .18s ease-out}
.foreflight-app.sidebar-collapsed .zsx-flyout .ff-modal-content{
  width:calc(100vw - 86px)!important;max-width:calc(100vw - 86px)!important}
.zsx-flyout .ff-modal-header{color:var(--fly-tx-0)!important;background:var(--fly-head)!important;
  border-bottom:1px solid var(--fly-brd-2)!important}
.zsx-flyout .ff-modal-header h3{color:var(--fly-tx-0)!important}
.zsx-flyout .ff-modal-close{color:var(--fly-tx-1)!important}
.zsx-flyout .ff-modal-body{flex:1 1 auto!important;min-height:0!important;
  overflow-y:auto!important;overflow-x:hidden!important;-webkit-overflow-scrolling:touch}
/* shrink-safety: grid/flex children may always shrink; nothing overflows */
.zsx-flyout .ff-modal-body>div{min-width:0}
.zsx-flyout .ff-modal-body *{max-width:100%}
.zsx-flyout div[style*="display:flex"]{flex-wrap:wrap}
/* buttons are TEXT-SIZED in every flyout (base .apt-action-btn has flex:1) */
.zsx-flyout .apt-action-btn{flex:0 0 auto!important;width:auto!important}
/* boxed section card */
/* Flyout type scale (#283, 2026-08-16): flyout content must read at the
   SAME size as its parent nav layer at every drill-down depth. The
   authoritative nav size is the LAST .ff-nav-item span rule in this file
   (14.5px — the earlier 13.5/15/16px declarations are overridden; keep
   the token in lockstep if that rule changes). Templates reference the
   tokens; changing the scale = changing two numbers here. --fly-row =
   primary text (rows, titles, values, buttons); --fly-meta = secondary
   text (hints, provenance, counts). Nothing user-facing in a flyout may
   be styled below --fly-meta. */
:root{--fly-row:14.5px;--fly-meta:12.5px}
/* Flight Logs neat form grid (#287 v2): aligned label-over-input cells */
.lb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px 12px}
.lb-grid input{width:100%!important;box-sizing:border-box}
/* Flyout input scheme (#295, 2026-08-16): the dark-glass
   .ff-modal-content input override made every flyout field GRAY on the
   light .zsx-flyout surfaces. Higher-specificity light treatment on our
   scheme: white field, slate border, ink text, cyan focus ring. Dark
   surfaces (chat, plates, admin) keep the glass style. */
.zsx-flyout .ff-modal-content input,
.zsx-flyout .ff-modal-content select,
.zsx-flyout .ff-modal-content textarea{
  background:var(--fly-input)!important;border:1px solid var(--fly-brd-1)!important;
  color:var(--fly-tx-0)!important;border-radius:8px!important}
.zsx-flyout .ff-modal-content input::placeholder,
.zsx-flyout .ff-modal-content textarea::placeholder{color:var(--fly-tx-4)!important}
.zsx-flyout .ff-modal-content input:focus,
.zsx-flyout .ff-modal-content select:focus,
.zsx-flyout .ff-modal-content textarea:focus{
  border-color:rgba(47,214,232,.85)!important;
  box-shadow:0 0 0 3px rgba(47,214,232,.18)!important;outline:none!important}
.zsx-card{background:var(--fly-sur-1);border:1px solid var(--fly-brd-1);border-radius:12px;
  padding:12px 16px;margin-bottom:12px;box-shadow:0 1px 3px rgba(15,23,42,.06)}
.zsx-card .ac-sec{margin:0 0 8px;border-bottom:2px solid #e3ebf5;padding-bottom:6px}

/* Chart families we do NOT serve yet (#336, owner 2026-08-17). Shown in the
   Layers > Charts list as DISABLED rows so the gap is visible to us and
   honest to the user, rather than a silent omission. Inert by construction:
   the markup carries no data-section, so the section-toggle handler never
   binds them — this styling only makes that state legible. */
.ff-chart-section-soon{opacity:.45;cursor:not-allowed;pointer-events:none;
  user-select:none}
.ff-chart-section-soon .ff-chart-section-header{color:#64748b}
.ff-chart-section-soon .ff-soon-tag{margin-left:auto;font-size:9.5px;
  letter-spacing:.06em;text-transform:uppercase;font-weight:700;
  color:#94a3b8;border:1px solid #cbd5e1;border-radius:999px;
  padding:1px 7px;white-space:nowrap;background:rgba(148,163,184,.10)}

/* ===================== THEME SYSTEM (#348, 2026-08-19) =====================
   Owner picks: 1 Midnight (default, unchanged) · 2 Frost White · 3 Frost Dark.
   Mechanism: data-zsx-theme on <html> swaps the token set; --glass-a is the
   USER transparency (frost themes only; slider floor .42 = the readability
   floor — the 2026-08-04 contrast lesson). Chart/data colors (VFR/IFR,
   airspace, obstacles) are NOT tokens and never theme. Applied at boot from
   localStorage zsxTheme; chosen in Account → Settings → Appearance. */
:root{--glass-a:.78;--frost-blur:20px}

/* ---- 3 · FROST DARK: the same glass physics, smoked ---- */
:root[data-zsx-theme=frost-dark]{
  --glass:rgba(13,21,38,var(--glass-a));
  --glass-hi:rgba(40,60,98,.6);
  --glass-brd:rgba(160,190,240,.28);
}
:root[data-zsx-theme=frost-dark] .ff-sidebar,
:root[data-zsx-theme=frost-dark] .apt-panel,
:root[data-zsx-theme=frost-dark] .ff-modal-content,
:root[data-zsx-theme=frost-dark] .ff-chat-container{
  background:rgba(13,21,38,var(--glass-a))!important;
  backdrop-filter:blur(var(--frost-blur)) saturate(1.2) brightness(.55)!important;
  -webkit-backdrop-filter:blur(var(--frost-blur)) saturate(1.2) brightness(.55)!important;
  border-color:var(--glass-brd)!important;
}
:root[data-zsx-theme=frost-dark] .ff-control-panel,
:root[data-zsx-theme=frost-dark] .ff-chart-toggle,
:root[data-zsx-theme=frost-dark] .zsx-search-pill,
:root[data-zsx-theme=frost-dark] .zsx-3d-btn,
:root[data-zsx-theme=frost-dark] .zsx-chip,
:root[data-zsx-theme=frost-dark] .ff-utc-time{
  background:var(--glass)!important;
  backdrop-filter:blur(var(--frost-blur)) saturate(1.2) brightness(.55)!important;
  -webkit-backdrop-filter:blur(var(--frost-blur)) saturate(1.2) brightness(.55)!important;
  box-shadow:inset 0 1px 0 rgba(180,205,245,.22),0 6px 18px rgba(0,0,0,.3)!important;
}

/* ---- 2 · FROST WHITE: the matte-white liquid glass (the reference photo) ---- */
:root[data-zsx-theme=frost-white]{
  --bg-0:#dfe6f0;--bg-1:#eef2f8;
  --glass:rgba(255,255,255,var(--glass-a));
  --glass-hi:rgba(255,255,255,.8);
  --glass-brd:rgba(255,255,255,.68);
  --ink:#101828;--ink-2:#3a465c;--ink-3:#69768e;
  --cyan:#0d8fa5;--cyan-soft:rgba(13,143,165,.12);
}
:root[data-zsx-theme=frost-white] body,
:root[data-zsx-theme=frost-white] .foreflight-app{
  background:radial-gradient(1200px 700px at 75% -10%,#f6f9fd 0%,var(--bg-0) 60%)!important;
  color:var(--ink)!important;
}
:root[data-zsx-theme=frost-white] .ff-sidebar,
:root[data-zsx-theme=frost-white] .apt-panel,
:root[data-zsx-theme=frost-white] .ff-modal-content,
:root[data-zsx-theme=frost-white] .ff-chat-container{
  background:rgba(255,255,255,var(--glass-a))!important;
  backdrop-filter:blur(var(--frost-blur)) saturate(1.5)!important;
  -webkit-backdrop-filter:blur(var(--frost-blur)) saturate(1.5)!important;
  border-color:var(--glass-brd)!important;
  color:var(--ink)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 6px 24px rgba(10,16,32,.16)!important;
}
:root[data-zsx-theme=frost-white] .ff-control-panel,
:root[data-zsx-theme=frost-white] .ff-chart-toggle,
:root[data-zsx-theme=frost-white] .zsx-search-pill,
:root[data-zsx-theme=frost-white] .zsx-3d-btn,
:root[data-zsx-theme=frost-white] .zsx-chip,
:root[data-zsx-theme=frost-white] .ff-utc-time{
  background:var(--glass)!important;
  backdrop-filter:blur(var(--frost-blur)) saturate(1.5)!important;
  -webkit-backdrop-filter:blur(var(--frost-blur)) saturate(1.5)!important;
  color:var(--ink)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 6px 18px rgba(10,16,32,.14)!important;
}
:root[data-zsx-theme=frost-white] .apt-rwy-card,
:root[data-zsx-theme=frost-white] .apt-wx-block,
:root[data-zsx-theme=frost-white] .ff-chat-input{
  background:rgba(255,255,255,.55)!important;color:var(--ink-2)!important;
  border-color:rgba(16,24,40,.12)!important;
}
:root[data-zsx-theme=frost-white] .ff-nav-item{color:#334155!important}

/* #385 input-theming sweep (owner 2026-09-06): text inputs/selects/textareas
   + the airport-info rows kept a hard-coded dark navy fill (rgba(6,12,24,.7)
   at line ~55) with NO frost override, so on the LIGHT scheme the theme's dark
   --ink sat on a dark field = gray-on-gray / invisible. Re-fill every input
   surface from the glass token on BOTH frost themes so fill+ink always
   contrast. Midnight (no data-zsx-theme) keeps the original dark look. */
:root[data-zsx-theme] .ff-modal-content input,
:root[data-zsx-theme] .ff-modal-content select,
:root[data-zsx-theme] .ff-modal-content textarea,
:root[data-zsx-theme] .apt-panel input,
:root[data-zsx-theme] .apt-panel select,
:root[data-zsx-theme] .apt-panel textarea,
:root[data-zsx-theme] #admin-modal input,
:root[data-zsx-theme] #admin-modal select,
:root[data-zsx-theme] .ff-chat-input,
:root[data-zsx-theme] .apt-row,
:root[data-zsx-theme] .apt-freq-row,
:root[data-zsx-theme] .apt-remark,
:root[data-zsx-theme] .apt-rwy-card,
:root[data-zsx-theme] .apt-wx-block{
  background:var(--glass-hi)!important;
  color:var(--ink)!important;
  border-color:var(--glass-brd)!important;
}
:root[data-zsx-theme] .ff-modal-content input::placeholder,
:root[data-zsx-theme] .apt-panel input::placeholder,
:root[data-zsx-theme] .ff-chat-input::placeholder{color:var(--ink-3)!important}

/* ---- Layers sub-flyouts follow the panel theme (owner 2026-09-01) ----
   .ff-chart-section-body kept its pre-F18 hard-coded navy glass, so in
   frost-white the sub-options were a dark slab with the theme's DARK ink
   on top (dark-on-dark). Both flyout levels now wear the same glass as
   their parent .ff-chart-toggle; midnight/legacy (no data-zsx-theme
   attribute) keeps the original dark look, which is correct there. */
:root[data-zsx-theme] .ff-chart-section-body{
  background:var(--glass)!important;
  border-color:var(--glass-brd)!important;
}
:root[data-zsx-theme=frost-white] .ff-chart-section-body{
  backdrop-filter:blur(var(--frost-blur)) saturate(1.5)!important;
  -webkit-backdrop-filter:blur(var(--frost-blur)) saturate(1.5)!important;
  color:var(--ink)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 10px 30px rgba(10,16,32,.18)!important;
}
:root[data-zsx-theme=frost-dark] .ff-chart-section-body{
  backdrop-filter:blur(var(--frost-blur)) saturate(1.2) brightness(.55)!important;
  -webkit-backdrop-filter:blur(var(--frost-blur)) saturate(1.2) brightness(.55)!important;
  box-shadow:inset 0 1px 0 rgba(180,205,245,.22),0 10px 30px rgba(0,0,0,.35)!important;
}
/* second level already uses var(--glass); theme the border/shadow too */
:root[data-zsx-theme] .ff-region-flyout{border-color:var(--glass-brd)!important}
:root[data-zsx-theme=frost-white] .ff-region-flyout{
  box-shadow:0 12px 40px rgba(10,16,32,.2)!important;color:var(--ink)!important}
/* native form controls inside flyouts/settings pick up the theme too —
   the crawl caught Chrome's default white select (wx winds-aloft picker)
   and the white range track (Settings transparency slider) in frost-dark */
:root[data-zsx-theme=frost-white] .ff-chart-section-body select{
  background:rgba(255,255,255,.9)!important;color:var(--ink)!important}
:root[data-zsx-theme=frost-dark] .ff-chart-section-body select{
  background:rgba(13,21,38,.92)!important;color:#f2f6ff!important;
  border-color:rgba(160,190,240,.28)!important}
#acct-page input[type=range]{background:transparent!important;
  accent-color:var(--cyan,#0d8fa5)}

/* ---- MAP UNDER THE RAIL (#348 owner 2026-08-19) --------------------------
   The sidebar becomes an OVERLAY and the map runs full-width beneath it —
   this is what makes frosted themes real (previously the rail sat over the
   page background, so translucent-dark-on-dark looked identical to solid,
   which is why Frost Dark seemed to "do nothing"). One layout for ALL
   themes: Midnight's near-solid rail hides the strip like today; frost
   themes reveal the chart through it. Left-anchored map overlays shift
   right of the rail via --zsx-rail (tracks collapse). */
.foreflight-app{--zsx-rail:238px}
.foreflight-app.sidebar-collapsed{--zsx-rail:86px}
.ff-sidebar{position:fixed!important;left:0;top:0;bottom:0;height:100%!important;z-index:1200}
.ff-main{margin-left:0!important;width:100%!important;max-width:100%!important}
.ff-chart-toggle{left:calc(var(--zsx-rail) + 16px)!important}
.zsx-topbar{left:calc(var(--zsx-rail) + 14px)!important}
.zsx-status{left:calc(var(--zsx-rail) + 14px)!important}

/* the rail runs CLEARER than panels in frost themes (owner: see the map
   through the nav) — panels keep --glass-a, the rail gets ~72% of it */
:root[data-zsx-theme=frost-white] .ff-sidebar{
  background:rgba(255,255,255,calc(var(--glass-a)*.72))!important}
:root[data-zsx-theme=frost-dark] .ff-sidebar{
  background:rgba(13,21,38,calc(var(--glass-a)*.72))!important}

/* ---- FROST WHITE contrast repairs (owner bug 2026-08-19): nav labels/
   icons kept their dark-theme near-white colors from the base stylesheet
   (descendants beat the .ff-nav-item override) and the white logo vanished
   on white. Recolor DESCENDANTS explicitly; active stays accent. */
:root[data-zsx-theme=frost-white] .ff-sidebar{color:#26334c!important}
:root[data-zsx-theme=frost-white] .ff-nav-item,
:root[data-zsx-theme=frost-white] .ff-nav-item span,
:root[data-zsx-theme=frost-white] .ff-nav-item i{color:#26334c!important}
:root[data-zsx-theme=frost-white] .ff-nav-item.active,
:root[data-zsx-theme=frost-white] .ff-nav-item.active span,
:root[data-zsx-theme=frost-white] .ff-nav-item.active i{color:var(--cyan)!important}
:root[data-zsx-theme=frost-white] .ff-user-profile,
:root[data-zsx-theme=frost-white] .ff-user-info,
:root[data-zsx-theme=frost-white] .ff-user-info *,
:root[data-zsx-theme=frost-white] .ff-response-content,
:root[data-zsx-theme=frost-white] .ff-response-content p{color:#3a465c!important}
/* white logo art: dark glow keeps it legible on the light rail */
:root[data-zsx-theme=frost-white] .ff-sidebar img{
  filter:drop-shadow(0 0 2px rgba(10,16,32,.85)) drop-shadow(0 1px 6px rgba(10,16,32,.55))}


/* ---- FLYOUT + ACCOUNT TOKENS (#348, owner 2026-08-19: flyout colors are
   controlled individually/dynamically — 328 inline hexes in app.html were
   replaced with these vars; defaults reproduce the pre-theme look exactly,
   so Midnight is pixel-identical). Frost themes redefine the whole ramp and
   tie surfaces to --glass-a, which is what makes the transparency slider
   act on EVERY surface, not just the map panels. */
:root{
  --fly-sur-0:rgba(244,248,253,.98); --fly-sur-1:#fff;
  --fly-head:rgba(235,241,249,.9);
  --fly-tx-0:#0f172a; --fly-tx-1:#334155; --fly-tx-2:#475569;
  --fly-tx-3:#64748b; --fly-tx-4:#94a3b8;
  --fly-brd-1:#cbd5e1; --fly-brd-2:#e2e8f0; --fly-brd-3:#eef2f7;
  --fly-input:#fff; --fly-sur-2:#eef2f7; --fly-chip-info:#e0f2fe; --fly-chip-warn:#fef3c7; --fly-chip-warn-tx:#92400e; --acct-accent:#67e8f9; --acct-danger:#fecaca;
  --acct-bg:#0b1220; --acct-card:#0f172a;
  --acct-brd:#334155; --acct-brd-2:#1e293b;
}

:root[data-zsx-theme=frost-white]{
  --fly-sur-0:rgba(255,255,255,calc(var(--glass-a) + .18));
  --fly-sur-1:rgba(255,255,255,calc(var(--glass-a) + .22));
  --fly-head:rgba(255,255,255,calc(var(--glass-a) + .10));
  --fly-brd-1:rgba(16,24,40,.16); --fly-brd-2:rgba(16,24,40,.12); --fly-brd-3:rgba(16,24,40,.08);
  --fly-input:rgba(255,255,255,.85); --fly-sur-2:rgba(255,255,255,.5); --fly-chip-info:rgba(3,105,161,.10); --fly-chip-warn:rgba(180,83,9,.12); --fly-chip-warn-tx:#92400e; --acct-accent:#0d8fa5; --acct-danger:#b91c1c;
  --acct-bg:rgba(238,243,250,calc(var(--glass-a) + .25));
  --acct-card:rgba(255,255,255,calc(var(--glass-a) + .15));
  --acct-brd:rgba(16,24,40,.20); --acct-brd-2:rgba(16,24,40,.12);
}
:root[data-zsx-theme=frost-white] .zsx-flyout .ff-modal-content,
:root[data-zsx-theme=frost-white] #acct-page{
  backdrop-filter:blur(var(--frost-blur)) saturate(1.5)!important;
  -webkit-backdrop-filter:blur(var(--frost-blur)) saturate(1.5)!important}
/* account page inline light-ink text flips dark on the light surface */
:root[data-zsx-theme=frost-white] #acct-page,
:root[data-zsx-theme=frost-white] #acct-page [style*="color:#e8eefb"]{color:#1c2940!important}

:root[data-zsx-theme=frost-dark]{
  --fly-sur-0:rgba(13,21,38,calc(var(--glass-a) + .18));
  --fly-sur-1:rgba(25,38,64,calc(var(--glass-a) + .15));
  --fly-head:rgba(13,21,38,calc(var(--glass-a) + .25));
  --fly-tx-0:#eef2fa; --fly-tx-1:#dbe4f2; --fly-tx-2:#c2cbdc;
  --fly-tx-3:#a6b2c8; --fly-tx-4:#8b98b0;
  --fly-brd-1:rgba(160,190,240,.25); --fly-brd-2:rgba(160,190,240,.18); --fly-brd-3:rgba(160,190,240,.12);
  --fly-input:rgba(10,17,30,.7); --fly-sur-2:rgba(30,45,74,.6); --fly-chip-info:rgba(125,211,252,.16); --fly-chip-warn:rgba(255,181,71,.15); --fly-chip-warn-tx:#ffb547; --acct-accent:#67e8f9; --acct-danger:#fecaca;
  --acct-bg:rgba(11,18,32,calc(var(--glass-a) + .20));
  --acct-card:rgba(22,34,58,calc(var(--glass-a) + .10));
  --acct-brd:rgba(160,190,240,.28); --acct-brd-2:rgba(160,190,240,.16);
}
:root[data-zsx-theme=frost-dark] .zsx-flyout .ff-modal-content,
:root[data-zsx-theme=frost-dark] #acct-page{
  backdrop-filter:blur(var(--frost-blur)) saturate(1.2) brightness(.5)!important;
  -webkit-backdrop-filter:blur(var(--frost-blur)) saturate(1.2) brightness(.5)!important}


/* #348 round-4 (owner 2026-08-19): glass physics fixes.
   Frost-white content surfaces: opaque-er than map panels + brightened
   backdrop (dark areas behind no longer gray the flyout). Higher
   specificity than the broad round-1 surface rule. */
:root[data-zsx-theme=frost-white] .zsx-flyout .ff-modal-content{
  background:rgba(255,255,255,calc(var(--glass-a) + .30))!important;
  backdrop-filter:blur(var(--frost-blur)) saturate(1.4) brightness(1.15)!important;
  -webkit-backdrop-filter:blur(var(--frost-blur)) saturate(1.4) brightness(1.15)!important}
:root[data-zsx-theme=frost-white] #acct-page{
  background:rgba(243,247,252,calc(var(--glass-a) + .30))!important;
  backdrop-filter:blur(var(--frost-blur)) saturate(1.4) brightness(1.15)!important;
  -webkit-backdrop-filter:blur(var(--frost-blur)) saturate(1.4) brightness(1.15)!important}
/* frost-dark rail: keep the see-through but unmistakably DARK (the
   brightness(.55) above darkens the chart behind; tint stays translucent) */
:root[data-zsx-theme=frost-dark] .ff-sidebar{
  background:rgba(10,17,30,calc(var(--glass-a)*.8 + .10))!important}

/* the coming-soon overlay honors the rail like flyouts do (#348/#293):
   it darkens the CONTENT area only, never the nav rail's backdrop */
#zsx-soon{left:var(--zsx-rail,238px)!important}


/* ===================== #391 LOGO-TOGGLED FLOATING NAV (2026-09-06) ==========
   Owner: the LOGO shows/hides the options; no sidebar slab — each option is
   its own floating glass field; collapsed keeps a floating ICON RAIL; the map
   is full-bleed; a BLUR scrim sits behind the open fan. Artboards:
   ui/v2/screens/logo-nav.html + ui/v2/mobile/logo-nav.html.
   Implementation is CSS-first: every .ff-nav-item button, its data-nav and the
   role-gating stay untouched — we only re-lay-out and animate them. */
:root{--zsx-nav-pill:44px}

/* 1 · kill the sidebar slab; the nav floats over a full-bleed map */
.foreflight-app .ff-sidebar{
  background:transparent!important;backdrop-filter:none!important;
  border:0!important;box-shadow:none!important;
  width:auto!important;min-width:0!important;padding:0!important;
  position:absolute!important;top:0;left:0;height:100vh;z-index:900;
  pointer-events:none; /* only the children catch clicks */
}
.foreflight-app .ff-sidebar > *{pointer-events:auto}
/* the map/content reclaims the old gutter */
.foreflight-app .ff-main,.foreflight-app .ff-content{margin-left:0!important;width:100%!important}

/* 2 · the logo becomes the toggle; the wordmark + old chevron are gone */
.ff-logo{padding:14px 0 0 14px!important;background:transparent!important;border:0!important;
  display:block!important;width:auto!important}
.ff-logo-content,.ff-sidebar-toggle{display:none!important}
.ff-logo-icon{width:56px;height:56px;border-radius:16px;background:var(--glass-hi)!important;
  border:1px solid var(--glass-brd)!important;backdrop-filter:blur(18px);
  box-shadow:0 8px 24px rgba(10,16,32,.18);display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:transform .22s cubic-bezier(.2,.8,.2,1)}
.ff-logo-icon:hover{transform:translateY(-1px)}
.ff-logo-icon:active{transform:scale(.94)}
.ff-logo-image{width:38px;height:38px;object-fit:contain}

/* 3 · the nav: individual pills, never a panel */
.ff-nav{background:transparent!important;border:0!important;box-shadow:none!important;
  padding:12px 0 0 14px!important;display:flex;flex-direction:column;gap:10px;
  position:relative;z-index:920}
.ff-nav-item{
  background:var(--glass)!important;border:1px solid var(--glass-brd)!important;
  backdrop-filter:blur(16px);box-shadow:0 6px 18px rgba(10,16,32,.14)!important;
  border-radius:12px!important;height:var(--zsx-nav-pill);padding:0 14px!important;
  display:flex;align-items:center;gap:11px;color:var(--ink)!important;
  font-weight:600!important;white-space:nowrap;width:max-content;
  transition:transform .18s,box-shadow .18s}
.ff-nav-item:hover{transform:translateX(2px)}
.ff-nav-item.active{outline:2px solid var(--cyan);outline-offset:-2px}
.ff-nav-item i{color:var(--cyan)!important;width:18px;text-align:center}

/* 4 · COLLAPSED (default): icon-only rail — labels hidden, pills shrink */
.foreflight-app:not(.zsx-nav-open) .ff-nav-item span{display:none!important}
.foreflight-app:not(.zsx-nav-open) .ff-nav-item{
  width:var(--zsx-nav-pill);justify-content:center;padding:0!important}

/* 5 · OPEN: labels fan in, staggered from the logo */
@keyframes zsxFan{from{opacity:0;transform:translateY(-14px) scale(.92)}to{opacity:1;transform:none}}
.foreflight-app.zsx-nav-open .ff-nav-item{animation:zsxFan .26s cubic-bezier(.2,.8,.2,1) both}
.foreflight-app.zsx-nav-open .ff-nav-item:nth-child(1){animation-delay:.02s}
.foreflight-app.zsx-nav-open .ff-nav-item:nth-child(2){animation-delay:.05s}
.foreflight-app.zsx-nav-open .ff-nav-item:nth-child(3){animation-delay:.08s}
.foreflight-app.zsx-nav-open .ff-nav-item:nth-child(4){animation-delay:.11s}
.foreflight-app.zsx-nav-open .ff-nav-item:nth-child(5){animation-delay:.14s}
.foreflight-app.zsx-nav-open .ff-nav-item:nth-child(6){animation-delay:.17s}
.foreflight-app.zsx-nav-open .ff-nav-item:nth-child(7){animation-delay:.20s}
.foreflight-app.zsx-nav-open .ff-nav-item:nth-child(8){animation-delay:.23s}

/* 6 · BLUR scrim behind the open fan (owner pick) — also tap-to-close */
#zsx-nav-scrim{position:fixed;inset:0;z-index:890;display:none;
  backdrop-filter:blur(7px) saturate(.9);background:rgba(10,16,32,.18)}
.foreflight-app.zsx-nav-open #zsx-nav-scrim{display:block;animation:zsxFade .2s ease both}
@keyframes zsxFade{from{opacity:0}to{opacity:1}}

/* 7 · the AI response box lived inside the old sidebar — keep it out of the
   floating nav's way (it re-anchors as its own floating card). */
.ff-ai-response{display:none!important}

/* #391: the frost theme blocks above also fill .ff-sidebar — with the nav now
   floating, the slab must be transparent on every scheme (the pills carry the
   glass themselves). Placed last so it wins the cascade. */
:root[data-zsx-theme] .ff-sidebar,
:root[data-zsx-theme=frost-white] .ff-sidebar,
:root[data-zsx-theme=frost-dark] .ff-sidebar,
.foreflight-app .ff-sidebar{
  background:transparent!important;backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;box-shadow:none!important;border:0!important;
}

/* #391 live-render fixes (2026-09-06):
   a) the user-profile block lived in the old sidebar and kept a white slab —
      float it as its own glass pill like the nav items;
   b) the top search pill sat BEHIND the scrim and washed out — lift the map's
      own controls above the scrim so only the MAP dims, not the chrome. */
.ff-sidebar .ff-user-profile,.ff-sidebar #user-profile,.ff-user-profile{
  background:var(--glass)!important;border:1px solid var(--glass-brd)!important;
  backdrop-filter:blur(16px);border-radius:14px!important;
  box-shadow:0 6px 18px rgba(10,16,32,.14)!important;
  margin:0 0 14px 14px!important;width:max-content!important;padding:10px 14px!important}
.zsx-search-pill,.ff-map-controls,.zsx-3d-btn,.ff-utc-time,.zsx-chip{z-index:905!important}

/* #391 fixes (owner 2026-09-06):
   TEXT VANISHED on the selected option — the legacy active rule (line ~14)
   paints the pill with --cyan-soft AND the label with --cyan, i.e. cyan on a
   cyan tint; on the new glass pill that reads as invisible. The floating nav
   keeps the CYAN OUTLINE as the active affordance and restores normal ink. */
.foreflight-app .ff-nav-item.active,
.foreflight-app .ff-nav-item.active span,
.foreflight-app .ff-nav-item.active i,
:root[data-zsx-theme] .ff-nav-item.active,
:root[data-zsx-theme] .ff-nav-item.active span{
  color:var(--ink)!important;
  background:var(--glass)!important;      /* not the cyan wash */
  box-shadow:0 6px 18px rgba(10,16,32,.14)!important;
}
/* the icon may stay accent-colored — it sits on glass, not on a tint */
.foreflight-app .ff-nav-item.active i,
:root[data-zsx-theme] .ff-nav-item.active i{color:var(--cyan)!important}
/* keep the outline as the only "selected" signal */
.foreflight-app .ff-nav-item.active{outline:2px solid var(--cyan)!important;outline-offset:-2px}

/* #391 BUBBLE feedback (owner 2026-09-06): tapping the logo or any nav pill
   gives a springy pop + a radial ripple, so a press always feels answered.
   Pure CSS/anim — no layout shift, no new nodes in the click path. */
@keyframes zsxPop{
  0%{transform:scale(1)} 38%{transform:scale(.9)} 70%{transform:scale(1.06)} 100%{transform:scale(1)}
}
@keyframes zsxRipple{
  0%{opacity:.45;transform:scale(.35)} 100%{opacity:0;transform:scale(1.9)}
}
.ff-logo-icon.zsx-pop,.ff-nav-item.zsx-pop{
  animation:zsxPop .34s cubic-bezier(.34,1.56,.64,1)!important}
/* the bubble itself — a ::after ripple that expands from the press point */
.ff-logo-icon,.ff-nav-item{position:relative;overflow:hidden}
.ff-logo-icon.zsx-pop::after,.ff-nav-item.zsx-pop::after{
  content:'';position:absolute;left:50%;top:50%;width:120%;padding-bottom:120%;
  transform:translate(-50%,-50%) scale(.35);border-radius:50%;
  background:radial-gradient(circle,var(--cyan) 0%,transparent 62%);
  animation:zsxRipple .42s ease-out forwards;pointer-events:none}

/* #391 FIX (owner 2026-09-06): collapsed pills rendered 127px wide with the
   label hidden = WIDE BLANK PILLS. The earlier :not(.zsx-nav-open) rule lost
   to later width rules. Force the icon-size collapse with high specificity so
   the rail is compact icons, and guarantee the icon glyph is visible. */
.foreflight-app:not(.zsx-nav-open) .ff-nav .ff-nav-item,
:root[data-zsx-theme] .foreflight-app:not(.zsx-nav-open) .ff-nav .ff-nav-item{
  width:var(--zsx-nav-pill)!important;
  min-width:var(--zsx-nav-pill)!important;
  max-width:var(--zsx-nav-pill)!important;
  padding:0!important;
  justify-content:center!important;
  gap:0!important;
}
.foreflight-app:not(.zsx-nav-open) .ff-nav .ff-nav-item i{
  margin:0!important;font-size:17px!important;display:inline-block!important}
/* when OPEN the pills size to their content again */
.foreflight-app.zsx-nav-open .ff-nav .ff-nav-item{
  width:max-content!important;min-width:0!important;max-width:none!important;
  padding:0 14px!important;justify-content:flex-start!important;gap:11px!important}

/* #391 (owner 2026-09-06): with the nav open, the Layers control "disappeared"
   — it stays painted (z 1100 > scrim 890) but a translucent glass control over
   a BLURRED, dimmed map loses all contrast and reads as gone. While the fan is
   open, make the map's own controls opaque + outlined so they stay legible,
   and restore them on collapse. */
.foreflight-app.zsx-nav-open .ff-chart-toggle,
.foreflight-app.zsx-nav-open #chart-toggle,
.foreflight-app.zsx-nav-open .zsx-search-pill,
.foreflight-app.zsx-nav-open .zsx-3d-btn,
.foreflight-app.zsx-nav-open .ff-utc-time{
  background:var(--glass-hi)!important;
  border:1px solid var(--cyan)!important;
  box-shadow:0 6px 20px rgba(10,16,32,.28)!important;
  opacity:1!important;
}

/* ============ #391 v2 (owner 2026-09-06): LOGO-ONLY collapsed + Layers ============
   1) COLLAPSED = the LOGO ALONE. The icon rail is retired — options appear
      only after clicking the logo (supersedes the earlier logo+rail pick).
   2) LAYERS sits to the RIGHT of the logo by default, and its open panel is
      placed so it never covers the other map controls, at any screen size. */

/* 1 · collapsed: hide the nav entirely (logo is the only affordance) */
.foreflight-app:not(.zsx-nav-open) .ff-nav{
  display:none!important;
}
/* open: the pills stack under the logo as before */
.foreflight-app.zsx-nav-open .ff-nav{display:flex!important}

/* 2 · Layers control: to the RIGHT of the 56px logo (logo left:14 + 56 + 12 gap) */
.ff-chart-toggle,#chart-toggle{
  top:14px!important;                 /* vertically aligned with the logo */
  left:82px!important;                /* immediately right of the logo */
  z-index:1100!important;
}
/* its expanded panel opens BELOW the button so it never covers the logo,
   the search pill (centre-top) or the right-hand map buttons */
.ff-chart-toggle-content,#chart-toggle-content{
  max-height:calc(100vh - 160px)!important;
  overflow:auto!important;
}
/* keep the top-centre search pill clear of the logo + layers cluster */
.zsx-search-pill{margin-left:0!important}
.zsx-topbar{left:150px!important;right:150px!important}

/* narrow screens: stack the cluster so nothing overlaps */
@media (max-width:900px){
  .zsx-topbar{left:150px!important;right:70px!important}
}
@media (max-width:600px){
  .ff-chart-toggle,#chart-toggle{top:78px!important;left:14px!important}
  .zsx-topbar{left:14px!important;right:14px!important;top:78px!important}
  .ff-chart-toggle-content,#chart-toggle-content{max-width:92vw!important}
}

/* ============ #391 v3 (owner 2026-09-06) ============
   1) COLLAPSED = LOGO ONLY. The user-profile card was still painted under the
      logo (147px wide at y:62) and read as a stray 'user management' icon —
      it now hides with the rest of the nav and appears only when open.
   2) LAYERS panel: it DOES open (verified 432x324) but at left:82 it fought
      the logo/profile cluster. Give the open panel its own lane below the
      control row, above everything, and cap it to the viewport. */

/* 1 · nothing but the logo while collapsed */
.foreflight-app:not(.zsx-nav-open) .ff-user-profile,
.foreflight-app:not(.zsx-nav-open) #user-profile,
.foreflight-app:not(.zsx-nav-open) .ff-ai-response{
  display:none!important;
}
/* when open, the profile pill returns at the BOTTOM of the fan */
.foreflight-app.zsx-nav-open .ff-user-profile,
.foreflight-app.zsx-nav-open #user-profile{
  display:flex!important;position:fixed!important;left:14px!important;
  bottom:18px!important;z-index:925!important;width:max-content!important;
}

/* 2 · Layers: launcher stays right of the logo; the EXPANDED panel drops into
      its own lane so it never sits under the logo or the profile pill */
#chart-toggle.expanded,.ff-chart-toggle.expanded{
  top:78px!important;           /* below the logo row */
  left:14px!important;          /* aligned with the left gutter */
  z-index:1150!important;       /* above the nav scrim/pills, BELOW the flyouts */
  max-height:calc(100vh - 110px)!important;
}
/* THE LAYERS BUG (owner 2026-09-06): section bodies are PORTALED to
   document.body (app.html ~2181 — the glass panel's backdrop-filter would
   otherwise re-base their position:fixed coords). They carry z-index:1200,
   which my first pass matched on the panel — same index, later in DOM order,
   so the PANEL painted over every sublayer flyout and Layers looked dead.
   The flyouts must outrank the panel, and never leave the viewport. */
body > .ff-chart-section-body{
  z-index:1400!important;
  max-height:calc(100vh - 24px)!important;overflow:auto!important;
}
#chart-toggle-content,.ff-chart-toggle-content{
  max-height:calc(100vh - 170px)!important;overflow:auto!important}
/* while Layers is expanded, collapse-safe: the nav fan must not overlap it */
.foreflight-app.zsx-nav-open #chart-toggle.expanded{left:210px!important}

@media (max-width:600px){
  #chart-toggle.expanded,.ff-chart-toggle.expanded{
    left:8px!important;right:8px!important;width:auto!important;
    max-width:96vw!important}
  .foreflight-app.zsx-nav-open #chart-toggle.expanded{left:8px!important}
}

/* #391 v4 (owner 2026-09-06): PARITY with the mobile fix — the ripple was a
   fading radial FILL clipped inside the button (overflow:hidden), so on the
   opaque logo it barely registered. Same root cause as iOS: a ripple painted
   under/inside an opaque child of the same size is invisible by construction.
   It is now a stroked cyan RING that expands PAST the control. */
.ff-logo-icon,.ff-nav-item{overflow:visible!important}
.ff-logo-icon.zsx-pop::after,.ff-nav-item.zsx-pop::after{
  background:none!important;
  border:2.5px solid var(--cyan)!important;
  animation:zsxRingPop .44s cubic-bezier(.2,.8,.2,1) forwards!important;
}
@keyframes zsxRingPop{
  0%{opacity:.85;transform:translate(-50%,-50%) scale(.62)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.55)}
}