/* WX Viewer — Mobile PWA Styles
   Color/spacing tokens come from tokens.css (loaded first);
   this block only holds mobile-specific overrides. */
:root {
  --radius:     10px;
  --radius-lg:  18px;
  --tab-h:      32px;
  --scrub-h:    68px;
  --font-data:  'SF Mono','Menlo','Consolas',monospace;
  --font-ui:    -apple-system,'SF Pro Text','Helvetica Neue',sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html,body{
  height:100%;width:100%;
  overflow:hidden;
  background:var(--bg-deep);
  color:var(--text);
  font-family:var(--font-ui);
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  user-select:none;
  -webkit-user-select:none;
}

/* ── Map ── */
#map{
  position:absolute;inset:0;
  z-index:1;
  background:var(--bg-deep);
}
.leaflet-control-zoom{display:none}
.leaflet-control-attribution{
  font-size:8px!important;
  background:rgba(0,0,0,0.4)!important;
  color:var(--text-dim)!important;
  padding:1px 4px!important;
}
.leaflet-control-attribution a{color:var(--text-dim)!important}

/* ── Top bar ── */
.top-bar{
  position:absolute;
  top:0;left:0;right:0;
  z-index:800;
  display:flex;align-items:center;justify-content:space-between;
  padding:calc(var(--safe-t) + 4px) 12px 6px;
  background:linear-gradient(180deg,rgba(8,9,14,0.88) 0%,rgba(8,9,14,0.6) 70%,rgba(8,9,14,0) 100%);
  pointer-events:none;
  min-height:calc(var(--safe-t) + 36px);
  gap:8px;
}
.top-logo{
  display:flex;align-items:center;gap:6px;
  font-family:var(--font-data);
  font-size:14px;font-weight:700;
  letter-spacing:0.14em;
  color:rgba(220,225,234,0.92);
  flex-shrink:0;
  pointer-events:auto;
}
.top-logo svg{opacity:0.85;stroke:var(--accent);width:20px;height:20px}
.logo-accent{color:var(--accent);opacity:0.8}
.top-info{
  font-size:10px;font-weight:600;
  color:var(--text-mid);
  letter-spacing:0.3px;
  font-family:var(--font-data);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  flex:1;text-align:center;
  min-width:0;
}
.top-right{
  display:flex;align-items:center;gap:6px;
  flex-shrink:0;
  pointer-events:auto;
}
.top-value{
  font-size:12px;font-weight:700;
  color:var(--text);
  font-family:var(--font-data);
}
.top-btn{
  width:38px;height:38px;
  display:grid;place-items:center;
  background:rgba(14,16,23,0.7);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid var(--border);
  border-radius:50%;
  color:var(--text-mid);
  cursor:pointer;
  transition:background 0.15s;
  padding:0;
}
.top-btn:active{background:rgba(30,33,48,0.9);color:var(--accent)}
.top-btn.on{background:var(--accent-bg);border-color:var(--accent-dim);color:var(--accent)}
.top-btn.flash{background:var(--accent);color:var(--bg-deep);transition:none}

/* ── Selector pill ── */
.selector-pill{
  position:absolute;
  left:12px;
  bottom:calc(var(--tab-h) + var(--scrub-h) + var(--safe-b) + 12px);
  z-index:800;
  display:flex;align-items:center;gap:6px;
  padding:8px 14px;
  background:rgba(14,16,23,0.88);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--border);
  border-radius:20px;
  color:var(--text);
  font-size:12px;font-weight:600;
  font-family:var(--font-ui);
  cursor:pointer;
  transition:background 0.15s,transform 0.1s;
  max-width:calc(100vw - 24px);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.selector-pill:active{transform:scale(0.96);background:rgba(30,33,48,0.95)}
.selector-pill svg{opacity:0.5;flex-shrink:0}

/* ── Legend ── */
.legend-bar{
  position:absolute;
  right:12px;
  bottom:calc(var(--tab-h) + var(--scrub-h) + var(--safe-b) + 34px);
  z-index:800;
  display:flex;flex-direction:column;align-items:stretch;
  background:rgba(14,16,23,0.82);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:6px 8px 2px;
  width:180px;
  pointer-events:none;
}
.legend-bar.hidden{display:none}
.legend-bar canvas{width:100%;height:10px;border-radius:3px}
.legend-ticks{
  display:flex;justify-content:space-between;
  font-size:8px;color:var(--text-dim);
  font-family:var(--font-data);
  padding:2px 0;
}

/* ── Scrubber ── */
.scrubber{
  position:absolute;
  left:0;right:0;
  bottom:calc(var(--tab-h) + var(--safe-b));
  z-index:810;
  height:var(--scrub-h);
  display:flex;flex-direction:column;
  padding:0 12px;
  background:rgba(8,9,14,0.92);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--border);
}
.scrub-controls{
  display:flex;align-items:center;gap:8px;
  height:46px;flex-shrink:0;
}
.scrub-info{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 2px 4px;
}
.scrub-btn{
  width:36px;height:36px;flex-shrink:0;
  display:grid;place-items:center;
  background:var(--accent-bg);
  border:none;border-radius:50%;
  color:var(--accent);
  cursor:pointer;
  transition:background 0.15s;
}
.scrub-btn:active{background:var(--accent-dim)}
.scrub-btn .hidden{display:none}
.scrub-slider{
  flex:1;height:36px;
  -webkit-appearance:none;appearance:none;
  background:transparent;
  cursor:pointer;
  touch-action:none;
}
.scrub-slider::-webkit-slider-runnable-track{
  height:4px;
  background:var(--bg3);
  border-radius:2px;
}
.scrub-slider::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:20px;height:20px;
  margin-top:-8px;
  background:var(--accent);
  border:2px solid var(--bg);
  border-radius:50%;
}
.speed-btn{
  flex-shrink:0;
  padding:2px 8px;
  background:var(--bg3);
  border:1px solid var(--border);
  border-radius:10px;
  color:var(--text-mid);
  font-size:10px;font-weight:700;
  font-family:var(--font-data);
  cursor:pointer;
  transition:all 0.15s;
  min-width:28px;text-align:center;
}
.speed-btn.fast{color:var(--accent);border-color:var(--accent-dim);background:var(--accent-bg)}
.scrub-valid-time{
  font-size:10px;font-weight:600;
  color:var(--text-mid);
  font-family:var(--font-data);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  flex:1;
}
.scrub-frame-count{
  font-size:10px;font-weight:700;
  color:var(--text-dim);
  font-family:var(--font-data);
  white-space:nowrap;flex-shrink:0;
  margin-left:10px;
  transition:color 0.2s;
}
.scrub-frame-count.loading{
  color:var(--accent);
}

/* ── Tab bar ── */
.tab-bar{
  position:absolute;
  left:0;right:0;bottom:0;
  z-index:820;
  height:calc(var(--tab-h) + var(--safe-b));
  padding-bottom:var(--safe-b);
  display:flex;align-items:stretch;
  background:rgba(8,9,14,0.96);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--border);
}
.tab{
  flex:1;
  display:flex;flex-direction:row;align-items:center;justify-content:center;
  gap:4px;
  background:none;border:none;
  color:var(--text-dim);
  font-size:14px;font-weight:600;
  letter-spacing:0.3px;
  cursor:pointer;
  transition:color 0.15s;
  padding:2px 0;
}
.tab svg{width:16px;height:16px;transition:color 0.15s,transform 0.15s}
.tab.active{color:var(--accent)}
.tab.active svg{transform:scale(1.08)}
.tab:active{opacity:0.7}

/* ── Bottom sheet ── */
.sheet-backdrop{
  position:absolute;inset:0;
  z-index:900;
  background:rgba(0,0,0,0.5);
  opacity:0;transition:opacity 0.25s;
}
.sheet-backdrop.visible{opacity:1}
.sheet-backdrop.hidden{display:none}

.bottom-sheet{
  position:absolute;
  left:0;right:0;bottom:0;
  z-index:910;
  max-height:70vh;
  background:var(--bg);
  border-top-left-radius:var(--radius-lg);
  border-top-right-radius:var(--radius-lg);
  transform:translateY(100%);
  transition:transform 0.3s cubic-bezier(0.32,0.72,0,1);
  display:flex;flex-direction:column;
  padding-bottom:var(--safe-b);
}
.bottom-sheet.visible{transform:translateY(0)}
.bottom-sheet.hidden{display:none}

.sheet-handle{
  display:flex;justify-content:center;padding:10px 0 6px;
  cursor:grab;flex-shrink:0;
}
.handle-bar{
  width:36px;height:4px;
  background:var(--text-dim);
  border-radius:2px;
}

.sheet-content{
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:0 16px 16px;
  flex:1;min-height:0;
}

/* Sheet items */
.sheet-note{
  margin:4px 0 14px;
  padding:12px 13px;
  background:linear-gradient(180deg, rgba(123,159,206,0.14), rgba(123,159,206,0.05));
  border:1px solid rgba(123,159,206,0.18);
  border-radius:12px;
}
.sheet-note-title{
  font-size:11px;
  font-weight:700;
  color:var(--text);
  letter-spacing:0.04em;
  text-transform:uppercase;
  margin-bottom:4px;
}
.sheet-note-text{
  font-size:12px;
  line-height:1.45;
  color:var(--text-mid);
}
.sheet-section{margin-bottom:14px}
.sheet-section-title{
  font-size:10px;font-weight:700;
  color:var(--text-dim);
  text-transform:uppercase;
  letter-spacing:0.8px;
  padding:6px 0;
}
.sheet-chips{
  display:flex;flex-wrap:wrap;gap:6px;
  margin-bottom:8px;
}
.sheet-chip-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:6px;
}
.chip{
  padding:6px 14px;
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:16px;
  color:var(--text-mid);
  font-size:12px;font-weight:600;
  cursor:pointer;
  transition:all 0.15s;
}
.chip.active{
  background:var(--accent-bg);
  border-color:var(--accent-dim);
  color:var(--accent);
}
.chip--grid{
  padding:9px 10px;
  text-align:center;
  min-width:0;
}
.chip:active{transform:scale(0.96)}

.sheet-list{display:flex;flex-direction:column;gap:2px}
.sheet-accordion{
  margin-bottom:10px;
  border:1px solid var(--border);
  border-radius:14px;
  background:rgba(18, 23, 31, 0.74);
  overflow:hidden;
}
.sheet-accordion-toggle{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 13px;
  background:transparent;
  border:0;
  color:var(--text);
  font:inherit;
  font-size:12px;
  font-weight:700;
  letter-spacing:0.04em;
  text-transform:uppercase;
}
.sheet-accordion-chevron{
  flex-shrink:0;
  color:var(--text-dim);
  transition:transform 0.16s ease;
}
.sheet-accordion.open .sheet-accordion-chevron{
  transform:rotate(90deg);
}
.sheet-accordion-body{
  display:none;
  padding:0 8px 8px;
}
.sheet-accordion.open .sheet-accordion-body{
  display:block;
}
.sheet-item{
  padding:10px 12px;
  background:var(--bg2);
  border:1px solid transparent;
  border-radius:var(--radius);
  color:var(--text);
  font-size:13px;font-weight:500;
  cursor:pointer;
  transition:all 0.12s;
  display:flex;align-items:center;justify-content:space-between;
}
.sheet-item:active{background:var(--bg3)}
.sheet-item.active{
  border-color:var(--accent-dim);
  background:var(--accent-bg);
  color:var(--accent);
}
.sheet-item .item-sub{
  font-size:10px;color:var(--text-dim);font-weight:400;
}

@media (max-width: 380px) {
  .sheet-chip-grid{
    grid-template-columns:1fr;
  }
}

/* Radar site search */
.sheet-search{
  width:100%;
  padding:8px 12px;
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  color:var(--text);
  font-size:13px;
  font-family:var(--font-ui);
  margin-bottom:10px;
  outline:none;
}
.sheet-search:focus{border-color:var(--accent-dim)}
.sheet-search::placeholder{color:var(--text-dim)}

/* ── Share sheet ── */
.share-sheet{
  position:absolute;inset:0;
  z-index:950;
  display:flex;align-items:flex-end;justify-content:center;
  background:rgba(0,0,0,0.5);
  padding:0 10px calc(var(--safe-b) + 10px);
}
.share-sheet.hidden{display:none}
.share-sheet-inner{
  width:100%;max-width:400px;
  display:flex;flex-direction:column;gap:1px;
  background:var(--bg3);
  border-radius:var(--radius-lg);
  overflow:hidden;
}
.share-option{
  display:block;width:100%;
  padding:14px 16px;
  background:var(--bg2);
  border:none;
  color:var(--accent);
  font-size:15px;font-weight:500;
  font-family:var(--font-ui);
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  transition:background 0.12s;
}
.share-option:active{background:var(--bg3)}
.share-option.cancel{
  margin-top:8px;
  border-radius:var(--radius-lg);
  font-weight:600;
  color:var(--text);
}

/* ── Sounding panel ── */
.sounding-panel{
  position:absolute;
  left:0;right:0;bottom:0;top:0;
  z-index:920;
  background:linear-gradient(180deg, rgba(7,9,13,0.98), rgba(11,14,19,0.98));
  display:flex;flex-direction:column;
  overflow:hidden;
}
.sounding-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:calc(var(--safe-t) + 10px) 14px 10px;
  border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.sounding-title{
  font-size:15px;font-weight:700;
  color:var(--text);
  font-family:var(--font-data);
}
.sounding-meta{
  font-size:11px;
  color:var(--text-mid);
  font-family:var(--font-data);
  margin-top:3px;
}
.sounding-body{
  flex:1;overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:10px 10px calc(var(--safe-b) + 16px);
}
.sounding-status{
  text-align:center;
  padding:24px 16px;
  font-size:13px;
  color:var(--text-mid);
}
.sounding-status.warn{color:#e5a54b}
.sounding-chart-box{margin-bottom:10px}
.sounding-chart-box svg{width:100%;height:auto;display:block}
.sounding-hodo-box{
  display:flex;justify-content:center;
  margin-bottom:10px;
}
.sounding-hodo-box svg{width:100%;max-width:320px;height:auto;display:block}
.sounding-diag-box{margin-bottom:16px}
.sounding-card{
  background:rgba(15,19,27,0.92);
  border:1px solid rgba(110,130,160,0.18);
  border-radius:16px;
  box-shadow:0 12px 28px rgba(0,0,0,0.22);
  padding:10px;
}
.sounding-card-title{
  font-size:11px;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--text-dim);
  margin:0 0 8px;
}

/* SVG chart styles */
.sounding-chart .grid-line{stroke:rgba(136,154,178,0.18);stroke-width:0.7}
.sounding-chart .grid-line.major{stroke:rgba(136,154,178,0.28);stroke-width:0.95}
.sounding-chart .grid-line.iso-therm{stroke:rgba(136,154,178,0.12);stroke-width:0.55}
.sounding-chart .level-label{font-size:8.5px;fill:var(--text-dim);font-family:var(--font-data)}
.sounding-chart .zero-line{stroke:rgba(123,159,206,0.35);stroke-width:0.8}
.sounding-chart .dry-adiabat,
.sounding-chart .dry-adiabat-line{stroke:rgba(180,120,90,0.22);stroke-width:0.55;fill:none}
.sounding-chart .moist-adiabat,
.sounding-chart .moist-adiabat-line{stroke:rgba(90,160,130,0.24);stroke-width:0.55;fill:none}
.sounding-chart .mixing-ratio-line{stroke:rgba(90,130,90,0.18);stroke-width:0.3;fill:none}
.sounding-chart .temp-line{stroke:#ef4444;stroke-width:2.3;fill:none}
.sounding-chart .dewpoint-line{stroke:#22c55e;stroke-width:2.3;fill:none}
.sounding-chart .wetbulb-line{stroke:rgba(96,165,250,0.6);stroke-width:1.25;fill:none}
.sounding-chart .parcel-line{stroke:rgba(250,204,21,0.72);stroke-width:1.6;fill:none;stroke-dasharray:5 4}
.sounding-chart .cape-fill{fill:rgba(239,68,68,0.18)}
.sounding-chart .cin-fill{fill:rgba(96,165,250,0.18)}
.sounding-chart .wind-staff{stroke:rgba(225,232,240,0.76);stroke-width:1.1;fill:none}
.sounding-chart .wind-pennant{fill:rgba(225,232,240,0.76);stroke:none}
.sounding-chart .axis-label{font-size:8px;fill:var(--text-dim);font-family:var(--font-data)}
.sounding-chart .p-label{font-size:8px;fill:var(--text-dim);font-family:var(--font-data)}

.sounding-hodo .grid-circle{fill:none;stroke:rgba(136,154,178,0.18);stroke-width:0.8}
.sounding-hodo .grid-circle.major{stroke:rgba(136,154,178,0.3);stroke-width:1}
.sounding-hodo .grid-axis{stroke:rgba(136,154,178,0.18);stroke-width:0.7}
.sounding-hodo .ring-label{font-size:7px;fill:var(--text-dim);font-family:var(--font-data)}
.sounding-hodo .hodo-line{fill:none;stroke:var(--accent);stroke-width:2}
.sounding-hodo .hodo-point{fill:var(--accent)}
.sounding-hodo .height-label{font-size:7px;fill:var(--text-mid);font-family:var(--font-data)}
.sounding-hodo .storm-motion{fill:rgba(239,68,68,0.6);stroke:#ef4444;stroke-width:0.8}

.m-snd-diag{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
  background:transparent;
  border-radius:0;
  overflow:hidden;
}
.m-snd-row{
  display:flex;justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  background:rgba(24,29,39,0.92);
  border:1px solid rgba(110,130,160,0.12);
  border-radius:12px;
  font-size:12px;
  font-family:var(--font-data);
}
.m-snd-label{color:var(--text-dim);font-weight:600}
.m-snd-val{color:var(--text);font-weight:600;text-align:right}

@media (min-width: 560px) {
  .m-snd-diag{
    grid-template-columns:1fr 1fr;
  }
}

/* ── GPS location dot ── */
.loc-dot{
  width:14px;height:14px;
  background:#4a9ede;
  border:2.5px solid #fff;
  border-radius:50%;
  box-shadow:0 1px 4px rgba(0,0,0,0.45);
  animation:loc-pulse 2s ease-out infinite;
}
@keyframes loc-pulse{
  0%  {box-shadow:0 0 0 0 rgba(74,158,222,0.55),0 1px 4px rgba(0,0,0,0.45)}
  70% {box-shadow:0 0 0 9px rgba(74,158,222,0), 0 1px 4px rgba(0,0,0,0.45)}
  100%{box-shadow:0 0 0 0 rgba(74,158,222,0), 0 1px 4px rgba(0,0,0,0.45)}
}

/* ── Utilities ── */
.hidden{display:none!important}

/* Loading spinner */
.loading-dot{
  display:inline-block;
  width:6px;height:6px;
  border-radius:50%;
  background:var(--accent);
  animation:pulse 1s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:0.3}50%{opacity:1}}

/* Screenshot flash */
.screen-flash{
  position:fixed;inset:0;
  z-index:9999;
  background:white;
  opacity:1;
  animation:flash-fade 0.3s ease-out forwards;
  pointer-events:none;
}
@keyframes flash-fade{to{opacity:0}}

.mobile-sat-city-tooltip{
  background:transparent;
  border:none;
  box-shadow:none;
  color:rgba(244,247,251,0.92);
  font-size:10px;
  font-weight:600;
  letter-spacing:0.02em;
  text-shadow:0 0 3px rgba(5,8,13,0.95), 0 0 6px rgba(5,8,13,0.8);
  padding:0;
}

.mobile-sat-city-tooltip::before{
  display:none;
}

/* Radar site icon */
.radar-site-icon{
  background:none !important;
  border:none !important;
}

/* Radar site dot tooltip */
.leaflet-tooltip.radar-site-tooltip{
  background:rgba(10,11,16,0.94);
  color:var(--text);
  border:1px solid rgba(74,144,184,0.5);
  border-radius:6px;
  padding:4px 8px;
  font-size:11px;
  font-family:'JetBrains Mono',monospace;
  white-space:nowrap;
}
.leaflet-tooltip.radar-site-tooltip::before{
  border-top-color:rgba(10,11,16,0.94);
}

/* Featured chaser pulsing dot */
.featured-chaser-icon{
  background:none!important;
  border:none!important;
}
.featured-chaser-dot{
  position:absolute;
  top:50%;left:50%;
  width:7px;height:7px;
  margin:-3.5px 0 0 -3.5px;
  background:#00e5ff;
  border:1.5px solid #fff;
  border-radius:50%;
  box-shadow:0 0 4px rgba(0,229,255,0.8);
  z-index:2;
}
.featured-chaser-pulse{
  position:absolute;
  top:50%;left:50%;
  width:7px;height:7px;
  margin:-3.5px 0 0 -3.5px;
  background:rgba(0,229,255,0.4);
  border-radius:50%;
  animation:chaser-pulse 2s ease-out infinite;
  z-index:1;
}
@keyframes chaser-pulse{
  0%{transform:scale(1);opacity:0.7}
  100%{transform:scale(3.5);opacity:0}
}