/* =========================================================
   Guimbal WX — Public WWW Synced-Data Dashboard
   File: css/01-visual-overrides.css
   Current package: Rev. R33.51 - August 2026
   Source lineage: former CSS modules 07-10; original section headers retained below
   Copyright: © Andrew Tunnera 2025-2026. All rights reserved.
   Role: Active runtime file
   ========================================================= */

/* ---------- Solar combo card: UV and Irradiance side by side ---------- */
:root{
  --wx-solar-side-min-h:128px;
  --wx-solar-side-tube-h:82px;
  --wx-solar-side-tube-w:22px;
  --wx-solar-side-gap:12px;
  --wx-solar-side-label-col:minmax(84px,42%);
}

html body.solar-combo-active .gauges-bottom{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:10px !important;
  width:100% !important;
}

html body .solar-combo-card{
  
  min-height:var(--wx-solar-side-min-h) !important;
  padding:8px 12px 10px !important;
  border-radius:14px !important;
  display:grid !important;
  grid-template-rows:auto 1fr !important;
  gap:8px !important;
  align-items:stretch !important;
  
  border:2px solid rgba(250,204,21,.30) !important;
  
  box-sizing:border-box !important;
}

html body .solar-combo-title{
  justify-self:center !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:7px !important;
  width:max-content !important;
  max-width:calc(100% - 8px) !important;
  padding:4px 11px !important;
  margin:0 auto !important;
  border-radius:10px !important;
  color:#fff !important;
  font-weight:850 !important;
  font-size:.88rem !important;
  line-height:1 !important;
  letter-spacing:.15px !important;
  text-align:center !important;
  white-space:nowrap !important;
  background:linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,.08)) !important;
  border:1px solid rgba(250,204,21,.46) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08), 0 2px 10px rgba(0,0,0,.24), inset 0 0 16px rgba(250,204,21,.24) !important;
}

html body .solar-combo-body{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:var(--wx-solar-side-gap) !important;
  align-items:stretch !important;
  width:100% !important;
  min-width:0 !important;
}

html body .solar-combo-card .tube-card.uv,
html body .solar-combo-card .tube-card.solar{
  width:100% !important;
  min-width:0 !important;
  min-height:104px !important;
  height:100% !important;
  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;
  column-gap:8px !important;
  row-gap:5px !important;
  align-items:center !important;
  justify-items:stretch !important;
  padding:8px 9px !important;
  margin:0 !important;
  border-radius:12px !important;
  
  border:1px solid rgba(255,255,255,.13) !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
}





html body .solar-combo-card .tube-card.uv .tube-title,
html body .solar-combo-card .tube-card.solar .tube-title{
  grid-area:label !important;
  align-self:end !important;
  justify-self:stretch !important;
  min-width:0 !important;
  min-height:22px !important;
  padding:3px 7px !important;
  margin:0 !important;
  border-radius:8px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  color:#e8eaee !important;
  font-size:.78rem !important;
  line-height:1 !important;
  font-weight:850 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015)),rgba(15,20,26,.18) !important;
  border:1px solid rgba(255,255,255,.10) !important;
}

html body .solar-combo-card .tube-card.uv .tube-value,
html body .solar-combo-card .tube-card.solar .tube-value{
  grid-area:value !important;
  align-self:start !important;
  justify-self:stretch !important;
  min-width:0 !important;
  min-height:22px !important;
  padding:3px 7px !important;
  margin:0 !important;
  border-radius:8px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  color:#f4f6f8 !important;
  font-size:.84rem !important;
  line-height:1 !important;
  font-weight:900 !important;
  font-variant-numeric:tabular-nums;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02)),rgba(15,20,26,.35) !important;
  border:1px solid rgba(255,255,255,.16) !important;
}

html body .solar-combo-card .tube-card.uv .tube,
html body .solar-combo-card .tube-card.solar .tube{
  grid-area:tube !important;
  align-self:center !important;
  justify-self:center !important;
  --height:var(--wx-solar-side-tube-h) !important;
  width:var(--wx-solar-side-tube-w) !important;
  margin:0 auto !important;
  border-radius:9px !important;
}

@media (max-width:1180px){
  :root{
    --wx-spark-tall-w:clamp(128px,15vw,170px);
    --wx-spark-tall-h:50px;
    --wx-spark-left-col:minmax(8.6rem,40%);
  }
}

@media (max-width:980px){
  :root{
    --wx-solar-side-tube-h:74px;
    --wx-solar-side-tube-w:20px;
    --wx-solar-side-gap:8px;
    --wx-solar-side-label-col:minmax(76px,44%);
  }

  html body .solar-combo-card .tube-card.uv,
  html body .solar-combo-card .tube-card.solar{
    min-height:96px !important;
    padding:7px 8px !important;
  }

  html body .solar-combo-card .tube-card.uv .tube-title,
  html body .solar-combo-card .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{
    font-size:.76rem !important;
    padding:3px 6px !important;
  }
}

@media (max-width:760px){

  html body #outdoorReadingsRibbon .ribbon-item .spark,
  html body #outdoorRibbon .ribbon-item .spark{
    width:100% !important;
    max-width:none !important;
  }

  

  

  html body #rainRibbon.rain-has-intensity .tube-card.rain .tube{
    --height:72px !important;
    
  }
}

@media (max-width:540px){
  html body .solar-combo-body{
    grid-template-columns:1fr !important;
  }
}


:root{
  
  
  
  --wx-rain-embed-gap: 10px;
}

html body #rainRibbon.rain-has-intensity .ribbon-body-card{
  
  grid-auto-rows:minmax(22px,auto) !important;
  row-gap:5px !important;
  align-content:center !important;
}

html body #rainRibbon.rain-has-intensity .tube-card.rain{
  
  
  height:100% !important;
  max-height:100% !important;
  
}

html body #rainRibbon.rain-has-intensity .tube-card.rain .tube-title{
  
  
  
  
  
  text-align:center !important;
}

html body #rainRibbon.rain-has-intensity .tube-card.rain .tube{
  --height:var(--wx-rain-embed-tube-h) !important;
}

html body #rainRibbon.rain-has-intensity .tube-card.rain .tube-value{
  font-size:.66rem !important;
  line-height:1 !important;
  min-height:18px !important;
  padding:2px 5px !important;
}


html body.solar-combo-active .gauges-bottom,
html body .gauges-bottom.solar-combo-bottom{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:10px !important;
  width:100% !important;
}

html body .solar-combo-card .tube-card.uv .tube-title,
html body .solar-combo-card .tube-card.solar .tube-title{
  white-space:nowrap !important;
}

html body .solar-combo-card .tube-card.uv .tube,
html body .solar-combo-card .tube-card.solar .tube{
  height:var(--wx-solar-side-tube-h) !important;
  max-height:var(--wx-solar-side-tube-h) !important;
}


@media (max-width:760px){
  :root{
    --wx-rain-embed-tube-h:72px;
    --wx-rain-embed-tube-w:22px;
  }

  
}


:root{
  --tube-rain-outline: rgba(125,211,252,.82);
  --tube-rain-outline-soft: rgba(56,189,248,.30);

  --tube-uv-outline: rgba(216,180,254,.82);
  --tube-uv-outline-soft: rgba(168,85,247,.30);

  --tube-solar-outline: rgba(253,230,138,.86);
  --tube-solar-outline-soft: rgba(250,204,21,.32);

  --tube-inner-glass: rgba(255,255,255,.22);
}


html body .tube{
  border-width:1.5px !important;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,.26),
      rgba(255,255,255,.075) 50%,
      rgba(255,255,255,.22)
    ) !important;
  
}


html body .tube-card.rain .tube,
html body #rainRibbon.rain-has-intensity .tube-card.rain .tube{
  border-color:var(--tube-rain-outline) !important;
}

html body .tube-card.rain .fill,
html body #rainRibbon.rain-has-intensity .tube-card.rain .fill{
  border-top-color:rgba(224,242,254,.92) !important;
  box-shadow:
    0 -2px 8px rgba(125,211,252,.26),
    inset 0 1px 0 rgba(255,255,255,.22) !important;
}


html body .tube-card.uv .tube,
html body .solar-combo-card .tube-card.uv .tube{
  border-color:var(--tube-uv-outline) !important;
}

html body .tube-card.uv .fill,
html body .solar-combo-card .tube-card.uv .fill{
  border-top-color:rgba(245,243,255,.92) !important;
  box-shadow:
    0 -2px 8px rgba(216,180,254,.25),
    inset 0 1px 0 rgba(255,255,255,.22) !important;
}


html body .tube-card.solar .tube,
html body .solar-combo-card .tube-card.solar .tube{
  border-color:var(--tube-solar-outline) !important;
}

html body .tube-card.solar .fill,
html body .solar-combo-card .tube-card.solar .fill{
  border-top-color:rgba(254,249,195,.94) !important;
  box-shadow:
    0 -2px 8px rgba(253,230,138,.25),
    inset 0 1px 0 rgba(255,255,255,.22) !important;
}







html body .gauges-bottom.empty-gauges-bottom,
html body.solar-combo-active .gauges-bottom.empty-gauges-bottom{
  display:none !important;
}


@media (max-width:980px){


  
}


:root{
  --wx-top-card-h: 246px;
  --wx-top-gap: 10px;

  --wx-top-wind-col: minmax(0, 1fr);
  --wx-top-solar-col: minmax(0, 1fr);
  --wx-top-lightning-col: minmax(0, 1fr);

  --wx-balanced-wind-gauge: 142px;
  --wx-balanced-lightning-w: 136px;
  --wx-balanced-lightning-h: 86px;

  --wx-solar-top-tube-h: clamp(78px, 6.2vw, 94px);
  --wx-solar-top-tube-w: 22px;
  --wx-solar-top-gap: 10px;
}





@media (max-width:980px){


  :root{
    --wx-solar-top-tube-h:86px;
  }
}


:root{
  --wx-header-chip-text: #fff8d6;
  --wx-header-chip-border: rgba(255,255,255,.30);
  --wx-header-chip-shadow:
    0 1px 2px rgba(0,0,0,.52),
    0 0 12px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(0,0,0,.26);
}


html body header .pill{
  text-shadow:0 1px 2px rgba(0,0,0,.78) !important;
  border-color:var(--wx-header-chip-border) !important;
  box-shadow:var(--wx-header-chip-shadow) !important;
  backdrop-filter:blur(8px) saturate(1.18) !important;
  -webkit-backdrop-filter:blur(8px) saturate(1.18) !important;
}


html body #moonPill,
html body .pill.moon,
html body [data-pill="moon"],
html body [aria-label*="Moon"],
html body [title*="Moon"]{
  font-weight:850 !important;
}


html body .pill.night,
html body [data-pill="night"]{
  text-shadow:0 1px 2px rgba(0,0,0,.88) !important;
  font-weight:850 !important;
}


html body .pill.live,
html body [data-pill="live"],
html body [aria-label*="Live"],
html body [title*="Live"]{
  font-weight:900 !important;
}


html body .pill.temp{
  color:#ecfeff !important;
  text-shadow:0 1px 2px rgba(0,0,0,.72) !important;
  border-color:rgba(125,211,252,.38) !important;
}


:root{
  --wx-dual-panel-inner-max: 520px;
  --wx-dual-left-col: minmax(190px, 1fr);
  --wx-dual-right-col: minmax(190px, 1fr);
  --wx-dual-divider: rgba(255,255,255,.105);
  --wx-dual-divider-glow: rgba(125,211,252,.055);
  --wx-dual-spark-h: 50px;
}


html body #outdoorReadingsRibbon .ribbon-body-card,
html body #outdoorRibbon .ribbon-body-card{
  position:relative !important;
  width:min(100%, var(--wx-dual-panel-inner-max)) !important;
  margin:0 auto !important;
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:10px !important;
  align-content:center !important;
  justify-content:center !important;
  padding-left:10px !important;
  padding-right:10px !important;
}


html body #outdoorReadingsRibbon .ribbon-body-card::before,
html body #outdoorRibbon .ribbon-body-card::before{
  content:"" !important;
  position:absolute !important;
  top:8px !important;
  bottom:8px !important;
  left:50% !important;
  width:1px !important;
  transform:translateX(-50%) !important;
  pointer-events:none !important;
  background:
    linear-gradient(
      180deg,
      transparent,
      var(--wx-dual-divider) 18%,
      rgba(255,255,255,.135) 50%,
      var(--wx-dual-divider) 82%,
      transparent
    ) !important;
  box-shadow:
    0 0 10px var(--wx-dual-divider-glow),
    1px 0 0 rgba(0,0,0,.20) !important;
  opacity:.72 !important;
}


html body #outdoorReadingsRibbon .ribbon-item,
html body #outdoorRibbon .ribbon-item{
  display:grid !important;
  grid-template-columns:var(--wx-dual-left-col) var(--wx-dual-right-col) !important;
  grid-template-rows:auto auto !important;
  column-gap:22px !important;
  row-gap:5px !important;
  align-items:center !important;
  min-width:0 !important;
  width:100% !important;
}

/* Label top-left */
html body #outdoorReadingsRibbon .ribbon-item .ribbon-label,
html body #outdoorRibbon .ribbon-item .ribbon-label{
  grid-column:1 !important;
  grid-row:1 !important;
  align-self:end !important;
  justify-self:stretch !important;
  min-width:0 !important;
  min-height:23px !important;
  padding:3px 8px !important;
  white-space:nowrap !important;
}

/* Value bottom-left */
html body #outdoorReadingsRibbon .ribbon-item .ribbon-value,
html body #outdoorRibbon .ribbon-item .ribbon-value{
  grid-column:1 !important;
  grid-row:2 !important;
  align-self:start !important;
  justify-self:stretch !important;
  min-width:0 !important;
  min-height:24px !important;
  padding:3px 8px !important;
  margin:0 !important;
  white-space:nowrap !important;
}


html body #outdoorReadingsRibbon .ribbon-item .spark,
html body #outdoorRibbon .ribbon-item .spark{
  grid-column:2 !important;
  grid-row:1 / span 2 !important;
  align-self:center !important;
  justify-self:stretch !important;
  width:100% !important;
  max-width:none !important;
  height:var(--wx-dual-spark-h) !important;
  margin:0 !important;
  padding:3px 6px !important;
  
}


html body #outdoorReadingsRibbon .spark path.line,
html body #outdoorRibbon .spark path.line{
  stroke-width:2.35 !important;
}

html body #outdoorReadingsRibbon .spark path.fill,
html body #outdoorRibbon .spark path.fill{
  opacity:.15 !important;
}


@media (min-width:1400px){
  :root{
    --wx-dual-panel-inner-max: 560px;
    --wx-dual-spark-h: 52px;
  }
}


@media (max-width:1180px){
  

  
}


@media (max-width:760px){
  html body #outdoorReadingsRibbon .ribbon-body-card,
  html body #outdoorRibbon .ribbon-body-card{
    width:100% !important;
  }

  html body #outdoorReadingsRibbon .ribbon-body-card::before,
  html body #outdoorRibbon .ribbon-body-card::before{
    display:none !important;
  }

  html body #outdoorReadingsRibbon .ribbon-item,
  html body #outdoorRibbon .ribbon-item{
    grid-template-columns:1fr !important;
    grid-template-rows:auto auto auto !important;
    row-gap:5px !important;
  }

  html body #outdoorReadingsRibbon .ribbon-item .ribbon-label,
  html body #outdoorRibbon .ribbon-item .ribbon-label{
    grid-column:1 !important;
    grid-row:1 !important;
  }

  html body #outdoorReadingsRibbon .ribbon-item .ribbon-value,
  html body #outdoorRibbon .ribbon-item .ribbon-value{
    grid-column:1 !important;
    grid-row:2 !important;
  }

  html body #outdoorReadingsRibbon .ribbon-item .spark,
  html body #outdoorRibbon .ribbon-item .spark{
    grid-column:1 !important;
    grid-row:3 !important;
    height:44px !important;
  }
}


:root{
  --wx-instrument-divider: rgba(255,255,255,.105);
  --wx-instrument-divider-glow: rgba(125,211,252,.055);

  --wx-wind-inner-max: 560px;
  --wx-lightning-inner-max: 560px;

  --wx-wind-left-col: minmax(138px, 1fr);
  --wx-wind-right-col: minmax(180px, 1fr);
  --wx-lightning-left-col: minmax(138px, 1fr);
  --wx-lightning-right-col: minmax(180px, 1fr);

  --wx-wind-balanced-gauge: 138px;
  --wx-lightning-balanced-w: 136px;
  --wx-lightning-balanced-h: 86px;




  --risk-chip-radius: 999px;
}


html body .has-risk-label::after{
  content: attr(data-risk-label);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  
  min-height:16px;
  
  
  
  
  
  
  
  
  text-transform:none;
  
  
  
  
  
  
  
  
}

/* Risk states */
html body .has-risk-label[data-risk-level="ok"]::after{
  
  
  border-color:rgba(134,239,172,.48);
  
}
html body .has-risk-label[data-risk-level="info"]::after{
  
  
  border-color:rgba(147,197,253,.46);
  
}
html body .has-risk-label[data-risk-level="caution"]::after{
  
  
  border-color:rgba(253,224,71,.50);
  
}
html body .has-risk-label[data-risk-level="warn"]::after{
  
  
  border-color:rgba(fdba74,.52);
  
}
html body .has-risk-label[data-risk-level="danger"]::after{
  
  
  border-color:rgba(252,165,165,.55);
  
}
html body .has-risk-label[data-risk-level="neutral"]::after{
  
  
  border-color:rgba(156,163,175,.36);
}


html body .tube-value.has-risk-label{
  justify-content:center !important;
}
html body .tube-value.has-risk-label::after{
  
  
  
  max-width:7.8em;
}


html body .gauge-rows .v.has-risk-label::after{
  font-size:.56rem;
  padding:2px 5px;
  max-width:7.6em;
  margin-left:5px;
}





@media (max-width:980px){
  html body .has-risk-label::after{
    max-width:8.2em;
  }
}

@media (max-width:540px){

  
}


:root{
  --risk-chip-font: .58rem;
  --risk-chip-pad: 2px 8px;
  --risk-chip-gap: 8px;

  --risk-glass-neutral:
    linear-gradient(90deg, rgba(148,163,184,.10), rgba(148,163,184,.045));
  --risk-glass-ok:
    linear-gradient(90deg, rgba(34,197,94,.18), rgba(34,197,94,.055));
  --risk-glass-info:
    linear-gradient(90deg, rgba(59,130,246,.18), rgba(59,130,246,.055));
  --risk-glass-caution:
    linear-gradient(90deg, rgba(250,204,21,.20), rgba(250,204,21,.060));
  --risk-glass-warn:
    linear-gradient(90deg, rgba(249,115,22,.20), rgba(249,115,22,.060));
  --risk-glass-danger:
    linear-gradient(90deg, rgba(239,68,68,.22), rgba(239,68,68,.065));
}


html body .ribbon-value.has-risk-label,
html body .gauge-rows .v.has-risk-label,
html body .tube-value.has-risk-label{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:0 !important;
  min-width:0 !important;
  overflow:hidden !important;
}





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

html body .has-risk-label[data-risk-level="info"]::after{
  
  
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.075),
    inset 0 -1px 0 rgba(0,0,0,.10),
    0 0 9px rgba(59,130,246,.075) !important;
}

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

html body .has-risk-label[data-risk-level="warn"]::after{
  
  
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.075),
    inset 0 -1px 0 rgba(0,0,0,.10),
    0 0 9px rgba(249,115,22,.085) !important;
}

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




html body .ribbon-value.has-risk-label::after{
  min-width:5.8em !important;
  font-size:.60rem !important;
  padding:2px 10px !important;
}


html body .tube-value.has-risk-label::after{
  min-width:4.2em !important;
  font-size:.53rem !important;
  padding:2px 6px !important;
  margin-left:6px !important;
}


html body .solar-combo-card .tube-value.has-risk-label{
  justify-content:center !important;
}

html body .solar-combo-card .tube-value.has-risk-label::after{
  flex:1 1 auto !important;
}







@media (max-width:540px){
  html body .ribbon-value.has-risk-label,
  html body .gauge-rows .v.has-risk-label,
  html body .tube-value.has-risk-label{
    flex-wrap:wrap !important;
    row-gap:3px !important;
  }

  
}


:root{
  --wx-rain-blue-fill-top: rgba(125,211,252,.96);
  --wx-rain-blue-fill-mid: rgba(56,189,248,.88);
  --wx-rain-blue-fill-bottom: rgba(14,165,233,.58);

  --wx-rain-green-fill-top: rgba(134,239,172,.98);
  --wx-rain-green-fill-mid: rgba(34,197,94,.90);

  --wx-rain-yellow-fill-top: rgba(254,240,138,.98);
  --wx-rain-yellow-fill-mid: rgba(250,204,21,.92);
  --wx-rain-yellow-fill-bottom: rgba(234,179,8,.74);

  --wx-rain-red-fill-top: rgba(252,165,165,.98);
  --wx-rain-red-fill-mid: rgba(248,113,113,.94);
  --wx-rain-red-fill-bottom: rgba(239,68,68,.82);
}


html body #rainRibbon.rain-has-intensity .tube-card.rain .tube,
html body .tube-card.rain .tube{
  border:0 !important;
  outline:0 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -10px 18px rgba(0,0,0,.28),
    inset 0 0 14px rgba(125,211,252,.10),
    0 6px 14px rgba(0,0,0,.14) !important;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,.18),
      rgba(255,255,255,.055) 48%,
      rgba(255,255,255,.16)
    ) !important;
}


html body #rainRibbon.rain-has-intensity .tube-card.rain .fill.rain,
html body .tube-card.rain .fill.rain{
  border-top:0 !important;
  background:
    linear-gradient(
      180deg,
      var(--wx-rain-blue-fill-top) 0%,
      var(--wx-rain-blue-fill-mid) 45%,
      var(--wx-rain-blue-fill-bottom) 100%
    ) !important;
  box-shadow:
    0 -2px 10px rgba(125,211,252,.18),
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -8px 14px rgba(14,116,144,.16) !important;
}


html body #rainRibbon.rain-has-intensity .tube-card.rain .fill.rain.rain-split-fill,
html body .tube-card.rain .fill.rain.rain-split-fill{
  background:
    linear-gradient(
      180deg,
      var(--wx-rain-green-fill-top) 0%,
      var(--wx-rain-green-fill-mid) 42%,
      rgba(74,222,128,.88) 49%,
      rgba(56,189,248,.96) 50%,
      var(--wx-rain-blue-fill-mid) 72%,
      var(--wx-rain-blue-fill-bottom) 100%
    ) !important;
  box-shadow:
    0 -2px 12px rgba(74,222,128,.18),
    0 -1px 10px rgba(56,189,248,.14),
    inset 0 1px 0 rgba(255,255,255,.20),
    inset 0 -8px 14px rgba(14,116,144,.15) !important;
}

html body #rainRibbon.rain-has-intensity .tube-card.rain .fill.rain.rain-yellow-fill,
html body .tube-card.rain .fill.rain.rain-yellow-fill{
  background:
    linear-gradient(
      180deg,
      var(--wx-rain-yellow-fill-top) 0%,
      var(--wx-rain-yellow-fill-mid) 32%,
      var(--wx-rain-yellow-fill-bottom) 45%,
      var(--wx-rain-green-fill-mid) 59%,
      rgba(56,189,248,.94) 72%,
      var(--wx-rain-blue-fill-bottom) 100%
    ) !important;
  box-shadow:
    0 -2px 14px rgba(250,204,21,.20),
    0 -1px 10px rgba(56,189,248,.12),
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -8px 14px rgba(113,63,18,.12) !important;
}


html body #rainRibbon.rain-has-intensity .tube-card.rain .fill.rain.rain-red-fill,
html body .tube-card.rain .fill.rain.rain-red-fill{
  background:
    linear-gradient(
      180deg,
      var(--wx-rain-red-fill-top) 0%,
      var(--wx-rain-red-fill-mid) 30%,
      var(--wx-rain-red-fill-bottom) 43%,
      var(--wx-rain-yellow-fill-mid) 55%,
      var(--wx-rain-green-fill-mid) 68%,
      var(--wx-rain-blue-fill-mid) 82%,
      var(--wx-rain-blue-fill-bottom) 100%
    ) !important;
  box-shadow:
    0 -2px 16px rgba(248,113,113,.24),
    0 -1px 12px rgba(250,204,21,.16),
    inset 0 1px 0 rgba(255,255,255,.24),
    inset 0 -8px 14px rgba(127,29,29,.14) !important;
}


html body #rainRibbon.rain-has-intensity .tube-card.rain .tube.rain-split-fill,
html body .tube-card.rain .tube.rain-split-fill{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -10px 18px rgba(0,0,0,.28),
    inset 0 0 16px rgba(125,211,252,.10),
    0 0 12px rgba(34,197,94,.10),
    0 6px 14px rgba(0,0,0,.14) !important;
}

html body #rainRibbon.rain-has-intensity .tube-card.rain .tube.rain-yellow-fill,
html body .tube-card.rain .tube.rain-yellow-fill{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -10px 18px rgba(0,0,0,.28),
    inset 0 0 16px rgba(250,204,21,.11),
    0 0 13px rgba(250,204,21,.14),
    0 6px 14px rgba(0,0,0,.14) !important;
}


html body #rainRibbon.rain-has-intensity .tube-card.rain .tube.rain-red-fill,
html body .tube-card.rain .tube.rain-red-fill{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -10px 18px rgba(0,0,0,.30),
    inset 0 0 18px rgba(248,113,113,.12),
    0 0 15px rgba(248,113,113,.18),
    0 6px 14px rgba(0,0,0,.14) !important;
}


html body #rainRibbon.rain-has-intensity .tube-card.rain.rain-yellow-fill,
html body .tube-card.rain.rain-yellow-fill{
  box-shadow:
    var(--shadow-soft),
    0 0 16px rgba(250,204,21,.14),
    inset 0 0 24px rgba(250,204,21,.06) !important;
}


html body #rainRibbon.rain-has-intensity .tube-card.rain.rain-red-fill,
html body .tube-card.rain.rain-red-fill{
  box-shadow:
    var(--shadow-soft),
    0 0 18px rgba(248,113,113,.16),
    inset 0 0 26px rgba(248,113,113,.07) !important;
}


:root{
  --hero-crystal-border: rgba(255,255,255,.18);
  --hero-crystal-glow: rgba(125,211,252,.16);
  --hero-crystal-warn: rgba(250,204,21,.16);
  --trend-up: #fecaca;
  --trend-down: #bae6fd;
  --trend-steady: #d8dee9;
}

/* Compact crystal summary strip */
html body .wx-hero-summary{
  width:min(100%, 980px);
  margin:8px auto 0;
  min-height:34px;
  padding:6px 12px;
  border-radius:999px;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;

  color:rgba(245,250,255,.94);
  font-size:.88rem;
  line-height:1.15;
  font-weight:850;
  letter-spacing:.01em;
  text-align:center;

  border:1px solid var(--hero-crystal-border);
  background:
    radial-gradient(circle at 15% 15%, rgba(255,255,255,.16), transparent 28%),
    linear-gradient(90deg, rgba(14,165,233,.13), rgba(20,184,166,.08), rgba(99,102,241,.10)),
    rgba(15,20,26,.32);
  box-shadow:
    0 8px 24px rgba(0,0,0,.22),
    0 0 20px var(--hero-crystal-glow),
    inset 0 1px 0 rgba(255,255,255,.20),
    inset 0 -1px 0 rgba(0,0,0,.26);
  backdrop-filter:blur(11px) saturate(1.20);
  -webkit-backdrop-filter:blur(11px) saturate(1.20);
  overflow:hidden;
  position:relative;
}

html body .wx-hero-summary::before{
  content:"";
  position:absolute;
  inset:1px 1px auto 1px;
  height:45%;
  border-radius:999px 999px 45% 45%;
  background:linear-gradient(180deg, rgba(255,255,255,.18), transparent);
  pointer-events:none;
  opacity:.55;
}

html body .wx-hero-summary[data-rain-state="active"]{
  background:
    radial-gradient(circle at 15% 15%, rgba(255,255,255,.16), transparent 28%),
    linear-gradient(90deg, rgba(14,165,233,.13), rgba(250,204,21,.10), rgba(20,184,166,.10)),
    rgba(15,20,26,.34);
  box-shadow:
    0 8px 24px rgba(0,0,0,.22),
    0 0 22px var(--hero-crystal-warn),
    inset 0 1px 0 rgba(255,255,255,.20),
    inset 0 -1px 0 rgba(0,0,0,.26);
}

html body .wx-hero-icon{
  position:relative;
  z-index:1;
  flex:0 0 auto;
  width:20px;
  height:20px;
  display:inline-grid;
  place-items:center;
  border-radius:50%;
  color:#e0f2fe;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.38), rgba(125,211,252,.14) 48%, rgba(15,20,26,.18));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 0 10px rgba(125,211,252,.16);
  font-size:.72rem;
}

html body .wx-hero-summary-text{
  position:relative;
  z-index:1;
  
  
  
  
  text-shadow:0 1px 2px rgba(0,0,0,.74);
}

/* Outdoor Temp/Humidity trend arrows only */
html body #outTempVal ~ .wx-trend-arrow,
html body #outHumVal ~ .wx-trend-arrow{
  flex:0 0 auto;
  width:19px;
  height:19px;
  margin-left:6px;
  border-radius:999px;
  display:inline-grid;
  place-items:center;
  font-size:.74rem;
  line-height:1;
  font-weight:950;
  color:var(--trend-steady);
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)),
    rgba(15,20,26,.20);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 1px 2px rgba(0,0,0,.24);
  text-shadow:0 1px 1px rgba(0,0,0,.70);
}

html body .wx-trend-arrow.up{
  color:var(--trend-up);
  background:
    linear-gradient(180deg, rgba(248,113,113,.18), rgba(248,113,113,.045)),
    rgba(15,20,26,.20);
}

html body .wx-trend-arrow.down{
  color:var(--trend-down);
  background:
    linear-gradient(180deg, rgba(56,189,248,.18), rgba(56,189,248,.045)),
    rgba(15,20,26,.20);
}

html body .wx-trend-arrow.steady{
  color:var(--trend-steady);
  opacity:.78;
}


html body .ribbon-value.has-risk-label{
  display:flex !important;
  align-items:center !important;
}


@media (max-width:760px){
  html body .wx-hero-summary{
    border-radius:18px;
    padding:7px 10px;
    min-height:40px;
  }

  html body .wx-hero-summary-text{
    white-space:normal;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
  }
}


:root{
  --nav-pill-text: rgba(245,250,255,.94);
  --nav-pill-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    inset 0 -1px 0 rgba(0,0,0,.16),
    0 4px 12px rgba(0,0,0,.16);
}


html body .status-bar .pill,
html body header .pill,
html body nav .pill,
html body .status-bar .chip,
html body header .chip,
html body nav .chip{
  color:var(--nav-pill-text) !important;
  border:0 !important;
  outline:0 !important;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.20), transparent 34%),
    linear-gradient(135deg, rgba(14,165,233,.18), rgba(20,184,166,.105) 48%, rgba(99,102,241,.12)),
    rgba(15,23,42,.34) !important;
  box-shadow:
    var(--nav-pill-shadow),
    0 0 14px rgba(125,211,252,.14) !important;
  text-shadow:0 1px 2px rgba(0,0,0,.72) !important;
  backdrop-filter:blur(9px) saturate(1.22) !important;
  -webkit-backdrop-filter:blur(9px) saturate(1.22) !important;
  font-weight:850 !important;
}


html body #moonPill,
html body .pill.moon,
html body [data-pill="moon"],
html body [aria-label*="Moon"],
html body [title*="Moon"]{
  color:#f5f3ff !important;
  border:0 !important;
  background:
    radial-gradient(circle at 24% 22%, rgba(255,255,255,.26), transparent 34%),
    linear-gradient(135deg, rgba(96,165,250,.20), rgba(167,139,250,.16) 54%, rgba(45,212,191,.10)),
    rgba(17,24,39,.42) !important;
  box-shadow:
    var(--nav-pill-shadow),
    0 0 16px rgba(167,139,250,.16),
    0 0 10px rgba(125,211,252,.10) !important;
  text-shadow:0 1px 2px rgba(0,0,0,.78) !important;
}


html body .pill.night,
html body [data-pill="night"]{
  color:#e0f2fe !important;
  border:0 !important;
  background:
    radial-gradient(circle at 22% 20%, rgba(255,255,255,.18), transparent 34%),
    linear-gradient(135deg, rgba(59,130,246,.18), rgba(99,102,241,.15) 55%, rgba(20,184,166,.08)),
    rgba(15,23,42,.46) !important;
  box-shadow:
    var(--nav-pill-shadow),
    0 0 15px rgba(59,130,246,.14) !important;
}


html body .pill.live,
html body [data-pill="live"],
html body [aria-label*="Live"],
html body [title*="Live"]{
  color:#dcfce7 !important;
  border:0 !important;
  background:
    radial-gradient(circle at 22% 20%, rgba(255,255,255,.20), transparent 34%),
    linear-gradient(135deg, rgba(34,197,94,.22), rgba(20,184,166,.15) 52%, rgba(14,165,233,.10)),
    rgba(6,78,59,.34) !important;
  box-shadow:
    var(--nav-pill-shadow),
    0 0 16px rgba(74,222,128,.12) !important;
  text-shadow:0 1px 2px rgba(0,0,0,.76) !important;
}

html body .pill.live .dot{
  background:#34f58b !important;
  box-shadow:
    0 0 0 1px rgba(220,252,231,.28),
    0 0 8px rgba(52,245,139,.70) !important;
}


html body .status-bar .pill.warn,
html body header .pill.warn,
html body .status-bar .pill.warning,
html body header .pill.warning{
  color:#fef9c3 !important;
  border:0 !important;
  background:
    radial-gradient(circle at 22% 20%, rgba(255,255,255,.20), transparent 34%),
    linear-gradient(135deg, rgba(250,204,21,.18), rgba(251,146,60,.13) 52%, rgba(14,165,233,.08)),
    rgba(15,23,42,.34) !important;
  box-shadow:
    var(--nav-pill-shadow),
    0 0 16px rgba(250,204,21,.12) !important;
}


html body .status-bar .pill.temp,
html body header .pill.temp{
  display:none !important;
}




html body .status-bar .pill{
  letter-spacing:.01em !important;
  line-height:1 !important;
}


:root{
  --statbar-text: rgba(246,250,255,.96);
  --statbar-muted: rgba(226,239,249,.90);
  --statbar-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 4px 12px rgba(0,0,0,.16);
}





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,
html body .status-bar .pill,
html body .status-bar .chip{
  color:var(--statbar-text) !important;
  border:0 !important;
  outline:0 !important;
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.24), transparent 34%),
    linear-gradient(135deg, rgba(125,211,252,.20), rgba(45,212,191,.12) 52%, rgba(129,140,248,.12)),
    rgba(15,23,42,.42) !important;
  box-shadow:
    var(--statbar-shadow),
    0 0 12px rgba(125,211,252,.12) !important;
  text-shadow:
    0 1px 2px rgba(0,0,0,.80),
    0 0 6px rgba(255,255,255,.08) !important;
  font-weight:850 !important;
  letter-spacing:.01em !important;
  backdrop-filter:blur(9px) saturate(1.22) !important;
  -webkit-backdrop-filter:blur(9px) saturate(1.22) !important;
}


html body .status-bar #topClock{
  color:#f8fbff !important;
  background:
    radial-gradient(circle at 20% 18%, rgba(255,255,255,.22), transparent 34%),
    linear-gradient(135deg, rgba(148,163,184,.22), rgba(14,165,233,.12)),
    rgba(15,23,42,.46) !important;
}





html body .status-bar #dayStatusPill{
  color:#e0f2fe !important;
  background:
    radial-gradient(circle at 20% 18%, rgba(255,255,255,.20), transparent 34%),
    linear-gradient(135deg, rgba(59,130,246,.22), rgba(99,102,241,.16) 55%, rgba(20,184,166,.08)),
    rgba(15,23,42,.50) !important;
  box-shadow:
    var(--statbar-shadow),
    0 0 14px rgba(59,130,246,.14) !important;
}


html body .status-bar #hazDupPill{
  color:#dcfce7 !important;
  background:
    radial-gradient(circle at 20% 18%, rgba(255,255,255,.22), transparent 34%),
    linear-gradient(135deg, rgba(34,197,94,.22), rgba(20,184,166,.14) 52%, rgba(14,165,233,.10)),
    rgba(6,78,59,.38) !important;
  box-shadow:
    var(--statbar-shadow),
    0 0 14px rgba(74,222,128,.12) !important;
}


html body .status-bar #status{
  color:#e0f2fe !important;
  min-width:max-content !important;
  background:
    radial-gradient(circle at 20% 18%, rgba(255,255,255,.22), transparent 34%),
    linear-gradient(135deg, rgba(14,165,233,.23), rgba(59,130,246,.14) 54%, rgba(20,184,166,.10)),
    rgba(15,23,42,.46) !important;
  box-shadow:
    var(--statbar-shadow),
    0 0 14px rgba(14,165,233,.13) !important;
}


html body .status-bar #status[style*="16a34a"],
html body .status-bar #status[title*="Live"]{
  color:#dcfce7 !important;
  background:
    radial-gradient(circle at 20% 18%, rgba(255,255,255,.22), transparent 34%),
    linear-gradient(135deg, rgba(34,197,94,.23), rgba(20,184,166,.15) 54%, rgba(14,165,233,.10)),
    rgba(6,78,59,.40) !important;
}


html body .status-bar #unitPill{
  color:#e0f2fe !important;
  min-width:34px !important;
  padding-inline:9px !important;
  background:
    radial-gradient(circle at 20% 18%, rgba(255,255,255,.20), transparent 34%),
    linear-gradient(135deg, rgba(56,189,248,.20), rgba(129,140,248,.13)),
    rgba(15,23,42,.44) !important;
}


html body #liveTempPill,
html body .status-bar .pill.temp,
html body .status-bar .transparent[aria-label*="temperature"],
html body .status-bar [aria-label*="Live temperature"]{
  display:none !important;
}


html body .status-bar #hazDupPill[style],
html body .status-bar #status[style]{
  border:0 !important;
}


html body .status-bar .status-right{
  gap:7px !important;
  align-items:center !important;
}


:root{
  --glass-soft-edge:
    inset 0 1px 0 rgba(255,255,255,.11),
    inset 0 -1px 0 rgba(0,0,0,.18);
  --glass-card-depth:
    0 10px 30px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(0,0,0,.22);
  --glass-title-depth:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -1px 0 rgba(0,0,0,.16),
    0 2px 8px rgba(0,0,0,.18);
}

/* ---------------- Global pills/chips: remove hard border lines ---------------- */
html body .pill,
html body .chip,
html body .status-pill,
html body .badge,
html body .tag,
html body button.pill,
html body .transparent,
html body [class*="pill"],
html body [class*="chip"]{
  border:0 !important;
  outline:0 !important;
  box-shadow:
    var(--glass-soft-edge),
    0 4px 12px rgba(0,0,0,.14) !important;
}


html body .pill::before,
html body .pill::after,
html body .chip::before,
html body .chip::after,
html body [class*="pill"]::before,
html body [class*="pill"]::after,
html body [class*="chip"]::before,
html body [class*="chip"]::after{
  border-color:transparent !important;
  outline:0 !important;
}


html body .pill:focus-visible,
html body .chip:focus-visible,
html body button:focus-visible{
  outline:0 !important;
  box-shadow:
    var(--glass-soft-edge),
    0 0 0 2px rgba(125,211,252,.20),
    0 4px 12px rgba(0,0,0,.14) !important;
}

/* ---------------- Card/gauge outer border cleanup ---------------- */





html body #outdoorReadingsRibbon,
html body #outdoorRibbon,
html body #rainRibbon{
  border:0 !important;
  outline:0 !important;
}

/* ---------------- Gauge/tube outline cleanup ---------------- */


html body .tube{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.13),
    inset 0 -10px 18px rgba(0,0,0,.26),
    inset 0 0 12px rgba(255,255,255,.045),
    0 6px 14px rgba(0,0,0,.13) !important;
}


html body .tube-card.uv .tube,
html body .solar-combo-card .tube-card.uv .tube{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.13),
    inset 0 -10px 18px rgba(0,0,0,.26),
    inset 0 0 14px rgba(216,180,254,.10),
    0 0 10px rgba(168,85,247,.15),
    0 6px 14px rgba(0,0,0,.13) !important;
}

html body .tube-card.solar .tube,
html body .solar-combo-card .tube-card.solar .tube{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.13),
    inset 0 -10px 18px rgba(0,0,0,.26),
    inset 0 0 14px rgba(253,230,138,.10),
    0 0 10px rgba(250,204,21,.14),
    0 6px 14px rgba(0,0,0,.13) !important;
}

html body .tube-card.rain .tube,
html body #rainRibbon.rain-has-intensity .tube-card.rain .tube{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.13),
    inset 0 -10px 18px rgba(0,0,0,.26),
    inset 0 0 14px rgba(125,211,252,.10),
    0 6px 14px rgba(0,0,0,.13) !important;
}

/* ---------------- Sub-header/title chip border cleanup ---------------- */

/* ---------------- R33.30 UV/Solar vertical gauge border removal ---------------- */
html body .tube-card.uv .tube,
html body .solar-combo-card .tube-card.uv .tube,
html body .tube-card.solar .tube,
html body .solar-combo-card .tube-card.solar .tube{
  border:0 !important;
  outline:0 !important;
}

/* =========================================================
   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;
}



: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 .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 [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;
  
  
  
  outline:0 !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;
}



: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{
  
  
  
  
  
  
  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::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{
  
  font-weight:700 !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;
  
}

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 #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;
  }

}





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;
  
  
  color:#bae6fd !important;
  font:900 .76rem/1 Inter, system-ui, Arial !important;
  letter-spacing:.01em !important;
  cursor:pointer !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{
  
  flex-direction:column !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::-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;
  
  justify-content:flex-start !important;
  
  
  border-radius:10px !important;
  color:#f8fbff !important;
  font-size:.82rem !important;
  font-weight:850 !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;
  
  top:50% !important;
  transform:translateY(-50%) !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  
  border-radius:999px !important;
  color:#dff7ff !important;
  
  font-weight:900 !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;
  
}

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;
  
  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{
  
  margin:0 !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;
  
  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;
  
  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{
  
  
  
  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,
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{
  
  
  
  
  
  
  
  hyphens:auto !important;
  padding-right:clamp(34px, 8vw, 58px) !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,
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[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;
  }

}

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

/* ---------- Panel status-pill containment: Forecast7 + Alerts + Quakes ---------- */


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

html body #forecast7Panel > .ribbon-title,
html body #hazardsPanel > .ribbon-title,
html body #quakesPanel > .ribbon-title{
  
  flex-wrap:wrap !important;
  
  justify-content:center !important;
  gap:5px 8px !important;
  
  
  
  padding-inline:2px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  
  
}

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

html body #forecast7Panel > .ribbon-title .title-text,
html body #hazardsPanel > .ribbon-title .title-text,
html body #quakesPanel > .ribbon-title .title-text{
  flex:1 1 auto !important;
  
  
  
  
  
  
}

html body #fc7StatusPill,
html body #hazStatusPill,
html body #quakesStatusPill{
  
  
  
  margin-left:0 !important;
  padding-inline:clamp(.34rem, .9vw, .55rem) !important;
  
  
  
  
  
  vertical-align:middle !important;
}

html body #fc7StatusPill::before,
html body #hazStatusPill::before,
html body #quakesStatusPill::before{
  flex:0 0 auto !important;
}

@media (max-width:720px){
  html body #forecast7Panel > .ribbon-title .title-text,
  html body #hazardsPanel > .ribbon-title .title-text,
  html body #quakesPanel > .ribbon-title .title-text{
    flex:1 1 100% !important;
    order:2 !important;
  }

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

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

html body #forecast7Panel .fct-tile .pop{
  max-width:100% !important;
  min-width:0 !important;
  padding-inline:clamp(.28rem, .8vw, .42rem) !important;
  font-size:clamp(.64rem, 1.05vw, .76rem) !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

/* ---------- Rain Intensity embedded gauge: title + value/risk pill fit ---------- */
:root{
  --wx-rain-embed-col:clamp(98px, 9.8vw, 132px);
  --wx-rain-embed-tube-h:clamp(76px, 7.8vw, 104px);
  --wx-rain-embed-tube-w:clamp(20px, 2.2vw, 24px);
}

html body #rainRibbon,
html body #rainRibbon *,
html body #rainRibbon .ribbon-body-card,
html body #rainRibbon .tube-card.rain{
  box-sizing:border-box !important;
  min-width:0 !important;
}

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

html body #rainRibbon.rain-has-intensity .tube-card.rain{
  
  min-width:0 !important;
  max-width:100% !important;
  
  grid-template-rows:minmax(16px,auto) minmax(52px,1fr) minmax(26px,auto) !important;
  align-items:center !important;
  justify-items:center !important;
  padding:clamp(4px, .55vw, 6px) !important;
  gap:2px !important;
}

html body #rainRibbon.rain-has-intensity .tube-card.rain .tube-title{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  max-height:2.15em !important;
  padding:2px 4px !important;
  font-size:clamp(.56rem, .85vw, .66rem) !important;
  line-height:1.05 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  
  overflow-wrap:anywhere !important;
}

html body #rainRibbon.rain-has-intensity .tube-card.rain .tube{
  width:var(--wx-rain-embed-tube-w) !important;
  height:var(--wx-rain-embed-tube-h) !important;
  max-height:var(--wx-rain-embed-tube-h) !important;
  align-self:center !important;
}

html body #rainRibbon.rain-has-intensity .tube-card.rain .tube-value,
html body #rainRibbon.rain-has-intensity #tube-rain-val{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:2px !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  max-height:clamp(28px, 4.8vw, 42px) !important;
  padding:0 2px !important;
  font-size:clamp(.54rem, .88vw, .66rem) !important;
  line-height:1.04 !important;
  overflow:hidden !important;
  text-align:center !important;
  white-space:normal !important;
  text-overflow:clip !important;
}

html body #rainRibbon.rain-has-intensity #tube-rain-val.has-risk-label::after,
html body #rainRibbon.rain-has-intensity .tube-card.rain .tube-value.has-risk-label::after{
  display:block !important;
  align-self:center !important;
  width:auto !important;
  max-width:100% !important;
  min-width:0 !important;
  margin:0 !important;
  padding:1px 5px !important;
  font-size:clamp(.46rem, .72vw, .55rem) !important;
  line-height:1 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

@media (max-width:980px) and (min-width:761px){
  :root{
    --wx-rain-embed-col:clamp(104px, 14vw, 136px);
    --wx-rain-embed-tube-h:clamp(70px, 8vw, 96px);
  }
}

@media (max-width:760px){
  

  html body #rainRibbon.rain-has-intensity .tube-card.rain{
    grid-column:1 !important;
    
    width:100% !important;
    height:auto !important;
    
    grid-template-columns:minmax(8.5rem, 1fr) minmax(28px, 42px) minmax(4.8rem, .72fr) !important;
    grid-template-rows:1fr !important;
    column-gap:8px !important;
    padding:6px 8px !important;
  }

  html body #rainRibbon.rain-has-intensity .tube-card.rain .tube-title{
    grid-column:1 !important;
    grid-row:1 !important;
    max-height:none !important;
    text-align:left !important;
    
  }

  html body #rainRibbon.rain-has-intensity .tube-card.rain .tube{
    grid-column:2 !important;
    grid-row:1 !important;
    height:62px !important;
    max-height:62px !important;
  }

  html body #rainRibbon.rain-has-intensity .tube-card.rain .tube-value,
  html body #rainRibbon.rain-has-intensity #tube-rain-val{
    grid-column:3 !important;
    grid-row:1 !important;
    max-height:100% !important;
  }
}

@media (max-width:420px){
  html body #rainRibbon.rain-has-intensity .tube-card.rain{
    grid-template-columns:1fr !important;
    grid-template-rows:auto auto auto !important;
    min-height:118px !important;
  }

  html body #rainRibbon.rain-has-intensity .tube-card.rain .tube-title,
  html body #rainRibbon.rain-has-intensity .tube-card.rain .tube,
  html body #rainRibbon.rain-has-intensity .tube-card.rain .tube-value,
  html body #rainRibbon.rain-has-intensity #tube-rain-val{
    grid-column:1 !important;
  }
}

/* ========================= Pass 37: page overflow containment ========================= */

body{
  overflow-x:clip;
}
@supports not (overflow: clip){
  body{ overflow-x:hidden; }
}
.container,
.main,
#mainContent,
.bubble-wrap,
.ribbon-panels,
.gauges-grid,
.gauges-top,
.wx-mid-instruments,
.hazards-quakes-row,
.ribbon,
.ribbon-body-card,
.status-bar,
.status-left,
.status-right,
.wx-hero-summary,
.drawer,
.drawer-panel,
.drawer-body,
.drawer-foot,
.about-grid,
.about-section,
.forecast7-grid,
.forecast-intel-strip,
.forecast-intel-items,
.metar-strip,
.taf-strip,
.metar-card,
.taf-card,
.hazard-chips,
.alert-feed,
.nowcast-row,
.local-metrics-grid,
.q-row,
.quakes-strip,
.quake-chip,
.foot-wrap,
.foot-left,
.foot-right{
  min-width:0;
}
.metar-strip,
.taf-strip,
.quakes-strip,
.metar-raw-box,
.drawer-body{
  max-width:100%;
  overscroll-behavior-inline:contain;
}
.metar-card,
.taf-card,
.quake-chip,
.fct-tile,
.forecast-intel-chip,
.nowcast-signal,
.alert-feed-row{
  max-width:100%;
}
.status-bar,
.foot-wrap{
  overflow:hidden;
}
.status-bar .wx-hero-summary-text,
.foot-title,
.foot-sub,
.metar-card,
.taf-card,
.q-place,
.panel-note{
  overflow-wrap:anywhere;
}

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

/* ---------- Appliance / kiosk paint-stability guard ---------- */
html.paint-stable .pulse,
html.paint-stable .disclaimer-flash{
  animation:none !important;
}

html.paint-stable .bubble,
html.paint-stable .spark .lead-ball,
html.paint-stable .title-ico,
html.paint-stable .wx-ico,
html.paint-stable .note-ico{
  filter:none !important;
}

@media (prefers-reduced-motion:reduce), (update:slow){
  html body #stage .bg-layer{ transition:none !important; filter:none !important; }
  html body .pulse,
  html body .disclaimer-flash{ animation:none !important; }
  
}

html body .drawer{
  visibility:hidden !important;
  pointer-events:none !important;
  transform:translate3d(calc(100% + 32px),0,0) !important;
  opacity:0 !important;
  overflow:hidden !important;
  contain:layout paint style !important;
  isolation:isolate !important;
}

html body .drawer:not(.open) .drawer-panel,
html body .drawer[aria-hidden="true"] .drawer-panel{
  visibility:hidden !important;
  pointer-events:none !important;
}

html body .backdrop:not(.show){
  visibility:hidden !important;
  pointer-events:none !important;
  opacity:0 !important;
}

html body .backdrop.show{
  visibility:visible !important;
}

html.paint-stable .bubble,
html.paint-stable body .bubble{
  will-change:transform !important;
  filter:none !important;
}

html body #rainRibbon.rain-has-intensity{
  overflow:hidden !important;
  contain:layout paint !important;
}

html body #rainRibbon.rain-has-intensity .ribbon-body-card{
  overflow:hidden !important;
  align-items:stretch !important;
}

html body #rainRibbon.rain-has-intensity .tube-card.rain{
  z-index:1 !important;
  overflow:hidden !important;
  contain:layout paint !important;
  isolation:isolate !important;
  min-height:0 !important;
}

html body #rainRibbon.rain-has-intensity .tube-card.rain .tube-title,
html body #rainRibbon.rain-has-intensity .tube-card.rain .tube-value,
html body #rainRibbon.rain-has-intensity #tube-rain-val{
  position:relative !important;
  z-index:2 !important;
  max-width:100% !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

html body #rainRibbon.rain-has-intensity .tube-card.rain .tube-title{
  white-space:nowrap !important;
  display:block !important;
}

@media (max-width:760px){
  html body #rainRibbon.rain-has-intensity .tube-card.rain .tube-title{
    white-space:normal !important;
  }
}

@media (max-width:520px){
  html body .drawer{
    width:100vw !important;
    max-width:100vw !important;
  }
}

html.paint-stable body,
html.paint-stable body * ,
html.paint-stable body *::before,
html.paint-stable body *::after{
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}

html.paint-stable body{
  background-attachment:scroll !important;
}

html.paint-stable body::before,
html.paint-stable body::after{
  transform:none !important;
  will-change:auto !important;
}

html.paint-stable body .ribbon-body-card,
html.paint-stable body #forecast7Panel .ribbon-body-card,
html.paint-stable body #hazardsPanel .ribbon-body-card,
html.paint-stable body #quakesPanel .ribbon-body-card{
  position:relative !important;
  isolation:isolate !important;
  contain:paint !important;
  background:
    radial-gradient(120% 120% at 50% 58%, rgba(0,0,0,.46), rgba(0,0,0,.20) 66%, transparent 80%),
    linear-gradient(180deg, rgba(125,211,252,.030), rgba(255,255,255,.008)),
    #07101a !important;
  background-clip:padding-box !important;
  will-change:auto !important;
  overflow:hidden !important;
}

html.paint-stable body #rainRibbon,
html.paint-stable body #rainRibbon.rain-has-intensity{
  position:relative !important;
  isolation:isolate !important;
  contain:paint !important;
  overflow:hidden !important;
  background:
    radial-gradient(110% 120% at 82% 44%, rgba(14,165,233,.13), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.030), rgba(255,255,255,.010)),
    #07131d !important;
}

html.paint-stable body #rainRibbon .ribbon-body-card,
html.paint-stable body #rainRibbon.rain-has-intensity .ribbon-body-card{
  background:
    radial-gradient(110% 120% at 84% 46%, rgba(14,165,233,.12), transparent 66%),
    linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,.008)),
    #06101a !important;
  overflow:hidden !important;
  isolation:isolate !important;
  contain:paint !important;
}

html.paint-stable body #rainRibbon.rain-has-intensity .tube-card.rain{
  background:
    radial-gradient(100% 130% at 50% 36%, rgba(56,189,248,.15), transparent 68%),
    linear-gradient(180deg, rgba(255,255,255,.040), rgba(255,255,255,.010)),
    #071826 !important;
  isolation:isolate !important;
  contain:paint !important;
  overflow:hidden !important;
}

html.paint-stable body #rainRibbon .ribbon-label,
html.paint-stable body #rainRibbon .ribbon-value,
html.paint-stable body #rainRibbon .ribbon-item,
html.paint-stable body .ribbon-item,
html.paint-stable body .gauge-rows .kv,
html.paint-stable body .nowcast-row .kv{
  isolation:isolate !important;
  contain:paint !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.040), rgba(255,255,255,.010)),
    #06101a !important;
  background-clip:padding-box !important;
}

html.paint-stable body .bubble{
  filter:none !important;
  backface-visibility:hidden !important;
}

html body #forecast7Panel,
html body #hazardsPanel,
html body #quakesPanel,
html body #forecast7Panel *,
html body #hazardsPanel *,
html body #quakesPanel *{
  box-sizing:border-box !important;
}

html body #forecast7Panel > .ribbon-title,
html body #hazardsPanel > .ribbon-title,
html body #quakesPanel > .ribbon-title{
  display:grid !important;
  grid-template-columns:minmax(24px, 1fr) minmax(0, auto) minmax(118px, 1fr) !important;
  align-items:center !important;
  justify-items:center !important;
  column-gap:8px !important;
  row-gap:4px !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  margin:0 auto 8px !important;
  padding:0 10px !important;
  overflow:visible !important;
  white-space:normal !important;
  contain:layout paint !important;
}

html body #forecast7Panel > .ribbon-title .title-ico,
html body #hazardsPanel > .ribbon-title .title-ico,
html body #quakesPanel > .ribbon-title .title-ico{
  grid-column:1 !important;
  justify-self:start !important;
  align-self:center !important;
  min-width:22px !important;
  width:22px !important;
  max-width:22px !important;
  overflow:visible !important;
}

html body #forecast7Panel > .ribbon-title .title-text,
html body #hazardsPanel > .ribbon-title .title-text,
html body #quakesPanel > .ribbon-title .title-text{
  grid-column:2 !important;
  justify-self:center !important;
  align-self:center !important;
  display:block !important;
  min-width:0 !important;
  max-width:100% !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  text-align:center !important;
}

html body #fc7StatusPill,
html body #hazStatusPill,
html body #quakesStatusPill{
  grid-column:3 !important;
  justify-self:end !important;
  align-self:center !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:.34rem !important;
  flex:0 0 auto !important;
  width:auto !important;
  min-width:max-content !important;
  max-width:100% !important;
  height:auto !important;
  min-height:23px !important;
  padding:.18rem .48rem !important;
  margin:0 !important;
  border-radius:999px !important;
  font-size:clamp(.68rem, .72vw, .78rem) !important;
  line-height:1 !important;
  white-space:nowrap !important;
  overflow:visible !important;
  text-overflow:clip !important;
  contain:paint !important;
}

html body #fc7StatusPill .status-dot,
html body #hazStatusPill .status-dot,
html body #quakesStatusPill .status-dot,
html body #fc7StatusPill .status-warn,
html body #hazStatusPill .status-warn,
html body #quakesStatusPill .status-warn{
  flex:0 0 auto !important;
  margin-right:.20rem !important;
}

html body #fc7StatusPill .status-label,
html body #hazStatusPill .status-label,
html body #quakesStatusPill .status-label{
  flex:0 0 auto !important;
  min-width:max-content !important;
  max-width:none !important;
  overflow:visible !important;
  text-overflow:clip !important;
  white-space:nowrap !important;
}

html body #fc7StatusPill .status-extra,
html body #hazStatusPill .status-extra,
html body #quakesStatusPill .status-extra{
  flex:1 1 auto !important;
  min-width:0 !important;
  max-width:13ch !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

html body #fc7StatusPill .status-time,
html body #hazStatusPill .status-time,
html body #quakesStatusPill .status-time{
  display:none !important;
}

@media (max-width:1120px){
  html body #hazardsPanel > .ribbon-title,
  html body #quakesPanel > .ribbon-title{
    grid-template-columns:24px minmax(0, 1fr) auto !important;
    padding-inline:6px !important;
    column-gap:6px !important;
  }

  html body #hazardsPanel > .ribbon-title .title-text,
  html body #quakesPanel > .ribbon-title .title-text{
    justify-self:center !important;
    max-width:100% !important;
  }

  html body #hazStatusPill,
  html body #quakesStatusPill{
    max-width:clamp(112px, 22vw, 180px) !important;
    min-width:0 !important;
    overflow:hidden !important;
  }
}

@media (max-width:860px){
  html body #forecast7Panel > .ribbon-title,
  html body #hazardsPanel > .ribbon-title,
  html body #quakesPanel > .ribbon-title{
    grid-template-columns:24px minmax(0, 1fr) !important;
    grid-auto-rows:auto !important;
    padding-inline:6px !important;
  }

  html body #forecast7Panel > .ribbon-title .title-ico,
  html body #hazardsPanel > .ribbon-title .title-ico,
  html body #quakesPanel > .ribbon-title .title-ico{
    grid-column:1 !important;
    grid-row:1 !important;
  }

  html body #forecast7Panel > .ribbon-title .title-text,
  html body #hazardsPanel > .ribbon-title .title-text,
  html body #quakesPanel > .ribbon-title .title-text{
    grid-column:2 !important;
    grid-row:1 !important;
  }

  html body #fc7StatusPill,
  html body #hazStatusPill,
  html body #quakesStatusPill{
    grid-column:1 / -1 !important;
    grid-row:2 !important;
    justify-self:center !important;
    max-width:100% !important;
    min-width:0 !important;
    overflow:hidden !important;
  }
}

@media (max-width:520px){
  html body #fc7StatusPill .status-extra,
  html body #hazStatusPill .status-extra,
  html body #quakesStatusPill .status-extra{
    display:none !important;
  }
}

html body .drawer.open,
html body .drawer[aria-hidden="false"]{
  visibility:visible !important;
  pointer-events:auto !important;
  opacity:1 !important;
  transform:translate3d(0,0,0) !important;
  z-index:90 !important;
  overflow:visible !important;
}

html body .drawer.open .drawer-panel,
html body .drawer[aria-hidden="false"] .drawer-panel{
  visibility:visible !important;
  pointer-events:auto !important;
  opacity:1 !important;
  transform:none !important;
  z-index:91 !important;
}

html body .backdrop.show{
  z-index:80 !important;
}

html.paint-stable #stage .bg-layer,
html.paint-stable body #stage .bg-layer{
  transition:opacity .9s ease !important;
  filter:saturate(1.03) contrast(1.02) !important;
}

@media (prefers-reduced-motion:reduce){
  html.paint-stable #stage .bg-layer,
  html.paint-stable body #stage .bg-layer{
    transition:none !important;
    filter:none !important;
  }
}

:root{
  --wx-alert-feed-max-h: clamp(132px, 17vh, 178px);
}

html body #hazardsPanel .hazards-body-card{
  display:grid !important;
  grid-template-rows:auto auto minmax(0, auto) auto !important;
  gap:10px !important;
  min-width:0 !important;
  max-width:100% !important;
  overflow:hidden !important;
  padding-bottom:18px !important;
}

html body #hazardsPanel #hazardChips.alert-feed,
html body #hazardsPanel .hazard-chips.alert-feed{
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) !important;
  align-items:start !important;
  gap:8px !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  max-height:var(--wx-alert-feed-max-h) !important;
  min-height:0 !important;
  overflow-y:scroll !important;
  overflow-x:hidden !important;
  overscroll-behavior:contain !important;
  -webkit-overflow-scrolling:touch !important;
  
  scrollbar-width:thin !important;
  scrollbar-color:rgba(103,232,249,.55) rgba(2,20,34,.32) !important;
  padding:1px 10px 8px 2px !important;
  margin:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

html body #hazardsPanel #hazardChips.alert-feed::-webkit-scrollbar,
html body #hazardsPanel .hazard-chips.alert-feed::-webkit-scrollbar{
  width:8px !important;
}

html body #hazardsPanel #hazardChips.alert-feed::-webkit-scrollbar-track,
html body #hazardsPanel .hazard-chips.alert-feed::-webkit-scrollbar-track{
  background:rgba(2,20,34,.32) !important;
  border-radius:999px !important;
}

html body #hazardsPanel #hazardChips.alert-feed::-webkit-scrollbar-thumb,
html body #hazardsPanel .hazard-chips.alert-feed::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, rgba(103,232,249,.58), rgba(14,165,233,.36)) !important;
  border-radius:999px !important;
  border:1px solid rgba(255,255,255,.10) !important;
}

html body #hazardsPanel #hazardChips.alert-feed .pill.alert-feed-row,
html body #hazardsPanel .hazard-chips.alert-feed .pill.alert-feed-row{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  min-height:36px !important;
  height:auto !important;
  padding:8px 44px 8px 15px !important;
  line-height:1.30 !important;
  white-space:normal !important;
  overflow:hidden !important;
  overflow-wrap:anywhere !important;
  word-break:normal !important;
  text-overflow:clip !important;
  align-items:center !important;
  flex:0 0 auto !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{
  right:9px !important;
  max-width:36px !important;
  padding:2px 5px !important;
  font-size:.66rem !important;
  line-height:1.05 !important;
  overflow:hidden !important;
  white-space:nowrap !important;
  text-overflow:clip !important;
}

html body #hazardsPanel .nowcast-row.local-metrics-grid{
  min-width:0 !important;
  max-width:100% !important;
  overflow:hidden !important;
  margin-top:0 !important;
  padding-bottom:2px !important;
}

@media (max-width:760px){
  :root{ --wx-alert-feed-max-h: clamp(138px, 30vh, 236px); }

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

html body #metarPanel{
  --c1:#38bdf8;
  --c2:#22c55e;
  min-width:0 !important;
  max-width:100% !important;
  overflow:hidden !important;
}

html body #metarPanel,
html body #metarPanel *,
html body #metarPanel *::before,
html body #metarPanel *::after{
  box-sizing:border-box !important;
}

html body #metarPanel > .ribbon-title{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  justify-content:center !important;
  gap:5px 8px !important;
  max-width:100% !important;
  overflow:hidden !important;
  white-space:normal !important;
}

html body #metarPanel > .ribbon-title .title-text{
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

html body #metarPanel .ribbon-body-card,
html body #metarPanel .metar-body-card{
  min-width:0 !important;
  max-width:100% !important;
  overflow:hidden !important;
  box-shadow:inset 0 0 42px 15px rgba(56,189,248,.14), inset 0 0 42px 15px rgba(34,197,94,.12), 0 6px 16px rgba(0,0,0,.18) !important;
}

html body .panel-note--metars{
  border-color:rgba(56,189,248,.35) !important;
  box-shadow:0 0 12px 4px rgba(56,189,248,.14), 0 0 12px 4px rgba(34,197,94,.12), inset 0 0 0 1px rgba(255,255,255,.06) !important;
}
html body .panel-note--metars .note-ico{ color:#7dd3fc !important; }
html body .panel-note--metars a{ background:linear-gradient(135deg,#38bdf8,#22c55e) !important; }

html body #metarTargetSummary,
html body .metar-target-summary{
  display:flex !important;
  align-items:center !important;
  flex-wrap:wrap !important;
  gap:6px !important;
  margin:0 0 7px !important;
  min-width:0 !important;
}

html body .metar-mini-pill{
  display:inline-flex !important;
  align-items:center !important;
  max-width:100% !important;
  padding:3px 9px !important;
  border-radius:999px !important;
  border:1px solid rgba(125,211,252,.30) !important;
  background:linear-gradient(180deg, rgba(255,255,255,.070), rgba(255,255,255,.022)), rgba(15,23,42,.50) !important;
  color:#dff7ff !important;
  font-size:.78rem !important;
  font-weight:900 !important;
  line-height:1.15 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  box-shadow:0 0 10px 3px rgba(56,189,248,.10), inset 0 0 0 1px rgba(255,255,255,.045) !important;
}
html body .metar-mini-fallback{ border-color:rgba(250,204,21,.46) !important; color:#fff7c2 !important; }
html body .metar-mini-warn{ border-color:rgba(239,68,68,.50) !important; color:#fecaca !important; }

html body .metar-strip{
  position:relative !important;
  display:flex !important;
  flex-wrap:nowrap !important;
  gap:8px !important;
  align-items:stretch !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  padding:6px 7px 8px !important;
  border-radius:13px !important;
  border:1px solid var(--wx-data-card-border) !important;
  background:var(--wx-data-card-bg) !important;
  scrollbar-width:thin !important;
  box-shadow:inset 0 0 36px 13px rgba(56,189,248,.11), 0 6px 14px rgba(0,0,0,.16) !important;
  min-width:0 !important;
  max-width:100% !important;
}
html body .metar-strip::-webkit-scrollbar{ height:8px !important; }
html body .metar-strip::-webkit-scrollbar-track{ background:rgba(255,255,255,.06) !important; border-radius:10px !important; }
html body .metar-strip::-webkit-scrollbar-thumb{ background:rgba(125,211,252,.28) !important; border-radius:10px !important; }
html body .metar-strip::-webkit-scrollbar-thumb:hover{ background:rgba(125,211,252,.40) !important; }

html body .metar-card{
  flex:0 0 clamp(250px, 31vw, 380px) !important;
  min-width:clamp(250px, 31vw, 380px) !important;
  max-width:380px !important;
  display:grid !important;
  grid-template-rows:auto auto auto auto 1fr auto !important;
  gap:6px !important;
  padding:9px 10px !important;
  border-radius:12px !important;
  border:1px solid var(--wx-data-card-border) !important;
  background:var(--wx-data-card-bg) !important;
  box-shadow:0 5px 12px rgba(0,0,0,.18), 0 0 12px 4px rgba(56,189,248,.10), inset 0 0 0 1px rgba(255,255,255,.05) !important;
  overflow:hidden !important;
  min-height:0 !important;
}
html body .metar-card.is-target{ border-color:rgba(56,189,248,.38) !important; box-shadow:0 5px 12px rgba(0,0,0,.18), 0 0 14px 5px rgba(56,189,248,.18), inset 0 0 0 1px rgba(255,255,255,.06) !important; }
html body .metar-card.is-fallback{ border-color:rgba(250,204,21,.46) !important; box-shadow:0 5px 12px rgba(0,0,0,.18), 0 0 14px 5px rgba(250,204,21,.14), inset 0 0 0 1px rgba(255,255,255,.06) !important; }
html body .metar-card.is-stale{ border-color:rgba(251,146,60,.42) !important; }
html body .metar-card.is-missing{ border-color:rgba(239,68,68,.45) !important; opacity:.92 !important; }
html body .metar-card.has-thunderstorm{ box-shadow:0 5px 12px rgba(0,0,0,.18), 0 0 16px 5px rgba(168,85,247,.20), inset 0 0 0 1px rgba(255,255,255,.06) !important; }
html body .metar-card.has-rain{ background:radial-gradient(110% 120% at 50% 0%, rgba(14,165,233,.15), transparent 60%), linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.016)), rgba(7,17,28,.72) !important; }

html body .metar-card-head{
  display:flex !important;
  
  justify-content:space-between !important;
  gap:8px !important;
  min-width:0 !important;
}
html body .metar-card-title{ min-width:0 !important; }
html body .metar-target-label{
  display:inline-flex !important;
  align-items:center !important;
  width:auto !important;
  max-width:100% !important;
  padding:2px 7px !important;
  margin-bottom:4px !important;
  border-radius:999px !important;
  color:#06121e !important;
  background:linear-gradient(135deg,#7dd3fc,#34d399) !important;
  font-size:.70rem !important;
  line-height:1 !important;
  font-weight:950 !important;
  white-space:nowrap !important;
}
html body .metar-station-line{
  display:flex !important;
  align-items:baseline !important;
  gap:7px !important;
  min-width:0 !important;
}
html body .metar-station-line b{
  color:#e6fbff !important;
  font-size:1rem !important;
  letter-spacing:.4px !important;
  line-height:1.05 !important;
}
html body .metar-station-line span,
html body .metar-name,
html body .metar-fallback-note{
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
html body .metar-station-line span{
  color:#b8d8e7 !important;
  font-size:.78rem !important;
  white-space:nowrap !important;
}
html body .metar-age{
  flex:0 0 auto !important;
  padding:2px 7px !important;
  border-radius:999px !important;
  border:1px solid rgba(255,255,255,.14) !important;
  color:#dbeafe !important;
  background:rgba(255,255,255,.055) !important;
  font-size:.70rem !important;
  line-height:1.1 !important;
  font-weight:900 !important;
  white-space:nowrap !important;
}
html body .metar-name{
  color:#f8fafc !important;
  font-size:.84rem !important;
  font-weight:850 !important;
  line-height:1.15 !important;
  white-space:nowrap !important;
}
html body .metar-fallback-note{
  color:#fff4bf !important;
  font-size:.74rem !important;
  line-height:1.15 !important;
  white-space:nowrap !important;
}
html body .metar-chips{
  display:flex !important;
  align-items:center !important;
  flex-wrap:wrap !important;
  gap:4px !important;
  min-width:0 !important;
}
html body .metar-chip{
  display:inline-flex !important;
  align-items:center !important;
  padding:2px 7px !important;
  border-radius:999px !important;
  border:1px solid rgba(255,255,255,.16) !important;
  background:rgba(255,255,255,.075) !important;
  color:#f8fafc !important;
  font-size:.70rem !important;
  line-height:1.05 !important;
  font-weight:950 !important;
  white-space:nowrap !important;
}
html body .metar-chip.live{ background:rgba(34,197,94,.22) !important; border-color:rgba(34,197,94,.36) !important; color:#bbf7d0 !important; }
html body .metar-chip.fallback{ background:rgba(250,204,21,.20) !important; border-color:rgba(250,204,21,.42) !important; color:#fef3c7 !important; }
html body .metar-chip.stale{ background:rgba(251,146,60,.20) !important; border-color:rgba(251,146,60,.42) !important; color:#fed7aa !important; }
html body .metar-chip.missing{ background:rgba(239,68,68,.22) !important; border-color:rgba(239,68,68,.42) !important; color:#fecaca !important; }
html body .metar-chip.rain{ background:rgba(14,165,233,.22) !important; border-color:rgba(14,165,233,.40) !important; color:#bae6fd !important; }
html body .metar-chip.storm{ background:rgba(168,85,247,.24) !important; border-color:rgba(168,85,247,.44) !important; color:#e9d5ff !important; }
html body .metar-chip.lowvis{ background:rgba(245,158,11,.22) !important; border-color:rgba(245,158,11,.44) !important; color:#fde68a !important; }

html body .metar-kv-grid{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  gap:5px !important;
  min-width:0 !important;
}
html body .metar-kv-grid > div{
  min-width:0 !important;
  padding:5px 6px !important;
  border-radius:8px !important;
  border:1px solid rgba(255,255,255,.10) !important;
  background:linear-gradient(180deg, rgba(255,255,255,.050), rgba(255,255,255,.014)), rgba(0,0,0,.18) !important;
  overflow:hidden !important;
}
html body .metar-kv-grid span{
  display:block !important;
  color:#9fb6c8 !important;
  font-size:.66rem !important;
  line-height:1.05 !important;
  font-weight:850 !important;
  text-transform:uppercase !important;
  letter-spacing:.2px !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
html body .metar-kv-grid b{
  display:block !important;
  margin-top:2px !important;
  color:#f8fafc !important;
  font-size:.78rem !important;
  line-height:1.12 !important;
  font-weight:900 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
html body .metar-raw-details{
  margin-top:7px !important;
  border-radius:10px !important;
  border:1px solid var(--wx-data-card-border) !important;
  background:var(--wx-data-card-bg) !important;
  overflow:hidden !important;
}
html body .metar-raw-details summary{
  cursor:pointer !important;
  padding:6px 8px !important;
  color:#dff7ff !important;
  font-size:.78rem !important;
  font-weight:900 !important;
  line-height:1.1 !important;
  user-select:none !important;
}
html body .metar-raw-box{
  max-height:150px !important;
  overflow:auto !important;
  padding:7px 9px 9px !important;
  border-top:1px solid rgba(255,255,255,.08) !important;
  color:#c8e9f8 !important;
  white-space:pre-wrap !important;
  overflow-wrap:anywhere !important;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
  font-size:.72rem !important;
  line-height:1.28 !important;
}

html body #metarStatusPill[data-state="live"]{ color:#bbf7d0 !important; }
html body #metarStatusPill[data-state="error"]{ color:#fecaca !important; }

html.paint-stable body #metarPanel,
html.paint-stable body #metarPanel .ribbon-body-card,
html.paint-stable body #metarPanel .metar-card{
  position:relative !important;
  isolation:isolate !important;
  contain:paint !important;
  background-clip:padding-box !important;
}
html.paint-stable body #metarPanel .ribbon-body-card{
  background:radial-gradient(120% 120% at 50% 58%, rgba(0,0,0,.46), rgba(0,0,0,.20) 66%, transparent 80%), linear-gradient(180deg, rgba(125,211,252,.030), rgba(255,255,255,.008)), #07101a !important;
  box-shadow:var(--shadow-soft), inset 0 0 0 1px rgba(255,255,255,.045) !important;
}

@media (max-width:760px){
  html body .metar-card{
    flex-basis:clamp(235px, 82vw, 340px) !important;
    min-width:clamp(235px, 82vw, 340px) !important;
  }
  html body .metar-kv-grid{ grid-template-columns:1fr 1fr !important; }
  html body .panel-note--metars{ font-size:.78rem !important; }
}

@media (max-width:480px){
  html body .metar-card{
    flex-basis:86vw !important;
    min-width:86vw !important;
  }
  html body .metar-kv-grid{ grid-template-columns:1fr !important; }
  html body .metar-station-line{ flex-wrap:wrap !important; gap:3px 7px !important; }
  html body .metar-station-line span{ white-space:normal !important; }
}

html body #hazardsPanel .haz-local-watch{
  display:flex !important;
  flex-direction:column !important;
  gap:7px !important;
  min-width:0 !important;
  max-width:100% !important;
  padding:9px 10px 10px !important;
  border-radius:12px !important;
  border:1px solid rgba(103,232,249,.32) !important;
  background:
    radial-gradient(circle at 10% 12%, rgba(34,197,94,.10), transparent 36%),
    linear-gradient(180deg, rgba(15, 45, 58, .46), rgba(2, 18, 30, .42)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055), 0 0 12px rgba(34,211,238,.075) !important;
  overflow:hidden !important;
}
html body #hazardsPanel .haz-local-watch[data-status="warning"]{
  border-color:rgba(248,113,113,.48) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055), 0 0 14px rgba(248,113,113,.14) !important;
}
html body #hazardsPanel .haz-local-watch[data-status="watch"]{
  border-color:rgba(245,158,11,.50) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055), 0 0 14px rgba(245,158,11,.13) !important;
}
html body #hazardsPanel .haz-local-watch[data-status="advisory"]{
  border-color:rgba(250,204,21,.46) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055), 0 0 14px rgba(250,204,21,.11) !important;
}
html body #hazardsPanel .haz-local-watch-head{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:8px !important;
  min-width:0 !important;
}
html body #hazardsPanel .haz-local-label{
  color:#eaf6ff !important;
  font-size:.80rem !important;
  font-weight:950 !important;
  letter-spacing:.035em !important;
  text-transform:uppercase !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
html body #hazardsPanel .haz-local-status{
  flex:0 0 auto !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:5px !important;
  min-height:22px !important;
  padding:3px 9px !important;
  border-radius:999px !important;
  color:#f8fbff !important;
  font-size:.72rem !important;
  font-weight:950 !important;
  line-height:1 !important;
  border:1px solid rgba(255,255,255,.14) !important;
  background:rgba(15,23,42,.46) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.035) !important;
}
html body #hazardsPanel .haz-local-status--clear{ color:#dcfce7 !important; border-color:rgba(34,197,94,.42) !important; background:rgba(22,101,52,.22) !important; }
html body #hazardsPanel .haz-local-status--advisory{ color:#fef9c3 !important; border-color:rgba(250,204,21,.46) !important; background:rgba(113,63,18,.24) !important; }
html body #hazardsPanel .haz-local-status--watch{ color:#ffedd5 !important; border-color:rgba(245,158,11,.50) !important; background:rgba(124,45,18,.25) !important; }
html body #hazardsPanel .haz-local-status--warning{ color:#fee2e2 !important; border-color:rgba(248,113,113,.54) !important; background:rgba(127,29,29,.28) !important; }
html body #hazardsPanel .haz-local-status--loading,
html body #hazardsPanel .haz-local-status--info,
html body #hazardsPanel .haz-local-status--error{ color:#dbeafe !important; border-color:rgba(96,165,250,.36) !important; background:rgba(30,64,175,.18) !important; }
html body #hazardsPanel .haz-local-summary{
  color:#d8ebf7 !important;
  font-weight:760 !important;
}
html body #hazardsPanel .haz-local-list{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:6px !important;
  min-width:0 !important;
  max-height:clamp(70px, 12vh, 128px) !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  scrollbar-width:thin !important;
  padding-right:4px !important;
}
html body #hazardsPanel .haz-local-list .pill.alert-feed-row{
  min-height:30px !important;
  padding:6px 42px 6px 12px !important;
  font-size:.78rem !important;
  line-height:1.24 !important;
  border-left-width:5px !important;
}
html body #hazardsPanel .pill.alert-feed-row.hz-local-priority::before{
  content:"LOCAL" !important;
  margin-right:8px !important;
  padding:2px 6px !important;
  border-radius:999px !important;
  color:#cffafe !important;
  font-size:.62rem !important;
  font-weight:950 !important;
  line-height:1 !important;
  background:rgba(14,165,233,.15) !important;
  border:1px solid rgba(103,232,249,.26) !important;
}
@media (max-width:760px){
  html body #hazardsPanel .haz-local-watch{ padding:8px 8px 9px !important; gap:6px !important; }
  html body #hazardsPanel .haz-local-label{ font-size:.72rem !important; }
  html body #hazardsPanel .haz-local-summary{ font-size:.74rem !important; }
  html body #hazardsPanel .haz-local-list{ max-height:120px !important; }
}

html body #hazardsPanel .haz-local-summary{
  display:block !important;
  max-width:100% !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  overflow-wrap:normal !important;
  font-size:.77rem !important;
  line-height:1.18 !important;
}

html body #hazardsPanel #pagasaLocalList.haz-local-list.alert-feed,
html body #hazardsPanel .haz-local-list.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(96px, 14vh, 168px) !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 #pagasaLocalList.haz-local-list.alert-feed .pill.alert-feed-row,
html body #hazardsPanel .haz-local-list.alert-feed .pill.alert-feed-row{
  --hz-chip:#60a5fa;
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  min-height:32px !important;
  max-height:4.8em !important;
  padding:7px 34px 7px 14px !important;
  border-radius:10px !important;
  overflow:hidden !important;
  white-space:normal !important;
  overflow-wrap:anywhere !important;
  word-break:normal !important;
  text-overflow:clip !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 #pagasaLocalList.haz-local-list.alert-feed .pill.alert-feed-row.hz-warning{ --hz-chip:#ef4444 !important; }
html body #hazardsPanel #pagasaLocalList.haz-local-list.alert-feed .pill.alert-feed-row.hz-watch{ --hz-chip:#f59e0b !important; }
html body #hazardsPanel #pagasaLocalList.haz-local-list.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 #pagasaLocalList.haz-local-list.alert-feed .pill.alert-feed-row.hz-clear,
html body #hazardsPanel #pagasaLocalList.haz-local-list.alert-feed .pill.alert-feed-row.none{ --hz-chip:#22c55e !important; }

html body #hazardsPanel .pill.alert-feed-row.hz-local-priority::before{
  flex:0 0 auto !important;
  max-width:52px !important;
}

@media (max-width:760px){
  html body #hazardsPanel .haz-local-summary{
    white-space:normal !important;
    display:-webkit-box !important;
    -webkit-line-clamp:2 !important;
    -webkit-box-orient:vertical !important;
  }
  html body #hazardsPanel #pagasaLocalList.haz-local-list.alert-feed,
  html body #hazardsPanel .haz-local-list.alert-feed{
    max-height:none !important;
    overflow:visible !important;
  }
  html body #hazardsPanel #pagasaLocalList.haz-local-list.alert-feed .pill.alert-feed-row,
  html body #hazardsPanel .haz-local-list.alert-feed .pill.alert-feed-row{
    padding-right:14px !important;
  }
}

html body #outdoorReadingsRibbon .outdoor-nowcast-strip{
  position:relative !important;
  z-index:2 !important;
  grid-column:1 / -1 !important;
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  min-width:0 !important;
  margin:1px auto 0 !important;
}
html body #outdoorReadingsRibbon .nowcast-signal{
  display:inline-flex !important;
  align-items:center !important;
  gap:3px !important;
  min-width:0 !important;
  max-width:100% !important;
  padding:2px 6px !important;
  font-size:.63rem !important;
  line-height:1 !important;
  font-weight:850 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
html body #outdoorReadingsRibbon .nowcast-signal b{
  font-weight:950 !important;
  color:#ffffff !important;
}
html body #outdoorReadingsRibbon .nowcast-signal--ok{ border-color:rgba(34,197,94,.34) !important; box-shadow:0 0 7px 1px rgba(34,197,94,.10), inset 0 0 0 1px rgba(255,255,255,.035) !important; }
html body #outdoorReadingsRibbon .nowcast-signal--info{ border-color:rgba(56,189,248,.34) !important; box-shadow:0 0 7px 1px rgba(56,189,248,.10), inset 0 0 0 1px rgba(255,255,255,.035) !important; }
html body #outdoorReadingsRibbon .nowcast-signal--watch{ border-color:rgba(250,204,21,.38) !important; box-shadow:0 0 7px 1px rgba(250,204,21,.11), inset 0 0 0 1px rgba(255,255,255,.035) !important; }
html body #outdoorReadingsRibbon .nowcast-signal--warning,
html body #outdoorReadingsRibbon .nowcast-signal--danger{ border-color:rgba(248,113,113,.42) !important; box-shadow:0 0 8px 2px rgba(248,113,113,.13), inset 0 0 0 1px rgba(255,255,255,.035) !important; }
html body #outdoorReadingsRibbon .nowcast-signal--unknown,
html body #outdoorReadingsRibbon .nowcast-signal--loading{ border-color:rgba(148,163,184,.25) !important; color:#cbd5e1 !important; }

@media (max-width:760px){
  html body #outdoorReadingsRibbon .outdoor-nowcast-strip{ overflow-x:auto !important; flex-wrap:nowrap !important; scrollbar-width:thin; }
  html body #outdoorReadingsRibbon .nowcast-signal{ flex:0 0 auto !important; max-width:170px !important; font-size:.61rem !important; }
}

html body #metarPanel .taf-section{
  
  padding-top:8px !important;
  border-top:1px solid rgba(125,211,252,.14) !important;
  min-width:0 !important;
  max-width:100% !important;
  overflow:hidden !important;
}
html body #metarPanel .taf-section-head{
  margin:0 0 6px !important;
  padding:4px 6px !important;
  border-radius:10px !important;
  border:1px solid rgba(125,211,252,.18) !important;
  background:linear-gradient(180deg, rgba(125,211,252,.070), rgba(255,255,255,.018)), rgba(0,0,0,.16) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.035) !important;
}
html body #metarPanel .taf-section-title{
  color:#e6fbff !important;
  font-size:.86rem !important;
  line-height:1.05 !important;
  font-weight:950 !important;
  letter-spacing:.2px !important;
}
html body #metarPanel .taf-target-summary{ margin-bottom:6px !important; }
html body #metarPanel .taf-strip{
  position:relative !important;
  display:flex !important;
  flex-wrap:nowrap !important;
  gap:8px !important;
  align-items:stretch !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  padding:6px 7px 8px !important;
  border-radius:13px !important;
  border:1px solid var(--wx-data-card-border) !important;
  background:var(--wx-data-card-bg) !important;
  scrollbar-width:thin !important;
  box-shadow:inset 0 0 30px 10px rgba(34,197,94,.08), 0 6px 14px rgba(0,0,0,.14) !important;
  min-width:0 !important;
  max-width:100% !important;
}
html body #metarPanel .taf-strip::-webkit-scrollbar{ height:8px !important; }
html body #metarPanel .taf-strip::-webkit-scrollbar-track{ background:rgba(255,255,255,.06) !important; border-radius:10px !important; }
html body #metarPanel .taf-strip::-webkit-scrollbar-thumb{ background:rgba(74,222,128,.25) !important; border-radius:10px !important; }
html body #metarPanel .taf-card{ border-color:rgba(74,222,128,.18) !important; }
html body #metarPanel .taf-card.is-target{ border-color:rgba(74,222,128,.34) !important; box-shadow:0 5px 12px rgba(0,0,0,.18), 0 0 13px 4px rgba(34,197,94,.14), inset 0 0 0 1px rgba(255,255,255,.055) !important; }
html body #metarPanel .taf-raw-details{ border-color:rgba(74,222,128,.16) !important; }
html body #tafStatusPill[data-state="live"]{ color:#bbf7d0 !important; }
html body #tafStatusPill[data-state="error"]{ color:#fecaca !important; }

html body #hazardsPanel > .ribbon-title,
html body #quakesPanel > .ribbon-title,
html body #metarPanel > .ribbon-title{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex-wrap:wrap !important;
  gap:5px 8px !important;
  min-height:32px !important;
  padding:5px 8px !important;
  border-radius:12px !important;
  border:1px solid rgba(125,211,252,.16) !important;
  background:linear-gradient(180deg, rgba(255,255,255,.050), rgba(255,255,255,.014)), rgba(7,17,28,.38) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.035), 0 0 11px rgba(56,189,248,.075) !important;
  overflow:hidden !important;
}
html body #hazardsPanel > .ribbon-title .title-text,
html body #quakesPanel > .ribbon-title .title-text,
html body #metarPanel > .ribbon-title .title-text{
  color:#e6fbff !important;
  font-size:.98rem !important;
  line-height:1.05 !important;
  font-weight:950 !important;
  letter-spacing:.2px !important;
  min-width:0 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
html body #hazardsPanel > .ribbon-title .glass-ico,
html body #quakesPanel > .ribbon-title .glass-ico,
html body #metarPanel > .ribbon-title .glass-ico{
  width:23px !important;
  height:23px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex:0 0 auto !important;
}

html body #status[data-tone="green"]{
  color:#dcfce7 !important;
  border-color:rgba(34,197,94,.38) !important;
  background:radial-gradient(circle at 22% 20%, rgba(255,255,255,.20), transparent 34%), linear-gradient(135deg, rgba(34,197,94,.30), rgba(20,184,166,.16) 55%, rgba(14,165,233,.10)), rgba(6,78,59,.40) !important;
  box-shadow:var(--nav-pill-shadow), 0 0 16px rgba(74,222,128,.16) !important;
}
html body #status[data-tone="yellow"]{
  color:#fef3c7 !important;
  border-color:rgba(250,204,21,.44) !important;
  background:radial-gradient(circle at 22% 20%, rgba(255,255,255,.20), transparent 34%), linear-gradient(135deg, rgba(250,204,21,.30), rgba(245,158,11,.16) 55%, rgba(56,189,248,.08)), rgba(80,54,10,.40) !important;
  box-shadow:var(--nav-pill-shadow), 0 0 16px rgba(250,204,21,.16) !important;
}
html body #status[data-tone="red"]{
  color:#fee2e2 !important;
  border-color:rgba(248,113,113,.46) !important;
  background:radial-gradient(circle at 22% 20%, rgba(255,255,255,.18), transparent 34%), linear-gradient(135deg, rgba(239,68,68,.30), rgba(190,18,60,.16) 55%, rgba(56,189,248,.08)), rgba(76,5,25,.42) !important;
  box-shadow:var(--nav-pill-shadow), 0 0 18px rgba(248,113,113,.18) !important;
}
html body #status[data-tone="green"] .status-dot,
html body #status[data-tone="green"]::before{ background:#22e879 !important; color:#22e879 !important; box-shadow:0 0 8px rgba(34,232,121,.70) !important; }
html body #status[data-tone="yellow"] .status-dot,
html body #status[data-tone="yellow"]::before{ background:#facc15 !important; color:#facc15 !important; box-shadow:0 0 8px rgba(250,204,21,.72) !important; }
html body #status[data-tone="red"] .status-dot,
html body #status[data-tone="red"]::before{ background:#f87171 !important; color:#f87171 !important; box-shadow:0 0 8px rgba(248,113,113,.72) !important; }

@media (max-width:760px){
  html body #metarPanel .taf-card{ flex-basis:clamp(235px, 82vw, 340px) !important; min-width:clamp(235px, 82vw, 340px) !important; }
  html body #hazardsPanel > .ribbon-title .title-text,
  html body #quakesPanel > .ribbon-title .title-text,
  html body #metarPanel > .ribbon-title .title-text{ font-size:.90rem !important; }
}

html body #hazardsPanel > h2.ribbon-title,
html body #quakesPanel > h2.ribbon-title,
html body #metarPanel > h2.ribbon-title{
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex-wrap:nowrap !important;
  gap:7px !important;
  min-height:34px !important;
  padding:5px 9px !important;
  margin:0 0 8px !important;
  border-radius:13px !important;
  border:1px solid rgba(125,211,252,.18) !important;
  background:
    radial-gradient(circle at 10% 18%, rgba(255,255,255,.11), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.014)),
    rgba(7,17,28,.42) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.035),
    0 0 13px rgba(56,189,248,.08) !important;
  overflow:hidden !important;
}
html body #hazardsPanel > h2.ribbon-title .title-text,
html body #quakesPanel > h2.ribbon-title .title-text,
html body #metarPanel > h2.ribbon-title .title-text{
  flex:0 1 auto !important;
  min-width:0 !important;
  max-width:calc(100% - 92px) !important;
  color:#e6fbff !important;
  font-size:.98rem !important;
  line-height:1.05 !important;
  font-weight:950 !important;
  letter-spacing:.18px !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  text-align:center !important;
}
html body #hazardsPanel > h2.ribbon-title .pill,
html body #quakesPanel > h2.ribbon-title .pill,
html body #metarPanel > h2.ribbon-title .pill{
  flex:0 0 auto !important;
  margin-left:2px !important;
}
html body #hazardsPanel > h2.ribbon-title .glass-ico,
html body #quakesPanel > h2.ribbon-title .glass-ico,
html body #metarPanel > h2.ribbon-title .glass-ico{
  flex:0 0 23px !important;
  width:23px !important;
  height:23px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}

html body .status-bar .status-right #status.pill[data-tone="green"],
html body .status-bar .status-right #status.pill.is-live[data-tone="green"],
html body .status-bar .status-right #status.pill[data-state="live"][data-tone="green"]{
  color:#dcfce7 !important;
  border-color:rgba(34,197,94,.50) !important;
  background:
    radial-gradient(circle at 22% 20%, rgba(255,255,255,.22), transparent 34%),
    linear-gradient(135deg, rgba(34,197,94,.34), rgba(20,184,166,.18) 55%, rgba(14,165,233,.10)),
    rgba(6,78,59,.48) !important;
  box-shadow:var(--nav-pill-shadow), 0 0 18px rgba(74,222,128,.22) !important;
}
html body .status-bar .status-right #status.pill[data-tone="yellow"],
html body .status-bar .status-right #status.pill.is-live[data-tone="yellow"],
html body .status-bar .status-right #status.pill[data-state="live"][data-tone="yellow"]{
  color:#fef3c7 !important;
  border-color:rgba(250,204,21,.58) !important;
  background:
    radial-gradient(circle at 22% 20%, rgba(255,255,255,.20), transparent 34%),
    linear-gradient(135deg, rgba(250,204,21,.36), rgba(245,158,11,.19) 55%, rgba(56,189,248,.08)),
    rgba(80,54,10,.48) !important;
  box-shadow:var(--nav-pill-shadow), 0 0 18px rgba(250,204,21,.22) !important;
}
html body .status-bar .status-right #status.pill[data-tone="red"],
html body .status-bar .status-right #status.pill.is-live[data-tone="red"],
html body .status-bar .status-right #status.pill[data-state="live"][data-tone="red"]{
  color:#fee2e2 !important;
  border-color:rgba(248,113,113,.62) !important;
  background:
    radial-gradient(circle at 22% 20%, rgba(255,255,255,.18), transparent 34%),
    linear-gradient(135deg, rgba(239,68,68,.38), rgba(190,18,60,.20) 55%, rgba(56,189,248,.08)),
    rgba(76,5,25,.52) !important;
  box-shadow:var(--nav-pill-shadow), 0 0 20px rgba(248,113,113,.24) !important;
}
html body .status-bar .status-right #status.pill[data-tone="green"] .status-dot,
html body .status-bar .status-right #status.pill[data-tone="green"]::before{
  background:#22e879 !important;
  color:#22e879 !important;
  box-shadow:0 0 9px rgba(34,232,121,.78) !important;
}
html body .status-bar .status-right #status.pill[data-tone="yellow"] .status-dot,
html body .status-bar .status-right #status.pill[data-tone="yellow"]::before{
  background:#facc15 !important;
  color:#facc15 !important;
  box-shadow:0 0 9px rgba(250,204,21,.78) !important;
}
html body .status-bar .status-right #status.pill[data-tone="red"] .status-dot,
html body .status-bar .status-right #status.pill[data-tone="red"]::before{
  background:#f87171 !important;
  color:#f87171 !important;
  box-shadow:0 0 9px rgba(248,113,113,.80) !important;
}
html body .status-bar .status-right #status.pill[data-tone="yellow"] .nav-status-label,
html body .status-bar .status-right #status.pill[data-tone="red"] .nav-status-label,
html body .status-bar .status-right #status.pill[data-tone="green"] .nav-status-label{
  color:inherit !important;
  font-weight:900 !important;
}

@media (max-width:760px){
  
}

html body .status-bar .status-right #status.pill,
html body .status-bar .status-right #status.pill[data-tone],
html body .status-bar .status-right #status.pill.is-live[data-tone],
html body .status-bar .status-right #status.pill[data-state="live"][data-tone]{
  
  color:#dff8ff !important;
  border-color:rgba(125,211,252,.22) !important;
  background:
    radial-gradient(circle at 20% 18%, rgba(255,255,255,.18), transparent 34%),
    linear-gradient(135deg, rgba(34,211,238,.16), rgba(14,165,233,.08) 55%, rgba(15,23,42,.38)),
    rgba(7,17,28,.42) !important;
  box-shadow:var(--nav-pill-shadow), 0 0 12px rgba(56,189,248,.11) !important;
}
html body .status-bar .status-right #status.pill .status-dot,
html body .status-bar .status-right #status.pill[data-tone] .status-dot,
html body .status-bar .status-right #status.pill[data-tone]::before{
  background:#22e879 !important;
  color:#22e879 !important;
  box-shadow:0 0 8px rgba(34,232,121,.66) !important;
}

html body .status-bar .status-right #hazDupPill.pill[data-tone="green"],
html body .status-bar .status-right #hazDupPill.pill.haz-summary-clear{
  color:#dcfce7 !important;
  border-color:rgba(34,197,94,.52) !important;
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.22), transparent 34%),
    linear-gradient(135deg, rgba(34,197,94,.36), rgba(20,184,166,.16) 55%, rgba(14,165,233,.08)),
    rgba(6,78,59,.50) !important;
  box-shadow:var(--nav-pill-shadow), 0 0 18px rgba(74,222,128,.22) !important;
}
html body .status-bar .status-right #hazDupPill.pill[data-tone="yellow"],
html body .status-bar .status-right #hazDupPill.pill.haz-summary-advisory,
html body .status-bar .status-right #hazDupPill.pill.haz-summary-watch,
html body .status-bar .status-right #hazDupPill.pill.haz-summary-active{
  color:#fef3c7 !important;
  border-color:rgba(250,204,21,.58) !important;
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.20), transparent 34%),
    linear-gradient(135deg, rgba(250,204,21,.38), rgba(245,158,11,.18) 55%, rgba(56,189,248,.08)),
    rgba(80,54,10,.50) !important;
  box-shadow:var(--nav-pill-shadow), 0 0 18px rgba(250,204,21,.22) !important;
}
html body .status-bar .status-right #hazDupPill.pill[data-tone="red"],
html body .status-bar .status-right #hazDupPill.pill.haz-summary-warning,
html body .status-bar .status-right #hazDupPill.pill.haz-summary-severe{
  color:#fee2e2 !important;
  border-color:rgba(248,113,113,.64) !important;
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.18), transparent 34%),
    linear-gradient(135deg, rgba(239,68,68,.40), rgba(190,18,60,.20) 55%, rgba(56,189,248,.08)),
    rgba(76,5,25,.54) !important;
  box-shadow:var(--nav-pill-shadow), 0 0 20px rgba(248,113,113,.25) !important;
}
html body .status-bar .status-right #hazDupPill.pill[data-tone="green"]::before,
html body .status-bar .status-right #hazDupPill.pill.haz-summary-clear::before{
  background:#22e879 !important;
  color:#22e879 !important;
  box-shadow:0 0 9px rgba(34,232,121,.78) !important;
}
html body .status-bar .status-right #hazDupPill.pill[data-tone="yellow"]::before,
html body .status-bar .status-right #hazDupPill.pill.haz-summary-advisory::before,
html body .status-bar .status-right #hazDupPill.pill.haz-summary-watch::before,
html body .status-bar .status-right #hazDupPill.pill.haz-summary-active::before{
  background:#facc15 !important;
  color:#facc15 !important;
  box-shadow:0 0 9px rgba(250,204,21,.78) !important;
}
html body .status-bar .status-right #hazDupPill.pill[data-tone="red"]::before,
html body .status-bar .status-right #hazDupPill.pill.haz-summary-warning::before,
html body .status-bar .status-right #hazDupPill.pill.haz-summary-severe::before{
  background:#f87171 !important;
  color:#f87171 !important;
  box-shadow:0 0 9px rgba(248,113,113,.80) !important;
}

html body .status-bar .status-right #hazDupPill.pill.haz-summary-clear,
html body .status-bar .status-right #hazDupPill.pill.haz-summary-clear[data-tone],
html body .status-bar .status-right #hazDupPill.pill.haz-summary-clear[data-tone="red"],
html body .status-bar .status-right #hazDupPill.pill.haz-summary-clear[data-tone="yellow"]{
  color:#dcfce7 !important;
  border-color:rgba(34,197,94,.52) !important;
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.22), transparent 34%),
    linear-gradient(135deg, rgba(34,197,94,.36), rgba(20,184,166,.16) 55%, rgba(14,165,233,.08)),
    rgba(6,78,59,.50) !important;
  box-shadow:var(--nav-pill-shadow), 0 0 18px rgba(74,222,128,.22) !important;
}
html body .status-bar .status-right #hazDupPill.pill.haz-summary-clear::before,
html body .status-bar .status-right #hazDupPill.pill.haz-summary-clear[data-tone]::before,
html body .status-bar .status-right #hazDupPill.pill.haz-summary-clear[data-tone="red"]::before,
html body .status-bar .status-right #hazDupPill.pill.haz-summary-clear[data-tone="yellow"]::before{
  background:#22e879 !important;
  color:#22e879 !important;
  box-shadow:0 0 9px rgba(34,232,121,.78) !important;
}
html body #hazardsPanel .haz-local-status--degraded{
  color:#fef3c7 !important;
  border-color:rgba(250,204,21,.58) !important;
  background:rgba(113,63,18,.25) !important;
}
html body #hazardsPanel .haz-local-status--error{
  color:#fee2e2 !important;
  border-color:rgba(248,113,113,.62) !important;
  background:rgba(127,29,29,.30) !important;
}

html body #forecast7Panel .forecast-intel-strip{
  width:100%;
  margin:7px 0 0;
  
  border-radius:14px;
  
  
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.035), 0 0 10px rgba(14,165,233,.08);
  display:flex;
  
  justify-content:space-between;
  
  min-width:0;
  overflow:hidden;
}
html body #forecast7Panel .forecast-intel-head{
  display:flex;
  align-items:center;
  gap:7px;
  min-width:0;
  flex:1 1 260px;
}
html body #forecast7Panel .forecast-intel-title{
  flex:0 0 auto;
  font-size:.70rem;
  line-height:1;
  font-weight:850;
  letter-spacing:.055em;
  text-transform:uppercase;
  color:#dbeafe;
  text-shadow:0 0 8px rgba(96,165,250,.18);
}
html body #forecast7Panel .forecast-intel-note{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:.68rem;
  line-height:1.15;
  color:#a7c7e7;
}

html body #forecast7Panel .forecast-intel-chip{
  
  
  
  
  
  
  
  
  
  
  
  font-size:.66rem;
  line-height:1;
  
  overflow:hidden;
  text-overflow:ellipsis;
  
}
html body #forecast7Panel .forecast-intel-chip b{
  color:#f8fafc;
  font-weight:850;
}
html body #forecast7Panel .forecast-intel-chip em{
  font-style:normal;
  font-size:.58rem;
  color:#b6c9dd;
  opacity:.88;
}
html body #forecast7Panel .forecast-intel-chip--ok{ border-color:rgba(34,197,94,.34); box-shadow:0 0 7px rgba(34,197,94,.10), inset 0 0 0 1px rgba(255,255,255,.03); }
html body #forecast7Panel .forecast-intel-chip--info{ border-color:rgba(56,189,248,.34); box-shadow:0 0 7px rgba(56,189,248,.10), inset 0 0 0 1px rgba(255,255,255,.03); }
html body #forecast7Panel .forecast-intel-chip--watch{ border-color:rgba(250,204,21,.36); box-shadow:0 0 7px rgba(250,204,21,.10), inset 0 0 0 1px rgba(255,255,255,.03); }
html body #forecast7Panel .forecast-intel-chip--warning,
html body #forecast7Panel .forecast-intel-chip--danger{ border-color:rgba(248,113,113,.38); box-shadow:0 0 8px rgba(248,113,113,.11), inset 0 0 0 1px rgba(255,255,255,.03); }
html body #forecast7Panel .forecast-intel-chip--unknown,
html body #forecast7Panel .forecast-intel-chip--loading,
html body #forecast7Panel .forecast-intel-chip--error{ border-color:rgba(148,163,184,.25);  }
@media (max-width: 760px){
  html body #forecast7Panel .forecast-intel-strip{
    align-items:stretch;
    flex-direction:column;
    padding:7px;
    gap:6px;
  }
  html body #forecast7Panel .forecast-intel-head{
    flex-wrap:wrap;
    flex-basis:auto;
    gap:5px;
  }
  html body #forecast7Panel .forecast-intel-note{
    white-space:normal;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
  }
  html body #forecast7Panel .forecast-intel-items{
    justify-content:flex-start;
  }
  html body #forecast7Panel .forecast-intel-chip{
    max-width:150px;
    font-size:.62rem;
  }
}

html body #forecast7Panel > h2.ribbon-title{
  display:flex !important;
  grid-template-columns:none !important;
  align-items:center !important;
  justify-content:center !important;
  justify-items:center !important;
  flex-wrap:nowrap !important;
  gap:6px 8px !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  padding:0 10px !important;
  margin:0 auto 8px !important;
  overflow:hidden !important;
  text-align:center !important;
}
html body #forecast7Panel > h2.ribbon-title .title-ico{
  grid-column:auto !important;
  justify-self:auto !important;
  flex:0 0 auto !important;
  width:22px !important;
  min-width:22px !important;
  max-width:22px !important;
  margin:0 !important;
}
html body #forecast7Panel > h2.ribbon-title .title-text{
  grid-column:auto !important;
  justify-self:auto !important;
  flex:0 1 auto !important;
  min-width:0 !important;
  max-width:min(58ch, calc(100% - 128px)) !important;
  text-align:center !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
html body #forecast7Panel > h2.ribbon-title #fc7StatusPill{
  grid-column:auto !important;
  justify-self:auto !important;
  flex:0 0 auto !important;
  width:auto !important;
  min-width:max-content !important;
  max-width:min(18ch, 34vw) !important;
  margin-left:2px !important;
  align-self:center !important;
}

html body #metarPanel .taf-section-head{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex-wrap:nowrap !important;
  gap:6px 8px !important;
  text-align:center !important;
  min-width:0 !important;
  overflow:hidden !important;
}
html body #metarPanel .taf-section-title{
  flex:0 1 auto !important;
  min-width:0 !important;
  max-width:min(54ch, calc(100% - 170px)) !important;
  text-align:center !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
html body #metarPanel #tafStatusPill{
  flex:0 0 auto !important;
  width:auto !important;
  min-width:max-content !important;
  max-width:min(31ch, 46vw) !important;
  margin-left:2px !important;
  justify-content:center !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

@media (max-width:760px){
  html body #forecast7Panel > h2.ribbon-title,
  html body #metarPanel .taf-section-head{
    flex-wrap:wrap !important;
    row-gap:5px !important;
    padding-inline:6px !important;
  }
  html body #forecast7Panel > h2.ribbon-title .title-text,
  html body #metarPanel .taf-section-title{
    max-width:calc(100% - 40px) !important;
    font-size:.88rem !important;
  }
  html body #forecast7Panel > h2.ribbon-title #fc7StatusPill,
  html body #metarPanel #tafStatusPill{
    max-width:100% !important;
    font-size:.66rem !important;
  }
}

:root{
  --wx-polish-sheen: rgba(255,255,255,.045);
  --wx-polish-ink: rgba(226,232,240,.94);
  --wx-polish-line: rgba(148,163,184,.22);
  --wx-polish-glass-a: rgba(15,23,42,.36);
  --wx-polish-glass-b: rgba(2,6,23,.20);
  --wx-polish-row-border: rgba(125,211,252,.18);
  --wx-polish-row-label: rgba(15,23,42,.46);
  --wx-polish-row-value: rgba(15,23,42,.30);
}

html body #barometerCard{
  background:
    radial-gradient(circle at 25% 50%, rgba(56,189,248,.15), transparent 31%),
    linear-gradient(180deg, rgba(14,165,233,.13), rgba(8,145,178,.045)),
    rgba(15,23,42,.52) !important;
  
}

html body #solarComboCard{
  background:
    radial-gradient(circle at 30% 52%, rgba(168,85,247,.090), transparent 30%),
    radial-gradient(circle at 76% 52%, rgba(250,204,21,.095), transparent 32%),
    linear-gradient(180deg, rgba(148,163,184,.12), rgba(15,23,42,.055)),
    rgba(15,23,42,.52) !important;
  
}

html body #solarComboCard .tube-card.uv,
html body #solarComboCard .tube-card.solar{
  position:relative !important;
  border-radius:15px !important;
  background:
    linear-gradient(180deg, rgba(30,41,59,.32), rgba(2,6,23,.18)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.022) 0 1px, transparent 1px 18px) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.035),
    inset 0 12px 26px rgba(2,6,23,.12),
    0 8px 22px rgba(0,0,0,.14) !important;
}

html body #solarComboCard .tube-card.uv::before,
html body #solarComboCard .tube-card.solar::before{
  content:"" !important;
  position:absolute !important;
  inset:26px 12px 28px 12px !important;
  z-index:0 !important;
  pointer-events:none !important;
  border-radius:999px !important;
  background:radial-gradient(ellipse at center, rgba(255,255,255,.06), transparent 68%) !important;
  filter:blur(4px) !important;
  opacity:.75 !important;
}

html body #solarComboCard .tube-card.uv > *,
html body #solarComboCard .tube-card.solar > *{
  position:relative !important;
  z-index:1 !important;
}

html body #solarComboCard .tube-card.uv .tube-title,
html body #solarComboCard .tube-card.solar .tube-title,
html body #solarComboCard .tube-card.uv .tube-value,
html body #solarComboCard .tube-card.solar .tube-value{
  background:
    linear-gradient(180deg, rgba(30,41,59,.46), rgba(15,23,42,.32)) !important;
  border-color:rgba(125,211,252,.16) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045) !important;
}

html body #solarComboCard .tube-card.uv .tube{
  filter:drop-shadow(0 0 8px rgba(168,85,247,.18)) drop-shadow(0 4px 8px rgba(0,0,0,.25)) !important;
}
html body #solarComboCard .tube-card.solar .tube{
  filter:drop-shadow(0 0 8px rgba(250,204,21,.16)) drop-shadow(0 4px 8px rgba(0,0,0,.25)) !important;
}

html body #outdoorReadingsRibbon,
html body #outdoorRibbon,
html body #rainRibbon{
  position:relative !important;
  overflow:hidden !important;
  border-width:1px !important;
  background:
    radial-gradient(circle at 18% 10%, rgba(125,211,252,.12), transparent 30%),
    radial-gradient(circle at 88% 88%, rgba(45,212,191,.08), transparent 34%),
    linear-gradient(180deg, rgba(15,23,42,.40), rgba(2,6,23,.18)) !important;
  box-shadow:
    0 16px 34px rgba(0,0,0,.20),
    inset 0 0 0 1px rgba(255,255,255,.035),
    inset 0 18px 40px rgba(255,255,255,.018) !important;
}

html body #outdoorReadingsRibbon::before,
html body #outdoorRibbon::before,
html body #rainRibbon::before{
  content:"" !important;
  position:absolute !important;
  inset:8px !important;
  z-index:0 !important;
  pointer-events:none !important;
  border-radius:14px !important;
  
  
  
}

html body #outdoorReadingsRibbon{ --panel-accent:rgba(56,189,248,.24); --panel-warm:rgba(248,113,113,.18); }
html body #outdoorRibbon{ --panel-accent:rgba(45,212,191,.20); --panel-warm:rgba(125,211,252,.16); }
html body #rainRibbon{ --panel-accent:rgba(56,189,248,.24); --panel-warm:rgba(45,212,191,.16); }

html body #outdoorReadingsRibbon > .ribbon-title,
html body #outdoorRibbon > .ribbon-title,
html body #rainRibbon > .ribbon-title{
  justify-self:center !important;
  width:max-content !important;
  max-width:calc(100% - 10px) !important;
  padding:4px 10px !important;
  border-radius:10px !important;
  border:1px solid rgba(125,211,252,.22) !important;
  background:linear-gradient(180deg, rgba(30,41,59,.50), rgba(15,23,42,.34)) !important;
  
  letter-spacing:.012em !important;
  line-height:1 !important;
}

html body #outdoorReadingsRibbon > .ribbon-title .title-text,
html body #outdoorRibbon > .ribbon-title .title-text,
html body #rainRibbon > .ribbon-title .title-text{
  color:rgba(226,232,240,.98) !important;
  -webkit-text-fill-color:unset !important;
  text-shadow:0 0 10px rgba(125,211,252,.16), 0 1px 3px rgba(0,0,0,.36) !important;
}

html body #outdoorReadingsRibbon .ribbon-body-card,
html body #outdoorRibbon .ribbon-body-card,
html body #rainRibbon .ribbon-body-card{
  position:relative !important;
  border-radius:15px !important;
  border:1px solid rgba(125,211,252,.15) !important;
  background:
    radial-gradient(circle at 28% 26%, var(--panel-accent), transparent 34%),
    radial-gradient(circle at 76% 80%, var(--panel-warm), transparent 38%),
    linear-gradient(180deg, rgba(15,23,42,.36), rgba(2,6,23,.22)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.035),
    inset 0 16px 34px rgba(2,6,23,.16),
    0 9px 22px rgba(0,0,0,.16) !important;
  overflow:hidden !important;
}

html body #outdoorReadingsRibbon .ribbon-body-card::before,
html body #outdoorRibbon .ribbon-body-card::before,
html body #rainRibbon .ribbon-body-card::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  pointer-events:none !important;
  background:
    linear-gradient(90deg, transparent 0 49.8%, rgba(125,211,252,.06) 50%, transparent 50.2% 100%),
    linear-gradient(180deg, rgba(255,255,255,.025), transparent 36%, rgba(0,0,0,.10)) !important;
  opacity:.86 !important;
}

html body #outdoorReadingsRibbon .ribbon-body-card > *,
html body #outdoorRibbon .ribbon-body-card > *,
html body #rainRibbon .ribbon-body-card > *{
  position:relative !important;
  z-index:1 !important;
}

html body #outdoorReadingsRibbon .ribbon-item,
html body #outdoorRibbon .ribbon-item,
html body #rainRibbon .ribbon-item{
  border-radius:11px !important;
}

html body #outdoorReadingsRibbon .ribbon-item .ribbon-label,
html body #outdoorRibbon .ribbon-item .ribbon-label,
html body #rainRibbon .ribbon-item .ribbon-label{
  border-radius:9px !important;
  border:1px solid rgba(125,211,252,.18) !important;
  background:linear-gradient(180deg, rgba(30,41,59,.58), rgba(15,23,42,.42)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055), 0 1px 3px rgba(0,0,0,.18) !important;
  color:rgba(226,232,240,.96) !important;
}

html body #outdoorReadingsRibbon .ribbon-item .ribbon-value,
html body #outdoorRibbon .ribbon-item .ribbon-value,
html body #rainRibbon .ribbon-item .ribbon-value{
  border-radius:9px !important;
  border:1px solid rgba(125,211,252,.16) !important;
  background:linear-gradient(180deg, rgba(30,41,59,.34), rgba(2,6,23,.24)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    inset 0 -10px 18px rgba(2,6,23,.10),
    0 1px 3px rgba(0,0,0,.18) !important;
}

html body #outdoorReadingsRibbon .ribbon-item .spark,
html body #outdoorRibbon .ribbon-item .spark{
  border-radius:12px !important;
  border:1px solid rgba(125,211,252,.16) !important;
  background:
    radial-gradient(circle at 92% 18%, rgba(255,255,255,.080), transparent 28%),
    linear-gradient(180deg, rgba(30,41,59,.34), rgba(2,6,23,.20)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -12px 22px rgba(2,6,23,.18),
    0 6px 14px rgba(0,0,0,.18) !important;
}

html body #outdoorReadingsRibbon .spark rect.bg,
html body #outdoorRibbon .spark rect.bg{
  fill:rgba(15,23,42,.22) !important;
  stroke:rgba(125,211,252,.12) !important;
}

html body #outdoorReadingsRibbon .spark .grid line.minor,
html body #outdoorRibbon .spark .grid line.minor{
  stroke:rgba(148,163,184,.13) !important;
}

html body #outdoorReadingsRibbon .spark .grid line.major,
html body #outdoorRibbon .spark .grid line.major{
  stroke:rgba(125,211,252,.16) !important;
}

html body #spark-out-temp path.line{ filter:drop-shadow(0 0 5px rgba(248,113,113,.30)) !important; }
html body #spark-out-hum path.line{ filter:drop-shadow(0 0 5px rgba(245,158,11,.28)) !important; }
html body #spark-dew path.line{ filter:drop-shadow(0 0 5px rgba(250,204,21,.24)) !important; }
html body #spark-feels path.line{ filter:drop-shadow(0 0 5px rgba(56,189,248,.28)) !important; }

html body #outdoorReadingsRibbon .outdoor-nowcast-strip{
  border-radius:11px !important;
  border:1px solid rgba(125,211,252,.13) !important;
  background:
    linear-gradient(180deg, rgba(30,41,59,.28), rgba(2,6,23,.18)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045), 0 4px 12px rgba(0,0,0,.12) !important;
  padding:4px 6px !important;
  gap:5px !important;
}

html body #outdoorReadingsRibbon .nowcast-signal{
  border-radius:999px !important;
  border:1px solid rgba(125,211,252,.15) !important;
  background:linear-gradient(180deg, rgba(30,41,59,.44), rgba(15,23,42,.30)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045) !important;
  color:rgba(226,232,240,.96) !important;
}

html body #rainRibbon.rain-has-intensity .ribbon-item:first-of-type .ribbon-label,
html body #rainRibbon.rain-has-intensity .ribbon-item:nth-of-type(2) .ribbon-label,
html body #rainRibbon.rain-has-intensity .ribbon-item:first-of-type .ribbon-value,
html body #rainRibbon.rain-has-intensity .ribbon-item:nth-of-type(2) .ribbon-value{
  border-color:rgba(56,189,248,.22) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055), 0 0 12px rgba(56,189,248,.055) !important;
}

html body #rainRibbon.rain-has-intensity .tube-card.rain{
  position:relative !important;
  border-radius:14px !important;
  border:1px solid rgba(56,189,248,.36) !important;
  background:
    radial-gradient(circle at 50% 24%, rgba(56,189,248,.20), transparent 44%),
    linear-gradient(180deg, rgba(30,41,59,.34), rgba(2,6,23,.20)) !important;
  box-shadow:
    0 0 16px 4px rgba(56,189,248,.12),
    inset 0 0 0 1px rgba(255,255,255,.04),
    inset 0 0 26px rgba(56,189,248,.12) !important;
}

html body #rainRibbon.rain-has-intensity .tube-card.rain::before{
  content:"" !important;
  position:absolute !important;
  inset:24px 10px 24px !important;
  z-index:0 !important;
  pointer-events:none !important;
  border-radius:999px !important;
  background:radial-gradient(ellipse at center, rgba(125,211,252,.14), transparent 70%) !important;
  filter:blur(5px) !important;
  opacity:.82 !important;
}

html body #rainRibbon.rain-has-intensity .tube-card.rain > *{
  position:relative !important;
  z-index:1 !important;
}

html body #rainRibbon.rain-has-intensity .tube-card.rain .tube-title,
html body #rainRibbon.rain-has-intensity .tube-card.rain .tube-value{
  background:linear-gradient(180deg, rgba(30,41,59,.48), rgba(15,23,42,.32)) !important;
  border-color:rgba(125,211,252,.18) !important;
  color:rgba(226,232,240,.98) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045) !important;
}

html body #rainRibbon.rain-has-intensity .tube-card.rain .tube{
  border-color:rgba(125,211,252,.30) !important;
  box-shadow:
    inset 0 0 10px rgba(255,255,255,.09),
    inset 0 -12px 22px rgba(2,6,23,.26),
    0 0 14px rgba(56,189,248,.16) !important;
  filter:drop-shadow(0 0 8px rgba(56,189,248,.16)) drop-shadow(0 4px 8px rgba(0,0,0,.24)) !important;
}

@media (max-width:760px){
  html body #outdoorReadingsRibbon::before,
  html body #outdoorRibbon::before,
  html body #rainRibbon::before{
    inset:6px !important;
    opacity:.60 !important;
  }

  html body #outdoorReadingsRibbon .ribbon-body-card,
  html body #outdoorRibbon .ribbon-body-card,
  html body #rainRibbon .ribbon-body-card{
    border-radius:13px !important;
  }

  html body #outdoorReadingsRibbon .outdoor-nowcast-strip{
    align-items:center !important;
    justify-content:center !important;
  }
}