/* ============================================================================
   beta/motor.css — chrome for the "Motore" (powered-flight) world in the B/W beta.
   The REAL motor modules (route/gonogo/airspace/gafor/profile) build their own
   panels (#gonogo, #flightprofile, route layers, asp/gaf legends). Those panels
   are styled by the main app's /styles.css (dark "flight-instrument" surfaces),
   which the beta links AFTER this file. Here we (a) style the motor CHROME the
   beta hosts (route bar, aero toggles, asp/gaf panels) in the B/W language, and
   (b) provide the shared CSS variables the modules' panels reference
   (--bg/--bg2/--fg/--accent/--accent-volo) so /styles.css renders correctly.
   ========================================================================== */

:root{
  /* shared vars consumed by the module panels imported from /styles.css */
  --bg: rgba(20,24,30,.92); --bg2: rgba(40,46,56,.95); --fg:#eef2f6;
  --accent:#2f9bd6; --accent-volo:#e8943a;
  /* B/W motor accent (route line / active toggles in the chrome) */
  --m-ink:#111; --m-line:rgba(0,0,0,.08); --m-faint:#9a9a92;
}

/* ---- motor chrome visibility: only in the powered world ---- */
#routebar, #aerotoggles, #asp-panel, #gaf-legend, #gobtn { display:none; }
body.world-motor #routebar,
body.world-motor #aerotoggles { display:flex; }
body.world-motor #gobtn { display:flex; }
/* asp-panel / gaf-legend toggled by JS (hidden attr) — gaf-legend NEVER in free world;
   asp-panel is allowed in free ONLY when the Libero airspaces toggle is on (body.lib-asp). */
body:not(.world-motor):not(.lib-asp) #asp-panel { display:none !important; }
body:not(.world-motor) #gaf-legend { display:none !important; }
#routebar[hidden], #aerotoggles[hidden] { display:none !important; }

/* PERF (mirror the meteo-chrome rule in index.html): during pan/zoom/scrub (body.interacting, toggled by
   app.js _syncInteract) drop the backdrop-filter on the powered-world panels that stay OVER the map while it
   moves. Same rationale — blur() recomposites the whole stack each frame. The opaque-ish glass fill stays so
   the panels still read; re-enabled when the gesture settles. (The full-screen #gonogo/#flightprofile sheets
   cover the map and aren't being panned behind, so they're intentionally left out.) */
body.interacting #routebar,
body.interacting #aerotoggles,
body.interacting #liberoaero,
body.interacting #asp-panel,
body.interacting #gaf-legend{ backdrop-filter:none; -webkit-backdrop-filter:none; }

/* LIBERO airspaces-only rail (right, B/W) — only in the free world, never in motor.
   #frail (pointer/route) is now hidden in Libero, so this single airspaces toggle sits at the
   natural right-center spot (same right edge + visual language as Motore's #aerotoggles). */
#liberoaero{ display:none; }
body:not(.world-motor) #liberoaero{ position:absolute; right:max(16px,calc(16px + env(safe-area-inset-right))); top:50%; transform:translateY(-50%);
  z-index:9; display:flex; flex-direction:column; gap:5px; padding:6px; align-items:center;
  background:var(--glass,rgba(255,255,255,.80)); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--hair,rgba(0,0,0,.06)); border-radius:13px; box-shadow:0 2px 12px rgba(0,0,0,.10); }
#liberoaero button{ appearance:none; border:0; background:transparent; color:#9a9a92; width:38px; height:34px; border-radius:9px;
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:background .12s,color .12s; }
#liberoaero button svg{ width:21px; height:21px; }
#liberoaero button:hover{ background:rgba(0,0,0,.05); color:#444; }
#liberoaero button.active{ color:#fff; background:#111; }

/* =====================  ROUTE BAR (top-center, B/W glass)  ================= */
#routebar{
  --r-2:#f3f2ee; --r-3:#fff; --r-line:rgba(0,0,0,.10); --r-text:#111; --r-dim:#6a6a62; --r-faint:#9a9a92;
  --r-acc:#111; --r-acc2:#000; --r-nav:#7a5cc0; --r-fix:#1f8a5b; --r-vfr:#b84a9a;
  --r-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  position:absolute; left:50%; transform:translateX(-50%); top:max(16px,calc(16px + env(safe-area-inset-top))); z-index:12;
  flex-direction:column; gap:6px; width:min(560px,calc(100vw - 32px));
  padding:7px; background:var(--glass-strong,rgba(255,255,255,.92));
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--hair,rgba(0,0,0,.06)); border-radius:14px;
  box-shadow:0 4px 22px rgba(0,0,0,.14); }
#routerow{ position:relative; display:flex; gap:6px; align-items:stretch; }
#routetokens{ flex:1; min-width:0; display:flex; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden;
  align-items:center; gap:4px; background:var(--r-2); border:1px solid var(--r-line); border-radius:10px;
  padding:5px 8px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
#routetokens::-webkit-scrollbar{ display:none; }
#routetokens:focus-within{ border-color:#111; box-shadow:0 0 0 3px rgba(0,0,0,.08); }
#routetokens .sicon{ width:16px; height:16px; flex:none; color:var(--r-faint); margin:0 1px; }
.rtok{ flex:none; display:inline-flex; align-items:center; gap:6px; background:var(--r-3);
  border:1px solid var(--r-line); border-radius:9px; padding:5px 7px 5px 9px;
  touch-action:none; cursor:grab; }
.rtok:active{ cursor:grabbing; }
.rtok .ric{ display:grid; place-items:center; flex:none; }
.rtok.airport .ric{ color:#111; } .rtok.navaid .ric{ color:var(--r-nav); }
.rtok.fix .ric{ color:var(--r-fix); } .rtok.vfr .ric{ color:var(--r-vfr); } .rtok.coord .ric{ color:var(--r-faint); }
.rtok.gafor .ric{ color:#c98800; } .rtok.gafor{ border-color:rgba(201,136,0,.45); }
.rtok .rcode{ font-family:var(--r-mono); font-size:13.5px; font-weight:600; letter-spacing:.02em; color:var(--r-text); }
.rtok .rrm{ width:16px; height:16px; border-radius:5px; border:0; cursor:pointer; background:transparent;
  color:var(--r-faint); display:grid; place-items:center; font-size:11px; line-height:1; touch-action:auto; }
.rtok .rrm:hover{ background:rgba(0,0,0,.07); color:var(--r-text); }
.rtok.rsrc{ opacity:.34; }
.rghost{ z-index:10000; opacity:.96; cursor:grabbing; box-shadow:0 8px 22px rgba(0,0,0,.3); transform:scale(1.04);
  background:#fff; border:1px solid var(--r-line); border-radius:9px; padding:5px 7px 5px 9px; display:inline-flex; align-items:center; gap:6px; }
.rsep{ color:var(--r-faint); flex:none; display:grid; place-items:center; }
#routetokens.rdragging{ cursor:grabbing; } #routetokens.rdragging .rsep{ opacity:.3; }
.rins{ position:fixed; width:2.5px; background:#111; border-radius:2px; z-index:9999; pointer-events:none; box-shadow:0 0 6px rgba(0,0,0,.5); }
#routecaret{ flex:1 0 70px; min-width:70px; align-self:center; min-height:26px; background:transparent; border:0; outline:none;
  color:var(--r-text); font-family:var(--r-mono); font-size:13.5px; padding:0 4px; text-transform:uppercase; }
#routecaret::placeholder{ color:var(--r-faint); text-transform:none; }
#routego{ flex:none; width:46px; border:0; border-radius:11px; cursor:pointer; background:#111; color:#fff;
  display:grid; place-items:center; box-shadow:0 2px 8px rgba(0,0,0,.18); }
#routego svg{ width:20px; height:20px; }
.rclear{ flex:none; align-self:stretch; width:32px; background:var(--r-2); border:1px solid var(--r-line); border-radius:10px;
  cursor:pointer; color:var(--r-faint); display:grid; place-items:center; }
.rclear:hover{ color:#111; background:#fff; }
.rclear[hidden]{ display:none; }
.rprof{ flex:none; align-self:stretch; width:36px; background:var(--r-2); border:1px solid var(--r-line); border-radius:10px;
  cursor:pointer; color:#333; display:grid; place-items:center; }
.rprof:hover{ color:#fff; background:#111; border-color:#111; }
.rprof[hidden]{ display:none; }
#routefb{ font-size:11px; color:var(--r-dim); line-height:1.3; padding:0 2px; }
#routefb:empty{ display:none; }
#routecredit{ font-size:9px; color:var(--r-faint); line-height:1.25; padding:0 3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ⓘ Fonti/licenze popover (Issue 5): the route bar no longer shows the "Rotta indicativa… + sources" line as a
   big bar under the input. relocateRouteCredit() (app.js) removes that line and adds a small ⓘ button to the
   route strip that toggles this popover, which keeps the license-required data attributions + the disclaimer
   PRESENT and VISIBLE (the bottom #attrib line is hidden behind the sheet on mobile). Glass B/N card. */
#routeinfo-pop{ position:fixed; z-index:30; max-width:min(300px,calc(100vw - 20px)); padding:10px 12px;
  background:var(--glass-strong,rgba(255,255,255,.94)); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid var(--hair,rgba(0,0,0,.06)); border-radius:12px; box-shadow:0 14px 44px rgba(0,0,0,.18);
  color:var(--ink2,#3a3a3a); font-family:'IBM Plex Sans','Helvetica Neue',Helvetica,Arial,sans-serif; }
#routeinfo-pop[hidden]{ display:none; }
#routeinfo-pop .ri-h{ font-size:11.5px; font-weight:600; color:#111; line-height:1.4; margin-bottom:5px; }
#routeinfo-pop .ri-s{ font-size:10.5px; line-height:1.45; color:var(--m-faint,#6a6a62); }
#routeinfo-pop .ri-s + .ri-s{ margin-top:3px; }

/* autocomplete dropdown (under the chip row) */
#searchresults{ position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:14; max-height:46vh; overflow-y:auto;
  background:#fff; border:1px solid var(--r-line); border-radius:11px; padding:5px;
  box-shadow:0 16px 40px -16px rgba(0,0,0,.3); display:flex; flex-direction:column; gap:2px; }
#searchresults[hidden]{ display:none; }
.sr-row{ appearance:none; border:0; background:transparent; color:var(--r-text); text-align:left; padding:8px 10px;
  border-radius:8px; font-size:13.5px; font-weight:600; cursor:pointer; font-family:var(--r-mono); display:flex; align-items:center; gap:8px; }
.sr-row:hover{ background:var(--r-2); }
.sr-row .sr-k{ margin-left:auto; font-size:10.5px; color:var(--r-faint); font-weight:400; font-family:'IBM Plex Sans',sans-serif; }
.sr-gaf{ color:#a87400; font-family:'IBM Plex Sans',sans-serif !important; }
.sr-gaf .sr-k{ max-width:54%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* =====================  AERO TOGGLES (right rail, B/W)  ==================== */
#aerotoggles{ position:absolute; top:50%; right:max(16px,calc(16px + env(safe-area-inset-right))); transform:translateY(-50%); z-index:9;
  flex-direction:column; gap:5px; padding:6px; align-items:center;
  background:var(--glass,rgba(255,255,255,.80)); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--hair,rgba(0,0,0,.06)); border-radius:13px; box-shadow:0 2px 12px rgba(0,0,0,.10); }
#aerotoggles button{ appearance:none; border:0; background:transparent; color:#9a9a92; width:38px; height:34px; border-radius:9px;
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:background .12s,color .12s; }
#aerotoggles button svg{ width:21px; height:21px; }
#aerotoggles button:hover{ background:rgba(0,0,0,.05); color:#444; }
#aerotoggles button.active{ color:#fff; background:#111; }

/* GO/NO-GO entry button (top-right area, B/W) */
#gobtn{ position:absolute; right:max(16px,calc(16px + env(safe-area-inset-right))); top:calc(62px + env(safe-area-inset-top)); z-index:9; align-items:center; gap:7px;
  height:38px; padding:0 13px 0 11px; cursor:pointer;
  background:#111; color:#fff; border:0; border-radius:10px; box-shadow:0 2px 12px rgba(0,0,0,.18);
  font-family:'IBM Plex Sans',sans-serif; font-size:12.5px; font-weight:600; }
#gobtn svg{ width:17px; height:17px; }
#gobtn:hover{ background:#000; }

/* =================  AUTO-ROUTING proposal banner (router.js, B/W)  ========
   router.js builds <div id="rtp-banner" class="panel"> with an Applica/Scarta
   row (.rtp-btns > .rtp-ok / .rtp-no) and appends it to <body>. The beta never
   loads a `.panel` rule (theme-base.css isn't linked here) and had no #rtp-banner
   rule, so the banner rendered unstyled+transparent at body-top, full-width,
   making "Applica" unreachable → the proposed route could be SEEN (dashed map
   layer) but never ACCEPTED. Give it the same float-above-the-timebar placement
   the main site uses, in the warm-white B/N language. */
#rtp-banner{ position:fixed; left:50%; transform:translateX(-50%); bottom:calc(16px + env(safe-area-inset-bottom)); z-index:64;
  max-width:min(480px, calc(100vw - 24px)); padding:11px 13px; font-size:12.5px; line-height:1.45; color:var(--ink2,#3a3a3a);
  background:var(--glass-strong,rgba(255,255,255,.94)); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--hair,rgba(0,0,0,.06)); border-radius:13px; box-shadow:0 14px 44px rgba(0,0,0,.18); }
#rtp-banner b{ color:#111; font-weight:600; }
.rtp-btns{ display:flex; gap:8px; margin-top:9px; }
.rtp-btns button{ flex:1 1 0; appearance:none; padding:8px 10px; border-radius:9px; border:1px solid var(--hair2,rgba(0,0,0,.08));
  background:rgba(0,0,0,.04); color:var(--ink2,#3a3a3a); font:inherit; font-weight:600; cursor:pointer; transition:background .12s,color .12s; }
.rtp-btns button:hover{ background:rgba(0,0,0,.07); color:#111; }
.rtp-btns .rtp-ok{ background:#111; border-color:transparent; color:#fff; }
.rtp-btns .rtp-ok:hover{ background:#000; color:#fff; }

/* =================  AIRSPACE declutter panel + legend (B/W)  ============== */
#asp-panel{ position:absolute; top:calc(108px + env(safe-area-inset-top)); right:max(16px,calc(16px + env(safe-area-inset-right))); width:166px; z-index:8;
  padding:10px 11px 11px; flex-direction:column; gap:7px;
  background:var(--glass-strong,rgba(255,255,255,.92)); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--hair,rgba(0,0,0,.06)); border-radius:12px; box-shadow:0 4px 18px rgba(0,0,0,.12); }
#asp-panel:not([hidden]){ display:flex; }
#asp-panel[hidden]{ display:none; }
#asp-panel .asp-row{ display:flex; justify-content:space-between; align-items:baseline; font-size:11px; color:#555; }
#asp-panel .asp-row b{ font-size:12px; color:#111; font-weight:700; }
#asp-alt{ width:100%; margin:0; accent-color:#111; cursor:pointer; }
.asp-hint{ font-size:9.5px; color:#9a9a92; margin-top:1px; }
.asp-leg{ display:flex; flex-direction:column; gap:2px; margin-top:2px; }
.asp-leg .asp-li{ display:flex; align-items:center; gap:7px; font-size:10.5px; color:#333; line-height:1.15;
  appearance:none; border:0; background:none; text-align:left; padding:2px 3px; width:100%; border-radius:5px; cursor:pointer; }
.asp-leg .asp-li:hover{ background:rgba(0,0,0,.05); }
.asp-leg .asp-li.off{ opacity:.34; text-decoration:line-through; }
.asp-leg .asp-li i{ width:14px; height:9px; border-radius:2px; flex:0 0 auto; box-shadow:inset 0 0 0 1px rgba(0,0,0,.25); }

/* GAFOR legend pill (top-center, under the route bar) */
#gaf-legend{ position:absolute; top:calc(118px + env(safe-area-inset-top)); left:50%; transform:translateX(-50%); z-index:8;
  align-items:center; gap:11px; padding:6px 13px; border-radius:20px;
  background:var(--glass-strong,rgba(255,255,255,.92)); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--hair,rgba(0,0,0,.06)); box-shadow:0 4px 18px rgba(0,0,0,.12); color:#222; }
#gaf-legend:not([hidden]){ display:flex; }
#gaf-legend[hidden]{ display:none; }
.gaf-lh{ font-size:10px; color:#888; font-weight:800; letter-spacing:.05em; }
.gaf-li{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px; }
.gaf-li i{ width:9px; height:9px; border-radius:50%; flex:none; }

/* route rubber-band popup (drag a leg) — B/W */
.rb-popup .maplibregl-popup-content{ background:#fff; color:#111; border-radius:10px; padding:7px; box-shadow:0 4px 18px rgba(0,0,0,.25); }
.rb-popup .maplibregl-popup-tip{ display:none; }
.rb-pop{ display:flex; flex-direction:column; gap:3px; min-width:150px; }
.rb-h{ font-size:11px; color:#888; padding:1px 4px 3px; }
.rb-row{ appearance:none; border:0; background:#f3f2ee; color:#111; text-align:left; padding:6px 9px; border-radius:7px;
  font-size:13px; font-weight:600; cursor:pointer; font-family:'IBM Plex Mono',Menlo,monospace; }
.rb-row:hover{ background:#111; color:#fff; }
.rb-row .rb-k{ font-weight:400; color:#888; font-size:11px; font-family:'IBM Plex Sans',sans-serif; }
.rb-row:hover .rb-k{ color:rgba(255,255,255,.7); }

/* search-result pulse marker (GAFOR search flyTo) */
.search-hl{ width:20px; height:20px; border-radius:50%; border:2.5px solid #111; box-shadow:0 0 0 2px rgba(255,255,255,.85); animation:srpulse 1.1s ease-out infinite; }
@keyframes srpulse{ 0%{ transform:scale(.6); opacity:1; } 100%{ transform:scale(1.6); opacity:.15; } }

/* scrub marker (tap on profile -> where I'd be) */
.scrub-mk{ width:15px; height:15px; border-radius:50%; background:#111; border:2.5px solid #fff;
  box-shadow:0 0 0 4px rgba(0,0,0,.16), 0 1px 5px rgba(0,0,0,.4); pointer-events:none; }

/* =====================  MOBILE (≤760px)  ================================== */
@media (max-width:760px){
  /* iOS PWA notch: the whole TOP cluster (route bar + GO/NO-GO + toggle column) shifts down by
     env(safe-area-inset-top) so it sits below the notch; the map underlaps it edge-to-edge. The
     side rails get the L/R inset for a landscape notch. env()=0 without a notch → values unchanged. */
  /* ---- ROUTE BAR → ITS OWN SECOND ROW, FULL WIDTH -------------------------------------------------------
     The user disliked the route bar SHARING the second row with the IT/EN toggle (cramped). New 3-row layout:
       row 1 = corner buttons only (logo left + #topright GPS/download right),
       row 2 = the route bar ALONE, edge-to-edge (left:10 → right:10, 38px tall),
       row 3 = the IT/EN toggle on its own line below (#langtog, top:104), right-aligned.
     So the route bar now spans the WHOLE second row (no longer reserving room on the right for the pill). The
     chip/search row still scrolls horizontally inside this slot (the tokens row has overflow-x:auto) with a
     sticky GO button (#routego) pinned right. Safe-area insets respected; the old disclaimer/credit line is
     pulled out of the bar in JS (relocateRouteCredit) so nothing stacks below. The floating GO/NO-GO pill
     (#gobtn) is removed on mobile (see below) — it didn't act as a button. */
  #routebar{ top:max(58px,calc(58px + env(safe-area-inset-top))); transform:none; width:auto;
    left:max(10px,calc(10px + env(safe-area-inset-left)));
    right:max(10px,calc(10px + env(safe-area-inset-right)));
    padding:0; gap:0; background:transparent; border:0; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; }
  /* the input/chips/buttons row is the WHOLE bar now; pin it to the 38px corner-button height. The row itself
     scrolls horizontally so that, when a route's chips + action buttons exceed the narrow top-strip slot, every
     control stays reachable (empty route = input+gear+GO+ⓘ fit without scrolling). */
  #routebar #routerow{ height:38px; align-items:stretch; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  #routebar #routerow::-webkit-scrollbar{ display:none; }
  /* the search/chips box keeps a glassy card look (the bar itself is now transparent) + a usable min width so
     the input never collapses to nothing behind the chips. */
  #routebar #routetokens{ flex:1 1 92px; min-width:92px;
    background:var(--glass-strong,rgba(255,255,255,.92)); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
    box-shadow:0 2px 12px rgba(0,0,0,.10); }
  /* the action buttons get the same glassy chip surface so the toolbar reads as one row of buttons over the map */
  #routebar #routego, #routebar .rprof, #routebar .rclear{ flex:none;
    background:var(--glass-strong,rgba(255,255,255,.92)); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); box-shadow:0 2px 12px rgba(0,0,0,.10); }
  /* GO stays pinned to the right of the slot (sticky) so "traccia rotta / valuta" is always reachable even when
     a long chip list pushes the action buttons into the horizontal scroll. */
  #routebar #routego{ background:#111; position:sticky; right:0; z-index:2; }
  /* the autocomplete dropdown hangs from the route bar, full bleed across the viewport width (it was anchored
     to the old wide bar). Re-anchor it to the viewport so results aren't clipped to the narrow slot. The bar is
     now on the SECOND row (top:58, bottom ≈96) so the dropdown drops just BELOW it (~100px), not over it. */
  #routebar #searchresults{ position:fixed; top:max(100px,calc(100px + env(safe-area-inset-top))); left:max(10px,calc(10px + env(safe-area-inset-left))); right:max(10px,calc(10px + env(safe-area-inset-right))); }
  /* feedback line (#routefb, transient "saltati…/loading") floats just BELOW the strip so it never grows the
     toolbar height; small + glassy so it reads over the map. Empty → hidden (existing :empty rule). */
  #routebar #routefb{ position:absolute; top:calc(100% + 5px); left:0; right:0; padding:5px 9px; border-radius:9px;
    background:var(--glass-strong,rgba(255,255,255,.92)); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
    border:1px solid var(--hair,rgba(0,0,0,.06)); box-shadow:0 4px 18px rgba(0,0,0,.12); font-size:11px; }
  /* AERO TOGGLES — VERTICAL right-edge column (not a horizontal strip eating the width).
     Stacked under the GO/NO-GO button, anchored top so it clears the route bar (top) and
     stays well above the #alt/#world rails (bottom:330) + the bottom sheet. ~6 icons high. */
  #aerotoggles{ right:max(8px,calc(8px + env(safe-area-inset-right))); left:auto; top:calc(150px + env(safe-area-inset-top)); bottom:auto; transform:none; flex-direction:column;
    gap:5px; padding:5px; }
  #aerotoggles button{ width:36px; height:32px; }
  #aerotoggles button svg{ width:20px; height:20px; }
  /* ---- WORLD TOGGLE / right-rail overlap fix --------------------------------------------------------------
     The reported overlap is the toggle rail sitting ON TOP of the Libero/Motore pill (#world, lower-right at
     inline-style bottom:330). Root cause was the rail anchoring: the Libero rail (#liberoaero) was viewport-
     CENTERED (top:50%) and dipped into the lower-right where #world lives; the Motore rail (#aerotoggles) is a
     tall top-anchored column. The fix keeps #world exactly where it is (lower-right, inline-style — also baked
     into the live root, which we must not touch) and instead anchors BOTH rails to the UPPER-right band so they
     end well above #world: #liberoaero is now top-anchored (see below), #aerotoggles already is (top:150). To
     make the gap robust on shorter phones too, we pin a HARD ceiling on the toggle-rail height — the Motore rail
     scrolls internally rather than growing down into #world — so rail-bottom always stays above the pill. */
  /* ceiling = #world top (100% − 330 bottom − 71 toggle height − 16 gap) − rail top (150 + notch). Natural rail
     height (~227px for 6 icons) fits uncapped at any realistic phone height; the cap only bites on short
     viewports, where the rail scrolls instead of colliding with #world.
     ⚠️ Use 100% (of the containing block #app), NOT 100vh. #aerotoggles and #world share the SAME positioned
     ancestor (#app, position:fixed inset:0), so a percentage cap tracks the EXACT frame #world's bottom:330 is
     measured against. 100vh on iOS Safari is the LARGE (toolbar-hidden) viewport, which is TALLER than the
     visible area while the toolbars show — so a 100vh cap left the rail uncapped (bottom ~379) while #world,
     anchored to the shorter visible #app, rose up to meet it → the ~10px overlap the user re-reported (it never
     showed in a chromeless preview, where 100vh == visible height). 100% can't diverge from #world. */
  #aerotoggles{ max-height:calc(100% - 567px - env(safe-area-inset-top)); overflow-y:auto; -webkit-overflow-scrolling:touch; }
  #aerotoggles::-webkit-scrollbar{ display:none; }
  /* GO/NO-GO floating pill: REMOVED on mobile (user: "it doesn't work as a button"). Hidden hard so it can't
     reappear (beats both the desktop `body.world-motor #gobtn{display:flex}` rule and app.js's inline
     style.display='flex' on world-enter — !important wins over inline). The route bar now owns the second row
     edge-to-edge and the toggle rail/#world keep their places, so nothing reflows into the freed slot.
     NOTE: with the pill gone, Motore has no on-screen entry point to the GO/NO-GO sheet on mobile. */
  #gobtn{ display:none !important; }
  /* airspace declutter panel opens to the LEFT of the vertical toggle column (clear it with a gap).
     right:78 (was 66) so the panel's RIGHT edge clears the #world toggle's LEFT edge (world is bottom-anchored
     at bottom:330 right; when iOS shows its toolbar #app shrinks and #world rises ~130px into this top-anchored
     panel's band — at right:66 the panel right edge (vw−66) overlapped world's left (vw−74) by ~8px. Pulling it
     10px further left removes that horizontal sliver so it can NEVER intersect #world regardless of toolbar
     state. Still clears the aero rail on its right (right:8) by a comfortable gap. A max-height keeps the
     declutter slider + legend from ever running off a short phone (internal scroll instead). */
  #asp-panel{ right:max(78px,calc(78px + env(safe-area-inset-right))); left:auto; top:calc(150px + env(safe-area-inset-top)); bottom:auto; width:150px;
    max-height:calc(100% - 150px - 96px - env(safe-area-inset-top)); overflow-y:auto; -webkit-overflow-scrolling:touch; }
  #asp-panel::-webkit-scrollbar{ display:none; }
  /* GAFOR legend pill: a horizontal pill that the inline rule centers at top:104 — but at that row its right
     edge grazes the IT/EN #langtog (top:104, far-right) on narrow phones, and its left edge would sit over the
     #alt ladder (left:10–50, which now starts at top:104 too). Pin it into the FREE central band between them
     (left:54 → right:84) so it clears BOTH the ladder (left) and the language pill (right); content stays
     centered inside. Different row from #asp-panel (top:150) so the two aero legends never collide either. */
  #gaf-legend{ top:calc(104px + env(safe-area-inset-top)); left:max(54px,calc(54px + env(safe-area-inset-left))); right:max(84px,calc(84px + env(safe-area-inset-right))); transform:none; width:auto; justify-content:center; }
  /* Libero airspaces rail: vertical right-edge column too (single icon). FIXED-TOP (matches the Motore
     #aerotoggles band) instead of top:50% — a viewport-centered rail dips into the #world toggle (bottom:330)
     on short phones, which is the reported overlap. Top-anchoring keeps it in the upper-right band, height-
     independent, so it always clears #world (which lives in the lower-right).
     top:150 (was 108) so it sits BELOW the IT/EN #langtog (top:104, far-right, ~38px tall → bottom ~142): at
     top:108 the rail's top-right corner overlapped the language pill (~1700px²) in EVERY Libero state. 150
     matches Motore's #aerotoggles band (which never collides with #langtog), still well above #world. */
  body:not(.world-motor) #liberoaero{ right:max(8px,calc(8px + env(safe-area-inset-right))); left:auto; top:calc(150px + env(safe-area-inset-top)); bottom:auto; transform:none; flex-direction:column; }

  /* ---- LIVE-DATA param pill (#liveopts) placement fix ----------------------------------------------------
     The inline-style #liveopts had NO mobile rule, so on phones it fell in-flow INSIDE the bottom sheet and
     (flex-wrap:wrap) stacked the 6 params onto TWO rows piled over the overlay bar. Give it the exact same
     float-above-the-bar treatment the cloud-layer pill (#cloudopts) already has on mobile: absolutely
     positioned, centered, sitting 10px ABOVE the sheet, single row that scrolls horizontally if the params
     don't fit — never wrapping over the bar. Lives here (motor.css) rather than the inline <style> because
     this is the only stylesheet the live root index also loads (its inline <style> is a frozen copy). The
     `body` prefix + .show out-specify the inline `#liveopts.show{flex-wrap:wrap}` so nowrap+scroll win. */
  #liveopts{ position:absolute; left:50%; transform:translateX(-50%); bottom:calc(100% + 10px); z-index:11;
    max-width:calc(100vw - 24px); overflow-x:auto; -webkit-overflow-scrolling:touch; }
  #liveopts::-webkit-scrollbar{ display:none; }
  body #liveopts.show{ flex-wrap:nowrap; max-width:calc(100vw - 24px); }

  /* ---- ALTITUDE LADDER (#alt) top-clear anchor — THE reported "#alt over #logo" bug ----------------------------
     The inline rule anchors the ladder at bottom:330 (top:auto) with NO height bound. A full wind/onda/dinamica
     level list makes the ladder ~435px tall, so its TOP climbs to ~y79 — straight through the route bar (row 2,
     top58–96) and, the moment iOS shows its toolbar (which shrinks the fixed #app so every bottom-anchored child
     rises ~130px), straight over the top-left #logo.
       FIX: pin a FIXED PIXEL TOP floor (104, the row-3 band of #langtog / #searchresults) AND keep bottom:330, so
     the ladder occupies the band [104 .. #app-bottom−330] and stretches to fit (height:auto). The top is a fixed
     pixel offset from the #app TOP, which is STABLE whether or not iOS shows its toolbar (only the BOTTOM of #app
     moves when the toolbar appears) — so unlike a %/vh height cap (which is measured against the large toolbar-
     hidden box and so fails to bite in exactly the toolbar-on case), this can NEVER let the ladder climb into the
     top chrome. A short visible area just shortens the ladder from the bottom. Works in both worlds.
     `#app #alt` out-specifies the inline mobile `#alt{top:auto;…}` (motor.css is linked before that inline sheet,
     so a plain `#alt` here would lose). The track flex-shrinks (min-height:0) to fit; overflow hidden is a guard. */
  #app #alt{ top:calc(104px + env(safe-area-inset-top)); bottom:330px; transform:none; height:auto; max-height:none; overflow:hidden; }
  #app #alt .track{ min-height:0; }
  /* collapsed sheet drops the ladder's BOTTOM to 64; keep the same 104 top floor so the now-taller ladder still
     can't enter the top band. `body.sheet-collapsed #app #alt` (0,3,0) beats the `#app #alt` (0,2,0) bottom:330. */
  body.sheet-collapsed #app #alt{ bottom:64px; top:calc(104px + env(safe-area-inset-top)); }
}

/* ===========================================================================
   B/W RESTYLE of the panels the real motor modules build for themselves:
   createProfile -> #flightprofile, createGonogo -> #gonogo / #gg-bigchart /
   #acsettings. Same selectors + DOM structure as the main app's /styles.css
   (so functionality is untouched), but re-skinned to the beta's warm-white
   "Redesign B/N" language: translucent white cards, near-black ink, IBM Plex
   Mono uppercase gray captions, hairline dividers. The semantic GO/NO-GO
   colours (--gg-go / --gg-cau / --gg-no) are KEPT — only re-tinted a touch
   deeper so green/amber/red still read clearly on the light background.
   Self-scoped (own gg/s/fp-prefixed vars + motor-only ids) so they never
   touch the rest of the beta chrome.
   ========================================================================== */

/* --- profile cross-section (#flightprofile / #fp-* / .scrub-mk) — warm-white sheet --- */
#flightprofile { position:fixed; left:0; right:0; bottom:0; z-index:30; height:min(240px,42vh);
  background:var(--glass-strong,rgba(255,255,255,.94)); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--hair,rgba(0,0,0,.06)); box-shadow:0 -10px 30px -10px rgba(0,0,0,.22); display:flex; flex-direction:column; }
#flightprofile[hidden] { display:none; }
#fp-head { display:flex; align-items:center; flex-wrap:wrap; column-gap:12px; row-gap:5px; padding:9px 14px; border-bottom:1px solid var(--hair,rgba(0,0,0,.07)); flex:none; }
#fp-title { font-size:12px; color:#111; font-weight:600; order:1; flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#fp-title i { font-weight:400; color:#9a9a92; font-style:normal; }
#fp-legend { order:2; flex:0 0 auto; display:inline-flex; align-items:center; gap:13px; font-size:11px; font-weight:600; color:#555; }
#fp-legend .cl { display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
#fp-legend .cl i { width:11px; height:11px; border-radius:3px; flex:none; box-shadow:0 0 0 1px rgba(0,0,0,.22) inset; }
#fp-legend .cl-lo i { background:rgb(244,244,240); box-shadow:0 0 0 1px rgba(0,0,0,.3) inset; } /* nubi basse — bianco (bordo per leggibilità su carta chiara) */
#fp-legend .cl-mid i { background:rgb(232,148,42); }     /* nubi medie — arancio (il blu è degli spazi aerei) */
#fp-legend .cl-hi i { background:rgb(224,184,40); }      /* nubi alte — giallo */
#fp-legend .cl-cu i { background:rgb(246,228,190); box-shadow:0 0 0 1px rgb(190,135,55) inset; }  /* CUMULI — crema con bordo caldo */
#fp-close { appearance:none; border:0; background:rgba(0,0,0,.05); color:#444; width:26px; height:26px; border-radius:7px; cursor:pointer; font-size:13px; line-height:1; order:3; flex:none; transition:background .12s,color .12s; }
#fp-close:hover { background:#111; color:#fff; }
/* marker "dove sarei con l'aereo" toccando un punto del profilo verticale — pin B/N */
.scrub-mk { width:15px; height:15px; border-radius:50%; background:#111; border:2.5px solid #fff; box-shadow:0 0 0 4px rgba(0,0,0,.16), 0 1px 5px rgba(0,0,0,.4); pointer-events:none; }
#fp-canvas { flex:1; width:100%; min-height:0; display:block; }

/* --- GO/NO-GO panel + big chart + aircraft settings (#gonogo / .gg-* / .acs-*) — warm-white B/N --- */
#gonogo {
  --gg-panel:rgba(255,255,255,.94); --gg-2:#f3f2ee; --gg-3:#e9e7e1; --gg-line:rgba(0,0,0,.08); --gg-line2:rgba(0,0,0,.06);
  --gg-text:#111; --gg-dim:#5f5f58; --gg-faint:#9a9a92; --gg-acc:#111; --gg-acc2:#000;
  /* semantici: verdi/ambra/rossi più profondi per leggere su carta chiara */
  --gg-go:#1f9d57; --gg-cau:#c47f0a; --gg-no:#d83a37; --gg-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  /* COLONNA DOCK A DESTRA (desktop): lascia la mappa visibile a sinistra; pannello flottante elegante, niente full-screen */
  position:fixed; top:74px; right:10px; bottom:10px; left:auto; width:min(412px,38vw); z-index:35;
  overflow-y:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--hair,rgba(0,0,0,.06)); border-radius:16px;
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  box-shadow:0 14px 44px rgba(0,0,0,.18); will-change:transform; transform:translateZ(0); contain:paint;
  background:var(--gg-panel); color:var(--gg-text); font-size:13px; line-height:1.45;
  font-family:'IBM Plex Sans','Helvetica Neue',Helvetica,Arial,sans-serif; }
#gonogo[hidden] { display:none; }
.gg-chartwrap { position:relative; height:210px; border:1px solid var(--gg-line); border-radius:12px; overflow:hidden; background:#fff; margin-top:8px; }
#gg-chart { width:100%; height:100%; display:block; }
#gg-chartsec[hidden], #gg-stripsec[hidden] { display:none; }
#gonogo .gg-head { display:flex; align-items:center; gap:11px; padding:15px 17px; border-bottom:1px solid var(--gg-line); position:sticky; top:0; background:var(--gg-panel); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); z-index:2; }
#gonogo .gg-glyph { width:32px; height:32px; border-radius:9px; background:rgba(0,0,0,.04); border:1px solid var(--gg-line); display:grid; place-items:center; flex:none; color:#111; }
#gonogo .gg-h { font-size:15.5px; font-weight:700; margin:0; letter-spacing:-.01em; }
#gonogo .gg-hsub { font-family:var(--gg-mono); font-size:10.5px; color:var(--gg-faint); letter-spacing:.08em; text-transform:uppercase; margin-top:2px; }
#gonogo .gg-x { margin-left:auto; width:30px; height:30px; border-radius:8px; flex:none; background:transparent; border:1px solid var(--gg-line); color:var(--gg-dim); display:grid; place-items:center; cursor:pointer; font-size:15px; line-height:1; transition:background .12s,color .12s; }
#gonogo .gg-x:hover { background:#111; color:#fff; }
#gonogo .gg-body { padding:16px 17px 20px; display:flex; flex-direction:column; gap:15px; }
/* riga label-grafico + bottone "ingrandisci" */
.gg-slr { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.gg-xpd { width:28px; height:28px; border-radius:8px; background:var(--gg-2); border:1px solid var(--gg-line); color:var(--gg-dim); display:grid; place-items:center; cursor:pointer; flex:none; transition:background .12s,color .12s; }
.gg-xpd:hover { background:#111; color:#fff; border-color:#111; }
/* VISTA INGRANDITA del profilo auto-quota: colonna a SINISTRA del pannello su desktop (sulla mappa), full-screen su mobile */
#gg-bigchart {
  --gg-panel:rgba(255,255,255,.94); --gg-2:#f3f2ee; --gg-3:#e9e7e1; --gg-line:rgba(0,0,0,.08); --gg-line2:rgba(0,0,0,.06);
  --gg-text:#111; --gg-dim:#5f5f58; --gg-faint:#9a9a92; --gg-acc:#111; --gg-acc2:#000;
  --gg-go:#1f9d57; --gg-cau:#c47f0a; --gg-no:#d83a37; --gg-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  position:fixed; top:74px; left:10px; bottom:10px; right:calc(min(412px,38vw) + 20px); z-index:36;
  display:flex; flex-direction:column; overflow:hidden; background:var(--gg-panel); color:var(--gg-text);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--hair,rgba(0,0,0,.06)); border-radius:16px; box-shadow:0 14px 44px rgba(0,0,0,.18);
  will-change:transform; transform:translateZ(0); contain:paint; font-size:13px;
  font-family:'IBM Plex Sans','Helvetica Neue',Helvetica,Arial,sans-serif; }
#gg-bigchart[hidden] { display:none; }
.ggb-head { display:flex; align-items:center; gap:11px; padding:13px 15px; border-bottom:1px solid var(--gg-line); flex:none; }
.ggb-h { font-size:14px; font-weight:600; letter-spacing:-.01em; }
.ggb-x { margin-left:auto; width:30px; height:30px; border-radius:8px; flex:none; background:transparent; border:1px solid var(--gg-line); color:var(--gg-dim); display:grid; place-items:center; cursor:pointer; font-size:15px; line-height:1; transition:background .12s,color .12s; }
.ggb-x:hover { background:#111; color:#fff; }
.ggb-wrap { flex:1 1 auto; position:relative; min-height:120px; background:#fff; }
#gg-bigcanvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
.ggb-foot { flex:none; max-height:34%; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:11px 15px 14px; border-top:1px solid var(--gg-line); }
#gonogo .gg-sl { font-family:var(--gg-mono); font-size:10.5px; font-weight:500; letter-spacing:.13em; text-transform:uppercase; color:var(--gg-faint); margin:0 0 7px; }
.gg-cfg { background:var(--gg-2); border:1px solid var(--gg-line); border-radius:12px; padding:15px; display:flex; flex-direction:column; gap:13px; }
.gg-row { display:flex; gap:16px; flex-wrap:wrap; }
.gg-fg { display:flex; flex-direction:column; gap:6px; }
.gg-fg > .gg-k, .gg-ipt .gg-k { font-size:12px; color:var(--gg-dim); }
.gg-seg { display:inline-flex; background:#fff; border:1px solid var(--gg-line); border-radius:9px; padding:3px; gap:2px; }
.gg-seg button { font:inherit; font-size:12.5px; font-weight:600; padding:6px 13px; border-radius:6px; border:0; cursor:pointer; background:transparent; color:var(--gg-dim); transition:all .15s; }
.gg-seg button:hover { color:var(--gg-text); }
.gg-seg button.on { background:#111; color:#fff; }
.gg-seg[data-k="fiki"] button[data-v="1"].on { background:var(--gg-cau); color:#fff; }   /* solo FIKI in ambra (capacita' antighiaccio); "No" resta nero neutro */
.gg-nums { display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.gg-nums .full { grid-column:1 / -1; }
.gg-ipt { display:flex; flex-direction:column; min-width:0; }   /* min-width:0 -> i campi numerici NON sforano la colonna (default grid item = min-content dell'input) */
.gg-box { min-width:0; }
.gg-num { width:0; }   /* parte da 0 e cresce via flex -> mai più largo della colonna */
.gg-ipt .gg-k { margin-bottom:6px; }
.gg-box { display:flex; align-items:center; background:#fff; border:1px solid var(--gg-line); border-radius:9px; padding:0 12px; height:42px; transition:border-color .15s, box-shadow .15s; }
.gg-box:focus-within { border-color:#111; box-shadow:0 0 0 3px rgba(0,0,0,.08); }
.gg-num { flex:1; min-width:0; background:transparent; border:0; outline:none; color:var(--gg-text); font-family:var(--gg-mono); font-size:16px; font-weight:500; }
.gg-unit { font-family:var(--gg-mono); font-size:12.5px; color:var(--gg-faint); margin-left:6px; }
.gg-hint { display:flex; gap:8px; font-size:12px; line-height:1.45; color:var(--gg-dim); background:rgba(0,0,0,.03); border:1px solid var(--gg-line); border-radius:9px; padding:9px 11px; }
.gg-hint svg { flex:none; color:#111; margin-top:1px; }
/* ===== Pannello IMPOSTAZIONI profilo aereo (modale minimale) — warm-white B/N ===== */
#acsettings {
  --s-panel:rgba(255,255,255,.96); --s-2:#f3f2ee; --s-3:#e9e7e1; --s-line:rgba(0,0,0,.08); --s-line2:rgba(0,0,0,.06);
  --s-text:#111; --s-dim:#5f5f58; --s-faint:#9a9a92; --s-acc:#111; --s-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  position:fixed; inset:0; z-index:40; display:grid; place-items:center; padding:18px;
  background:rgba(40,40,38,.34); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  opacity:0; transition:opacity .18s ease; font-family:'IBM Plex Sans','Helvetica Neue',Helvetica,Arial,sans-serif; }
#acsettings.on { opacity:1; }
#acsettings[hidden] { display:none; }
.acs-card { width:min(390px,100%); background:var(--s-panel); border:1px solid var(--s-line); border-radius:18px;
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  box-shadow:0 30px 70px -24px rgba(0,0,0,.45); color:var(--s-text); overflow:hidden;
  transform:translateY(10px) scale(.984); transition:transform .22s cubic-bezier(.2,.85,.25,1); }
#acsettings.on .acs-card { transform:none; }
.acs-head { display:flex; align-items:center; gap:12px; padding:16px 18px; border-bottom:1px solid var(--s-line); }
.acs-glyph { width:34px; height:34px; border-radius:10px; background:rgba(0,0,0,.04); border:1px solid var(--s-line); display:grid; place-items:center; flex:none; color:#111; }
.acs-h { font-size:16px; font-weight:700; letter-spacing:-.01em; }
.acs-hsub { font-family:var(--s-mono); font-size:10px; color:var(--s-faint); letter-spacing:.1em; text-transform:uppercase; margin-top:2px; }
.acs-x { margin-left:auto; width:30px; height:30px; border-radius:8px; flex:none; background:transparent; border:1px solid var(--s-line); color:var(--s-dim); display:grid; place-items:center; cursor:pointer; font-size:14px; line-height:1; transition:background .12s,color .12s; }
.acs-x:hover { background:#111; color:#fff; }
.acs-list { padding:6px 9px; display:flex; flex-direction:column; }
.acs-row { display:flex; align-items:center; gap:13px; padding:13px 8px; }
.acs-row + .acs-row { border-top:1px solid var(--s-line2); }
.acs-ic { width:34px; height:34px; border-radius:9px; background:var(--s-2); display:grid; place-items:center; flex:none; color:var(--s-dim); }
.acs-lab { flex:1; min-width:0; }
.acs-lab b { display:block; font-size:13.5px; font-weight:600; }
.acs-lab i { display:block; font-size:11px; color:var(--s-faint); font-style:normal; margin-top:1px; }
.acs-step { display:flex; align-items:center; background:var(--s-2); border:1px solid var(--s-line); border-radius:11px; padding:3px; flex:none; }
.acs-mn, .acs-pl { width:30px; height:30px; border-radius:8px; border:0; background:transparent; color:var(--s-dim); display:grid; place-items:center; cursor:pointer; transition:background .12s,color .12s,transform .08s; }
.acs-mn:hover, .acs-pl:hover { background:#111; color:#fff; }
.acs-mn:active, .acs-pl:active { transform:scale(.9); }
.acs-vw { display:flex; align-items:baseline; gap:3px; min-width:60px; justify-content:center; padding:0 2px; }
.acs-in { width:42px; text-align:right; background:transparent; border:0; outline:none; color:var(--s-text); font-family:var(--s-mono); font-size:16px; font-weight:600; -moz-appearance:textfield; padding:0; }
.acs-in::-webkit-outer-spin-button, .acs-in::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.acs-vw em { font-family:var(--s-mono); font-size:11px; color:var(--s-faint); font-style:normal; }
.acs-reset { display:block; width:calc(100% - 24px); margin:4px 12px 14px; padding:11px; border-radius:11px; border:1px solid var(--s-line); background:transparent; color:var(--s-dim); font-size:12.5px; font-weight:600; cursor:pointer; transition:background .12s,color .12s; }
.acs-reset:hover { background:#111; color:#fff; border-color:#111; }
.gg-dep { display:flex; align-items:center; gap:12px; padding:2px 2px 14px; border-bottom:1px solid var(--gg-line); }
.gg-depic { color:var(--gg-faint); flex:none; display:grid; place-items:center; }
.gg-depw { flex:1; }
.gg-depk { font-family:var(--gg-mono); font-size:10.5px; color:var(--gg-faint); text-transform:uppercase; letter-spacing:.12em; }
#gg-deptime { display:block; font-family:var(--gg-mono); font-size:15px; font-weight:600; margin-top:3px; color:var(--gg-text); }
.gg-dephint { font-size:10px; color:var(--gg-faint); font-style:normal; display:block; margin-top:2px; }
.gg-eval { width:100%; height:48px; border:0; border-radius:12px; cursor:pointer; background:#111; color:#fff; font:inherit; font-size:15px; font-weight:600; box-shadow:0 8px 20px -10px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.12); transition:transform .12s, background .12s; }
.gg-eval:hover { background:#000; }
.gg-eval:active { transform:translateY(1px); }
#gg-out { display:flex; flex-direction:column; gap:15px; }
#gg-out:empty { display:none; }
.gg-load, .gg-err { font-size:13px; color:var(--gg-dim); padding:4px 2px; }
/* verdetto MINIMALE: niente card satura/bagliore/barra — solo un cerchio-icona tenue + la parola colorata, su fondo piatto */
.gg-verdict { padding:2px 2px 15px; border-bottom:1px solid var(--gg-line); }
.gg-vtop { display:flex; align-items:center; gap:12px; }
.gg-vic { width:34px; height:34px; border-radius:50%; flex:none; display:grid; place-items:center; }
.gg-vstate { font-size:18px; font-weight:650; letter-spacing:.01em; line-height:1; }
.gg-vtag { font-size:12.5px; color:var(--gg-dim); margin-top:5px; }
.gg-verdict.s0 .gg-vic { background:rgba(31,157,87,.13); color:var(--gg-go); } .gg-verdict.s0 .gg-vstate { color:var(--gg-go); }
.gg-verdict.s1 .gg-vic { background:rgba(196,127,10,.14); color:var(--gg-cau); } .gg-verdict.s1 .gg-vstate { color:var(--gg-cau); }
.gg-verdict.s2 .gg-vic { background:rgba(216,58,55,.13); color:var(--gg-no); } .gg-verdict.s2 .gg-vstate { color:var(--gg-no); }
.gg-when { font-family:var(--gg-mono); font-size:12px; color:var(--gg-dim); margin:13px 0 0; padding-top:12px; border-top:1px solid var(--gg-line); line-height:1.5; }
.gg-when b { color:var(--gg-text); font-weight:600; }
.gg-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:11px; align-items:center; }
.gg-clbl { font-size:10.5px; color:var(--gg-faint); text-transform:uppercase; letter-spacing:.08em; margin-right:2px; }
.gg-chip { font-size:11.5px; font-weight:500; padding:4px 9px; border-radius:7px; background:rgba(0,0,0,.04); color:var(--gg-dim); border:1px solid var(--gg-line); }
.gg-verdict.s1 .gg-chip { background:rgba(196,127,10,.1); color:#a86b08; border-color:rgba(196,127,10,.28); }
.gg-verdict.s2 .gg-chip { background:rgba(216,58,55,.09); color:#c0332f; border-color:rgba(216,58,55,.26); }
.gg-list { background:#fff; border:1px solid var(--gg-line); border-radius:12px; overflow:hidden; display:block; }
.gg-legend { display:flex; gap:15px; padding:10px 15px; border-bottom:1px solid var(--gg-line); font-family:var(--gg-mono); font-size:10.5px; color:var(--gg-faint); }
.gg-legend span { display:inline-flex; align-items:center; gap:5px; }
.gg-legend i { width:8px; height:8px; border-radius:50%; }
.gg-p { display:grid; grid-template-columns:16px 18px 1fr; gap:11px; align-items:start; padding:12px 15px; border-top:1px solid var(--gg-line2); }
.gg-p:first-of-type { border-top:0; }
.gg-dot { width:9px; height:9px; border-radius:50%; margin-top:5px; }
.gg-dot.s0 { background:var(--gg-go); box-shadow:0 0 0 3px rgba(31,157,87,.15); }
.gg-dot.s1 { background:var(--gg-cau); box-shadow:0 0 0 3px rgba(196,127,10,.16); }
.gg-dot.s2 { background:var(--gg-no); box-shadow:0 0 0 3px rgba(216,58,55,.15); }
.gg-dot.s3 { background:var(--gg-faint); }
.gg-pic { color:var(--gg-faint); margin-top:1px; }
.gg-pmain { min-width:0; }
.gg-ptop { display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.gg-p b { font-size:13.5px; font-weight:600; }
.gg-p i { font-family:var(--gg-mono); font-size:11px; color:var(--gg-faint); font-style:normal; flex:none; }
.gg-pv { font-family:var(--gg-mono); font-size:12.5px; color:var(--gg-dim); margin-top:4px; line-height:1.45; display:block; }
.gg-pv .ok { color:var(--gg-go); }
/* fattore a rischio cliccabile -> apre overlay+ora sulla mappa (4a colonna = affordance pin) */
.gg-p.gg-clk { grid-template-columns:16px 18px 1fr 16px; cursor:pointer; }
.gg-go { color:var(--gg-faint); align-self:center; display:flex; opacity:.5; transition:opacity .12s; }
.gg-p.gg-clk:hover { background:rgba(0,0,0,.03); }
.gg-p.gg-clk:hover .gg-go { opacity:1; color:#111; }
.gg-p.gg-clk:active { background:rgba(0,0,0,.06); }
.gg-map { display:flex; gap:9px; font-size:12px; line-height:1.5; color:var(--gg-dim); background:var(--gg-2); border:1px solid var(--gg-line); border-radius:11px; padding:11px 13px; }
.gg-map svg { flex:none; color:var(--gg-cau); margin-top:1px; }
.gg-map b { color:var(--gg-text); font-weight:600; }
.gng-plane { width:30px; height:30px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.35)); pointer-events:none; }
.gng-plane svg { display:block; }
.gg-btns { display:flex; gap:8px; }
.gg-play { flex:1 1 0; height:44px; border-radius:11px; cursor:pointer; background:var(--gg-2); border:1px solid var(--gg-line); color:var(--gg-text); font:inherit; font-size:14px; font-weight:600; display:inline-flex; align-items:center; justify-content:center; gap:8px; transition:background .15s,color .15s; }
.gg-play:hover { background:var(--gg-3); }
.gg-play.on { background:#111; color:#fff; border-color:transparent; }
/* Auto-quota di crociera: pannello opzioni + gradini */
#gg-auto { margin-top:8px; } #gg-auto:empty { margin:0; }
.gg-aload { font-size:12px; color:var(--gg-dim); padding:6px 2px; }
/* (griglia gradini auto-quota .gg-auth/.gg-aopt/.gg-astep RIMOSSA: il piano vive solo nel grafico) */
.gg-legs { background:var(--gg-2); border:1px solid var(--gg-line); border-radius:11px; padding:5px 2px; }
.gg-legsh { font-family:var(--gg-mono); font-size:10px; color:var(--gg-faint); text-transform:uppercase; letter-spacing:.12em; padding:7px 12px 5px; }
.gg-leg { display:flex; align-items:center; gap:9px; padding:5px 12px; font-size:12px; }
.gg-leg b { flex:0 0 auto; min-width:52px; font-weight:600; }
.gg-leg i { font-family:var(--gg-mono); flex:0 0 auto; font-style:normal; color:var(--gg-faint); min-width:42px; font-size:11px; }
.gg-leg span:not(.gg-dot) { flex:1 1 auto; color:var(--gg-dim); }
.gg-striprow { display:flex; gap:3px; flex-wrap:wrap; margin-top:8px; }
.gg-cell { border:0; border-radius:7px; padding:7px 3px; font-family:var(--gg-mono); font-size:11px; font-weight:600; cursor:pointer; color:#fff; min-width:42px; flex:1 1 0; }
.gg-cell.s0 { background:var(--gg-go); } .gg-cell.s1 { background:var(--gg-cau); color:#fff; } .gg-cell.s2 { background:var(--gg-no); } .gg-cell.s3 { background:var(--gg-faint); }
.gg-striphint { font-size:10.5px; color:var(--gg-faint); margin-top:5px; }
/* panoramica orari "tutti i giorni": una riga per giorno, celle ora compatte */
.gg-dayrow { margin-top:9px; }
.gg-dayl { font-family:var(--gg-mono); font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--gg-dim); }
.gg-dayrow .gg-striprow { margin-top:4px; }
.gg-dayrow .gg-cell { min-width:24px; padding:6px 0; font-size:10.5px; flex:1 1 24px; }
.gg-disc { font-size:11px; line-height:1.5; color:var(--gg-faint); text-align:center; padding:2px 4px 0; }
.gg-disc b { color:var(--gg-dim); font-weight:600; }

/* export pills (Foglio/SD/GPX/FPL) + note ensemble — extras the module emits */
.gg-exp { font-size:10px; font-weight:700; letter-spacing:.04em; padding:3px 7px; margin-right:6px; }
.gg-exp[disabled] { opacity:.35; cursor:default; }
.gg-exp[disabled]:hover { background:var(--gg-2); color:var(--gg-dim); border-color:var(--gg-line); }
#gg-ff-note { position:absolute; left:50%; transform:translateX(-50%); bottom:188px; z-index:62;
  max-width:min(440px, calc(100vw - 24px)); padding:10px 12px; font-size:12.5px; line-height:1.45; color:#111;
  background:var(--glass-strong,rgba(255,255,255,.92)); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--hair,rgba(0,0,0,.06)); border-radius:12px; box-shadow:0 4px 18px rgba(0,0,0,.12); }
/* nota ensemble nel pannello GO/NO-GO */
.gg-epsn { margin:6px 0 2px; padding:6px 9px; border-radius:8px; background:rgba(0,0,0,.04);
  border:1px solid var(--gg-line); font-size:11px; line-height:1.4; color:var(--gg-dim); }
/* striscia orari: bordo = dissenso ensemble (>=25% ambra, >=50% rosso) */
.gg-cell.epsmd { box-shadow:inset 0 0 0 1.6px rgba(196,127,10,.85); }
.gg-cell.epshi { box-shadow:inset 0 0 0 1.6px rgba(216,58,55,.9); }

/* ===================================================================== */
/*  SMART ZONES (Libero) — discipline dashboard (#flightcfg) + meteogram  */
/*  (#mgram). Both are built by the REAL src modules (discipline.js /     */
/*  mgram.js); the main app's /styles.css skins them DARK, but the beta   */
/*  never loads that — so we re-skin them here to the warm-white "B/N"    */
/*  language (same recipe as #acsettings / #gonogo above). Structure +    */
/*  function untouched (same selectors). src/* stays pristine.            */
/* ===================================================================== */

/* --- Disciplina di volo (#flightcfg): Mezzo · Classe · Pilota · Volo — warm-white B/N --- */
/* Lives top-right under the search bar; segmented chips, selected = black active (matches the
   design's #world / #aerotoggles active state), NOT the old orange accent. */
#flightcfg {
  --fc-panel:rgba(255,255,255,.97); --fc-2:#f3f2ee; --fc-line:rgba(0,0,0,.09); --fc-line2:rgba(0,0,0,.06);
  --fc-text:#111; --fc-dim:#5f5f58; --fc-faint:#9a9a92;
  position:absolute; top:88px; right:16px; z-index:12; width:min(320px,88vw);
  padding:13px 14px; display:flex; flex-direction:column; gap:10px;
  background:var(--fc-panel); border:1px solid var(--fc-line); border-radius:15px;
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  box-shadow:0 24px 60px -22px rgba(0,0,0,.42);
  color:var(--fc-text); font-family:'IBM Plex Sans','Helvetica Neue',Helvetica,Arial,sans-serif; }
#flightcfg[hidden] { display:none; }

/* FLOAT-ABOVE-THE-BAR variant (.show-float): when the "Zone" specialized tool is active the discipline
   config pops up above the bottom bar, exactly like #windopts/#cloudopts in Vento/Nuvole. Overrides the
   default top-right docking. Same glass language, B/N styling kept. It is deliberately COMPACT and clearly
   DETACHED from the bar — a light floating panel, not a wall glued to the menu (user feedback). Desktop:
   centered above the overlay+time stack; the bar (#ctr) sits at bottom:20 and is ~108px tall, so bottom:172px
   leaves a clear ~44px air-gap above the bar (was 140 = glued). Narrower + tighter than the docked variant. */
#flightcfg.show-float {
  top:auto; right:auto; left:50%; bottom:172px; transform:translateX(-50%);
  width:min(372px,calc(100vw - 28px)); z-index:11;
  background:var(--glass-strong,rgba(255,255,255,.92));
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  box-shadow:0 6px 22px -4px rgba(0,0,0,.16); border:1px solid var(--hair,rgba(0,0,0,.06));
  border-radius:13px; gap:6px; padding:9px 11px; }
/* PERF: drop the blur on the float while the map is panned/scrubbed (matches the other over-map panels) */
body.interacting #flightcfg.show-float { -webkit-backdrop-filter:none; backdrop-filter:none; }
/* COMPACT rows/chips while floating: tighter than the docked top-right panel so it eats less map. The label
   column shrinks and the chips get smaller padding/type. Scoped to .show-float so the docked variant (Motore
   never uses it, but kept intact) is untouched. */
#flightcfg.show-float .fc-row { gap:8px; }
#flightcfg.show-float .fc-row label { width:46px; font-size:9.5px; }
#flightcfg.show-float .fc-seg { gap:3px; }
#flightcfg.show-float .fc-seg button { padding:4px 8px; font-size:11px; border-radius:7px; }
#flightcfg.show-float .fc-head { margin:-1px -1px 1px; }
#flightcfg.show-float .fc-head .fc-sum { font-size:11.5px; }
#flightcfg.show-float .fc-collapse, #flightcfg.show-float .fc-x { width:23px; height:23px; }
#flightcfg.show-float .fc-x { font-size:15px; }

#flightcfg .fc-row { display:flex; align-items:center; gap:10px; }
#flightcfg .fc-row label { font-size:10.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:var(--fc-faint); width:54px; flex:0 0 auto; }
#flightcfg .fc-seg { display:flex; flex-wrap:wrap; gap:4px; flex:1; }
#flightcfg .fc-seg button { appearance:none; border:1px solid var(--fc-line); background:var(--fc-2);
  color:var(--fc-dim); padding:5px 10px; border-radius:8px; font-size:11.5px; font-weight:500; cursor:pointer;
  transition:background .12s, color .12s, border-color .12s; }
#flightcfg .fc-seg button:hover { background:rgba(0,0,0,.05); color:var(--fc-text); }
#flightcfg .fc-seg button.on { background:#111; color:#fff; border-color:#111; font-weight:600; }

/* --- collapse / close header (beta): injected by app.js (injectDiscHeader) so the pop-up can be reduced
   to a compact summary strip or dismissed, to free the map. B/N language: same chevron/× as the rest. --- */
#flightcfg .fc-head { display:flex; align-items:center; gap:8px; margin:-2px -2px 2px; }
#flightcfg .fc-head .fc-sum { flex:1; min-width:0; font-size:12px; font-weight:600; letter-spacing:-.01em;
  color:var(--fc-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#flightcfg .fc-collapse, #flightcfg .fc-x { appearance:none; flex:0 0 auto; display:grid; place-items:center;
  width:26px; height:26px; border-radius:7px; border:1px solid var(--fc-line); background:var(--fc-2);
  color:var(--fc-dim); cursor:pointer; transition:background .12s, color .12s, border-color .12s; padding:0; }
#flightcfg .fc-x { font-size:16px; line-height:1; }
#flightcfg .fc-collapse svg { transition:transform .18s ease; }
#flightcfg .fc-collapse:hover, #flightcfg .fc-x:hover { background:#111; color:#fff; border-color:#111; }
/* COLLAPSED: hide the 4 option rows, keep just the header strip (summary + expand chevron). The whole strip is
   tappable to re-expand (app.js). Chevron flips to point up = "expand". Width shrinks to fit the summary. */
#flightcfg.fc-collapsed { gap:0; padding-top:8px; padding-bottom:8px; width:auto; max-width:min(372px,calc(100vw - 28px)); cursor:pointer; }
#flightcfg.fc-collapsed .fc-row { display:none; }
#flightcfg.fc-collapsed .fc-head { margin-bottom:0; }
#flightcfg.fc-collapsed .fc-collapse svg { transform:rotate(180deg); }

/* re-open pill (#disc-reopen): appears after the user dismisses (×) the pop-up, so the tool isn't gone for good.
   Sits where the pop-up floats (bottom-center, above the bar with the same detached air-gap), small + glassy, B/N. */
#disc-reopen { position:absolute; left:50%; bottom:172px; transform:translateX(-50%); z-index:11;
  display:inline-flex; align-items:center; gap:7px; padding:7px 13px 7px 11px; border-radius:20px;
  background:var(--glass-strong,rgba(255,255,255,.92)); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid var(--hair,rgba(0,0,0,.06)); box-shadow:0 4px 18px rgba(0,0,0,.14);
  color:#111; font-family:'IBM Plex Sans','Helvetica Neue',Helvetica,Arial,sans-serif; font-size:12.5px; font-weight:600;
  letter-spacing:-.01em; cursor:pointer; white-space:nowrap; max-width:calc(100vw - 24px); }
#disc-reopen[hidden] { display:none; }
#disc-reopen span { overflow:hidden; text-overflow:ellipsis; }
#disc-reopen:hover { background:#fff; }
body.interacting #disc-reopen { -webkit-backdrop-filter:none; backdrop-filter:none; }

/* --- Meteogramma al tocco (#mgram): warm-white modal, chart CHIARO (B/N) --- */
/* The canvas content is now drawn by the FORK /beta/mgram.js with a LIGHT palette (warm-white paper,
   dark ink axes/grid, outlined clouds) — same B/N language as the profile chart. So the canvas well
   (.mg-scroll) is warm-white too (was dark in the dark-canvas era), framed in the B/N card. */
#mgram {
  --mg-panel:rgba(255,255,255,.97); --mg-line:rgba(0,0,0,.09); --mg-text:#111; --mg-dim:#5f5f58; --mg-faint:#9a9a92;
  --mg-well:#f4f2ec;   /* carta calda del pozzo grafico = LP.bg in /beta/mgram.js (devono combaciare) */
  --mg-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  position:fixed; inset:0; z-index:30; display:flex; align-items:center; justify-content:center;
  background:rgba(40,40,38,.40); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  font-family:'IBM Plex Sans','Helvetica Neue',Helvetica,Arial,sans-serif; }
#mgram[hidden] { display:none; }
#mgram .mg-card { background:var(--mg-panel); color:var(--mg-text); border:1px solid var(--mg-line);
  border-radius:16px; box-shadow:0 30px 70px -24px rgba(0,0,0,.5); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  padding:13px 14px 14px; max-width:94vw; max-height:90vh; overflow:auto; overscroll-behavior:contain; }
#mgram .mg-head { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:9px; }
#mgram .mg-title { font-size:15px; font-weight:700; letter-spacing:-.01em; color:var(--mg-text); }
#mgram .mg-x { appearance:none; border:1px solid var(--mg-line); background:transparent; color:var(--mg-dim);
  width:30px; height:30px; border-radius:8px; font-size:16px; line-height:1; cursor:pointer; display:grid; place-items:center;
  transition:background .12s, color .12s; }
#mgram .mg-x:hover { background:#111; color:#fff; border-color:#111; }
#mgram .mg-tags { display:flex; flex-wrap:wrap; gap:5px; margin:1px 0 9px; }
#mgram .mg-tag { font-size:10px; font-weight:600; padding:2px 9px; border-radius:20px;
  background:rgba(0,0,0,.05); color:var(--mg-dim); border:1px solid var(--mg-line); white-space:nowrap; }
#mgram .mg-tag.warn { background:rgba(196,127,10,.12); color:#a86b08; border-color:rgba(196,127,10,.3); }
#mgram .mg-tag.foehn { background:#111; color:#fff; border-color:#111; font-weight:700; }
#mgram .mg-chip2 { font-size:10px; font-weight:600; padding:2px 9px; border-radius:20px; white-space:nowrap;
  background:rgba(0,0,0,.04); color:var(--mg-dim); border:1px solid var(--mg-line); }
#mgram .mg-chip2.warn { background:rgba(196,127,10,.1); color:#a86b08; border-color:rgba(196,127,10,.28); }
#mgram .mg-chip2.alert { background:rgba(216,58,55,.09); color:#c0332f; border-color:rgba(216,58,55,.26); }
/* the chart well is warm-white (the fork draws dark-on-light): a framed instrument inside the white card.
   The canvas paints its own LP.bg, so even before the first draw the well matches (no dark flash). */
#mgram .mg-scroll { overflow:auto; max-width:100%; overscroll-behavior:contain;
  background:var(--mg-well); border:1px solid var(--mg-line); border-radius:11px; padding:8px; }
#mgram .mg-cv { display:block; }
#mgram .mg-foot { margin-top:8px; font-size:10px; color:var(--mg-faint); font-family:var(--mg-mono); letter-spacing:.02em; }
/* the day-VERDICT strip + window pill sit OUTSIDE the canvas (DOM) — keep them readable on the white card */
#mgram .mg-verdict { display:flex; flex-wrap:wrap; align-items:baseline; gap:5px 13px; margin:9px 0 2px; padding:8px 11px;
  border-radius:10px; background:rgba(0,0,0,.04); border:1px solid var(--mg-line); font-size:11px; color:var(--mg-dim); }
#mgram .mg-verdict b { font-size:12.5px; color:var(--mg-text); font-variant-numeric:tabular-nums; }
#mgram .mg-verdict .vk { color:var(--mg-faint); font-size:9.5px; text-transform:uppercase; letter-spacing:.04em; }

/* ----- MOBILE (≤760px): pannelli a tutta-larghezza come bottom-sheet, restano B/N ----- */
@media (max-width:760px){
  #gonogo{ top:auto; left:0; right:0; bottom:0; width:auto; height:64vh; max-height:64vh; border-radius:18px 18px 0 0;
    border:0; border-top:1px solid var(--hair,rgba(0,0,0,.06)); box-shadow:0 -10px 30px -10px rgba(0,0,0,.22); }
  #gonogo .gg-head{ padding-top:18px; }
  #gonogo .gg-head::before{ content:""; position:absolute; top:7px; left:50%; transform:translateX(-50%); width:38px; height:4px; border-radius:2px; background:rgba(0,0,0,.14); }
  #gg-bigchart{ top:0; left:0; right:0; bottom:0; border-radius:0; border:0; box-shadow:none; padding-bottom:env(safe-area-inset-bottom); }
  #fp-title i{ display:none; }
  #fp-legend{ order:3; flex:1 1 100%; gap:16px; }
  #fp-close{ order:2; }
  #acsettings{ place-items:end center; padding:0; }
  .acs-card{ width:100%; border-radius:20px 20px 0 0; border-bottom:0; transform:translateY(100%); padding-bottom:env(safe-area-inset-bottom); }
  #acsettings.on .acs-card{ transform:none; }
  /* discipline dashboard: pin top-center under the search bar (the right rail is a horizontal strip on mobile) */
  #flightcfg{ top:74px; right:50%; transform:translateX(50%); width:min(360px,92vw); }
  /* …but as the Zone tool's float it sits ABOVE the bottom sheet, centered (like the wind/cloud pills do on
     mobile). It must clear BOTH the bottom sheet AND the #world toggle, which on mobile floats at bottom:330
     (a 71px-tall right-edge column reaching ~bottom:401 from the top of the viewport). The 4-row panel is tall,
     so we float it at bottom:438px — its bottom edge sits clearly ABOVE the world toggle's top, leaving a wide
     air-gap above the sheet too. Compact (narrower + tighter padding) so it covers less of the map; scrolls
     internally if a very short phone can't fit all 4 rows above the toggle. */
  /* COMPACT pill (user: the pop-up "fills half the screen"). AUTO-WIDTH so it shrinks toward its content like
     #cloudopts/#windopts — but kept wide ENOUGH (max-width 340) that the segmented chips stay on ONE row per
     category instead of wrapping into a tall stack (narrow→wrapping makes it TALLER, not lighter). Centered
     above the bar; bottom:438 keeps its lower edge clear of the #world toggle (lower-right, ~y443) and leaves a
     wide air-gap over the sheet. The dense rows/chips below shrink the whole card so even expanded it reads as a
     light floating panel, not a wall. Collapsed it is just the summary strip (a small pill). */
  #flightcfg.show-float{ top:auto; right:auto; left:50%; bottom:438px; transform:translateX(-50%);
    width:min(330px,calc(100vw - 24px)); max-height:38vh; overflow-y:auto; -webkit-overflow-scrolling:touch;
    gap:4px; padding:8px 10px; border-radius:13px; }
  /* extra-tight rows/chips on phones: smaller label gutter, denser segmented chips → minimal map coverage */
  #flightcfg.show-float .fc-row{ gap:7px; }
  #flightcfg.show-float .fc-row label{ width:40px; font-size:9px; }
  #flightcfg.show-float .fc-seg{ gap:3px; }
  #flightcfg.show-float .fc-seg button{ padding:3px 7px; font-size:10.5px; border-radius:6px; }
  #flightcfg.show-float .fc-head .fc-sum{ font-size:11px; }
  /* COLLAPSED → shrink to the summary text (a small centered pill), not the 330px expanded width. Higher
     specificity than the .show-float width rule above so width:auto wins while collapsed. */
  #flightcfg.show-float.fc-collapsed{ width:auto; max-width:min(330px,calc(100vw - 24px)); }
  /* collapsed strip + re-open pill float at the SAME detached height so they too clear the world toggle */
  #flightcfg.fc-collapsed{ max-width:min(344px,calc(100vw - 28px)); }
  #disc-reopen{ bottom:438px; }
  /* meteogram: full-width bottom-sheet like the other panels (frame stays B/N, chart stays dark) */
  #mgram{ align-items:flex-end; }
  #mgram .mg-card{ width:100%; max-width:100%; border-radius:18px 18px 0 0; border-bottom:0; padding-bottom:calc(14px + env(safe-area-inset-bottom)); }
}

/* ============================================================================
   IT / EN language toggle (#langtog) — built at runtime by app.js wireLang().
   Lives in BOTH worlds (not motor-scoped). A small B/N segmented pill placed
   top-right, just BELOW the locate/offline buttons (#topright). Mirrors the
   #topright glass/hairline language; safe-area aware on iOS.
   ========================================================================== */
#langtog{
  position:absolute; z-index:9;
  right:max(16px,calc(16px + env(safe-area-inset-right)));
  top:max(62px,calc(62px + env(safe-area-inset-top)));   /* below the 38px #topright row (top16 + 38 + 8) */
  display:flex; gap:2px; padding:2px;
  background:rgba(255,255,255,.80); border:1px solid rgba(0,0,0,.06);
  border-radius:10px; box-shadow:0 2px 12px rgba(0,0,0,.10);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
}
#langtog button{
  appearance:none; border:0; cursor:pointer; margin:0;
  min-width:30px; height:26px; padding:0 8px; border-radius:8px;
  background:transparent; color:#3a3a3a;
  font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:600; letter-spacing:.04em;
  line-height:1; display:flex; align-items:center; justify-content:center;
  transition:background .12s ease, color .12s ease;
}
#langtog button:hover{ background:rgba(0,0,0,.05); }
#langtog button.on{ background:#111; color:#fff; }

@media (max-width:760px){
  /* THIRD row — the IT/EN pill drops onto its OWN line BELOW the route bar (the route bar now takes the whole
     second row, top:58 → bottom ≈96). Sit at top:104 (route-bar bottom + 8px gap), right-aligned, so it clears
     the route bar above and the autocomplete dropdown (#searchresults, fixed top:100 full-width) renders behind
     it on the same band but the pill keeps the far-right corner; both clear the right rail/#world lower down.
     Safe-area aware on iOS. */
  #langtog{
    right:max(10px,calc(10px + env(safe-area-inset-right)));
    top:max(104px,calc(104px + env(safe-area-inset-top)));
  }
  /* button height 32 → pill ≈ 38px (2px padding ×2 + 1px border ×2), matching #routebar #routerow's 38px */
  #langtog button{ min-width:28px; height:32px; font-size:10.5px; }
  /* The autocomplete dropdown (#searchresults, fixed top:100, full-width) opens into the SAME row-3 band as the
     IT/EN pill (top:104). The pill lives OUTSIDE #app (a body child) while the dropdown lives INSIDE #app's
     stacking context, so the pill always paints over the dropdown's right edge regardless of z-index (can't be
     slotted between the map and the dropdown by z alone). Rather than fight the stacking, simply hide the pill
     WHILE the dropdown is open (it's a transient overlay; the pill returns the instant results close). This keeps
     the result rows — including a long result's right-hand hint — fully visible and tappable. */
  body:has(#routebar #searchresults:not([hidden])) #langtog{ opacity:0; pointer-events:none; }
}

/* ============================================================================
   TABLET + DESKTOP band (≥761px) — the mobile @media above never fires here, so
   the DESKTOP base chrome (frozen in index.html's inline <style>) applies: route
   bar centered top, #logo with wordmark, #gobtn + #langtog top-right, #world +
   #ctr bottom, #alt centered-left, #aerotoggles right-center. On NARROW tablets
   (≈761–880px) the centered 560px bars are wide relative to the screen and the
   top-right pills stack on the same row, producing overlaps that don't exist on a
   wide desktop. A few also persist at desktop width (the IT/EN pill is a recent
   add that was never reconciled with #gobtn / #attrib / a short window). All fixes
   below are width-/height-robust (they relax automatically once there's room) so
   wide-desktop layout is unchanged. % not vh for #app-relative caps (iOS).
   ========================================================================== */
@media (min-width:761px){
  /* NB source-order gotcha: motor.css is linked BEFORE index.html's inline <style>, so a plain `#x{}` here
     LOSES to the inline `#x{}` (equal specificity, later source). Every rule below that overrides a property the
     inline already sets on the same id is therefore given EXTRA specificity (a parent/class prefix) so it wins
     without touching the frozen inline sheet. */

  /* (6) IT/EN pill ↔ GO/NO-GO button. Both were pinned top:62 right:16 → the pill sat ON the GO/NO-GO button in
     EVERY Motore view (tablet AND desktop). In Motore, slide the pill LEFT of the button (its width ≈112px:
     16 + 112 + 9 gap). In Libero there is no #gobtn, so the pill keeps the far-right corner (untouched).
     `body.world-motor #langtog` out-specifies the inline `#langtog{right}`. */
  body.world-motor #langtog{ right:max(137px,calc(137px + env(safe-area-inset-right))); }

  /* (7) #logo wordmark ↔ centered route bar. With the "Troposphere" wordmark shown (desktop), the logo reaches
     x≈148; the centered route bar's left edge falls at ~100–137 for widths ≤~880 → they overlap. Drop the
     wordmark to the icon-only badge (exactly like mobile) across the whole tablet band so the route bar clears
     it; wordmark returns at desktop width where there's room. (width/height/.wm-display are unset by the inline
     base #logo, so plain selectors suffice here.) */
  @media (max-width:980px){
    #logo{ padding:0; width:38px; height:38px; justify-content:center; border-radius:10px;
      background:var(--glass); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
      border:1px solid var(--hair); box-shadow:var(--sh); }
    #logo .wm{ display:none; }
  }

  /* (7b) ROUTE BAR width ↔ the top-right cluster (#langtog left of #gobtn). The inline route bar is 560px
     centered; on a narrow tablet its right edge (≈664 at 768) runs over BOTH the IT/EN pill (now at right:137)
     and the GO/NO-GO button. Cap its width so its right edge always stays left of the cluster's leftmost element
     (the pill at ≈vw−205): reserve 440px total (≈220/side: logo on the left, pill+button on the right). It stays
     centered, and the chip row already scrolls horizontally inside it, so the narrower slot stays fully usable.
     min() restores the full 560 once the viewport is wide enough (≈1000px+), so desktop is unchanged. The
     `body.world-motor` prefix out-specifies the inline `#routebar{width}`. */
  body.world-motor #routebar{ width:min(560px,calc(100vw - 440px)); }

  /* (8) #world toggle ↔ centered bottom stack (#ctr / #timebar). The 560px bar centered on a ≤~860px screen
     reaches the bottom-right #world toggle (right:16, ~134px wide). Reserve 160px of clear space on each side
     of the bottom stack (left for #logo/#legend, right for #world) by capping its width; it stays centered and
     ≥~441px wide (the time slider still has room). Once the screen is wide enough the min() picks 560 again.
     (#ctr width / #ctr #timebar width are unset-or-lower-specificity in the inline base → these win.)
     #timebar MUST be width:100% (fill the capped #ctr), NOT width:auto: the inline base #ctr is align-items:center
     (not stretch), so width:auto makes the flex item shrink-wrap to min-content → the flex:1 #track collapses to 0
     and the day/hour scrubber dies (regression from the first overlap pass). 100% pins it to the parent's width so
     the track keeps real width at every ≥761px size. max-width:none drops the inline calc(100vw-40px) cap. */
  #ctr{ width:min(560px,calc(100vw - 320px)); }
  #ctr #timebar{ width:100%; max-width:none; }

  /* (9) #world toggle ↔ #attrib credit line. #world (bottom:20, h:40 → bottom edge at H−20) grazed the top of
     the #attrib line (bottom:8, h≈14 → top edge at H−22) by ~2px on tablet AND desktop. Lift #world a touch so
     its bottom edge clears the credit line's top with a comfortable gap. `#app #world` out-specifies the inline
     `#world{bottom}` (which a plain `#world` here would lose to, motor.css being linked before the inline). */
  #app #world{ bottom:max(28px,calc(28px + env(safe-area-inset-bottom))); }

  /* (10a) AIRSPACE panel ↔ aero rail (right). On desktop both #asp-panel and #aerotoggles hug right:16, so the
     panel (top:108) and the vertically-centered rail share the right column. On a TALL window the centered rail
     sits below the panel and they miss; on a SHORT window (landscape tablet, short desktop) the rail rises into
     the panel (~5600px² seen at 1024×768). Open the panel to the LEFT of the rail — exactly like mobile — so its
     right edge clears the rail's left edge and they can never intersect, at any height. (right:80 = rail width
     52 at right:16 + a 12px gap.) Plain `#asp-panel` here is later in this sheet than the base rule → wins. */
  #asp-panel{ right:max(80px,calc(80px + env(safe-area-inset-right))); }

  /* (10b) #alt ladder ↔ #legend (bottom-left, same left column). #alt is vertically centered (top:50%); a tall
     wind/onda level list (~435px) on a SHORT window reaches down into the bottom-left #legend (seen 768/834px
     tall). Only on short windows, switch the ladder from centered to a fixed top+bottom band that clears the
     route bar (top) and the legend (bottom). PIXEL top/bottom (not %/vh): a percentage height on a child of a
     position:fixed ancestor resolves against the WRONG block here (the fixed-positioning containing block, which
     under viewport emulation / iOS is the large window, not the visible area) — so a `max-height:100%` cap
     silently failed; pixel anchors are reliable. top:84 clears the route bar (bottom≈74); bottom:200 keeps the
     lower edge above the legend (top ≈ H−180). The track flexes to fill the band. Threshold 980px (not the bare
     ~835 where a centered ladder first touches the legend) so it also covers the toolbar-ON case: when iOS shows
     its bars the VISIBLE area is ~130px shorter than the layout height this query reads, so a 900–965px layout
     (≈770–835 visible) still needs the band. Real desktops taller than 980px have no shrinking toolbar, so they
     keep the centered ladder and the desktop look is unchanged. */
  @media (max-height:980px){
    /* #app #alt out-specifies the inline `#alt{top:50%;transform}` (motor.css is linked BEFORE that inline sheet,
       so a plain `#alt` here would lose). */
    #app #alt{ top:84px; bottom:200px; transform:none; height:auto; max-height:none; }
    #app #alt .track{ min-height:0; }
  }
}