/* cca-weather viewer — map-first layout layered on the NYC Core Framework.
   Mirrors the cca-radiodb / cca-aerospace look (system fonts, NYC blue accents)
   but goes full-bleed so the map + time scrubber own the screen. */

:root {
  --wx-bg: #0b1721;
  --wx-page: #eef2f7;
  --wx-panel: rgba(255, 255, 255, 0.96);
  --wx-surface: #ffffff;
  --wx-surface-2: #f1f6ff;
  --wx-hover: #f3f7fc;
  --wx-switch-off: #c7d2dd;
  --wx-ink: #1b2733;
  --wx-accent: #1f6feb;
  --wx-muted: #5b6b7b;
  --wx-border: #d7dee6;
  --wx-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
  --wx-radius: 10px;
}

[data-theme="dark"] {
  --wx-bg: #060c12;
  --wx-page: #0a121b;
  --wx-panel: rgba(20, 27, 36, 0.97);
  --wx-surface: #161e28;
  --wx-surface-2: #1f2a37;
  --wx-hover: #1f2a37;
  --wx-switch-off: #3a4a5c;
  --wx-ink: #e6edf3;
  --wx-muted: #93a4b5;
  --wx-border: #2b3a4a;
  --wx-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--wx-ink);
  background: var(--wx-bg);
  overflow: hidden;
}

#map { position: absolute; inset: 0; }

/* ---- top bar ---- */
.wx-topbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 5;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  background: linear-gradient(180deg, rgba(8, 18, 27, 0.92), rgba(8, 18, 27, 0.0));
  color: #fff; pointer-events: none;
}
.wx-topbar > * { pointer-events: auto; }
.wx-brand { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 1.05rem; white-space: nowrap; }
.wx-brand i { color: #7fb2ff; }
.wx-brand small { font-weight: 500; opacity: 0.7; font-size: 0.72rem; }

.wx-search { position: relative; flex: 1; max-width: 420px; }
.wx-search input {
  width: 100%; border: none; border-radius: 999px; padding: 9px 38px 9px 16px;
  font-size: 0.92rem; color: var(--wx-ink); background: var(--wx-surface); box-shadow: var(--wx-shadow);
}
.wx-search .wx-search-btn {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  border: none; background: var(--wx-accent); color: #fff; width: 28px; height: 28px;
  border-radius: 50%; cursor: pointer;
}
.wx-search-results {
  position: absolute; top: 44px; left: 0; right: 0; background: var(--wx-surface); color: var(--wx-ink);
  border-radius: var(--wx-radius); box-shadow: var(--wx-shadow); overflow: hidden; display: none;
}
.wx-search-results.show { display: block; }
.wx-search-results button {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; border: none; background: none;
  color: var(--wx-ink); padding: 9px 14px; cursor: pointer; font-size: 0.88rem; border-bottom: 1px solid var(--wx-border);
}
.wx-search-results button:hover { background: var(--wx-surface-2); }
.wx-search-results button > i { color: var(--wx-muted); width: 14px; text-align: center; flex: none; }
.wx-res-text { display: flex; flex-direction: column; min-width: 0; }
.wx-res-label { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wx-res-sub { font-size: 0.72rem; color: var(--wx-muted); }

.wx-topbar-actions { display: flex; gap: 8px; margin-left: auto; }
.wx-btn {
  border: none; border-radius: 8px; padding: 8px 12px; font-size: 0.85rem; font-weight: 600;
  cursor: pointer; box-shadow: var(--wx-shadow); background: var(--wx-surface); color: var(--wx-ink);
  display: inline-flex; align-items: center; gap: 6px;
}
.wx-btn.accent { background: var(--wx-accent); color: #fff; }
.wx-btn:hover { filter: brightness(1.05); }

/* ---- layer panel ---- */
.wx-panel {
  position: absolute; top: 64px; left: 14px; z-index: 4; width: 290px; max-width: calc(100vw - 28px);
  background: var(--wx-panel); border-radius: var(--wx-radius); box-shadow: var(--wx-shadow);
  max-height: calc(100vh - 200px); display: flex; flex-direction: column;
}
.wx-panel h2 {
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--wx-muted);
  margin: 0; padding: 12px 14px 8px;
}
.wx-layers { overflow-y: auto; padding: 0 8px 8px; }
.wx-layer {
  border-radius: 8px; padding: 8px 8px; margin-bottom: 2px;
}
.wx-layer:hover { background: var(--wx-hover); }
.wx-layer-head { display: flex; align-items: center; gap: 9px; cursor: pointer; }
.wx-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; box-shadow: 0 0 0 2px rgba(0,0,0,0.06); }
.wx-layer-title { font-size: 0.9rem; font-weight: 600; flex: 1; }
.wx-layer-cat { font-size: 0.68rem; color: var(--wx-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.wx-switch { width: 36px; height: 20px; border-radius: 999px; background: var(--wx-switch-off); position: relative; transition: background 0.15s; flex: none; }
.wx-switch::after { content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%; background: #fff; top: 2px; left: 2px; transition: left 0.15s; box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
.wx-layer.on .wx-switch { background: var(--wx-accent); }
.wx-layer.on .wx-switch::after { left: 18px; }
.wx-layer-body { display: none; padding: 8px 2px 2px; }
.wx-layer.on .wx-layer-body { display: block; }
.wx-opacity { width: 100%; }
.wx-legend { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 7px; }
.wx-legend span { font-size: 0.7rem; color: var(--wx-muted); display: inline-flex; align-items: center; gap: 4px; }
.wx-legend i { width: 11px; height: 11px; border-radius: 2px; display: inline-block; }
.wx-product-select { width: 100%; margin-top: 6px; font-size: 0.82rem; padding: 5px; border-radius: 6px; border: 1px solid var(--wx-border); background: var(--wx-surface); color: var(--wx-ink); }
.wx-site-select { width: 100%; margin-top: 6px; margin-bottom: 2px; font-size: 0.82rem; padding: 5px; border-radius: 6px; border: 1px solid var(--wx-border); background: var(--wx-surface); color: var(--wx-ink); }

/* ================= Phase-1 chrome: menu island, dock, tools, crosshair ================= */

/* ---- top floating menu island ---- */
.wx-menu {
  position: absolute; top: 58px; left: 50%; transform: translateX(-50%); z-index: 6;
  display: flex; gap: 3px; padding: 5px; max-width: calc(100vw - 20px); overflow-x: auto;
  background: var(--wx-panel); border-radius: 999px; box-shadow: var(--wx-shadow);
  scrollbar-width: none;
}
.wx-menu::-webkit-scrollbar { display: none; }
.wx-menu-btn {
  position: relative; border: none; background: none; color: var(--wx-ink); cursor: pointer;
  border-radius: 999px; padding: 7px 13px; font-size: 0.84rem; font-weight: 600;
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
}
.wx-menu-btn:hover { background: var(--wx-hover); }
.wx-menu-btn.active { background: var(--wx-accent); color: #fff; }
.wx-menu-btn .wx-menu-ico { font-size: 0.95rem; width: 16px; text-align: center; }
.wx-menu-btn .wx-menu-on {
  width: 7px; height: 7px; border-radius: 50%; background: #33d17a; margin-left: 1px;
  box-shadow: 0 0 0 2px var(--wx-panel); display: none;
}
.wx-menu-btn.haslayer .wx-menu-on { display: inline-block; }

.wx-menu-pop {
  position: absolute; top: 106px; left: 50%; transform: translateX(-50%); z-index: 6;
  width: min(330px, calc(100vw - 20px));
  background: var(--wx-panel); border-radius: var(--wx-radius); box-shadow: var(--wx-shadow);
  padding: 8px; display: none; max-height: calc(100vh - 230px); overflow-y: auto;
}
.wx-menu-pop.show { display: block; }
.wx-menu-pop .wx-pop-empty { color: var(--wx-muted); font-size: 0.82rem; padding: 14px; text-align: center; }

/* ---- bottom-left product + settings dock ---- */
.wx-dock {
  position: absolute; left: 14px; bottom: 22px; z-index: 6;
  width: 258px; max-width: calc(100vw - 28px);
  background: var(--wx-panel); border-radius: 14px; box-shadow: var(--wx-shadow); overflow: hidden;
}
.wx-dock[hidden] { display: none; }
.wx-dock-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--wx-border); }
.wx-dock-title { font-weight: 700; font-size: 0.9rem; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; border-radius: 6px; padding: 3px 5px; }
.wx-dock-title:hover { background: var(--wx-hover); }
.wx-dock-title .fa-caret-down { color: var(--wx-muted); font-size: 0.75rem; margin-left: 3px; }

/* Searchable site picker under the dock header */
.wx-dock-sites { padding: 8px 10px; border-bottom: 1px solid var(--wx-border); }
.wx-dock-sites[hidden] { display: none; }
.wx-dock-sites input {
  width: 100%; border: 1px solid var(--wx-border); border-radius: 8px; padding: 6px 9px;
  background: var(--wx-surface); color: var(--wx-ink); font-size: 0.8rem; box-sizing: border-box;
}
.wx-site-list { max-height: 200px; overflow-y: auto; margin-top: 6px; display: flex; flex-direction: column; gap: 2px; }
.wx-site-row {
  flex: none; text-align: left; border: none; background: transparent; color: var(--wx-ink);
  padding: 5px 7px; border-radius: 7px; cursor: pointer; font-size: 0.78rem; line-height: 1.25;
}
.wx-site-row:hover { background: var(--wx-hover); }
.wx-site-row.active { background: var(--wx-accent); color: #fff; }
.wx-site-row small { color: var(--wx-muted); }
.wx-site-none { color: var(--wx-muted); font-size: 0.78rem; padding: 6px; }
.wx-l3dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #d13ac4; margin-left: 4px; vertical-align: middle; }

/* In-dock notice (e.g. product not rendered at this site) */
.wx-dock-note {
  margin: 8px 10px 0; padding: 7px 9px; border-radius: 9px; font-size: 0.74rem; line-height: 1.45;
  background: var(--wx-surface-2); color: var(--wx-ink); border: 1px solid var(--wx-border);
}
.wx-dock-note[hidden] { display: none; }
.wx-dock-note .fa-info-circle { color: var(--wx-accent); margin-right: 3px; }
.wx-note-btn {
  border: 1px solid var(--wx-accent); background: transparent; color: var(--wx-accent);
  border-radius: 6px; padding: 1px 7px; font-size: 0.71rem; font-weight: 700; cursor: pointer; margin: 2px 2px 0 0;
}
.wx-note-btn:hover { background: var(--wx-accent); color: #fff; }
.wx-dock-cross, .wx-dock-gear {
  width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--wx-border);
  background: var(--wx-surface); color: var(--wx-ink); cursor: pointer; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.wx-dock-cross[aria-pressed="true"], .wx-dock-gear[aria-pressed="true"] { background: var(--wx-accent); color: #fff; border-color: var(--wx-accent); }
.wx-dock-products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 9px 10px; }
.wx-prod {
  border: 1px solid var(--wx-border); border-radius: 9px; background: var(--wx-surface); color: var(--wx-ink);
  padding: 7px 4px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-size: 0.66rem; font-weight: 600; text-align: center; line-height: 1.1;
}
.wx-prod:hover { background: var(--wx-hover); }
.wx-prod .wx-prod-ico { width: 26px; height: 26px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; color: #fff; }
.wx-prod.active { border-color: var(--wx-accent); box-shadow: 0 0 0 2px rgba(31,111,235,0.28); }
.wx-prod.nodata { opacity: 0.45; }
.wx-prod.nodata::after { content: "no data here"; font-size: 0.5rem; color: var(--wx-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; }
.wx-dock-legend { padding: 0 10px 8px; }
.wx-dock-legend:empty { display: none; }
.wx-dock-settings { padding: 6px 10px 10px; border-top: 1px solid var(--wx-border); max-height: 48vh; overflow-y: auto; }
.wx-dock-settings[hidden] { display: none; }
.wx-set-grp { font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--wx-muted); margin: 9px 0 3px; font-weight: 700; }
.wx-set { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0; font-size: 0.8rem; }
.wx-set > label { color: var(--wx-ink); display: flex; align-items: center; gap: 6px; min-width: 0; }
.wx-set select { border: 1px solid var(--wx-border); border-radius: 6px; background: var(--wx-surface); color: var(--wx-ink); font-size: 0.76rem; padding: 3px 5px; }
.wx-set input[type=range] { width: 108px; }
.wx-set.soon { opacity: 0.5; }
.wx-soon-tag { font-size: 0.58rem; background: var(--wx-surface-2); color: var(--wx-muted); border-radius: 4px; padding: 1px 5px; text-transform: uppercase; letter-spacing: 0.03em; font-weight: 700; }
.wx-switch-sm { width: 34px; height: 19px; border-radius: 999px; background: var(--wx-switch-off); position: relative; transition: background 0.15s; flex: none; cursor: pointer; border: none; }
.wx-switch-sm::after { content: ""; position: absolute; width: 15px; height: 15px; border-radius: 50%; background: #fff; top: 2px; left: 2px; transition: left 0.15s; box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
.wx-switch-sm[aria-pressed="true"] { background: var(--wx-accent); }
.wx-switch-sm[aria-pressed="true"]::after { left: 17px; }

/* ---- side "More" tools menu ---- */
.wx-more {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: 8; width: 306px; max-width: 88vw;
  background: var(--wx-panel); box-shadow: var(--wx-shadow); display: flex; flex-direction: column;
}
.wx-more[hidden] { display: none; }
.wx-more-hd { display: flex; align-items: center; justify-content: space-between; padding: 14px; font-weight: 700; border-bottom: 1px solid var(--wx-border); }
.wx-more-x { border: none; background: none; color: var(--wx-ink); cursor: pointer; font-size: 1.05rem; }
.wx-more-body { overflow-y: auto; padding: 10px 12px 20px; }
.wx-more-grp { font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--wx-muted); margin: 12px 2px 6px; font-weight: 700; }
.wx-tool {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  border: 1px solid var(--wx-border); border-radius: 10px; background: var(--wx-surface); color: var(--wx-ink);
  padding: 11px 12px; margin-bottom: 8px; cursor: pointer; font-size: 0.88rem;
}
.wx-tool:hover { background: var(--wx-hover); }
.wx-tool.active { border-color: var(--wx-accent); box-shadow: 0 0 0 2px rgba(31,111,235,0.22); }
.wx-tool > i { width: 22px; text-align: center; color: var(--wx-accent); font-size: 1rem; flex: none; }
.wx-tool-txt { flex: 1; min-width: 0; }
.wx-tool-txt small { display: block; color: var(--wx-muted); font-size: 0.72rem; font-weight: 400; margin-top: 1px; }
.wx-tool.soon { opacity: 0.6; cursor: default; }
.wx-tool.soon > i { color: var(--wx-muted); }

/* ---- crosshair inspector ---- */
.wx-cross { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.wx-cross[hidden] { display: none; }
.wx-cross .wx-cross-h, .wx-cross .wx-cross-v { position: absolute; background: rgba(255,64,64,0.85); }
.wx-cross .wx-cross-h { left: 0; right: 0; top: 50%; height: 1px; }
.wx-cross .wx-cross-v { top: 0; bottom: 0; left: 50%; width: 1px; }
.wx-cross::after { content: ""; position: absolute; top: 50%; left: 50%; width: 18px; height: 18px; transform: translate(-50%,-50%); border: 2px solid rgba(255,64,64,0.9); border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,0,0,0.35); }
.wx-cross-read {
  position: absolute; top: calc(50% + 16px); left: 50%; transform: translateX(-50%); z-index: 6;
  background: var(--wx-panel); color: var(--wx-ink); border-radius: 9px; box-shadow: var(--wx-shadow);
  padding: 8px 11px; font-size: 0.76rem; pointer-events: none; min-width: 176px; text-align: center;
}
.wx-cross-read[hidden] { display: none; }
.wx-cross-read b { font-variant-numeric: tabular-nums; }
.wx-cross-read .wx-cross-prod { color: var(--wx-accent); font-weight: 700; }
.wx-cross-read .wx-cross-note { display: block; color: var(--wx-muted); font-size: 0.66rem; margin-top: 3px; }
.wx-cross-read .wx-cross-val { display: block; font-size: 0.95rem; font-weight: 800; margin-top: 3px; }

/* ---- alerts polygon toggle ---- */
.wx-alerts-poly { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--wx-ink); margin-bottom: 8px; cursor: pointer; }
.wx-alerts-poly input { width: 15px; height: 15px; accent-color: var(--wx-accent); }

@media (max-width: 640px) {
  .wx-menu { top: 56px; }
  .wx-dock { width: calc(100vw - 28px); bottom: 96px; }
  .wx-menu-pop { top: 100px; }
}

/* ---- time scrubber ---- */
.wx-timebar {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 5;
  width: min(760px, calc(100vw - 32px));
  background: var(--wx-panel); border-radius: var(--wx-radius); box-shadow: var(--wx-shadow);
  padding: 10px 14px; display: none;
}
.wx-timebar.show { display: block; }
body.wx-dock-open .wx-timebar { left: 288px; right: 14px; width: auto; transform: none; }
@media (max-width: 640px) { body.wx-dock-open .wx-timebar { left: 14px; right: 14px; } }
.wx-timebar-row { display: flex; align-items: center; gap: 12px; }
.wx-play { width: 40px; height: 40px; border-radius: 50%; border: none; background: var(--wx-accent); color: #fff; font-size: 1rem; cursor: pointer; flex: none; }
.wx-time-slider { flex: 1; }
.wx-time-label { font-variant-numeric: tabular-nums; font-size: 0.84rem; font-weight: 600; min-width: 168px; text-align: right; }
.wx-time-sub { font-size: 0.72rem; color: var(--wx-muted); }
.wx-speed { border: 1px solid var(--wx-border); border-radius: 6px; font-size: 0.78rem; padding: 4px 6px; }

/* ---- popup / identify ---- */
.maplibregl-popup-content { border-radius: 10px; box-shadow: var(--wx-shadow); padding: 12px 14px; font-size: 0.85rem; }
.wx-pop-title { font-weight: 700; margin-bottom: 4px; }
.wx-pop-row { display: flex; justify-content: space-between; gap: 16px; padding: 1px 0; }
.wx-pop-row span:first-child { color: var(--wx-muted); }
.wx-pop-loading { color: var(--wx-muted); font-style: italic; }

/* ---- misc ---- */
.wx-toast {
  position: absolute; bottom: 90px; left: 50%; transform: translateX(-50%); z-index: 9;
  background: #1b2733; color: #fff; padding: 9px 16px; border-radius: 999px; font-size: 0.85rem;
  box-shadow: var(--wx-shadow); opacity: 0; transition: opacity 0.2s; pointer-events: none;
}
.wx-toast.show { opacity: 1; }
.wx-attrib { position: absolute; bottom: 2px; right: 6px; z-index: 3; font-size: 0.66rem; color: rgba(255,255,255,0.75); text-shadow: 0 1px 2px rgba(0,0,0,0.6); }

@media (max-width: 640px) {
  .wx-brand small { display: none; }
  .wx-panel { top: 110px; }
  .wx-search { max-width: none; }
}

/* ---- forecast card (Weather-Channel style) ---- */
.wx-card {
  position: absolute; top: 64px; right: 14px; z-index: 6;
  width: 360px; max-width: calc(100vw - 28px); max-height: calc(100vh - 150px);
  background: var(--wx-panel); color: var(--wx-ink);
  border-radius: 14px; box-shadow: var(--wx-shadow);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  backdrop-filter: blur(4px);
}
.wx-card[hidden] { display: none; }
.wx-card-close {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 30px; height: 30px; border-radius: 50%; border: none;
  background: rgba(0,0,0,0.06); color: var(--wx-ink); cursor: pointer; font-size: 0.95rem;
}
.wx-card-close:hover { background: rgba(0,0,0,0.14); }
[data-theme="dark"] .wx-card-close { background: rgba(255,255,255,0.1); }
.wx-card-body { padding: 16px; }
.wx-card-head { padding-right: 34px; margin-bottom: 12px; }
.wx-card-place { font-size: 1.25rem; font-weight: 700; line-height: 1.2; }
.wx-card-sub { font-size: 0.76rem; color: var(--wx-muted); margin-top: 2px; }
.wx-card-load, .wx-card-empty { padding: 22px 4px; color: var(--wx-muted); font-size: 0.9rem; display: flex; align-items: center; gap: 8px; }

.wx-card-alerts { display: flex; flex-direction: column; gap: 7px; margin-bottom: 13px; }
.wx-alert {
  border-left: 4px solid var(--c, #d4333f); border-radius: 6px; overflow: hidden;
  background: var(--wx-surface-2);
  background: color-mix(in srgb, var(--c, #d4333f) 13%, var(--wx-surface));
}
.wx-alert > summary {
  list-style: none; cursor: pointer; padding: 8px 10px; font-size: 0.82rem; font-weight: 600;
  display: flex; align-items: center; gap: 7px;
}
.wx-alert > summary::-webkit-details-marker { display: none; }
.wx-alert > summary > i { color: var(--c, #d4333f); flex: none; }
.wx-alert-ev { flex: 1; }
.wx-alert-exp { font-weight: 500; font-size: 0.7rem; color: var(--wx-muted); }
.wx-alert-body { padding: 0 11px 10px; font-size: 0.8rem; line-height: 1.45; }
.wx-alert-hl { font-weight: 600; margin-bottom: 5px; }
.wx-alert-instr { margin-top: 7px; }

.wx-now { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.wx-now-icon { width: 72px; height: 72px; border-radius: 10px; flex: none; object-fit: cover; }
.wx-now-main { min-width: 0; }
.wx-now-temp { font-size: 2.6rem; font-weight: 700; line-height: 1; }
.wx-now-unit { font-size: 1.05rem; font-weight: 600; color: var(--wx-muted); margin-left: 2px; }
.wx-now-cond { font-size: 0.95rem; font-weight: 600; margin-top: 4px; }
.wx-now-name { font-size: 0.74rem; color: var(--wx-muted); }
.wx-now-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin: 10px 0; }
.wx-stat { font-size: 0.8rem; display: flex; align-items: center; gap: 7px; }
.wx-stat i { color: var(--wx-accent); width: 15px; text-align: center; flex: none; }
.wx-now-detail { font-size: 0.8rem; line-height: 1.45; color: var(--wx-muted); margin-bottom: 12px; }

.wx-days-h { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--wx-muted); margin-bottom: 7px; font-weight: 600; }
.wx-days { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; }
.wx-day { flex: none; width: 66px; text-align: center; padding: 8px 4px; border-radius: 9px; background: var(--wx-surface-2); }
.wx-day.night { opacity: 0.8; }
.wx-day-name { font-size: 0.68rem; font-weight: 600; height: 2.3em; line-height: 1.15; display: flex; align-items: center; justify-content: center; }
.wx-day img { width: 38px; height: 38px; }
.wx-day-temp { font-size: 1rem; font-weight: 700; margin-top: 2px; }
.wx-day-pop { font-size: 0.66rem; color: var(--wx-accent); min-height: 1em; }

.wx-card-foot { display: flex; gap: 8px; margin-top: 14px; }
.wx-card-act {
  flex: 1; border: 1px solid var(--wx-border); background: var(--wx-surface); color: var(--wx-ink);
  border-radius: 8px; padding: 9px 8px; font-size: 0.82rem; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.wx-card-act:hover { background: var(--wx-surface-2); }
.wx-btn-icon { padding: 8px 11px; }

/* dark-mode popups (feature identify) */
[data-theme="dark"] .maplibregl-popup-content { background: var(--wx-surface); color: var(--wx-ink); }
[data-theme="dark"] .maplibregl-popup-tip { border-top-color: var(--wx-surface); border-bottom-color: var(--wx-surface); }
[data-theme="dark"] .maplibregl-popup-close-button { color: var(--wx-muted); }

/* card becomes a bottom sheet on narrow screens */
@media (max-width: 720px) {
  .wx-card {
    top: auto; bottom: 0; right: 0; left: 0; width: 100%; max-width: none;
    border-radius: 16px 16px 0 0; max-height: 74vh;
  }
  body.wx-has-card .wx-timebar { display: none !important; }
}

/* ---- theme toggle icon + emoji glyphs ---- */
.wx-btn-icon svg { display: block; }
.wx-emoji { font-style: normal; line-height: 1; }

/* Primary action button on the forecast card */
.wx-card-act.primary { background: var(--wx-accent); color: #fff; border-color: var(--wx-accent); font-weight: 600; }
.wx-card-act.primary:hover { filter: brightness(1.06); }

/* ---------------- full-page forecast + history ---------------- */
body.wx-full-open { overflow: hidden; }
.wx-full {
  position: fixed; inset: 0; z-index: 20;
  background: var(--wx-page); color: var(--wx-ink);
  display: flex; flex-direction: column; overflow: hidden;
}
.wx-full[hidden] { display: none; }

.wx-full-head {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; background: var(--wx-surface);
  border-bottom: 1px solid var(--wx-border); box-shadow: var(--wx-shadow);
}
.wx-full-back {
  border: 1px solid var(--wx-border); background: var(--wx-surface-2); color: var(--wx-ink);
  width: 38px; height: 38px; border-radius: 10px; font-size: 1.15rem; cursor: pointer; flex: none;
}
.wx-full-back:hover { background: var(--wx-accent); color: #fff; border-color: var(--wx-accent); }
.wx-full-title { flex: 1; min-width: 0; }
.wx-full-place { font-weight: 800; font-size: 1.25rem; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wx-full-sub { color: var(--wx-muted); font-size: 0.85rem; margin-top: 2px; }
.wx-full-share {
  border: 1px solid var(--wx-border); background: var(--wx-surface-2); color: var(--wx-ink);
  height: 38px; padding: 0 14px; border-radius: 10px; cursor: pointer; font-size: 0.9rem; flex: none;
}
.wx-full-share:hover { background: var(--wx-accent); color: #fff; border-color: var(--wx-accent); }
.wx-full-icon {
  border: 1px solid var(--wx-border); background: var(--wx-surface-2); color: var(--wx-ink);
  width: 38px; height: 38px; border-radius: 10px; cursor: pointer; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.wx-full-icon:hover { background: var(--wx-accent); color: #fff; border-color: var(--wx-accent); }
.wx-full-icon svg { display: block; }

.wx-full-datebar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 16px; background: var(--wx-surface-2); border-bottom: 1px solid var(--wx-border);
}
.wx-date-nav {
  width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--wx-border);
  background: var(--wx-surface); color: var(--wx-ink); font-size: 1.15rem; cursor: pointer;
}
.wx-date-nav:hover { background: var(--wx-accent); color: #fff; }
.wx-date-input {
  height: 34px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--wx-border);
  background: var(--wx-surface); color: var(--wx-ink); font-size: 0.9rem;
}
.wx-date-today {
  height: 34px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--wx-border);
  background: var(--wx-surface); color: var(--wx-ink); cursor: pointer; font-size: 0.88rem;
}
.wx-date-today:hover { background: var(--wx-accent); color: #fff; }
.wx-mode-badge { margin-left: auto; font-size: 0.8rem; font-weight: 600; padding: 5px 11px; border-radius: 999px; }
.wx-mode-badge.forecast { background: rgba(31,111,235,0.14); color: var(--wx-accent); }
.wx-mode-badge.history { background: rgba(150,90,220,0.16); color: #7048e8; }
[data-theme="dark"] .wx-mode-badge.history { color: #b197fc; }

.wx-full-body { flex: 1; overflow-y: auto; padding: 18px 16px 60px; }
.wx-full-body > * { max-width: 860px; margin-left: auto; margin-right: auto; }
.wx-full-load, .wx-full-empty { text-align: center; color: var(--wx-muted); padding: 60px 20px; font-size: 1.05rem; }

.wx-hero {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  background: var(--wx-surface); border: 1px solid var(--wx-border); border-radius: 16px;
  padding: 22px 24px; box-shadow: var(--wx-shadow); margin-bottom: 16px;
}
.wx-hero-img { width: 84px; height: 84px; }
span.wx-hero-img { font-size: 68px; display: flex; align-items: center; justify-content: center; }
.wx-hero-main { flex: 1; min-width: 180px; }
.wx-hero-temp { font-size: 3.4rem; font-weight: 800; line-height: 1; }
.wx-hero-temp span { font-size: 1.3rem; font-weight: 600; color: var(--wx-muted); margin-left: 3px; }
.wx-hero-cond { font-size: 1.15rem; margin-top: 4px; }
.wx-hero-feels { color: var(--wx-muted); font-size: 0.92rem; margin-top: 3px; }
.wx-hero-hilo { margin-top: 8px; display: flex; gap: 14px; font-weight: 600; }
.wx-hero-hilo .hi { color: #e8590c; }
.wx-hero-hilo .lo { color: var(--wx-accent); }

.wx-statgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 20px; }
.wx-statcard {
  background: var(--wx-surface); border: 1px solid var(--wx-border); border-radius: 12px;
  padding: 12px 14px; display: flex; flex-direction: column; gap: 2px;
}
.wx-statcard-i { font-size: 1.2rem; }
.wx-statcard-l { color: var(--wx-muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; }
.wx-statcard-v { font-size: 1.15rem; font-weight: 700; }

.wx-sec-h { font-size: 1.05rem; font-weight: 700; margin: 8px auto 10px; color: var(--wx-ink); }
/* ---- meteogram (temperature + precipitation trend) ---- */
.wx-mg-wrap {
  background: var(--wx-surface); border: 1px solid var(--wx-border); border-radius: var(--wx-radius);
  padding: 10px 8px 4px; margin-bottom: 22px; box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.wx-mg { display: block; width: 100%; height: auto; overflow: visible; }
.wx-mg-night { fill: var(--wx-ink); opacity: 0.05; }
.wx-mg-grid { stroke: var(--wx-border); stroke-width: 1; stroke-dasharray: 3 4; opacity: 0.7; }
.wx-mg-base { stroke: var(--wx-border); stroke-width: 1; }
.wx-mg-temp-fill { fill: #ff8c42; opacity: 0.16; }
.wx-mg-temp { fill: none; stroke: #ff7a1a; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.wx-mg-pop { fill: var(--wx-accent); opacity: 0.72; }
.wx-mg-qpf { fill: none; stroke: #17b3c4; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.wx-mg-ax { fill: var(--wx-muted); font-size: 11px; font-weight: 600; }
.wx-mg-ax-r { text-anchor: end; }
.wx-mg-ax-x { text-anchor: middle; font-weight: 500; }
.wx-mg-cap { fill: var(--wx-ink); font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em; }
[data-theme="dark"] .wx-mg-temp-fill { opacity: 0.22; }
[data-theme="dark"] .wx-mg-pop { opacity: 0.6; }

/* embedded live-radar loop on the forecast page */
.wx-fc-radar {
  position: relative; border: 1px solid var(--wx-border); border-radius: var(--wx-radius);
  overflow: hidden; margin-bottom: 22px; background: var(--wx-surface);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.wx-fc-radar-map { width: 100%; height: 240px; background: var(--wx-surface); }
.wx-fc-radar-map canvas { outline: none; }
.wx-fc-radar-empty {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 240px; color: var(--wx-muted); font-weight: 600; font-size: 13px;
}
.wx-fc-radar-bar {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center;
  justify-content: space-between; gap: 10px; padding: 7px 10px;
  background: linear-gradient(0deg, rgba(0,0,0,0.55), rgba(0,0,0,0));
  pointer-events: none;
}
.wx-fc-radar-time { color: #fff; font-size: 12px; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,0.7); }
.wx-fc-radar-open {
  pointer-events: auto; cursor: pointer; border: 0; border-radius: 999px;
  background: rgba(255,255,255,0.92); color: #111; font-size: 12px; font-weight: 700;
  padding: 5px 11px; box-shadow: 0 1px 4px rgba(0,0,0,0.35);
}
.wx-fc-radar-open:hover { background: #fff; }
.wx-fc-radar-pin {
  width: 14px; height: 14px; border-radius: 50%; background: var(--wx-accent);
  border: 2.5px solid #fff; box-shadow: 0 0 0 1.5px rgba(0,0,0,0.35), 0 1px 3px rgba(0,0,0,0.5);
}
.wx-hours {
  display: flex; gap: 8px; overflow-x: auto; padding-bottom: 10px; margin-bottom: 22px;
  scroll-snap-type: x proximity;
}
.wx-hour {
  flex: none; width: 76px; scroll-snap-align: start;
  background: var(--wx-surface); border: 1px solid var(--wx-border); border-radius: 12px;
  padding: 10px 6px; text-align: center; display: flex; flex-direction: column; gap: 4px; align-items: center;
}
.wx-hour-t { color: var(--wx-muted); font-size: 0.8rem; }
.wx-hour-i { width: 34px; height: 34px; }
span.wx-hour-i { font-size: 26px; line-height: 34px; }
.wx-hour-temp { font-weight: 700; font-size: 1.05rem; }
.wx-hour-pop { color: var(--wx-accent); font-size: 0.75rem; min-height: 0.95em; }
.wx-hour-wind { color: var(--wx-muted); font-size: 0.72rem; }

.wx-periods { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.wx-period {
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--wx-surface); border: 1px solid var(--wx-border); border-radius: 12px; padding: 12px 16px;
}
.wx-period.night { background: var(--wx-surface-2); }
.wx-period-img { width: 46px; height: 46px; flex: none; }
span.wx-period-img { font-size: 36px; }
.wx-period-ic { flex: none; }
.wx-period-main { flex: 1; min-width: 0; }
.wx-period-name { font-weight: 700; margin-bottom: 3px; }
.wx-period-detail { color: var(--wx-muted); font-size: 0.9rem; line-height: 1.45; }
.wx-period-temp { flex: none; text-align: right; font-size: 1.5rem; font-weight: 800; }
.wx-period-pop { display: block; font-size: 0.78rem; font-weight: 600; color: var(--wx-accent); }

.wx-full-alerts { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.wx-full-src { color: var(--wx-muted); font-size: 0.82rem; text-align: center; margin-top: 20px; }

@media (max-width: 620px) {
  .wx-statgrid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .wx-full-place { font-size: 1.05rem; }
  .wx-hero-temp { font-size: 2.7rem; }
  .wx-hero-img { width: 64px; height: 64px; }
  span.wx-hero-img { font-size: 52px; }
  .wx-period-temp { font-size: 1.2rem; }
}

/* ============================================================
   Self-hosted SVG icon system + time-machine UI  (v5)
   ============================================================ */

/* --- weather condition glyphs (self-colored, replace <img>) --- */
svg.wxi { display: block; }
.wx-day-img   { width: 42px; height: 42px; margin: 3px auto 1px; }
.wx-badge-i   { width: 18px; height: 18px; display: inline-block; vertical-align: -0.28em; }
.wx-btn-i     { width: 1.05em; height: 1.05em; display: inline-block; vertical-align: -0.18em; }
.wx-mini      { width: 34px; height: 34px; display: inline-block; vertical-align: middle; }
.wx-hour-i    { width: 40px; height: 40px; }
.wx-period-img{ width: 52px; height: 52px; }

/* --- UI glyphs (inherit color via currentColor) --- */
svg.wxg { width: 1.05em; height: 1.05em; display: inline-block; vertical-align: -0.16em; flex: none; }
.wx-stat svg.wxg { color: var(--wx-accent); width: 1.15em; height: 1.15em; }
.wx-statcard-i svg.wxg { color: var(--wx-accent); width: 1.4rem; height: 1.4rem; }
.wx-day-pop svg.wxg, .wx-period-pop svg.wxg, .wx-hour-pop svg.wxg { color: var(--wx-accent); }
.wx-card-act svg.wxg, .wx-btn svg.wxg, .wx-card-act svg.wxi { width: 1.05em; height: 1.05em; }
.wx-mode-badge svg { width: 1.05em; height: 1.05em; vertical-align: -0.16em; margin-right: 3px; }
.wx-alert > summary > svg.wxg { color: var(--c, #d4333f); flex: none; }
.wx-full-empty svg.wxi, .wx-full-load svg.wxi { margin: 0 auto 10px; }

/* --- loading spinner (replaces fa-spin) --- */
.wx-spin {
  width: 15px; height: 15px; border-radius: 50%; flex: none; display: inline-block;
  border: 2px solid var(--wx-border); border-top-color: var(--wx-accent);
  animation: wx-spin 0.7s linear infinite;
}
@keyframes wx-spin { to { transform: rotate(360deg); } }

/* --- rich identify popup (warnings / EAS on the map) --- */
.wx-pop { min-width: 216px; max-width: 300px; }
.wx-pop-head { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 7px; }
.wx-pop-dot { width: 12px; height: 12px; border-radius: 3px; background: var(--c, #d4333f); flex: none; margin-top: 3px; box-shadow: 0 0 0 2px rgba(0,0,0,0.08); }
.wx-pop-title { font-weight: 700; font-size: 0.92rem; line-height: 1.25; }
.wx-pop-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 7px; }
.wx-pop-badge { background: var(--c, #d4333f); color: #fff; font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; border-radius: 999px; padding: 2px 8px; }
.wx-pop-badge.alt { background: var(--wx-surface-2); color: var(--wx-muted); }
.wx-pop-hl { font-size: 0.82rem; font-weight: 600; margin-bottom: 6px; line-height: 1.35; }
.wx-pop-when, .wx-pop-area { font-size: 0.75rem; color: var(--wx-muted); margin-bottom: 4px; }
.wx-pop-desc { font-size: 0.78rem; line-height: 1.5; max-height: 158px; overflow-y: auto; margin: 6px 0 9px; padding-right: 4px; }
.wx-pop-acts { display: flex; gap: 6px; }
.wx-pop-btn {
  flex: 1; border: 1px solid transparent; background: var(--wx-accent); color: #fff;
  border-radius: 7px; padding: 7px 6px; font-size: 0.75rem; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
}
.wx-pop-btn.ghost { background: var(--wx-surface); color: var(--wx-ink); border-color: var(--wx-border); }
.wx-pop-btn svg.wxg { width: 0.95em; height: 0.95em; }
.wx-pop-btn:hover { filter: brightness(1.06); }

/* --- full stored alert/EAS detail (rendered into the card panel) --- */
.wx-adet { font-size: 0.86rem; }
.wx-adet-head { display: flex; gap: 9px; align-items: flex-start; margin-bottom: 10px; }
.wx-adet-head .wx-pop-dot { width: 14px; height: 14px; margin-top: 4px; }
.wx-adet-title { font-weight: 800; font-size: 1.08rem; line-height: 1.25; }
.wx-adet-meta { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.03em; color: #fff; background: var(--c, #d4333f); display: inline-block; padding: 2px 9px; border-radius: 999px; margin-top: 5px; font-weight: 700; }
.wx-adet-hl { font-weight: 600; margin-bottom: 9px; line-height: 1.4; }
.wx-adet-when { font-size: 0.78rem; color: var(--wx-muted); margin-bottom: 6px; }
.wx-adet-area { font-size: 0.8rem; color: var(--wx-muted); margin-bottom: 13px; display: flex; gap: 6px; align-items: baseline; }
.wx-adet-area svg.wxg { color: var(--wx-accent); }
.wx-adet-sec { margin-bottom: 13px; }
.wx-adet-sec h4 { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--wx-muted); margin: 0 0 5px; }
.wx-adet-sec p { margin: 0 0 7px; line-height: 1.5; font-size: 0.84rem; }
.wx-adet-sec.instr { background: var(--wx-surface-2); border-radius: 10px; padding: 11px 13px; }
.wx-adet-sec.instr h4 { color: var(--wx-accent); }
.wx-adet-src { font-size: 0.76rem; color: var(--wx-muted); margin-bottom: 12px; }
.wx-adet-acts { margin-bottom: 10px; }
.wx-adet-id { font-size: 0.68rem; color: var(--wx-muted); font-family: ui-monospace, "SF Mono", Menlo, monospace; word-break: break-all; padding-top: 9px; border-top: 1px solid var(--wx-border); }

/* --- time-machine popover --- */
.wx-hist-pop {
  position: absolute; top: 60px; right: 14px; z-index: 30; width: 322px; max-width: calc(100vw - 28px);
  background: var(--wx-panel); color: var(--wx-ink); border-radius: var(--wx-radius); box-shadow: var(--wx-shadow);
  padding: 16px; backdrop-filter: blur(4px);
}
.wx-hist-pop[hidden] { display: none; }
.wx-hist-title { font-weight: 700; font-size: 1rem; margin-bottom: 4px; }
.wx-hist-note { font-size: 0.79rem; color: var(--wx-muted); line-height: 1.45; margin: 0 0 13px; }
.wx-hist-l { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--wx-muted); font-weight: 600; display: block; margin-bottom: 5px; }
.wx-hist-dt { width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--wx-border); background: var(--wx-surface); color: var(--wx-ink); font-size: 0.9rem; }
.wx-hist-quick { display: flex; flex-wrap: wrap; gap: 6px; margin: 11px 0 14px; }
.wx-hist-quick button {
  border: 1px solid var(--wx-border); background: var(--wx-surface); color: var(--wx-ink);
  border-radius: 999px; padding: 5px 11px; font-size: 0.77rem; font-weight: 600; cursor: pointer;
}
.wx-hist-quick button:hover { background: var(--wx-accent); color: #fff; border-color: var(--wx-accent); }
.wx-hist-acts { display: flex; gap: 8px; }
.wx-hist-go, .wx-hist-place {
  flex: 1; border-radius: 8px; padding: 9px 8px; font-size: 0.83rem; font-weight: 600; cursor: pointer;
  border: 1px solid var(--wx-border); text-align: center;
}
.wx-hist-go { background: var(--wx-accent); color: #fff; border-color: var(--wx-accent); }
.wx-hist-go:hover { filter: brightness(1.06); }
.wx-hist-place { background: var(--wx-surface); color: var(--wx-ink); }
.wx-hist-place:hover { background: var(--wx-surface-2); }

/* --- "viewing as of…" banner while the map is rewound --- */
.wx-asof-banner {
  position: absolute; top: 104px; left: 50%; transform: translateX(-50%); z-index: 12;
  background: #7048e8; color: #fff; border-radius: 999px; padding: 7px 8px 7px 15px;
  box-shadow: var(--wx-shadow); display: flex; align-items: center; gap: 10px; font-size: 0.85rem;
  max-width: calc(100vw - 28px);
}
.wx-asof-banner[hidden] { display: none; }
.wx-asof-banner svg.wxg { color: #fff; }
.wx-asof-txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.wx-asof-live {
  border: none; background: rgba(255,255,255,0.22); color: #fff; border-radius: 999px;
  padding: 5px 12px; font-size: 0.8rem; font-weight: 600; cursor: pointer; flex: none;
}
.wx-asof-live:hover { background: rgba(255,255,255,0.34); }

@media (max-width: 720px) {
  .wx-hist-pop { top: 56px; }
  .wx-asof-banner { top: auto; bottom: 86px; }
}

/* ---- active-alerts browser ---- */
.wx-btn-alerts { position: relative; }
.wx-btn-alerts > i { color: #d4333f; }
.wx-btn-alerts.on { background: var(--wx-accent); color: #fff; }
.wx-btn-alerts.on > i { color: #fff; }
.wx-alerts-badge {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: #d4333f; color: #fff; font-size: 0.68rem; font-weight: 700; line-height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
}
.wx-alerts-badge[hidden] { display: none; }
.wx-btn-alerts.on .wx-alerts-badge { background: rgba(255,255,255,0.3); }

.wx-alerts-pane {
  position: absolute; top: 56px; left: 12px; bottom: 88px; z-index: 8;
  width: 344px; max-width: 92vw; display: flex; flex-direction: column;
  background: var(--wx-surface); color: var(--wx-ink);
  border: 1px solid var(--wx-border); border-radius: 14px;
  box-shadow: 0 12px 34px rgba(0,0,0,0.28); overflow: hidden;
}
.wx-alerts-pane[hidden] { display: none; }
.wx-alerts-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid var(--wx-border);
}
.wx-alerts-ttl { font-size: 0.9rem; font-weight: 700; display: flex; align-items: center; gap: 7px; }
.wx-alerts-ttl > i { color: #d4333f; }
.wx-alerts-ttl b { color: var(--wx-muted); font-weight: 600; }
.wx-alerts-x {
  border: none; background: transparent; color: var(--wx-muted); cursor: pointer;
  width: 28px; height: 28px; border-radius: 8px; font-size: 1rem;
}
.wx-alerts-x:hover { background: var(--wx-surface-2); color: var(--wx-ink); }
.wx-alerts-tools { padding: 10px 12px; border-bottom: 1px solid var(--wx-border); }
.wx-alerts-tools input {
  width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--wx-border);
  background: var(--wx-surface); color: var(--wx-ink); font-size: 0.85rem;
}
.wx-alerts-chips { display: flex; gap: 6px; margin-top: 9px; flex-wrap: wrap; }
.wx-alerts-chips button {
  border: 1px solid var(--wx-border); background: var(--wx-surface); color: var(--wx-muted);
  border-radius: 999px; padding: 4px 11px; font-size: 0.76rem; cursor: pointer;
}
.wx-alerts-chips button.on { background: var(--wx-accent); color: #fff; border-color: var(--wx-accent); }
.wx-alerts-list { overflow-y: auto; padding: 6px 8px 10px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.wx-al-grp {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--wx-muted); font-weight: 700; padding: 6px 8px 0;
}
.wx-al-grp b { color: var(--wx-ink); }
.wx-al-row {
  display: flex; align-items: stretch; flex: none; gap: 9px; width: 100%; text-align: left;
  border: 1px solid var(--wx-border); background: var(--wx-surface); color: var(--wx-ink);
  border-radius: 10px; padding: 8px 10px 8px 0; margin: 0; cursor: pointer; overflow: hidden;
}
.wx-al-row:hover { background: var(--wx-hover); }
.wx-al-bar { width: 5px; flex: none; border-radius: 5px 0 0 5px; background: var(--c, #888); }
.wx-al-main { flex: 1; min-width: 0; padding-left: 4px; }
.wx-al-ev { display: block; font-weight: 600; font-size: 0.84rem; }
.wx-al-area { display: block; font-size: 0.74rem; color: var(--wx-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wx-al-exp { flex: none; align-self: center; font-size: 0.7rem; color: var(--wx-muted); white-space: nowrap; }
.wx-alerts-empty { padding: 26px 16px; text-align: center; color: var(--wx-muted); font-size: 0.85rem; }
@media (max-width: 640px) {
  .wx-alerts-pane { top: 110px; bottom: 96px; }
}