.feather-8{width:8px;height:8px}.feather-12{width:12px;height:12px}.feather-14{width:14px;height:14px}.feather-16{width:16px;height:16px}.feather-18{width:18px;height:18px}.feather-20{width:20px;height:20px}.feather-24{width:24px;height:24px}.feather-32{width:32px;height:32px}
.wx-shell{padding-top:18px;padding-bottom:36px;background:
linear-gradient(180deg,rgba(241,245,249,.9) 0%,rgba(248,250,252,0) 180px)}
.wx-page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:28px}
.wx-page-title{display:flex;align-items:center;gap:12px;font-size:2rem;line-height:1.1;font-weight:700;color:#0f172a;margin:0}
.wx-page-title-mark{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:14px;background:#dbeafe;color:#2563eb;box-shadow:inset 0 1px 0 rgba(255,255,255,.75)}
.wx-page-sub{margin-top:8px;color:#64748b;font-size:.98rem}
.wx-head-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.wx-country-pill{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 16px;border:1px solid #dbe3ee;border-radius:16px;background:#fff;color:#0f172a;font-weight:600;box-shadow:0 10px 24px rgba(15,23,42,.05)}
.wx-city-wrap{position:relative;min-width:320px}
.wx-city-icon{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:#94a3b8;z-index:3;pointer-events:none}
.wx-card{background:#fff;border:1px solid #e2e8f0;border-radius:20px;box-shadow:0 12px 30px rgba(15,23,42,.06);transition:transform .2s ease,box-shadow .2s ease}
.wx-card:hover{transform:translateY(-2px);box-shadow:0 18px 38px rgba(15,23,42,.08)}
.wx-hero{overflow:hidden;background:linear-gradient(135deg,#1d4ed8 0%,#2563eb 42%,#0f172a 100%);color:#fff;border:none}
.wx-hero .card-body{padding:32px}
.wx-hero-top{display:flex;align-items:center;justify-content:space-between;gap:28px}
.wx-hero-place{display:flex;align-items:center;gap:10px;font-size:1.1rem;opacity:.95}
.wx-hero-temp{font-size:5.35rem;line-height:.92;font-weight:800;margin:16px 0 10px;letter-spacing:-.04em}
.wx-hero-summary{font-size:1.55rem;font-weight:600;margin:0 0 4px}
.wx-hero-desc{color:rgba(255,255,255,.8);margin:0}
.wx-hero-meta{display:flex;flex-wrap:wrap;gap:14px;margin-top:18px;font-size:.92rem;color:rgba(255,255,255,.86)}
.wx-hero-icon-wrap{display:flex;align-items:center;justify-content:center;min-width:190px}
.wx-hero-icon{width:160px;height:160px;filter:drop-shadow(0 18px 30px rgba(15,23,42,.18))}
.wx-hero-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:18px}
.wx-hero-metric{background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:12px}
.wx-hero-metric-head{display:flex;align-items:center;gap:6px;margin-bottom:3px}
.wx-hero-metric-head span{font-size:.7rem;color:rgba(255,255,255,.74)}
.wx-hero-metric strong{display:block;font-size:1rem;color:#fff}
.wx-hero-uv{margin-top:12px;background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:12px}
.wx-hero-uv-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.wx-hero-uv-top span{font-size:.72rem;color:rgba(255,255,255,.74)}
.wx-hero-uv-value{display:inline-flex;align-items:center;gap:6px}
.wx-hero-uv-value strong{font-size:1rem;color:#fff}
.wx-hero-uv-pill{font-size:.66rem;font-weight:700;padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.18);color:#fff}
.wx-hero-uv-bar{height:5px;background:rgba(255,255,255,.16);border-radius:999px;margin-top:8px;overflow:hidden}
.wx-hero-uv-bar>i{display:block;height:100%;width:0;background:linear-gradient(90deg,#39d98a 0%,#ffd166 55%,#ff6b6b 100%);border-radius:999px}
.wx-hero-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:12px;font-size:.72rem;color:rgba(255,255,255,.8)}
.wx-hero-foot strong{color:#fff;margin-left:4px}
.wx-details .card-body{padding:26px}
.wx-panel-head{display:flex;flex-direction:column;gap:4px;margin-bottom:20px}
.wx-section-title{display:flex;align-items:center;gap:10px;font-size:1.08rem;font-weight:700;color:#0f172a;margin:0}
.wx-section-sub{font-size:.88rem;color:#64748b}
.wx-muted-chip{display:inline-flex;align-items:center;gap:7px;min-height:28px;padding:0 10px;border-radius:999px;background:#eef2ff;color:#4f46e5;font-size:.76rem;font-weight:700}
.wx-hourly-compact{display:grid;gap:10px}
.wx-hourly-compact-row{display:grid;grid-template-columns:56px 40px minmax(0,1fr) 54px;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:#f8fafc}
.wx-hourly-compact-time{font-size:.82rem;font-weight:700;color:#0f172a}
.wx-hourly-compact-copy{min-width:0}
.wx-hourly-compact-summary{font-size:.8rem;color:#475569;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wx-hourly-compact-temp{font-size:.92rem;font-weight:700;color:#0f172a;text-align:right}
.wx-detail-list{display:grid;gap:14px}
.wx-detail-item{display:flex;align-items:center;justify-content:space-between;gap:12px}
.wx-detail-copy{display:flex;align-items:center;gap:12px;min-width:0}
.wx-detail-icon{width:42px;height:42px;border-radius:14px;background:#eff6ff;display:flex;align-items:center;justify-content:center;color:#2563eb;flex-shrink:0}
.wx-detail-label{font-size:.82rem;color:#64748b}
.wx-detail-sub{font-size:.74rem;color:#94a3b8;margin-top:1px}
.wx-detail-value{font-size:.98rem;font-weight:700;color:#0f172a;text-align:right}
.wx-panel .card-body{padding:26px}
.wx-hourly-strip{display:flex;gap:16px;overflow:auto;padding-bottom:2px}
.wx-hour-card{flex:0 0 106px;padding:16px 12px;background:#f8fafc;border-radius:16px;text-align:center}
.wx-hour-card canvas{display:block!important;width:30px!important;height:30px!important;margin:0 auto;flex-shrink:0}
#wx_hourly_cards canvas{display:block!important;width:30px!important;height:30px!important;margin:0 auto;flex-shrink:0}
.wx-hour-time{font-size:.82rem;color:#64748b;margin-bottom:8px}
.wx-hour-temp{font-size:1.3rem;font-weight:700;color:#0f172a}
.wx-hour-sub{font-size:.74rem;color:#94a3b8;margin-top:4px}
.wx-chart-wrap{margin-top:22px;padding:16px 14px 8px;border-radius:16px;background:#f8fafc}
#flotChart1{height:220px}
.wx-daily-list{display:grid;gap:10px}
.wx-day-row{display:grid;grid-template-columns:minmax(92px,120px) minmax(0,1fr) 88px 96px;grid-template-areas:"label summary rain range" "extras extras extras extras";align-items:center;gap:12px;padding:14px 16px;border-radius:14px;background:#fff;transition:background-color .18s ease,transform .18s ease}
.wx-day-row:hover{background:#f8fafc;transform:translateY(-1px)}
.wx-day-label{font-weight:600;color:#0f172a}
.wx-day-summary{display:flex;align-items:center;gap:12px;color:#475569;font-size:.92rem;min-width:0}
.wx-day-summary canvas{display:block!important;width:28px!important;height:28px!important;flex-shrink:0}
#wx_daily_cards canvas{display:block!important;width:28px!important;height:28px!important;flex-shrink:0}
.wx-day-rain{display:flex;align-items:center;gap:8px;color:#2563eb;font-size:.85rem;justify-content:flex-start}
.wx-day-range{text-align:right}
.wx-day-hi{font-size:1rem;font-weight:700;color:#0f172a}
.wx-day-lo{font-size:.92rem;color:#64748b;margin-left:10px}
.wx-map-box{height:264px;border-radius:16px;background:linear-gradient(180deg,#dbeafe 0%,#eff6ff 100%);display:flex;align-items:center;justify-content:center;text-align:center;color:#475569;padding:20px}
.wx-alerts{display:grid;gap:12px}
.wx-alert{padding:14px 16px;border-left:4px solid #f59e0b;background:#fffbeb;border-radius:12px}
.wx-alert--info{border-left-color:#2563eb;background:#eff6ff}
.wx-alert-title{display:flex;align-items:center;gap:8px;font-weight:700;color:#92400e;margin-bottom:4px}
.wx-alert--info .wx-alert-title{color:#1d4ed8}
.wx-alert-copy{font-size:.88rem;color:#6b7280}
.wx-empty{padding:24px;border-radius:16px;background:#f8fafc;color:#64748b;text-align:center}
.wx-loading{opacity:.65}
.select2-container--default .select2-selection--single{height:48px;border:1px solid #dbe3ee;border-radius:16px;padding:9px 14px 9px 42px;background:#fff}
.select2-container--default .select2-selection--single .select2-selection__rendered{line-height:28px;color:#0f172a;font-weight:500}
.select2-container--default .select2-selection--single .select2-selection__arrow{height:46px;right:10px}
.select2-dropdown{border:1px solid #dbe3ee;border-radius:16px;overflow:hidden;box-shadow:0 18px 40px rgba(15,23,42,.12)}
.select2-search--dropdown{padding:10px}
.select2-search--dropdown .select2-search__field{border:1px solid #dbe3ee;border-radius:12px;padding:9px 12px}
.select2-results__option{padding:10px 14px}
.select2-container--default .select2-results__option--highlighted[aria-selected]{background:#2563eb}
@media (max-width: 991.98px){
  .wx-page-head{flex-direction:column}
  .wx-city-wrap{width:100%;min-width:0}
  .wx-country-pill{display:none}
  .wx-hero-top{flex-direction:column;align-items:flex-start}
  .wx-hero-icon-wrap{min-width:0;width:100%;justify-content:flex-start}
}
@media (max-width: 767.98px){
  .wx-page-title{font-size:1.7rem}
  .wx-page-title-mark{width:38px;height:38px}
  .wx-hero .card-body,.wx-details .card-body,.wx-panel .card-body{padding:20px}
  .wx-hero-temp{font-size:4rem}
  .wx-hero-icon-wrap{justify-content:center}
  .wx-hero-metrics{grid-template-columns:1fr}
  .wx-hero-foot{flex-direction:column;align-items:flex-start}
  .wx-hourly-compact-row{grid-template-columns:48px 34px minmax(0,1fr) 44px;gap:8px;padding:9px 10px}
  .wx-day-row{grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;padding:12px 14px}
  .wx-day-range{text-align:right}
}
.wx-metric-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.wx-day-metric{background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:12px 14px}
.wx-day-metric span{display:block;font-size:.72rem;color:#64748b;margin-bottom:3px}
.wx-day-metric strong{display:block;font-size:.97rem;color:#0f172a}
/* ── Wind direction label ─────────────────────────── */
.wx-wind-dir{display:inline-flex;align-items:center;gap:3px;font-weight:400;font-size:.88em;opacity:.82}
/* ── Chart metric toggles ─────────────────────────── */
.wx-chart-toggles{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.wx-chart-btn{padding:4px 14px;border-radius:999px;border:1px solid #e2e8f0;background:#fff;color:#64748b;font-size:.78rem;font-weight:600;cursor:pointer;line-height:1.6;transition:all .15s ease}
.wx-chart-btn.active,.wx-chart-btn:hover{background:#2563eb;border-color:#2563eb;color:#fff}
/* ── AQI gauge ────────────────────────────────────── */
.wx-aqi-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.wx-aqi-score{font-size:1.6rem;font-weight:800;line-height:1}
.wx-aqi-cat{font-size:.75rem;font-weight:700;padding:3px 10px;border-radius:999px;color:#fff}
.wx-aqi-bar-wrap{height:10px;border-radius:999px;background:linear-gradient(90deg,#22c55e 0%,#eab308 33%,#f97316 54%,#ef4444 72%,#a855f7 88%,#7c3aed 100%);position:relative;margin-bottom:14px}
.wx-aqi-marker{position:absolute;top:-4px;width:4px;height:18px;background:#0f172a;border-radius:2px;transform:translateX(-50%)}
/* ── Comfort note ─────────────────────────────────── */
.wx-comfort-note{margin-top:10px;padding:8px 12px;background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.14);border-radius:10px;font-size:.79rem;color:rgba(255,255,255,.85);display:flex;align-items:flex-start;gap:7px}
/* ── Hourly wind info ─────────────────────────────── */
.wx-hour-wind{font-size:.72rem;color:#94a3b8;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* National view — every city in the market. Rows open canonical city pages. */
.wx-board{display:grid;gap:8px}
.wx-board-row{display:grid;grid-template-columns:minmax(120px,1.1fr) minmax(0,1.4fr) 104px 72px;align-items:center;gap:12px;width:100%;padding:12px 16px;border:0;border-radius:14px;background:#fff;text-align:left;font:inherit;color:inherit;cursor:pointer;transition:background-color .18s ease,transform .18s ease,box-shadow .18s ease}
.wx-board-row:hover{background:#f8fafc;transform:translateY(-1px)}
.wx-board-row:focus-visible{outline:2px solid #2563eb;outline-offset:2px}
.wx-board-row.is-active{background:#eff6ff;box-shadow:inset 0 0 0 1px #bfdbfe}
.wx-board-city{display:flex;align-items:center;gap:6px;font-weight:600;color:#0f172a;min-width:0}
.wx-board-cap{width:6px;height:6px;border-radius:50%;background:#2563eb;flex-shrink:0}
.wx-board-summary{color:#475569;font-size:.92rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wx-board-wind{display:flex;align-items:center;gap:6px;color:#64748b;font-size:.85rem}
.wx-board-temp{font-weight:700;color:#0f172a;text-align:right;font-variant-numeric:tabular-nums}
@media (max-width:767.98px){
  .wx-board-row{grid-template-columns:minmax(0,1fr) 64px;grid-template-areas:"city temp" "summary temp" "wind temp";row-gap:2px}
  .wx-board-city{grid-area:city}
  .wx-board-summary{grid-area:summary}
  .wx-board-wind{grid-area:wind}
  .wx-board-temp{grid-area:temp;align-self:center;font-size:1.15rem}
}

/* Derived conditions banner. Sits above the hero; never styled as a government alert. */
.wx-watch{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:14px;background:#fffbeb;border:1px solid #fde68a;margin-bottom:16px}
.wx-watch--calm{background:#f8fafc;border-color:#e2e8f0}
.wx-watch-icon{flex-shrink:0;margin-top:1px;color:#b45309}
.wx-watch--calm .wx-watch-icon{color:#64748b}
.wx-watch-body{min-width:0}
.wx-watch-title{font-weight:700;color:#0f172a;margin-bottom:2px}
.wx-watch-list{margin:0;padding-left:18px;color:#3f3f46;font-size:.92rem}
.wx-watch-list li{margin:1px 0}
.wx-watch-note{margin-top:6px;font-size:.78rem;color:#71717a}

/* Radar map. Height is fixed so Leaflet can size its panes before tiles arrive. */
.wx-map{height:320px;border-radius:14px;overflow:hidden;background:#eef2f7}
.wx-map-note{margin-top:8px;font-size:.78rem;color:#71717a}
.wx-map-attrib{font-size:.7rem;color:#94a3b8}
.wx-map .leaflet-container{font:inherit}
.wx-map-pin{display:flex;align-items:center;justify-content:center;min-width:34px;height:22px;padding:0 5px;border-radius:11px;background:#2563eb;color:#fff;font-size:.72rem;font-weight:700;box-shadow:0 1px 4px rgba(15,23,42,.35);white-space:nowrap}
.wx-map-pin.is-active{background:#b45309}

/* Daily extras: rainfall total, peak wind, UV max — all read from cww_daily columns that
   were stored but never shown. Second grid row so they never squeeze the temperatures. */
.wx-day-label{grid-area:label}
.wx-day-summary{grid-area:summary}
.wx-day-rain{grid-area:rain}
.wx-day-range{grid-area:range}
.wx-day-extras{grid-area:extras;display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:6px;padding-top:6px;border-top:1px solid #f1f5f9;font-size:.78rem;color:#64748b}
.wx-day-dot{width:3px;height:3px;border-radius:50%;background:#cbd5e1;flex-shrink:0}
@media (max-width:767.98px){
  /* Three rows, not five: day + temperatures pair on the first line and condition +
     rain chance on the second, which halves the height of a 7-day list on a phone. */
  .wx-day-row{grid-template-areas:"label range" "summary rain" "extras extras"}
  .wx-day-rain{justify-content:flex-end}
  .wx-day-extras{margin-top:4px}
}

/* Marine wave outlook — Orbital returns up to 48 hours and only hour 0 was displayed. */
.wx-marine-timeline{display:flex;gap:8px;overflow-x:auto;padding:10px 2px 4px;scrollbar-width:thin}
.wx-marine-hour{flex:0 0 auto;min-width:64px;padding:8px 10px;border-radius:12px;background:#f8fafc;border:1px solid #e2e8f0;text-align:center}
.wx-marine-hour-time{font-size:.7rem;color:#64748b;margin-bottom:2px}
.wx-marine-hour-wave{font-size:.9rem;font-weight:700;color:#0f172a}
.wx-marine-hour-sub{font-size:.68rem;color:#94a3b8;margin-top:1px}
.wx-alert-source{font-size:.72rem;color:#92400e;margin-top:2px;margin-bottom:4px;font-weight:600}
.wx-alert--info .wx-alert-source{color:#64748b}

/* The homepage theme owns global tokens, header, search, footer and content width. */
body.qb-theme-weather .wx-shell{padding:20px 0 38px;background:none}
body.qb-theme-weather .wx-page-head{align-items:flex-end;margin-bottom:20px;padding-top:4px}
body.qb-theme-weather .wx-section-kicker{display:inline-block;margin-bottom:9px;color:var(--qb-accent);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;text-decoration:none}
body.qb-theme-weather .wx-section-kicker:hover{text-decoration:underline}
body.qb-theme-weather .wx-page-title{font:400 clamp(30px,3.2vw,42px)/1.15 Georgia,"Times New Roman",serif;letter-spacing:-.025em;color:var(--qb-ink)}
body.qb-theme-weather .wx-page-title-mark{width:36px;height:36px;border-radius:4px;background:var(--qb-tint);color:var(--qb-accent);box-shadow:none}
body.qb-theme-weather .wx-page-sub{max-width:700px;margin:9px 0 0;color:var(--qb-muted);font-size:13px;line-height:1.55}
body.qb-theme-weather .fx-answer{margin:12px 0 0;font-size:13px;color:var(--qb-ink)}
body.qb-theme-weather .wx-muted-chip{background:var(--qb-tint);color:var(--qb-accent);border-radius:3px}
body.qb-theme-weather .wx-section-nav{display:flex;align-items:center;gap:24px;overflow-x:auto;white-space:nowrap;margin:0 0 22px;border-top:2px solid var(--qb-ink);border-bottom:1px solid var(--qb-line);scrollbar-width:thin}
body.qb-theme-weather .wx-section-nav a{display:inline-block;padding:13px 2px 12px;color:var(--qb-muted);font-size:12px;font-weight:600;text-decoration:none;border-bottom:2px solid transparent}
body.qb-theme-weather .wx-section-nav a:hover,body.qb-theme-weather .wx-section-nav a.is-active{color:var(--qb-accent);border-bottom-color:var(--qb-accent)}
body.qb-theme-weather .wx-card{border:1px solid var(--qb-line);border-radius:5px;box-shadow:none;transition:none}
body.qb-theme-weather .wx-card:hover{transform:none;box-shadow:none}
body.qb-theme-weather .wx-hero{background:#112d70;border-color:#112d70;color:#fff}
body.qb-theme-weather .wx-hero .card-body{padding:28px}
body.qb-theme-weather .wx-hero-temp{font-weight:500;letter-spacing:-.055em}
body.qb-theme-weather .wx-hero-metric,body.qb-theme-weather .wx-hero-uv{border-radius:4px}
body.qb-theme-weather .wx-panel .card-body{padding:23px}
body.qb-theme-weather .wx-panel-head{border-bottom:1px solid var(--qb-line);padding-bottom:13px;margin-bottom:16px}
body.qb-theme-weather .wx-section-title{font:400 23px/1.2 Georgia,"Times New Roman",serif;color:var(--qb-ink)}
body.qb-theme-weather .wx-section-title .text-primary{color:var(--qb-accent)!important}
body.qb-theme-weather .wx-section-sub{font-size:11px;color:var(--qb-muted)}
body.qb-theme-weather .wx-hour-card,body.qb-theme-weather .wx-day-metric,body.qb-theme-weather .wx-marine-hour{background:var(--qb-paper);border:1px solid var(--qb-line);border-radius:4px}
body.qb-theme-weather .wx-chart-wrap{background:var(--qb-paper);border-radius:4px}
body.qb-theme-weather .wx-chart-btn{border-radius:3px}
body.qb-theme-weather .wx-chart-btn.active,body.qb-theme-weather .wx-chart-btn:hover{background:var(--qb-accent);border-color:var(--qb-accent)}
body.qb-theme-weather .wx-board-row{border-bottom:1px solid var(--qb-line);border-radius:0;color:var(--qb-ink);text-decoration:none}
body.qb-theme-weather .wx-board-row:hover{background:var(--qb-tint);color:var(--qb-ink);text-decoration:none}
body.qb-theme-weather .wx-board-row.is-active{background:var(--qb-tint);box-shadow:inset 3px 0 var(--qb-accent)}
body.qb-theme-weather .wx-map{border-radius:4px}
body.qb-theme-weather.qb-weather-map .wx-shell{display:flex;flex-direction:column}
body.qb-theme-weather.qb-weather-map #wx_extra_row{order:1}
body.qb-theme-weather.qb-weather-map #wx_board_panel{order:2}
body.qb-theme-weather.qb-weather-map .wx-map{height:min(65vh,640px);min-height:390px}
body.qb-theme-weather .wx-alert{border-radius:4px}
body.qb-theme-weather .wx-empty{border-radius:4px;background:var(--qb-paper);color:var(--qb-muted)}
body.qb-theme-weather .select2-container--default .select2-selection--single{border-radius:4px;border-color:var(--qb-line);box-shadow:none}
@media(max-width:991.98px){body.qb-theme-weather #page_container{width:calc(100% - 40px)}body.qb-theme-weather .wx-page-head{align-items:flex-start}}
@media(max-width:767.98px){body.qb-theme-weather #page_container{width:calc(100% - 30px)}body.qb-theme-weather .wx-shell{padding-top:12px}body.qb-theme-weather .wx-page-title{font-size:30px}body.qb-theme-weather .wx-section-nav{gap:18px}body.qb-theme-weather .wx-hero .card-body,body.qb-theme-weather .wx-panel .card-body{padding:18px}body.qb-theme-weather.qb-weather-map .wx-map{height:52vh;min-height:320px}}

/* Weather content uses the same quiet surfaces and hierarchy as the front pages. */
body.qb-theme-weather .wx-market-label {
  display: inline-flex; align-items: center; gap: 8px; margin-left: 12px;
  color: var(--qb-muted); font-size: 10px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
}
body.qb-theme-weather .wx-market-label::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%; background: #416dcc;
}
body.qb-theme-weather .wx-head-actions { justify-content: flex-end; }
body.qb-theme-weather .wx-country-pill,
body.qb-theme-weather .wx-muted-chip {
  min-height: 34px; border: 1px solid var(--qb-line); border-radius: 3px;
  background: var(--qb-tint); color: var(--qb-accent); box-shadow: none;
  font-size: 11px; font-weight: 600;
}
body.qb-theme-weather .wx-city-wrap { min-width: 280px; }
body.qb-theme-weather .wx-city-icon { color: var(--qb-accent); }
body.qb-theme-weather .select2-container--default .select2-selection--single {
  height: 44px; padding-top: 7px; padding-bottom: 7px;
  background: var(--qb-surface); color: var(--qb-ink);
}
body.qb-theme-weather .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--qb-ink); font-size: 12px; line-height: 28px;
}
body.qb-theme-weather .select2-container--default .select2-selection--single .select2-selection__arrow { height: 42px; }
.select2-container--open .select2-dropdown {
  border-color: #bac9e3; border-radius: 4px; box-shadow: 0 8px 24px #172a501a;
}
.select2-container--open .select2-search--dropdown .select2-search__field {
  border-color: #bac9e3; border-radius: 3px; color: #172a50;
}
.select2-container--open .select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: #123b91; }

body.qb-theme-weather .wx-hero-top { align-items: flex-start; }
body.qb-theme-weather .wx-hero-copy { flex: 1 1 auto; min-width: 0; }
body.qb-theme-weather .wx-hero-place {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
body.qb-theme-weather .wx-hero-icon-wrap { min-width: 120px; width: 140px; flex: 0 0 140px; }
body.qb-theme-weather .wx-hero-icon { width: 128px; height: 128px; filter: none; }
body.qb-theme-weather .wx-hero-summary {
  font: 400 24px/1.25 Georgia, "Times New Roman", serif;
}
body.qb-theme-weather .wx-hero-desc { font-size: 12px; line-height: 1.55; }
body.qb-theme-weather .wx-hero-meta { gap: 8px 16px; font-size: 11px; }
body.qb-theme-weather .wx-hero-meta strong { font-weight: 600; }
body.qb-theme-weather .wx-hero-metric,
body.qb-theme-weather .wx-hero-uv,
body.qb-theme-weather .wx-comfort-note {
  background: #ffffff0d; border-color: #ffffff24; border-radius: 3px;
}
body.qb-theme-weather .wx-hero-uv-pill { border-radius: 3px; }
body.qb-theme-weather .wx-hero-foot { padding-top: 10px; border-top: 1px solid #ffffff29; }

body.qb-theme-weather .wx-details .card-body { padding: 23px; }
body.qb-theme-weather .wx-section-title { gap: 9px; }
body.qb-theme-weather .wx-section-title svg { width: 18px; height: 18px; }
body.qb-theme-weather .wx-detail-list { gap: 0; }
body.qb-theme-weather .wx-detail-item { padding: 9px 0; border-bottom: 1px solid var(--qb-line); }
body.qb-theme-weather .wx-detail-item:last-child { border-bottom: 0; }
body.qb-theme-weather .wx-detail-icon {
  width: 34px; height: 34px; border-radius: 3px;
  background: var(--qb-tint); color: var(--qb-accent);
}
body.qb-theme-weather .wx-detail-label,
body.qb-theme-weather .wx-hour-time,
body.qb-theme-weather .wx-hourly-compact-summary,
body.qb-theme-weather .wx-day-summary,
body.qb-theme-weather .wx-board-summary { color: var(--qb-muted); }
body.qb-theme-weather .wx-detail-value,
body.qb-theme-weather .wx-hour-temp,
body.qb-theme-weather .wx-hourly-compact-temp,
body.qb-theme-weather .wx-day-hi,
body.qb-theme-weather .wx-board-city,
body.qb-theme-weather .wx-board-temp { color: var(--qb-ink); }
body.qb-theme-weather .wx-hourly-compact { gap: 0; }
body.qb-theme-weather .wx-hourly-compact-row {
  background: transparent; border-bottom: 1px solid var(--qb-line); border-radius: 0;
}
body.qb-theme-weather .wx-hourly-compact-row:last-child { border-bottom: 0; }
body.qb-theme-weather .wx-hourly-strip { gap: 9px; }
body.qb-theme-weather .wx-hour-card { flex-basis: 100px; padding: 13px 9px; }
body.qb-theme-weather .wx-hour-sub,
body.qb-theme-weather .wx-hour-wind,
body.qb-theme-weather .wx-marine-hour-sub { color: var(--qb-muted); }
body.qb-theme-weather .wx-chart-wrap { margin-top: 15px; }
body.qb-theme-weather .wx-chart-toggles { margin: 17px 0 0; }
body.qb-theme-weather .wx-chart-btn {
  border-color: var(--qb-line); color: var(--qb-accent);
  background: var(--qb-surface); transition: none;
}
body.qb-theme-weather .wx-chart-btn.active,
body.qb-theme-weather .wx-chart-btn:hover { color: #fff; }
body.qb-theme-weather .wx-aqi-score { font-weight: 500; color: var(--qb-ink); }
body.qb-theme-weather .wx-aqi-cat { border-radius: 3px; }
body.qb-theme-weather .wx-aqi-marker { background: var(--qb-ink); }

body.qb-theme-weather .wx-daily-list,
body.qb-theme-weather .wx-board { gap: 0; }
body.qb-theme-weather .wx-day-row {
  padding: 15px 6px; border-top: 1px solid var(--qb-line); border-radius: 0;
  background: transparent; transition: none;
}
body.qb-theme-weather .wx-day-row:hover { background: var(--qb-tint); transform: none; }
body.qb-theme-weather .wx-day-label { color: var(--qb-ink); }
body.qb-theme-weather .wx-day-rain { color: var(--qb-accent); }
body.qb-theme-weather .wx-day-lo,
body.qb-theme-weather .wx-day-extras { color: var(--qb-muted); }
body.qb-theme-weather .wx-day-extras { border-top-color: var(--qb-line); }
body.qb-theme-weather .wx-board-row {
  padding: 14px 6px; background: transparent; border-bottom: 1px solid var(--qb-line);
  transition: none;
}
body.qb-theme-weather .wx-board-row:hover { transform: none; }
body.qb-theme-weather .wx-board-cap { background: #416dcc; }
body.qb-theme-weather .wx-marine-timeline { padding-top: 8px; }
body.qb-theme-weather .wx-marine-hour-wave { color: var(--qb-ink); }

body.qb-theme-weather .wx-watch {
  border-radius: 4px; border-color: #ead9b3; border-left: 3px solid #a66a12;
  background: #fffaf0;
}
body.qb-theme-weather .wx-watch--calm {
  border-color: var(--qb-line); border-left-color: var(--qb-accent);
  background: var(--qb-surface);
}
body.qb-theme-weather .wx-watch-title,
body.qb-theme-weather .wx-watch-list { color: var(--qb-ink); }
body.qb-theme-weather .wx-watch-note,
body.qb-theme-weather .wx-map-note,
body.qb-theme-weather .wx-map-attrib { color: var(--qb-muted); }
body.qb-theme-weather .wx-alert {
  border: 1px solid #ead9b3; border-left: 3px solid #a66a12;
  background: #fffaf0;
}
body.qb-theme-weather .wx-alert--info {
  border-color: #c5d3ef; border-left-color: var(--qb-accent);
  background: #f3f6fc;
}
body.qb-theme-weather .wx-alert-title { color: var(--qb-ink); }
body.qb-theme-weather .wx-alert--info .wx-alert-title { color: var(--qb-accent); }
body.qb-theme-weather .wx-alert-copy { color: var(--qb-muted); line-height: 1.55; }
body.qb-theme-weather .wx-map-pin {
  min-width: 32px; height: 23px; border: 1px solid #fff; border-radius: 3px;
  background: var(--qb-accent); box-shadow: 0 1px 3px #172a5033;
}
body.qb-theme-weather .wx-map-pin.is-active { background: #172a50; }
body.qb-theme-weather .wx-map .leaflet-control-zoom a {
  color: var(--qb-accent); background: var(--qb-surface);
}
body.qb-theme-weather .wx-map .leaflet-bar { border-radius: 3px; }
body.qb-theme-weather .wx-map .leaflet-bar a:first-child { border-radius: 3px 3px 0 0; }
body.qb-theme-weather .wx-map .leaflet-bar a:last-child { border-radius: 0 0 3px 3px; }

@media (max-width: 991.98px) {
  body.qb-theme-weather .wx-head-actions { justify-content: flex-start; width: 100%; }
  body.qb-theme-weather .wx-hero-copy { width: 100%; max-width: 100%; }
  body.qb-theme-weather .wx-hero-icon-wrap { width: 100%; flex-basis: auto; }
}
@media (max-width: 767.98px) {
  body.qb-theme-weather .wx-market-label { margin-left: 8px; }
  body.qb-theme-weather .wx-head-actions { align-items: stretch; }
  body.qb-theme-weather .wx-city-wrap { width: 100%; }
  body.qb-theme-weather .wx-hero-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.qb-theme-weather .wx-hero-icon-wrap { display: none; }
  body.qb-theme-weather .wx-details .card-body { padding: 18px; }
  body.qb-theme-weather .wx-day-row { padding: 12px 6px; }
}

/* ── Overview summaries (WX-A1) ───────────────────────────────────────────────
   Readings, not tools: a glance at today, six hours ahead, the way into the map,
   and a handful of towns. Each carries its own id, so none of it duplicates a full
   panel that lives on another page. */
body.qb-theme-weather .wx-overview-today .wx-ov-today {
  display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start;
}
body.qb-theme-weather .wx-ov-temp { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
body.qb-theme-weather .wx-ov-deg { font-size: 56px; font-weight: 700; line-height: 1; color: var(--qb-ink); }
body.qb-theme-weather .wx-ov-unit { font-size: 22px; font-weight: 600; color: var(--qb-muted); }
body.qb-theme-weather .wx-ov-summary { flex-basis: 100%; font-size: 15px; color: var(--qb-muted); }
body.qb-theme-weather .wx-ov-facts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 16px; margin: 0; flex: 1 1 260px;
}
body.qb-theme-weather .wx-ov-facts dt {
  font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--qb-muted);
}
body.qb-theme-weather .wx-ov-facts dd { margin: 2px 0 0; font-size: 15px; font-weight: 600; color: var(--qb-ink); }
body.qb-theme-weather .wx-ov-link {
  display: inline-block; margin-top: 16px; font-size: 13px; font-weight: 700;
  color: var(--qb-accent); text-decoration: none;
}
body.qb-theme-weather .wx-ov-link:hover { text-decoration: underline; }
body.qb-theme-weather .wx-ov-link-city { color: var(--qb-muted); font-weight: 600; }

body.qb-theme-weather .wx-ov-hours { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
body.qb-theme-weather .wx-ov-hour {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 10px 4px; border-radius: 4px; background: var(--qb-paper); text-align: center;
}
body.qb-theme-weather .wx-ov-hour-time { font-size: 11px; font-weight: 600; color: var(--qb-muted); }
body.qb-theme-weather .wx-ov-hour-temp { font-size: 16px; font-weight: 700; color: var(--qb-ink); }
body.qb-theme-weather .wx-ov-hour-sub {
  font-size: 10px; color: var(--qb-muted); line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
body.qb-theme-weather .wx-ov-hour-precip { font-size: 11px; font-weight: 600; color: var(--qb-accent); }

body.qb-theme-weather .wx-ov-route { display: block; text-decoration: none; height: 100%; }
body.qb-theme-weather .wx-ov-route .card-body { display: flex; align-items: center; gap: 14px; }
body.qb-theme-weather .wx-ov-route-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%;
  background: var(--qb-paper); color: var(--qb-accent);
}
body.qb-theme-weather .wx-ov-route-body { display: flex; flex-direction: column; }
body.qb-theme-weather .wx-ov-route-title { font-size: 15px; font-weight: 700; color: var(--qb-ink); }
body.qb-theme-weather .wx-ov-route-note { font-size: 12px; color: var(--qb-muted); }
body.qb-theme-weather .wx-ov-route:hover .wx-ov-route-title { color: var(--qb-accent); }

body.qb-theme-weather .wx-ov-cities { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
body.qb-theme-weather .wx-ov-city {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 4px;
  background: var(--qb-paper); text-decoration: none;
}
body.qb-theme-weather .wx-ov-city:hover { background: var(--qb-surface); }
body.qb-theme-weather .wx-ov-city-name { font-size: 13px; font-weight: 600; color: var(--qb-ink); }
body.qb-theme-weather .wx-ov-city-summary {
  flex: 1 1 auto; font-size: 11px; color: var(--qb-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.qb-theme-weather .wx-ov-city-temp { font-size: 14px; font-weight: 700; color: var(--qb-ink); }

/* ── All cities (WX-A5) and Maps (WX-A6): each now has the page to itself ───── */
body.qb-theme-weather .wx-board-filter {
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap;
}
body.qb-theme-weather .wx-board-filter-label {
  margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--qb-muted);
}
body.qb-theme-weather .wx-board-filter .form-control { flex: 1 1 240px; max-width: 360px; }
/* The map is the page here, not a panel among panels. */
body.qb-theme-weather .wx-panel--map .wx-map { height: 560px; }
body.qb-theme-weather .wx-map-coverage { margin: 10px 0 0; font-size: 12px; color: var(--qb-muted); }
body.qb-theme-weather .wx-map-coverage-date { color: var(--qb-muted); }
/* The radar time control (WX-A6). It ships hidden so no time is offered before frames exist; the
   [hidden] rule has to be stated because display:flex would otherwise win over the attribute. */
body.qb-theme-weather .wx-map-time {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 12px 0 0; padding: 10px 12px;
  border: 1px solid var(--qb-line); border-radius: 5px; background: var(--qb-paper);
}
body.qb-theme-weather .wx-map-time[hidden] { display: none; }
body.qb-theme-weather .wx-map-time-label {
  margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--qb-muted);
}
body.qb-theme-weather .wx-map-time input[type="range"] {
  flex: 1 1 200px; min-width: 140px; accent-color: var(--qb-accent);
}
body.qb-theme-weather .wx-map-time-value {
  font-size: 13px; font-weight: 600; color: var(--qb-ink); font-variant-numeric: tabular-nums;
}

@media (max-width: 991.98px) {
  body.qb-theme-weather .wx-ov-cities { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.qb-theme-weather .wx-panel--map .wx-map { height: 420px; }
}
@media (max-width: 767.98px) {
  body.qb-theme-weather .wx-ov-deg { font-size: 44px; }
  body.qb-theme-weather .wx-ov-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.qb-theme-weather .wx-ov-hours { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.qb-theme-weather .wx-ov-cities { grid-template-columns: 1fr; }
  body.qb-theme-weather .wx-panel--map .wx-map { height: 320px; }
}

/* ── Local forecast tabs and the secondary-measurement disclosure (WX-A2) ──────
   The three forecast pages are real, linkable URLs, so the tabs are links with an
   underline for the current one - no widget state to keep in sync, and they work
   with JavaScript off. The disclosure is a real <details>/<summary> for the same
   reason: the numbers behind it are in the first byte and visible to a crawler. */
body.qb-theme-weather .wx-forecast-tabs {
  display: flex; flex-wrap: wrap; gap: 4px; margin: -10px 0 22px;
  border-bottom: 1px solid var(--qb-line);
}
body.qb-theme-weather .wx-forecast-tab {
  padding: 9px 16px; font-size: 13px; font-weight: 600; color: var(--qb-muted);
  text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
body.qb-theme-weather .wx-forecast-tab:hover { color: var(--qb-ink); }
body.qb-theme-weather .wx-forecast-tab.is-active {
  color: var(--qb-accent); border-bottom-color: var(--qb-accent); font-weight: 700;
}

body.qb-theme-weather .wx-disclosure {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--qb-line);
}
body.qb-theme-weather .wx-disclosure-summary {
  cursor: pointer; font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--qb-muted);
}
body.qb-theme-weather .wx-disclosure-summary:hover { color: var(--qb-accent); }
body.qb-theme-weather .wx-disclosure[open] > .wx-disclosure-summary { margin-bottom: 10px; }
body.qb-theme-weather .wx-disclosure > .wx-metric-grid,
body.qb-theme-weather .wx-disclosure > .wx-hero-metrics { margin-top: 4px; }
/* Inside the dark hero the rule and the label have to invert with the card. */
body.qb-theme-weather .wx-hero .wx-disclosure { border-top-color: rgba(255, 255, 255, .18); }
body.qb-theme-weather .wx-hero .wx-disclosure-summary { color: rgba(255, 255, 255, .82); }
body.qb-theme-weather .wx-hero .wx-disclosure-summary:hover { color: #fff; }

@media (max-width: 767.98px) {
  body.qb-theme-weather .wx-forecast-tab { padding: 8px 10px; font-size: 12px; }
}

/* ── The hourly table (WX-A3) and the expandable day details (WX-A4) ──────────
   The table holds the same hours as the strip above it, because a chart answers
   "what is the shape of the day" and a table answers "when exactly". */
body.qb-theme-weather .wx-table-wrap { margin-top: 18px; overflow-x: auto; }
body.qb-theme-weather .wx-hourly-table { width: 100%; border-collapse: collapse; font-size: 13px; }
body.qb-theme-weather .wx-hourly-table caption {
  caption-side: top; text-align: left; padding: 0 0 8px; font-size: 11px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--qb-muted);
}
body.qb-theme-weather .wx-hourly-table th,
body.qb-theme-weather .wx-hourly-table td {
  padding: 8px 10px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--qb-line);
}
body.qb-theme-weather .wx-hourly-table th:first-child,
body.qb-theme-weather .wx-hourly-table td:first-child { text-align: left; }
body.qb-theme-weather .wx-hourly-table thead th {
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--qb-muted); border-bottom-color: var(--qb-muted);
}
body.qb-theme-weather .wx-hourly-table tbody th { font-weight: 600; color: var(--qb-ink); }
body.qb-theme-weather .wx-hourly-table tbody tr:hover { background: var(--qb-paper); }

/* A day row is a <details> now: the summary IS the row, so the grid stays exactly where it was and
   the disclosure adds the secondary readings underneath it. No JavaScript is involved. */
body.qb-theme-weather details.wx-day-row { display: block; padding: 0; }
body.qb-theme-weather details.wx-day-row > summary.wx-day-head {
  display: grid; grid-template-columns: minmax(92px, 120px) minmax(0, 1fr) 88px 96px;
  grid-template-areas: "label summary rain range" "extras extras extras extras";
  align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; list-style: none;
}
body.qb-theme-weather summary.wx-day-head::-webkit-details-marker { display: none; }
body.qb-theme-weather details.wx-day-row[open] > summary.wx-day-head { background: var(--qb-paper); }
body.qb-theme-weather .wx-day-detail { padding: 0 16px 14px; }
body.qb-theme-weather .wx-day-detail dl {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px 16px;
  margin: 0; padding-top: 12px; border-top: 1px solid var(--qb-line);
}
body.qb-theme-weather .wx-day-detail dt {
  font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--qb-muted);
}
body.qb-theme-weather .wx-day-detail dd { margin: 2px 0 0; font-size: 14px; font-weight: 600; color: var(--qb-ink); }

@media (max-width: 767.98px) {
  body.qb-theme-weather details.wx-day-row > summary.wx-day-head {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "label range" "summary rain" "extras extras";
    gap: 4px 10px; padding: 12px 14px;
  }
}