/* 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{
  /* base scheme = MIDNIGHT (mirror of ZsxScheme _midnight; #569 switch note
     at the frost-white block). Ink family brightened owner 2026-09-14. */
  --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:#ffffff;--ink-2:#e2eeff;--ink-3:#a9bedf;
  --cyan:#3affff;--cyan-soft:rgba(58,255,255,.14);--amber:#ffe258;--green:#3ddc97;
  --glass-solid:#131f3a;--glass-hi-solid:#203254;--bar:#0b1424;
  --pane:rgba(13,23,42,.93);--pane-2:rgba(13,23,42,.97);
}
/* Base */
body,.zsx-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). */
/* owner 2026-09-14: pure white read as "too white" on the light chip —
   deep ZSX teal with a soft glow keeps it visible on BOTH themes. */
.ff-chart-icon,.ff-chart-icon:hover{color:#0d8fa5!important;text-shadow:0 0 10px rgba(47,214,232,.45)!important}
:root[data-zsx-theme=frost-dark] .ff-chart-icon{color:#35c8d8!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}
/* Popup is a DARK glass panel by design; its text must be a FIXED light color,
   NOT var(--ink) — on the frost-white (light) theme --ink is near-black, which
   rendered dark text on the dark popup = unreadable (owner 2026-09-09). */
.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:rgba(13,23,42,.96)!important;color:#eef2f9!important;border:1px solid rgba(120,160,220,.28)}
.leaflet-popup-content-wrapper,.leaflet-popup-content{color:#eef2f9!important}
.leaflet-popup-content b,.leaflet-popup-content strong{color:#ffffff!important}
.leaflet-popup-content-wrapper h3{color:#39d2e0!important}
.leaflet-popup-close-button{color:#9fb2d2!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}
.zsx-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:50%!important;flex:0 0 auto;overflow:hidden!important}
.ff-logo-image{width:48px!important;height:48px!important;border-radius:50%!important;object-fit:cover}
.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}
.zsx-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}
.zsx-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}
.zsx-app.sidebar-collapsed .ff-nav-item i{font-size:20px!important}
.zsx-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 */
.zsx-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) */
.zsx-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}
.zsx-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,.zsx-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) --- */
/* #569 item 9: the row is width-BOUNDED (right:14px) and flexes, so when
   the chat dock expands and the map container narrows, search/Plan/clock
   compress and slide left instead of sliding under the dock. */
.zsx-topbar{position:absolute;top:14px;left:14px;right:14px;z-index:600;display:flex;gap:10px}
.zsx-search-inline{flex:1 1 auto;min-width:140px}
.zsx-search-inline .zsx-search-input{min-width:0;flex:1}
.zsx-search-pill{display:flex;align-items:center;gap:10px;padding:11px 16px;min-width:0;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)}
/* #570 weather-currency chip (schema tokens; frost-dark brightens ink) */
.zsx-wx-stamp{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;
  font-weight:700;padding:2px 8px;border-radius:999px;white-space:nowrap;
  border:1px solid var(--glass-brd)}
.zsx-wx-ok{background:rgba(22,163,74,.12);color:#15803d;border-color:rgba(22,163,74,.35)}
.zsx-wx-warn{background:rgba(180,83,9,.14);color:#b45309;border-color:rgba(180,83,9,.4)}
.zsx-wx-bad{background:rgba(220,38,38,.14);color:#c0362f;border-color:rgba(220,38,38,.45)}
.zsx-wx-unk{background:var(--glass-hi);color:var(--ink-3)}
:root[data-zsx-theme=frost-dark] .zsx-wx-ok{color:#4ade80}
:root[data-zsx-theme=frost-dark] .zsx-wx-warn{color:#ffb547}
:root[data-zsx-theme=frost-dark] .zsx-wx-bad{color:#ff8080}
.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}
/* W1 (#448): inline search bar (no modal) + typeahead dropdown under it */
.zsx-search-inline{position:relative;cursor:text;padding-top:8px;padding-bottom:8px}
.zsx-search-input{flex:1;min-width:0;background:transparent;border:none;outline:none;
  color:var(--ink);font-size:13px;font-family:inherit}
.zsx-search-input::placeholder{color:var(--ink-2)}
.zsx-search-drop{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:960;
  max-height:340px;overflow-y:auto;background:var(--glass);backdrop-filter:blur(18px);
  border:1px solid var(--glass-brd);border-radius:12px;box-shadow:0 18px 46px rgba(0,0,0,.5)}
.zsx-search-row{display:flex;align-items:baseline;gap:10px;padding:9px 14px;cursor:pointer;
  border-top:1px solid rgba(255,255,255,.05);font-size:13px;color:var(--ink)}
.zsx-search-row:first-child{border-top:none}
.zsx-search-row:hover,.zsx-search-row.sel{background:rgba(47,214,232,.14)}
.zsx-search-row .sr-id{font-weight:800;min-width:58px;font-family:ui-monospace,Menlo,monospace}
.zsx-search-row .sr-kind{color:var(--cyan);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.03em}
.zsx-search-row .sr-name{color:var(--ink-2);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zsx-search-empty{padding:12px 14px;color:var(--ink-2);font-size:12px;text-align:center}
/* 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 --- */
/* W2 (#449): floating half-width card (was a 440px full-height dock). The
   width/height/position now come from app.html's .apt-panel + JS
   _positionCardByPin; keep only the glass skin here. */
/* #606-v2r item 3 revised (owner): TWICE the old display width */
.apt-panel{width:540px!important;max-width:92vw!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:var(--glass)!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: W2 (#449) floating card anchored to the RIGHT of the pin ---
   Replaces the old centered 760px card + full-screen backdrop. Geometry
   (left/top/width/max-height) is owned by app.html + JS _positionCardByPin;
   this block only refines the desktop skin. Single-column body (owner:
   "one vertical list", W7c) — NO more two-column. */
@media (min-width:601px){
  .apt-panel{
    border-radius:14px!important;border:1px solid var(--glass-brd)!important;
    border-top-color:rgba(160,200,255,.28)!important;
    box-shadow:0 18px 46px rgba(0,0,0,.5)!important}
  /* NOT a multicol container (auto, not 1): column-count:1 still creates a
     fragmentation context, and with the fixed 66vh card height the content
     fragments into invisible sideways overflow columns instead of growing
     scrollHeight — the body then never scrolls (found 2026-09-25). */
  .apt-panel-body{column-count:auto!important}
  .apt-panel-code{font-size:22px!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:#fff!important;
  /* #569 B6: the saturated legacy blue circle joins the accent family */
  background:linear-gradient(160deg,#18b6c9,#0d8fa5)!important;
  border:1px solid var(--glass-brd)!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 --- */
/* #570-adj (owner 2026-09-21): the Layers launcher lives immediately RIGHT
   of the logo at EVERY width and never collapses onto the top bar (it used
   to share top:78/left:14 with .zsx-topbar at <=600px and vanish under it).
   COLLAPSED = a fixed 56px chip beside the logo; EXPANDED overrides below. */
.ff-chart-toggle:not(.expanded){top:14px!important;left:72px!important;
  width:48px!important;height:48px!important;z-index:940!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  /* owner 2026-09-23 (H3 pick): the launcher IS the HDR chip — the inline SVG
     paints the full lit-navy circle with the white chevron-deck emblem (logo
     family, original ZSX artwork from the design-URL gallery). Container goes
     transparent so only the chip shows. */
  padding:0!important;border-radius:50%!important;overflow:visible!important;
  background:transparent!important;border:none!important;box-shadow:0 5px 14px rgba(6,12,24,.45)!important}
/* owner 2026-09-23 (true HDR): the chip ships as a REAL HDR raster — the H3
   artwork run through the SAME pipeline as the logo (make_hdr_logo.py:
   luminance-gated x5 boost -> BT.2020 -> PQ -> ffmpeg AVIF). On HDR displays
   the white chevrons render ~1000 nits like the logo emblem; <picture> falls
   back to the SDR PNG elsewhere. The inline SVG is retired (SVG cannot exceed
   SDR white — that was the "not HDR" defect). */
.zsx-lyr-chip{width:48px;height:48px;border-radius:50%;display:block;object-fit:cover}
/* owner 2026-09-21: the icon is a FIXED 48x48 in BOTH states. Previously it was
   width/height:100% of a container that only had a fixed size while collapsed,
   so at the moment of the class swap the container briefly lost its size and the
   icon collapsed to the glyph's ~18px then re-grew to 48px — the "opens once,
   then opens again full length" flicker. Pinning the icon size removes it. */
.ff-chart-icon{width:48px!important;height:48px!important;flex:0 0 48px!important;
  display:flex!important;align-items:center;justify-content:center;font-size:18px}
.ff-chart-toggle:not(.expanded) .ff-chart-icon{width:48px!important;height:48px!important}
.ff-chart-toggle:not(.expanded) .ff-chart-toggle-header,
.ff-chart-toggle:not(.expanded) .ff-chart-toggle-content{display:none!important}
@media (max-width:600px){.ff-chart-toggle:not(.expanded){top:14px!important;left:72px!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 --- */
/* #569 B2: the old contrast pass hardcoded midnight rgba(13,23,42,*) on
   every panel AND re-declared the ink family at :root — both are exactly
   the drift the schema switch forbids. Panels now ride the per-scheme
   --pane/--pane-2 tokens; inks come from the scheme blocks alone. */
.ff-chart-toggle,.ff-chart-toggle:hover,.ff-chart-toggle:focus-within,
.ff-control-panel,.ff-control-panel:hover{background:var(--pane)!important}
.zsx-search-pill,.zsx-3d-btn,.zsx-chip,.ff-utc-time{background:var(--pane)!important;color:var(--ink)!important}
.zsx-dim{color:var(--ink-2)}
.apt-panel{background:var(--pane-2)!important}
.ff-chat-container{background:var(--pane)!important}
.ff-modal-content{background:var(--pane-2)!important}
#appr-card{background:var(--pane)!important}
.ff-sidebar{background:var(--pane-2)!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; }

/* Runway designator NUMBERS painted on the slab (parity with mobile rwym-num,
   #93/owner 2026-09-10). FAA white paint, no chip — a dark halo keeps them
   legible on the charcoal slab; rotated to the runway bearing inline. */
.zsx-rwy-num{
    position:absolute; display:inline-block; white-space:nowrap;
    transform-origin:center center;
    font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;
    font-size:12px; font-weight:800; letter-spacing:.5px; color:#fff;
    text-shadow:0 0 2px #11151c,0 0 2px #11151c,0 0 3px #11151c;
    pointer-events:none;
}

/* --- 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:linear-gradient(115deg,rgba(13,143,165,.14),rgba(47,214,232,.07))!important;border-bottom:1px solid var(--glass-brd)!important;   /* #569 B4: teal whisper, ink follows scheme */
  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:transparent!important}
.ff-chat-input{background:var(--glass)!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:var(--pane)!important;color:var(--ink)!important;   /* #569 item 7 */
  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 */
.zsx-app.sidebar-collapsed .ff-user-profile{cursor:pointer!important}
.zsx-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}

/* #400 chart-layer GROUPS (nested accordion: IFR Enroute/Alaska/Caribbean).
   The group header matches a section header; its inline body indents the
   child section headers so the hierarchy reads at a glance. */
.ff-chart-group-header{display:flex!important;align-items:center!important;
    justify-content:space-between!important;cursor:pointer!important;
    font-size:13.5px!important;font-weight:700!important;text-transform:uppercase!important;
    letter-spacing:1.1px!important;padding:9px 10px!important;color:var(--ink)!important}
.ff-chart-group-header span{font-size:13.5px!important;letter-spacing:1.1px!important;color:var(--ink)!important}
.ff-chart-group-header:hover{background:var(--glass-hi)!important;border-radius:8px}
.ff-chart-group-header.zsx-open{background:var(--cyan-soft)!important;border-radius:8px}
.ff-chart-group-header.zsx-open span,.ff-chart-group-header.zsx-open i{color:var(--cyan)!important}
.ff-chart-group-header .ff-sub-arrow{transition:transform .15s ease}
.ff-chart-group-header.zsx-open .ff-sub-arrow{transform:rotate(90deg)}
/* #400: the group body opens as a FLYOUT (portalled to body, positioned in JS).
   Give it the same glass-panel look as the section/region flyouts. */
.ff-chart-group-body{min-width:150px!important;padding:6px!important;
    background:var(--glass,rgba(16,24,38,.96))!important;
    border:1px solid var(--glass-br,rgba(255,255,255,.12))!important;
    border-radius:12px!important;
    box-shadow:0 12px 40px rgba(0,0,0,.5)!important;
    backdrop-filter:blur(18px)!important;-webkit-backdrop-filter:blur(18px)!important}
.ff-chart-group-body .ff-chart-section-header span{text-transform:none!important;letter-spacing:.3px!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}
.zsx-app.sidebar-collapsed #aircraft-modal .ff-modal-content,
.zsx-app.sidebar-collapsed #notes-modal .ff-modal-content,
.zsx-app.sidebar-collapsed #checklists-modal .ff-modal-content,
.zsx-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(--ink)!important;   /* #569: SAME source as the weather reference surface */
  border-left:1px solid var(--glass-brd)!important}
#aircraft-modal .ff-modal-header,#notes-modal .ff-modal-header,
#checklists-modal .ff-modal-header,#wb-modal .ff-modal-header{
  /* #569 recheck (owner 2026-09-21): this ID-scoped rule outranked the v3
     teal-whisper header for exactly these four flyouts — Weather (no ID
     rule) showed the whisper, these showed flat white. Same recipe now. */
  color:var(--ink)!important;border-bottom:none!important;
  background:linear-gradient(115deg,rgba(13,143,165,.14),rgba(47,214,232,.07))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45)!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}
/* #410 rule 3 (owner 2026-09-09): the opened section is a WINDOW, not a
   takeover — margins on every side so the TOP SEARCH BAR (~56px + gap), the
   RIGHT map controls (~64px + gap), and the nav pills (14+172+24 when the fan
   is docked open; 86+24 when collapsed to the icon rail) all stay visible and
   clickable. Radius/border restored since the edges now show. */
.zsx-flyout .ff-modal-content{
  position:fixed!important;top:70px!important;right:88px!important;
  bottom:18px!important;left:110px!important;
  width:auto!important;max-width:none!important;
  height:auto!important;max-height:none!important;margin:0!important;
  border-radius:16px!important;display:flex!important;flex-direction:column!important;
  border:1px solid var(--fly-brd-1)!important;background:var(--fly-sur-0)!important;
  box-shadow:0 24px 70px rgba(0,0,0,.5)!important;
  color:var(--fly-tx-0)!important;animation:zsxFlyIn .18s ease-out}
body.zsx-nav-open .zsx-flyout .ff-modal-content{left:210px!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]{
  /* THE SCHEMA SWITCH: mirror of ZsxScheme _frostDark (zsx_theme.dart) */
  --bg-0:#0e131c;--bg-1:#141c2a;
  --glass:rgba(13,21,38,var(--glass-a));
  --glass-hi:rgba(40,60,98,.6);
  --glass-brd:rgba(120,160,220,.18);
  --glass-solid:#1b2433;--glass-hi-solid:#273348;--bar:#141c2a;
  --ink:#fafcff;--ink-2:#dce6f2;--ink-3:#aabace;
  --cyan:#3ad6e8;--cyan-soft:rgba(58,214,232,.14);
  --amber:#ffb547;
  --pane:rgba(27,36,51,.93);--pane-2:rgba(27,36,51,.97);
  --tg-body:rgba(24,44,64,.46);--tg-body-deep:rgba(9,18,32,.62);
  --tg-edge:rgba(210,245,255,.5);--tg-edge-soft:rgba(120,200,225,.22);
  --tg-glow:rgba(47,214,232,.5);
}
: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) ---- */
/* ═══ THE SCHEMA SWITCH (#569, owner 2026-09-19) ═══════════════════════════
   These per-scheme token blocks are the WEB HALF of the single-switch schema
   system; the MOBILE half is ZsxScheme in mobile/lib/zsx_theme.dart. The two
   MUST stay value-identical (owner hard rule: every platform shows the same
   schema per feature). To change the app's look: edit ONE scheme's values
   here AND the matching ZsxScheme const — nothing else. Component rules must
   consume var(--…), never literal colors (literals are the drift bug this
   system exists to kill). Canon table: docs/frontend/
   WEB_SCHEMA_ALIGNMENT_PLAN.md §1. */
: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(11,20,36,.14);            /* ZsxScheme.brd */
  --glass-solid:#f7fafd;                     /* ZsxScheme.glass */
  --glass-hi-solid:#e2e9f3;                  /* ZsxScheme.glassHi */
  --bar:#f2f6fb;                             /* ZsxScheme.bar */
  --ink:#0b1424;--ink-2:#3e4c63;--ink-3:#64748b;   /* ZsxScheme ink family */
  --cyan:#0e7490;--cyan-soft:rgba(14,116,144,.12); /* ZsxScheme.cyan */
  --amber:#b45309;                           /* ZsxScheme.amber */
  --pane:rgba(247,250,253,.93);--pane-2:rgba(247,250,253,.97);
  /* v3 thick-glass tokens, LIGHT (mirror of glassCard() light branch:
     white gradient pane, WHITE glow — owner 2026-09-14 "less blue, more
     white"; dark schemes keep the cyan neon set below). */
  --tg-body:rgba(255,255,255,.64);
  --tg-body-deep:rgba(226,235,245,.80);
  --tg-edge:rgba(255,255,255,.92);
  --tg-edge-soft:rgba(11,20,36,.12);
  --tg-glow:rgba(255,255,255,.60);
  --tg-stack:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 1px 0 0 rgba(255,255,255,.5),
    inset 0 -14px 24px -18px rgba(10,16,32,.18),
    0 18px 40px -12px rgba(10,16,32,.22),
    0 0 0 1px rgba(255,255,255,.6),
    0 0 30px -2px rgba(255,255,255,.55),
    0 0 60px -8px rgba(14,116,144,.10);
}
:root[data-zsx-theme=frost-white] body,
:root[data-zsx-theme=frost-white] .zsx-app{
  background:radial-gradient(1200px 700px at 75% -10%,#f6f9fd 0%,var(--bg-0) 60%)!important;
  color:var(--ink)!important;
}
/* #569 B3: .ff-modal-content / .ff-chat-container REMOVED from this flat
   repaint — its higher specificity was collapsing every v3 glass pane to
   plain white in the light scheme (the audit's 'flat' Aircraft/Notes).
   They now take the v3 pane with the per-scheme --tg-* tokens above. */
:root[data-zsx-theme=frost-white] .ff-sidebar,
:root[data-zsx-theme=frost-white] .apt-panel{
  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). */
.zsx-app{--zsx-rail:238px}
.zsx-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:72px!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,
/* #569 recheck: the aircraft/notes/checklists/wb quartet's ID rules beat
   this owner-tuned round-4 surface — repeat it at ID specificity so ALL
   flyouts share the exact same content surface as Weather. */
:root[data-zsx-theme=frost-white] #aircraft-modal .ff-modal-content,
:root[data-zsx-theme=frost-white] #notes-modal .ff-modal-content,
:root[data-zsx-theme=frost-white] #checklists-modal .ff-modal-content,
:root[data-zsx-theme=frost-white] #wb-modal .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 */
.zsx-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 */
}
.zsx-app .ff-sidebar > *{pointer-events:auto}
/* the map/content reclaims the old gutter */
.zsx-app .ff-main,.zsx-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}
/* Logo icon (owner 2026-09-21): ROUND + 48x48 to match the Layers icon.
   The old 56px rounded-SQUARE with a glass background + border read as a
   "white box" around the logo. Make it a borderless round chip so only the
   round logo shows. */
.ff-logo-icon{width:48px;height:48px;border-radius:50%!important;background:none!important;
  border:none!important;backdrop-filter:none!important;box-shadow:none!important;
  display:flex;align-items:center;justify-content:center;overflow:hidden!important;
  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:48px!important;height:48px!important;border-radius:50%!important;object-fit:cover}

/* 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;
  /* #410 rule 1 (owner 2026-09-09): EQUAL-LENGTH pills — one width for every
     option, exactly like the mobile apps. max-content made the column ragged. */
  width:172px!important;min-width:172px!important;max-width:172px!important;box-sizing:border-box;
  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 */
.zsx-app:not(.zsx-nav-open) .ff-nav-item span{display:none!important}
.zsx-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}}
.zsx-app.zsx-nav-open .ff-nav-item{animation:zsxFan .26s cubic-bezier(.2,.8,.2,1) both}
.zsx-app.zsx-nav-open .ff-nav-item:nth-child(1){animation-delay:.02s}
.zsx-app.zsx-nav-open .ff-nav-item:nth-child(2){animation-delay:.05s}
.zsx-app.zsx-nav-open .ff-nav-item:nth-child(3){animation-delay:.08s}
.zsx-app.zsx-nav-open .ff-nav-item:nth-child(4){animation-delay:.11s}
.zsx-app.zsx-nav-open .ff-nav-item:nth-child(5){animation-delay:.14s}
.zsx-app.zsx-nav-open .ff-nav-item:nth-child(6){animation-delay:.17s}
.zsx-app.zsx-nav-open .ff-nav-item:nth-child(7){animation-delay:.20s}
.zsx-app.zsx-nav-open .ff-nav-item:nth-child(8){animation-delay:.23s}
/* #569 item 1: children 9+ had NO delay, so Account (last in DOM) popped in
   FIRST while the rest staggered — the fan must read top-down, Maps→Account */
.zsx-app.zsx-nav-open .ff-nav-item:nth-child(9){animation-delay:.26s}
.zsx-app.zsx-nav-open .ff-nav-item:nth-child(10){animation-delay:.29s}
.zsx-app.zsx-nav-open .ff-nav-item:nth-child(11){animation-delay:.32s}

/* 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)}
.zsx-app.zsx-nav-open #zsx-nav-scrim{display:block;animation:zsxFade .2s ease both}
/* #410 rule 2 (owner 2026-09-09): picking a section keeps the pills VISIBLE
   with the active one highlighted; only the scrim drops (a fogged flyout was
   the old reason to collapse). zsx-nav-docked = fan open + a section open. */
.zsx-app.zsx-nav-open.zsx-nav-docked #zsx-nav-scrim{display:none}
.zsx-app.zsx-nav-open.zsx-nav-docked .ff-nav-item{animation:none}
@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,
.zsx-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. */
.zsx-app .ff-nav-item.active,
.zsx-app .ff-nav-item.active span,
.zsx-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 */
.zsx-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 */
.zsx-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. */
.zsx-app:not(.zsx-nav-open) .ff-nav .ff-nav-item,
:root[data-zsx-theme] .zsx-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;
}
.zsx-app:not(.zsx-nav-open) .ff-nav .ff-nav-item i{
  margin:0!important;font-size:17px!important;display:inline-block!important}
/* #410 rule 1 (owner 2026-09-09, supersedes "size to content"): when OPEN the
   pills are EQUAL LENGTH — one width for the whole set, like the mobile apps. */
.zsx-app.zsx-nav-open .ff-nav .ff-nav-item{
  width:172px!important;min-width:172px!important;max-width:172px!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. */
.zsx-app.zsx-nav-open .ff-chart-toggle,
.zsx-app.zsx-nav-open #chart-toggle,
.zsx-app.zsx-nav-open .zsx-search-pill,
.zsx-app.zsx-nav-open .zsx-3d-btn,
.zsx-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) */
.zsx-app:not(.zsx-nav-open) .ff-nav{
  display:none!important;
}
/* open: the pills stack under the logo as before */
.zsx-app.zsx-nav-open .ff-nav{display:flex!important}

/* 2 · Layers control (owner 2026-09-21 fix): the OLD left:82px assumed the logo
   sat at the screen's left edge, but the logo lives INSIDE the fixed rail
   (--zsx-rail = 238px / 86px collapsed). 82px therefore landed UNDER the rail
   at the far-left edge — that was the "dropdown shows on the left edge" bug.
   Anchor it just RIGHT of the rail instead (same offset system as .zsx-topbar
   / .zsx-status on line ~1095). The expanded panel keeps this same left edge,
   so it opens straight DOWN from the icon. */
.ff-chart-toggle,#chart-toggle{
  top:14px!important;
  left:72px!important;                          /* right of the logo (logo ends ~62px) */
  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;
}
/* owner 2026-09-21: when expanded, the collapsed ICON STAYS VISIBLE as the
   anchor (a 48px round-ish chip on top), and the header + content stack
   BELOW it as a dropdown. The container is a vertical stack; the icon keeps
   its 48px box, the header/content flow underneath. */
/* owner 2026-09-22 — THE ROOT CAUSE of "opens in two stages":
   zsx-app.css line 819 sets `.ff-chart-toggle { transition: all 0.3s ease }`
   with a base size of 44x44. When `.expanded` is added, the box ANIMATES from
   44x44 up to 280 x full-height over 0.3s (transition:all covers width+height),
   while the content inside is already full-size — so the content appears, then
   the box grows to catch it = the two-stage open. Kill the transition on the
   toggle so the panel appears at its final size INSTANTLY. (This is NOT the
   backdrop-filter; that theory was wrong — headless samples missed the 300ms
   size tween because it only sees the single class mutation.) */
.ff-chart-toggle,#chart-toggle,
.ff-chart-toggle.expanded,#chart-toggle.expanded{transition:none!important}
.ff-chart-toggle.expanded,#chart-toggle.expanded{
  display:flex!important;flex-direction:column!important;align-items:stretch!important;
  width:280px!important;padding:0!important;overflow:visible!important}
.ff-chart-toggle.expanded .ff-chart-icon,#chart-toggle.expanded .ff-chart-icon{
  display:flex!important;align-items:center;justify-content:center;
  width:48px!important;height:48px!important;font-size:18px;cursor:pointer;
  align-self:flex-start!important}      /* the anchor icon, top-left of the panel */
/* owner 2026-09-21: the panel header ("Layers" + X) is REDUNDANT now — the
   icon stays visible and clicking it toggles the panel closed, so the label +
   close button are duplicative. Hide the header; the dropdown goes straight
   from the icon into the layer list. */
.ff-chart-toggle.expanded .ff-chart-toggle-header,#chart-toggle.expanded .ff-chart-toggle-header{
  display:none!important}
/* Search + Plan + clock cluster (owner 2026-09-21): CENTERED and width-bounded.
   It clears the top-LEFT lane (logo + Layers icon + the Layers dropdown that
   opens below the icon) on the left and the right-hand map controls on the
   right. The cluster centers itself in the space between rail and right edge.
   Matches ui/v2/screens/map-home.html. */
.zsx-search-pill{margin-left:0!important}
.zsx-topbar{left:calc(var(--zsx-rail) + 150px)!important;right:150px!important;justify-content:center!important}
.zsx-search-inline{flex:0 1 420px!important}

/* narrow screens: keep it clear of the left lane, allow more width on the right */
@media (max-width:900px){
  .zsx-topbar{left:calc(var(--zsx-rail) + 90px)!important;right:70px!important}
}
@media (max-width:600px){
  .ff-chart-toggle.expanded,#chart-toggle.expanded{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 */
.zsx-app:not(.zsx-nav-open) .ff-user-profile,
.zsx-app:not(.zsx-nav-open) #user-profile,
.zsx-app:not(.zsx-nav-open) .ff-ai-response{
  display:none!important;
}
/* when open, the profile pill returns at the BOTTOM of the fan */
.zsx-app.zsx-nav-open .ff-user-profile,
.zsx-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 (owner 2026-09-21 fix): the EXPANDED panel must open from the SAME
      left edge as the icon (just right of the rail) and flow DOWN from it — the
      old top:78px / left:14px detached it to the far-left gutter UNDER the rail,
      which is the "dropdown shifts to the left edge" bug. Anchor it to the rail
      like the collapsed icon; the icon stays on top and the panel drops below. */
#chart-toggle.expanded,.ff-chart-toggle.expanded{
  top:14px!important;                              /* same top as the icon; stack flows down */
  left:72px!important;                            /* right of the logo, under the icon */
  z-index:1150!important;       /* above the nav scrim/pills, BELOW the flyouts */
  max-height:calc(100vh - 40px)!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.
   --zsx-rail already grows to 238px when nav is open, so rail+16 keeps the
   panel just right of the (wider) rail automatically. */
.zsx-app.zsx-nav-open #chart-toggle.expanded{left:72px!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}
  .zsx-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)}
}

/* #410 rule 4 (owner 2026-09-09): account management moved under Connect as
   the ACCOUNT card — the standalone sidebar user-info entry retires. */
.ff-user-info{display:none!important}

/* #410 v2 (owner 2026-09-09): the ACCOUNT surface uses the SAME windowed
   geometry as every other option's flyout — top 70px (search bar), right
   88px (map controls), bottom 18px, left 110px icon-rail / 210px docked fan.
   #acct-page ships an inline inset:0, hence the !importants. */
#acct-page{top:70px!important;right:88px!important;bottom:18px!important;
  left:110px!important;border-radius:16px!important;
  border:1px solid var(--fly-brd-1,rgba(120,140,180,.25))!important;
  box-shadow:0 24px 70px rgba(0,0,0,.5)!important}
body.zsx-nav-open #acct-page{left:210px!important}

/* ===== v3 THICK GLASS (owner-approved 2026-09-14; artboard
   ui/v2/mobile/glass3d-cards.html + screens/glass3d-cards.html) =====
   Skin-only: additive overrides on the EXISTING popup-card / flyout / modal
   selectors — no DOM, IDs or bindings change. The pane reads as thick glass:
   frosted body, crisp specular rim (top/left), a 3px cut-edge band, bottom
   inner shadow (=thickness) and a ZSX-cyan bloom. Bodies stay ~92% opaque
   over bright OSM tiles (readability rule). */
:root{
  --tg-body: rgba(24,44,64,.46);            /* owner round 3: another step clearer */
  --tg-body-deep: rgba(9,18,32,.62);
  --tg-edge: rgba(210,245,255,.5);
  --tg-edge-soft: rgba(120,200,225,.22);
  --tg-glow: rgba(47,214,232,.5);
  --tg-grad: linear-gradient(115deg, rgba(13,143,165,.9), rgba(31,111,214,.78) 55%, rgba(47,214,232,.6));
  --tg-stack:
    inset 0 1px 0 var(--tg-edge),
    inset 1px 0 0 rgba(210,245,255,.22),
    inset 0 -14px 24px -18px rgba(0,0,0,.55),
    inset 0 0 0 3px rgba(160,220,240,.06),
    0 18px 40px -12px rgba(0,0,0,.55),
    0 0 0 1px rgba(47,214,232,.16),
    0 0 34px -2px var(--tg-glow),
    0 0 64px -10px rgba(47,214,232,.35); /* owner round 2: THICKER 3D glow */
}
/* popup cards + option panels — the four families the app actually shows
   (#569 B3: + .zsx-card (Aircraft interior) and the Account page cards) */
.ff-control-panel,.ff-chart-toggle,
.ff-modal-content,
.pw-insert-card,.zsx-card,#acct-page .acct-card,
.apt-rwy-card,.apt-wx-block{
  background:linear-gradient(160deg,var(--tg-body),var(--tg-body-deep) 70%)!important;
  border:1px solid var(--tg-edge-soft)!important;
  box-shadow:var(--tg-stack)!important;
  border-radius:20px!important;
}
.apt-rwy-card,.apt-wx-block{border-radius:14px!important}
.zsx-card,#acct-page .acct-card{border-radius:14px!important}
/* #569 recheck: the Account page header strip + tab row join the family —
   teal-whisper sticky header (matches every card header), scheme ink on
   the strip's controls (they were hardcoded #e8eefb = midnight ink). */
#acct-page > div:first-of-type{
  background:linear-gradient(115deg,rgba(13,143,165,.14),rgba(47,214,232,.07)),var(--pane)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45)!important;
  border-bottom:1px solid var(--glass-brd)!important}
#acct-page > div:first-of-type b{color:var(--ink)!important}
#acct-page #acct-back{color:var(--ink)!important;border-color:var(--glass-brd)!important}
#acct-page{color:var(--ink)!important}

/* #569 B3: the Account page composes its cards with INLINE
   background:var(--acct-card) — style-attribute selector lifts them all
   onto the pane family without touching the JS composer. */
#acct-page [style*="--acct-card"]{
  background:linear-gradient(160deg,var(--tg-body),var(--tg-body-deep) 70%)!important;
  border:1px solid var(--tg-edge-soft)!important;
  box-shadow:inset 0 1px 0 var(--tg-edge), 0 8px 22px -10px rgba(10,16,32,.22)!important;
}
/* account tab chips + notes tool buttons: glass chips, active = cyan-soft */
#acct-page .acct-tab,.notes-mode,.notes-src{
  background:var(--glass)!important;border:1px solid var(--glass-brd)!important;
  color:var(--ink)!important;border-radius:10px!important}
#acct-page .acct-tab.active,.notes-mode.active,.notes-src.active{
  background:var(--cyan-soft)!important;color:var(--cyan)!important;
  border-color:var(--cyan)!important}
/* the danger chip (Sign out): schema-consistent glass, not a flat red slab */
#acct-signout{background:rgba(220,38,38,.10)!important;
  border:1px solid rgba(220,38,38,.45)!important;border-radius:10px!important}
/* the airport hub side panel keeps its sheet shape; give it the pane finish */
.apt-panel{
  background:linear-gradient(160deg,var(--tg-body),var(--tg-body-deep) 70%)!important;
  box-shadow:inset 0 1px 0 var(--tg-edge), -14px 0 50px rgba(3,8,20,.7), 0 0 22px -6px var(--tg-glow)!important;
}
/* flyouts (right-side sheets) — pane finish, keep their layout/edges */
.zsx-flyout .ff-modal-content{
  background:linear-gradient(160deg,var(--tg-body),var(--tg-body-deep) 70%)!important;
  box-shadow:inset 0 1px 0 var(--tg-edge), 0 18px 40px -12px rgba(0,0,0,.55), 0 0 22px -4px var(--tg-glow)!important;
}
/* #569 B4: chat bubbles join the pane family. The AI bubble had
   background:var(--ff-text-secondary) — a legacy TEXT token as a fill,
   the audit's slate-gray slab. Panes + scheme ink now; user bubble =
   cyan-soft chip; error bubble keeps its semantic red. */
.ff-message-content{
  background:linear-gradient(160deg,var(--tg-body),var(--tg-body-deep) 70%)!important;
  color:var(--ink)!important;border:1px solid var(--tg-edge-soft)!important;
  border-radius:14px!important;box-shadow:inset 0 1px 0 var(--tg-edge)!important}
.ff-message-content p{color:var(--ink)!important}
.ff-user-message .ff-message-content{background:var(--cyan-soft)!important;
  border-color:var(--cyan)!important}
.ff-ai-message i{background:linear-gradient(160deg,#18b6c9,#0d8fa5)!important;color:#fff!important}
.ff-ai-error .ff-message-content{background:rgba(220,38,38,.12)!important;
  border-color:rgba(220,38,38,.45)!important;color:var(--ink)!important}

/* gradient HEADER band (the hero treatment) on card/flyout/modal headers */
/* Owner pick 2026-09-14 ("teal whisper", option B): header = 12% teal wash on
   the frost pane, ink follows the theme; the saturated band read "very blue". */
.ff-modal-header,.zsx-flyout .ff-modal-header,.apt-panel-header{
  background:linear-gradient(115deg,rgba(13,143,165,.14),rgba(47,214,232,.07))!important;
  color:var(--ink)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45)!important;
  border-radius:19px 19px 0 0!important;border-bottom:none!important;
}
.apt-panel-header{border-radius:0!important}
.ff-modal-header *,.apt-panel-header .apt-panel-name{color:#fff!important;text-shadow:none}
.apt-panel-header .apt-panel-code{color:#fff!important;text-shadow:0 0 14px rgba(255,255,255,.35)}
/* selected option rows take the gradient chip (artboard .tg-opt.on) */
.ff-region-item.active,.ff-region-item[aria-selected="true"],
.plate-item.active,.rp-base-btn[style*="rgb(13, 143, 165)"]{
  background:linear-gradient(115deg,rgba(13,143,165,.55),rgba(47,214,232,.25))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3)!important;color:#fff!important;
}

/* v3 THICK GLASS — extension (owner 2026-09-14): planning window, AI chat,
   layers/option panels and their subsections all wear the pane. Additive. */
#plan-win{
  /* owner 2026-09-15 (TODO): planning card ~30% LESS transparent than the
     shared pane (its inputs/numbers need more ground). Dark base .46→.60,
     light .40→.52; theme overrides below. */
  /* #569 item 5 (owner): planning card was too transparent to read — now
     pane-level like the destination flyouts. */
  background:linear-gradient(160deg,rgba(24,44,64,.88),rgba(9,18,32,.96) 70%)!important;
  border:1px solid var(--tg-edge-soft)!important;border-radius:20px!important;
  box-shadow:var(--tg-stack)!important;color:var(--ink)!important;
}
#plan-win #pw-head{background:linear-gradient(115deg,rgba(13,143,165,.14),rgba(47,214,232,.07))!important;
  border-radius:19px 19px 0 0!important;border-bottom:none!important;color:var(--ink)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45)!important}
#plan-win #pw-head *{color:var(--ink)!important}
#plan-win .pw-card,#plan-win .pw-routebox,.pw-insert-card .pw-ins-row:hover{
  background:rgba(190,225,238,.08)!important;border-color:var(--tg-edge-soft)!important}
.ff-chat-container{
  background:linear-gradient(160deg,var(--tg-body),var(--tg-body-deep) 70%)!important;
  border:1px solid var(--tg-edge-soft)!important;border-radius:20px!important;
  box-shadow:var(--tg-stack)!important;
}
.ff-chat-container .ff-chat-header,.ff-chat-container>div:first-child{
  background:linear-gradient(115deg,rgba(13,143,165,.14),rgba(47,214,232,.07))!important;
  border-radius:19px 19px 0 0!important;color:var(--ink)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45)!important}
.ff-chat-container .ff-chat-header *{color:var(--ink)!important}

/* v3 THICK GLASS — THEME-AWARE bodies (owner 2026-09-14 evening: "black font
   hard to see on the new gray"): the pane must follow the ACTIVE theme's
   ground, not force dark. frost-white keeps a LIGHT pane (its near-black ink
   stays readable); dark themes keep the dark pane. Same specular/bloom. */
:root[data-zsx-theme=frost-white]{
  --tg-body: rgba(255,255,255,.40);
  --tg-body-deep: rgba(226,235,245,.60);
  --tg-edge: rgba(255,255,255,.95);
  --tg-edge-soft: rgba(120,170,200,.35);
  --tg-glow: rgba(13,143,165,.45);
}
/* generic text inside panes follows the theme ink; elements with explicit
   colors (freq values, badges, headers) keep theirs */
.ff-modal-content,#plan-win,.ff-chat-container,.ff-control-panel{color:var(--ink)!important}
/* the gradient header band always carries WHITE text on every theme */
/* whisper headers carry theme ink (option B) */

/* #508 plate overlay: row button + pane polish */
.plate-overlay-btn{margin-left:auto;border:1px solid var(--tg-edge-soft);background:rgba(13,143,165,.14);
  color:var(--ink)!important;border-radius:8px;padding:2px 8px;font-size:10.5px;cursor:pointer}
.plate-overlay-btn:hover{background:linear-gradient(115deg,rgba(13,143,165,.5),rgba(47,214,232,.25));color:#fff!important}
.plate-item{display:flex;align-items:center;gap:8px}
/* #508 approach mode: fix labels over the chart */
.ap-fixlab{background:transparent;border:none;box-shadow:none;color:#7b2fbe;font-weight:800;font-size:11px;text-shadow:0 1px 3px #fff,0 0 6px #fff}
.ap-fixlab i{color:#0b6f8a;font-style:normal;font-size:9.5px}

/* owner 2026-09-15: plan card +30% opacity in Frost White too */
:root[data-zsx-theme=frost-white] #plan-win{
  background:linear-gradient(160deg,rgba(255,255,255,.90),rgba(226,235,245,.96) 70%)!important;
}

/* Nav-fan label immunity (owner 2026-09-22): when the logo-nav fan is OPEN,
   pill labels ALWAYS show — no legacy class may hide them. The retired
   collapsible-sidebar flag ('zsx-sidebar-collapsed' in localStorage, purged by
   the #122 sweep) added .sidebar-collapsed, whose old rule display:none'd every
   .ff-nav-item span — prod showed icon-only pills while serving byte-identical
   code to local. Placed late in this file so it wins the cascade. */
.zsx-app.zsx-nav-open .ff-nav-item span,
.zsx-app.sidebar-collapsed.zsx-nav-open .ff-nav-item span{display:inline!important}