/* =========================================================
   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-gutter:stable !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;
  align-items:flex-start !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{
  margin-top:9px !important;
  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 #hazardsPanel > h2.ribbon-title .title-text,
  html body #quakesPanel > h2.ribbon-title .title-text,
  html body #metarPanel > h2.ribbon-title .title-text{
    font-size:.88rem !important;
    max-width:calc(100% - 82px) !important;
  }
}

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;
  padding:7px 8px;
  border-radius:14px;
  border:1px solid rgba(96,165,250,.22);
  background:linear-gradient(135deg, rgba(15,23,42,.46), rgba(14,165,233,.08));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.035), 0 0 10px rgba(14,165,233,.08);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  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-items{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:5px;
  min-width:0;
  flex:0 1 auto;
}
html body #forecast7Panel .forecast-intel-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  min-height:22px;
  max-width:172px;
  padding:4px 7px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.24);
  background:rgba(15,23,42,.35);
  color:#dbeafe;
  font-size:.66rem;
  line-height:1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025);
}
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); color:#cbd5e1; }
@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;
  box-shadow:
    var(--shadow-soft),
    0 0 24px rgba(56,189,248,.15),
    inset 0 0 42px rgba(14,165,233,.13),
    inset 0 1px 0 rgba(255,255,255,.055) !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;
  box-shadow:
    var(--shadow-soft),
    0 0 22px rgba(250,204,21,.10),
    inset 0 0 42px rgba(148,163,184,.09),
    inset 0 1px 0 rgba(255,255,255,.055) !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;
  background:
    linear-gradient(180deg, rgba(255,255,255,.030), rgba(255,255,255,.010)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 22px) !important;
  border:1px solid rgba(125,211,252,.075) !important;
  opacity:.78 !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;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.035) inset,
    0 4px 16px rgba(0,0,0,.18),
    0 0 18px rgba(125,211,252,.10) !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;
  }
}