:root{
  color-scheme:light;
  --bg:#f3f6f7;
  --card:#fff;
  --panel:#f7f9fa;
  --line:#d8e1e5;
  --line-strong:#b9c8ce;
  --text:#172a35;
  --muted:#61727c;
  --accent:#087f5b;
  --accent2:#176b87;
  --accent3:#d95d45;
  --btn-bg:#fff;
  --btn-text:#203640;
  --btn-border:#c9d5da;
  --chip-bg:#eef4f5;
  --shadow:0 8px 24px rgba(24,48,58,.07);
  --radius-xl:8px;
  --radius-lg:8px;
  --radius-md:8px;
}

*{ letter-spacing:0 !important; }
html{
  min-height:100%;
  background:#f3f6f7 !important;
  scroll-behavior:smooth;
}
body,
body[data-weather]{
  min-height:100vh;
  background:#f3f6f7 !important;
  color:var(--text);
  font-family:Tahoma,"Noto Sans Thai","Segoe UI",sans-serif;
}
body::before,
body::after,
.wrap::before,
.heroCard::before,
.heroCard::after{ display:none !important; }

.wrap{
  position:relative;
  z-index:1;
  width:min(1120px,100%);
  margin:0 auto;
  padding:18px 18px 32px;
}
header{
  display:flex;
  align-items:center;
  gap:11px;
  padding:0 2px 12px;
}
.logo{
  display:block;
  flex:0 0 auto;
}
.logo img{
  display:block;
  width:44px;
  height:44px;
  object-fit:contain;
  filter:none;
}
.title{
  margin:0;
  color:#142a34;
  font-size:25px;
  font-weight:900;
  line-height:1.25;
}
.sub{
  margin-top:2px;
  color:var(--muted);
  font-size:12px;
  line-height:1.45;
}

.card{
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
  color:var(--text);
  box-shadow:var(--shadow);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.small{ color:var(--muted); }
.sectionTitle{
  margin:0 0 5px;
  color:#1b333f;
  font-size:20px;
  line-height:1.35;
}
.sectionEyebrow{
  color:var(--accent) !important;
  font-size:10px !important;
  font-weight:900;
  text-transform:none;
}
.btn,
.subtab,
select{
  min-height:42px;
  border-radius:8px;
  border-color:var(--btn-border);
  background-color:#fff;
  color:var(--btn-text);
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.btn:hover,
.subtab:hover{
  transform:none;
  border-color:#91aaa3;
  box-shadow:0 0 0 3px rgba(8,127,91,.08);
}
.btn.primary,
.subtab.active{
  border-color:var(--accent);
  background:var(--accent) !important;
  color:#fff;
  box-shadow:none;
}
.btn.ghost{
  border-color:#c9d5da;
  background:#fff;
  color:#36515d;
}

.toolbarCard{
  padding:12px;
  background:#fff;
}
.selectRow{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;
  gap:10px;
  align-items:end;
}
.pickerGroup{
  min-width:0;
  width:auto;
}
.pickerLabel{
  margin-bottom:5px;
  color:#526771;
  font-size:11px;
  font-weight:800;
}
.pickerShell,
.pickerShell select{ width:100%; }
.pickerShell select{
  border:1px solid #cbd7dc;
  background-color:#fff !important;
  color:#172a35;
}
.actionRow{
  display:flex;
  flex-wrap:nowrap;
  gap:7px;
}
.actionRow .btn{ white-space:nowrap; }
.toolbarMeta{
  margin-top:9px;
  padding-top:9px;
  border-top:1px solid #edf1f2;
}
.toolbarMeta strong{
  color:#314b57;
  font-size:12px;
}
.locationDetails[open] .locationMeta{
  border-radius:8px;
  box-shadow:var(--shadow);
}
.radarJumpLink,
.rainSummaryRadarLink{
  min-height:34px;
  padding:0 10px;
  border:1px solid #abd3c4;
  border-radius:8px;
  background:#f0f8f5;
  color:#087353;
}

.weatherQuickNav{
  display:flex;
  gap:6px;
  overflow-x:auto;
  margin:8px 0 0;
  padding:0 0 2px;
  background:transparent;
  scrollbar-width:none;
}
.weatherQuickNav::-webkit-scrollbar{ display:none; }
.weatherQuickNav a,
.weatherQuickNav a:first-child{
  min-height:36px;
  flex:0 0 auto;
  padding:0 12px;
  border:1px solid #d3dde1;
  border-radius:8px;
  background:#fff;
  color:#344e5a;
  box-shadow:none;
  font-size:12px;
}

.weatherOverviewGrid{
  display:grid;
  grid-template-columns:minmax(0,.76fr) minmax(0,1.24fr);
  gap:12px;
  align-items:start;
}
.weatherSideColumn{ gap:12px; }
.heroCard{
  min-height:0;
  padding:17px;
  overflow:hidden;
  border-color:#cddcdf;
  background:#fff !important;
  color:var(--text);
}
.heroTopline,
.heroCard .heroCondition,
.heroCard .heroSubline,
.heroCard .meta{
  color:var(--muted);
}
.heroBadge{
  border-color:#b8d9cc;
  background:#eff8f4;
  color:#087353;
}
.heroBadgeDot{ background:#19a474; }
.heroPlace{
  margin-top:14px;
  color:#17323e;
  font-size:22px;
  line-height:1.25;
}
.heroCondition{
  margin-top:4px;
  color:#405965 !important;
  font-size:15px;
}
.heroSubline{ margin-top:3px; }
.heroTempRow{ margin-top:9px; }
.heroTempBlock{ min-width:0; }
.bigtemp{
  margin:0;
  color:#17323e;
  font-size:66px;
  line-height:1;
}
.bigtemp .deg{ color:#d95d45; }
.heroOrb{ display:none !important; }
.currentWeatherDetails{
  margin-top:12px;
  border-top:1px solid #e7edef;
}
.currentWeatherDetails > summary{
  display:flex;
  min-height:38px;
  align-items:center;
  color:#4e6570;
  font-size:11px;
  font-weight:800;
  cursor:pointer;
  list-style:none;
}
.currentWeatherDetails > summary::-webkit-details-marker{ display:none; }
.currentWeatherDetails > summary::after{
  content:"+";
  margin-left:auto;
  color:var(--accent);
  font-size:18px;
}
.currentWeatherDetails[open] > summary::after{ content:"-"; }
.heroCard .meta{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:0 !important;
  padding-bottom:4px;
}
.heroCard .pill{
  padding:6px 8px;
  border:1px solid #dce5e8;
  border-radius:6px;
  background:#f5f8f9;
  color:#405965;
  font-size:10px;
}
.weatherStatus{
  margin-top:10px;
  padding:5px 0;
  border:0;
  border-radius:0;
  background:transparent;
  color:#60727b;
  font-size:10px;
}

.shortTrendCard{
  padding:15px;
  border-color:#a9d4c4;
  background:#fff;
}
.shortTrendCard h2{
  margin:2px 0 2px;
  color:#17323e;
  font-size:18px;
}
.shortTrendBadge{
  min-width:0;
  min-height:30px;
  border-radius:8px;
  white-space:nowrap;
}
.todaySummaryAnswer{
  margin-top:12px;
  padding:12px 13px;
  border-left:4px solid #1689bd;
  border-radius:0 6px 6px 0;
  background:#eef7fb;
}
.todaySummaryAnswer[data-rain="clear"]{
  border-left-color:#159066;
  background:#eef8f4;
}
.todaySummaryAnswer[data-rain="heavy"]{
  border-left-color:#d95d45;
  background:#fff3f0;
}
.todaySummaryAnswer > strong{
  display:block;
  color:#193640;
  font-size:21px;
  line-height:1.35;
}
.todaySummaryAnswer > p{
  margin:5px 0 0;
  color:#405965;
  font-size:12px;
  line-height:1.65;
}
.shortTrendMetrics{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px;
  margin-top:9px;
}
.shortTrendMetric{
  min-height:63px;
  padding:8px 9px;
  border-color:#dde6e8;
  border-radius:6px;
  background:#f8fafb;
}
.shortTrendMetric > span{ color:#637780; }
.shortTrendMetric > strong{
  color:#173944;
  font-size:14px;
}

.rainSummaryCard{
  padding:12px;
  border-color:#d4e1e6;
  background:#fff;
}
.rainSummaryHeader h2{ font-size:16px; }
.rainSummaryGrid{
  gap:6px;
  margin-top:9px;
}
.rainSummaryItem{
  min-height:66px;
  padding:8px;
  border-radius:6px;
  background:#f8fafb;
}
.rainSummaryItem > span{ font-size:10px; }
.rainSummaryItem > strong{ font-size:12px; }
.rainSummaryItem > small{ font-size:9px; }
.rainSummaryExplain{
  margin:7px 1px 0;
  color:#657780;
  font-size:10px;
}

.radarFull{
  margin-top:12px !important;
  padding:16px;
}
.radarHeader{ align-items:center; }
.radarTitleLine{ align-items:center; }
.radarSourceActions .btn{ min-height:38px; }
.tambonRadarPanel{
  display:flex;
  flex-direction:column;
  margin-top:10px;
}
.tambonRadarPanel > .rainInsight{
  order:1;
  max-width:none;
  margin:0 0 9px;
  border:0;
  border-left:4px solid #3d99bd;
  border-radius:0;
  background:#eef7fa;
  box-shadow:none;
}
.radarMapBlock{ order:2; }
.radarFocusCard{ order:3; }
.rainAlertCenter{ order:4; }
.radarAdvancedOptions{ order:5; }
.radarViewerShell{
  overflow:hidden;
  border-radius:8px;
  box-shadow:none;
}
.tambonRadarToolbar{ border-radius:0; }
.radarControlGroup .subtab{
  min-height:40px;
  border-radius:6px;
}
.radarMapControlsMenu > summary,
.radarMapControlsPanel{ border-radius:6px; }
.radarZoomBar{
  gap:8px;
  padding:8px;
}
.zoomButton,
.zoomReset{ border-radius:6px; }
.tambonRadarStatus{
  margin-top:7px;
  color:#62737b;
}
.tambonRadarStatus .small:nth-child(2){ display:none; }
.radarTimeline{
  margin-top:8px;
  padding:9px 10px;
  border-radius:6px;
}
.radarTimelineTicks{ display:none; }
.radarTimelineControls{ margin-top:5px; }
.radarFocusCardCompact{
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  margin-top:8px;
  padding:10px 11px;
  border-radius:6px;
  background:#f7f9fa;
}
.radarFocusPreview{ display:none; }
.radarAdvancedOptions{
  margin-top:8px;
  border-radius:6px;
}
.radarAdvancedOptions > summary{ border-radius:6px; }

.rainAlertCenter{
  margin-top:12px;
  padding:14px 0 0;
  border:0;
  border-top:1px solid #d8e2e5;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.rainAlertCenter[data-state="active"],
.rainAlertCenter[data-state="blocked"],
.rainAlertCenter[data-state="unsupported"]{
  border-color:#d8e2e5;
  background:transparent;
}
.rainAlertHeader{ align-items:center; }
.rainAlertIcon{
  width:38px;
  height:38px;
  border-radius:8px;
}
.rainAlertEyebrow{ display:none; }
.rainAlertHeading h3{
  margin:0 0 2px;
  font-size:16px;
}
.rainAlertHeading p{
  max-width:680px;
  margin:0;
  color:#61737c;
  font-size:11px;
  line-height:1.5;
}
.rainAlertStatus{ border-radius:6px; }
.rainAlertActions{
  margin-top:10px;
  justify-content:flex-start;
}
.rainNotifyPrimary{
  width:auto;
  min-width:240px;
  border-radius:8px;
}
.rainAlertSettings{
  margin-top:9px;
  border:1px solid #dce5e8;
  border-radius:6px;
  background:#f8fafb;
}
.rainAlertSettings > summary{
  display:flex;
  min-height:42px;
  align-items:center;
  padding:0 11px;
  color:#39535e;
  font-size:11px;
  font-weight:850;
  cursor:pointer;
  list-style:none;
}
.rainAlertSettings > summary::-webkit-details-marker{ display:none; }
.rainAlertSettings > summary::after{
  content:"+";
  margin-left:auto;
  color:var(--accent);
  font-size:18px;
}
.rainAlertSettings[open] > summary::after{ content:"-"; }
.rainAlertSettingsBody{
  padding:0 10px 10px;
  border-top:1px solid #e5ebed;
}
.rainAlertScope{
  grid-template-columns:1.2fr 1fr 1fr;
  margin-top:10px;
}
.rainAlertScope > div,
.rainAlertScope > label{ border-radius:6px; }
.rainAlertTriggers{
  gap:5px 12px;
  padding:8px 2px;
  border:0;
  background:transparent;
}
.rainAlertLimit{ font-size:10px; }

.radarInfoDetails{
  margin-top:10px;
  border:1px solid #dce5e8;
  border-radius:6px;
  background:#f8fafb;
}
.radarInfoDetails > summary{
  display:flex;
  min-height:42px;
  align-items:center;
  padding:0 11px;
  color:#405965;
  font-size:11px;
  font-weight:850;
  cursor:pointer;
  list-style:none;
}
.radarInfoDetails > summary::-webkit-details-marker{ display:none; }
.radarInfoDetails > summary::after{
  content:"+";
  margin-left:auto;
  color:var(--accent);
  font-size:18px;
}
.radarInfoDetails[open] > summary::after{ content:"-"; }
.radarInfoDetailsBody{ padding:0 10px 10px; }
.radarLegend{
  margin:0;
  padding:10px 0;
  border:0;
  border-radius:0;
  background:transparent;
}
.radarLegendLevel{ border-radius:6px; }
.radarSafetyNote{
  margin:0;
  padding:9px 0 0;
  border-top:1px solid #dce5e8;
  border-radius:0;
  background:transparent;
}

.hourlyForecastCard{ padding:15px 16px; }
.hourlyForecastHeader{ margin-bottom:9px; }
.hourlyForecastSummary{
  max-width:360px;
  border-radius:6px;
}
.hourlyChartWrap{
  padding:10px;
  border-radius:6px;
  background:#f8fafb;
}
.hourlyForecastDetails{ border-radius:6px; }
.hourlyForecastItem{ border-radius:6px; }

.heroNewsCard{
  min-height:0;
  gap:8px;
  padding:13px 15px;
  background:#fff;
}
#sevenDayForecast{ order:1; }
#weatherNews{ order:2; }
.heroNewsTitle{ margin:0; font-size:16px; }
.heroNewsSubtitle,
.heroNewsCta{ display:none; }
.heroNewsList{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px;
}
.heroNewsItem{
  border:0;
  background:transparent;
}
.heroNewsLink{
  display:grid;
  grid-template-columns:112px minmax(0,1fr);
  min-height:96px;
  padding:0;
  overflow:hidden;
  border:1px solid #e0e7e9;
  border-radius:6px;
  background:#f8fafb;
}
.heroNewsLink:hover{
  border-color:#b9d1c9;
  background:#f4f9f7;
}
.heroNewsThumbWrap{
  display:block;
  min-height:96px;
  overflow:hidden;
  background:#e9f0f2;
}
.heroNewsThumb{
  display:block;
  width:100%;
  height:100%;
  min-height:96px;
  padding:0;
  object-fit:cover;
}
.heroNewsThumbPlaceholder{
  display:grid;
  place-items:center;
  padding:8px;
  color:#526d77;
  font-size:11px;
  text-align:center;
}
.heroNewsBody{
  min-width:0;
  padding:9px 10px;
}
.heroNewsMeta{ font-size:10.5px; }
.heroNewsHeadline{
  margin:3px 0 0;
  font-size:12px;
  -webkit-line-clamp:3;
}

.forecastCard{ padding:15px 16px; }
.forecastHighlights{ display:none !important; }
.forecastDays{ gap:7px; }
.forecastDay{
  min-height:183px;
  padding:10px 7px;
  border-radius:6px;
  background:#f8fafb;
}
.forecastDay.is-today{
  background:#eef8f4;
  box-shadow:inset 0 3px 0 var(--accent);
}
.forecastDayDate{ min-height:28px; }
.forecastDayIcon{ margin:1px auto; }
.forecastDayCondition{ min-height:31px; }
.forecastDayTemps{ margin:4px 0 6px; }
.forecastDayRain{ border-radius:5px; }
.forecastDayRainBar,
.forecastDayMeta{ display:none !important; }
.forecastNarratives{
  margin-top:14px;
  padding:14px 0 0;
  border:0;
  border-top:1px solid #dce5e8;
  border-radius:0;
  background:transparent;
}
.forecastNarrativesHeader h3{ font-size:16px; }
.forecastNarrativeItem{
  border-radius:6px;
  background:#f8fafb;
}
.forecastNarrativeNote,
.forecastCopyButton,
.forecastSource,
.forecastRelatedLinks{ display:none !important; }

footer.card{
  padding:12px 14px;
  background:#fff;
}
.weatherGuideCta{
  display:block;
  margin:0 0 9px;
  padding:8px 0;
  border:0;
  border-bottom:1px solid #e4eaec;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.weatherGuideCtaIcon,
.weatherGuideCta small,
.weatherGuideCta b,
.footerServiceHeading,
.footerServiceLinks{ display:none; }
.weatherGuideCta strong{ font-size:12px; }
.footerPrimaryServices{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin:0 0 10px;
}
.footerPrimaryServices .footerServiceButton{
  display:flex;
  min-width:0;
  min-height:44px;
  align-items:center;
  justify-content:center;
  padding:8px 10px;
  border-radius:6px;
  background:#f8faf9;
  color:#29434d;
  font-size:12px;
  font-weight:850;
  text-align:center;
  text-decoration:none;
  white-space:nowrap;
}
.footerPrimaryServices .footerServiceButtonPrimary{
  border-color:var(--accent);
  background:var(--accent);
  color:#fff;
}
.footerPrimaryServices .footerServiceButtonPrimary:hover{
  border-color:#066849;
  background:#066849;
  color:#fff;
}
.sourceDisclosure{ border-radius:6px; }

@media (max-width:860px){
  .weatherQuickNav{
    position:static;
    z-index:auto;
    margin-inline:0;
    padding:0 0 2px;
    background:transparent;
    backdrop-filter:none;
  }
  .weatherOverviewGrid{ grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); }
  .radarHeader{ align-items:flex-start; }
  .forecastDays{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}

@media (max-width:640px){
  .wrap{ padding:11px 9px 24px; }
  header{ padding:0 2px 9px; }
  .logo img{ width:38px; height:38px; }
  .title{ font-size:21px; }
  .sub{ font-size:11px; }
  .card{ padding:12px; border-radius:8px; }
  .selectRow{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:8px;
  }
  .pickerGroup{ min-width:0; }
  .pickerLabel{ font-size:10px; }
  .pickerShell select{
    min-height:44px;
    padding-left:10px;
    padding-right:32px;
    background-position:right 10px center;
    font-size:12px;
  }
  .actionRow{
    grid-column:1 / -1;
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  .actionRow .btn{
    min-width:0;
    min-height:44px;
    padding-inline:8px;
  }
  .toolbarMeta{ display:block; }
  .toolbarMetaActions{
    width:100%;
    margin-top:6px;
  }
  .weatherQuickNav a{
    min-height:36px;
    padding-inline:10px;
    font-size:11px;
  }

  .weatherOverviewGrid{
    display:flex;
    flex-direction:column;
    gap:9px;
  }
  .weatherSideColumn{ display:contents; }
  .shortTrendCard{ order:1; width:100%; }
  .heroCard{ order:2; width:100%; }
  #khonkaenRadar{ order:3; width:100%; }
  #hourlyForecastCard{ order:5; width:100%; }
  #sevenDayForecast{ order:6; width:100%; }
  #weatherNews{ order:7; width:100%; }
  .todaySummaryAnswer > strong{ font-size:19px; }
  .todaySummaryAnswer > p{ font-size:11.5px; }
  .shortTrendMetrics{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .shortTrendMetric{ min-height:58px; }
  .heroPlace{ margin-top:10px; font-size:19px; }
  .heroTempRow{ margin-top:6px; }
  .bigtemp{ font-size:58px; }
  .weatherStatus{ margin-top:5px; }
  .rainSummaryGrid{ grid-template-columns:1fr; }

  .radarFull{ padding:12px; }
  .radarHeader{ display:block; }
  .radarSourceActions{ margin-top:8px; }
  .radarSourceActions .btn{ width:auto; }
  .rainInsight{ padding:10px; }
  .rainInsightIcon{ display:none; }
  .rainInsightTitle{ font-size:14px; }
  .rainInsightDetail{ font-size:10.5px; }
  .radarControlGroup{ width:100%; }
  .radarControlGroup .subtab{
    flex:1 1 0;
    min-width:0;
    padding-inline:8px;
    font-size:11px;
  }
  .radarMapQuickActions{ gap:5px; }
  .radarMapQuickActions .btn,
  .radarMapControlsMenu > summary{ min-height:40px; }
  .radarZoomBar label{ font-size:10px; }
  .radarTimelineHeader{ display:block; }
  .radarTimelineStatus{ display:none; }
  .radarTimelineControls{
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  .radarSpeedControl{ grid-column:1 / -1; }
  .radarFocusCardCompact{
    grid-template-columns:1fr;
    align-items:start;
  }
  .radarFocusActions{
    display:flex;
    grid-column:auto;
    width:100%;
  }
  .radarFocusActions .btn{ width:auto; }
  .radarAutoRefresh{ margin-right:auto; }
  .rainAlertHeader{
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    align-items:start;
  }
  .rainAlertStatus{
    grid-column:1 / -1;
    justify-self:start;
    margin-top:7px;
  }
  .rainNotifyPrimary{
    width:100%;
    min-width:0;
  }
  .rainAlertActions{ display:grid; grid-template-columns:1fr; }
  .rainAlertScope{ grid-template-columns:1fr; }
  .rainAlertTriggers{ grid-template-columns:1fr; }
  .radarLegendScale{ grid-template-columns:repeat(2,minmax(0,1fr)); }

  .hourlyForecastHeader{ display:block; }
  .hourlyForecastSummary{
    width:100%;
    max-width:none;
    margin-top:7px;
    text-align:left;
  }
  .hourlyChartWrap{ margin-inline:0; padding:7px; }
  .hourlyChartHeader{ align-items:flex-start; }
  .hourlyForecastChart{ min-width:680px; }

  .heroNewsList{ grid-template-columns:1fr; }
  .heroNewsLink{
    grid-template-columns:92px minmax(0,1fr);
    min-height:90px;
  }
  .heroNewsThumbWrap,
  .heroNewsThumb{ min-height:90px; }
  .forecastDays{
    display:grid;
    grid-template-columns:1fr;
    grid-auto-flow:row;
    grid-auto-columns:auto;
    gap:6px;
    overflow:visible;
  }
  .forecastDay,
  .forecastDaySkeleton{
    display:grid;
    grid-template-columns:72px 44px minmax(0,1fr) auto;
    grid-template-rows:auto auto;
    min-height:78px;
    align-items:center;
    gap:2px 7px;
    padding:8px 9px;
    text-align:left;
  }
  .forecastDayDate{
    grid-column:1;
    grid-row:1 / span 2;
    min-height:0;
  }
  .forecastDayIcon{
    grid-column:2;
    grid-row:1 / span 2;
    width:40px;
    height:40px;
    margin:0;
  }
  .forecastDayCondition{
    grid-column:3;
    grid-row:1;
    min-height:0;
    -webkit-line-clamp:1;
  }
  .forecastDayTemps{
    grid-column:4;
    grid-row:1 / span 2;
    margin:0;
  }
  .forecastDayTemps strong{ font-size:19px; }
  .forecastDayTemps span{ font-size:12px; }
  .forecastDayRain{
    grid-column:3;
    grid-row:2;
    width:max-content;
    max-width:100%;
    margin:0;
    padding:3px 5px;
  }
  .forecastNarrativesHeader{ display:block; }
  .forecastNarrativeList{ grid-template-columns:1fr; }
  .forecastNarrativeItem{
    grid-template-columns:66px minmax(0,1fr);
    padding:8px;
  }
  footer.card{ padding:11px 12px; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
}

/* Trust and freshness information stays visible beside the primary actions. */
.rainAlertSafetyNotice{
  margin:9px 0 0;
  padding:9px 10px;
  border-left:3px solid #d38a13;
  background:#fff8e7;
  color:#5c461d;
  font-size:14px;
  line-height:1.55;
}
.rainAlertSafetyNotice a{
  color:#765000;
  font-weight:800;
  text-underline-offset:2px;
}
.shortTrendFoot{
  border-radius:6px;
  font-size:12px;
  line-height:1.5;
}
.shortTrendFoot[data-state="stale"]{
  background:#fff7df;
  color:#795510;
}
.weatherStatus,
.forecastStatus{
  max-width:100%;
  line-height:1.45;
  white-space:normal;
}
.heroNewsArchive{
  margin-top:4px;
  border-top:1px solid #dce5e8;
}
.heroNewsArchive > summary{
  min-height:44px;
  padding:11px 2px;
  color:#405965;
  cursor:pointer;
  font-size:14px;
  font-weight:800;
}
.heroNewsArchive > .heroNewsList{ margin-top:2px; }

/* Each seven-day explanation belongs to its day and uses one native toggle. */
.forecastDays{
  grid-template-columns:1fr;
  align-items:start;
  gap:6px;
}
.forecastDay{
  display:block;
  min-height:0;
  padding:0;
  overflow:clip;
  text-align:left;
}
.forecastDaySkeleton{
  min-height:72px;
  padding:0;
}
.forecastDaySummary{
  display:grid;
  grid-template-columns:minmax(105px,.8fr) 44px minmax(160px,1.6fr) auto minmax(100px,auto) 26px;
  gap:8px;
  min-height:72px;
  align-items:center;
  padding:8px 10px;
  cursor:pointer;
  list-style:none;
}
.forecastDaySummary::-webkit-details-marker{ display:none; }
.forecastDaySummary::marker{ content:""; }
.forecastDaySummary::after{
  content:"+";
  grid-column:6;
  display:grid;
  width:24px;
  height:24px;
  place-items:center;
  border:1px solid #cbd8dd;
  border-radius:50%;
  color:#31535e;
  font-size:18px;
  font-weight:700;
  line-height:1;
}
.forecastDay[open] > .forecastDaySummary{
  border-bottom:1px solid #dce5e8;
}
.forecastDay[open] > .forecastDaySummary::after{ content:"−"; }
.forecastDaySummary:focus-visible{
  outline:3px solid rgba(8,127,91,.28);
  outline-offset:-3px;
}
.forecastDayDate{
  min-height:0;
  text-align:left;
}
.forecastDayIcon{ margin:0; }
.forecastDayCondition{
  min-height:0;
  text-align:left;
}
.forecastDayTemps{ margin:0; }
.forecastDayRain{
  width:auto;
  max-width:100%;
  margin:0;
  padding:5px 7px;
  justify-self:start;
}
.forecastDayRainBar,
.forecastDayMeta{ display:none !important; }
.forecastDayNarrative{
  padding:11px 12px 12px;
  background:#fff;
}
.forecastDay:not([open]) > .forecastDayNarrative{ display:none; }
.forecastDayNarrative p{
  margin:0;
  color:#3c5266;
  font-size:14px;
  line-height:1.65;
}

@media (max-width:640px){
  .forecastDay,
  .forecastDaySkeleton{
    display:block;
    min-height:0;
    padding:0;
  }
  .forecastDaySkeleton{ min-height:72px; }
  .forecastDaySummary{
    grid-template-columns:66px 38px minmax(0,1fr) auto 22px;
    grid-template-rows:auto auto;
    gap:3px 6px;
    min-height:76px;
    padding:8px;
  }
  .forecastDaySummary::after{
    grid-column:5;
    grid-row:1 / span 2;
    width:22px;
    height:22px;
  }
  .forecastDayDate{
    grid-column:1;
    grid-row:1 / span 2;
  }
  .forecastDayIcon{
    grid-column:2;
    grid-row:1 / span 2;
    width:38px;
    height:38px;
  }
  .forecastDayCondition{
    grid-column:3;
    grid-row:1;
    -webkit-line-clamp:1;
  }
  .forecastDayTemps{
    grid-column:4;
    grid-row:1 / span 2;
  }
  .forecastDayTemps strong{ font-size:19px; }
  .forecastDayTemps span{ font-size:12px; }
  .forecastDayRain{
    grid-column:3;
    grid-row:2;
    padding:3px 5px;
  }
  .forecastDayNarrative{ padding:10px 11px 12px; }
}

@media (max-width:360px){
  .forecastDaySummary{
    grid-template-columns:60px 34px minmax(0,1fr) auto 20px;
    gap:3px 4px;
    padding:7px 6px;
  }
  .forecastDayIcon{
    width:34px;
    height:34px;
    font-size:24px;
  }
  .forecastDaySummary::after{
    width:20px;
    height:20px;
    font-size:16px;
  }
}