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

/* ========================== Fallbacks ========================== */
@supports not (background: color-mix(in oklab, red 50%, white)){
  .title3d-inner{ background:linear-gradient(180deg, var(--bar-sheen), transparent 55%), linear-gradient(135deg, var(--bar-start), var(--bar-end)); }
  .status-bar{ background:linear-gradient(180deg, var(--bar-sheen), transparent 40%), linear-gradient(135deg, var(--bar-end), var(--bar-start)); }
  #forecast7Panel .ribbon-body-card,
  #hazardsPanel .ribbon-body-card,
  #quakesPanel .ribbon-body-card{ box-shadow:var(--shadow-soft); }
  .hazard-chips .pill{ border-color:rgba(255,255,255,.22); }
}

/* ========================== Responsive Layout ========================== */
@media (max-width:1200px){
  :root{
    --stage-min-h:410px;
    --stage-h:50vh;
    --wind-card-h:252px;
    --ltg-card-h:252px;
    --wind-canvas:172px;
    --ltg-w:162px;
    --ltg-h:102px;
  }
  .ribbon-panels{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  #rainRibbon{ grid-column:1 / -1; }
  .forecast7-grid,
  #forecast7Panel .forecast7-grid{ grid-template-columns:repeat(5, minmax(0, 1fr)); }
}
@media (max-width:980px){
  .tube-card.solar{ grid-column:1 / -1; }
  .hazards-quakes-row{ grid-template-columns:1fr; }
  .hzq-span-2{ grid-column:auto; }
  .forecast7-grid,
  #forecast7Panel .forecast7-grid{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
}
@media (max-width:760px){
  :root{
    --stage-min-h:380px;
    --stage-h:48vh;
    --wind-card-h:232px;
    --ltg-card-h:232px;
    --tube-card-h:118px;
    --tube-h:60px;
  }
  body{ font-size:14px; }
  .container{ width:100%; padding:0 6px; }
  .title3d-inner{ padding:8px 10px; }
  .status-bar{ justify-content:center; }
  .status-left,
  .status-right{ justify-content:center; margin-left:0; }
  #rainRibbon,
  .tube-card.solar{ grid-column:auto; }
  .ribbon{ min-height:0; }
  
  .nowcast-row{ grid-template-columns:1fr; }
  .forecast7-grid,
  #forecast7Panel .forecast7-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .site-footer .foot-wrap{ flex-direction:column; align-items:flex-start; }
}
@media (max-width:540px){
  :root{
    --stage-min-h:350px;
    --stage-h:46vh;
    --wind-canvas:158px;
    --ltg-w:150px;
    --ltg-h:94px;
  }
  .ribbon-label,
  .gauge-rows .kv .k,
  .nowcast-row .kv .k{ font-size:.78rem; }
  .ribbon-value,
  .gauge-rows .kv .v,
  .nowcast-row .kv .v{ font-size:.88rem; }
  .forecast7-grid,
  #forecast7Panel .forecast7-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .drawer-panel{ padding:14px; }
  .drawer-body{ padding:6px 4px; }
  .drawer-foot{ flex-wrap:wrap; }
  .foot-right{ gap:8px; }
}
@media (max-width:420px){
  :root{ --stage-min-h:330px; --stage-h:44vh; }
  .ribbon-value,
  .gauge-rows .kv .v,
  .nowcast-row .kv .v{ justify-content:center; text-align:center; }
  .about-logo img{ width:clamp(98px, 56%, 238px); }
}


.status-bar .pill,
#fc7StatusPill,
#hazStatusPill,
#quakesStatusPill,
#status{
  background-color:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.22);
}

.pill.transparent{
  background-color:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.18);
}

.skip-link{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}

.skip-link:focus{
  position:fixed;
  left:16px;
  top:16px;
  width:auto;
  height:auto;
  padding:8px 12px;
  background:#0ea5e9;
  color:#fff;
  border-radius:6px;
  z-index:9999;
}


:root{
  --wx-split-card-h:246px;
  --wx-split-visual-col:minmax(140px,42%);
  --wx-split-data-col:minmax(230px,48%);
  --wx-split-gap:14px;
  --wx-split-wind-size:172px;
  --wx-split-lightning-w:174px;
  --wx-split-lightning-h:110px;
}


@media (min-width:761px) and (max-width:1180px){
  :root{
    --wx-split-card-h:232px;
    --wx-split-wind-size:154px;
    --wx-split-lightning-w:156px;
    --wx-split-lightning-h:98px;
    --wx-split-gap:12px;
  }
}

/* ---------- Tall sparkline split rows ---------- */
:root{
  --wx-spark-tall-w:clamp(150px,12vw,210px);
  --wx-spark-tall-h:54px;
  --wx-spark-left-col:minmax(9.5rem,38%);
  --wx-spark-right-col:minmax(150px,1fr);
  --wx-spark-row-gap:5px;
  --wx-spark-col-gap:10px;
}

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

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

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

html body #outdoorReadingsRibbon .ribbon-item .spark,
html body #outdoorRibbon .ribbon-item .spark{
  grid-column:2 !important;
  grid-row:1 / span 2 !important;
  align-self:center !important;
  justify-self:stretch !important;
  width:100% !important;
  max-width:var(--wx-spark-tall-w) !important;
  height:var(--wx-spark-tall-h) !important;
  margin:0 !important;
  display:block !important;
  overflow:visible !important;
  box-sizing:border-box !important;
  padding:3px 5px !important;
  border-radius:10px !important;
  border:1px solid rgba(255,255,255,.14) !important;
  background:linear-gradient(180deg,rgba(255,255,255,.050),rgba(255,255,255,.018)),rgba(15,20,26,.24) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), inset 0 -1px 0 rgba(0,0,0,.26), 0 1px 3px rgba(0,0,0,.28) !important;
}

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

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

html body #outdoorReadingsRibbon .ribbon-body-card,
html body #outdoorRibbon .ribbon-body-card{
  gap:9px !important;
  align-content:center !important;
}

/* ---------- Rain Intensity embedded in Precipitation ---------- */
:root{
  --wx-rain-embed-col:clamp(86px,9vw,130px);
  --wx-rain-embed-tube-h:clamp(132px,15vw,178px);
  --wx-rain-embed-tube-w:26px;
  --wx-rain-embed-gap:10px;
}

html body #rainRibbon.rain-has-intensity .ribbon-body-card{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) var(--wx-rain-embed-col) !important;
  grid-auto-rows:minmax(22px,auto) !important;
  column-gap:var(--wx-rain-embed-gap) !important;
  row-gap:5px !important;
  align-items:center !important;
  align-content:center !important;
  padding:9px 10px !important;
}

html body #rainRibbon.rain-has-intensity .ribbon-left,
html body #rainRibbon.rain-has-intensity .ribbon-right{
  display:contents !important;
}

html body #rainRibbon.rain-has-intensity .ribbon-item{
  grid-column:1 !important;
  display:grid !important;
  grid-template-columns:minmax(12.5ch,38%) minmax(0,1fr) !important;
  align-items:center !important;
  column-gap:8px !important;
  margin:0 !important;
  min-width:0 !important;
}

html body #rainRibbon.rain-has-intensity .tube-card.rain{
  grid-column:2 !important;
  grid-row:1 / span 6 !important;
  align-self:stretch !important;
  justify-self:stretch !important;
  width:100% !important;
  min-width:0 !important;
  min-height:100% !important;
  height:100% !important;
  margin:0 !important;
  padding:6px 6px 7px !important;
  display:grid !important;
  grid-template-rows:auto 1fr auto !important;
  align-items:center !important;
  justify-items:center !important;
  gap:4px !important;
  border-radius:12px !important;
  border:1px solid rgba(56,189,248,.40) !important;
  background:linear-gradient(180deg,rgba(56,189,248,.10),rgba(56,189,248,.035)),rgba(15,20,26,.24) !important;
  box-shadow:0 0 10px 3px rgba(56,189,248,.18), inset 0 0 0 1px rgba(255,255,255,.07), inset 0 0 24px 8px rgba(56,189,248,.14) !important;
  box-sizing:border-box !important;
}

html body #rainRibbon.rain-has-intensity .tube-card.rain .tube-title{
  font-size:.70rem !important;
  line-height:1.05 !important;
  padding:3px 6px !important;
  margin:0 !important;
  border-radius:7px !important;
  max-width:100% !important;
  white-space:normal !important;
  text-align:center !important;
}

html body #rainRibbon.rain-has-intensity .tube-card.rain .tube{
  --height:var(--wx-rain-embed-tube-h) !important;
  height:var(--wx-rain-embed-tube-h) !important;
  width:var(--wx-rain-embed-tube-w) !important;
  max-height:100% !important;
  margin:0 auto !important;
  border-radius:9px !important;
}

html body #rainRibbon.rain-has-intensity .tube-card.rain .tube-value{
  font-size:.72rem !important;
  line-height:1 !important;
  font-weight:900 !important;
  margin:0 !important;
  padding:2px 5px !important;
  max-width:100% !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  border-radius:7px !important;
  background:rgba(15,20,26,.30) !important;
  border:1px solid rgba(255,255,255,.12) !important;
}