/* =========================================================
   Guimbal WX — Public WWW Synced-Data Dashboard
   File: css/08-panel-chip-overrides.css
   Version: V2-R33 Visual Correction Pass 45 - July 2026
   Copyright: © Andrew Tunnera 2025-2026. All rights reserved.
   Role: Active runtime file
   ========================================================= */

/* ---------------- Row chips inside panels: remove remaining hard borders ---------------- */

html body .ribbon-label,
html body .ribbon-value,
html body .gauge-rows .k,
html body .gauge-rows .v,
html body .kv .k,
html body .kv .v,
html body .tube-value,
html body .spark{
  border:0 !important;
  outline:0 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(0,0,0,.16),
    0 1px 2px rgba(0,0,0,.18) !important;
}

html body .spark{
  background:linear-gradient(180deg, rgba(255,255,255,.040), rgba(255,255,255,.014)),
    rgba(15,20,26,.20) !important;
}

:root{
  --live-dot-green:#22e879;
  --live-dot-green-soft:rgba(34,232,121,.62);
}

html body .pill.live .dot,
html body #status .dot,
html body #hazDupPill .dot,
html body .status-bar .dot,
html body header .dot{
  background:var(--live-dot-green) !important;
  color:var(--live-dot-green) !important;
  border:0 !important;
  box-shadow:0 0 0 1px rgba(220,252,231,.28),
    0 0 8px var(--live-dot-green-soft) !important;
}

html body .pill.live::before,
html body .status-bar #status::before,
html body .status-bar #hazDupPill::before{
  background:var(--live-dot-green) !important;
  color:var(--live-dot-green) !important;
  border-color:transparent !important;
  box-shadow:0 0 0 1px rgba(220,252,231,.28),
    0 0 8px var(--live-dot-green-soft) !important;
}

html body .status-bar #hazDupPill,
html body .status-bar #status,
html body .pill.live{
  --dot-color:var(--live-dot-green) !important;
}

html body .status-bar .pill,
html body .status-bar .chip,
html body .status-bar #topClock,
html body .status-bar #moonPill,
html body .status-bar #dayStatusPill,
html body .status-bar #hazDupPill,
html body .status-bar #status,
html body .status-bar #unitPill{
  color:rgba(246,250,255,.96) !important;
  font-weight:800 !important;
}

html body .ribbon-value,
html body .gauge-rows .v,
html body .tube-value{
  font-weight:850 !important;
  color:rgba(245,250,255,.94) !important;
}

html body .has-risk-label::after{
  font-weight:800 !important;
}

html body .wx-hero-summary,
html body .wx-hero-summary-text{
  color:rgba(244,249,255,.94) !important;
  text-shadow:none !important;
  font-weight:800 !important;
}

html body svg text,
html body canvas,
html body .spark,
html body .spark *{
  filter:none !important;
  text-shadow:none !important;
}

html body .title3d,
html body .title3d *,
html body .title3d h1,
html body .title3d h1 *,
html body .t-brand,
html body .t-title,
html body .t-sun{
  text-shadow:none !important;
  -webkit-text-stroke:0 transparent !important;
  text-stroke:0 transparent !important;
  filter:none !important;
}

html body .title3d h1,
html body .title3d .t-title{
  box-shadow:none !important;
  background:transparent !important;
}

html body .spark .lead-halo{
  fill:rgba(255,255,255,.14) !important;
  stroke:none !important;
  filter:none !important;
}

html body .spark .lead-ball{
  fill:rgba(226,252,255,.96) !important;
  stroke:none !important;
  filter:drop-shadow(0 0 3px rgba(125,211,252,.55))
    drop-shadow(0 0 6px rgba(125,211,252,.22)) !important;
}

html body .pill.live,
html body #status[data-state="live"],
html body #fc7StatusPill[data-state="live"],
html body #hazStatusPill[data-state="live"],
html body #quakesStatusPill[data-state="live"],
html body [data-state="live"],
html body [aria-label*="Live"]{
  color:#86efac !important;
}

html body .pill.live .dot,
html body [data-state="live"] .dot,
html body #status[data-state="live"]::before,
html body #fc7StatusPill[data-state="live"]::before,
html body #hazStatusPill[data-state="live"]::before,
html body #quakesStatusPill[data-state="live"]::before{
  background:#22e879 !important;
  color:#22e879 !important;
  box-shadow:0 0 8px rgba(34,232,121,.65) !important;
}

html body #forecast7Panel > .ribbon-title *,
html body #hazardsPanel > .ribbon-title *,
html body #quakesPanel > .ribbon-title *{
  text-shadow:none !important;
  -webkit-text-stroke:0 transparent !important;
  text-stroke:0 transparent !important;
  filter:none !important;
}

html body #forecast7Panel .title-ico,
html body #hazardsPanel .title-ico,
html body #quakesPanel .title-ico,
html body #forecast7Panel .title-text,
html body #hazardsPanel .title-text,
html body #quakesPanel .title-text{
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  background:transparent !important;
}

html body #forecast7Panel .ribbon-title .pill,
html body #hazardsPanel .ribbon-title .pill,
html body #quakesPanel .ribbon-title .pill{
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  background:linear-gradient(90deg, rgba(14,165,233,.16), rgba(20,184,166,.08)),
    rgba(15,23,42,.24) !important;
}

html body #fc7StatusPill[data-state="error"],
html body #hazStatusPill[data-state="error"],
html body #quakesStatusPill[data-state="error"]{
  background:linear-gradient(90deg, rgba(239,68,68,.14), rgba(14,165,233,.055)),
    rgba(15,23,42,.24) !important;
}

html body #forecast7Panel > .ribbon-title,
html body #hazardsPanel > .ribbon-title,
html body #quakesPanel > .ribbon-title{
  -webkit-text-stroke:0 transparent !important;
  text-stroke:0 transparent !important;
}

html body #forecast7Panel > .ribbon-title .title-text,
html body #hazardsPanel > .ribbon-title .title-text,
html body #quakesPanel > .ribbon-title .title-text,
html body #forecast7Panel > .ribbon-title span,
html body #hazardsPanel > .ribbon-title span,
html body #quakesPanel > .ribbon-title span{
  color:rgba(236,248,255,.97) !important;
  -webkit-text-fill-color:rgba(236,248,255,.97) !important;
  background:none !important;
  background-image:none !important;
  opacity:1 !important;
  visibility:visible !important;
  text-shadow:none !important;
  -webkit-text-stroke:0 transparent !important;
  text-stroke:0 transparent !important;
  filter:none !important;
}

html body #forecast7Panel > .ribbon-title .title-ico,
html body #hazardsPanel > .ribbon-title .title-ico,
html body #quakesPanel > .ribbon-title .title-ico,
html body #forecast7Panel > .ribbon-title svg,
html body #hazardsPanel > .ribbon-title svg,
html body #quakesPanel > .ribbon-title svg{
  color:rgba(125,211,252,.92) !important;
  fill:currentColor !important;
  stroke:currentColor !important;
  opacity:.92 !important;
  visibility:visible !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  background:transparent !important;
  filter:none !important;
}

html body #fc7StatusPill,
html body #hazStatusPill,
html body #quakesStatusPill{
  color:rgba(226,239,249,.94) !important;
  -webkit-text-fill-color:rgba(226,239,249,.94) !important;
  box-shadow:none !important;
  background:linear-gradient(90deg, rgba(14,165,233,.13), rgba(20,184,166,.06)),
    rgba(15,23,42,.22) !important;
}

html body #fc7StatusPill[data-state="live"],
html body #hazStatusPill[data-state="live"],
html body #quakesStatusPill[data-state="live"]{
  color:#86efac !important;
  -webkit-text-fill-color:#86efac !important;
}

html body #fc7StatusPill[data-state="error"],
html body #hazStatusPill[data-state="error"],
html body #quakesStatusPill[data-state="error"]{
  color:#fca5a5 !important;
  -webkit-text-fill-color:#fca5a5 !important;
}

html body #forecast7Panel > .ribbon-title,
html body #hazardsPanel > .ribbon-title,
html body #quakesPanel > .ribbon-title{
  color:rgba(236,248,255,.98) !important;
  -webkit-text-fill-color:rgba(236,248,255,.98) !important;
  opacity:1 !important;
  visibility:visible !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  background:transparent !important;
  text-shadow:none !important;
  filter:none !important;
}

html body #forecast7Panel > .ribbon-title .title-text,
html body #hazardsPanel > .ribbon-title .title-text,
html body #quakesPanel > .ribbon-title .title-text{
  color:rgba(236,248,255,.98) !important;
  -webkit-text-fill-color:rgba(236,248,255,.98) !important;
  background:none !important;
  background-image:none !important;
  text-shadow:none !important;
  filter:none !important;
  opacity:1 !important;
  visibility:visible !important;
}

html body .status-bar #wxHeroSummary{
  flex:1 1 420px !important;
  width:auto !important;
  max-width:min(58vw, 760px) !important;
  min-width:220px !important;
  min-height:25px !important;
  margin:0 4px 0 8px !important;
  padding:4px 10px !important;
  border-radius:999px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13),
    inset 0 -1px 0 rgba(0,0,0,.14),
    0 0 10px rgba(125,211,252,.08) !important;
  background:radial-gradient(circle at 16% 18%, rgba(255,255,255,.16), transparent 32%),
    linear-gradient(90deg, rgba(14,165,233,.14), rgba(20,184,166,.09), rgba(99,102,241,.09)),
    rgba(15,23,42,.28) !important;
  backdrop-filter:blur(8px) saturate(1.18) !important;
  -webkit-backdrop-filter:blur(8px) saturate(1.18) !important;
  overflow:hidden !important;
}

html body .status-bar #wxHeroSummary::before{
  display:none !important;
}

html body .status-bar #wxHeroSummary .wx-hero-icon{
  flex:0 0 auto !important;
  width:16px !important;
  height:16px !important;
  font-size:.58rem !important;
  border:0 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),
    0 0 7px rgba(125,211,252,.10) !important;
  background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.28), rgba(125,211,252,.10) 52%, rgba(15,23,42,.16)) !important;
}

html body .status-bar #wxHeroSummaryText{
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  color:rgba(240,249,255,.94) !important;
  -webkit-text-fill-color:rgba(240,249,255,.94) !important;
  font-size:.74rem !important;
  line-height:1 !important;
  font-weight:800 !important;
  letter-spacing:.005em !important;
}

@media (max-width:900px){

  html body .status-bar{
    flex-wrap:wrap !important;
  }

  html body .status-bar #wxHeroSummary{
    order:5 !important;
    flex:1 1 100% !important;
    max-width:100% !important;
    margin:3px 0 0 !important;
  }

}

html body #spark-out-temp .lead-ball{
  fill:var(--red) !important;
  stroke:none !important;
  filter:drop-shadow(0 0 3px rgba(248,113,113,.70))
    drop-shadow(0 0 7px rgba(248,113,113,.28)) !important;
}

html body #spark-out-temp .lead-halo{
  fill:rgba(248,113,113,.18) !important;
  stroke:none !important;
  filter:none !important;
}

html body #spark-out-hum .lead-ball{
  fill:var(--amber) !important;
  stroke:none !important;
  filter:drop-shadow(0 0 3px rgba(245,158,11,.70))
    drop-shadow(0 0 7px rgba(245,158,11,.28)) !important;
}

html body #spark-out-hum .lead-halo{
  fill:rgba(245,158,11,.18) !important;
  stroke:none !important;
  filter:none !important;
}

html body #spark-dew .lead-ball{
  fill:#FFD54F !important;
  stroke:none !important;
  filter:drop-shadow(0 0 3px rgba(250,204,21,.70))
    drop-shadow(0 0 7px rgba(250,204,21,.26)) !important;
}

html body #spark-feels .lead-ball{
  fill:#4FC3F7 !important;
  stroke:none !important;
  filter:drop-shadow(0 0 3px rgba(79,195,247,.68))
    drop-shadow(0 0 7px rgba(79,195,247,.26)) !important;
}

:root{
  --wx-live-green:#22e879;
  --wx-live-green-text:#86efac;
  --wx-live-green-soft:rgba(34,232,121,.62);
  --wx-live-panel:rgba(6,78,59,.40);
}

html body .status-bar{
  background:radial-gradient(circle at 8% 28%, rgba(255,255,255,.14), transparent 24%),
    linear-gradient(90deg,
      rgba(5,46,22,.70) 0%,
      rgba(6,95,70,.54) 36%,
      rgba(20,184,166,.44) 72%,
      rgba(14,165,233,.34) 100%
    ) !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:0 4px 16px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 0 18px rgba(34,232,121,.10) !important;
}

html body [data-state="live"],
html body .is-live,
html body #fc7StatusPill[data-state="live"],
html body #hazStatusPill[data-state="live"],
html body #quakesStatusPill[data-state="live"],
html body #status[data-state="live"]{
  color:var(--wx-live-green-text) !important;
  -webkit-text-fill-color:var(--wx-live-green-text) !important;
  border:0 !important;
  outline:0 !important;
  background:radial-gradient(circle at 18% 18%, rgba(255,255,255,.16), transparent 33%),
    linear-gradient(90deg, rgba(34,197,94,.18), rgba(20,184,166,.10), rgba(14,165,233,.07)),
    var(--wx-live-panel) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(0,0,0,.14),
    0 0 12px rgba(34,232,121,.12) !important;
  text-shadow:none !important;
}

html body [data-state="live"] .status-label,
html body .is-live .status-label,
html body #fc7StatusPill[data-state="live"] .status-label,
html body #hazStatusPill[data-state="live"] .status-label,
html body #quakesStatusPill[data-state="live"] .status-label,
html body #status[data-state="live"] .status-label{
  color:var(--wx-live-green-text) !important;
  -webkit-text-fill-color:var(--wx-live-green-text) !important;
  font-weight:850 !important;
}

html body [data-state="live"] .status-extra,
html body [data-state="live"] .status-time,
html body .is-live .status-extra,
html body .is-live .status-time{
  color:rgba(220,252,231,.78) !important;
  -webkit-text-fill-color:rgba(220,252,231,.78) !important;
  font-weight:750 !important;
}

html body .status-dot,
html body .live-dot,
html body [data-state="live"] .status-dot,
html body [data-state="live"] .live-dot,
html body .is-live .status-dot,
html body .is-live .live-dot{
  display:inline-block !important;
  width:.56em !important;
  height:.56em !important;
  min-width:.56em !important;
  margin-right:.42em !important;
  border-radius:999px !important;
  vertical-align:middle !important;
  transform:translateY(-.04em) !important;
  background:var(--wx-live-green) !important;
  color:var(--wx-live-green) !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:0 0 0 1px rgba(220,252,231,.22),
    0 0 7px var(--wx-live-green-soft),
    0 0 13px rgba(34,232,121,.22) !important;
}

html body [data-state="loading"],
html body .is-loading{
  color:#fde68a !important;
  -webkit-text-fill-color:#fde68a !important;
}

html body [data-state="loading"] .status-dot,
html body .loading-dot{
  display:inline-block !important;
  width:.56em !important;
  height:.56em !important;
  min-width:.56em !important;
  margin-right:.42em !important;
  border-radius:999px !important;
  background:#fbbf24 !important;
  box-shadow:0 0 7px rgba(251,191,36,.48) !important;
}

html body [data-state="error"],
html body .is-error{
  color:#fca5a5 !important;
  -webkit-text-fill-color:#fca5a5 !important;
}

html body .status-warn{
  display:inline-block !important;
  margin-right:.42em !important;
  color:#fca5a5 !important;
  -webkit-text-fill-color:#fca5a5 !important;
}

html body #fc7StatusPill,
html body #hazStatusPill,
html body #quakesStatusPill{
  border:0 !important;
  outline:0 !important;
  text-shadow:none !important;
  --dot-color:var(--wx-live-green) !important;
}

html body .status-bar #status[data-state="live"],
html body .status-bar #status.is-live{
  color:var(--wx-live-green-text, #86efac) !important;
  -webkit-text-fill-color:var(--wx-live-green-text, #86efac) !important;
  background:radial-gradient(circle at 18% 18%, rgba(255,255,255,.16), transparent 33%),
    linear-gradient(90deg, rgba(34,197,94,.22), rgba(20,184,166,.12), rgba(14,165,233,.07)),
    rgba(6,78,59,.44) !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(0,0,0,.14),
    0 0 12px rgba(34,232,121,.15) !important;
  text-shadow:none !important;
}

html body .status-bar #status[data-state="live"] .status-label,
html body .status-bar #status.is-live .status-label,
html body .status-bar #status .nav-status-label{
  color:var(--wx-live-green-text, #86efac) !important;
  -webkit-text-fill-color:var(--wx-live-green-text, #86efac) !important;
  font-weight:875 !important;
  text-shadow:none !important;
}

html body .status-bar #status[data-state="live"] .status-dot,
html body .status-bar #status[data-state="live"] .live-dot,
html body .status-bar #status.is-live .status-dot,
html body .status-bar #status.is-live .live-dot,
html body .status-bar #status .nav-live-dot{
  background:var(--wx-live-green, #22e879) !important;
  color:var(--wx-live-green, #22e879) !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:0 0 0 1px rgba(220,252,231,.22),
    0 0 8px rgba(34,232,121,.72),
    0 0 14px rgba(34,232,121,.24) !important;
}

html body .status-bar #status[data-state="loading"],
html body .status-bar #status.is-loading{
  color:#fde68a !important;
  -webkit-text-fill-color:#fde68a !important;
}

html body .status-bar #status[data-state="error"],
html body .status-bar #status.is-error{
  color:#fca5a5 !important;
  -webkit-text-fill-color:#fca5a5 !important;
}

:root{
  --wx-top-panel-bg:radial-gradient(circle at 18% 12%, rgba(255,255,255,.070), transparent 35%),
    linear-gradient(180deg, rgba(15,23,42,.56), rgba(15,23,42,.30));
  --wx-top-border-alpha:.54;
  --wx-top-glow-alpha:.18;
  --wx-wind-accent:96,165,250;
  --wx-solar-neutral-accent:148,163,184;
  --wx-lightning-accent:20,184,166;
}

html body .solar-combo-card{
  border-color:rgba(var(--wx-solar-neutral-accent), .46) !important;
  background:radial-gradient(circle at 18% 12%, rgba(226,232,240,.060), transparent 38%),
    linear-gradient(180deg, rgba(30,41,59,.50), rgba(15,23,42,.25)) !important;
  box-shadow:0 0 0 1px rgba(var(--wx-solar-neutral-accent), .08),
    0 0 20px rgba(148,163,184,.13),
    inset 0 1px 0 rgba(255,255,255,.070),
    inset 0 -1px 0 rgba(0,0,0,.18) !important;
}

html body .solar-combo-card .solar-combo-title{
  background:radial-gradient(circle at 18% 18%, rgba(255,255,255,.16), transparent 32%),
    linear-gradient(90deg, rgba(148,163,184,.30), rgba(15,23,42,.26)) !important;
}

html body .solar-combo-card .tube-card.uv,
html body .solar-combo-card .tube-card.solar{
  background:radial-gradient(circle at 18% 12%, rgba(255,255,255,.070), transparent 36%),
    linear-gradient(180deg, rgba(15,23,42,.44), rgba(15,23,42,.20)) !important;
  backdrop-filter:blur(8px) saturate(1.10) !important;
  -webkit-backdrop-filter:blur(8px) saturate(1.10) !important;
  border-width:1px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.070),
    inset 0 -1px 0 rgba(0,0,0,.16),
    0 0 13px rgba(255,255,255,.035) !important;
}

html body .solar-combo-card .tube-card.uv{
  border-color:rgba(168,85,247,.56) !important;
  box-shadow:0 0 0 1px rgba(168,85,247,.08),
    0 0 17px rgba(168,85,247,.20),
    inset 0 1px 0 rgba(255,255,255,.070),
    inset 0 -1px 0 rgba(0,0,0,.16) !important;
}

html body .solar-combo-card .tube-card.solar{
  border-color:rgba(250,204,21,.54) !important;
  box-shadow:0 0 0 1px rgba(250,204,21,.08),
    0 0 17px rgba(250,204,21,.18),
    inset 0 1px 0 rgba(255,255,255,.070),
    inset 0 -1px 0 rgba(0,0,0,.16) !important;
}

html body .header-logo-wrap{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:54px;
}

html body .header-logo-img{
  display:block;
  width:min(94%, 880px);
  max-height:74px;
  object-fit:contain;
  filter:drop-shadow(0 0 10px rgba(34,211,238,.18));
  user-select:none;
  -webkit-user-drag:none;
}

@media (max-width:720px){

  html body .header-logo-wrap{
    min-height:46px;
  }

  html body .header-logo-img{
    width:98%;
    max-height:62px;
  }

  html body .title3d .sub.header-logo-sub{
    width:98%;
    padding-right:8px;
    text-align:center;
    font-size:.74rem;
  }

}

html body .title3d-inner{
  padding:8px 12px 8px !important;
}

html body .header-brand-live{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  width:min(96%, 930px);
  margin:0 auto 0;
  white-space:nowrap;
}

html body .header-brand-icon{
  flex:0 0 auto;
  height:auto;
  overflow:visible;
}

html body .brand-signal{
  opacity:.95;
}

html body .header-brand-divider{
  flex:0 0 auto;
  width:2px;
  border-radius:999px;
  background:linear-gradient(180deg, transparent, rgba(103,232,249,.92), rgba(34,197,94,.76), transparent);
  box-shadow:0 0 12px rgba(34,211,238,.32);
  opacity:.9;
}

html body .header-brand-text{
  display:flex;
  align-items:baseline;
  min-width:0;
  line-height:1;
  text-transform:none;
}

html body .header-brand-main{
  font-size:clamp(2.05rem, 5.2vw, 4.45rem);
  filter:drop-shadow(0 0 2px rgba(14,165,233,.55));
}

html body .header-brand-accent{
  font-size:clamp(2.05rem, 5.2vw, 4.45rem);
  color:#4ade80;
  background:linear-gradient(180deg, #dcfce7 0%, #34d399 38%, #16a34a 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 2px rgba(34,197,94,.48));
}

html body .title3d .sub.header-logo-sub{
  position:relative;
  z-index:1;
  margin:1px auto 0;
  text-align:right;
  color:rgba(226,252,255,.94) !important;
  opacity:.96;
  font-size:clamp(.72rem, 1.12vw, .88rem);
  line-height:1.12;
  text-shadow:0 0 8px rgba(14,165,233,.22) !important;
}

@media (max-width:860px){

  html body .title3d .sub.header-logo-sub{
    width:98%;
    padding-right:8px;
    text-align:center;
    font-size:.74rem;
  }

}

@media (max-width:540px){

  html body .header-brand-live{
    flex-wrap:wrap;
    row-gap:0;
  }

  html body .header-brand-divider{
    display:none;
  }

}

html body .header-brand-live{
  min-height:56px !important;
  gap:clamp(8px, 1.45vw, 16px) !important;
}

html body .header-brand-icon{
  width:clamp(96px, 15vw, 172px) !important;
  filter:drop-shadow(0 0 7px rgba(34,211,238,.22))
    drop-shadow(0 0 10px rgba(34,197,94,.09)) !important;
}

html body .header-brand-divider{
  height:clamp(34px, 4.2vw, 52px) !important;
}

html body .header-brand-text{
  font-family:Rajdhani, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight:850 !important;
  letter-spacing:.028em !important;
  gap:.30em !important;
  text-shadow:0 1px 0 rgba(255,255,255,.14),
    0 0 8px rgba(34,211,238,.22),
    0 0 14px rgba(14,165,233,.10) !important;
}

html body .header-brand-main,
html body .header-brand-accent{
  font-size:clamp(1.72rem, 4.18vw, 3.55rem) !important;
}

html body .title3d .sub.header-logo-sub{
  width:min(94%, 900px) !important;
  padding-right:clamp(18px, 6vw, 88px) !important;
  margin-top:0 !important;
}

@media (max-width:860px){

  html body .header-brand-live{
    min-height:50px !important;
    gap:8px !important;
  }

  html body .header-brand-icon{
    width:clamp(78px, 19vw, 128px) !important;
  }

  html body .header-brand-divider{
    height:36px !important;
  }

  html body .header-brand-main,
  html body .header-brand-accent{
    font-size:clamp(1.22rem, 5.25vw, 2.08rem) !important;
  }

}

@media (max-width:540px){

  html body .header-brand-live{
    min-height:64px !important;
  }

  html body .header-brand-icon{
    width:94px !important;
  }

  html body .header-brand-text{
    gap:.23em !important;
    letter-spacing:.018em !important;
  }

  html body .header-brand-main,
  html body .header-brand-accent{
    font-size:clamp(1.04rem, 6.8vw, 1.56rem) !important;
  }

}

html body .brand-word-tunnera{
  display:inline-block;
  font-style:italic !important;
  transform:skewX(-4deg);
}

html body .brand-word-estate{
  display:inline-block;
  font-style:italic !important;
  transform:skewX(-4deg);
  -webkit-text-stroke:1.1px rgba(190,252,255,.82);
  text-stroke:1.1px rgba(190,252,255,.82);
  color:transparent !important;
  -webkit-text-fill-color:transparent !important;
  text-shadow:0 0 1px rgba(255,255,255,.52),
    0 0 7px rgba(34,211,238,.26),
    0 0 12px rgba(34,197,94,.14) !important;
  filter:drop-shadow(0 0 3px rgba(34,211,238,.20));
}

html body .header-brand-main{
  background:none !important;
  -webkit-background-clip:initial !important;
  background-clip:initial !important;
  -webkit-text-fill-color:initial !important;
  color:#67e8f9 !important;
}

html body .header-brand-main .brand-word-tunnera{
  background:linear-gradient(180deg, #e0fbff 0%, #22d3ee 36%, #0284c7 100%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
}

@media (max-width:540px){

  html body .brand-word-estate{
    -webkit-text-stroke:.85px rgba(190,252,255,.84);
    text-stroke:.85px rgba(190,252,255,.84);
  }

}

html body{
  background:radial-gradient(900px 520px at 12% 6%, rgba(14,165,233,.17), transparent 58%),
    radial-gradient(760px 460px at 88% 4%, rgba(20,184,166,.115), transparent 56%),
    radial-gradient(820px 520px at 50% 112%, rgba(59,130,246,.095), transparent 62%),
    linear-gradient(180deg, #081017 0%, #0d151d 42%, #111315 100%) !important;
  background-attachment:fixed !important;
}

html body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:linear-gradient(115deg, transparent 0%, rgba(255,255,255,.018) 31%, transparent 46%),
    linear-gradient(rgba(148,163,184,.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,163,184,.020) 1px, transparent 1px);
  background-size:100% 100%,
    56px 56px,
    56px 56px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.76), rgba(0,0,0,.36) 44%, rgba(0,0,0,.18) 100%);
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.76), rgba(0,0,0,.36) 44%, rgba(0,0,0,.18) 100%);
  opacity:.58;
}

html body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:radial-gradient(900px 420px at 50% 0%, rgba(255,255,255,.035), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.04), transparent 28%, rgba(0,0,0,.16) 100%);
  opacity:.78;
}

@media (max-width:720px){

  html body{
    background:radial-gradient(720px 420px at 12% 3%, rgba(14,165,233,.15), transparent 60%),
      radial-gradient(620px 380px at 88% 0%, rgba(20,184,166,.10), transparent 58%),
      linear-gradient(180deg, #081017 0%, #0d151d 46%, #111315 100%) !important;
  }

  html body::before{
    background-size:100% 100%,
      48px 48px,
      48px 48px;
    opacity:.45;
  }

}

html body .pill:not(.danger):not(.alert):not(.critical):not(.warning):not(.warn),
html body .chip:not(.danger):not(.alert):not(.critical):not(.warning):not(.warn),
html body .badge:not(.danger):not(.alert):not(.critical):not(.warning):not(.warn),
html body .status-chip:not(.danger):not(.alert):not(.critical):not(.warning):not(.warn),
html body .info-pill,
html body .meta-pill,
html body [class*="status-pill"]:not(.danger):not(.alert):not(.critical):not(.warning):not(.warn),
html body [class*="info-pill"],
html body [class*="summary-pill"]{
  color:rgba(232,252,255,.94) !important;
  background:linear-gradient(180deg, rgba(255,255,255,.105), rgba(255,255,255,.038)),
    rgba(14,165,233,.075) !important;
  border-color:rgba(125,211,252,.24) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.105),
    0 0 0 1px rgba(255,255,255,.025),
    0 6px 14px rgba(0,0,0,.11) !important;
  text-shadow:0 1px 0 rgba(0,0,0,.26) !important;
  backdrop-filter:blur(9px) saturate(135%) !important;
  -webkit-backdrop-filter:blur(9px) saturate(135%) !important;
}

html body .pill.muggy,
html body .chip.muggy,
html body .badge.muggy,
html body .comfort-pill,
html body .comfort-chip,
html body [data-comfort],
html body [class*="comfort"] .pill,
html body [class*="comfort"] .chip,
html body [class*="comfort"] .badge{
  color:rgba(226,252,255,.95) !important;
  background:linear-gradient(180deg, rgba(125,211,252,.125), rgba(255,255,255,.035)),
    rgba(15,23,42,.18) !important;
  border-color:rgba(125,211,252,.26) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),
    0 0 10px rgba(14,165,233,.075) !important;
}

html body .pill.live,
html body .chip.live,
html body .badge.live,
html body .status-chip.live,
html body .status-dot.live-dot + span,
html body .live-text{
  color:#7CFF9B !important;
}

html body .pill.warning,
html body .pill.warn,
html body .chip.warning,
html body .chip.warn,
html body .badge.warning,
html body .badge.warn{
  color:rgba(255,246,210,.96) !important;
  background:linear-gradient(180deg, rgba(250,204,21,.16), rgba(255,255,255,.035)),
    rgba(245,158,11,.085) !important;
  border-color:rgba(250,204,21,.28) !important;
}

html body .pill.danger,
html body .pill.alert,
html body .pill.critical,
html body .chip.danger,
html body .chip.alert,
html body .chip.critical,
html body .badge.danger,
html body .badge.alert,
html body .badge.critical{
  color:rgba(255,235,235,.96) !important;
  background:linear-gradient(180deg, rgba(239,68,68,.17), rgba(255,255,255,.035)),
    rgba(127,29,29,.10) !important;
  border-color:rgba(248,113,113,.30) !important;
}

html body .has-risk-label::after{
  color:rgba(235,252,255,.92) !important;
  background:linear-gradient(180deg, rgba(255,255,255,.145), rgba(255,255,255,.045)),
    rgba(14,165,233,.070) !important;
  border:1px solid rgba(125,211,252,.28) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(0,0,0,.08),
    0 0 10px rgba(14,165,233,.085) !important;
  text-shadow:0 1px 0 rgba(0,0,0,.22) !important;
  opacity:.96 !important;
  backdrop-filter:blur(8px) saturate(140%) !important;
  -webkit-backdrop-filter:blur(8px) saturate(140%) !important;
}

html body [data-risk-level="ok"]::after{
  color:rgba(190,255,210,.96) !important;
  background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.040)),
    rgba(34,197,94,.095) !important;
  border-color:rgba(116,255,158,.32) !important;
}

html body [data-risk-level="info"]::after,
html body [data-risk-level="neutral"]::after{
  color:rgba(224,246,255,.94) !important;
  background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.040)),
    rgba(14,165,233,.085) !important;
  border-color:rgba(125,211,252,.30) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),
    0 0 10px rgba(14,165,233,.085) !important;
}

html body [data-risk-level="caution"]::after{
  color:rgba(255,250,218,.96) !important;
  background:linear-gradient(180deg, rgba(255,255,255,.145), rgba(255,255,255,.042)),
    rgba(250,204,21,.090) !important;
  border-color:rgba(253,224,71,.34) !important;
}

html body [data-risk-level="warn"]::after{
  color:rgba(255,244,226,.97) !important;
  background:linear-gradient(180deg, rgba(255,255,255,.150), rgba(255,255,255,.046)),
    rgba(251,146,60,.085) !important;
  border-color:rgba(253,186,116,.34) !important;
}

html body [data-risk-level="danger"]::after{
  color:rgba(255,235,235,.97) !important;
  background:linear-gradient(180deg, rgba(255,255,255,.145), rgba(255,255,255,.044)),
    rgba(239,68,68,.095) !important;
  border-color:rgba(248,113,113,.36) !important;
}

html body .has-risk-label::after,
html body [data-risk-level="ok"]::after,
html body [data-risk-level="info"]::after,
html body [data-risk-level="neutral"]::after,
html body [data-risk-level="caution"]::after,
html body [data-risk-level="warn"]::after,
html body [data-risk-level="danger"]::after{
  border:0 !important;
  outline:0 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(0,0,0,.055),
    0 0 8px rgba(14,165,233,.060) !important;
}

html body [data-risk-level="ok"]::after{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),
    0 0 8px rgba(34,197,94,.075) !important;
}

html body [data-risk-level="caution"]::after{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),
    0 0 8px rgba(250,204,21,.065) !important;
}

html body [data-risk-level="warn"]::after{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),
    0 0 8px rgba(251,146,60,.060) !important;
}

html body [data-risk-level="danger"]::after{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),
    0 0 8px rgba(239,68,68,.070) !important;
}

html body .spark path.line{
  stroke-width:1.35 !important;
}

html body .spark .grid line.minor{
  stroke-width:.45 !important;
}

html body .spark .grid line.major{
  stroke-width:.65 !important;
}

html body svg[class*="spark"] path.line,
html body svg[class*="sparkline"] path.line,
html body .sparkline path.line,
html body .mini-spark path.line{
  stroke-width:1.35 !important;
}

html body .spark path.line,
html body svg.spark path.line,
html body svg[class*="spark"] path.line,
html body svg[class*="sparkline"] path.line,
html body .sparkline path.line,
html body .mini-spark path.line,
html body .mini-sparkline path.line,
html body [class*="spark"] path.line{
  stroke-width:1.05 !important;
  vector-effect:non-scaling-stroke;
}

html body .spark .grid line.minor,
html body svg[class*="spark"] .grid line.minor,
html body [class*="spark"] .grid line.minor{
  stroke-width:.35 !important;
  opacity:.70 !important;
}

html body .spark .grid line.major,
html body svg[class*="spark"] .grid line.major,
html body [class*="spark"] .grid line.major{
  stroke-width:.50 !important;
  opacity:.72 !important;
}

html body .spark circle,
html body svg[class*="spark"] circle,
html body [class*="spark"] circle{
  stroke-width:.75 !important;
}

html body .has-risk-label{
  overflow:visible !important;
}

html body .has-risk-label::after,
html body [data-risk-label]::after,
html body [data-risk-level]::after{
  border:0 !important;
  outline:0 !important;
  width:auto !important;
  flex:0 0 auto !important;
  padding-inline:8px !important;
}

html body #rainRate.has-risk-label::after,
html body [id*="rain" i].has-risk-label::after,
html body [id*="precip" i].has-risk-label::after{
  min-width:max-content !important;
  max-width:none !important;
  padding-inline:9px !important;
}

html body .ribbon-value,
html body .gauge-rows .kv .v,
html body .nowcast-row .kv .v{
  overflow:visible !important;
}

/* Hazards panel theme tokens from older reference */

/* Restore original Hazards inner card look */

html body #hazardsPanel .ribbon-body-card{
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  border-radius:12px !important;
  border:1px solid color-mix(in oklab, var(--c1) 70%, #fff) !important;
  background:radial-gradient(120% 120% at 50% 60%, rgba(0,0,0,.50), rgba(0,0,0,.10) 65%, transparent 75%),
    rgba(0,0,0,0.28) !important;
}

/* Restore the original hazard chip container */

html body #hazardsPanel .hazard-chips,
html body #hazardChips{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:8px !important;
  align-items:center !important;
  margin:0 0 8px 0 !important;
  padding:0 !important;
  min-height:0 !important;
  background:transparent !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
}

/* Restore older dynamic hazard pill style */

html body #hazardsPanel .hazard-chips .pill,
html body #hazardChips .pill{
  --hz-chip:#3b82f6;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:.18rem .48rem !important;
  min-height:0 !important;
  border-radius:999px !important;
  font-size:.8rem !important;
  font-weight:600 !important;
  line-height:1 !important;
  white-space:nowrap !important;
  opacity:1 !important;
  filter:none !important;
  color:#ffffff !important;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)),
    color-mix(in oklab, var(--hz-chip, #3b82f6) 82%, black 0%) !important;
  border:1px solid color-mix(in oklab, var(--hz-chip, #3b82f6) 78%, #fff 10%) !important;
  text-shadow:0 1px 0 rgba(0,0,0,.35) !important;
  box-shadow:0 2px 10px rgba(0,0,0,.24),
    0 0 10px 3px color-mix(in oklab, var(--hz-chip, #3b82f6) 22%, transparent),
    inset 0 0 0 1px rgba(255,255,255,.06),
    inset 0 0 22px 8px color-mix(in oklab, var(--hz-chip, #3b82f6) 24%, transparent) !important;
}

/* Original hazard class palette */

html body #hazardsPanel .hazard-chips .pill.hz-warning,
html body #hazardChips .pill.hz-warning{
  --hz-chip:var(--hz-red, #ef4444) !important;
}

html body #hazardsPanel .hazard-chips .pill.hz-watch,
html body #hazardChips .pill.hz-watch{
  --hz-chip:var(--hz-amber, #f59e0b) !important;
}

html body #hazardsPanel .hazard-chips .pill.hz-advisory,
html body #hazardChips .pill.hz-advisory{
  --hz-chip:var(--hz-yellow, #facc15) !important;
  color:#0b1520 !important;
  text-shadow:none !important;
}

html body #hazardsPanel .hazard-chips .pill.hz-wind,
html body #hazardChips .pill.hz-wind{
  --hz-chip:var(--hz-blue, #3b82f6) !important;
}

html body #hazardsPanel .hazard-chips .pill.hz-flood,
html body #hazardChips .pill.hz-flood{
  --hz-chip:var(--hz-indigo, #6366f1) !important;
}

html body #hazardsPanel .hazard-chips .pill.hz-clear,
html body #hazardChips .pill.hz-clear,
html body #hazardChips .pill.none,
html body #chip-none{
  --hz-chip:var(--hz-green, #22c55e) !important;
}

/* Original hover behavior for linkable hazard pills */

@media (hover:hover){

  html body #hazardsPanel .hazard-chips .pill:hover,
  html body #hazardChips .pill:hover{
    filter:saturate(1.08) !important;
    border-color:color-mix(in oklab, var(--hz-chip, #3b82f6) 86%, #fff 8%) !important;
    box-shadow:0 3px 12px rgba(0,0,0,.28),
      0 0 14px 5px color-mix(in oklab, var(--hz-chip, #3b82f6) 28%, transparent),
      inset 0 0 0 1px rgba(255,255,255,.08),
      inset 0 0 26px 10px color-mix(in oklab, var(--hz-chip, #3b82f6) 28%, transparent) !important;
  }

}

html body #hazardsPanel .hazard-chips .pill[title*="Open details"],
html body #hazardChips .pill[title*="Open details"]{
  cursor:pointer !important;
}

/* Restore original Hazards nowcast/AWS two-column stack */

html body #hazardsPanel .nowcast-row{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  margin-top:0 !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
}

html body #hazardsPanel .nowcast-row::before{
  display:none !important;
  content:none !important;
}

html body #hazardsPanel .nowcast-row .kv{
  display:grid !important;
  margin:0 !important;
  background:transparent !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
}

html body #hazardsPanel .nowcast-row .kv .k{
  color:var(--muted) !important;
  font-weight:700 !important;
  background:transparent !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  min-height:0 !important;
}

html body #hazardsPanel .nowcast-row .kv .v,
html body #hazardsPanel #aws-rain{
  color:var(--ink) !important;
  font-weight:900 !important;
  background:transparent !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  min-height:0 !important;
}

@media (max-width:640px){

  html body #hazardsPanel .nowcast-row{
    grid-template-columns:1fr !important;
  }

}

/* Restore older hazards panel-note reference badge style */

html body #hazardsPanel .panel-note a{
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  padding:2px 8px !important;
  border-radius:8px !important;
  font-weight:800 !important;
  line-height:1 !important;
  text-decoration:none !important;
  white-space:nowrap !important;
  position:relative !important;
  top:-1px !important;
  color:#0b1520 !important;
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04)),
    linear-gradient(135deg, #f59e0b, #ef4444) !important;
  border:1px solid rgba(255,255,255,.24) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(0,0,0,.25),
    0 2px 8px rgba(239,68,68,.25) !important;
}

html body #hazardsPanel .panel-note a[target="_blank"]::after{
  content:"↗" !important;
  font-weight:900 !important;
  font-size:.85em !important;
  margin-left:4px !important;
  opacity:.85 !important;
  transform:translateY(-.5px) !important;
}

html body #hazardsPanel .panel-note{
  display:flex !important;
  align-items:center !important;
  flex-wrap:wrap !important;
  gap:.45rem .55rem !important;
}

html body #hazardsPanel .panel-note .note-ico{
  margin-right:.15rem !important;
}

/* Fallback where color-mix is unavailable */

@supports not (background: color-mix(in oklab, red 50%, white)){

  html body #hazardsPanel .ribbon-body-card{
    border-color:#ef4444 !important;
    box-shadow:0 0 20px 8px rgba(239,68,68,.22),
      0 0 20px 8px rgba(250,204,21,.18),
      inset 0 0 56px 20px rgba(239,68,68,.16),
      inset 0 0 56px 20px rgba(250,204,21,.14),
      0 8px 18px rgba(0,0,0,.20) !important;
  }

  html body #hazardChips .pill,
  html body #hazardsPanel .hazard-chips .pill{
    background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)), var(--hz-chip, #3b82f6) !important;
    border-color:var(--hz-chip, #3b82f6) !important;
  }

}

html body #hazardsPanel{
  --c1:#67e8f9 !important;
  --c2:#38bdf8 !important;
  border-color:rgba(103,232,249,.72) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055),
    0 0 18px rgba(103,232,249,.18),
    0 0 24px rgba(56,189,248,.12) !important;
}

html body #hazardsPanel .ribbon-body-card{
  border-color:rgba(103,232,249,.66) !important;
  box-shadow:0 0 18px 7px rgba(103,232,249,.16),
    0 0 18px 7px rgba(56,189,248,.10),
    inset 0 0 48px 18px rgba(14,165,233,.10),
    inset 0 0 42px 16px rgba(103,232,249,.07),
    0 8px 18px rgba(0,0,0,.20) !important;
}

html body #hazardsPanel.ribbon--panel{
  padding-bottom:12px !important;
  overflow:visible !important;
}

html body #hazardsPanel .panel-note--hazards{
  border-color:rgba(103,232,249,.58) !important;
  box-shadow:0 0 12px 4px rgba(103,232,249,.14),
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 8px 18px rgba(0,0,0,.18) !important;
}

html body #hazardsPanel .ribbon-body-card{
  padding:14px 16px 24px !important;
  margin:8px 0 20px !important;
  min-height:172px !important;
  overflow:visible !important;
}

html body #hazardsPanel.ribbon--panel,
html body #hazardsPanel{
  padding-bottom:18px !important;
  overflow:visible !important;
}

html body #hazardsPanel .nowcast-row{
  gap:9px 22px !important;
  padding-bottom:8px !important;
  margin-bottom:2px !important;
  align-items:start !important;
  overflow:visible !important;
}

html body #hazardsPanel .nowcast-row .kv{
  min-height:24px !important;
  align-items:center !important;
  overflow:visible !important;
}

html body #hazardsPanel .nowcast-row .kv .k,
html body #hazardsPanel .nowcast-row .kv .v,
html body #hazardsPanel #aws-station,
html body #hazardsPanel #aws-rain,
html body #hazardsPanel #aws-wind,
html body #hazardsPanel #qpf-03,
html body #hazardsPanel #qpf-36{
  line-height:1.35 !important;
  overflow:visible !important;
  white-space:nowrap !important;
}

html body #hazardChips{
  overflow:visible !important;
  padding-bottom:4px !important;
}

html body #hazardChips .pill{
  line-height:1.15 !important;
}

:root{
  --appliance-field-bg:rgba(6, 12, 20, .62);
  --appliance-field-bg-2:rgba(10, 18, 30, .56);
  --appliance-panel-bg:rgba(6, 11, 18, .48);
  --appliance-border:rgba(125, 211, 252, .20);
  --appliance-label:rgba(214, 232, 244, .90);
  --appliance-value:rgba(248, 250, 252, .98);
  --appliance-muted:rgba(203, 213, 225, .84);
}

html body{
  color:var(--appliance-value) !important;
}

html body .ribbon-item,
html body .gauge-rows .kv,
html body .nowcast-row .kv,
html body .ribbon-value,
html body .ribbon-label{
  background:linear-gradient(180deg, rgba(255,255,255,.040), rgba(255,255,255,.010)),
    var(--appliance-field-bg) !important;
  border:1px solid rgba(125,211,252,.12) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045),
    inset 0 -1px 0 rgba(0,0,0,.25),
    0 1px 4px rgba(0,0,0,.16) !important;
}

html body .ribbon-label,
html body .gauge-rows .kv .k,
html body .nowcast-row .kv .k,
html body .kv .k{
  color:var(--appliance-label) !important;
  text-shadow:0 1px 1px rgba(0,0,0,.72),
    0 0 4px rgba(0,0,0,.34) !important;
  font-weight:850 !important;
}

html body .ribbon-value,
html body .gauge-rows .kv .v,
html body .nowcast-row .kv .v,
html body .kv .v,
html body [id$="Val"],
html body [id$="Unit"]{
  color:var(--appliance-value) !important;
  text-shadow:0 1px 1px rgba(0,0,0,.78),
    0 0 4px rgba(0,0,0,.36) !important;
  font-weight:900 !important;
}

html body #outTempVal,
html body [id*="temp" i][id$="Val"]{
  color:#ff6b6b !important;
}

html body #outHumVal,
html body [id*="hum" i][id$="Val"]{
  color:#fbbf24 !important;
}

html body #dewVal{
  color:#fde68a !important;
}

html body #feelsVal{
  color:#7dd3fc !important;
}

html body .pill,
html body .chip,
html body .badge,
html body .status-chip,
html body .info-pill,
html body .meta-pill{
  color:rgba(238,248,255,.96) !important;
  background:linear-gradient(180deg, rgba(255,255,255,.070), rgba(255,255,255,.018)),
    rgba(8,15,25,.62) !important;
  border-color:rgba(125,211,252,.16) !important;
  text-shadow:0 1px 1px rgba(0,0,0,.70),
    0 0 4px rgba(0,0,0,.30) !important;
}

html body .pill.live,
html body [data-state="live"],
html body .status-dot.live-dot + .status-label,
html body .live-text{
  color:#86efac !important;
}

html body #forecast7Panel .fct-tile,
html body #quakesPanel .q-chip,
html body #quakesPanel .quake-chip{
  background:linear-gradient(180deg, rgba(255,255,255,.040), rgba(255,255,255,.012)),
    rgba(8,15,25,.62) !important;
  border-color:rgba(125,211,252,.15) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045),
    0 2px 8px rgba(0,0,0,.20) !important;
}

html body #quakesPanel .q-place,
html body #forecast7Panel .fct-tile .dow{
  color:rgba(240,249,255,.96) !important;
  text-shadow:0 1px 1px rgba(0,0,0,.78),
    0 0 4px rgba(0,0,0,.34) !important;
}

html body .spark rect.bg{
  fill:rgba(5,10,18,.52) !important;
  stroke:rgba(125,211,252,.14) !important;
}

html body .spark path.line{
  opacity:.98 !important;
  filter:drop-shadow(0 0 2px rgba(0,0,0,.42));
}

html body .glow-outer,
html body .ribbon,
html body .stage{
  filter:none !important;
}

html body .drawer-panel,
html body .input,
html body select,
html body output{
  color:rgba(248,250,252,.96) !important;
}

html body .input,
html body select{
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.010)),
    rgba(8,15,25,.68) !important;
  border-color:rgba(125,211,252,.18) !important;
}

html body #hazardChips .pill.hz-warning,
html body #hazardChips .pill.hz-watch,
html body #hazardChips .pill.hz-advisory,
html body #hazardChips .pill.hz-wind,
html body #hazardChips .pill.hz-flood,
html body #hazardChips .pill.hz-clear,
html body #hazardChips .pill.none,
html body #chip-none{
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)),
    color-mix(in oklab, var(--hz-chip, #3b82f6) 82%, black 0%) !important;
  border:1px solid color-mix(in oklab, var(--hz-chip, #3b82f6) 78%, #fff 10%) !important;
  box-shadow:0 2px 10px rgba(0,0,0,.24),
    0 0 10px 3px color-mix(in oklab, var(--hz-chip, #3b82f6) 22%, transparent),
    inset 0 0 0 1px rgba(255,255,255,.06),
    inset 0 0 22px 8px color-mix(in oklab, var(--hz-chip, #3b82f6) 24%, transparent) !important;
}

html body #hazardChips .pill.hz-advisory{
  color:#0b1520 !important;
  text-shadow:none !important;
}

html body .ribbon-label,
html body .gauge-rows .kv .k,
html body .nowcast-row .kv .k,
html body .kv .k,
html body #forecast7Panel .fct-tile .dow,
html body #quakesPanel .q-meta{
  display:block;
  max-width:100%;
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

html body .ribbon-value,
html body .gauge-rows .kv .v,
html body .nowcast-row .kv .v,
html body .kv .v,
html body [id$="Val"],
html body [id$="Unit"]{
  max-width:100%;
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

html body .pill,
html body .chip,
html body .badge,
html body .status-chip,
html body .info-pill,
html body .meta-pill{
  max-width:100% !important;
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  flex-shrink:1 !important;
}

html body .status-bar,
html body .status-left,
html body .status-right,
html body .nav-status{
  min-width:0 !important;
}

html body .status-bar .pill,
html body .status-bar .chip,
html body .status-bar [class*="pill"]{
  max-width:min(100%, 34ch) !important;
}

html body #hazardChips,
html body #hazardsPanel .hazard-chips{
  min-width:0 !important;
  max-width:100% !important;
  overflow:hidden !important;
  flex-wrap:wrap !important;
  align-items:flex-start !important;
}

html body #hazardChips .pill,
html body #hazardsPanel .hazard-chips .pill{
  max-width:100% !important;
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

html body #quakesPanel .q-chip,
html body #quakesPanel .quake-chip{
  grid-template-columns:minmax(0, max-content) minmax(0, 1fr) minmax(0, max-content) !important;
}

html body #quakesPanel .q-head,
html body #quakesPanel .q-place{
  min-width:0 !important;
  max-width:100% !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

html body #forecast7Panel .fct-tile{
  min-width:0 !important;
}

html body #forecast7Panel .fct-tile *{
  min-width:0 !important;
  max-width:100%;
}

html body [id*="rain" i],
html body [id*="precip" i],
html body [id*="qpf" i],
html body #aws-rain,
html body #qpf-03,
html body #qpf-36{
  min-width:0 !important;
  max-width:100% !important;
}

@media (max-width:900px){

  html body .ribbon-value,
html body .gauge-rows .kv .v,
html body .nowcast-row .kv .v,
html body .kv .v{
    white-space:normal !important;
    overflow-wrap:anywhere !important;
    text-overflow:clip !important;
  }

  html body #hazardChips .pill,
  html body #hazardsPanel .hazard-chips .pill{
    white-space:normal !important;
    overflow-wrap:anywhere !important;
    text-overflow:clip !important;
    line-height:1.18 !important;
  }

}

@media (max-width:640px){

  html body .ribbon-item,
  html body .gauge-rows .kv,
  html body .nowcast-row .kv,
  html body .kv{
    overflow:hidden !important;
  }

  html body .ribbon-label,
  html body .gauge-rows .kv .k,
  html body .nowcast-row .kv .k,
  html body .kv .k{
    white-space:normal !important;
    overflow-wrap:anywhere !important;
    text-overflow:clip !important;
  }

  html body .pill,
  html body .chip,
  html body .badge,
  html body .status-chip{
    max-width:100% !important;
  }

}

html body .has-risk-label::after,
html body [data-risk-label]::after,
html body [data-risk-level]::after{
  max-width:min(100%, 18ch) !important;
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  flex-shrink:1 !important;
}

@media (max-width:900px){

  html body .has-risk-label::after,
  html body [data-risk-label]::after,
  html body [data-risk-level]::after{
    max-width:100% !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
    text-overflow:clip !important;
  }

}

@media (max-width:1180px){

  html body .hazards-quakes-row{
    grid-template-columns:1fr !important;
    gap:12px !important;
  }

  html body #hazardsPanel,
  html body #quakesPanel{
    max-width:100% !important;
    overflow:hidden !important;
  }

}

html body #hazardsPanel .ribbon-title,
html body #quakesPanel .ribbon-title,
html body #forecast7Panel .ribbon-title{
  min-width:0 !important;
  max-width:100% !important;
  flex-wrap:wrap !important;
  justify-content:center !important;
  gap:6px 10px !important;
  overflow:hidden !important;
}

html body #hazardsPanel .ribbon-title .title-text,
html body #quakesPanel .ribbon-title .title-text,
html body #forecast7Panel .ribbon-title .title-text{
  min-width:0 !important;
  max-width:100% !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

html body #fc7StatusPill,
html body #hazStatusPill,
html body #quakesStatusPill{
  max-width:min(100%, 34ch) !important;
  min-width:0 !important;
  flex:0 1 auto !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

html body #hazardsPanel .panel-note,
html body #quakesPanel .panel-note{
  min-width:0 !important;
  max-width:100% !important;
  overflow:hidden !important;
}

html body #hazardsPanel .panel-note a,
html body #quakesPanel .panel-note a{
  max-width:100% !important;
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

html body #quakesPanel .q-row,
html body #quakesPanel .quakes-strip,
html body #quakesPanel .q-chip,
html body #quakesPanel .quake-chip{
  min-width:0 !important;
  max-width:100% !important;
  overflow:hidden !important;
}

html body #quakesPanel .q-place,
html body #quakesPanel .q-meta{
  min-width:0 !important;
  max-width:100% !important;
}

html body #hazardsPanel .nowcast-row .kv{
  grid-template-columns:max-content minmax(0, 1fr) !important;
  column-gap:8px !important;
}

html body #hazardsPanel .nowcast-row .kv .v{
  min-width:0 !important;
  max-width:100% !important;
}

@media (max-width:760px){

  html body #fc7StatusPill,
  html body #hazStatusPill,
  html body #quakesStatusPill{
    white-space:normal !important;
    overflow-wrap:anywhere !important;
    text-overflow:clip !important;
  }

  html body #hazardsPanel .panel-note,
  html body #quakesPanel .panel-note{
    white-space:normal !important;
  }

  html body #hazardsPanel .panel-note a,
  html body #quakesPanel .panel-note a{
    white-space:normal !important;
    overflow-wrap:anywhere !important;
  }

}

:root{
  --wx-rain-embed-col:clamp(96px, 10.5vw, 142px);
}

html body #rainRibbon.rain-has-intensity .ribbon-body-card{
  grid-template-columns:minmax(0,1fr) var(--wx-rain-embed-col) !important;
}

html body #rainRibbon .tube-card.rain{
  min-width:0 !important;
  overflow:hidden !important;
  padding:6px 6px 8px !important;
  display:grid !important;
  grid-template-rows:auto 1fr auto !important;
  align-items:start !important;
}

html body #rainRibbon .tube-card.rain .tube-value,
html body #rainRibbon #tube-rain-val{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:4px !important;
  min-width:0 !important;
  max-width:100% !important;
  width:100% !important;
  overflow:visible !important;
  text-overflow:clip !important;
  white-space:normal !important;
  line-height:1.08 !important;
  text-align:center !important;
}

html body #rainRibbon #tube-rain-val.has-risk-label::after,
html body #rainRibbon .tube-card.rain .tube-value.has-risk-label::after{
  margin-left:0 !important;
  margin-top:0 !important;
  max-width:100% !important;
  align-self:center !important;
  white-space:nowrap !important;
  text-overflow:ellipsis !important;
  overflow:hidden !important;
  font-size:.52rem !important;
  line-height:1.05 !important;
  padding:2px 5px !important;
}

html body #rainRibbon .tube-card.rain .tube-title{
  max-width:100% !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

@media (max-width:900px){

  html body #rainRibbon .tube-card.rain{
    padding:6px 5px 8px !important;
  }

  html body #rainRibbon #tube-rain-val.has-risk-label::after,
  html body #rainRibbon .tube-card.rain .tube-value.has-risk-label::after{
    font-size:.50rem !important;
    max-width:100% !important;
  }

}

html body #quakesPanel .quakes-strip{
  gap:10px !important;
  scroll-snap-type:none !important;
  max-width:100% !important;
  min-width:0 !important;
  mask-image:linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%) !important;
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%) !important;
}

html body #quakesPanel .quakes-strip::-webkit-scrollbar{
  height:8px !important;
}

html body #quakesPanel .quakes-strip::-webkit-scrollbar-track{
  background:rgba(255,255,255,.06) !important;
  border-radius:10px !important;
}

html body #quakesPanel .quakes-strip::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.22) !important;
  border-radius:10px !important;
}

html body #quakesPanel .quakes-strip::-webkit-scrollbar-thumb:hover{
  background:rgba(255,255,255,.32) !important;
}

html body #quakesPanel .q-chip,
html body #quakesPanel .quake-chip{
  scroll-snap-align:start !important;
}

html body #quakesPanel .q-head,
html body #quakesPanel .q-place,
html body #quakesPanel .q-meta{
  min-width:0 !important;
  max-width:100% !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

@media (max-width:560px){

  html body #quakesPanel .q-chip,
  html body #quakesPanel .quake-chip{
    min-width:220px !important;
    max-width:260px !important;
  }

}

html body.solar-combo-active .solar-combo-body,
html body #solarComboBody{
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) !important;
  gap:12px !important;
  width:100% !important;
  min-width:0 !important;
  align-items:stretch !important;
}

html body .solar-combo-card .tube-card.uv,
html body .solar-combo-card .tube-card.solar,
html body #solarComboBody .tube-card.uv,
html body #solarComboBody .tube-card.solar{
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  justify-self:stretch !important;
  align-self:stretch !important;
  display:grid !important;
  grid-template-rows:auto 1fr auto !important;
  justify-items:center !important;
  align-items:center !important;
  overflow:hidden !important;
}

html body .solar-combo-card .tube-card.uv .tube-title,
html body .solar-combo-card .tube-card.solar .tube-title,
html body #solarComboBody .tube-card.uv .tube-title,
html body #solarComboBody .tube-card.solar .tube-title,
html body .solar-combo-card .tube-card.uv .tube-value,
html body .solar-combo-card .tube-card.solar .tube-value,
html body #solarComboBody .tube-card.uv .tube-value,
html body #solarComboBody .tube-card.solar .tube-value{
  max-width:100% !important;
  min-width:0 !important;
}

html body .solar-combo-card .tube-card.uv .tube,
html body .solar-combo-card .tube-card.solar .tube,
html body #solarComboBody .tube-card.uv .tube,
html body #solarComboBody .tube-card.solar .tube{
  justify-self:center !important;
}

html body .solar-combo-card{
  min-width:0 !important;
  width:100% !important;
  max-width:100% !important;
  overflow:hidden !important;
}

@media (max-width:760px){

  html body.solar-combo-active .solar-combo-body,
  html body #solarComboBody{
    grid-template-columns:1fr !important;
  }

}

html body #solarComboBody > .tube-card.uv,
html body #solarComboBody > .tube-card.solar,
html body .solar-combo-card .solar-combo-body > .tube-card.uv,
html body .solar-combo-card .solar-combo-body > .tube-card.solar{
  grid-column:auto / span 1 !important;
  grid-row:auto !important;
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  justify-self:stretch !important;
  align-self:stretch !important;
}

html body #solarComboBody,
html body .solar-combo-card .solar-combo-body{
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) !important;
  grid-auto-flow:row !important;
  width:100% !important;
  min-width:0 !important;
  align-items:stretch !important;
}

html body #solarComboBody > .tube-card.uv,
html body #solarComboBody > .tube-card.solar{
  display:grid !important;
  grid-template-columns:var(--wx-solar-side-label-col) minmax(34px,1fr) !important;
  grid-template-rows:auto auto !important;
  grid-template-areas:"label tube" "value tube" !important;
}

@media (max-width:560px){

  html body #solarComboBody,
  html body .solar-combo-card .solar-combo-body{
    grid-template-columns:1fr !important;
  }

  html body #solarComboBody > .tube-card.uv,
  html body #solarComboBody > .tube-card.solar,
  html body .solar-combo-card .solar-combo-body > .tube-card.uv,
  html body .solar-combo-card .solar-combo-body > .tube-card.solar{
    grid-column:auto !important;
  }

}

html body #forecast7Panel .ribbon-body-card,
html body #hazardsPanel .ribbon-body-card,
html body #quakesPanel .ribbon-body-card,
html body #rainRibbon .ribbon-body-card,
html body .solar-combo-card .solar-combo-body{
  min-width:0 !important;
  max-width:100% !important;
  overflow:hidden !important;
}

html body #forecast7Panel .forecast7-grid,
html body #forecast7Panel .fct-tile{
  min-width:0 !important;
}

html body #forecast7Panel .fct-tile .dow,
html body #forecast7Panel .fct-tile .hi-lo,
html body #forecast7Panel .fct-tile .pop{
  max-width:100% !important;
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

html body #hazardsPanel .haz-note-wrap,
html body #hazardsPanel .panel-note,
html body #hazardsPanel .hazard-chips,
html body #hazardsPanel .nowcast-row,
html body #hazardsPanel .nowcast-row .kv{
  min-width:0 !important;
  max-width:100% !important;
}

html body #hazardsPanel .panel-note{
  overflow:hidden !important;
}

html body #hazardsPanel .panel-note > span,
html body #hazardsPanel .panel-note a,
html body #hazardsPanel .hazard-chips .pill,
html body #hazardsPanel .nowcast-row .kv .k,
html body #hazardsPanel .nowcast-row .kv .v{
  min-width:0 !important;
  max-width:100% !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

html body #hazardsPanel .panel-note a,
html body #hazardsPanel .hazard-chips .pill,
html body #hazardsPanel .nowcast-row .kv .k,
html body #hazardsPanel .nowcast-row .kv .v{
  white-space:nowrap !important;
}

html body #quakesPanel .q-row,
html body #quakesPanel .quakes-strip{
  min-width:0 !important;
  max-width:100% !important;
}

html body #quakesPanel .q-chip,
html body #quakesPanel .quake-chip{
  flex:0 0 auto !important;
  max-width:min(270px, 82vw) !important;
  min-width:178px !important;
  overflow:hidden !important;
}

html body #quakesPanel .q-chip *,
html body #quakesPanel .quake-chip *{
  min-width:0 !important;
}

@media (max-width:1120px) and (min-width:761px){

  html body #rainRibbon.rain-has-intensity{
    --wx-rain-embed-col:clamp(94px, 10vw, 118px);
    --wx-rain-embed-tube-h:clamp(82px, 8.5vw, 104px);
  }

  html body #rainRibbon.rain-has-intensity .tube-card.rain{
    min-width:0 !important;
    max-width:var(--wx-rain-embed-col) !important;
    padding-top:5px !important;
    padding-bottom:5px !important;
  }

}

:root{
  --wx-v27-instrument-gap:var(--gap);
  --wx-v27-top-card-h:258px;
  --wx-v27-mid-card-h:236px;
  --wx-baro-gauge-size:clamp(150px, 18vw, 218px);
  --wx-baro-blue:rgba(56,189,248,.40);
  --wx-baro-cyan:rgba(34,211,238,.42);
  --wx-baro-green:rgba(34,197,94,.34);
  --wx-baro-amber:rgba(250,204,21,.30);
}

html body .wx-mid-instruments{
  display:grid !important;
  gap:var(--wx-v27-instrument-gap) !important;
  width:100% !important;
}

html body .barometer-card,
html body .wx-mid-instruments > .solar-combo-card{
  min-width:0 !important;
  min-height:var(--wx-v27-mid-card-h) !important;
  height:auto !important;
  overflow:hidden !important;
  align-self:stretch !important;
}

html body .barometer-card{
  display:grid !important;
  grid-template-rows:auto minmax(0, 1fr) !important;
  gap:8px !important;
  padding:8px 12px 12px !important;
  text-align:center !important;
  background:linear-gradient(180deg, rgba(14,165,233,.14), rgba(34,211,238,.055)),
    rgba(17,24,39,.50) !important;
  border:3px solid rgba(125,211,252,.40) !important;
  box-shadow:var(--shadow-soft),
    0 0 26px 8px rgba(56,189,248,.13),
    0 10px 30px rgba(14,165,233,.12),
    inset 0 0 36px 14px rgba(14,165,233,.16) !important;
}

html body .barometer-title{
  justify-self:center !important;
  min-width:0 !important;
  max-width:100% !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:5px 12px !important;
  border:1px solid rgba(125,211,252,.55) !important;
  border-radius:999px !important;
  background:rgba(2,6,23,.36) !important;
  color:#e0f2fe !important;
  font-weight:900 !important;
  font-size:.88rem !important;
  line-height:1 !important;
  text-shadow:0 0 10px rgba(56,189,248,.30) !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

html body .barometer-body{
  display:grid !important;
  grid-template-columns:minmax(140px, .95fr) minmax(0, 1.05fr) !important;
  gap:12px !important;
  align-items:center !important;
  min-width:0 !important;
  min-height:0 !important;
  width:100% !important;
}

html body .barometer-gauge{
  display:grid !important;
  place-items:center !important;
  min-width:0 !important;
  min-height:0 !important;
}

html body #gauge-baro{
  display:block !important;
  width:var(--wx-baro-gauge-size) !important;
  max-width:100% !important;
  height:auto !important;
  aspect-ratio:1 / 1 !important;
  margin:0 auto !important;
  box-sizing:border-box !important;
}

html body .barometer-readouts{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:5px !important;
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
}

html body .barometer-readouts .kv{
  display:grid !important;
  grid-template-columns:minmax(8ch, 34%) minmax(0, 1fr) !important;
  column-gap:7px !important;
  align-items:center !important;
  min-width:0 !important;
  text-align:left !important;
}

html body .barometer-readouts .kv .k,
html body .barometer-readouts .kv .v{
  min-width:0 !important;
  min-height:22px !important;
  display:flex !important;
  align-items:center !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

html body .barometer-readouts .kv .k{
  justify-content:flex-start !important;
  padding:3px 7px !important;
  border:1px solid var(--row-label-border) !important;
  border-radius:8px !important;
  background:var(--row-label-bg) !important;
  color:#e0f2fe !important;
  font-size:.79rem !important;
  font-weight:800 !important;
}

html body .barometer-readouts .kv .v{
  justify-content:flex-start !important;
  padding:3px 8px !important;
  border:1px solid rgba(125,211,252,.24) !important;
  border-radius:8px !important;
  background:rgba(2,6,23,.30) !important;
  color:#f8fafc !important;
  font-size:.86rem !important;
  font-weight:900 !important;
}

html body #baro-now{
  color:#bae6fd !important;
}

html body #baro-trend{
  color:#a7f3d0 !important;
}

html body #baro-range{
  color:#fde68a !important;
}

html body #baro-trend.up{
  color:#fbbf24 !important;
}

html body #baro-trend.down{
  color:#7dd3fc !important;
}

html body #baro-trend.steady{
  color:#86efac !important;
}

html body .wx-mid-instruments > .solar-combo-card{
  display:grid !important;
  grid-template-rows:auto minmax(0, 1fr) !important;
  gap:8px !important;
  padding:8px 10px 10px !important;
  background:linear-gradient(180deg, rgba(148,163,184,.12), rgba(15,23,42,.08)),
    rgba(17,24,39,.48) !important;
  border-width:2px !important;
  border-color:rgba(250,204,21,.34) !important;
}

html body .wx-mid-instruments > .solar-combo-card .solar-combo-title{
  justify-self:center !important;
  align-self:start !important;
  max-width:100% !important;
  margin:0 auto !important;
  padding:4px 10px !important;
  font-size:.84rem !important;
  line-height:1 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

html body .wx-mid-instruments > .solar-combo-card .solar-combo-body{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  gap:10px !important;
  align-items:stretch !important;
  align-content:stretch !important;
  width:100% !important;
  height:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  overflow:hidden !important;
}

html body .wx-mid-instruments > .solar-combo-card .tube-card.uv,
html body .wx-mid-instruments > .solar-combo-card .tube-card.solar{
  display:grid !important;
  grid-template-columns:1fr !important;
  grid-template-rows:auto minmax(0, 1fr) auto !important;
  grid-template-areas:"label"
    "tube"
    "value" !important;
  gap:5px !important;
  align-items:center !important;
  justify-items:center !important;
  min-width:0 !important;
  min-height:0 !important;
  height:100% !important;
  padding:7px 7px 8px !important;
  margin:0 !important;
  overflow:hidden !important;
}

html body .wx-mid-instruments > .solar-combo-card .tube-card.uv .tube-title,
html body .wx-mid-instruments > .solar-combo-card .tube-card.solar .tube-title,
html body .wx-mid-instruments > .solar-combo-card .tube-card.uv .tube-value,
html body .wx-mid-instruments > .solar-combo-card .tube-card.solar .tube-value{
  justify-self:stretch !important;
  min-width:0 !important;
  max-width:100% !important;
  min-height:20px !important;
  padding:3px 5px !important;
  font-size:.70rem !important;
  line-height:1 !important;
  text-align:center !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

html body .wx-mid-instruments > .solar-combo-card .tube-card.uv .tube-title,
html body .wx-mid-instruments > .solar-combo-card .tube-card.solar .tube-title{
  grid-area:label !important;
  align-self:start !important;
}

html body .wx-mid-instruments > .solar-combo-card .tube-card.uv .tube-value,
html body .wx-mid-instruments > .solar-combo-card .tube-card.solar .tube-value{
  grid-area:value !important;
  align-self:end !important;
}

html body .wx-mid-instruments > .solar-combo-card .tube-card.uv .tube,
html body .wx-mid-instruments > .solar-combo-card .tube-card.solar .tube{
  grid-area:tube !important;
  justify-self:center !important;
  align-self:center !important;
  --height:clamp(86px, 10vw, 116px) !important;
  height:clamp(86px, 10vw, 116px) !important;
  max-height:116px !important;
  width:24px !important;
  margin:0 auto !important;
}

@media (max-width:920px){
  html body .barometer-card,
  html body .wx-mid-instruments > .solar-combo-card{
    min-height:220px !important;
  }

  html body .barometer-body{
    grid-template-columns:minmax(140px, .9fr) minmax(0, 1.1fr) !important;
  }

}

@media (max-width:760px){

  html body .barometer-body{
    grid-template-columns:1fr !important;
    gap:8px !important;
  }

  html body .barometer-readouts .kv{
    grid-template-columns:minmax(72px, 34%) minmax(0, 1fr) !important;
  }

}

@media (max-width:540px){

  html body .wx-mid-instruments > .solar-combo-card .solar-combo-body{
    grid-template-columns:1fr !important;
  }

  html body .wx-mid-instruments > .solar-combo-card{
    min-height:340px !important;
  }

}

:root{
  --wx-v27-row-gap:clamp(10px, .70vw, 14px);
  --wx-v27-card-pad-x:clamp(10px, .85vw, 15px);
  --wx-v27-card-pad-y:clamp(9px, .72vw, 13px);
  --wx-v27-card-h:clamp(232px, 13.8vw, 258px);
  --wx-v27-inner-max:680px;
  --wx-v27-lightning-w:clamp(142px, 10.8vw, 184px);
  --wx-v27-lightning-h:clamp(88px, 6.6vw, 116px);
}

html body .gauges-grid{
  gap:var(--wx-v27-row-gap) !important;
  margin-bottom:var(--wx-v27-row-gap) !important;
}

html body .wx-mid-instruments > #barometerCard{
  grid-column:1 !important;
  grid-row:1 !important;
}

html body .wx-mid-instruments > #solarComboCard{
  grid-column:2 !important;
  grid-row:1 !important;
}

html body #barometerCard{
  grid-template-rows:auto minmax(0, 1fr) !important;
  gap:8px !important;
}

html body #barometerCard .baro-unit-toggle{
  appearance:none !important;
  -webkit-appearance:none !important;
  padding:4px 10px !important;
  border-radius:999px !important;
  border:1px solid rgba(125,211,252,.52) !important;
  background:linear-gradient(180deg, rgba(14,165,233,.20), rgba(2,6,23,.38)) !important;
  color:#bae6fd !important;
  font:900 .76rem/1 Inter, system-ui, Arial !important;
  letter-spacing:.01em !important;
  cursor:pointer !important;
  box-shadow:0 0 12px rgba(56,189,248,.18), inset 0 1px 0 rgba(255,255,255,.10) !important;
}

html body #barometerCard .baro-unit-toggle:hover,
html body #barometerCard .baro-unit-toggle:focus-visible{
  border-color:rgba(186,230,253,.78) !important;
}

html body .wx-mid-instruments > #solarComboCard{
  display:grid !important;
  grid-template-rows:auto minmax(0, 1fr) !important;
  gap:8px !important;
  border-width:2px !important;
}

html body .wx-mid-instruments > #solarComboCard > .solar-combo-title{
  justify-self:center !important;
  max-width:min(100%, 360px) !important;
  margin:0 auto !important;
}

html body #solarComboCard #solarComboBody > .tube-card.uv,
html body #solarComboCard #solarComboBody > .tube-card.solar{
  grid-column:auto / span 1 !important;
  grid-row:auto !important;
  align-items:center !important;
  justify-items:center !important;
}

html body #solarComboCard #solarComboBody > .tube-card.uv .tube-value,
html body #solarComboCard #solarComboBody > .tube-card.solar .tube-value{
  text-align:center !important;
}

html body #solarComboCard #solarComboBody > .tube-card.uv .tube-value.has-risk-label::after,
html body #solarComboCard #solarComboBody > .tube-card.solar .tube-value.has-risk-label::after{
  margin-left:0 !important;
}

@media (max-width:1180px) and (min-width:761px){

  :root{
    --wx-v27-card-h:242px;
    --wx-v27-lightning-w:clamp(132px, 10.4vw, 166px);
    --wx-v27-lightning-h:clamp(82px, 6.4vw, 104px);
  }

}

@media (max-width:920px){

  html body .wx-mid-instruments{
    grid-template-columns:1fr !important;
  }

  html body .wx-mid-instruments > #barometerCard,
  html body .wx-mid-instruments > #solarComboCard{
    grid-column:1 !important;
  }

  html body .wx-mid-instruments > #solarComboCard{
    grid-row:2 !important;
  }

}

:root{
  --wx-v27-solar-panel-min-h:var(--wx-v27-card-h, clamp(232px, 13.8vw, 258px));
  --wx-v27-solar-inner-gap:clamp(12px, 1vw, 18px);
  --wx-v27-solar-tube-h:clamp(104px, 7.2vw, 150px);
  --wx-v27-solar-tube-w:clamp(22px, 1.45vw, 28px);
}

html body .wx-mid-instruments > #barometerCard.barometer-card{
  position:relative !important;
}

@media (min-width:761px){

  html body .wx-mid-instruments > #barometerCard.barometer-card::before{
    content:"" !important;
    position:absolute !important;
    width:1px !important;
    transform:translateX(-50%) !important;
    pointer-events:none !important;
    z-index:1 !important;
  }

  html body #barometerCard .barometer-head,
  html body #barometerCard .barometer-gauge,
  html body #barometerCard .barometer-readouts{
    position:relative !important;
    z-index:2 !important;
  }

}

@media (max-width:760px){

  html body .wx-mid-instruments > #barometerCard.barometer-card::before{
    display:none !important;
  }

}

html body #barometerCard .barometer-title,
html body #barometerCard .baro-unit-toggle{
  border:0 !important;
  outline:0 !important;
  border-radius:999px !important;
  background:radial-gradient(circle at 18% 18%, rgba(255,255,255,.16), transparent 32%),
    linear-gradient(90deg, rgba(59,130,246,.28), rgba(15,23,42,.26)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(0,0,0,.14),
    0 3px 9px rgba(0,0,0,.14) !important;
  text-shadow:none !important;
}

html body #barometerCard .baro-unit-toggle:hover,
html body #barometerCard .baro-unit-toggle:focus-visible{
  outline:0 !important;
  color:#f8fafc !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -1px 0 rgba(0,0,0,.16),
    0 0 14px rgba(56,189,248,.22) !important;
}

html body #barometerCard .barometer-readouts .kv .k,
html body #barometerCard .barometer-readouts .kv .v{
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.016)),
    rgba(15,23,42,.24) !important;
  border:1px solid rgba(148,163,184,.20) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055),
    inset 0 -1px 0 rgba(0,0,0,.12) !important;
}

html body .wx-mid-instruments > #solarComboCard.solar-combo-card{
  min-height:var(--wx-v27-solar-panel-min-h) !important;
  height:auto !important;
  grid-template-rows:auto minmax(0, 1fr) !important;
  gap:clamp(8px, .7vw, 12px) !important;
  padding:var(--wx-v27-card-pad-y, 10px) var(--wx-v27-card-pad-x, 12px) !important;
  border-radius:var(--radius) !important;
  overflow:hidden !important;
}

html body #solarComboCard #solarComboBody{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  gap:var(--wx-v27-solar-inner-gap) !important;
  width:100% !important;
  height:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  align-items:stretch !important;
  align-content:stretch !important;
  justify-items:stretch !important;
  overflow:hidden !important;
}

html body #solarComboCard #solarComboBody > .tube-card.uv,
html body #solarComboCard #solarComboBody > .tube-card.solar{
  height:100% !important;
  min-height:clamp(172px, 10.4vw, 216px) !important;
  max-height:none !important;
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  align-self:stretch !important;
  justify-self:stretch !important;
  display:grid !important;
  grid-template-columns:1fr !important;
  grid-template-rows:auto minmax(0, 1fr) auto !important;
  grid-template-areas:"label" "tube" "value" !important;
  gap:clamp(7px, .6vw, 10px) !important;
  padding:clamp(10px, .8vw, 14px) !important;
  margin:0 !important;
  overflow:hidden !important;
}

html body #solarComboCard #solarComboBody > .tube-card.uv .tube-title,
html body #solarComboCard #solarComboBody > .tube-card.solar .tube-title{
  grid-area:label !important;
  align-self:start !important;
  justify-self:center !important;
  width:auto !important;
  max-width:100% !important;
}

html body #solarComboCard #solarComboBody > .tube-card.uv .tube,
html body #solarComboCard #solarComboBody > .tube-card.solar .tube{
  grid-area:tube !important;
  align-self:center !important;
  justify-self:center !important;
  width:var(--wx-v27-solar-tube-w) !important;
  min-width:20px !important;
  max-width:30px !important;
  height:var(--wx-v27-solar-tube-h) !important;
  max-height:100% !important;
  margin:0 auto !important;
}

html body #solarComboCard #solarComboBody > .tube-card.uv .tube-value,
html body #solarComboCard #solarComboBody > .tube-card.solar .tube-value{
  grid-area:value !important;
  align-self:end !important;
  justify-self:center !important;
  width:min(100%, 340px) !important;
  max-width:100% !important;
  min-width:0 !important;
  min-height:22px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
  padding:3px 8px !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

html body #solarComboCard #solarComboBody > .tube-card.uv .tube-value.has-risk-label::after,
html body #solarComboCard #solarComboBody > .tube-card.solar .tube-value.has-risk-label::after{
  flex:0 1 auto !important;
  min-width:0 !important;
  max-width:10ch !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

@media (max-width:1180px) and (min-width:761px){

  :root{
    --wx-v27-solar-tube-h:clamp(96px, 7.6vw, 132px);
  }

  html body #solarComboCard #solarComboBody > .tube-card.uv,
  html body #solarComboCard #solarComboBody > .tube-card.solar{
    min-height:clamp(156px, 12vw, 196px) !important;
  }

}

@media (max-width:920px){

  html body .wx-mid-instruments > #solarComboCard.solar-combo-card{
    min-height:250px !important;
  }

  html body #solarComboCard #solarComboBody > .tube-card.uv,
  html body #solarComboCard #solarComboBody > .tube-card.solar{
    min-height:190px !important;
  }

}

@media (max-width:540px){

  html body #solarComboCard #solarComboBody{
    grid-template-columns:1fr !important;
  }

  html body .wx-mid-instruments > #solarComboCard.solar-combo-card{
    min-height:430px !important;
  }

  html body #solarComboCard #solarComboBody > .tube-card.uv,
  html body #solarComboCard #solarComboBody > .tube-card.solar{
    min-height:190px !important;
  }

}

html body .wx-mid-instruments > #barometerCard.barometer-card{
  border-radius:var(--radius) !important;
  border:1px solid rgba(125,211,252,.46) !important;
  background:radial-gradient(circle at 18% 12%, rgba(125,211,252,.115), transparent 40%),
    linear-gradient(180deg, rgba(14,165,233,.145), rgba(34,211,238,.055)),
    rgba(17,24,39,.36) !important;
  box-shadow:0 0 0 1px rgba(125,211,252,.08),
    0 0 24px rgba(56,189,248,.16),
    inset 0 1px 0 rgba(255,255,255,.070),
    inset 0 -1px 0 rgba(0,0,0,.17) !important;
}

@media (min-width:761px){

  html body .wx-mid-instruments > #barometerCard.barometer-card::before{
    background:linear-gradient(180deg, transparent, rgba(186,230,253,.24), transparent) !important;
    box-shadow:0 0 10px rgba(56,189,248,.08) !important;
  }

}

:root{
  --wx-v27-gauge-size:clamp(140px, 11.4vw, 190px);
}

@media (max-width:1180px) and (min-width:761px){

  :root{
    --wx-v27-gauge-size:clamp(134px, 10.9vw, 176px);
  }

}

@media (max-width:760px){

  :root{
    --wx-v27-gauge-size:clamp(148px, 42vw, 206px);
  }

}

:root{
  --wx-v27-panel-radiance-top:rgba(59,130,246,.052);
  --wx-v27-panel-radiance-bottom:rgba(34,211,238,.026);
  --wx-v27-panel-fallback-bg:rgba(2, 20, 34, .145);
  --wx-v27-panel-glow-a:rgba(59,130,246,.070);
  --wx-v27-panel-glow-b:rgba(34,211,238,.052);
}

@media (min-width:761px){

  html body .wx-mid-instruments > #barometerCard.barometer-card::before{
    left:50% !important;
    top:50px !important;
    bottom:16px !important;
    opacity:.24 !important;
  }

  html body #barometerCard .barometer-body{
    grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) !important;
    column-gap:clamp(22px, 1.85vw, 32px) !important;
    align-items:center !important;
  }

  html body #barometerCard .barometer-gauge{
    justify-self:center !important;
    align-self:center !important;
    width:100% !important;
    min-width:0 !important;
    padding-right:0 !important;
    box-sizing:border-box !important;
  }

  html body #barometerCard .barometer-readouts{
    justify-self:stretch !important;
    align-self:center !important;
    padding-left:clamp(10px, .85vw, 16px) !important;
    box-sizing:border-box !important;
  }

}

:root{
  --wx-v27-wind-bg-top:rgba(37, 99, 235, .118);
  --wx-v27-wind-bg-mid:rgba(14, 116, 144, .072);
  --wx-v27-wind-bg-bottom:rgba(8, 47, 73, .132);
  --wx-v27-wind-glow-blue:rgba(56, 189, 248, .075);
  --wx-v27-wind-glow-cyan:rgba(34, 211, 238, .048);
}

html body #hazardsPanel{
  --haz-panel-cyan:rgba(103,232,249,.72);
  --haz-card-bg-top:rgba(8, 47, 73, .48);
  --haz-card-bg-bottom:rgba(2, 20, 34, .58);
  --haz-row-bg:rgba(7, 22, 37, .54);
  --haz-row-bg-hover:rgba(10, 34, 55, .70);
  --haz-row-border:rgba(186,230,253,.14);
  --haz-muted:#a7b5c4;
}

html body #hazardsPanel .haz-guidance-wrap{
  margin:6px 0 10px !important;
}

html body #hazardsPanel .panel-note.haz-guidance-bar{
  width:100% !important;
  min-height:34px !important;
  padding:6px 10px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:8px !important;
  border-radius:10px !important;
  color:#eaf6ff !important;
  background:linear-gradient(180deg, rgba(56,189,248,.065), rgba(14,116,144,.040)),
    rgba(2, 16, 29, .38) !important;
  border:1px solid rgba(103,232,249,.46) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),
    0 0 12px rgba(34,211,238,.08) !important;
}

html body #hazardsPanel .haz-guidance-copy{
  min-width:0 !important;
  flex:1 1 auto !important;
  color:#dbeafe !important;
  font-weight:750 !important;
  letter-spacing:.01em !important;
  line-height:1.2 !important;
}

html body #hazardsPanel .panel-note .haz-guidance-link{
  flex:0 0 auto !important;
  padding:4px 10px !important;
  border-radius:999px !important;
  font-size:.78rem !important;
  line-height:1 !important;
  color:#101827 !important;
  background:linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,.06)),
    linear-gradient(135deg, #fb923c, #ef4444) !important;
  border:1px solid rgba(255,255,255,.26) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),
    0 0 10px rgba(249,115,22,.22) !important;
}

html body #hazardsPanel .hazards-body-card{
  display:flex !important;
  flex-direction:column !important;
  gap:10px !important;
  min-height:0 !important;
  padding:14px 16px 16px !important;
  margin:8px 0 16px !important;
  border-radius:14px !important;
  border:1px solid rgba(103,232,249,.58) !important;
  background:radial-gradient(circle at 14% 8%, rgba(239,68,68,.075), transparent 32%),
    radial-gradient(circle at 84% 18%, rgba(250,204,21,.055), transparent 34%),
    linear-gradient(180deg, var(--haz-card-bg-top), var(--haz-card-bg-bottom)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055),
    inset 0 0 48px rgba(34,211,238,.045),
    0 0 18px rgba(103,232,249,.12),
    0 10px 22px rgba(0,0,0,.22) !important;
}

html body #hazardsPanel .haz-severity-summary{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  gap:7px !important;
  min-height:26px !important;
  margin:0 !important;
  padding:0 !important;
}

html body #hazardsPanel .haz-count{
  --haz-count-color:#22c55e;
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  min-height:24px !important;
  padding:3px 9px !important;
  border-radius:999px !important;
  color:#eaf6ff !important;
  font-size:.76rem !important;
  font-weight:800 !important;
  line-height:1 !important;
  letter-spacing:.01em !important;
  background:rgba(5, 18, 31, .42) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025),
    0 0 10px color-mix(in oklab, var(--haz-count-color) 18%, transparent) !important;
}

html body #hazardsPanel .haz-count i{
  width:7px !important;
  height:7px !important;
  border-radius:999px !important;
  background:var(--haz-count-color) !important;
  box-shadow:0 0 10px color-mix(in oklab, var(--haz-count-color) 65%, transparent) !important;
}

html body #hazardsPanel .haz-count b,
html body #hazardsPanel .haz-count em{
  font-style:normal !important;
  color:inherit !important;
  line-height:1 !important;
}

html body #hazardsPanel .haz-count em{
  opacity:.92 !important;
  color:#ffffff !important;
}

html body #hazardsPanel .haz-count--warning{
  --haz-count-color:#ef4444;
}

html body #hazardsPanel .haz-count--watch{
  --haz-count-color:#f59e0b;
}

html body #hazardsPanel .haz-count--advisory{
  --haz-count-color:#facc15;
}

html body #hazardsPanel .haz-count--other{
  --haz-count-color:#60a5fa;
}

html body #hazardsPanel .haz-count--clear{
  --haz-count-color:#22c55e;
}

html body #hazardsPanel .haz-section-head{
  display:flex !important;
  align-items:baseline !important;
  justify-content:space-between !important;
  gap:10px !important;
  margin:0 !important;
  padding:0 2px !important;
}

html body #hazardsPanel .haz-section-title{
  color:#f8fbff !important;
  font-size:.86rem !important;
  font-weight:900 !important;
  letter-spacing:.02em !important;
  text-transform:uppercase !important;
}

html body #hazardsPanel .haz-section-sub{
  color:rgba(203,213,225,.76) !important;
  font-size:.74rem !important;
  font-weight:700 !important;
  white-space:nowrap !important;
}

html body #hazardsPanel #hazardChips.alert-feed,
html body #hazardsPanel .hazard-chips.alert-feed{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:7px !important;
  align-items:stretch !important;
  margin:0 !important;
  padding:0 2px 2px !important;
  max-height:clamp(128px, 19vh, 224px) !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  scrollbar-width:thin !important;
  scrollbar-color:rgba(103,232,249,.38) rgba(2,20,34,.22) !important;
}

html body #hazardsPanel #hazardChips.alert-feed::-webkit-scrollbar{
  width:6px !important;
}

html body #hazardsPanel #hazardChips.alert-feed::-webkit-scrollbar-thumb{
  background:rgba(103,232,249,.34) !important;
  border-radius:999px !important;
}

html body #hazardsPanel #hazardChips.alert-feed .pill.alert-feed-row,
html body #hazardsPanel .hazard-chips.alert-feed .pill.alert-feed-row{
  --hz-chip:#60a5fa;
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  min-height:32px !important;
  padding:7px 34px 7px 14px !important;
  border-radius:10px !important;
  color:#f8fbff !important;
  font-size:.82rem !important;
  font-weight:850 !important;
  line-height:1.22 !important;
  letter-spacing:.005em !important;
  text-align:left !important;
  text-shadow:0 1px 1px rgba(0,0,0,.42) !important;
  background:linear-gradient(90deg, color-mix(in oklab, var(--hz-chip) 14%, transparent), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)),
    var(--haz-row-bg) !important;
  border:1px solid var(--haz-row-border) !important;
  border-left:4px solid var(--hz-chip) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055),
    inset 0 0 20px color-mix(in oklab, var(--hz-chip) 5%, transparent),
    0 0 10px color-mix(in oklab, var(--hz-chip) 9%, transparent) !important;
  filter:none !important;
}

html body #hazardsPanel #hazardChips.alert-feed .pill.alert-feed-row.hz-warning{
  --hz-chip:#ef4444 !important;
}

html body #hazardsPanel #hazardChips.alert-feed .pill.alert-feed-row.hz-watch{
  --hz-chip:#f59e0b !important;
}

html body #hazardsPanel #hazardChips.alert-feed .pill.alert-feed-row.hz-advisory{
  --hz-chip:#facc15 !important;
  color:#f8fbff !important;
  text-shadow:0 1px 1px rgba(0,0,0,.45) !important;
}

html body #hazardsPanel #hazardChips.alert-feed .pill.alert-feed-row.hz-wind{
  --hz-chip:#60a5fa !important;
}

html body #hazardsPanel #hazardChips.alert-feed .pill.alert-feed-row.hz-flood{
  --hz-chip:#818cf8 !important;
}

html body #hazardsPanel #hazardChips.alert-feed .pill.alert-feed-row.hz-clear,
html body #hazardsPanel #hazardChips.alert-feed .pill.alert-feed-row.none,
html body #hazardsPanel #hazardChips.alert-feed #chip-none{
  --hz-chip:#22c55e !important;
}

html body #hazardsPanel #hazardChips.alert-feed .pill.alert-feed-row[title*="Open details"]::after,
html body #hazardsPanel #hazardChips.alert-feed .pill.alert-feed-row[role="link"]::after{
  content:"Open ↗" !important;
  position:absolute !important;
  right:9px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:2px 7px !important;
  border-radius:999px !important;
  color:#dff7ff !important;
  font-size:.68rem !important;
  font-weight:900 !important;
  line-height:1 !important;
  background:rgba(255,255,255,.070) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  box-shadow:0 0 8px color-mix(in oklab, var(--hz-chip) 14%, transparent) !important;
}

@media (hover:hover){

  html body #hazardsPanel #hazardChips.alert-feed .pill.alert-feed-row:hover,
  html body #hazardsPanel .hazard-chips.alert-feed .pill.alert-feed-row:hover{
    background:linear-gradient(90deg, color-mix(in oklab, var(--hz-chip) 20%, transparent), transparent 48%),
      linear-gradient(180deg, rgba(255,255,255,.060), rgba(255,255,255,.018)),
      var(--haz-row-bg-hover) !important;
    border-color:rgba(255,255,255,.16) !important;
    border-left-color:var(--hz-chip) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.075),
      0 0 14px color-mix(in oklab, var(--hz-chip) 18%, transparent),
      0 8px 16px rgba(0,0,0,.16) !important;
    filter:none !important;
  }

}

html body #hazardsPanel .nowcast-row.local-metrics-grid{
  display:grid !important;
  grid-template-columns:repeat(5, minmax(0, 1fr)) !important;
  gap:8px !important;
  margin:2px 0 0 !important;
  padding:9px !important;
  border-radius:12px !important;
  background:rgba(2, 16, 29, .34) !important;
  border:1px solid rgba(103,232,249,.16) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045) !important;
  overflow:visible !important;
}

html body #hazardsPanel .nowcast-row.local-metrics-grid .kv{
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  gap:3px !important;
  min-width:0 !important;
  min-height:42px !important;
  padding:7px 8px !important;
  border-radius:9px !important;
  background:rgba(255,255,255,.030) !important;
  border:1px solid rgba(255,255,255,.070) !important;
  box-shadow:none !important;
}

html body #hazardsPanel .nowcast-row.local-metrics-grid .kv .k{
  display:block !important;
  color:rgba(203,213,225,.78) !important;
  font-size:.70rem !important;
  font-weight:850 !important;
  line-height:1.05 !important;
  text-transform:uppercase !important;
  letter-spacing:.045em !important;
  white-space:nowrap !important;
}

html body #hazardsPanel .nowcast-row.local-metrics-grid .kv .v,
html body #hazardsPanel .nowcast-row.local-metrics-grid #aws-station,
html body #hazardsPanel .nowcast-row.local-metrics-grid #aws-rain,
html body #hazardsPanel .nowcast-row.local-metrics-grid #aws-wind,
html body #hazardsPanel .nowcast-row.local-metrics-grid #qpf-03,
html body #hazardsPanel .nowcast-row.local-metrics-grid #qpf-36{
  display:block !important;
  min-width:0 !important;
  color:#f8fbff !important;
  font-size:.80rem !important;
  font-weight:900 !important;
  line-height:1.18 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

@media (max-width:1180px){

  html body #hazardsPanel .nowcast-row.local-metrics-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  }

}

@media (max-width:760px){

  html body #hazardsPanel .haz-section-head{
    align-items:flex-start !important;
    flex-direction:column !important;
    gap:3px !important;
  }

  html body #hazardsPanel #hazardChips.alert-feed,
  html body #hazardsPanel .hazard-chips.alert-feed{
    overflow:visible !important;
  }

  html body #hazardsPanel #hazardChips.alert-feed .pill.alert-feed-row[title*="Open details"]::after,
  html body #hazardsPanel #hazardChips.alert-feed .pill.alert-feed-row[role="link"]::after{
    margin-left:auto !important;
  }

  html body #hazardsPanel .nowcast-row.local-metrics-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }

}

@media (max-width:520px){

  html body #hazardsPanel .panel-note.haz-guidance-bar{
    align-items:flex-start !important;
  }

  html body #hazardsPanel .panel-note .haz-guidance-link{
    width:100% !important;
    justify-content:center !important;
  }

  html body #hazardsPanel .nowcast-row.local-metrics-grid{
    grid-template-columns:1fr !important;
  }

}

@supports not (background: color-mix(in oklab, red 50%, white)){

  html body #hazardsPanel .haz-count,
  html body #hazardsPanel #hazardChips.alert-feed .pill.alert-feed-row{
    box-shadow:inset 0 1px 0 rgba(255,255,255,.055), 0 0 10px rgba(103,232,249,.10) !important;
  }

}

html body #quakesPanel .ribbon-body-card{
  flex-direction:column !important;
}

html body .status-bar #hazDupPill.haz-summary-pill,
html body .status-bar #hazDupPill.haz-summary-pill[style]{
  --haz-state-color:#22c55e;
  color:#eaf6ff !important;
  min-width:max-content !important;
  max-width:18ch !important;
  padding-inline:9px !important;
  background:radial-gradient(circle at 18% 18%, rgba(255,255,255,.22), transparent 34%),
    linear-gradient(135deg, color-mix(in oklab, var(--haz-state-color) 24%, transparent), rgba(20,184,166,.10) 55%, rgba(14,165,233,.08)),
    rgba(15,23,42,.48) !important;
  box-shadow:var(--statbar-shadow, inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(0,0,0,.14)),
    0 0 14px color-mix(in oklab, var(--haz-state-color) 18%, transparent) !important;
  text-shadow:none !important;
  border:0 !important;
  outline:0 !important;
}

html body .status-bar #hazDupPill.haz-summary-clear{
  --haz-state-color:#22c55e;
}

html body .status-bar #hazDupPill.haz-summary-severe{
  --haz-state-color:#ef4444;
}

html body .status-bar #hazDupPill.haz-summary-warning{
  --haz-state-color:#f97316;
}

html body .status-bar #hazDupPill.haz-summary-watch{
  --haz-state-color:#f59e0b;
}

html body .status-bar #hazDupPill.haz-summary-advisory{
  --haz-state-color:#facc15;
}

html body .status-bar #hazDupPill.haz-summary-active{
  --haz-state-color:#60a5fa;
}

html body #hazStatusPill[data-state="live"] .status-extra{
  color:#fef3c7 !important;
  -webkit-text-fill-color:#fef3c7 !important;
  font-weight:850 !important;
}

@media (max-width:760px){

  html body #quakesPanel .quakes-strip{
    min-height:62px !important;
    max-height:none !important;
  }

  html body .status-bar #hazDupPill.haz-summary-pill{
    max-width:15ch !important;
  }

}

html body #quakesPanel{
  grid-template-rows:auto auto minmax(0, 1fr) !important;
  align-content:stretch !important;
  gap:6px !important;
}

html body #quakesPanel .haz-note-wrap{
  margin:0 !important;
  min-height:0 !important;
}

html body #quakesPanel .ribbon-body-card{
  display:grid !important;
  grid-template-rows:minmax(0, 1fr) minmax(0, 1fr) !important;
  align-content:center !important;
  align-items:stretch !important;
  justify-content:stretch !important;
  gap:9px !important;
  height:100% !important;
  min-height:0 !important;
  padding:9px 10px 10px !important;
  overflow:hidden !important;
}

html body #quakesPanel .q-row{
  display:grid !important;
  grid-template-rows:auto minmax(0, 1fr) !important;
  align-content:stretch !important;
  align-items:stretch !important;
  gap:5px !important;
  margin:0 !important;
  min-width:0 !important;
  min-height:0 !important;
  padding:8px 9px 9px !important;
  border-radius:13px !important;
  border:1px solid var(--qglow-border, rgba(96,165,250,.24)) !important;
  background:radial-gradient(120% 150% at 6% 0%, var(--qglow, rgba(96,165,250,.16)), transparent 52%),
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.014)),
    rgba(8,15,26,.30) !important;
  box-shadow:0 0 16px rgba(96,165,250,.10),
    inset 0 0 0 1px rgba(255,255,255,.035),
    inset 0 0 32px rgba(0,0,0,.18) !important;
  overflow:hidden !important;
}

html body #quakesPanel .q-row + .q-row{
  margin-top:0 !important;
}

html body #quakesPanel .q-label.small{
  justify-self:start !important;
  margin:0 !important;
  padding:3px 9px !important;
  line-height:1 !important;
  transform:none !important;
}

html body #quakesPanel .quakes-strip{
  flex:0 1 auto !important;
  height:100% !important;
  min-height:58px !important;
  max-height:none !important;
  align-items:center !important;
  padding:4px 6px 8px !important;
  border-radius:11px !important;
}

@media (max-width:760px){

  html body #quakesPanel{
    grid-template-rows:auto auto auto !important;
  }
  html body #quakesPanel .q-row{
    min-height:92px !important;
  }

}

:root{
  --wx-v27-baro-value-min:9.8ch;
}

html body .wx-mid-instruments > #barometerCard.barometer-card{
  justify-content:stretch !important;
}

html body #barometerCard .barometer-head{
  flex-wrap:nowrap !important;
}

html body #barometerCard .barometer-readouts{
  padding-left:clamp(4px, .45vw, 10px) !important;
  padding-right:0 !important;
}

html body #barometerCard .barometer-readouts .kv .k{
  padding-left:6px !important;
  padding-right:6px !important;
}

html body #barometerCard .barometer-readouts .kv .v{
  padding-left:7px !important;
  padding-right:7px !important;
}

@media (min-width:981px){

  html body .wx-mid-instruments > #barometerCard.barometer-card::before{
    left:50% !important;
    top:48px !important;
    bottom:14px !important;
  }

}

@media (max-width:980px) and (min-width:761px){

  html body .wx-mid-instruments{
    grid-template-columns:1fr !important;
  }

  html body .wx-mid-instruments > #barometerCard,
  html body .wx-mid-instruments > #solarComboCard{
    grid-column:1 !important;
  }

  html body .wx-mid-instruments > #barometerCard{
    grid-row:1 !important;
    min-height:230px !important;
  }

  html body .wx-mid-instruments > #solarComboCard{
    grid-row:2 !important;
  }

  html body #barometerCard .barometer-body{
    grid-template-columns:minmax(148px, .44fr) minmax(210px, .56fr) !important;
    column-gap:clamp(16px, 2.2vw, 28px) !important;
  }

}

@media (max-width:760px){

  html body #barometerCard .barometer-body{
    row-gap:8px !important;
  }

}

:root{
  --wx-v27-baro-gauge-zone:clamp(142px, 35%, 182px);
  --wx-v27-baro-card-min-h:clamp(224px, 13.1vw, 252px);
}

html body .wx-mid-instruments > #barometerCard.barometer-card::before{
  display:none !important;
  content:none !important;
}

html body #barometerCard .baro-unit-toggle{
  text-overflow:ellipsis !important;
}

html body #barometerCard .barometer-body{
  flex-flow:row nowrap !important;
  justify-content:stretch !important;
  gap:clamp(10px, .92vw, 16px) !important;
}

html body #barometerCard .barometer-gauge{
  flex:0 0 var(--wx-v27-baro-gauge-zone) !important;
}

html body #barometerCard .barometer-readouts{
  flex:1 1 0 !important;
}

@container (max-width:430px){

  html body #barometerCard .barometer-body{
    flex-direction:column !important;
    justify-content:center !important;
    gap:7px !important;
    overflow:visible !important;
  }

  html body #barometerCard .barometer-gauge{
    flex:0 0 auto !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:auto !important;
    max-height:124px !important;
    overflow:visible !important;
  }

  html body #barometerCard #gauge-baro{
    width:clamp(116px, 38cqi, 136px) !important;
  }

  html body #barometerCard .barometer-readouts{
    width:100% !important;
    padding-left:0 !important;
    border-left:0 !important;
    border-top:1px solid rgba(125,211,252,.18) !important;
    padding-top:7px !important;
  }

}

@media (max-width:760px){
  html body #barometerCard .barometer-body{
    flex-direction:column !important;
    justify-content:center !important;
  }

  html body #barometerCard .barometer-gauge{
    flex:0 0 auto !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:auto !important;
    overflow:visible !important;
  }

}

html body .wx-mid-instruments > #barometerCard.barometer-card{
  container-type:normal !important;
  min-height:var(--wx-v27-card-h) !important;
  height:auto !important;
  padding:var(--wx-v27-card-pad-y) var(--wx-v27-card-pad-x) !important;
  align-items:stretch !important;
  align-content:stretch !important;
  justify-items:stretch !important;
}

html body #barometerCard .barometer-head{
  grid-column:1 !important;
  grid-row:1 !important;
  display:flex !important;
  flex-flow:row nowrap !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  margin:0 auto !important;
  padding:0 !important;
  box-sizing:border-box !important;
}

html body #barometerCard .barometer-title{
  flex:0 1 auto !important;
  max-width:min(100%, 420px) !important;
  min-width:0 !important;
  margin:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

html body #barometerCard .baro-unit-toggle{
  flex:0 0 auto !important;
  width:auto !important;
  min-width:42px !important;
  max-width:none !important;
  margin:0 !important;
  overflow:visible !important;
  white-space:nowrap !important;
}

html body #barometerCard .barometer-body{
  grid-column:1 !important;
  grid-row:2 !important;
  row-gap:8px !important;
  align-content:stretch !important;
  margin:0 !important;
  padding:0 !important;
}

html body #barometerCard .barometer-gauge{
  height:auto !important;
  align-self:center !important;
  justify-self:center !important;
  padding:0 0 2px !important;
  margin:0 !important;
  box-sizing:border-box !important;
}

html body #barometerCard #gauge-baro{
  max-height:none !important;
  display:block !important;
  margin:0 auto !important;
  transform-origin:center center !important;
}

html body #barometerCard .barometer-readouts{
  align-self:center !important;
  justify-self:center !important;
}

html body #barometerCard .barometer-readouts .kv .k,
html body #barometerCard .barometer-readouts .kv .v{
  display:flex !important;
  align-items:center !important;
  box-sizing:border-box !important;
}

html body #barometerCard .barometer-readouts .kv .k{
  justify-content:flex-start !important;
}

html body #barometerCard .barometer-readouts .kv .v{
  justify-content:flex-start !important;
  letter-spacing:.01em !important;
}

@media (max-width:760px){
  html body .wx-mid-instruments > #barometerCard.barometer-card{
    height:auto !important;
    min-height:252px !important;
  }

  html body #barometerCard .barometer-body{
    justify-items:center !important;
    overflow:visible !important;
  }
  html body #barometerCard .barometer-gauge{
    min-height:calc(var(--wx-v27-baro-size) + 4px) !important;
  }

  html body #barometerCard .barometer-readouts{
    width:100% !important;
  }

  html body #barometerCard .barometer-readouts .kv{
    grid-template-columns:minmax(58px, 31%) minmax(0, 1fr) !important;
  }

}

:root{
  --wx-v27-baro-size:clamp(124px, 10.0vw, 168px);
}

html body .wx-mid-instruments{
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  align-items:stretch !important;
  min-width:0 !important;
}

html body .wx-mid-instruments > #barometerCard.barometer-card{
  display:grid !important;
  grid-template-columns:1fr !important;
  grid-template-rows:auto minmax(0, 1fr) !important;
  min-width:0 !important;
  width:100% !important;
  max-width:100% !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
  contain:layout paint !important;
}

html body #barometerCard .barometer-head{
  min-width:0 !important;
  max-width:100% !important;
  overflow:visible !important;
}

html body #barometerCard .barometer-body{
  display:grid !important;
  grid-template-columns:minmax(124px, .44fr) minmax(0, .56fr) !important;
  grid-template-rows:minmax(0, 1fr) !important;
  align-items:center !important;
  justify-items:center !important;
  column-gap:clamp(8px, .9vw, 16px) !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  height:100% !important;
  overflow:visible !important;
  box-sizing:border-box !important;
}

html body #barometerCard .barometer-gauge{
  grid-column:1 !important;
  grid-row:1 !important;
  display:grid !important;
  place-items:center !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  min-height:calc(var(--wx-v27-baro-size) + 4px) !important;
  overflow:visible !important;
}

html body #barometerCard #gauge-baro{
  width:var(--wx-v27-baro-size) !important;
  max-width:100% !important;
  height:auto !important;
  aspect-ratio:1 / 1 !important;
  transform:translateY(-1px) !important;
}

html body #barometerCard .barometer-readouts{
  grid-column:2 !important;
  grid-row:1 !important;
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:5px !important;
  width:100% !important;
  max-width:390px !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 0 0 clamp(8px, .72vw, 12px) !important;
  border-left:1px solid rgba(125,211,252,.20) !important;
  border-top:0 !important;
  overflow:visible !important;
  box-sizing:border-box !important;
}

html body #barometerCard .barometer-readouts .kv{
  display:grid !important;
  grid-template-columns:minmax(58px, 32%) minmax(0, 1fr) !important;
  column-gap:6px !important;
  align-items:center !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  min-height:23px !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
}

html body #barometerCard .barometer-readouts .kv .k,
html body #barometerCard .barometer-readouts .kv .v{
  min-width:0 !important;
  max-width:100% !important;
  height:23px !important;
  min-height:23px !important;
  line-height:1 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

html body #barometerCard .barometer-readouts .kv .k{
  padding:3px 6px !important;
  font-size:clamp(.66rem, .58vw, .78rem) !important;
}

html body #barometerCard .barometer-readouts .kv .v{
  padding:3px 7px !important;
  font-size:clamp(.70rem, .64vw, .84rem) !important;
}

@media (max-width:1180px) and (min-width:761px){

  :root{
    --wx-v27-baro-size:clamp(118px, 9.6vw, 156px);
  }

  html body #barometerCard .barometer-body{
    grid-template-columns:minmax(116px, .42fr) minmax(0, .58fr) !important;
  }

  html body #barometerCard .barometer-readouts .kv{
    grid-template-columns:minmax(54px, 31%) minmax(0, 1fr) !important;
  }

}

@media (max-width:920px) and (min-width:761px){

  html body .wx-mid-instruments{
    grid-template-columns:1fr !important;
  }

  html body .wx-mid-instruments > #barometerCard,
  html body .wx-mid-instruments > #solarComboCard{
    grid-column:1 !important;
  }

}

@media (max-width:760px){

  :root{
    --wx-v27-baro-size:clamp(148px, 42vw, 206px);
  }

  html body #barometerCard .barometer-body{
    grid-template-columns:1fr !important;
    grid-template-rows:auto auto !important;
    gap:8px !important;
    height:auto !important;
    align-content:center !important;
  }

  html body #barometerCard .barometer-gauge,
  html body #barometerCard .barometer-readouts{
    grid-column:1 !important;
  }

  html body #barometerCard .barometer-gauge{
    grid-row:1 !important;
  }

  html body #barometerCard .barometer-readouts{
    grid-row:2 !important;
    max-width:420px !important;
    padding-left:0 !important;
    padding-top:8px !important;
    border-left:0 !important;
    border-top:1px solid rgba(125,211,252,.18) !important;
  }

}

html body .hazards-quakes-row,
html body .hazards-quakes-row > *,
html body #hazardsPanel,
html body #quakesPanel,
html body #hazardsPanel *,
html body #quakesPanel *{
  box-sizing:border-box !important;
}

html body .hazards-quakes-row,
html body #hazardsPanel,
html body #quakesPanel,
html body #hazardsPanel > *,
html body #quakesPanel > *,
html body #hazardsPanel .ribbon-body-card,
html body #quakesPanel .ribbon-body-card{
  min-width:0 !important;
  max-width:100% !important;
}

html body #hazardsPanel,
html body #quakesPanel{
  overflow:hidden !important;
}

html body #hazardsPanel > .ribbon-title,
html body #quakesPanel > .ribbon-title{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  justify-content:center !important;
  gap:5px 8px !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  padding-inline:2px !important;
  overflow:hidden !important;
  white-space:normal !important;
}

html body #hazardsPanel > .ribbon-title .title-ico,
html body #quakesPanel > .ribbon-title .title-ico{
  flex:0 0 auto !important;
}

html body #hazardsPanel > .ribbon-title .title-text,
html body #quakesPanel > .ribbon-title .title-text{
  flex:1 1 auto !important;
  min-width:0 !important;
  max-width:100% !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

html body #hazStatusPill,
html body #quakesStatusPill{
  flex:0 1 auto !important;
  min-width:0 !important;
  max-width:min(22ch, 42vw) !important;
  margin-left:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

html body #hazardsPanel .haz-guidance-wrap,
html body #hazardsPanel .panel-note.haz-guidance-bar,
html body #quakesPanel .haz-note-wrap,
html body #quakesPanel .panel-note{
  min-width:0 !important;
  max-width:100% !important;
  overflow:hidden !important;
}

html body #hazardsPanel .panel-note.haz-guidance-bar{
  flex-wrap:wrap !important;
}

html body #hazardsPanel .haz-guidance-copy,
html body #quakesPanel .panel-note{
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

html body #hazardsPanel .panel-note .haz-guidance-link,
html body #quakesPanel .panel-note a{
  flex:0 1 auto !important;
  min-width:0 !important;
  max-width:100% !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

html body #hazardsPanel .hazards-body-card{
  min-width:0 !important;
  max-width:100% !important;
  overflow:hidden !important;
  padding-inline:clamp(10px, 1.2vw, 16px) !important;
}

html body #hazardsPanel .haz-severity-summary,
html body #hazardsPanel .haz-section-head,
html body #hazardsPanel #hazardChips.alert-feed,
html body #hazardsPanel .hazard-chips.alert-feed,
html body #hazardsPanel .nowcast-row.local-metrics-grid{
  min-width:0 !important;
  max-width:100% !important;
  overflow:hidden !important;
}

html body #hazardsPanel .haz-count{
  min-width:0 !important;
  max-width:100% !important;
  overflow:hidden !important;
}

html body #hazardsPanel .haz-count b,
html body #hazardsPanel .haz-count em,
html body #hazardsPanel .haz-section-title,
html body #hazardsPanel .haz-section-sub{
  min-width:0 !important;
  max-width:100% !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

html body #hazardsPanel #hazardChips.alert-feed .pill.alert-feed-row,
html body #hazardsPanel .hazard-chips.alert-feed .pill.alert-feed-row{
  min-width:0 !important;
  max-width:100% !important;
  width:100% !important;
  overflow:hidden !important;
  white-space:normal !important;
  overflow-wrap:anywhere !important;
  word-break:normal !important;
  hyphens:auto !important;
  padding-right:clamp(34px, 8vw, 58px) !important;
}

html body #hazardsPanel #hazardChips.alert-feed .pill.alert-feed-row[title*="Open details"]::after,
html body #hazardsPanel #hazardChips.alert-feed .pill.alert-feed-row[role="link"]::after{
  max-width:min(56px, 28%) !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

html body #hazardsPanel .nowcast-row.local-metrics-grid .kv,
html body #hazardsPanel .nowcast-row.local-metrics-grid .kv .k,
html body #hazardsPanel .nowcast-row.local-metrics-grid .kv .v{
  min-width:0 !important;
  max-width:100% !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

html body #quakesPanel .ribbon-body-card,
html body #quakesPanel .q-row,
html body #quakesPanel .quakes-strip{
  min-width:0 !important;
  max-width:100% !important;
  width:100% !important;
}

html body #quakesPanel .ribbon-body-card,
html body #quakesPanel .q-row{
  overflow:hidden !important;
}

html body #quakesPanel .quakes-strip{
  display:flex !important;
  flex-wrap:nowrap !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  overscroll-behavior-inline:contain !important;
  -webkit-overflow-scrolling:touch !important;
  scrollbar-width:thin !important;
}

html body #quakesPanel .quake-chip,
html body #quakesPanel .q-chip{
  flex:0 0 auto !important;
  width:clamp(164px, 44vw, 268px) !important;
  min-width:min(164px, calc(100vw - 72px)) !important;
  max-width:min(268px, calc(100vw - 60px)) !important;
  overflow:hidden !important;
}

html body #quakesPanel .q-head{
  display:grid !important;
  grid-template-columns:auto minmax(0, 1fr) !important;
  align-items:center !important;
  gap:7px !important;
  min-width:0 !important;
  max-width:100% !important;
  overflow:hidden !important;
}

html body #quakesPanel .q-mag{
  flex:0 0 auto !important;
  max-width:10.5ch !important;
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

html body #quakesPanel .q-meta{
  justify-self:end !important;
  min-width:0 !important;
  max-width:100% !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  text-align:right !important;
}

html body #quakesPanel .q-place{
  min-width:0 !important;
  max-width:100% !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

html body #quakesPanel .tiny,
html body #quakesPanel .muted{
  min-width:0 !important;
  max-width:100% !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

@media (max-width:980px){

  html body #hazardsPanel > .ribbon-title .title-text,
  html body #quakesPanel > .ribbon-title .title-text{
    flex-basis:min(100%, 22ch) !important;
    text-align:center !important;
  }

  html body #hazStatusPill,
  html body #quakesStatusPill{
    max-width:min(18ch, 72vw) !important;
  }

}

@media (max-width:760px){

  html body #hazardsPanel .hazards-body-card{
    overflow:hidden !important;
  }

  html body #hazardsPanel #hazardChips.alert-feed,
  html body #hazardsPanel .hazard-chips.alert-feed{
    overflow-y:auto !important;
    overflow-x:hidden !important;
    max-height:clamp(138px, 34vh, 260px) !important;
  }

  html body #hazardsPanel #hazardChips.alert-feed .pill.alert-feed-row,
  html body #hazardsPanel .hazard-chips.alert-feed .pill.alert-feed-row{
    padding-right:32px !important;
  }

  html body #hazardsPanel #hazardChips.alert-feed .pill.alert-feed-row[title*="Open details"]::after,
  html body #hazardsPanel #hazardChips.alert-feed .pill.alert-feed-row[role="link"]::after{
    content:"↗" !important;
    position:absolute !important;
    right:9px !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    width:18px !important;
    max-width:18px !important;
    padding:2px 0 !important;
  }

  html body #quakesPanel .ribbon-body-card{
    grid-template-rows:auto auto !important;
  }

  html body #quakesPanel .quake-chip,
  html body #quakesPanel .q-chip{
    width:clamp(156px, 62vw, 232px) !important;
    min-width:min(156px, calc(100vw - 58px)) !important;
    max-width:min(232px, calc(100vw - 46px)) !important;
  }

  html body #quakesPanel .q-mag::after{
    content:" Mag" !important;
    margin-left:4px !important;
  }

}

@media (max-width:420px){

  html body #hazardsPanel > .ribbon-title,
  html body #quakesPanel > .ribbon-title{
    gap:4px 6px !important;
  }

  html body #hazardsPanel > .ribbon-title .title-text,
  html body #quakesPanel > .ribbon-title .title-text{
    flex:1 1 100% !important;
    order:2 !important;
  }

  html body #hazStatusPill,
  html body #quakesStatusPill{
    order:3 !important;
    max-width:100% !important;
  }

  html body #quakesPanel .q-mag::after{
    content:"" !important;
    margin:0 !important;
  }

}