/* LineScout Redesign preview (R2 + R3) — matches the approved home-screen mockup. */
body.fn-shell{--fn-b:52px;--fn-chip:44px;--fn-search:50px;--fn-glass:rgba(20,27,36,.94);--fn-line:rgba(255,255,255,.10);--fn-accent:#ff7a1a;--fn-cyan:#38bdf8;--fn-tab-h:64px}
body.fn-shell.glove-mode{--fn-b:60px;--fn-chip:52px;--fn-search:56px}
body.fn-shell .fn-ico{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;display:block;flex-shrink:0}
body.fn-shell .hidden.fn-pop,body.fn-shell .fn-toast.hidden,body.fn-shell .fn-scrim.hidden{display:none!important}

/* ---------- header (mockup) ---------- */
body.fn-shell header.topbar .net-bar{text-transform:none;letter-spacing:0;font-size:13px;font-weight:650;background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.38);color:#bbf7d0;padding:0 12px;border-radius:999px}
body.fn-shell header.topbar .net-bar .net-dot{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 8px #22c55e}
body.fn-shell header.topbar .net-bar[data-state="offline"]{background:rgba(148,163,184,.14);border-color:#f87171;color:#fecaca}
body.fn-shell header.topbar .net-bar[data-state="offline"] .net-dot{background:#f87171;box-shadow:none}
body.fn-shell header.topbar .net-bar[data-state="weak"]{background:rgba(251,191,36,.12);border-color:#fbbf24;color:#fde68a}
body.fn-shell header.topbar #btn811{display:inline-flex;align-items:center;gap:6px;background:#e5322d;font-size:17px;padding:0 14px}
body.fn-shell header.topbar #btn811 .fn-ico{width:18px;height:18px;stroke-width:2.2}
body.fn-shell .r1-safety-more{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- search bar ---------- */
body.fn-shell .r1-search{top:10px;left:calc(10px + var(--side-safe));right:calc(10px + env(safe-area-inset-right,0px))}
body.fn-shell .r1-sbox{height:var(--fn-search);border-radius:16px;background:var(--fn-glass);border-color:var(--fn-line);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
body.fn-shell .r1-filter{width:var(--fn-search);min-width:var(--fn-search);height:var(--fn-search);min-height:var(--fn-search);border-radius:16px;background:var(--fn-glass);border-color:var(--fn-line)}
body.fn-shell .r1-filter[aria-expanded="true"]{border-color:var(--fn-accent);color:var(--fn-accent)}
body.fn-shell.fn-narrow-on .r1-badge{box-shadow:0 0 0 2px #0b0f14,0 0 0 4px var(--fn-accent)}
body.fn-shell .r1-suggest{top:calc(var(--fn-search) + 16px)}

/* ---------- hide old big map controls (functions moved to the new controls) ---------- */
body.fn-shell #mapFabs,body.fn-shell #s5ApwaLegend,body.fn-shell .leaflet-control-zoom{display:none!important}
body.fn-shell .leaflet-bottom{margin-bottom:0!important}
body.fn-shell .leaflet-control-attribution{max-width:calc(100vw - 150px)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:9px;background:rgba(0,0,0,.5)!important;color:#cbd5e1!important;border-radius:6px 0 0 0}
body.fn-shell .leaflet-control-attribution a{color:#cbd5e1!important}

/* ---------- left chips ---------- */
body.fn-shell .fn-left{position:absolute;left:calc(10px + var(--side-safe));top:calc(var(--fn-search) + 22px);z-index:1180;display:flex;flex-direction:column;gap:8px;align-items:flex-start;max-width:calc(100% - var(--fn-b) - 40px)}
body.fn-shell .fn-mini{min-height:var(--fn-chip);min-width:44px;display:inline-flex;align-items:center;gap:8px;padding:0 14px;border-radius:999px;background:var(--fn-glass);border:1px solid var(--fn-line);color:#eef2f6;font-size:14px;font-weight:650;box-shadow:0 4px 14px rgba(0,0,0,.4);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);white-space:nowrap}
body.fn-shell .fn-mini .fn-ico{width:17px;height:17px}
body.fn-shell .fn-mini .fn-chev{width:14px;height:14px}
body.fn-shell .fn-mini[aria-expanded="true"]{border-color:var(--fn-accent)}
body.fn-shell .fn-dot{width:8px;height:8px;border-radius:50%;background:#475569;display:none}
body.fn-shell #fnWxChip.on .fn-dot{display:inline-block;background:#22c55e}
body.fn-shell.fn-filters-open .fn-left{display:none}

/* ---------- right control groups ---------- */
body.fn-shell .fn-fab{position:absolute;right:calc(10px + env(safe-area-inset-right,0px));top:calc(var(--fn-search) + 22px);z-index:1180;display:flex;flex-direction:column;gap:10px}
body.fn-shell .fn-grp{display:flex;flex-direction:column;border-radius:16px;background:var(--fn-glass);border:1px solid var(--fn-line);box-shadow:0 6px 18px rgba(0,0,0,.45);overflow:hidden;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
body.fn-shell .fn-grp button{width:var(--fn-b);min-width:var(--fn-b);height:var(--fn-b);min-height:var(--fn-b);padding:0;border-radius:0;background:transparent;color:#eef2f6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;position:relative}
body.fn-shell .fn-grp button+button{border-top:1px solid var(--fn-line)}
body.fn-shell .fn-grp .fn-lbl{font-size:8.5px;font-weight:800;letter-spacing:.03em;color:#97a3b3;line-height:1}
body.fn-shell.text-lg .fn-grp .fn-lbl{font-size:10px}
body.fn-shell .fn-grp button[aria-expanded="true"],body.fn-shell .fn-grp button[aria-pressed="true"]{color:var(--fn-accent)}
body.fn-shell .fn-grp button[aria-pressed="true"] .fn-lbl{color:var(--fn-accent)}
body.fn-shell .fn-gps{color:var(--fn-cyan)!important}
body.fn-shell .fn-gps.located .fn-ico{fill:rgba(56,189,248,.35)}
body.fn-shell .fn-gps[aria-pressed="true"]{color:var(--fn-accent)!important}
body.fn-shell.fn-filters-open .fn-fab{display:none}
body.fn-shell .fn-zoom{position:absolute;right:calc(10px + env(safe-area-inset-right,0px));bottom:42px;z-index:1180}
body.fn-shell .fn-zoom .fn-grp button{height:46px;min-height:46px}
body.fn-shell.glove-mode .fn-zoom .fn-grp button{height:56px;min-height:56px}
body.fn-shell .fn-sources{position:absolute;left:calc(10px + var(--side-safe));bottom:12px;z-index:1180}

/* ---------- popovers ---------- */
body.fn-shell .fn-pop{position:absolute;left:calc(10px + var(--side-safe));right:calc(10px + env(safe-area-inset-right,0px));z-index:1400;background:#141b24;border:1px solid #2f3b49;border-radius:16px;box-shadow:0 12px 30px rgba(0,0,0,.55);padding:10px 12px 12px;overflow:auto;-webkit-overflow-scrolling:touch;color:#eef2f6}
body.fn-shell .fn-filters{top:calc(var(--fn-search) + 18px);max-height:calc(100% - var(--fn-search) - 30px)}
body.fn-shell .fn-sources-panel{bottom:68px;max-height:calc(100% - var(--fn-search) - 90px)}
body.fn-shell .fn-pop-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
body.fn-shell .fn-pop h3{margin:0;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#97a3b3;font-weight:700}
body.fn-shell .fn-pop h3.fn-sub{margin:12px 0 8px}
body.fn-shell .fn-pop h4{margin:10px 0 4px;font-size:12px;color:#97a3b3;text-transform:uppercase;letter-spacing:.06em}
body.fn-shell .fn-x{width:44px;min-width:44px;height:44px;min-height:44px;padding:0;border-radius:22px;background:rgba(255,255,255,.07);color:#eef2f6;display:grid;place-items:center}
body.fn-shell .fn-x .fn-ico{width:20px;height:20px}
body.fn-shell .fn-note{font-size:12px;color:#97a3b3;margin:8px 0 0;line-height:1.4}
body.fn-shell .fn-chips{display:flex;flex-wrap:wrap;gap:8px}
body.fn-shell .fn-chip{min-height:44px;padding:0 14px;border-radius:999px;background:transparent;border:1px solid rgba(255,255,255,.16);color:#eef2f6;font-size:14px;font-weight:600;-webkit-appearance:none;appearance:none}
body.fn-shell .fn-chip.on,body.fn-shell .fn-chip[aria-pressed="true"]{background:rgba(255,122,26,.16);border-color:rgba(255,122,26,.7)}
body.fn-shell select.fn-chip{padding-right:14px}
/* existing station chips, now inside the filter panel */
body.fn-shell #fnChipsSlot #stationChips{position:static;display:flex;flex-wrap:wrap;gap:8px;background:transparent;border:0;padding:0;overflow:visible;box-shadow:none}
body.fn-shell #fnChipsSlot #stationChips .ql-label{display:none}
body.fn-shell #fnChipsSlot .layer-chip{min-height:44px;padding:0 14px;border-radius:999px;background:rgba(255,255,255,.06)!important;border:1px solid rgba(255,255,255,.14);outline:0;font-size:14px;font-weight:600;color:#eef2f6}
body.fn-shell #fnChipsSlot .layer-chip .swatch{width:10px;height:10px;border-radius:3px}
body.fn-shell #fnChipsSlot .layer-chip.on{background:rgba(255,122,26,.16)!important;border-color:rgba(255,122,26,.7)}
body.fn-shell #fnChipsSlot #btnLayersMore{background:transparent!important}
/* existing status line + GPS card, now inside Sources */
body.fn-shell #fnStatusSlot #status{position:static;max-height:none;overflow:visible;background:transparent;padding:0;font-size:12px;line-height:1.45;pointer-events:auto;border-radius:0}
body.fn-shell #fnGpsSlot #gpsBar{position:static;max-width:none;background:transparent;border:0;padding:0}
body.fn-shell #fnGpsSlot #btnFollow{min-height:44px;border-radius:12px}
body.fn-shell .fn-toast{position:absolute;left:50%;transform:translateX(-50%);bottom:68px;z-index:1450;max-width:calc(100% - 40px);background:rgba(15,20,25,.95);border:1px solid #2f3b49;border-radius:12px;padding:8px 12px;font-size:12.5px;color:#e2e8f0;text-align:center}
/* field weather card as a popover under the chips */
body.fn-shell #s4Banner.fn-wx-pop{position:absolute;left:calc(10px + var(--side-safe));right:calc(10px + env(safe-area-inset-right,0px));top:calc(var(--fn-search) + 18px);z-index:1420;margin:0;max-height:calc(100% - var(--fn-search) - 90px);box-shadow:0 12px 30px rgba(0,0,0,.55);border-radius:16px}
body.fn-shell:not(.fn-wx-open) #s4Banner.fn-wx-pop{display:none}
/* transient bars */
body.fn-shell #wxPanel{bottom:68px!important;z-index:1300}
body.fn-shell .s5-drawbar{top:auto!important;bottom:68px;z-index:1460}
body.fn-shell #routeWarn{top:calc(var(--fn-search) + 18px)!important;z-index:1300}

/* ---------- sheets ---------- */
body.fn-shell .fn-scrim{position:absolute;inset:0;background:rgba(0,0,0,.45);z-index:3400}
body.fn-shell .fn-sheet{position:absolute;left:0;right:0;bottom:0;z-index:3450;background:#111821;border-radius:22px 22px 0 0;border-top:1px solid var(--fn-line);box-shadow:0 -10px 40px rgba(0,0,0,.6);max-height:82%;display:none;flex-direction:column;color:#eef2f6}
body.fn-shell .fn-sheet.open{display:flex}
body.fn-shell .fn-grab{width:40px;height:5px;border-radius:3px;background:#3a4656;margin:8px auto 2px;flex-shrink:0}
body.fn-shell .fn-sh{display:flex;align-items:center;justify-content:space-between;padding:4px 16px 8px;flex-shrink:0}
body.fn-shell .fn-sh h2{margin:0;font-size:19px}
body.fn-shell .fn-sbody{overflow:auto;padding:0 16px 16px;-webkit-overflow-scrolling:touch}
body.fn-shell .fn-cat{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:#97a3b3;margin:16px 2px 6px;font-weight:700}
body.fn-shell .fn-card{background:#17202b;border:1px solid var(--fn-line);border-radius:14px;overflow:hidden}
body.fn-shell .fn-row{display:flex;align-items:center;gap:12px;min-height:52px;padding:6px 14px;width:100%;text-align:left;background:transparent;color:#eef2f6;border-radius:0}
body.fn-shell .fn-t{flex:1;min-width:0;font-size:15px;font-weight:600}
body.fn-shell .fn-t small{display:block;color:#97a3b3;font-size:12px;font-weight:500;margin-top:2px}
body.fn-shell .fn-tg{width:46px;height:28px;border-radius:14px;background:#334155;position:relative;flex-shrink:0;transition:.15s}
body.fn-shell .fn-tg::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:.15s}
body.fn-shell .fn-switch.on .fn-tg{background:#22c55e}
body.fn-shell .fn-switch.on .fn-tg::after{left:21px}
body.fn-shell .fn-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
body.fn-shell .fn-btn{min-height:48px;border-radius:12px;background:#1d2733;border:1px solid var(--fn-line);color:#eef2f6;font-weight:650;font-size:14px;padding:6px 10px;display:flex;align-items:center;justify-content:center;gap:8px;text-align:center;text-decoration:none;line-height:1.2}
body.fn-shell .fn-btn .fn-ico{width:18px;height:18px}
body.fn-shell .fn-btn.pri{background:var(--fn-accent);border-color:var(--fn-accent);color:#141414}
body.fn-shell .fn-btn.red{background:#e5322d;border-color:#e5322d;color:#fff}
body.fn-shell .fn-wide{grid-column:1/-1}
body.fn-shell .fn-legend{display:grid;grid-template-columns:1fr 1fr}
body.fn-shell .fn-lg{display:flex;align-items:center;gap:10px;min-height:44px;padding:4px 12px;border-top:1px solid var(--fn-line);font-size:14px}
body.fn-shell .fn-lg:nth-child(odd){border-right:1px solid var(--fn-line)}
body.fn-shell .fn-lg:nth-child(-n+2){border-top:0}
body.fn-shell .fn-lg i{width:18px;height:18px;border-radius:5px;flex-shrink:0;border:1px solid rgba(0,0,0,.45)}
body.fn-shell .fn-lg small{display:block;color:#97a3b3;font-size:11px;line-height:1.1}
body.fn-shell .fn-warn{background:#2a170e;border:1px solid #4a2814;color:#ffd9b8;border-radius:12px;padding:10px 12px;font-size:12.5px;margin-top:12px;line-height:1.4}

/* ---------- existing Layers + Basemap drawers, restyled as sheets above the tab bar ---------- */
body.fn-shell .layer-drawer,body.fn-shell .basemap-drawer{bottom:var(--fn-tab-h);background:#111821;border-radius:22px 22px 0 0;border-top:1px solid var(--fn-line);padding:0 16px 16px!important;max-height:min(72vh,calc(100dvh - var(--fn-tab-h) - 190px))!important}
body.fn-shell .layer-drawer-head{position:sticky;top:0;z-index:2;background:#111821;display:flex;align-items:center;justify-content:space-between;padding:12px 0 6px;margin:0}
body.fn-shell .layer-drawer-head h2{font-size:19px;margin:0}
body.fn-shell #btnLayersClose,body.fn-shell #btnBasemapClose{width:44px;min-width:44px;height:44px;min-height:44px;border-radius:22px!important;background:rgba(255,255,255,.07)!important;color:#eef2f6!important;padding:0!important}
body.fn-shell .layer-drawer .layer-cat,body.fn-shell .basemap-drawer .layer-cat{font-size:11px;letter-spacing:.09em;color:#97a3b3;margin:16px 2px 6px;padding:0}
body.fn-shell .layer-drawer .layers{display:block;background:#17202b;border:1px solid var(--fn-line);border-radius:14px;overflow:hidden;padding:0;gap:0}
body.fn-shell .layer-drawer .layer-btn{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:6px 14px;border-radius:0;background:transparent;outline:0;color:#eef2f6;font-size:14.5px;font-weight:600;text-align:left;border:0}
body.fn-shell .layer-drawer .layer-btn+.layer-btn{border-top:1px solid var(--fn-line)}
body.fn-shell .layer-drawer .layer-btn .swatch{width:14px;height:14px;border-radius:4px;flex-shrink:0}
body.fn-shell .layer-drawer .layer-btn::after{content:"";margin-left:auto;width:46px;height:28px;border-radius:14px;flex-shrink:0;background:#334155 radial-gradient(circle at 14px 14px,#fff 10.5px,transparent 11.5px)}
body.fn-shell .layer-drawer .layer-btn.on{background:transparent}
body.fn-shell .layer-drawer .layer-btn.on::after{background:#22c55e radial-gradient(circle at 32px 14px,#fff 10.5px,transparent 11.5px)}
body.fn-shell .fn-pipe .fn-prev{height:46px;border-radius:10px;margin:12px 14px 4px;background:linear-gradient(135deg,#3c4a33,#5c5840);position:relative;overflow:hidden;border:1px solid var(--fn-line)}
body.fn-shell .fn-pipe .fn-prev svg{position:absolute;inset:0;width:100%;height:100%}
body.fn-shell .fn-slider{padding:8px 14px}
body.fn-shell .fn-slider label{display:flex;justify-content:space-between;font-size:14px;margin-bottom:2px;color:#eef2f6}
body.fn-shell .fn-slider label span{color:#97a3b3}
body.fn-shell .fn-slider input[type=range],body.fn-shell .layer-drawer input[type=range],body.fn-shell .basemap-drawer input[type=range]{width:100%;height:44px;accent-color:var(--fn-accent)}
body.fn-shell .fn-pipe .fn-row{border-top:1px solid var(--fn-line)}
body.fn-shell .fn-pipe .fn-btn{min-height:44px}
body.fn-shell .layer-drawer .naip-row,body.fn-shell .basemap-drawer .naip-row{flex-wrap:wrap;gap:4px 10px;align-items:center;background:#17202b!important;border:1px solid var(--fn-line);border-radius:14px;padding:8px 14px!important;margin:0 0 8px}
body.fn-shell .naip-row select,body.fn-shell .ors-row input{min-height:44px;border-radius:12px;background:#1d2733;color:#eef2f6;border:1px solid var(--fn-line);padding:0 10px;font-size:14px}
body.fn-shell .s4-period{display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:#17202b;border:1px solid var(--fn-line);border-radius:14px;padding:8px 14px;margin:0 0 8px}
body.fn-shell .s4-period button{min-height:44px;border-radius:999px}
body.fn-shell .ors-row{background:#17202b;border:1px solid var(--fn-line);border-radius:14px;padding:10px 14px;margin-top:8px;display:flex;flex-direction:column;gap:8px}
body.fn-shell .basemap-drawer .basemap-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:4px 0 8px}
body.fn-shell .basemap-drawer .basemap-btn{display:flex;flex-direction:column;justify-content:flex-end;min-height:118px;padding:0;border-radius:14px;overflow:hidden;background:#17202b;border:2px solid transparent;outline:0;text-align:left;font-size:14px;font-weight:700;color:#eef2f6;position:relative}
body.fn-shell .basemap-drawer .basemap-btn::before{content:"";position:absolute;left:0;right:0;top:0;height:66px;background:linear-gradient(135deg,#3b4a3a,#5b5a44) center/cover}
body.fn-shell .basemap-drawer .basemap-btn{padding:72px 10px 8px}
body.fn-shell .basemap-drawer .basemap-btn small{font-size:11px;font-weight:500;color:#97a3b3}
body.fn-shell .basemap-drawer .basemap-btn.on{border-color:var(--fn-accent);background:#17202b}
body.fn-shell .basemap-btn[data-basemap="satellite"]::before{background-image:url("https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/12/1688/918")}
body.fn-shell .basemap-btn[data-basemap="streets"]::before{background-image:url("https://tile.openstreetmap.org/12/918/1688.png")}
body.fn-shell .basemap-btn[data-basemap="usgs_topo"]::before{background-image:url("https://basemap.nationalmap.gov/arcgis/rest/services/USGSTopo/MapServer/tile/12/1688/918")}
body.fn-shell .basemap-drawer .basemap-note{font-size:12px;color:#97a3b3;margin:6px 2px}
body.fn-shell .layer-drawer .basemap-note{font-size:12px;color:#97a3b3;margin:10px 2px}
body.fn-shell .layer-backdrop.open{background:rgba(0,0,0,.45)}

/* ---------- bottom tabs ---------- */
body.fn-shell .tabbar{background:#0d1219;border-top:1px solid var(--fn-line);padding:0 4px var(--bot-safe);min-height:calc(60px + var(--bot-safe));gap:0}
body.fn-shell .tab-btn{min-height:58px;border-radius:12px;outline:0!important;background:transparent!important;color:#8a96a6;font-size:11px;font-weight:600;gap:3px}
body.fn-shell .tab-btn .tab-ico .fn-ico{width:24px;height:24px}
body.fn-shell .tab-btn.on{color:var(--fn-accent)}
body.fn-shell .tab-btn:focus-visible{outline:2px solid var(--fn-accent)!important}
body.fn-shell.glove-mode .tab-btn{min-height:64px;font-size:12px}
body.fn-shell.text-lg .tab-btn{font-size:12.5px}
body.fn-shell.text-lg .fn-mini{font-size:15.5px}
body.fn-shell.text-lg #r1SearchBox{font-size:17px}

/* glove mode: spacing for the bigger targets */
body.fn-shell.glove-mode .fn-left{top:calc(var(--fn-search) + 24px)}
body.fn-shell.glove-mode .fn-fab{top:calc(var(--fn-search) + 24px)}
body.fn-shell.glove-mode .fn-sources{bottom:10px}
/* short screens (SE): tighten */
@media (max-height:700px){
  body.fn-shell .fn-fab{gap:8px}
  body.fn-shell .fn-zoom{bottom:40px}
}
body.fn-shell .naip-row label{min-width:30%;font-size:14px}
body.fn-shell .naip-row input[type=range],body.fn-shell .naip-row select{flex:1 1 55%}
/* walkthrough dots: 44pt hit area, small visual dot */
body.fn-shell .s6-walk-dots{gap:2px;margin:6px 0}
body.fn-shell .s6-walk-dot{width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;background:transparent!important;border-radius:22px;position:relative}
body.fn-shell .s6-walk-dot::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#334155}
body.fn-shell .s6-walk-dot.on::after{background:var(--accent);width:22px;border-radius:6px;margin-left:-11px}
/* short screens in glove mode: horizontal zoom pair so it clears the right-hand control column */
@media (max-height:760px){
  body.fn-shell.glove-mode .fn-zoom .fn-grp{flex-direction:row}
  body.fn-shell.glove-mode .fn-zoom .fn-grp button{width:56px}
  body.fn-shell.glove-mode .fn-zoom .fn-grp button+button{border-top:0;border-left:1px solid rgba(255,255,255,.12)}
}