/* MB-HAM-Atlas — layered map UI
   Layout: full-bleed map stage with a floating control dock on the left and a
   readout panel on the right. Both docks collapse so the map can be used at
   full width, and both become sheets on narrow screens. */

:root {
  --bg:#050b16; --panel:rgba(11,22,40,.92); --panel-solid:#0b1628;
  --panel-2:rgba(17,31,56,.85); --line:rgba(58,94,148,.38);
  --text:#eaf4ff; --muted:#8da5c0; --dim:#5d7591;
  --accent:#ff453a; --accent-2:#22d3ee; --good:#34d399; --warn:#fbbf24; --bad:#f87171;
  --rx:#22d3ee; --tx:#fb923c;
  --radius:14px; --shadow:0 18px 50px rgba(0,0,0,.55);
}
html[data-theme="light"]{
  --bg:#eef3fa; --panel:rgba(255,255,255,.94); --panel-solid:#ffffff;
  --panel-2:rgba(238,243,250,.9); --line:rgba(20,40,70,.16);
  --text:#0e1b28; --muted:#4a6076; --dim:#6b8199;
  --shadow:0 18px 45px rgba(20,33,49,.18);
}

*{box-sizing:border-box}
.atlas-wrap{position:relative;background:var(--bg);color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}

/* ── Map stage ───────────────────────────────────────────────────────────── */
/* Height is set precisely by atlas-ui.js from the stage's own offset, because
   the site nav is not a fixed height across breakpoints. The calc() here is
   only a pre-hydration fallback. */
.atlas-stage{position:relative;width:100%;height:calc(100vh - 72px);min-height:560px;overflow:hidden}
.atlas-view{position:absolute;inset:0;display:none;z-index:1;isolation:isolate}
/* Leaflet gives its own panes z-index 400-800. `isolation:isolate` above keeps
   those inside this wrapper so the docks (z-index 20) still paint on top —
   without it the imagery view covers the control that switches back to it. */
.atlas-view.is-active{display:block}
#viewAz{display:grid;place-items:center;padding:6px}
#viewAz svg{width:100%;height:100%;max-width:100%;max-height:100%;
  user-select:none;touch-action:none;cursor:grab}
#viewAz svg.dragging{cursor:grabbing}
#viewSat{background:#0a1420}
#leafletMap{position:absolute;inset:0}

.interactive-feature:hover polygon{filter:brightness(1.45);cursor:pointer}
.interactive-feature.selected polygon{fill:var(--accent)!important;stroke:#fff!important;stroke-width:1.8!important}

/* ── Floating docks ──────────────────────────────────────────────────────── */
.dock{position:absolute;top:12px;z-index:20;width:330px;max-height:calc(100% - 56px);
  display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);backdrop-filter:blur(16px);
  transition:transform .28s cubic-bezier(.4,0,.2,1),opacity .28s}
.dock-left{left:12px}
.dock-right{right:12px;width:310px}
.dock.collapsed{transform:translateX(calc(-100% - 20px));opacity:0;pointer-events:none}
.dock-right.collapsed{transform:translateX(calc(100% + 20px))}
.dock-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 14px;border-bottom:1px solid var(--line);flex:0 0 auto}
.dock-head h2{margin:0;font-size:13px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.dock-body{overflow-y:auto;overscroll-behavior:contain;padding:4px 14px 14px;flex:1 1 auto;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.dock-body::-webkit-scrollbar{width:8px}
.dock-body::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px}

.brandline{display:flex;align-items:baseline;gap:8px}
.brandline strong{font-size:16px;letter-spacing:-.02em}
.pill{font-size:10px;font-weight:900;letter-spacing:.08em;padding:3px 7px;border-radius:99px;
  background:var(--accent);color:#fff;text-transform:uppercase}

/* ── Sections ────────────────────────────────────────────────────────────── */
.sec{border-bottom:1px solid var(--line);padding:12px 0}
.sec:last-child{border-bottom:0}
.sec>summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;
  font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:2px 0}
.sec>summary::-webkit-details-marker{display:none}
.sec>summary::after{content:"▾";font-size:11px;transition:transform .2s;color:var(--dim)}
.sec[open]>summary::after{transform:rotate(180deg)}
.sec-body{padding-top:10px;display:flex;flex-direction:column;gap:9px}

label.fld{display:block;font-size:10px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:var(--dim);margin-bottom:4px}
input[type=text],input[type=search],select{width:100%;border:1px solid var(--line);
  background:var(--panel-2);color:var(--text);border-radius:10px;padding:9px 10px;
  font-size:13px;font-family:inherit;outline:none;transition:border-color .15s,box-shadow .15s}
input:focus,select:focus{border-color:var(--accent-2);box-shadow:0 0 0 3px rgba(34,211,238,.16)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.row3{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}

/* ── Toggle switches ─────────────────────────────────────────────────────── */
.tog{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:6px 0;font-size:13px;font-weight:600;cursor:pointer}
.tog span.lbl{display:flex;align-items:center;gap:7px}
.tog .swatch{width:11px;height:11px;border-radius:3px;flex:0 0 auto}
.tog input{appearance:none;width:36px;height:20px;border-radius:99px;background:var(--line);
  position:relative;cursor:pointer;transition:background .2s;flex:0 0 auto;border:0;margin:0}
.tog input::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;
  border-radius:50%;background:#fff;transition:transform .2s}
.tog input:checked{background:var(--accent-2)}
.tog input:checked::after{transform:translateX(16px)}
.tog.disabled{opacity:.45;pointer-events:none}

/* ── Segmented control ───────────────────────────────────────────────────── */
.seg{display:flex;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:3px;gap:3px}
.seg button{flex:1;border:0;background:transparent;color:var(--muted);font-family:inherit;
  font-size:11.5px;font-weight:800;padding:7px 4px;border-radius:7px;cursor:pointer;transition:.15s}
.seg button.on{background:var(--accent-2);color:#04222a}
.seg button:hover:not(.on){color:var(--text)}

/* ── Chips ───────────────────────────────────────────────────────────────── */
.chips{display:flex;flex-wrap:wrap;gap:5px}
.chip{border:1px solid var(--line);background:var(--panel-2);color:var(--muted);
  font-size:11px;font-weight:800;padding:5px 9px;border-radius:99px;cursor:pointer;
  font-family:inherit;transition:.15s}
.chip.on{background:var(--accent-2);color:#04222a;border-color:transparent}
.chip:hover:not(.on){color:var(--text);border-color:var(--accent-2)}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn{border:0;cursor:pointer;background:var(--accent);color:#fff;border-radius:10px;
  padding:10px 13px;font-weight:800;font-size:13px;font-family:inherit;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;text-decoration:none;transition:.15s}
.btn:hover{filter:brightness(1.12)}
.btn.ghost{background:var(--panel-2);color:var(--text);border:1px solid var(--line)}
.btn.sm{padding:7px 10px;font-size:11.5px;border-radius:8px}
.btnrow{display:flex;gap:7px;flex-wrap:wrap}

.iconbtn{width:38px;height:38px;padding:0;border-radius:11px;background:var(--panel);
  color:var(--text);border:1px solid var(--line);cursor:pointer;font-size:15px;
  display:grid;place-items:center;backdrop-filter:blur(12px);box-shadow:var(--shadow);transition:.15s}
.iconbtn:hover{border-color:var(--accent-2);color:var(--accent-2)}
.iconbtn.on{background:var(--accent-2);color:#04222a;border-color:transparent}

.maptools{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:22;
  display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.dock-toggle{position:absolute;top:12px;z-index:26}
.dock-toggle.left{left:12px}
.dock-toggle.right{right:12px}

/* ── Readouts ────────────────────────────────────────────────────────────── */
.stat{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:6px 0;border-bottom:1px solid var(--line);font-size:12.5px;color:var(--muted)}
.stat:last-child{border-bottom:0}
.stat b{font-size:13.5px;color:var(--text);font-variant-numeric:tabular-nums;font-weight:800}
.stat b.big{font-size:17px}
.note{color:var(--dim);font-size:11px;line-height:1.5;margin:0}
.note.warn{color:var(--warn)}
.note.bad{color:var(--bad)}
.kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}
.kpi{background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:9px 10px}
.kpi .v{font-size:17px;font-weight:900;font-variant-numeric:tabular-nums;line-height:1.15}
.kpi .k{font-size:9.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--dim);margin-top:2px}

.bandbar{display:flex;align-items:center;gap:7px;font-size:11.5px;padding:3px 0}
.bandbar .nm{width:38px;font-weight:800;color:var(--muted);flex:0 0 auto}
.bandbar .tr{flex:1;height:6px;background:var(--panel-2);border-radius:99px;overflow:hidden}
.bandbar .fi{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--accent-2),var(--good))}
.bandbar .vl{width:44px;text-align:right;font-variant-numeric:tabular-nums;color:var(--dim);flex:0 0 auto}

.pathrow{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--line);font-size:12px}
.pathrow:last-child{border-bottom:0}
.pathrow .em{font-size:15px;flex:0 0 auto}
.pathrow .nm{flex:1;min-width:0;font-weight:700}
.pathrow .nm small{display:block;color:var(--dim);font-weight:600;font-size:10.5px}
.pathrow .bd{font-weight:900;font-variant-numeric:tabular-nums;flex:0 0 auto}
.pathrow.open .bd{color:var(--good)}
.pathrow.shut .bd{color:var(--dim)}

.legend{display:flex;flex-wrap:wrap;gap:8px;font-size:10.5px;color:var(--muted);font-weight:700}
.legend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:4px;vertical-align:-1px}

.spin{display:inline-block;width:11px;height:11px;border:2px solid var(--line);
  border-top-color:var(--accent-2);border-radius:50%;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

/* ── SVG overlay styling ─────────────────────────────────────────────────── */
.terminator-line{fill:none;stroke:#ff9f0a;stroke-width:2.6;opacity:.95;stroke-linecap:round}
.night-shade{fill:#000;opacity:.30;pointer-events:none}
.rose-rx{fill:var(--rx);fill-opacity:.42;stroke:var(--rx);stroke-width:.7}
.rose-tx{fill:var(--tx);fill-opacity:.42;stroke:var(--tx);stroke-width:.7}
.spot-dot{stroke:rgba(0,0,0,.4);stroke-width:.4}
.sat-track{fill:none;stroke-width:1.3;opacity:.7;stroke-dasharray:4 3}
.sat-foot{fill-opacity:.10;stroke-width:1.1;stroke-opacity:.65}
.muf-sector{stroke-width:1;stroke-opacity:.85}

/* ── Tooltip ─────────────────────────────────────────────────────────────── */
#atlasTip{position:fixed;z-index:80;pointer-events:none;opacity:0;transition:opacity .12s;
  background:var(--panel-solid);border:1px solid var(--line);border-radius:9px;
  padding:8px 10px;font-size:11.5px;line-height:1.5;box-shadow:var(--shadow);max-width:250px}
#atlasTip.on{opacity:1}
#atlasTip b{color:var(--accent-2)}

/* ── Leaflet theming ─────────────────────────────────────────────────────── */
.leaflet-container{background:#0a1420;font-family:inherit}
.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:var(--panel-solid);color:var(--text);
  border:1px solid var(--line);box-shadow:var(--shadow)}
.leaflet-popup-content{font-size:12px;line-height:1.55;margin:9px 11px}
.leaflet-bar a{background:var(--panel-solid);color:var(--text);border-bottom-color:var(--line)}
.leaflet-bar a:hover{background:var(--panel-2);color:var(--accent-2)}
.leaflet-control-attribution{background:rgba(5,11,22,.8)!important;color:var(--dim)!important;font-size:10px}
.leaflet-control-attribution a{color:var(--muted)!important}
.sat-icon{background:none;border:0}
.marker-cluster{background:rgba(34,211,238,.28);border-radius:50%}
.marker-cluster div{background:rgba(34,211,238,.75);color:#04222a;font-weight:900;
  border-radius:50%;width:30px;height:30px;margin:5px;display:grid;place-items:center;font-size:12px}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width:1100px){ .dock{width:300px} .dock-right{width:280px} }
@media (max-width:860px){
  .atlas-stage{min-height:520px}
  /* Docks become bottom sheets. They stop 58px short of the bottom so the map
     toolbar below stays reachable — a full-height sheet would otherwise bury
     the control that switches views. */
  /* --toolbar-h is measured in atlas-ui.js: the toolbar wraps to two rows on
     narrow screens, so a fixed reserve here would be wrong at some widths. */
  .dock{position:absolute;left:0;right:0;top:auto;bottom:calc(var(--toolbar-h,44px) + 18px);
    width:auto!important;max-height:calc(100% - var(--toolbar-h,44px) - 80px);
    border-radius:16px 16px 0 0;border-bottom:0}
  .dock.collapsed,.dock-right.collapsed{transform:translateY(calc(100% + var(--toolbar-h,44px) + 30px))}
  .maptools{top:auto;bottom:10px;z-index:24;gap:5px}
  .maptools .seg button{font-size:11px;padding:6px 8px}
  .iconbtn{width:34px;height:34px;font-size:14px}
  #viewAz svg{width:100%;height:100%}
}
@media print{
  .dock,.maptools,.dock-toggle,#atlasTip{display:none!important}
  .atlas-stage{height:auto}
  body{background:#fff}
}