/* =========================================================
   WX Viewer — Mobile Theme Refresh
   Layered on top of mobile.css to match the desktop refresh.
   ========================================================= */

/* Palette unified with desktop via tokens.css (loaded first);
   mobile radii live in mobile.css. */

html, body {
  background: var(--bg-deep);
}

/* ── Top bar ────────────────────────────────────────────── */
.top-bar {
  background:
    linear-gradient(180deg, rgba(8, 10, 18, 0.92) 0%, rgba(8, 10, 18, 0.55) 70%, rgba(8, 10, 18, 0) 100%);
}
.top-logo {
  font-weight: 800;
  letter-spacing: 0.16em;
  color: #eaf2ff;
}
.top-logo svg {
  stroke: var(--accent-bright);
  opacity: 1;
}
.logo-accent {
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 1;
}
.top-info {
  color: var(--text-mid);
  font-weight: 600;
}
.top-value {
  color: var(--accent-bright);
  font-weight: 700;
}

/* Round buttons */
.top-btn {
  background: rgba(14, 18, 30, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text);
  box-shadow:
    0 6px 18px -8px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.top-btn:active {
  background: rgba(82, 215, 255, 0.18);
  border-color: rgba(82, 215, 255, 0.45);
  color: var(--accent-bright);
}
.top-btn.on {
  background: rgba(82, 215, 255, 0.18);
  border-color: rgba(82, 215, 255, 0.55);
  color: var(--accent-bright);
  box-shadow:
    0 0 0 1px rgba(82, 215, 255, 0.25),
    0 8px 20px -10px rgba(82, 215, 255, 0.6);
}

/* Selector pill */
.selector-pill {
  background: rgba(14, 18, 30, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  padding: 10px 16px;
  color: #eaf2ff;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow:
    0 10px 26px -10px rgba(0, 0, 0, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
}
.selector-pill svg { opacity: 0.8; color: var(--accent); }

/* ── Legend ─────────────────────────────────────────────── */
.legend-bar {
  background: rgba(14, 18, 30, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 8px 10px 4px;
}
.legend-bar canvas { border-radius: 4px; }
.legend-ticks {
  color: var(--text-mid);
}

/* ── Scrubber ───────────────────────────────────────────── */
.scrubber {
  background:
    linear-gradient(180deg, rgba(10, 13, 23, 0.94) 0%, rgba(8, 10, 18, 0.96) 100%);
  border-top: 1px solid var(--border);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
}
.scrub-btn {
  width: 40px; height: 40px;
  background: var(--accent-grad);
  color: #06080f;
  border: none;
  box-shadow:
    0 8px 18px -6px rgba(82, 215, 255, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.scrub-btn:active {
  filter: brightness(1.1);
  transform: scale(0.96);
}
.scrub-slider::-webkit-slider-runnable-track {
  height: 5px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
}
.scrub-slider::-webkit-slider-thumb {
  width: 20px; height: 20px;
  margin-top: -7.5px;
  background: #f3faff;
  border: 2px solid #06080f;
  box-shadow: 0 0 0 2px rgba(82, 215, 255, 0.4);
}
.speed-btn {
  padding: 5px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  color: var(--text-mid);
  font-weight: 700;
  font-size: 10px;
}
.speed-btn.fast {
  background: var(--accent-grad);
  color: #06080f;
  border-color: transparent;
  box-shadow: 0 6px 14px -6px rgba(82, 215, 255, 0.6);
}
.scrub-valid-time { color: var(--text); font-weight: 600; }
.scrub-frame-count { color: var(--text-mid); }
.scrub-frame-count.loading { color: var(--accent-bright); }

/* ── Tab bar ────────────────────────────────────────────── */
.tab-bar {
  background:
    linear-gradient(180deg, rgba(10, 13, 23, 0.9) 0%, rgba(8, 10, 18, 0.98) 100%);
  border-top: 1px solid var(--border);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
}
.tab {
  color: var(--text-mid);
  font-weight: 600;
  letter-spacing: 0.02em;
  position: relative;
}
.tab.active {
  color: var(--accent-bright);
}
.tab.active::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 2px;
  border-radius: 0 0 3px 3px;
  background: var(--accent-grad);
  box-shadow: 0 4px 12px rgba(82, 215, 255, 0.55);
}
.tab.active svg { transform: scale(1.1); }

/* ── Bottom sheet ───────────────────────────────────────── */
.bottom-sheet {
  background:
    linear-gradient(180deg, #141829 0%, #0b0e18 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 -24px 48px -16px rgba(0, 0, 0, 0.7);
  border-top-left-radius: 22px;
  border-top-right-radius: 22px;
}
.handle-bar {
  width: 40px; height: 4px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 999px;
}

/* Sheet section/title polish */
.sheet-section-title {
  color: var(--text-mid);
  letter-spacing: 0.14em;
}

/* Chips (model/param) */
.chip {
  padding: 7px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  color: var(--text);
  font-weight: 600;
}
.chip.active {
  background: linear-gradient(180deg, rgba(82, 215, 255, 0.22), rgba(82, 215, 255, 0.08));
  border-color: rgba(82, 215, 255, 0.55);
  color: var(--accent-bright);
  box-shadow: 0 6px 16px -8px rgba(82, 215, 255, 0.55);
}

/* Sheet items */
.sheet-item {
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--text);
  font-weight: 500;
}
.sheet-item:active { background: rgba(255, 255, 255, 0.07); }
.sheet-item.active {
  background: linear-gradient(90deg, rgba(82, 215, 255, 0.2), rgba(82, 215, 255, 0.05));
  border-color: rgba(82, 215, 255, 0.5);
  color: var(--accent-bright);
}

.sheet-accordion {
  background: rgba(14, 18, 30, 0.7);
  border: 1px solid var(--border);
  border-radius: 14px;
}

.sheet-note {
  background:
    linear-gradient(180deg, rgba(82, 215, 255, 0.12), rgba(82, 215, 255, 0.04));
  border: 1px solid rgba(82, 215, 255, 0.25);
  border-radius: 14px;
}
.sheet-note-title { color: var(--accent-bright); letter-spacing: 0.1em; }

.sheet-search {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.sheet-search:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(82, 215, 255, 0.16);
}

/* ── Share action sheet ─────────────────────────────────── */
.share-sheet-inner {
  background: rgba(20, 25, 40, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
}
.share-option {
  background: transparent;
  color: var(--accent-bright);
  font-weight: 600;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.share-option:last-child { border-bottom: none; }
.share-option:active { background: rgba(82, 215, 255, 0.1); }
.share-option.cancel {
  margin-top: 6px;
  background: rgba(20, 25, 40, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  color: var(--text);
  font-weight: 700;
}

/* ── Sounding panel polish ──────────────────────────────── */
.sounding-panel {
  background:
    linear-gradient(180deg, rgba(7, 9, 16, 0.98), rgba(11, 14, 25, 0.98));
}
.sounding-title {
  font-weight: 700;
  color: #eaf2ff;
}

/* ── GPS dot accent ─────────────────────────────────────── */
.loc-dot {
  background: var(--accent);
  border-color: #fff;
}
@keyframes loc-pulse {
  0%  { box-shadow: 0 0 0 0 rgba(82, 215, 255, 0.6), 0 1px 4px rgba(0,0,0,0.45); }
  70% { box-shadow: 0 0 0 10px rgba(82, 215, 255, 0), 0 1px 4px rgba(0,0,0,0.45); }
  100%{ box-shadow: 0 0 0 0 rgba(82, 215, 255, 0), 0 1px 4px rgba(0,0,0,0.45); }
}

/* =========================================================
   Broadcast Polish — mobile PWA final layer
   ========================================================= */

/* Broadcast palette comes from tokens.css; keep only the
   larger touch radii here. */
:root {
  --radius:     11px;
  --radius-lg:  20px;
}

html,
body {
  background:
    radial-gradient(120% 60% at 10% -5%, rgba(82, 215, 255, 0.14), transparent 70%),
    radial-gradient(100% 60% at 100% 0%, rgba(141, 125, 255, 0.12), transparent 68%),
    var(--bg-deep);
}

.top-bar {
  min-height: calc(var(--safe-t) + 42px);
  background:
    linear-gradient(180deg, rgba(5, 10, 21, 0.96), rgba(5, 10, 21, 0.56) 72%, rgba(5, 10, 21, 0));
}

.top-logo {
  gap: 7px;
  color: #f5f9ff;
}

.top-logo img {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  box-shadow:
    0 0 0 1px rgba(82, 215, 255, 0.36),
    0 8px 18px -12px rgba(82, 215, 255, 0.9);
}

.logo-accent {
  background: linear-gradient(135deg, #52d7ff, #b9ecff 48%, #ffcc66);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.top-info {
  color: rgba(221, 232, 246, 0.78);
}

.top-value {
  color: var(--accent-bright);
}

.top-btn {
  width: 40px;
  height: 40px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)),
    rgba(7, 17, 31, 0.78);
  border-color: rgba(226, 242, 255, 0.13);
  color: rgba(221, 232, 246, 0.82);
}

.top-btn:active,
.top-btn.on {
  background: rgba(82, 215, 255, 0.16);
  border-color: rgba(82, 215, 255, 0.58);
  color: #f7fbff;
}

.selector-pill {
  bottom: calc(var(--tab-h) + var(--scrub-h) + var(--safe-b) + 16px);
  max-width: min(58vw, 310px);
  background:
    linear-gradient(180deg, rgba(14, 31, 54, 0.9), rgba(5, 10, 21, 0.88));
  border-color: rgba(226, 242, 255, 0.13);
  color: #f5f9ff;
}

.selector-pill svg {
  color: var(--accent-bright);
}

.legend-bar {
  right: 12px;
  bottom: calc(var(--tab-h) + var(--scrub-h) + var(--safe-b) + 40px);
  width: min(190px, 43vw);
  background:
    linear-gradient(180deg, rgba(14, 31, 54, 0.86), rgba(5, 10, 21, 0.82));
  border-color: rgba(226, 242, 255, 0.13);
}

.scrubber {
  height: calc(var(--scrub-h) + 4px);
  background:
    linear-gradient(180deg, rgba(14, 31, 54, 0.96), rgba(5, 10, 21, 0.98));
  border-top-color: rgba(226, 242, 255, 0.12);
  box-shadow:
    0 -12px 36px rgba(0, 0, 0, 0.44),
    0 -1px 0 rgba(82, 215, 255, 0.1);
}

.scrub-btn {
  background: linear-gradient(135deg, #52d7ff, #ffcc66);
  color: #06101d;
}

.scrub-slider::-webkit-slider-runnable-track {
  background: rgba(255, 255, 255, 0.15);
}

.scrub-slider::-webkit-slider-thumb {
  background: #f7fbff;
  border-color: #06101d;
  box-shadow: 0 0 0 2px rgba(82, 215, 255, 0.44);
}

.speed-btn.fast {
  background: linear-gradient(135deg, #52d7ff, #ffcc66);
}

.scrub-valid-time {
  color: #edf6ff;
}

.tab-bar {
  background:
    linear-gradient(180deg, rgba(10, 22, 39, 0.94), rgba(5, 10, 21, 0.99));
  border-top-color: rgba(226, 242, 255, 0.12);
}

.tab {
  color: rgba(155, 174, 197, 0.84);
}

.tab.active {
  color: #f5f9ff;
}

.tab.active::after {
  background: linear-gradient(90deg, #52d7ff, #ffcc66);
  box-shadow: 0 4px 14px rgba(82, 215, 255, 0.58);
}

.bottom-sheet,
.sounding-panel {
  background:
    radial-gradient(circle at top right, rgba(82, 215, 255, 0.13), transparent 38%),
    linear-gradient(180deg, #0f2138 0%, #06101d 100%);
  border-top-color: rgba(226, 242, 255, 0.13);
}

.sheet-accordion,
.sheet-item,
.chip,
.sheet-note,
.share-sheet-inner,
.stn-detail-panel {
  border-color: rgba(226, 242, 255, 0.11);
}

.chip.active,
.sheet-item.active {
  background: linear-gradient(90deg, rgba(82, 215, 255, 0.2), rgba(141, 125, 255, 0.07));
  border-color: rgba(82, 215, 255, 0.54);
  color: var(--accent-bright);
}

.sheet-note {
  background:
    linear-gradient(180deg, rgba(82, 215, 255, 0.12), rgba(82, 215, 255, 0.04));
  border-color: rgba(82, 215, 255, 0.24);
}

.share-option {
  color: var(--accent-bright);
}

.loc-dot {
  background: var(--accent);
}

@keyframes loc-pulse-broadcast {
  0%  { box-shadow: 0 0 0 0 rgba(82, 215, 255, 0.64), 0 1px 4px rgba(0,0,0,0.45); }
  70% { box-shadow: 0 0 0 10px rgba(82, 215, 255, 0), 0 1px 4px rgba(0,0,0,0.45); }
  100%{ box-shadow: 0 0 0 0 rgba(82, 215, 255, 0), 0 1px 4px rgba(0,0,0,0.45); }
}

.loc-pulse,
.loc-dot.pulse {
  animation-name: loc-pulse-broadcast;
}

@media (max-width: 430px) {
  .top-logo span {
    display: none;
  }

  .selector-pill {
    max-width: 48vw;
    padding-inline: 13px;
  }

  .legend-bar {
    width: 42vw;
    min-width: 150px;
  }

  .top-btn {
    width: 38px;
    height: 38px;
  }
}

@media (max-width: 360px) {
  .top-right {
    gap: 4px;
  }

  .top-btn {
    width: 35px;
    height: 35px;
  }

  .selector-pill {
    max-width: calc(100vw - 24px);
  }

  .legend-bar {
    display: none;
  }
}

/* View switcher footer */
.mobile-view-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--tab-h, 0px) + var(--scrub-h, 0px) + var(--safe-b, 0px) + 4px);
  z-index: 900;
  display: flex;
  justify-content: center;
  padding: 6px;
  pointer-events: none;
}

.mobile-view-footer a {
  pointer-events: auto;
  color: rgba(225, 235, 246, 0.55);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 6px 12px;
}

.mobile-view-footer a:active {
  color: rgba(225, 235, 246, 0.9);
}

/* Keep map controls readable and reachable on narrow phones. */
:root {
  --tab-h: 54px;
  --scrub-h: 72px;
}

.top-info { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.top-right { flex-shrink: 0; }
.mobile-view-footer { display: none; } /* View switching is in the Share sheet. */

.selector-pill {
  min-height: 44px;
  max-width: calc(52vw - 20px);
  bottom: calc(var(--tab-h) + var(--scrub-h) + var(--safe-b) + 12px);
  border-radius: 14px;
  background: rgba(9, 22, 37, 0.96);
}
#pillLabel { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.legend-bar {
  display: flex;
  width: calc(48vw - 16px);
  min-width: 0;
  bottom: calc(var(--tab-h) + var(--scrub-h) + var(--safe-b) + 12px);
  padding: 8px 9px 6px;
  border-radius: 12px;
  background: rgba(9, 22, 37, 0.96);
}
.legend-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
  color: var(--text);
  margin-bottom: 5px;
}
.legend-ticks { font-size: 9px; color: var(--text-mid); }
.tab { flex-direction: column; gap: 4px; font-size: 11px; letter-spacing: 0; }
.tab svg { width: 19px; height: 19px; }
.scrub-btn { min-width: 44px; min-height: 44px; }
.speed-btn { min-width: 40px; min-height: 32px; }
.scrub-btn:disabled, .scrub-slider:disabled { opacity: 0.45; cursor: default; }
.chip, .sheet-item { font-family: inherit; text-align: left; }
.chip { min-height: 40px; }
.sheet-item { width: 100%; min-height: 46px; }
.sheet-item[hidden], .sheet-accordion[hidden] { display: none; }
.sheet-search-label { display: block; color: var(--text-mid); font-size: 12px; margin: 4px 0 8px; }
#modelProductSearch { margin-bottom: 16px; font-size: 16px; }
button:focus-visible, input:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
.legend-note { color: var(--text-mid); font-size: 8px; line-height: 1.35; margin-top: 4px; }
.legend-note:empty { display: none; }
.legend-bar canvas[hidden], .legend-ticks[hidden] { display: none; }

/* Mobile workspace: quiet surfaces, clear selection, and legible map controls. */
.top-bar {
  background: rgba(16,23,34,.97); border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 12px #0003; padding-bottom: 10px;
}
.top-logo { letter-spacing: .035em; }
.logo-accent { background: none; color: var(--text-mid); -webkit-text-fill-color: currentColor; }
.top-info { font-family: var(--font-ui); font-size: 11px; font-weight: 600; color: var(--text); }
.top-btn { background: var(--bg2); border-color: var(--border); border-radius: 10px; box-shadow: none; }
.top-btn.on { background: var(--accent-bg); border-color: var(--accent-dim); box-shadow: none; color: var(--accent-bright); }
.selector-pill { background: rgba(16,23,34,.97); border-color: var(--border-strong); border-radius: 10px; font-family: var(--font-ui); font-size: 12px; box-shadow: 0 4px 16px #0004; }
.legend-bar { background: rgba(16,23,34,.97); border-color: var(--border-strong); border-radius: 10px; padding: 10px 12px 8px; }
.legend-label { font-family: var(--font-ui); font-size: 10px; letter-spacing: 0; }
.legend-note { font-family: var(--font-ui); font-size: 9px; line-height: 1.4; }
.legend-ticks { position: relative; display: block; height: 13px; font-size: 9px; color: var(--text-mid); }
.legend-ticks span { position: absolute; transform: translateX(-50%); }
.legend-ticks span:first-child { transform: none; }
.legend-ticks span:last-child { transform: translateX(-100%); }
.scrubber, .tab-bar { background: var(--bg); border-color: var(--border); box-shadow: none; }
.scrub-btn { background: #8bb8ff; color: #101722; border-radius: 10px; box-shadow: none; }
.speed-btn { border-radius: 8px; background: var(--bg2); border-color: var(--border); color: var(--text-mid); }
.speed-btn.fast { background: var(--accent-bg); color: var(--accent-bright); border-color: var(--accent-dim); }
.scrub-label { color: var(--text); }
.tab { color: var(--text-dim); font-family: var(--font-ui); font-weight: 500; letter-spacing: 0; }
.tab.active { color: var(--accent-bright); background: var(--accent-bg); }
.tab.active::before { background: var(--accent); box-shadow: none; }
.bottom-sheet { background: var(--bg); border-color: var(--border-strong); border-radius: 18px 18px 0 0; }
.sheet-title { font-family: var(--font-ui); letter-spacing: 0; }
.sheet-item, .chip { background: var(--bg2); border-color: var(--border); font-family: var(--font-ui); }
.sheet-item.active, .chip.active { background: var(--accent-bg); border-color: var(--accent-dim); color: var(--accent-bright); box-shadow: none; }

.tab.active::after { background: var(--accent); box-shadow: none; }

/* Radar gate boundaries stay sharp when the map enlarges the source image. */
.radar-overlay { image-rendering: pixelated; transition: none; }

/* Larger playback targets and a readable valid-time row without truncation. */
:root { --scrub-h: 98px; }
.scrubber { height: var(--scrub-h); padding: 8px 12px; gap: 6px; }
.scrub-controls { height: 44px; gap: 12px; }
.scrub-btn { width: 44px; height: 44px; }
.scrub-slider { height: 44px; }
.speed-btn { min-width: 44px; min-height: 44px; font-size: 12px; }
.scrub-info { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; align-items: start; padding: 0; }
.scrub-valid-time { font: 500 12px/16px var(--font-ui); white-space: normal; overflow: visible; text-overflow: clip; }
.scrub-frame-count { font-size: 11px; line-height: 16px; margin: 0; }

/* Run state is written out, and saved products sit above the full catalog. */
.sheet-runs { display: grid; grid-template-columns: 1fr; gap: 8px; }
.sheet-runs .chip { display: flex; justify-content: space-between; gap: 12px; text-align: left; min-height: 44px; }
.run-status { color: var(--text-mid); font-size: 11px; }
.sheet-product-row { display: flex; gap: 8px; }
.sheet-product-row[hidden] { display: none; }
.sheet-product-row .sheet-item { flex: 1; min-width: 0; }
.favorite-star { flex: 0 0 44px; min-height: 44px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg2); color: var(--text-mid); font-size: 21px; cursor: pointer; }
.favorite-star[aria-pressed="true"] { color: #7dd3e8; background: var(--accent-bg); border-color: var(--accent-dim); }
.sheet-favorites-note { color: var(--text-mid); font: 12px/1.5 var(--font-ui); }
.sheet-favorites .sheet-list { display: grid; gap: 8px; }
.sheet-run-select { display: block; width: 100%; margin-top: 8px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--bg2); color: var(--text); font: 12px var(--font-ui); }