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

/* Guimbal WWW Sync R1 public display helpers */
.public-reduce-motion .bubble{ transition:none !important; animation:none !important; }
.public-reduce-motion .bg-layer{ transition:none !important; }


html body .header-brand-live[aria-label="Guimbal WX Local Weather"] .header-brand-text{
  align-items:flex-start !important;
  gap:.18em !important;
}
html body .header-brand-live[aria-label="Guimbal WX Local Weather"] .header-brand-main{
  display:inline-flex !important;
  align-items:baseline !important;
  gap:.28em !important;
}
html body .header-brand-live[aria-label="Guimbal WX Local Weather"] .header-brand-accent--local{
  display:inline-block !important;
  align-self:flex-start !important;
  margin-left:-.18em !important;
  transform:translateY(1.35em) !important;
  font-size:clamp(.66rem, 1.06vw, 1.02rem) !important;
  line-height:1 !important;
  letter-spacing:.16em !important;
  text-transform:uppercase !important;
  white-space:nowrap !important;
  font-style:normal !important;
  -webkit-text-stroke:0 !important;
  text-stroke:0 !important;
  color:#a7f3d0 !important;
  -webkit-text-fill-color:#a7f3d0 !important;
  background:none !important;
  filter:drop-shadow(0 0 4px rgba(34,197,94,.24)) !important;
  opacity:.96 !important;
}
@media (max-width:860px){
  html body .header-brand-live[aria-label="Guimbal WX Local Weather"] .header-brand-accent--local{
    font-size:clamp(.55rem, 2.1vw, .82rem) !important;
    transform:translateY(1.20em) !important;
    letter-spacing:.12em !important;
  }
}
@media (max-width:540px){
  html body .header-brand-live[aria-label="Guimbal WX Local Weather"] .header-brand-text{
    width:100% !important;
    justify-content:center !important;
  }
  html body .header-brand-live[aria-label="Guimbal WX Local Weather"] .header-brand-accent--local{
    transform:translateY(1.05em) !important;
    margin-left:-.12em !important;
    font-size:clamp(.50rem, 2.7vw, .70rem) !important;
  }
}


html body .header-brand-live[aria-label="Guimbal WX Local Weather"] .header-brand-text{
  align-items:flex-start !important;
}
html body .header-brand-live[aria-label="Guimbal WX Local Weather"] .header-brand-main{
  display:inline-flex !important;
  align-items:flex-start !important;
  gap:.28em !important;
  line-height:.92 !important;
}
html body .header-brand-live[aria-label="Guimbal WX Local Weather"] .brand-wx-stack{
  display:inline-grid !important;
  grid-template-rows:auto auto !important;
  align-items:start !important;
  justify-items:start !important;
  line-height:.86 !important;
  transform:skewX(-4deg);
}
html body .header-brand-live[aria-label="Guimbal WX Local Weather"] .brand-wx-stack .brand-word-estate{
  transform:none !important;
}
html body .header-brand-live[aria-label="Guimbal WX Local Weather"] .header-brand-accent--local{
  display:block !important;
  margin-left:0 !important;
  margin-top:.16em !important;
  transform:none !important;
  font-size:clamp(.60rem, .95vw, .94rem) !important;
  line-height:1 !important;
  letter-spacing:.135em !important;
  text-transform:uppercase !important;
  white-space:nowrap !important;
  font-style:normal !important;
  -webkit-text-stroke:0 !important;
  text-stroke:0 !important;
  color:#a7f3d0 !important;
  -webkit-text-fill-color:#a7f3d0 !important;
  background:none !important;
  filter:drop-shadow(0 0 4px rgba(34,197,94,.24)) !important;
  opacity:.96 !important;
}
@media (max-width:860px){
  html body .header-brand-live[aria-label="Guimbal WX Local Weather"] .header-brand-main{
    gap:.24em !important;
  }
  html body .header-brand-live[aria-label="Guimbal WX Local Weather"] .header-brand-accent--local{
    font-size:clamp(.48rem, 1.75vw, .72rem) !important;
    letter-spacing:.10em !important;
    margin-top:.11em !important;
  }
}
@media (max-width:540px){
  html body .header-brand-live[aria-label="Guimbal WX Local Weather"] .header-brand-main{
    justify-content:center !important;
  }
  html body .header-brand-live[aria-label="Guimbal WX Local Weather"] .header-brand-accent--local{
    font-size:clamp(.42rem, 2.35vw, .62rem) !important;
    letter-spacing:.08em !important;
  }
}


html body #forecast7Panel .forecast7-meta-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
  width:fit-content;
  max-width:100%;
  margin:0 auto 10px;
  padding:5px 11px;
  border:1px solid var(--wx-data-chip-border);
  border-radius:var(--wx-data-chip-radius);
  background:var(--wx-data-chip-bg);
  color:rgba(226,232,240,.88);
  font-size:.72rem;
  font-weight:750;
  letter-spacing:.02em;
  line-height:1.25;
  text-align:center;
  box-shadow:var(--wx-data-chip-shadow), 0 0 14px rgba(14,165,233,.06);
}
html body #forecast7Panel .forecast7-meta-row strong{
  color:#e0f2fe;
  font-weight:900;
}
html body #forecast7Panel .forecast7-meta-source{
  color:rgba(186,230,253,.78);
  font-size:.66rem;
  font-weight:800;
  opacity:.86;
}
html body #forecast7Panel .forecast7-meta-source::before{
  content:"· ";
  color:rgba(148,163,184,.85);
}
@media (max-width:520px){
  html body #forecast7Panel .forecast7-meta-row{
    border-radius:14px;
    font-size:.66rem;
    padding:5px 8px;
  }
}


html, body{
  max-width:100%;
  overflow-x:hidden;
}
html body .container{
  max-width:1200px;
}

html body img,
html body svg,
html body canvas{
  max-width:100%;
}

@media (max-width:760px){
  html body{
    font-size:14px;
    -webkit-text-size-adjust:100%;
  }
  html body .container{
    width:100%;
    padding-left:max(7px, env(safe-area-inset-left));
    padding-right:max(7px, env(safe-area-inset-right));
  }
  html body .title3d-inner{
    padding:7px 8px 8px !important;
    border-radius:14px !important;
  }
  html body .header-brand-live[aria-label="Guimbal WX Local Weather"]{
    width:100% !important;
    max-width:100% !important;
    flex-wrap:nowrap !important;
    justify-content:center !important;
    align-items:center !important;
    gap:7px !important;
    min-height:50px !important;
    overflow:hidden !important;
  }
  html body .header-brand-live[aria-label="Guimbal WX Local Weather"] .header-brand-icon{
    width:clamp(68px, 18vw, 92px) !important;
    flex:0 0 auto !important;
  }
  html body .header-brand-live[aria-label="Guimbal WX Local Weather"] .header-brand-divider{
    display:none !important;
  }
  html body .header-brand-live[aria-label="Guimbal WX Local Weather"] .header-brand-text{
    width:auto !important;
    min-width:0 !important;
    flex:0 1 auto !important;
    justify-content:center !important;
  }
  html body .header-brand-live[aria-label="Guimbal WX Local Weather"] .header-brand-main{
    min-width:0 !important;
    white-space:nowrap !important;
    font-size:clamp(1.24rem, 7vw, 1.82rem) !important;
    line-height:.92 !important;
    gap:.22em !important;
  }
  html body .header-brand-live[aria-label="Guimbal WX Local Weather"] .brand-wx-stack{
    line-height:.82 !important;
  }
  html body .header-brand-live[aria-label="Guimbal WX Local Weather"] .header-brand-accent--local{
    font-size:clamp(.43rem, 2.1vw, .58rem) !important;
    letter-spacing:.075em !important;
    margin-top:.09em !important;
  }
  html body .title3d .sub.header-logo-sub{
    width:100% !important;
    padding:0 4px !important;
    margin-top:3px !important;
    font-size:clamp(.66rem, 2.8vw, .76rem) !important;
    line-height:1.18 !important;
  }

  html body .status-bar{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    gap:6px !important;
    padding:6px !important;
    margin-bottom:7px !important;
  }
  html body .status-left{
    order:1;
    flex:0 1 auto;
  }
  html body #moonPill{ order:2; }
  html body #dayStatusPill{ order:3; }
  html body #wxHeroSummary{
    order:4;
    flex:1 1 100% !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
  }
  html body .status-right{
    order:5;
    width:100% !important;
    margin-left:0 !important;
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    flex-wrap:wrap !important;
    gap:6px !important;
  }
  html body .status-bar #status{
    flex:1 1 210px !important;
    max-width:100% !important;
    justify-content:center !important;
    white-space:nowrap !important;
    overflow:hidden !important;
  }
  html body .status-bar #status .nav-status-label,
  html body .status-bar #status .nav-status-extra{
    min-width:0 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }
  html body .status-bar #hazDupPill{
    flex:0 1 auto !important;
    max-width:calc(100% - 58px) !important;
  }
  html body .status-bar #unitPill{
    flex:0 0 auto !important;
    min-width:42px !important;
  }

  html body .bubble-wrap{
    gap:10px !important;
  }
  html body .stage{
    min-height:min(330px, 44vh) !important;
    height:min(44vh, 340px) !important;
  }
  
  
  html body .ribbon-body-card{
    padding:9px !important;
    border-radius:12px !important;
  }

  html body #hazardsPanel > h2.ribbon-title,
  html body #quakesPanel > h2.ribbon-title,
  html body #metarPanel > h2.ribbon-title{
    min-height:0 !important;
    gap:5px !important;
    padding:6px 7px !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{
    font-size:clamp(.78rem, 3.4vw, .92rem) !important;
    max-width:calc(100% - 78px) !important;
  }
  html body #hazardsPanel > h2.ribbon-title .pill,
  html body #quakesPanel > h2.ribbon-title .pill,
  html body #metarPanel > h2.ribbon-title .pill,
  html body #forecast7Panel .pill{
    font-size:.70rem !important;
    padding:4px 7px !important;
  }

  html body .panel-note,
  html body .haz-guidance-bar,
  html body .panel-note--metars,
  html body .panel-note--quakes{
    display:flex !important;
    align-items:flex-start !important;
    flex-wrap:wrap !important;
    gap:5px 7px !important;
    line-height:1.25 !important;
    font-size:.76rem !important;
  }
  html body .haz-guidance-copy,
  html body .metar-guidance-copy{
    flex:1 1 190px !important;
    min-width:0 !important;
  }
  html body .haz-guidance-link,
  html body .metar-guidance-link{
    flex:0 0 auto !important;
  }

  html body .forecast7-meta-row{
    width:100% !important;
    padding:5px 7px !important;
    font-size:.72rem !important;
  }
  html body .forecast7-grid,
  html body #forecast7Panel .forecast7-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    gap:6px !important;
  }
  html body .fct-tile,
  html body #forecast7Panel .fct-tile{
    padding:6px 4px !important;
  }
  html body .fct-tile .hi-lo,
  html body .fct-tile .pop{
    font-size:.72rem !important;
  }

  html body .metar-target-summary,
  html body .taf-target-summary{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:5px !important;
  }
  html body .metar-mini-pill{
    flex:1 1 145px !important;
    max-width:100% !important;
    white-space:normal !important;
    line-height:1.16 !important;
    text-align:center !important;
  }
  html body .metar-strip,
  html body .taf-strip{
    gap:8px !important;
    padding-bottom:4px !important;
  }
  html body .metar-card,
  html body #metarPanel .taf-card{
    flex-basis:clamp(232px, 84vw, 330px) !important;
    min-width:clamp(232px, 84vw, 330px) !important;
    max-width:calc(100vw - 34px) !important;
  }

  html body .site-footer .foot-wrap{
    gap:8px !important;
    text-align:left !important;
  }
  html body .foot-right{
    width:100% !important;
    display:flex !important;
    justify-content:flex-start !important;
    align-items:center !important;
    flex-wrap:wrap !important;
    gap:8px !important;
  }
}

@media (max-width:430px){
  html body .container{
    padding-left:max(5px, env(safe-area-inset-left));
    padding-right:max(5px, env(safe-area-inset-right));
  }
  html body .title3d-inner{
    padding:6px 6px 7px !important;
  }
  html body .header-brand-live[aria-label="Guimbal WX Local Weather"]{
    gap:5px !important;
    min-height:46px !important;
  }
  html body .header-brand-live[aria-label="Guimbal WX Local Weather"] .header-brand-icon{
    width:64px !important;
  }
  html body .header-brand-live[aria-label="Guimbal WX Local Weather"] .header-brand-main{
    font-size:clamp(1.05rem, 7.4vw, 1.38rem) !important;
    gap:.18em !important;
  }
  html body .header-brand-live[aria-label="Guimbal WX Local Weather"] .header-brand-accent--local{
    font-size:clamp(.36rem, 2.15vw, .50rem) !important;
    letter-spacing:.055em !important;
  }
  html body .title3d .sub.header-logo-sub{
    font-size:.64rem !important;
  }
  html body .top-clock,
  html body .pill,
  html body .btn{
    font-size:.72rem !important;
  }
  html body .status-bar #status{
    flex-basis:185px !important;
  }
  html body .status-bar #status .nav-status-extra{
    max-width:118px !important;
  }
  html body .stage{
    min-height:min(300px, 40vh) !important;
    height:min(40vh, 310px) !important;
  }
  html body .forecast7-grid,
  html body #forecast7Panel .forecast7-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
  html body #hazardsPanel > h2.ribbon-title,
  html body #quakesPanel > h2.ribbon-title,
  html body #metarPanel > h2.ribbon-title{
    flex-wrap:wrap !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{
    order:1 !important;
  }
  html body #hazardsPanel > h2.ribbon-title .pill,
  html body #quakesPanel > h2.ribbon-title .pill,
  html body #metarPanel > h2.ribbon-title .pill{
    order:2 !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{
    order:3 !important;
    flex:1 1 100% !important;
    max-width:100% !important;
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
    line-height:1.12 !important;
  }
  html body .drawer{
    width:100vw !important;
  }
  html body .drawer-panel{
    border-radius:0 !important;
    padding:12px !important;
  }
}

@media (max-width:370px){
  html body .header-brand-live[aria-label="Guimbal WX Local Weather"] .header-brand-icon{
    width:58px !important;
  }
  html body .header-brand-live[aria-label="Guimbal WX Local Weather"] .header-brand-main{
    font-size:1.02rem !important;
  }
  html body .header-brand-live[aria-label="Guimbal WX Local Weather"] .header-brand-accent--local{
    font-size:.34rem !important;
  }
  html body .status-bar #status{
    flex-basis:170px !important;
  }
  html body .status-bar #status .nav-status-extra{
    max-width:96px !important;
  }
  html body .metar-card,
  html body #metarPanel .taf-card{
    flex-basis:calc(100vw - 28px) !important;
    min-width:calc(100vw - 28px) !important;
  }
}


@media (max-width:430px){
  html body .container{
    width:100% !important;
    max-width:100% !important;
    padding-left:max(5px, env(safe-area-inset-left)) !important;
    padding-right:max(5px, env(safe-area-inset-right)) !important;
  }
}


html body .stage.stage--fallback-bg,
html body .stage.stage--fallback-bg .bg-layer{
  background-image:none !important;
}
html body .stage.stage--fallback-bg{
  background:
    radial-gradient(900px 420px at 22% 20%, rgba(14,165,233,.16), transparent 62%),
    radial-gradient(740px 360px at 78% 28%, rgba(34,197,94,.12), transparent 58%),
    radial-gradient(760px 360px at 50% 100%, rgba(250,204,21,.08), transparent 62%),
    linear-gradient(180deg, rgba(15,23,42,.92), rgba(2,6,23,.96)) !important;
}

html body .container{
  width:min(98%, 1920px) !important;
  max-width:1920px !important;
  padding-left:6px !important;
  padding-right:6px !important;
}


@media (max-width:760px){
  html body .container{
    width:100% !important;
    max-width:100% !important;
    padding-left:max(7px, env(safe-area-inset-left)) !important;
    padding-right:max(7px, env(safe-area-inset-right)) !important;
  }
  
  
}


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

html body *,
html body *::before,
html body *::after{
  box-sizing:border-box;
}

html body img,
html body svg,
html body canvas,
html body video{
  max-width:100%;
}


html body .ribbon-label,
html body .ribbon-value,
html body .gauge-rows .kv .k,
html body .gauge-rows .kv .v,
html body .barometer-readouts .kv .k,
html body .barometer-readouts .kv .v,
html body .nowcast-row .kv .k,
html body .nowcast-row .kv .v,
html body .tube-value{
  overflow-wrap:anywhere !important;
}


html body .pill,
html body .pill--sm,
html body .btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:0 !important;
  max-width:100% !important;
  white-space:nowrap !important;
  line-height:1.05 !important;
}

html body .status-bar{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
  overflow:hidden !important;
}

html body .status-left,
html body .status-right{
  flex:0 1 auto !important;
  min-width:0 !important;
  max-width:100% !important;
  justify-content:center !important;
}

html body .status-right{
  margin-left:0 !important;
}

html body .wx-hero-summary{
  flex:1 1 280px !important;
  max-width:min(100%, 620px) !important;
}

html body .wx-hero-summary-text{
  display:block !important;
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}


@media (max-width:560px){
  html body{
    font-size:13px !important;
  }

  html body .container{
    padding-left:max(5px, env(safe-area-inset-left)) !important;
    padding-right:max(5px, env(safe-area-inset-right)) !important;
  }

  html body .status-bar{
    padding:5px 5px !important;
    gap:5px !important;
  }

  html body .status-left,
  html body .status-right{
    gap:5px !important;
  }

  html body .pill,
  html body .pill--sm,
  html body .btn,
  html body .top-clock{
    min-height:22px !important;
    padding:.18rem .42rem !important;
    font-size:.70rem !important;
  }

  html body .wx-hero-summary{
    flex-basis:100% !important;
    order:10 !important;
    padding:4px 7px !important;
  }

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

  

  

  

  html body .ribbon-label,
  html body .gauge-rows .kv .k,
  html body #barometerCard .barometer-readouts .kv .k,
  html body .nowcast-row .kv .k{
    font-size:.70rem !important;
    min-height:20px !important;
    padding:3px 5px !important;
  }

  html body .ribbon-value,
  html body .gauge-rows .kv .v,
  html body #barometerCard .barometer-readouts .kv .v,
  html body .nowcast-row .kv .v,
  html body .tube-value{
    font-size:.76rem !important;
    min-height:20px !important;
    padding:3px 6px !important;
  }

  html body .forecast7-grid,
  html body #forecast7Panel .forecast7-grid{
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    gap:6px !important;
  }

  html body .forecast-intel-items,
  html body .metar-mini-row,
  html body .hazard-chips{
    gap:5px !important;
  }
}


@media (max-width:420px){
  html body{
    font-size:12.5px !important;
  }

  html body .container{
    padding-left:max(4px, env(safe-area-inset-left)) !important;
    padding-right:max(4px, env(safe-area-inset-right)) !important;
  }

  html body .status-bar{
    border-radius:10px !important;
  }

  html body .pill,
  html body .pill--sm,
  html body .btn,
  html body .top-clock{
    font-size:.66rem !important;
    padding:.16rem .34rem !important;
  }

  html body #status{
    max-width:calc(100vw - 92px) !important;
  }

  

  

  

  html body .ribbon-label,
  html body .gauge-rows .kv .k,
  html body #barometerCard .barometer-readouts .kv .k,
  html body .nowcast-row .kv .k,
  html body .ribbon-value,
  html body .gauge-rows .kv .v,
  html body #barometerCard .barometer-readouts .kv .v,
  html body .nowcast-row .kv .v{
    justify-content:center !important;
    text-align:center !important;
    width:100% !important;
  }

  html body .ribbon-value.has-risk-label,
  html body .gauge-rows .v.has-risk-label,
  html body .tube-value.has-risk-label{
    justify-content:center !important;
  }

  html body .has-risk-label::after{
    flex-basis:100% !important;
    width:100% !important;
    margin-left:0 !important;
    margin-top:2px !important;
    font-size:.50rem !important;
    padding:2px 5px !important;
  }

  html body .forecast7-grid,
  html body #forecast7Panel .forecast7-grid{
    grid-template-columns:1fr !important;
  }
}


@media (max-width:340px){
  html body{
    font-size:12px !important;
  }

  

  html body .pill,
  html body .pill--sm,
  html body .btn,
  html body .top-clock{
    font-size:.62rem !important;
    min-height:20px !important;
    padding:.14rem .30rem !important;
  }

  

  html body .ribbon-label,
  html body .ribbon-value,
  html body .gauge-rows .kv .k,
  html body .gauge-rows .kv .v,
  html body .barometer-readouts .kv .k,
  html body .barometer-readouts .kv .v,
  html body .nowcast-row .kv .k,
  html body .nowcast-row .kv .v,
  html body .tube-value{
    font-size:.68rem !important;
    min-height:19px !important;
  }
}


:root{
  --wl-gap:clamp(8px, 1.1vw, 14px);
  --wl-pad:clamp(8px, 1vw, 13px);
  --wl-radius:16px;
  --wl-card-min-h:252px;
  --wl-gauge-size:clamp(150px, 13vw, 190px);
  --wl-lightning-w:clamp(150px, 13vw, 190px);
  --wl-lightning-h:clamp(92px, 8vw, 122px);
  --wl-pill-label:clamp(.68rem, .68rem + .10vw, .80rem);
  --wl-pill-value:clamp(.72rem, .70rem + .16vw, .86rem);
  --wl-label-col:clamp(7.4ch, 35%, 10.5ch);
  --wl-blue:59,130,246;
  --wl-cyan:34,211,238;
  --wl-teal:20,184,166;
  --wl-gold:250,204,21;
}

html body .gauges-grid{
  min-width:0 !important;
  width:100% !important;
  overflow:visible !important;
}

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

html body .gauges-top > #windCard,
html body .gauges-top > #lightningCard{
  grid-column:auto !important;
  grid-row:auto !important;
  min-width:0 !important;
  max-width:none !important;
  width:100% !important;
}

html body #windCard,
html body #lightningCard{
  position:relative !important;
  isolation:isolate !important;
  overflow:hidden !important;
  display:grid !important;
  grid-template-columns:minmax(142px, 40%) minmax(0, 1fr) !important;
  grid-template-rows:auto minmax(0, 1fr) !important;
  column-gap:clamp(10px, 1.4vw, 18px) !important;
  row-gap:7px !important;
  align-items:center !important;
  justify-items:stretch !important;
  min-height:var(--wl-card-min-h) !important;
  padding:var(--wl-pad) !important;
  border-radius:var(--wl-radius) !important;
  contain:layout paint !important;
}

html body #windCard{
  border:1px solid rgba(var(--wl-blue), .48) !important;
  background:
    radial-gradient(115% 105% at 50% 0%, rgba(var(--wl-cyan), .12), transparent 58%),
    linear-gradient(180deg, rgba(var(--wl-blue), .13), rgba(8,47,73,.14) 58%, rgba(2,6,23,.42)) !important;
  box-shadow:
    var(--shadow, 0 16px 38px rgba(0,0,0,.28)),
    0 0 0 1px rgba(var(--wl-blue), .10) inset,
    0 0 24px rgba(var(--wl-cyan), .10) !important;
}

html body #lightningCard{
  border:1px solid rgba(var(--wl-teal), .54) !important;
  background:
    radial-gradient(115% 105% at 50% 0%, rgba(var(--wl-gold), .10), transparent 58%),
    linear-gradient(180deg, rgba(var(--wl-teal), .14), rgba(8,47,73,.13) 58%, rgba(2,6,23,.42)) !important;
  box-shadow:
    var(--shadow, 0 16px 38px rgba(0,0,0,.28)),
    0 0 0 1px rgba(var(--wl-teal), .10) inset,
    0 0 24px rgba(var(--wl-teal), .12) !important;
}

html body #windCard::before,
html body #lightningCard::before{
  content:"" !important;
  position:absolute !important;
  top:38px !important;
  bottom:14px !important;
  left:40% !important;
  transform:translateX(clamp(4px, .7vw, 10px)) !important;
  width:1px !important;
  background:linear-gradient(180deg, transparent, rgba(255,255,255,.18), transparent) !important;
  pointer-events:none !important;
  z-index:0 !important;
}

html body #windCard > *,
html body #lightningCard > *{
  min-width:0 !important;
  position:relative !important;
  z-index:1 !important;
}

html body #windCard > .gauge-title,
html body #lightningCard > .bubble-title{
  grid-column:1 / -1 !important;
  grid-row:1 !important;
  align-self:start !important;
  justify-self:center !important;
  max-width:100% !important;
  width:auto !important;
  margin:0 auto !important;
  padding:4px 10px !important;
  border-radius:999px !important;
  font-size:clamp(.78rem, .72rem + .20vw, .92rem) !important;
  line-height:1.05 !important;
  font-weight:900 !important;
  white-space:normal !important;
  text-align:center !important;
  overflow-wrap:anywhere !important;
  text-wrap:balance;
}

html body #windCard > .gauge-title{
  color:#dbeafe !important;
  border:1px solid rgba(var(--wl-blue), .36) !important;
  background:rgba(var(--wl-blue), .08) !important;
}

html body #lightningCard > .bubble-title{
  color:#ccfbf1 !important;
  border:1px solid rgba(var(--wl-teal), .38) !important;
  background:rgba(var(--wl-teal), .08) !important;
}

html body #windCard > .gauge-center,
html body #lightningCard > .bubble-gauge{
  grid-column:1 !important;
  grid-row:2 !important;
  align-self:center !important;
  justify-self:stretch !important;
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  display:grid !important;
  place-items:center !important;
  padding:0 !important;
  overflow:visible !important;
}

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

html body #lightningCard #ltgBubble{
  position:relative !important;
  display:block !important;
  width:min(100%, var(--wl-lightning-w)) !important;
  max-width:var(--wl-lightning-w) !important;
  min-width:0 !important;
  height:var(--wl-lightning-h) !important;
  max-height:var(--wl-lightning-h) !important;
  margin:0 auto !important;
  overflow:visible !important;
  transform:none !important;
}

html body #ltgBubble .cloud{
  position:absolute !important;
  border-radius:999px !important;
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.98), rgba(255,255,255,.88) 38%, rgba(226,232,240,.66) 66%, rgba(148,163,184,.34) 100%),
    linear-gradient(180deg, rgba(255,255,255,.36), rgba(255,255,255,.08)) !important;
  box-shadow:
    0 8px 18px rgba(0,0,0,.28),
    0 0 0 1px rgba(255,255,255,.56) inset,
    0 0 20px rgba(255,255,255,.14) !important;
}


html body #ltg-bolts .bolt,
html body .bolt{
  width:min(42%, 92px) !important;
  aspect-ratio:40 / 60 !important;
  position:relative !important;
  filter:drop-shadow(0 8px 18px rgba(255,255,255,.35)) !important;
}

html body #ltg-bolts .bolt svg,
html body .bolt svg{
  display:block !important;
  width:100% !important;
  height:100% !important;
}

@keyframes boltFlash{
  0%{ opacity:0; transform:translateY(0) scale(.95); filter:drop-shadow(0 0 0 rgba(255,255,255,0)); }
  10%{ opacity:1; transform:translateY(-3px) scale(1.02); filter:drop-shadow(0 0 14px rgba(255,255,255,.9)); }
  25%{ opacity:.20; transform:translateY(0) scale(.98); filter:drop-shadow(0 0 4px rgba(255,255,255,.4)); }
  40%{ opacity:.80; transform:translateY(-1px) scale(1); filter:drop-shadow(0 0 10px rgba(255,255,255,.7)); }
  60%{ opacity:.10; transform:translateY(0) scale(.98); }
  100%{ opacity:0; transform:translateY(0) scale(.98); }
}

html body #windCard > .gauge-rows,
html body #lightningCard > .gauge-rows{
  grid-column:2 !important;
  grid-row:2 !important;
  align-self:center !important;
  justify-self:stretch !important;
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:5px !important;
  margin:0 !important;
  padding:0 !important;
  overflow:visible !important;
}

html body #windCard .gauge-rows .kv,
html body #lightningCard .gauge-rows .kv,
html body #lightningCard #ltg-battery-row{
  display:grid !important;
  grid-template-columns:minmax(7.2ch, var(--wl-label-col)) minmax(0, 1fr) !important;
  column-gap:6px !important;
  row-gap:2px !important;
  align-items:center !important;
  min-width:0 !important;
  width:100% !important;
  max-width:100% !important;
  overflow:hidden !important;
}

html body #windCard .gauge-rows .kv .k,
html body #lightningCard .gauge-rows .kv .k,
html body #lightningCard #ltg-battery-row .k,
html body #lightningCard #ltg-battery-row::before{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  min-width:0 !important;
  max-width:100% !important;
  min-height:21px !important;
  padding:3px 6px !important;
  border-radius:8px !important;
  font-size:var(--wl-pill-label) !important;
  line-height:1 !important;
  font-weight:800 !important;
  color:rgba(226,232,240,.82) !important;
  background:rgba(15,23,42,.32) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

html body #windCard .gauge-rows .kv .v,
html body #lightningCard .gauge-rows .kv .v,
html body #lightningCard #ltg-battery-row .v,
html body #lightningCard #ltg-battery-chip{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  min-width:0 !important;
  max-width:100% !important;
  min-height:21px !important;
  padding:3px 7px !important;
  border-radius:8px !important;
  font-size:var(--wl-pill-value) !important;
  line-height:1 !important;
  font-weight:900 !important;
  font-variant-numeric:tabular-nums !important;
  color:#f8fafc !important;
  background:rgba(15,23,42,.44) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

html body #gauge-now{ color:#93c5fd !important; }
html body #gauge-avg{ color:#86efac !important; }
html body #gauge-card{ color:#e5e7eb !important; }
html body #gauge-spd{ color:#7dd3fc !important; }
html body #gauge-gust{ color:#fca5a5 !important; }
html body #ltg-nearest{ color:#7dd3fc !important; }
html body #ltg-last{ color:#c4b5fd !important; }
html body #ltg-count{ color:#fde68a !important; }


html body .pill,
html body .pill--sm,
html body .forecast-intel-chip,
html body .metar-mini-pill,
html body .nowcast-signal,
html body .alert-feed-row,
html body .hazard-chips .pill{
  max-width:100% !important;
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  box-sizing:border-box !important;
}

html body .status-bar,
html body .panel,
html body .ribbon,
html body .ribbon-body-card,
html body .forecast7-card,
html body .metar-station-card,
html body .taf-station-card,
html body .hazards-body-card,
html body .quakes-body-card,
html body .nowcast-row,
html body .local-metrics-grid,
html body .hazard-chips,
html body .forecast-intel-items{
  min-width:0 !important;
  max-width:100% !important;
}

html body .stage{
  overflow:hidden !important;
}
html body .bubble{
  max-width:calc(100% - 10px) !important;
  max-height:calc(100% - 10px) !important;
}
html body .bubble .value,
html body .bubble .unit,
html body .bubble .label{
  max-width:96% !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

@media (max-width:1180px){
  :root{
    --wl-card-min-h:238px;
    --wl-gauge-size:clamp(136px, 14vw, 166px);
    --wl-lightning-w:clamp(136px, 14vw, 166px);
    --wl-lightning-h:clamp(84px, 8vw, 104px);
  }
  html body #windCard,
  html body #lightningCard{
    grid-template-columns:minmax(126px, 38%) minmax(0, 1fr) !important;
    column-gap:11px !important;
    padding:9px !important;
  }
}

@media (max-width:860px){
  html body .gauges-top{
    grid-template-columns:1fr !important;
  }
  html body #windCard,
  html body #lightningCard{
    grid-template-columns:minmax(132px, 34%) minmax(0, 1fr) !important;
    min-height:218px !important;
  }
  html body #windCard::before,
  html body #lightningCard::before{
    left:34% !important;
  }
}

@media (max-width:620px){
  :root{
    --wl-card-min-h:0px;
    --wl-gauge-size:clamp(136px, 48vw, 166px);
    --wl-lightning-w:clamp(138px, 52vw, 166px);
    --wl-lightning-h:clamp(86px, 32vw, 104px);
    --wl-pill-label:.70rem;
    --wl-pill-value:.76rem;
  }
  html body #windCard,
  html body #lightningCard{
    grid-template-columns:1fr !important;
    grid-template-rows:auto auto auto !important;
    min-height:0 !important;
    row-gap:7px !important;
    padding:8px !important;
  }
  html body #windCard::before,
  html body #lightningCard::before{
    display:none !important;
  }
  html body #windCard > .gauge-title,
  html body #lightningCard > .bubble-title{
    grid-column:1 !important;
    grid-row:1 !important;
    font-size:.76rem !important;
    padding:3px 8px !important;
  }
  html body #windCard > .gauge-center,
  html body #lightningCard > .bubble-gauge{
    grid-column:1 !important;
    grid-row:2 !important;
  }
  html body #windCard > .gauge-rows,
  html body #lightningCard > .gauge-rows{
    grid-column:1 !important;
    grid-row:3 !important;
    max-width:520px !important;
    justify-self:center !important;
  }
  html body .status-bar{
    gap:5px !important;
    padding:5px !important;
  }
  html body .pill,
  html body .pill--sm,
  html body .forecast-intel-chip,
  html body .metar-mini-pill,
  html body .nowcast-signal{
    font-size:.68rem !important;
    min-height:21px !important;
    padding:.16rem .36rem !important;
  }
}

@media (max-width:420px){
  :root{
    --wl-gauge-size:clamp(126px, 56vw, 150px);
    --wl-lightning-w:clamp(128px, 60vw, 150px);
    --wl-lightning-h:clamp(80px, 38vw, 94px);
    --wl-pill-label:.66rem;
    --wl-pill-value:.70rem;
  }
  html body #windCard .gauge-rows .kv,
  html body #lightningCard .gauge-rows .kv,
  html body #lightningCard #ltg-battery-row{
    grid-template-columns:1fr !important;
    row-gap:3px !important;
  }
  html body #windCard .gauge-rows .kv .k,
  html body #lightningCard .gauge-rows .kv .k,
  html body #lightningCard #ltg-battery-row .k,
  html body #lightningCard #ltg-battery-row::before,
  html body #windCard .gauge-rows .kv .v,
  html body #lightningCard .gauge-rows .kv .v,
  html body #lightningCard #ltg-battery-row .v,
  html body #lightningCard #ltg-battery-chip{
    width:100% !important;
    justify-content:center !important;
    text-align:center !important;
  }
  html body .bubble .value{ font-size:clamp(20px, 15cqw, 42px) !important; }
  html body .bubble .unit{ font-size:clamp(10px, 6cqw, 16px) !important; }
  html body .bubble .label{ font-size:clamp(9px, 6cqw, 13px) !important; white-space:normal !important; line-height:1.02 !important; }
}

@media (max-width:340px){
  :root{
    --wl-gauge-size:124px;
    --wl-lightning-w:128px;
    --wl-lightning-h:80px;
    --wl-pill-label:.62rem;
    --wl-pill-value:.66rem;
  }
  html body #windCard,
  html body #lightningCard{
    padding:6px !important;
  }
  html body #windCard > .gauge-title,
  html body #lightningCard > .bubble-title{
    font-size:.68rem !important;
  }
}


@media (max-width:560px){
  .bubble{ padding:10px 9px !important; }
  .bubble-inner{ width:88% !important; height:88% !important; padding:4px 6px !important; }
  .bubble .value{ font-size:clamp(18px, 15cqw, 42px) !important; line-height:1 !important; }
  .bubble .unit{ font-size:clamp(10px, 6cqw, 16px) !important; line-height:1 !important; }
  .bubble .label{
    max-width:94% !important;
    margin-top:3px !important;
    font-size:clamp(9px, 5.4cqw, 13px) !important;
    white-space:normal !important;
    line-height:1.05 !important;
    text-wrap:balance;
  }
  .bubble .label .ico{ margin-right:2px; }
}


@media (max-width:760px){
  .ribbon-panels{ grid-template-columns:1fr !important; }
  #outdoorReadingsRibbon,
  #outdoorRibbon,
  #rainRibbon{ grid-column:1 / -1 !important; }
}


html body #outdoorReadingsRibbon .ribbon-body-card,
html body #outdoorRibbon .ribbon-body-card{
  box-sizing:border-box !important;
  overflow:hidden !important;
}

@media (max-width:1180px){
  :root{
    --wx-dual-panel-inner-max: 100%;
    --wx-dual-left-col: minmax(160px, 1fr);
    --wx-dual-right-col: minmax(150px, 1fr);
    --wx-dual-spark-h: 46px;
  }
  html body #outdoorReadingsRibbon .ribbon-item,
  html body #outdoorRibbon .ribbon-item{
    column-gap:14px !important;
  }
  html body #outdoorReadingsRibbon .ribbon-item .ribbon-label,
  html body #outdoorRibbon .ribbon-item .ribbon-label,
  html body #outdoorReadingsRibbon .ribbon-item .ribbon-value,
  html body #outdoorRibbon .ribbon-item .ribbon-value{
    min-width:0 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
}


html body #rainRibbon .ribbon-body-card{
  width:100% !important;
  max-width:none !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
}

@media (max-width:760px){
  html body #rainRibbon.rain-has-intensity .ribbon-body-card{
    grid-template-columns:minmax(0,1fr) 94px !important;
    column-gap:8px !important;
    align-content:start !important;
  }
  html body #rainRibbon.rain-has-intensity .ribbon-item{
    grid-template-columns:minmax(0, 1fr) max-content !important;
    column-gap:7px !important;
  }
  html body #rainRibbon.rain-has-intensity .ribbon-label,
  html body #rainRibbon.rain-has-intensity .ribbon-value{
    min-width:0 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
  html body #rainRibbon.rain-has-intensity .tube-card.rain{
    grid-row:1 / span 6 !important;
    min-height:0 !important;
  }
}


@media (max-width:520px){
  html body #rainRibbon.rain-has-intensity .ribbon-body-card{
    grid-template-columns:1fr !important;
    grid-auto-rows:auto !important;
    row-gap:8px !important;
  }
  html body #rainRibbon.rain-has-intensity .tube-card.rain{
    grid-column:1 !important;
    grid-row:auto !important;
    width:100% !important;
    min-height:92px !important;
    height:auto !important;
    grid-template-columns:auto 1fr auto !important;
    grid-template-rows:auto !important;
    gap:10px !important;
    justify-items:center !important;
    align-items:center !important;
    padding:8px 10px !important;
  }
  html body #rainRibbon.rain-has-intensity .tube-card.rain .tube-title{
    white-space:nowrap !important;
    font-size:.68rem !important;
  }
  html body #rainRibbon.rain-has-intensity .tube-card.rain .tube{
    --height:62px !important;
    height:62px !important;
    width:22px !important;
  }
  html body #rainRibbon.rain-has-intensity .tube-card.rain .tube-value{
    font-size:.72rem !important;
    white-space:nowrap !important;
  }
}


html body #lightningCard #ltgBubble,
html body #ltgBubble{
  position:relative !important;
  display:block !important;
  width:min(100%, var(--ltg-w, 170px)) !important;
  max-width:100% !important;
  min-width:0 !important;
  height:var(--ltg-h, 108px) !important;
  max-height:var(--ltg-h, 108px) !important;
  margin:0 auto !important;
  overflow:visible !important;
  transform:none !important;
  background:transparent !important;
  box-shadow:none !important;
  filter:none !important;
}


html body #ltgBubble::before,
html body #ltgBubble::after{
  content:none !important;
  display:none !important;
  background:none !important;
  box-shadow:none !important;
  filter:none !important;
}


html body #ltgBubble .cloud,
html body .cloud.c-anvil,
html body .cloud.c-tower,
html body .cloud.c-left,
html body .cloud.c-right,
html body .cloud.c-shelf{
  display:block !important;
  position:absolute !important;
  border-radius:50% !important;
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.98), rgba(255,255,255,.90) 35%, rgba(255,255,255,.76) 64%, rgba(255,255,255,.42) 100%),
    linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,.10)) !important;
  box-shadow:
    0 11px 24px rgba(0,0,0,.36),
    0 0 0 1px rgba(255,255,255,.72) inset,
    0 0 30px 7px rgba(255,255,255,.16),
    0 0 28px rgba(45,212,191,.08) !important;
  opacity:1 !important;
  filter:none !important;
  transform:none !important;
}


html body #lightningCard .bubble-gauge{
  position:relative !important;
  overflow:visible !important;
}
html body #lightningCard .bubble-gauge::after{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:min(84%, 186px) !important;
  height:min(70%, 122px) !important;
  transform:translate(-50%, -50%) !important;
  z-index:0 !important;
  pointer-events:none !important;
  border-radius:999px !important;
  background:radial-gradient(ellipse at center, rgba(45,212,191,.18), rgba(14,165,233,.07) 42%, transparent 72%) !important;
  filter:blur(7px) !important;
  opacity:.70 !important;
}
html body #lightningCard .bubble-gauge > *{
  position:relative !important;
  z-index:1 !important;
}


html body #ltg-bolts{
  position:absolute !important;
  left:50% !important;
  bottom:4% !important;
  width:44% !important;
  height:40% !important;
  display:flex !important;
  align-items:flex-end !important;
  justify-content:center !important;
  gap:10% !important;
  opacity:0;
  pointer-events:none !important;
  transform:translateX(-50%) !important;
  z-index:3 !important;
}
html body #ltg-bolts.flash{ opacity:1 !important; }
html body #ltg-bolts .bolt.flash{ animation:boltFlash 900ms ease-out both !important; }


.bubble .label{ max-width:96% !important; }
@media (max-width:560px){
  .bubble .label{
    line-height:1.05 !important;
  }
}


.bubble .label{
  white-space:nowrap !important;
}
@media (max-width:560px){
  .bubble .label{
    white-space:nowrap !important;
    font-size:clamp(9px, 5.6cqw, 13px) !important;
  }
}

/* ========================== R33.25/R33.26 Integrated Visual Uniformity ==========================
   Folded in from the temporary Pass 26 preview layer to avoid a separate override file.
   ========================================================= */
/* Shared panel title rhythm */
html body .ribbon.ribbon--panel > .ribbon-title,
html body #forecast7Panel > .ribbon-title,
html body #metarPanel > .ribbon-title,
html body #hazardsPanel > .ribbon-title,
html body #quakesPanel > .ribbon-title{
  min-height:34px !important;
  padding:4px 10px !important;
  margin:0 0 7px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex-wrap:wrap !important;
  gap:6px 8px !important;
  border-radius:12px !important;
  line-height:1.1 !important;
}
html body .ribbon-title .title-text,
html body #forecast7Panel > .ribbon-title .title-text,
html body #metarPanel > .ribbon-title .title-text,
html body #hazardsPanel > .ribbon-title .title-text,
html body #quakesPanel > .ribbon-title .title-text{
  font-size:clamp(.92rem, .74rem + .36vw, 1.06rem) !important;
  line-height:1.1 !important;
  letter-spacing:.18px !important;
}
html body .ribbon-title .glass-ico,
html body .ribbon-title .title-ico{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:22px !important;
  min-height:22px !important;
}
html body .ribbon-title .pill,
html body #forecast7Panel .ribbon-title .pill,
html body #metarPanel .ribbon-title .pill,
html body #hazardsPanel .ribbon-title .pill,
html body #quakesPanel .ribbon-title .pill{
  min-height:24px !important;
  padding:.16rem .52rem !important;
  font-size:.72rem !important;
  line-height:1 !important;
  border-radius:999px !important;
  margin-left:4px !important;
}

/* Shared inner-card surface for plain data panels */
html body .ribbon-body-card,
html body #forecast7Panel .ribbon-body-card,
html body #metarPanel .ribbon-body-card,
html body #hazardsPanel .ribbon-body-card,
html body #quakesPanel .ribbon-body-card,
html body .hazards-body-card,
html body .quakes-body-card,
html body .metar-body-card{
  border-radius:var(--wx-uniform-radius) !important;
  border:1px solid var(--wx-uniform-card-border) !important;
  background:var(--wx-uniform-card-bg) !important;
  box-shadow:var(--wx-uniform-card-shadow) !important;
}

/* Shared compact card treatment for lower dashboard content */
html body .fct-tile,
html body #forecast7Panel .fct-tile,
html body .forecast7-meta-row,
html body .metar-card,
html body #metarPanel .taf-card,
html body .metar-station-card,
html body .taf-station-card,
html body .metar-strip,
html body #metarPanel .taf-strip,
html body .metar-raw-details,
html body #metarPanel .taf-section-head,
html body #hazardsPanel .haz-local-watch,
html body #hazardsPanel .haz-section-head,
html body #hazardsPanel .haz-severity-summary,
html body #quakesPanel .quake-chip,
html body .panel-note,
html body .forecast-intel-strip,
html body #forecast7Panel .forecast-intel-strip,
html body .nowcast-row{
  border-radius:var(--wx-data-card-radius) !important;
  border:1px solid var(--wx-data-card-border) !important;
  background:var(--wx-data-card-bg) !important;
  box-shadow:var(--wx-data-card-shadow) !important;
  background-clip:padding-box !important;
}
html body .fct-tile,
html body #forecast7Panel .fct-tile,
html body .metar-card,
html body #metarPanel .taf-card,
html body #quakesPanel .quake-chip{
  padding:7px !important;
}
html body .fct-tile:hover,
html body #forecast7Panel .fct-tile:hover,
html body .metar-card:hover,
html body #metarPanel .taf-card:hover,
html body #quakesPanel .quake-chip:hover{
  transform:translateY(-1px) !important;
  border-color:rgba(255,255,255,.245) !important;
  box-shadow:var(--wx-data-card-hover-shadow) !important;
}
html body .panel-note{
  --wx-note-accent:rgba(125,211,252,.55);
  min-height:32px !important;
  padding:7px 10px !important;
  gap:6px 8px !important;
  border-left:3px solid var(--wx-note-accent) !important;
  background:var(--wx-data-note-bg) !important;
  border-color:var(--wx-data-note-border) !important;
}
html body .panel-note--hazards{ --wx-note-accent:rgba(248,113,113,.62); }
html body .panel-note--metars{ --wx-note-accent:rgba(125,211,252,.62); }
html body .panel-note--quakes{ --wx-note-accent:rgba(96,165,250,.62); }


/* Shared chip sizing without flattening severity colors */
html body .pill,
html body .pill--sm,
html body .forecast-intel-chip,
html body .metar-mini-pill,
html body .nowcast-signal,
html body .hazard-chips .pill,
html body .alert-feed-row{
  border-radius:999px !important;
  min-height:26px !important;
  padding:.24rem .58rem !important;
  font-size:.76rem !important;
  line-height:1.05 !important;
  box-shadow:var(--wx-uniform-chip-shadow) !important;
}
html body .forecast-intel-chip,
html body .metar-mini-pill,
html body .nowcast-signal{
  border:1px solid var(--wx-data-chip-border) !important;
  background:var(--wx-data-chip-bg) !important;
  box-shadow:var(--wx-data-chip-shadow) !important;
}
html body #forecast7Panel .forecast-intel-chip{
  min-height:42px !important;
  border-radius:12px !important;
  align-items:flex-start !important;
  justify-content:center !important;
  padding:6px 10px !important;
  gap:2px !important;
}
html body #forecast7Panel .forecast-intel-chip b,
html body #forecast7Panel .forecast-intel-chip em{
  line-height:1.08 !important;
}

/* Data rows: same label/value rhythm across panels */
html body .ribbon-label,
html body .gauge-rows .kv .k,
html body #barometerCard .barometer-readouts .kv .k,
html body .nowcast-row .kv .k,
html body .ribbon-value,
html body .gauge-rows .kv .v,
html body #barometerCard .barometer-readouts .kv .v,
html body .nowcast-row .kv .v{
  border-radius:9px !important;
}
html body .nowcast-row{
  padding:7px !important;
  gap:6px 10px !important;
}
html body .nowcast-row .kv{
  gap:7px !important;
}
html body .nowcast-row .kv .k,
html body .nowcast-row .kv .v{
  min-height:24px !important;
  display:flex !important;
  align-items:center !important;
  border:1px solid rgba(255,255,255,.12) !important;
  background:rgba(5,12,22,.30) !important;
}

/* Forecast and aviation hierarchy polish */
html body .fct-tile .dow,
html body .metar-card-title,
html body .metar-station-line b{
  letter-spacing:.22px !important;
}
html body .metar-card-head{
  min-height:28px !important;
  align-items:center !important;
}
html body .quakes-strip{
  border-radius:var(--wx-uniform-radius) !important;
  border:1px solid var(--wx-uniform-card-border) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018)),
    rgba(6,14,24,.46) !important;
  padding:6px !important;
}

/* Keep small screens compact after uniform sizing */
@media (max-width:640px){
  html body .ribbon.ribbon--panel > .ribbon-title,
  html body #forecast7Panel > .ribbon-title,
  html body #metarPanel > .ribbon-title,
  html body #hazardsPanel > .ribbon-title,
  html body #quakesPanel > .ribbon-title{
    min-height:30px !important;
    padding:3px 7px !important;
    gap:4px 6px !important;
  }
  html body .ribbon-title .pill,
  html body #forecast7Panel .ribbon-title .pill,
  html body #metarPanel .ribbon-title .pill,
  html body #hazardsPanel .ribbon-title .pill,
  html body #quakesPanel .ribbon-title .pill,
  html body .pill,
  html body .pill--sm,
  html body .forecast-intel-chip,
  html body .metar-mini-pill,
  html body .nowcast-signal,
  html body .hazard-chips .pill,
  html body .alert-feed-row{
    min-height:24px !important;
    padding:.20rem .46rem !important;
    font-size:.70rem !important;
  }
  html body #forecast7Panel .forecast-intel-chip{
    min-height:38px !important;
    padding:5px 8px !important;
  }
}



/* ========================== R33.26 Unified Card Surfaces ==========================
   Component-level visual polish folded into the existing CSS structure.
   No separate override stylesheet is used.
   ========================================================= */
html body .ribbon.ribbon--panel,
html body .solar-combo-card,
html body .gauge-card,
html body .bubble-card,
html body .barometer-card{
  border-radius:var(--wx-surface-radius) !important;
  border:1px solid var(--wx-surface-border) !important;
  background:var(--wx-surface-bg) !important;
  box-shadow:var(--wx-surface-shadow) !important;
}

html body .ribbon-body-card,
html body .forecast-intel-strip,
html body .forecast7-card,
html body .metar-card,
html body .taf-card,
html body .metar-station-card,
html body .taf-station-card,
html body .hazards-body-card,
html body .quakes-body-card,
html body .panel-note,
html body .nowcast-row,
html body #quakesPanel .quake-chip{
  border-radius:var(--wx-surface-radius-sm) !important;
  border:1px solid var(--wx-surface-border) !important;
  background:var(--wx-surface-bg-soft) !important;
  box-shadow:var(--wx-surface-shadow-soft) !important;
}

html body .ribbon.ribbon--panel > .ribbon-title,
html body #forecast7Panel > .ribbon-title,
html body #metarPanel > .ribbon-title,
html body #hazardsPanel > .ribbon-title,
html body #quakesPanel > .ribbon-title,
html body .solar-combo-title,
html body #windCard > .gauge-title,
html body #lightningCard > .bubble-title,
html body #barometerCard .barometer-head{
  border-radius:13px !important;
  border:1px solid var(--wx-title-border) !important;
  background:var(--wx-title-surface) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.075), 0 5px 14px rgba(0,0,0,.16) !important;
}

html body #windCard,
html body #lightningCard,
html body .wx-mid-instruments > #barometerCard.barometer-card{
  border-radius:18px !important;
  border:1px solid rgba(var(--wx-inst-a, 125,211,252), .36) !important;
  background:var(--wx-instrument-bg) !important;
  box-shadow:var(--wx-instrument-shadow) !important;
}

html body #windCard{ --wx-inst-a:125,211,252; --wx-inst-b:14,165,233; }
html body #lightningCard{ --wx-inst-a:253,224,71; --wx-inst-b:20,184,166; }
html body .wx-mid-instruments > #barometerCard.barometer-card{ --wx-inst-a:125,211,252; --wx-inst-b:34,197,94; }

html body #windCard::after,
html body #lightningCard::after,
html body .wx-mid-instruments > #barometerCard.barometer-card::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  border-radius:inherit !important;
  pointer-events:none !important;
  z-index:0 !important;
  background:
    linear-gradient(90deg, transparent, rgba(var(--wx-inst-a, 125,211,252), .30), transparent) top / 100% 1px no-repeat,
    radial-gradient(75% 55% at 50% -5%, rgba(var(--wx-inst-a, 125,211,252), .13), transparent 70%) !important;
}

html body #windCard > *,
html body #lightningCard > *,
html body #barometerCard > *{
  position:relative !important;
  z-index:1 !important;
}

html body #windCard > .gauge-title,
html body #lightningCard > .bubble-title,
html body #barometerCard .barometer-head{
  min-height:34px !important;
  padding:5px 11px !important;
  color:#f8fafc !important;
}

html body #windCard .gauge-rows .kv .k,
html body #lightningCard .gauge-rows .kv .k,
html body #lightningCard #ltg-battery-row .k,
html body #lightningCard #ltg-battery-row::before,
html body #barometerCard .barometer-readouts .kv .k{
  border:1px solid rgba(255,255,255,.125) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018)),
    rgba(8,15,25,.48) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045) !important;
}

html body #windCard .gauge-rows .kv .v,
html body #lightningCard .gauge-rows .kv .v,
html body #lightningCard #ltg-battery-row .v,
html body #lightningCard #ltg-battery-chip,
html body #barometerCard .barometer-readouts .kv .v{
  border:1px solid rgba(255,255,255,.155) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.025)),
    rgba(8,15,25,.62) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055), 0 3px 9px rgba(0,0,0,.16) !important;
}

html body #barometerCard .baro-unit-toggle{
  border:1px solid rgba(125,211,252,.34) !important;
  background:
    linear-gradient(180deg, rgba(125,211,252,.14), rgba(125,211,252,.045)),
    rgba(8,15,25,.58) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 4px 11px rgba(0,0,0,.18) !important;
}

@media (max-width:640px){
  html body #windCard > .gauge-title,
  html body #lightningCard > .bubble-title,
  html body #barometerCard .barometer-head{
    min-height:30px !important;
    padding:4px 8px !important;
  }
}

/* ========================== R33.30 Lightning Rings + Instrument Alignment ==========================
   Visual-only refinement folded into the existing component CSS.
   Lightning now uses a radiating-ring field; Wind/Barometer light wells are inset to avoid edge collision.
   ========================================================= */
html body #windCard > .gauge-center,
html body #lightningCard > .bubble-gauge,
html body #barometerCard .barometer-gauge{
  position:relative !important;
  isolation:isolate !important;
  overflow:visible !important;
}

html body #windCard > .gauge-center{
  min-height:calc(var(--wl-gauge-size, 190px) + 16px) !important;
  padding:4px 0 !important;
}

html body #barometerCard .barometer-gauge{
  min-height:calc(var(--wx-baro-gauge-size, 218px) + 14px) !important;
  padding:5px 0 3px !important;
}

html body #windCard > .gauge-center::before,
html body #barometerCard .barometer-gauge::before{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%, -50%) !important;
  pointer-events:none !important;
  z-index:0 !important;
  border:1px solid var(--wx-instrument-well-border) !important;
  background:var(--wx-instrument-well-ring), var(--wx-instrument-well-bg) !important;
  box-shadow:var(--wx-instrument-well-shadow) !important;
  opacity:.88 !important;
}

html body #windCard > .gauge-center::before{
  width:min(90%, calc(var(--wl-gauge-size, 190px) + 12px)) !important;
  aspect-ratio:1 / 1 !important;
  border-radius:999px !important;
}

html body #barometerCard .barometer-gauge::before{
  width:min(90%, calc(var(--wx-baro-gauge-size, 218px) + 12px)) !important;
  aspect-ratio:1 / 1 !important;
  border-radius:999px !important;
}

html body #windCard > .gauge-center::after,
html body #barometerCard .barometer-gauge::after{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%, -50%) !important;
  pointer-events:none !important;
  z-index:0 !important;
  border-radius:999px !important;
  background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.062), transparent 62%) !important;
  filter:blur(3px) !important;
  opacity:.62 !important;
}

html body #windCard > .gauge-center::after{
  width:min(66%, calc(var(--wl-gauge-size, 190px) - 2px)) !important;
  aspect-ratio:1 / 1 !important;
}

html body #barometerCard .barometer-gauge::after{
  width:min(66%, calc(var(--wx-baro-gauge-size, 218px) - 2px)) !important;
  aspect-ratio:1 / 1 !important;
}

html body #lightningCard > .bubble-gauge::before{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:min(168%, 360px) !important;
  height:min(152%, 230px) !important;
  transform:translate(-50%, -50%) !important;
  pointer-events:none !important;
  z-index:0 !important;
  border:0 !important;
  border-radius:999px !important;
  background:
    repeating-radial-gradient(ellipse at 50% 50%,
      transparent 0 20px,
      rgba(125,211,252,.115) 21px 22px,
      transparent 23px 37px),
    radial-gradient(ellipse at 50% 50%,
      rgba(255,255,255,.085),
      rgba(var(--wx-inst-a,253,224,71),.100) 27%,
      rgba(var(--wx-inst-b,20,184,166),.082) 48%,
      rgba(14,165,233,.040) 66%,
      transparent 76%) !important;
  box-shadow:none !important;
  filter:none !important;
  opacity:.74 !important;
  -webkit-mask-image:radial-gradient(ellipse at 50% 50%, #000 0 68%, transparent 100%);
  mask-image:radial-gradient(ellipse at 50% 50%, #000 0 68%, transparent 100%);
}

html body #lightningCard > .bubble-gauge::after{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:min(98%, 240px) !important;
  height:min(96%, 150px) !important;
  transform:translate(-50%, -50%) !important;
  pointer-events:none !important;
  z-index:0 !important;
  border-radius:999px !important;
  background:radial-gradient(ellipse at 50% 50%, rgba(255,255,255,.120), rgba(45,212,191,.105) 38%, rgba(14,165,233,.040) 62%, transparent 78%) !important;
  filter:blur(7px) !important;
  opacity:.66 !important;
}

html body #windCard canvas#gauge-wind,
html body #barometerCard #gauge-baro{
  position:relative !important;
  z-index:1 !important;
}

html body #lightningCard #ltgBubble{
  position:relative !important;
  z-index:2 !important;
}

@media (max-width:640px){
  html body #windCard > .gauge-center{
    min-height:calc(var(--wl-gauge-size, 150px) + 12px) !important;
  }
  html body #barometerCard .barometer-gauge{
    min-height:calc(var(--wx-baro-gauge-size, 180px) + 12px) !important;
  }
  html body #windCard > .gauge-center::before{
    width:min(88%, calc(var(--wl-gauge-size, 150px) + 8px)) !important;
  }
  html body #barometerCard .barometer-gauge::before{
    width:min(88%, calc(var(--wx-baro-gauge-size, 180px) + 8px)) !important;
  }
  html body #lightningCard > .bubble-gauge::before{
    width:min(158%, 270px) !important;
    height:min(145%, 174px) !important;
    opacity:.68 !important;
  }
  html body #lightningCard > .bubble-gauge::after{
    width:min(92%, 190px) !important;
    height:min(92%, 116px) !important;
  }
}

/* ========================== R33.30 Global Soft Red Outer Panel Glow ==========================
   Applies the shared red ambient edge/glow to all main dashboard panels.
   Stage keeps its active photo/background layer; only its outer glow is updated.
   ========================================================= */
html body main .glow-outer{
  background:var(--wx-outer-red-bg) !important;
  box-shadow:var(--wx-outer-red-shadow) !important;
}

html body main .stage,
html body .site-footer{
  border-color:rgba(239,68,68,.28) !important;
  box-shadow:
    var(--shadow),
    0 0 0 1px rgba(239,68,68,.115) inset,
    0 0 20px rgba(239,68,68,.085),
    0 0 44px rgba(185,28,28,.060) !important;
}

html body main #windCard,
html body main #lightningCard,
html body main .wx-mid-instruments > #barometerCard.barometer-card{
  background:var(--wx-instrument-red-bg) !important;
  box-shadow:var(--wx-instrument-red-shadow) !important;
}

/* ========================== True Borderless Diffused Edge/Glow Cleanup ==========================
   Removes the actual gradient/stroke edge from the header, stage, and top three panels.
   The remaining definition comes from soft outer glow only. No layout or data behavior changes.
   ========================================================= */
html body .title3d-inner,
html body main #stage.stage,
html body main #outdoorReadingsRibbon,
html body main #outdoorRibbon,
html body main #rainRibbon{
  border:0 !important;
  outline:0 !important;
  background-clip:border-box !important;
}

html body .title3d-inner{
  box-shadow:var(--wx-header-diffuse-shadow) !important;
}

html body main #stage.stage{
  box-shadow:var(--wx-stage-diffuse-shadow) !important;
}

/* R33.45 restores the thin home-dash-style gradient outlines on the three top data panels. */
html body main #outdoorReadingsRibbon::after,
html body main #outdoorRibbon::after,
html body main #rainRibbon::after{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  pointer-events:none !important;
  border-radius:inherit !important;
  padding:var(--wx45-top-outline-width, 1.25px) !important;
  background:linear-gradient(90deg, var(--c1,var(--blue)), var(--c2,var(--yellow))) !important;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  -webkit-mask-composite:xor !important;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  mask-composite:exclude !important;
  opacity:var(--wx45-top-outline-opacity,.78) !important;
  box-shadow:none !important;
}

html body main #outdoorReadingsRibbon{
  background:var(--wx-trends-panel-bg) !important;
  box-shadow:var(--wx-trends-panel-shadow) !important;
}

html body main #outdoorRibbon{
  background:var(--wx-calc-panel-bg) !important;
  box-shadow:var(--wx-calc-panel-shadow) !important;
}

html body main #rainRibbon{
  background:var(--wx-rain-panel-bg) !important;
  box-shadow:var(--wx-rain-panel-shadow) !important;
}

html body #outdoorReadingsRibbon::before,
html body #outdoorRibbon::before,
html body #rainRibbon::before{
  border:0 !important;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.030), transparent 58%),
    radial-gradient(90% 80% at 100% 0%, rgba(125,211,252,.035), transparent 62%) !important;
  box-shadow:none !important;
  opacity:.46 !important;
}

html body #outdoorReadingsRibbon > .ribbon-title,
html body #outdoorRibbon > .ribbon-title,
html body #rainRibbon > .ribbon-title{
  border-color:rgba(255,255,255,.105) !important;
  box-shadow:
    0 4px 16px rgba(0,0,0,.18),
    0 0 16px rgba(125,211,252,.080) !important;
}



/* ========================== R33.45 Visual Correction Pass ==========================
   Restores thin gradient outlines, softens data comment pills, and improves local
   forecast signal readability. CSS-only visual correction.
   ========================================================= */
html body main #outdoorReadingsRibbon,
html body main #outdoorRibbon,
html body main #rainRibbon{
  border:0 !important;
}

html body main #outdoorReadingsRibbon{ --c1:#0ea5e9; --c2:#facc15; }
html body main #outdoorRibbon{ --c1:#22c55e; --c2:#0ea5e9; }
html body main #rainRibbon{ --c1:#facc15; --c2:#0ea5e9; }

html body .has-risk-label::after{
  border:0 !important;
  outline:0 !important;
  background:var(--wx45-risk-neutral) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.105),
    inset 0 -1px 0 rgba(0,0,0,.12),
    0 2px 8px rgba(0,0,0,.14) !important;
  color:rgba(244,247,251,.86) !important;
  opacity:.88 !important;
}
html body .has-risk-label[data-risk-level="ok"]::after{ background:var(--wx45-risk-ok) !important; color:rgba(220,252,231,.90) !important; }
html body .has-risk-label[data-risk-level="info"]::after{ background:var(--wx45-risk-info) !important; color:rgba(219,234,254,.90) !important; }
html body .has-risk-label[data-risk-level="caution"]::after{ background:var(--wx45-risk-caution) !important; color:rgba(254,249,195,.90) !important; }
html body .has-risk-label[data-risk-level="warn"]::after{ background:var(--wx45-risk-warn) !important; color:rgba(255,237,213,.90) !important; }
html body .has-risk-label[data-risk-level="danger"]::after{ background:var(--wx45-risk-danger) !important; color:rgba(254,226,226,.92) !important; }
html body .has-risk-label[data-risk-level="neutral"]::after{ background:var(--wx45-risk-neutral) !important; color:rgba(229,231,235,.84) !important; }

html body #windCard,
html body #lightningCard{
  border-width:1.25px !important;
}
html body #windCard{
  border-color:rgba(125,211,252,.46) !important;
  box-shadow:
    var(--wx-instrument-shadow),
    0 0 0 1px rgba(14,165,233,.12),
    0 0 24px rgba(14,165,233,.16) !important;
}
html body #lightningCard{
  border-color:rgba(45,212,191,.46) !important;
  box-shadow:
    var(--wx-instrument-shadow),
    0 0 0 1px rgba(20,184,166,.12),
    0 0 24px rgba(20,184,166,.16) !important;
}
html body #windCard::after,
html body #lightningCard::after{
  background:
    linear-gradient(90deg, transparent, rgba(var(--wx-inst-a,125,211,252), .38), transparent) top / 100% 1px no-repeat,
    linear-gradient(180deg, rgba(var(--wx-inst-a,125,211,252), .22), transparent 18%) left top / 1px 100% no-repeat,
    linear-gradient(180deg, rgba(var(--wx-inst-b,34,197,94), .18), transparent 18%) right top / 1px 100% no-repeat,
    radial-gradient(75% 55% at 50% -5%, rgba(var(--wx-inst-a,125,211,252), .13), transparent 70%) !important;
}

html body #forecast7Panel{
  --c1:#0ea5e9;
  --c2:#22c55e;
}
html body #forecast7Panel .ribbon-body-card{
  border:1px solid rgba(125,211,252,.24) !important;
  box-shadow:
    var(--wx44-lower-body-shadow),
    0 0 0 1px rgba(34,197,94,.060),
    0 0 16px rgba(14,165,233,.09) !important;
}
html body #forecast7Panel .fct-tile{
  border:1px solid rgba(125,211,252,.24) !important;
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.065), transparent 36%),
    linear-gradient(180deg, rgba(14,165,233,.065), rgba(15,23,42,.26)),
    rgba(9,16,27,.48) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.070),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 0 0 1px rgba(34,197,94,.045),
    0 5px 13px rgba(0,0,0,.18) !important;
}
html body #forecast7Panel .fct-tile:hover{
  border-color:rgba(125,211,252,.34) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.085),
    0 0 15px rgba(14,165,233,.12),
    0 7px 16px rgba(0,0,0,.22) !important;
}

html body #forecast7Panel .forecast-intel-strip{
  align-items:stretch !important;
  gap:10px !important;
  border:1px solid rgba(125,211,252,.24) !important;
  background:
    radial-gradient(circle at 14% 10%, rgba(255,255,255,.060), transparent 34%),
    linear-gradient(135deg, rgba(14,165,233,.10), rgba(34,197,94,.050)),
    rgba(8,15,25,.42) !important;
}
html body #forecast7Panel .forecast-intel-head{
  align-self:center !important;
}
html body #forecast7Panel .forecast-intel-items{
  display:grid !important;
  grid-template-columns:1fr !important;
  grid-auto-rows:minmax(24px, auto) !important;
  align-content:center !important;
  justify-content:stretch !important;
  gap:5px !important;
  min-width:150px !important;
  flex:0 0 clamp(150px, 18vw, 210px) !important;
}
html body #forecast7Panel .forecast-intel-chip{
  display:grid !important;
  grid-template-columns:1fr !important;
  grid-auto-rows:auto !important;
  justify-items:start !important;
  gap:2px !important;
  width:100% !important;
  max-width:none !important;
  min-height:34px !important;
  padding:5px 8px !important;
  white-space:normal !important;
  text-align:left !important;
  border:0 !important;
  background:var(--wx45-risk-neutral) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.090),
    inset 0 -1px 0 rgba(0,0,0,.12),
    0 2px 8px rgba(0,0,0,.14) !important;
}
html body #forecast7Panel .forecast-intel-chip b{
  display:block !important;
  width:100% !important;
  font-size:.67rem !important;
  line-height:1.05 !important;
}
html body #forecast7Panel .forecast-intel-chip span,
html body #forecast7Panel .forecast-intel-chip em{
  display:block !important;
  width:100% !important;
  font-size:.58rem !important;
  line-height:1.05 !important;
}
html body #forecast7Panel .forecast-intel-chip--ok{ background:var(--wx45-risk-ok) !important; color:rgba(220,252,231,.92) !important; }
html body #forecast7Panel .forecast-intel-chip--info{ background:var(--wx45-risk-info) !important; color:rgba(219,234,254,.92) !important; }
html body #forecast7Panel .forecast-intel-chip--watch{ background:var(--wx45-risk-caution) !important; color:rgba(254,249,195,.92) !important; }
html body #forecast7Panel .forecast-intel-chip--warning,
html body #forecast7Panel .forecast-intel-chip--danger{ background:var(--wx45-risk-danger) !important; color:rgba(254,226,226,.92) !important; }
html body #forecast7Panel .forecast-intel-chip--unknown,
html body #forecast7Panel .forecast-intel-chip--loading,
html body #forecast7Panel .forecast-intel-chip--error{ background:var(--wx45-risk-neutral) !important; color:rgba(229,231,235,.86) !important; }

@media (max-width:760px){
  html body #forecast7Panel .forecast-intel-items{
    flex:1 1 auto !important;
    min-width:0 !important;
    width:100% !important;
  }
}


/* ========================== Hazard Open Action Pill Clip Fix ==========================
   Keeps hazard advisory rows internally contained while reserving enough right-side
   space for the Open action badge, including when a vertical scrollbar is present.
   ========================================================= */
html body #hazardsPanel #hazardChips.alert-feed,
html body #hazardsPanel .hazard-chips.alert-feed{
  padding-right:12px !important;
  scrollbar-gutter:stable !important;
}

html body #hazardsPanel #pagasaLocalList.haz-local-list.alert-feed,
html body #hazardsPanel .haz-local-list.alert-feed{
  padding-right:12px !important;
  scrollbar-gutter:stable !important;
}

html body #hazardsPanel #hazardChips.alert-feed .pill.alert-feed-row[role="link"],
html body #hazardsPanel #hazardChips.alert-feed .pill.alert-feed-row[title*="Open details"],
html body #hazardsPanel .hazard-chips.alert-feed .pill.alert-feed-row[role="link"],
html body #hazardsPanel .hazard-chips.alert-feed .pill.alert-feed-row[title*="Open details"],
html body #hazardsPanel #pagasaLocalList.haz-local-list.alert-feed .pill.alert-feed-row[role="link"],
html body #hazardsPanel #pagasaLocalList.haz-local-list.alert-feed .pill.alert-feed-row[title*="Open details"],
html body #hazardsPanel .haz-local-list.alert-feed .pill.alert-feed-row[role="link"],
html body #hazardsPanel .haz-local-list.alert-feed .pill.alert-feed-row[title*="Open details"]{
  padding-right:66px !important;
  overflow:hidden !important;
}

html body #hazardsPanel #hazardChips.alert-feed .pill.alert-feed-row[role="link"]::after,
html body #hazardsPanel #hazardChips.alert-feed .pill.alert-feed-row[title*="Open details"]::after,
html body #hazardsPanel .hazard-chips.alert-feed .pill.alert-feed-row[role="link"]::after,
html body #hazardsPanel .hazard-chips.alert-feed .pill.alert-feed-row[title*="Open details"]::after,
html body #hazardsPanel #pagasaLocalList.haz-local-list.alert-feed .pill.alert-feed-row[role="link"]::after,
html body #hazardsPanel #pagasaLocalList.haz-local-list.alert-feed .pill.alert-feed-row[title*="Open details"]::after,
html body #hazardsPanel .haz-local-list.alert-feed .pill.alert-feed-row[role="link"]::after,
html body #hazardsPanel .haz-local-list.alert-feed .pill.alert-feed-row[title*="Open details"]::after{
  content:"Open" !important;
  position:absolute !important;
  right:13px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:42px !important;
  min-width:42px !important;
  max-width:42px !important;
  height:19px !important;
  padding:0 !important;
  box-sizing:border-box !important;
  border-radius:999px !important;
  overflow:visible !important;
  white-space:nowrap !important;
  text-overflow:clip !important;
  color:#e6fbff !important;
  font-size:.64rem !important;
  font-weight:900 !important;
  line-height:1 !important;
  letter-spacing:.01em !important;
  background:rgba(255,255,255,.080) !important;
  border:1px solid rgba(255,255,255,.13) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 0 9px color-mix(in oklab, var(--hz-chip, #60a5fa) 16%, transparent) !important;
}

@media (max-width:760px){
  html body #hazardsPanel #hazardChips.alert-feed,
  html body #hazardsPanel .hazard-chips.alert-feed,
  html body #hazardsPanel #pagasaLocalList.haz-local-list.alert-feed,
  html body #hazardsPanel .haz-local-list.alert-feed{
    padding-right:2px !important;
    scrollbar-gutter:auto !important;
  }

  html body #hazardsPanel #hazardChips.alert-feed .pill.alert-feed-row[role="link"],
  html body #hazardsPanel #hazardChips.alert-feed .pill.alert-feed-row[title*="Open details"],
  html body #hazardsPanel .hazard-chips.alert-feed .pill.alert-feed-row[role="link"],
  html body #hazardsPanel .hazard-chips.alert-feed .pill.alert-feed-row[title*="Open details"],
  html body #hazardsPanel #pagasaLocalList.haz-local-list.alert-feed .pill.alert-feed-row[role="link"],
  html body #hazardsPanel #pagasaLocalList.haz-local-list.alert-feed .pill.alert-feed-row[title*="Open details"],
  html body #hazardsPanel .haz-local-list.alert-feed .pill.alert-feed-row[role="link"],
  html body #hazardsPanel .haz-local-list.alert-feed .pill.alert-feed-row[title*="Open details"]{
    padding-right:58px !important;
  }

  html body #hazardsPanel #hazardChips.alert-feed .pill.alert-feed-row[role="link"]::after,
  html body #hazardsPanel #hazardChips.alert-feed .pill.alert-feed-row[title*="Open details"]::after,
  html body #hazardsPanel .hazard-chips.alert-feed .pill.alert-feed-row[role="link"]::after,
  html body #hazardsPanel .hazard-chips.alert-feed .pill.alert-feed-row[title*="Open details"]::after,
  html body #hazardsPanel #pagasaLocalList.haz-local-list.alert-feed .pill.alert-feed-row[role="link"]::after,
  html body #hazardsPanel #pagasaLocalList.haz-local-list.alert-feed .pill.alert-feed-row[title*="Open details"]::after,
  html body #hazardsPanel .haz-local-list.alert-feed .pill.alert-feed-row[role="link"]::after,
  html body #hazardsPanel .haz-local-list.alert-feed .pill.alert-feed-row[title*="Open details"]::after{
    right:9px !important;
    width:39px !important;
    min-width:39px !important;
    max-width:39px !important;
    height:18px !important;
    font-size:.60rem !important;
  }
}

/* ========================== R33.43 Uniform Visual System Pass 1 ==========================
   CSS-only home-dash-inspired normalization for status pills, titles, main card
   surfaces, data rows, and risk chips. No scripts, HTML behavior, endpoints,
   or picture rotation were changed.
   ========================================================= */
html body .status-bar{
  border:0 !important;
  outline:0 !important;
  background:
    radial-gradient(circle at 8% 28%, rgba(255,255,255,.13), transparent 24%),
    linear-gradient(90deg,
      rgba(6,78,59,.66) 0%,
      rgba(14,116,144,.50) 42%,
      rgba(20,184,166,.40) 72%,
      rgba(14,165,233,.34) 100%
    ) !important;
  box-shadow:
    0 5px 18px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 0 20px rgba(34,211,238,.075) !important;
}

html body .status-bar #topClock,
html body .status-bar .pill,
html body .status-bar button.pill,
html body .status-bar #wxHeroSummary{
  border:0 !important;
  outline:0 !important;
  color:var(--wx43-soft-text) !important;
  background:var(--wx43-chip-bg) !important;
  box-shadow:var(--wx43-glass-edge), 0 0 13px rgba(125,211,252,.11) !important;
  text-shadow:none !important;
  -webkit-text-stroke:0 transparent !important;
  backdrop-filter:blur(9px) saturate(1.18) !important;
  -webkit-backdrop-filter:blur(9px) saturate(1.18) !important;
}

html body .status-bar #moonPill{
  background:
    radial-gradient(circle at 20% 18%, rgba(255,255,255,.22), transparent 34%),
    linear-gradient(135deg, rgba(96,165,250,.18), rgba(167,139,250,.15) 54%, rgba(45,212,191,.08)),
    rgba(17,24,39,.42) !important;
  color:#f5f3ff !important;
  box-shadow:var(--wx43-glass-edge), 0 0 15px rgba(167,139,250,.13) !important;
}

html body .status-bar #hazDupPill.haz-summary-pill,
html body .status-bar #status[data-state="live"],
html body .status-bar #status.is-live,
html body [data-state="live"].pill,
html body .is-live.pill{
  color:#86efac !important;
  -webkit-text-fill-color:#86efac !important;
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.16), transparent 33%),
    linear-gradient(90deg, rgba(34,197,94,.20), rgba(20,184,166,.11), rgba(14,165,233,.07)),
    rgba(6,78,59,.38) !important;
  box-shadow:var(--wx43-glass-edge), 0 0 13px rgba(34,232,121,.12) !important;
}

html body .status-bar #status[data-state="error"],
html body .status-bar #status.is-error{
  color:#fca5a5 !important;
  -webkit-text-fill-color:#fca5a5 !important;
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.14), transparent 33%),
    linear-gradient(90deg, rgba(239,68,68,.16), rgba(249,115,22,.08), rgba(14,165,233,.05)),
    rgba(69,10,10,.30) !important;
  box-shadow:var(--wx43-glass-edge), 0 0 13px rgba(239,68,68,.12) !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{
  background:#22e879 !important;
  color:#22e879 !important;
  border:0 !important;
  box-shadow:0 0 0 1px rgba(220,252,231,.24), 0 0 8px rgba(34,232,121,.62) !important;
}

html body .ribbon.ribbon--panel > .ribbon-title,
html body #forecast7Panel > .ribbon-title,
html body #metarPanel > .ribbon-title,
html body #hazardsPanel > .ribbon-title,
html body #quakesPanel > .ribbon-title,
html body .solar-combo-title,
html body #windCard > .gauge-title,
html body #lightningCard > .bubble-title,
html body #barometerCard .barometer-head,
html body .tube-title{
  border:0 !important;
  outline:0 !important;
  border-radius:999px !important;
  color:var(--wx43-soft-text) !important;
  -webkit-text-fill-color:var(--wx43-soft-text) !important;
  background:var(--wx43-title-bg) !important;
  box-shadow:var(--wx43-title-depth), 0 0 10px rgba(125,211,252,.060) !important;
  text-shadow:none !important;
  -webkit-text-stroke:0 transparent !important;
}

html body .ribbon-title .title-text,
html body #forecast7Panel > .ribbon-title .title-text,
html body #metarPanel > .ribbon-title .title-text,
html body #hazardsPanel > .ribbon-title .title-text,
html body #quakesPanel > .ribbon-title .title-text{
  color:var(--wx43-soft-text) !important;
  -webkit-text-fill-color:var(--wx43-soft-text) !important;
  background:none !important;
  background-image:none !important;
  text-shadow:none !important;
}

html body .ribbon-title .glass-ico,
html body .ribbon-title .title-ico,
html body #forecast7Panel > .ribbon-title svg,
html body #metarPanel > .ribbon-title svg,
html body #hazardsPanel > .ribbon-title svg,
html body #quakesPanel > .ribbon-title svg{
  filter:none !important;
  opacity:.95 !important;
}

html body .ribbon-title .pill,
html body #forecast7Panel .ribbon-title .pill,
html body #metarPanel .ribbon-title .pill,
html body #hazardsPanel .ribbon-title .pill,
html body #quakesPanel .ribbon-title .pill{
  border:0 !important;
  outline:0 !important;
  background:var(--wx43-chip-bg) !important;
  box-shadow:var(--wx43-glass-edge) !important;
  text-shadow:none !important;
}

html body .ribbon-body-card,
html body #forecast7Panel .ribbon-body-card,
html body #metarPanel .ribbon-body-card,
html body #hazardsPanel .ribbon-body-card,
html body #quakesPanel .ribbon-body-card,
html body #windCard,
html body #lightningCard,
html body #solarComboCard,
html body #barometerCard{
  border:0 !important;
  outline:0 !important;
  background:var(--wx43-card-bg) !important;
  box-shadow:var(--wx43-panel-depth), 0 0 20px rgba(125,211,252,.060) !important;
  backdrop-filter:blur(8px) saturate(1.08) !important;
  -webkit-backdrop-filter:blur(8px) saturate(1.08) !important;
}

html body #windCard{
  box-shadow:var(--wx43-panel-depth), 0 0 22px rgba(59,130,246,.15), inset 0 0 30px rgba(59,130,246,.075) !important;
}
html body #lightningCard{
  box-shadow:var(--wx43-panel-depth), 0 0 22px rgba(20,184,166,.15), inset 0 0 30px rgba(20,184,166,.075) !important;
}
html body #solarComboCard{
  box-shadow:var(--wx43-panel-depth), 0 0 20px rgba(250,204,21,.10), 0 0 20px rgba(168,85,247,.070), inset 0 0 28px rgba(250,204,21,.045) !important;
}
html body #barometerCard{
  box-shadow:var(--wx43-panel-depth), 0 0 22px rgba(34,197,94,.12), inset 0 0 30px rgba(125,211,252,.055) !important;
}

html body .ribbon-label,
html body .ribbon-value,
html body .gauge-rows .kv .k,
html body .gauge-rows .kv .v,
html body #barometerCard .barometer-readouts .kv .k,
html body #barometerCard .barometer-readouts .kv .v,
html body .nowcast-row .kv .k,
html body .nowcast-row .kv .v,
html body .tube-value,
html body .solar-combo-card .tube-card .tube-title,
html body .solar-combo-card .tube-card .tube-value{
  border:0 !important;
  outline:0 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.075),
    inset 0 -1px 0 rgba(0,0,0,.15),
    0 1px 2px rgba(0,0,0,.16) !important;
  text-shadow:none !important;
}

html body .ribbon-label,
html body .gauge-rows .kv .k,
html body #barometerCard .barometer-readouts .kv .k,
html body .nowcast-row .kv .k,
html body .solar-combo-card .tube-card .tube-title{
  color:var(--wx43-muted-text) !important;
  background:var(--wx43-row-label-bg) !important;
  font-weight:800 !important;
}

html body .ribbon-value,
html body .gauge-rows .kv .v,
html body #barometerCard .barometer-readouts .kv .v,
html body .nowcast-row .kv .v,
html body .tube-value,
html body .solar-combo-card .tube-card .tube-value{
  color:rgba(245,250,255,.94) !important;
  background:var(--wx43-row-value-bg) !important;
  font-weight:850 !important;
}

html body .spark{
  border:0 !important;
  outline:0 !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.038), rgba(255,255,255,.012)),
    rgba(15,20,26,.18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.065),
    inset 0 -1px 0 rgba(0,0,0,.14),
    0 1px 2px rgba(0,0,0,.16) !important;
}
html body .spark rect.bg{ stroke:transparent !important; }

html body .has-risk-label{
  display:flex !important;
  align-items:center !important;
  min-width:0 !important;
  overflow:hidden !important;
  white-space:nowrap !important;
}
html body .has-risk-label::after{
  flex:1 1 auto !important;
  min-width:4.8em !important;
  max-width:none !important;
  margin-left:7px !important;
  padding:2px 8px !important;
  border:0 !important;
  outline:0 !important;
  border-radius:999px !important;
  color:rgba(244,247,251,.86) !important;
  background:var(--wx43-risk-neutral) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.070),
    inset 0 -1px 0 rgba(0,0,0,.10),
    0 0 8px rgba(125,211,252,.045) !important;
  text-shadow:none !important;
  opacity:.82 !important;
  font-size:.58rem !important;
  font-weight:800 !important;
  letter-spacing:.02em !important;
  line-height:1 !important;
  text-align:center !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}
html body .has-risk-label[data-risk-level="ok"]::after{ color:rgba(220,252,231,.90) !important; background:var(--wx43-risk-ok) !important; }
html body .has-risk-label[data-risk-level="info"]::after{ color:rgba(219,234,254,.90) !important; background:var(--wx43-risk-info) !important; }
html body .has-risk-label[data-risk-level="caution"]::after{ color:rgba(254,249,195,.90) !important; background:var(--wx43-risk-caution) !important; }
html body .has-risk-label[data-risk-level="warn"]::after{ color:rgba(255,237,213,.90) !important; background:var(--wx43-risk-warn) !important; }
html body .has-risk-label[data-risk-level="danger"]::after{ color:rgba(254,226,226,.92) !important; background:var(--wx43-risk-danger) !important; }
html body .has-risk-label[data-risk-level="neutral"]::after{ color:rgba(229,231,235,.82) !important; background:var(--wx43-risk-neutral) !important; }

@media (max-width:540px){
  html body .has-risk-label{
    flex-wrap:wrap !important;
    row-gap:3px !important;
  }
  html body .has-risk-label::after{
    flex-basis:100% !important;
    width:100% !important;
    margin-left:0 !important;
    margin-top:2px !important;
  }
}

/* ========================== R33.45 Lower Panel Uniformity Pass 2 ==========================
   Scoped lower-dashboard visual normalization for forecast, aviation, hazards,
   and quake sections. CSS-only; feed behavior and controls are unchanged.
   ========================================================= */
html body #forecast7Panel{ --wx44-a:14,165,233; --wx44-b:34,197,94; }
html body #metarPanel{ --wx44-a:56,189,248; --wx44-b:34,197,94; }
html body #hazardsPanel{ --wx44-a:239,68,68; --wx44-b:250,204,21; }
html body #quakesPanel{ --wx44-a:96,165,250; --wx44-b:168,85,247; }

html body #forecast7Panel,
html body #metarPanel,
html body #hazardsPanel,
html body #quakesPanel{
  border:0 !important;
  outline:0 !important;
  background:var(--wx44-lower-panel-bg) !important;
  box-shadow:var(--wx44-lower-panel-shadow) !important;
}

html body #forecast7Panel > .ribbon-title,
html body #metarPanel > .ribbon-title,
html body #hazardsPanel > .ribbon-title,
html body #quakesPanel > .ribbon-title,
html body #metarPanel .taf-section-head{
  border:0 !important;
  outline:0 !important;
  background:var(--wx44-lower-title-bg) !important;
  box-shadow:var(--wx43-title-depth), 0 0 12px rgba(var(--wx44-a,125,211,252),.075) !important;
  color:var(--wx43-soft-text) !important;
  -webkit-text-fill-color:var(--wx43-soft-text) !important;
}

html body #forecast7Panel .ribbon-title .pill,
html body #metarPanel .ribbon-title .pill,
html body #hazardsPanel .ribbon-title .pill,
html body #quakesPanel .ribbon-title .pill,
html body #metarPanel .taf-section-head .pill{
  border:0 !important;
  background:var(--wx44-lower-chip-bg) !important;
  box-shadow:var(--wx43-glass-edge), 0 0 10px rgba(var(--wx44-a,125,211,252),.060) !important;
}

html body #forecast7Panel .ribbon-body-card,
html body #metarPanel .ribbon-body-card,
html body #hazardsPanel .ribbon-body-card,
html body #quakesPanel .ribbon-body-card,
html body #metarPanel .metar-body-card,
html body #hazardsPanel .hazards-body-card{
  border:0 !important;
  outline:0 !important;
  background:var(--wx44-lower-body-bg) !important;
  box-shadow:var(--wx44-lower-body-shadow) !important;
  border-radius:15px !important;
}

html body #forecast7Panel .forecast7-meta-row,
html body #forecast7Panel .forecast-intel-strip,
html body #forecast7Panel .fct-tile,
html body #metarPanel .metar-target-summary,
html body #metarPanel .taf-target-summary,
html body #metarPanel .metar-strip,
html body #metarPanel .taf-strip,
html body #metarPanel .metar-card,
html body #metarPanel .taf-card,
html body #metarPanel .taf-section,
html body #metarPanel .metar-raw-details,
html body #hazardsPanel .haz-severity-summary,
html body #hazardsPanel .haz-local-watch,
html body #hazardsPanel .haz-section-head,
html body #hazardsPanel .hazard-chips.alert-feed,
html body #hazardsPanel .haz-local-list.alert-feed,
html body #hazardsPanel .nowcast-row,
html body #quakesPanel .quakes-strip,
html body #quakesPanel .q-label.small,
html body #quakesPanel .quake-chip,
html body #quakesPanel .q-chip,
html body .panel-note{
  border:0 !important;
  outline:0 !important;
  background:var(--wx44-lower-item-bg) !important;
  box-shadow:var(--wx44-lower-item-shadow) !important;
  background-clip:padding-box !important;
}

html body .panel-note{
  position:relative !important;
  color:rgba(234,246,255,.92) !important;
  border-left:0 !important;
  padding:7px 10px !important;
}
html body .panel-note::before{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  top:8px !important;
  bottom:8px !important;
  width:3px !important;
  border-radius:999px !important;
  background:rgba(var(--wx44-a,125,211,252),.54) !important;
  box-shadow:0 0 10px rgba(var(--wx44-a,125,211,252),.18) !important;
}
html body #metarPanel .panel-note{ --wx44-a:56,189,248; --wx44-b:34,197,94; }
html body #hazardsPanel .panel-note{ --wx44-a:239,68,68; --wx44-b:250,204,21; }
html body #quakesPanel .panel-note{ --wx44-a:96,165,250; --wx44-b:168,85,247; }

html body #forecast7Panel .fct-tile{
  min-height:96px !important;
  padding:8px 7px !important;
  border-radius:13px !important;
}
html body #forecast7Panel .fct-tile:hover{
  transform:translateY(-1px) !important;
  box-shadow:var(--wx44-lower-item-shadow), 0 0 18px rgba(var(--wx44-a,14,165,233),.11) !important;
}
html body #forecast7Panel .fct-tile .pop{
  border:0 !important;
  color:rgba(238,251,255,.95) !important;
  background:var(--wx44-lower-chip-bg) !important;
  box-shadow:var(--wx43-glass-edge) !important;
  text-shadow:none !important;
}
html body #forecast7Panel .forecast7-meta-row{
  min-height:30px !important;
  padding:6px 10px !important;
  color:var(--wx44-lower-muted) !important;
}
html body #forecast7Panel .forecast7-meta-row strong,
html body #forecast7Panel .forecast7-meta-source{
  color:var(--wx43-soft-text) !important;
}
html body #forecast7Panel .forecast-intel-strip{
  padding:9px 10px !important;
  gap:8px !important;
}
html body #forecast7Panel .forecast-intel-head{
  padding-bottom:2px !important;
}
html body #forecast7Panel .forecast-intel-chip{
  border:0 !important;
  background:var(--wx44-lower-chip-bg) !important;
  box-shadow:var(--wx43-glass-edge), 0 0 10px rgba(var(--wx44-a,14,165,233),.060) !important;
}

html body #metarPanel .metar-target-summary,
html body #metarPanel .taf-target-summary{
  padding:6px 7px !important;
  border-radius:13px !important;
}
html body #metarPanel .metar-mini-pill,
html body #metarPanel .taf-section-head .pill{
  border:0 !important;
  background:var(--wx44-lower-chip-bg) !important;
  box-shadow:var(--wx43-glass-edge) !important;
}
html body #metarPanel .metar-strip,
html body #metarPanel .taf-strip,
html body #quakesPanel .quakes-strip{
  scrollbar-color:rgba(var(--wx44-a,125,211,252),.34) rgba(255,255,255,.045) !important;
}
html body #metarPanel .metar-strip::-webkit-scrollbar-thumb,
html body #metarPanel .taf-strip::-webkit-scrollbar-thumb,
html body #quakesPanel .quakes-strip::-webkit-scrollbar-thumb{
  background:rgba(var(--wx44-a,125,211,252),.30) !important;
}
html body #metarPanel .metar-card,
html body #metarPanel .taf-card{
  border-radius:13px !important;
  border-top:1px solid rgba(var(--wx44-a,56,189,248),.16) !important;
}
html body #metarPanel .metar-card.is-target,
html body #metarPanel .taf-card.is-target{
  box-shadow:var(--wx44-lower-item-shadow), 0 0 16px rgba(56,189,248,.13) !important;
}
html body #metarPanel .metar-card.is-fallback,
html body #metarPanel .taf-card.is-fallback{
  box-shadow:var(--wx44-lower-item-shadow), 0 0 16px rgba(250,204,21,.11) !important;
}
html body #metarPanel .taf-section{
  margin-top:9px !important;
  padding:9px !important;
  border-radius:15px !important;
}
html body #metarPanel .metar-raw-details summary{
  color:rgba(224,242,254,.92) !important;
  background:var(--wx44-lower-chip-bg) !important;
  border:0 !important;
  box-shadow:var(--wx43-glass-edge) !important;
}
html body #metarPanel .metar-raw-box{
  background:rgba(5,12,22,.42) !important;
  border:0 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055) !important;
}

html body #hazardsPanel .haz-severity-summary,
html body #hazardsPanel .haz-local-watch,
html body #hazardsPanel .haz-section-head,
html body #hazardsPanel .hazard-chips.alert-feed,
html body #hazardsPanel .haz-local-list.alert-feed,
html body #hazardsPanel .nowcast-row{
  border-radius:13px !important;
}
html body #hazardsPanel .haz-local-status,
html body #hazardsPanel .haz-count,
html body #hazardsPanel .haz-section-sub{
  border:0 !important;
  background:var(--wx44-lower-chip-bg) !important;
  box-shadow:var(--wx43-glass-edge) !important;
}
html body #hazardsPanel .hazard-chips .pill.alert-feed-row,
html body #hazardsPanel .haz-local-list .pill.alert-feed-row{
  border:0 !important;
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.13), transparent 34%),
    linear-gradient(90deg, rgba(var(--wx44-a,239,68,68),.13), rgba(var(--wx44-b,250,204,21),.060)),
    rgba(15,23,42,.36) !important;
  box-shadow:var(--wx43-glass-edge), 0 0 10px rgba(var(--wx44-a,239,68,68),.055) !important;
}
html body #hazardsPanel #hazardChips.alert-feed .pill.alert-feed-row[role="link"]::after,
html body #hazardsPanel #hazardChips.alert-feed .pill.alert-feed-row[title*="Open details"]::after,
html body #hazardsPanel .hazard-chips.alert-feed .pill.alert-feed-row[role="link"]::after,
html body #hazardsPanel .hazard-chips.alert-feed .pill.alert-feed-row[title*="Open details"]::after,
html body #hazardsPanel #pagasaLocalList.haz-local-list.alert-feed .pill.alert-feed-row[role="link"]::after,
html body #hazardsPanel #pagasaLocalList.haz-local-list.alert-feed .pill.alert-feed-row[title*="Open details"]::after,
html body #hazardsPanel .haz-local-list.alert-feed .pill.alert-feed-row[role="link"]::after,
html body #hazardsPanel .haz-local-list.alert-feed .pill.alert-feed-row[title*="Open details"]::after{
  border:0 !important;
  background:var(--wx44-lower-chip-bg) !important;
  box-shadow:var(--wx43-glass-edge), 0 0 8px rgba(var(--wx44-a,239,68,68),.070) !important;
}
html body #hazardsPanel .nowcast-row .kv .k,
html body #hazardsPanel .nowcast-row .kv .v{
  border:0 !important;
  background:var(--wx43-row-value-bg) !important;
  box-shadow:var(--wx43-glass-edge) !important;
}
html body #hazardsPanel .nowcast-row .kv .k{
  color:var(--wx43-muted-text) !important;
  background:var(--wx43-row-label-bg) !important;
}

html body #quakesPanel .q-row{
  gap:6px !important;
}
html body #quakesPanel .q-label.small{
  justify-self:start !important;
  min-height:24px !important;
  padding:4px 10px !important;
  border-radius:999px !important;
  color:var(--wx43-soft-text) !important;
}
html body #quakesPanel .quake-chip,
html body #quakesPanel .q-chip{
  border-radius:13px !important;
  border-top:1px solid rgba(var(--wx44-a,96,165,250),.16) !important;
}
html body #quakesPanel .q-mag{
  border:0 !important;
  box-shadow:var(--wx43-glass-edge) !important;
}
html body #quakesPanel .q-place{
  color:rgba(236,248,255,.92) !important;
}
html body #quakesPanel .q-meta span:last-child{
  color:var(--wx43-muted-text) !important;
}

@media (max-width:760px){
  html body #forecast7Panel .fct-tile{
    min-height:88px !important;
  }
  html body #forecast7Panel .forecast-intel-strip,
  html body #metarPanel .taf-section,
  html body #hazardsPanel .haz-local-watch,
  html body #hazardsPanel .hazard-chips.alert-feed,
  html body #hazardsPanel .haz-local-list.alert-feed{
    padding:7px !important;
  }
}

/* ========================== R33.45 Final Visual Correction Precedence ==========================
   Keeps the corrections above active after the lower-panel normalization block.
   ========================================================= */
html body .has-risk-label::after{
  background:var(--wx45-risk-neutral) !important;
  border:0 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.105),
    inset 0 -1px 0 rgba(0,0,0,.12),
    0 2px 8px rgba(0,0,0,.14) !important;
  opacity:.88 !important;
}
html body .has-risk-label[data-risk-level="ok"]::after{ background:var(--wx45-risk-ok) !important; color:rgba(220,252,231,.90) !important; }
html body .has-risk-label[data-risk-level="info"]::after{ background:var(--wx45-risk-info) !important; color:rgba(219,234,254,.90) !important; }
html body .has-risk-label[data-risk-level="caution"]::after{ background:var(--wx45-risk-caution) !important; color:rgba(254,249,195,.90) !important; }
html body .has-risk-label[data-risk-level="warn"]::after{ background:var(--wx45-risk-warn) !important; color:rgba(255,237,213,.90) !important; }
html body .has-risk-label[data-risk-level="danger"]::after{ background:var(--wx45-risk-danger) !important; color:rgba(254,226,226,.92) !important; }
html body .has-risk-label[data-risk-level="neutral"]::after{ background:var(--wx45-risk-neutral) !important; color:rgba(229,231,235,.84) !important; }

html body #windCard{
  border:1.25px solid rgba(125,211,252,.46) !important;
  box-shadow:
    var(--wx43-panel-depth),
    0 0 0 1px rgba(14,165,233,.12),
    0 0 24px rgba(14,165,233,.16),
    inset 0 0 30px rgba(59,130,246,.075) !important;
}
html body #lightningCard{
  border:1.25px solid rgba(45,212,191,.46) !important;
  box-shadow:
    var(--wx43-panel-depth),
    0 0 0 1px rgba(20,184,166,.12),
    0 0 24px rgba(20,184,166,.16),
    inset 0 0 30px rgba(20,184,166,.075) !important;
}

html body #forecast7Panel .ribbon-body-card{
  border:1px solid rgba(125,211,252,.24) !important;
  box-shadow:
    var(--wx44-lower-body-shadow),
    0 0 0 1px rgba(34,197,94,.060),
    0 0 16px rgba(14,165,233,.09) !important;
}
html body #forecast7Panel .fct-tile{
  border:1px solid rgba(125,211,252,.24) !important;
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.065), transparent 36%),
    linear-gradient(180deg, rgba(14,165,233,.065), rgba(15,23,42,.26)),
    rgba(9,16,27,.48) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.070),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 0 0 1px rgba(34,197,94,.045),
    0 5px 13px rgba(0,0,0,.18) !important;
}

html body #forecast7Panel .forecast-intel-strip{
  align-items:stretch !important;
  gap:10px !important;
  border:1px solid rgba(125,211,252,.24) !important;
  background:
    radial-gradient(circle at 14% 10%, rgba(255,255,255,.060), transparent 34%),
    linear-gradient(135deg, rgba(14,165,233,.10), rgba(34,197,94,.050)),
    rgba(8,15,25,.42) !important;
}
html body #forecast7Panel .forecast-intel-items{
  display:grid !important;
  grid-template-columns:1fr !important;
  grid-auto-rows:minmax(24px, auto) !important;
  align-content:center !important;
  justify-content:stretch !important;
  gap:5px !important;
  min-width:150px !important;
  flex:0 0 clamp(150px, 18vw, 210px) !important;
}
html body #forecast7Panel .forecast-intel-chip{
  display:grid !important;
  grid-template-columns:1fr !important;
  grid-auto-rows:auto !important;
  justify-items:start !important;
  gap:2px !important;
  width:100% !important;
  max-width:none !important;
  min-height:34px !important;
  padding:5px 8px !important;
  white-space:normal !important;
  text-align:left !important;
  border:0 !important;
  background:var(--wx45-risk-neutral) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.090),
    inset 0 -1px 0 rgba(0,0,0,.12),
    0 2px 8px rgba(0,0,0,.14) !important;
}
html body #forecast7Panel .forecast-intel-chip b,
html body #forecast7Panel .forecast-intel-chip span,
html body #forecast7Panel .forecast-intel-chip em{
  display:block !important;
  width:100% !important;
  line-height:1.05 !important;
}
html body #forecast7Panel .forecast-intel-chip b{ font-size:.67rem !important; }
html body #forecast7Panel .forecast-intel-chip span,
html body #forecast7Panel .forecast-intel-chip em{ font-size:.58rem !important; }
html body #forecast7Panel .forecast-intel-chip--ok{ background:var(--wx45-risk-ok) !important; color:rgba(220,252,231,.92) !important; }
html body #forecast7Panel .forecast-intel-chip--info{ background:var(--wx45-risk-info) !important; color:rgba(219,234,254,.92) !important; }
html body #forecast7Panel .forecast-intel-chip--watch{ background:var(--wx45-risk-caution) !important; color:rgba(254,249,195,.92) !important; }
html body #forecast7Panel .forecast-intel-chip--warning,
html body #forecast7Panel .forecast-intel-chip--danger{ background:var(--wx45-risk-danger) !important; color:rgba(254,226,226,.92) !important; }
html body #forecast7Panel .forecast-intel-chip--unknown,
html body #forecast7Panel .forecast-intel-chip--loading,
html body #forecast7Panel .forecast-intel-chip--error{ background:var(--wx45-risk-neutral) !important; color:rgba(229,231,235,.86) !important; }

@media (max-width:760px){
  html body #forecast7Panel .forecast-intel-items{
    flex:1 1 auto !important;
    min-width:0 !important;
    width:100% !important;
  }
}

/* ========================== R33.47 Top Glow / Border Balance ========================== */
html body main #outdoorReadingsRibbon::after,
html body main #outdoorRibbon::after,
html body main #rainRibbon::after{
  padding:1.15px !important;
  opacity:1 !important;
  background:var(--wx47-top-solid-outline, rgba(125,211,252,.52)) !important;
}

html body main #outdoorReadingsRibbon{
  --wx47-top-solid-outline:rgba(14,165,233,.52);
  box-shadow:
    var(--wx-trends-panel-shadow),
    0 0 0 1px rgba(14,165,233,.08),
    0 0 22px rgba(14,165,233,.15) !important;
}

html body main #outdoorRibbon{
  --wx47-top-solid-outline:rgba(34,197,94,.50);
  box-shadow:
    var(--wx-calc-panel-shadow),
    0 0 0 1px rgba(34,197,94,.08),
    0 0 22px rgba(34,197,94,.14) !important;
}

html body main #rainRibbon{
  --wx47-top-solid-outline:rgba(56,189,248,.52);
  box-shadow:
    var(--wx-rain-panel-shadow),
    0 0 0 1px rgba(56,189,248,.08),
    0 0 22px rgba(56,189,248,.15) !important;
}

html body #forecast7Panel .forecast-intel-items{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:wrap !important;
  align-items:stretch !important;
  justify-content:flex-end !important;
  gap:6px !important;
  min-width:min(100%, 360px) !important;
  flex:1 1 360px !important;
}

html body #forecast7Panel .forecast-intel-chip{
  display:grid !important;
  grid-template-columns:1fr !important;
  grid-auto-rows:auto !important;
  justify-items:start !important;
  align-content:center !important;
  gap:2px !important;
  flex:1 1 104px !important;
  width:auto !important;
  min-width:104px !important;
  max-width:150px !important;
  min-height:34px !important;
  padding:5px 8px !important;
  white-space:normal !important;
  text-align:left !important;
}

html body #forecast7Panel .forecast-intel-chip b,
html body #forecast7Panel .forecast-intel-chip span,
html body #forecast7Panel .forecast-intel-chip em{
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

@media (max-width:760px){
  html body #forecast7Panel .forecast-intel-items{
    justify-content:stretch !important;
    flex:1 1 100% !important;
    min-width:0 !important;
    width:100% !important;
  }
  html body #forecast7Panel .forecast-intel-chip{
    flex:1 1 30% !important;
    min-width:96px !important;
    max-width:none !important;
  }
}

@media (max-width:420px){
  html body #forecast7Panel .forecast-intel-chip{
    flex:1 1 100% !important;
  }
}


/* ========================== R33.48 Comment Pill Tone Refinement ==========================
   Makes comment/risk data pills lighter and more transparent, with the value text carrying
   the state color instead of a solid pill fill.
   ========================================================= */
:root{
  --wx48-risk-value-neutral:rgba(239,247,255,.92);
  --wx48-risk-value-ok:rgba(134,239,172,.96);
  --wx48-risk-value-info:rgba(147,197,253,.96);
  --wx48-risk-value-caution:rgba(253,224,71,.96);
  --wx48-risk-value-warn:rgba(251,146,60,.96);
  --wx48-risk-value-danger:rgba(252,165,165,.96);

  --wx48-risk-pill-neutral:linear-gradient(90deg, rgba(148,163,184,.095), rgba(148,163,184,.030));
  --wx48-risk-pill-ok:linear-gradient(90deg, rgba(34,197,94,.115), rgba(34,197,94,.028));
  --wx48-risk-pill-info:linear-gradient(90deg, rgba(59,130,246,.115), rgba(59,130,246,.028));
  --wx48-risk-pill-caution:linear-gradient(90deg, rgba(250,204,21,.125), rgba(250,204,21,.030));
  --wx48-risk-pill-warn:linear-gradient(90deg, rgba(249,115,22,.125), rgba(249,115,22,.030));
  --wx48-risk-pill-danger:linear-gradient(90deg, rgba(239,68,68,.135), rgba(239,68,68,.032));
}

html body .ribbon-value.has-risk-label,
html body .gauge-rows .v.has-risk-label,
html body .tube-value.has-risk-label{
  color:var(--wx48-risk-value-neutral) !important;
}
html body .has-risk-label[data-risk-level="ok"]{ color:var(--wx48-risk-value-ok) !important; }
html body .has-risk-label[data-risk-level="info"]{ color:var(--wx48-risk-value-info) !important; }
html body .has-risk-label[data-risk-level="caution"]{ color:var(--wx48-risk-value-caution) !important; }
html body .has-risk-label[data-risk-level="warn"]{ color:var(--wx48-risk-value-warn) !important; }
html body .has-risk-label[data-risk-level="danger"]{ color:var(--wx48-risk-value-danger) !important; }
html body .has-risk-label[data-risk-level="neutral"]{ color:var(--wx48-risk-value-neutral) !important; }

html body .has-risk-label::after{
  color:currentColor !important;
  background:var(--wx48-risk-pill-neutral) !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    inset 0 -1px 0 rgba(0,0,0,.060) !important;
  text-shadow:none !important;
  opacity:.72 !important;
}
html body .has-risk-label[data-risk-level="ok"]::after{ background:var(--wx48-risk-pill-ok) !important; }
html body .has-risk-label[data-risk-level="info"]::after{ background:var(--wx48-risk-pill-info) !important; }
html body .has-risk-label[data-risk-level="caution"]::after{ background:var(--wx48-risk-pill-caution) !important; }
html body .has-risk-label[data-risk-level="warn"]::after{ background:var(--wx48-risk-pill-warn) !important; }
html body .has-risk-label[data-risk-level="danger"]::after{ background:var(--wx48-risk-pill-danger) !important; }
html body .has-risk-label[data-risk-level="neutral"]::after{ background:var(--wx48-risk-pill-neutral) !important; }

html body #forecast7Panel .forecast-intel-chip{
  border:0 !important;
  outline:0 !important;
  color:var(--wx48-risk-value-neutral) !important;
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.075), transparent 32%),
    var(--wx48-risk-pill-neutral) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    inset 0 -1px 0 rgba(0,0,0,.060) !important;
  text-shadow:none !important;
}
html body #forecast7Panel .forecast-intel-chip--ok{
  color:var(--wx48-risk-value-ok) !important;
  background:radial-gradient(circle at 18% 18%, rgba(255,255,255,.070), transparent 32%), var(--wx48-risk-pill-ok) !important;
}
html body #forecast7Panel .forecast-intel-chip--info{
  color:var(--wx48-risk-value-info) !important;
  background:radial-gradient(circle at 18% 18%, rgba(255,255,255,.070), transparent 32%), var(--wx48-risk-pill-info) !important;
}
html body #forecast7Panel .forecast-intel-chip--watch{
  color:var(--wx48-risk-value-caution) !important;
  background:radial-gradient(circle at 18% 18%, rgba(255,255,255,.070), transparent 32%), var(--wx48-risk-pill-caution) !important;
}
html body #forecast7Panel .forecast-intel-chip--warning,
html body #forecast7Panel .forecast-intel-chip--danger{
  color:var(--wx48-risk-value-danger) !important;
  background:radial-gradient(circle at 18% 18%, rgba(255,255,255,.070), transparent 32%), var(--wx48-risk-pill-danger) !important;
}
html body #forecast7Panel .forecast-intel-chip--unknown,
html body #forecast7Panel .forecast-intel-chip--loading,
html body #forecast7Panel .forecast-intel-chip--error{
  color:var(--wx48-risk-value-neutral) !important;
  background:radial-gradient(circle at 18% 18%, rgba(255,255,255,.070), transparent 32%), var(--wx48-risk-pill-neutral) !important;
}
html body #forecast7Panel .forecast-intel-chip b,
html body #forecast7Panel .forecast-intel-chip span,
html body #forecast7Panel .forecast-intel-chip em{
  color:inherit !important;
  text-shadow:none !important;
}