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

/* ---------- Panel status-pill containment: Forecast7 + Alerts + Quakes ---------- */
html body #forecast7Panel,
html body #hazardsPanel,
html body #quakesPanel,
html body #forecast7Panel *,
html body #hazardsPanel *,
html body #quakesPanel *{
  box-sizing:border-box !important;
}

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

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

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

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

html body #fc7StatusPill,
html body #hazStatusPill,
html body #quakesStatusPill{
  flex:0 1 auto !important;
  min-width:0 !important;
  max-width:min(18ch, 38vw, calc(100% - 42px)) !important;
  margin-left:0 !important;
  padding-inline:clamp(.34rem, .9vw, .55rem) !important;
  font-size:clamp(.64rem, 1.05vw, .78rem) !important;
  line-height:1.05 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  vertical-align:middle !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@media (max-width:760px){
  html body #rainRibbon.rain-has-intensity .ribbon-body-card{
    grid-template-columns:1fr !important;
  }

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

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

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

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

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

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

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