:root{
  --radar-accent:#087f5b;
  --radar-accent-soft:#eaf8f1;
  --radar-blue:#0f78a8;
  --radar-warn:#d97706;
}

.radarExperienceBar{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px;
  align-items:end;
  margin:10px 0;
  padding:12px;
  border:1px solid var(--line);
  border-radius:16px;
  background:linear-gradient(135deg,rgba(8,127,91,.08),rgba(14,165,233,.05));
}
.radarExperienceIntro{
  min-width:0;
}
.radarExperienceTitle{
  display:block;
  margin-bottom:3px;
  color:var(--text);
  font-size:14px;
  line-height:1.35;
}
.radarModePicker{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:6px;
}
.radarModeButton{
  min-height:42px;
  padding:0 13px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--panel);
  color:var(--text);
  font:inherit;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
  transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease;
}
.radarModeButton:hover{ transform:translateY(-1px); }
.radarModeButton[aria-pressed="true"]{
  border-color:var(--radar-accent);
  background:var(--radar-accent);
  color:#fff;
  box-shadow:0 5px 14px rgba(8,127,91,.2);
}
.radarModeHelp{
  margin-top:7px;
  color:var(--muted);
  font-size:11px;
  line-height:1.5;
}

.radarDynamicLabels{
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none;
}
.radarDynamicLabels[hidden]{ display:none; }
.radarDistrictLabel{
  position:absolute;
  left:var(--label-x);
  top:var(--label-y);
  max-width:84px;
  padding:1px 4px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.62);
  border-radius:6px;
  background:rgba(3,18,30,.72);
  color:#fff;
  font-size:clamp(6.5px,.85vw,8.5px);
  font-weight:550;
  line-height:1.1;
  text-align:center;
  text-overflow:ellipsis;
  white-space:nowrap;
  text-shadow:0 1px 2px #000;
  transform:translate(-50%,-50%);
  box-shadow:0 1px 4px rgba(0,0,0,.22);
}
.radarDistrictLabel.is-selected{
  z-index:2;
  border-color:#facc15;
  background:rgba(111,72,0,.88);
  color:#fff7c2;
  font-weight:650;
}
.radarDistrictLabel.is-secondary{ opacity:.86; }

.tmdRadarCanvas{
  position:absolute;
  inset:0;
  z-index:1;
  display:none;
  width:100%;
  height:100%;
}
.tmdRadarOverlay{ z-index:2; }
.tmdRadarStage.is-player-ready .tmdRadarCanvas{ display:block; }
.tmdRadarStage.is-player-ready .tmdRadarBase{ visibility:hidden; }
.tmdRadarStage.is-rain-focus .tmdRadarCanvas{
  filter:saturate(1.45) contrast(1.1) brightness(1.02);
}

.radarTimeline{
  margin-top:10px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--panel,#f7f9fc);
}
.radarTimelineHeader{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
}
.radarTimelineTitle{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:7px;
  color:var(--text);
  font-size:13px;
  line-height:1.4;
}
.radarTimelineStatus{
  color:var(--muted);
  font-size:11px;
  line-height:1.4;
  text-align:right;
}
.radarFrameRange{
  width:100%;
  accent-color:var(--radar-accent);
  cursor:pointer;
}
.radarTimelineTicks{
  display:flex;
  justify-content:space-between;
  margin-top:2px;
  color:var(--muted);
  font-size:9px;
  line-height:1;
}
.radarTimelineControls{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:7px;
  margin-top:10px;
}
.radarTimelineControls .btn{
  min-height:40px;
  padding:0 12px;
  font-size:12px;
}
.radarSpeedControl{
  display:flex;
  align-items:center;
  gap:6px;
  margin-left:auto;
  color:var(--muted);
  font-size:11px;
  font-weight:700;
}
.radarSpeedControl select{
  min-height:40px;
  padding:0 30px 0 10px;
  font-size:12px;
}

.rainInsight{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
  margin:10px 0;
  padding:12px;
  border:1px solid #b9d9cf;
  border-radius:16px;
  background:linear-gradient(135deg,#effaf6,#eef8fc);
}
.rainInsightIcon{
  display:grid;
  width:42px;
  height:42px;
  place-items:center;
  border-radius:50%;
  background:#d9f4ea;
  color:var(--radar-accent);
  font-size:22px;
}
.rainInsightCopy{ min-width:0; }
.rainInsightEyebrow{
  display:block;
  color:var(--muted);
  font-size:10px;
  font-weight:800;
  letter-spacing:.02em;
}
.rainInsightTitle{
  display:block;
  margin-top:2px;
  color:var(--text);
  font-size:15px;
  line-height:1.35;
}
.rainInsightDetail{
  margin-top:3px;
  color:var(--muted);
  font-size:11px;
  line-height:1.45;
}
.rainRadiusControl{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:7px;
  color:var(--muted);
  font-size:10px;
  font-weight:750;
}
.rainRadiusControl select{
  min-height:34px;
  padding:0 28px 0 9px;
  font-size:11px;
}
.rainInsight[data-level="light"]{
  border-color:#86d3a7;
  background:linear-gradient(135deg,#effcf4,#f5fbf7);
}
.rainInsight[data-level="moderate"]{
  border-color:#e6c757;
  background:linear-gradient(135deg,#fff9da,#fffdf2);
}
.rainInsight[data-level="heavy"],
.rainInsight[data-level="severe"]{
  border-color:#ef9a91;
  background:linear-gradient(135deg,#fff0ed,#fff7f4);
}
.rainInsight[data-level="heavy"] .rainInsightIcon,
.rainInsight[data-level="severe"] .rainInsightIcon{
  background:#ffdcd5;
  color:#b42318;
}
.rainAlertCenter{
  margin:10px 0 12px;
  padding:14px;
  border:1px solid #b8d9cd;
  border-radius:18px;
  background:
    radial-gradient(circle at 100% 0,rgba(62,196,151,.14),transparent 32%),
    linear-gradient(145deg,#f7fffb,#f3f9fd);
  box-shadow:0 9px 24px rgba(25,74,72,.07);
}
.rainAlertCenter[data-state="active"]{
  border-color:#68c7a4;
  background:
    radial-gradient(circle at 100% 0,rgba(25,166,116,.17),transparent 34%),
    linear-gradient(145deg,#f2fff9,#eefaf7);
}
.rainAlertCenter[data-state="blocked"],
.rainAlertCenter[data-state="unsupported"]{
  border-color:#e5cf99;
  background:linear-gradient(145deg,#fffdf6,#fff9eb);
}
.rainAlertHeader{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:10px;
  align-items:start;
}
.rainAlertIcon{
  display:grid;
  width:44px;
  height:44px;
  place-items:center;
  border-radius:14px;
  background:#d9f5ea;
  box-shadow:inset 0 0 0 1px rgba(8,127,91,.1);
  font-size:22px;
}
.rainAlertHeading{ min-width:0; }
.rainAlertEyebrow{
  display:block;
  color:#087f5b;
  font-size:10px;
  font-weight:900;
  letter-spacing:.025em;
}
.rainAlertHeading h3{
  margin:1px 0 0;
  color:var(--text);
  font-size:17px;
  line-height:1.3;
}
.rainAlertHeading p{
  margin:3px 0 0;
  color:var(--muted);
  font-size:11px;
  line-height:1.5;
}
.rainAlertStatus{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:30px;
  padding:5px 9px;
  border:1px solid #d8e2e9;
  border-radius:999px;
  background:#fff;
  color:#607086;
  font-size:10px;
  white-space:nowrap;
}
.rainAlertStatus > span{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#98a6b5;
  box-shadow:0 0 0 4px rgba(152,166,181,.13);
}
.rainAlertStatus[data-state="active"]{
  border-color:#a6dec9;
  color:#087f5b;
}
.rainAlertStatus[data-state="active"] > span{
  background:#17a673;
  box-shadow:0 0 0 4px rgba(23,166,115,.14);
  animation:rainAlertPulse 2s ease-out infinite;
}
.rainAlertStatus[data-state="blocked"] > span,
.rainAlertStatus[data-state="unsupported"] > span{
  background:#d38b13;
  box-shadow:0 0 0 4px rgba(211,139,19,.13);
}
@keyframes rainAlertPulse{
  0%,45%{ box-shadow:0 0 0 4px rgba(23,166,115,.14); }
  75%,100%{ box-shadow:0 0 0 8px rgba(23,166,115,0); }
}
.rainAlertScope{
  display:grid;
  grid-template-columns:minmax(180px,1.2fr) minmax(126px,.7fr) minmax(190px,1.1fr);
  gap:8px;
  margin-top:12px;
}
.rainAlertScope > div,
.rainAlertScope > label{
  display:flex;
  min-width:0;
  min-height:55px;
  flex-direction:column;
  justify-content:center;
  gap:3px;
  padding:7px 10px;
  border:1px solid #d9e6e5;
  border-radius:12px;
  background:rgba(255,255,255,.86);
}
.rainAlertScope span{
  color:var(--muted);
  font-size:9.5px;
  font-weight:750;
}
.rainAlertScope strong{
  overflow:hidden;
  color:var(--text);
  font-size:12px;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.rainAlertScope select{
  width:100%;
  min-height:30px;
  padding:0 28px 0 0;
  border:0;
  background-color:transparent;
  box-shadow:none;
  color:var(--text);
  font-size:11.5px;
  font-weight:850;
}
.rainAlertTriggers{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:8px;
}
.rainAlertTriggers::before{
  content:"แจ้งเมื่อ";
  align-self:center;
  color:var(--muted);
  font-size:10px;
  font-weight:850;
}
.rainAlertTriggers span{
  display:inline-flex;
  align-items:center;
  gap:4px;
  min-height:26px;
  padding:4px 8px;
  border:1px solid #d8e6e3;
  border-radius:999px;
  background:#fff;
  color:#345164;
  font-size:10px;
  font-weight:750;
}
.rainAlertTriggers span::before{
  content:"✓";
  color:#11956a;
  font-weight:950;
}
.rainAlertActions{
  display:flex;
  align-items:stretch;
  gap:8px;
  margin-top:11px;
}
.rainNotifyButton{
  min-height:48px;
  white-space:normal;
}
.rainNotifyPrimary{
  display:inline-flex;
  flex:1 1 310px;
  align-items:center;
  justify-content:center;
  gap:7px;
  border-color:#087f5b;
  background:linear-gradient(135deg,#087f5b,#07976b);
  color:#fff;
  box-shadow:0 8px 18px rgba(8,127,91,.2);
  font-size:13px;
}
.rainNotifyPrimary:hover{
  border-color:#066f50;
  background:linear-gradient(135deg,#066f50,#087f5b);
  color:#fff;
}
.rainNotifyButton[aria-pressed="true"]{
  border-color:#8dcdb6;
  background:#fff;
  color:#087f5b;
  box-shadow:none;
}
.rainNotifyTestButton{
  min-height:48px;
  flex:0 1 190px;
  border-color:#b8d7cc;
  background:#fff;
  color:#176f57;
}
.rainNotifyTestButton[hidden]{ display:none; }
.rainAlertLastCheck{
  margin:8px 0 0;
  color:#526679;
  font-size:10px;
  line-height:1.45;
}
.rainPushServerNote{
  display:flex;
  align-items:center;
  gap:7px;
  margin:8px 0 0;
  padding:8px 10px;
  border:1px solid #cadbe5;
  border-radius:10px;
  background:#f7fbfd;
  color:#466175;
  font-size:10.5px;
  line-height:1.45;
}
.rainPushServerNote > span{
  width:9px;
  height:9px;
  flex:0 0 auto;
  border-radius:50%;
  background:#8ca0af;
  box-shadow:0 0 0 4px rgba(140,160,175,.12);
}
.rainPushServerNote[data-state="ready"]{
  border-color:#a7dbc8;
  background:#effaf5;
  color:#087f5b;
}
.rainPushServerNote[data-state="ready"] > span{
  background:#16a36f;
  box-shadow:0 0 0 4px rgba(22,163,111,.13);
}
.rainPushServerNote[data-state="fallback"],
.rainPushServerNote[data-state="error"]{
  border-color:#ead6a2;
  background:#fffaf0;
  color:#765d25;
}
.rainPushServerNote[data-state="fallback"] > span,
.rainPushServerNote[data-state="error"] > span{
  background:#d38b13;
  box-shadow:0 0 0 4px rgba(211,139,19,.13);
}
.rainAlertLimit{
  margin:8px 0 0;
  padding:8px 10px;
  border:1px solid #ead6a2;
  border-radius:10px;
  background:#fffaf0;
  color:#6d5c35;
  font-size:10px;
  line-height:1.5;
}
.rainAlertLimit strong{ color:#8a5a00; }
.rainAlertHelp{
  margin-top:7px;
  color:var(--muted);
  font-size:10px;
}
.rainAlertHelp summary{
  width:max-content;
  max-width:100%;
  color:#176f57;
  font-weight:850;
  cursor:pointer;
}
.rainAlertHelp ol{
  margin:7px 0 0;
  padding-left:22px;
  color:#4f6576;
  line-height:1.65;
}
.rainAlertPrivacy{
  margin:7px 0 0;
  padding:7px 9px;
  border-radius:8px;
  background:#edf7f3;
  color:#426457;
  line-height:1.55;
}
.rainAlertHelp p{
  margin:6px 0 0;
  padding-left:14px;
  line-height:1.55;
}

.radarHeader{ flex-wrap:wrap; }
.radarSourceActions{
  display:flex;
  flex:0 1 auto;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:6px;
  margin-left:auto;
}
.radarSourceActions .btn{
  min-height:38px;
  padding:0 11px;
  border-radius:10px;
  font-size:11px;
  white-space:nowrap;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.radarSafetyNote{
  margin-top:10px;
  padding:10px 12px;
  border:1px solid #ead8ab;
  border-radius:12px;
  background:#fffaf0;
  color:#655a40;
  font-size:11px;
  line-height:1.6;
}
.radarSafetyNote strong{ color:#8a5a00; }
.radarSafetyNote a,
.forecastSource a,
.sourceDisclosure a,
.sourceDetails a{
  color:var(--radar-accent);
  font-weight:800;
  text-decoration:none;
}
.radarSafetyNote a:hover,
.forecastSource a:hover,
.sourceDisclosure a:hover,
.sourceDetails a:hover{ text-decoration:underline; }

.heroCondition{
  display:flex;
  align-items:center;
  gap:7px;
}
.heroConditionIcon{
  display:inline-grid;
  width:30px;
  height:30px;
  flex:0 0 auto;
  place-items:center;
  font-size:24px;
  line-height:1;
}
.heroConditionIcon[hidden]{ display:none; }

.weatherSideColumn{
  display:grid;
  min-width:0;
  gap:12px;
  align-content:start;
}
.weatherSideColumn > .card{ min-width:0; }
.shortTrendCard[hidden],
.hourlyForecastCard[hidden]{ display:none !important; }
.shortTrendFoot[hidden],
.hourlyForecastSummary[hidden],
.hourlyForecastRain[hidden],
.hourlyForecastMiniMeta[hidden],
.hourlyForecastWind[hidden],
.forecastDayRain[hidden],
.forecastDayRainBar[hidden],
.forecastDayMeta[hidden]{ display:none !important; }
.shortTrendCard{
  padding:14px;
  border-color:#cfe4dd;
  background:linear-gradient(145deg,#f5fbf8 0%,#fff 72%);
}
.shortTrendHeader,
.hourlyForecastHeader{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.shortTrendHeader > div:first-child,
.hourlyForecastHeader > div:first-child{ min-width:0; }
.shortTrendCard .sectionEyebrow,
.hourlyForecastCard .sectionEyebrow{
  color:var(--radar-accent);
  font-size:10px;
  font-weight:900;
  letter-spacing:.035em;
}
.shortTrendCard h2{
  margin:2px 0 3px;
  color:var(--text);
  font-size:17px;
  line-height:1.25;
}
.shortTrendBadge{
  display:inline-grid;
  min-width:54px;
  min-height:29px;
  flex:0 0 auto;
  padding:0 9px;
  place-items:center;
  border:1px solid #b8dfcf;
  border-radius:999px;
  background:#eaf8f1;
  color:#087f5b;
  font-size:10px;
  font-weight:900;
}
.shortTrendMetrics{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px;
  margin-top:11px;
}
.shortTrendMetric{
  display:grid;
  min-width:0;
  min-height:72px;
  align-content:center;
  padding:9px 10px;
  border:1px solid #dfeae6;
  border-radius:11px;
  background:rgba(255,255,255,.78);
}
.shortTrendMetric > span{
  color:#61758a;
  font-size:9.5px;
  font-weight:800;
}
.shortTrendMetric > strong{
  margin:2px 0;
  overflow-wrap:anywhere;
  color:#15384b;
  font-size:15px;
  font-weight:900;
  line-height:1.25;
}
.shortTrendMetric > small{
  color:#748699;
  font-size:8.5px;
  line-height:1.25;
}
.shortTrendFoot{
  margin-top:8px;
  padding:7px 9px;
  border-radius:9px;
  background:#edf6fa;
  color:#26647d;
  font-size:10px;
  font-weight:750;
  line-height:1.45;
}

.hourlyForecastCard{
  padding:15px 16px 14px;
  content-visibility:auto;
  contain-intrinsic-size:auto 270px;
}
.hourlyForecastHeader{
  margin-bottom:12px;
}
.hourlyForecastHeader .sectionTitle{
  margin:2px 0 3px;
  font-size:20px;
}
.hourlyForecastSummary{
  max-width:390px;
  padding:7px 10px;
  border:1px solid #cfe0e8;
  border-radius:999px;
  background:#f2f8fb;
  color:#315a70;
  font-size:10.5px;
  font-weight:850;
  line-height:1.35;
  text-align:right;
}
.hourlyForecastStrip{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:104px;
  gap:7px;
  overflow-x:auto;
  padding:2px 1px 8px;
  scroll-padding-inline:1px;
  scroll-snap-type:x proximity;
  scrollbar-width:thin;
  overscroll-behavior-inline:contain;
}
.hourlyForecastItem{
  display:flex;
  min-width:0;
  min-height:205px;
  flex-direction:column;
  align-items:center;
  padding:10px 7px 9px;
  scroll-snap-align:start;
  border:1px solid var(--line);
  border-radius:13px;
  background:#f8fafc;
  color:var(--text);
  text-align:center;
}
.hourlyForecastItem.is-first{
  border-color:#84cbb4;
  background:linear-gradient(180deg,#edf9f4 0%,#f8fcfa 100%);
  box-shadow:inset 0 3px 0 var(--radar-accent);
}
.hourlyForecastTime{
  color:#486175;
  font-size:10.5px;
  font-weight:900;
}
.hourlyForecastItem.is-first .hourlyForecastTime{ color:#087f5b; }
.hourlyForecastIcon{
  display:grid;
  width:38px;
  height:38px;
  margin:4px auto 2px;
  place-items:center;
  font-size:26px;
  line-height:1;
}
.hourlyForecastTemp{
  color:#bd3f2f;
  font-size:21px;
  font-weight:900;
  line-height:1.1;
}
.hourlyForecastCondition{
  display:-webkit-box;
  min-height:31px;
  margin:4px 0 5px;
  overflow:hidden;
  color:#3a5064;
  font-size:9.5px;
  font-weight:750;
  line-height:1.35;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}
.hourlyForecastRain{
  width:100%;
  padding:4px 3px;
  border-radius:7px;
  background:#e8f5fb;
  color:#176887;
  font-size:9px;
  font-weight:850;
  line-height:1.3;
}
.hourlyForecastMiniMeta{
  display:flex;
  width:100%;
  justify-content:center;
  gap:6px;
  margin-top:5px;
  color:#60758a;
  font-size:8.5px;
  font-weight:750;
}
.hourlyForecastWind{
  width:100%;
  margin-top:auto;
  padding-top:5px;
  border-top:1px solid #e2e8ee;
  color:#526b7f;
  font-size:8.5px;
  font-weight:800;
}

.forecastCardLocal{
  grid-column:1 / -1;
  overflow:hidden;
  content-visibility:auto;
  contain-intrinsic-size:auto 390px;
}
.forecastHeader{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:13px;
}
.forecastHeader > div:first-child{ min-width:0; }
.forecastHeader .sectionEyebrow{
  color:var(--radar-accent);
  font-size:10px;
  font-weight:900;
  letter-spacing:.035em;
}
.forecastHeader .sectionTitle{
  margin:2px 0 3px;
  font-size:21px;
}
.forecastStatus{
  display:inline-flex;
  flex:0 0 auto;
  align-items:center;
  gap:6px;
  min-height:30px;
  padding:0 10px;
  border:1px solid #cfe0e8;
  border-radius:999px;
  background:#f2f8fb;
  color:#426277;
  font-size:10.5px;
  font-weight:850;
  line-height:1.25;
  white-space:nowrap;
}
.forecastStatus::before{
  content:"";
  width:7px;
  height:7px;
  flex:0 0 auto;
  border-radius:50%;
  background:#60a5fa;
}
.forecastStatus[data-state="ok"]{
  border-color:#b8dfcf;
  background:#edf9f4;
  color:#116149;
}
.forecastStatus[data-state="ok"]::before{ background:#16a36a; }
.forecastStatus[data-state="stale"]{
  border-color:#ead8ab;
  background:#fff9e9;
  color:#875900;
}
.forecastStatus[data-state="stale"]::before{ background:#d99512; }
.forecastStatus[data-state="error"]{
  border-color:#efc5bf;
  background:#fff3f1;
  color:#a33a2d;
}
.forecastStatus[data-state="error"]::before{ background:#dc5a49; }

.forecastDays{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:8px;
}
.forecastDay{
  display:flex;
  min-width:0;
  min-height:220px;
  flex-direction:column;
  align-items:center;
  padding:11px 8px 9px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#f8fafc;
  color:var(--text);
  text-align:center;
}
.forecastDay.is-today{
  border-color:#84cbb4;
  background:linear-gradient(180deg,#edf9f4 0%,#f8fcfa 100%);
  box-shadow:inset 0 3px 0 var(--radar-accent);
}
.forecastDayDate{
  min-height:31px;
  color:#465b70;
  font-size:10.5px;
  font-weight:850;
  line-height:1.35;
}
.forecastDay.is-today .forecastDayDate{ color:#086d50; }
.forecastDayIcon{
  display:grid;
  width:40px;
  height:40px;
  margin:3px auto;
  place-items:center;
  font-size:27px;
  line-height:1;
}
.forecastDayCondition{
  display:-webkit-box;
  min-height:32px;
  overflow:hidden;
  color:#33485d;
  font-size:11px;
  font-weight:750;
  line-height:1.4;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}
.forecastDayTemps{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:6px;
  margin:5px 0 7px;
}
.forecastDayTemps strong{
  color:#c2412f;
  font-size:22px;
  font-weight:900;
  line-height:1;
}
.forecastDayTemps span{
  color:#61758a;
  font-size:14px;
  font-weight:800;
}
.forecastDayRain{
  width:100%;
  margin-top:auto;
  padding:5px 4px;
  border-radius:8px;
  background:#eaf5fb;
  color:#176887;
  font-size:9.5px;
  font-weight:800;
  line-height:1.35;
}
.forecastDayRainBar{
  width:100%;
  height:5px;
  margin-top:6px;
  overflow:hidden;
  border-radius:999px;
  background:#dcebf2;
}
.forecastDayRainBar > span{
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#37b7de 0%,#3478d4 72%,#6a4ec7 100%);
}
.forecastDayMeta{
  display:grid;
  width:100%;
  gap:3px;
  margin-top:7px;
}
.forecastDayMeta > span{
  padding:3px 4px;
  border-radius:7px;
  background:#eef2f6;
  color:#596f82;
  font-size:8.5px;
  font-weight:800;
  line-height:1.25;
}
.forecastDaySkeleton{
  min-height:220px;
  border-color:#e7edf2;
  background:
    linear-gradient(#e8eef2 0 0) center 14px / 62% 9px no-repeat,
    linear-gradient(#edf2f5 0 0) center 41px / 38px 38px no-repeat,
    linear-gradient(#e8eef2 0 0) center 90px / 74% 9px no-repeat,
    linear-gradient(#edf2f5 0 0) center 113px / 55% 18px no-repeat,
    linear-gradient(#e7f0f4 0 0) center 146px / calc(100% - 16px) 22px no-repeat,
    linear-gradient(#edf2f5 0 0) center 181px / calc(100% - 18px) 24px no-repeat,
    #f8fafc;
  animation:forecastSkeletonPulse 1.35s ease-in-out infinite alternate;
}
@keyframes forecastSkeletonPulse{
  to{ opacity:.58; }
}
.forecastEmpty{
  grid-column:1 / -1;
  padding:18px;
  border:1px dashed #cbd8e2;
  border-radius:13px;
  background:#f8fafc;
  color:var(--muted);
  font-size:12px;
  line-height:1.55;
  text-align:center;
}
.forecastNarratives{
  margin-top:12px;
  padding:12px;
  border:1px solid #d9e5ec;
  border-radius:14px;
  background:linear-gradient(145deg,#f7fbfd 0%,#fff 76%);
}
.forecastNarrativesHeader{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:9px;
}
.forecastNarrativesHeader h3{
  margin:0;
  color:#243c52;
  font-size:14px;
  line-height:1.35;
}
.forecastNarrativesHeader p{
  margin:2px 0 0;
  color:var(--muted);
  font-size:11px;
  line-height:1.45;
}
.forecastCopyButton{
  min-height:36px;
  flex:0 0 auto;
  padding-inline:11px;
  font-size:10.5px;
}
.forecastNarrativeList{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px;
}
.forecastNarrativeItem{
  display:grid;
  grid-template-columns:minmax(74px,auto) minmax(0,1fr);
  gap:8px;
  align-items:start;
  padding:9px 10px;
  border:1px solid #e0e8ee;
  border-radius:11px;
  background:#fff;
}
.forecastNarrativeItem strong{
  color:#087f5b;
  font-size:11.5px;
  line-height:1.5;
}
.forecastNarrativeItem p{
  margin:0;
  color:#3c5266;
  font-size:12px;
  line-height:1.6;
}
.forecastNarrativeNote{
  margin:8px 1px 0;
  color:#6b7d8e;
  font-size:10px;
  line-height:1.5;
}
.forecastSource{
  margin-top:11px;
  padding-top:9px;
  border-top:1px solid #e8edf2;
  color:var(--muted);
  font-size:10.5px;
  line-height:1.55;
}

.sourceDisclosure,
.sourceDetails{
  margin-top:11px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:12px;
  background:#f7f9fc;
}
.sourceDisclosure > summary,
.sourceDetails > summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  color:#40556a;
  font-size:11px;
  font-weight:850;
  line-height:1.4;
  cursor:pointer;
  list-style:none;
  user-select:none;
}
.sourceDisclosure > summary::-webkit-details-marker,
.sourceDetails > summary::-webkit-details-marker{ display:none; }
.sourceDisclosure > summary::after,
.sourceDetails > summary::after{
  content:"＋";
  color:var(--radar-accent);
  font-size:15px;
  line-height:1;
}
.sourceDisclosure[open] > summary,
.sourceDetails[open] > summary{
  border-bottom:1px solid var(--line);
  background:#fff;
}
.sourceDisclosure[open] > summary::after,
.sourceDetails[open] > summary::after{ content:"−"; }
.sourceDisclosureBody,
.sourceDetailsBody{
  display:grid;
  gap:7px;
  padding:10px 12px 11px;
  color:var(--muted);
  font-size:10.5px;
  line-height:1.55;
}

.pwaUtilityBar{
  position:fixed;
  z-index:9000;
  right:14px;
  bottom:14px;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:7px;
  pointer-events:none;
}
.pwaUtilityBar > *{ pointer-events:auto; }
.pwaUtilityItem{
  position:relative;
  display:flex;
  max-width:100%;
  align-items:center;
}
.pwaUtilityItem[hidden]{ display:none; }
.pwaUtilityDismiss{
  position:absolute;
  z-index:2;
  top:-10px;
  right:-8px;
  display:grid;
  width:30px;
  height:30px;
  padding:0;
  place-items:center;
  border:1px solid #d6e0e7;
  border-radius:50%;
  background:#fff;
  color:#40566b;
  font:inherit;
  font-size:15px;
  font-weight:900;
  line-height:1;
  box-shadow:0 5px 15px rgba(15,35,49,.22);
  cursor:pointer;
  touch-action:manipulation;
}
.pwaUtilityDismiss:hover{ background:#f2f6f8; }
.pwaUtilityDismiss:focus-visible{
  outline:3px solid rgba(14,165,233,.35);
  outline-offset:2px;
}
.pwaInstallButton,
.pwaUpdateButton{
  min-height:46px;
  padding:0 15px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:999px;
  background:#087f5b;
  color:#fff;
  font:inherit;
  font-size:12px;
  font-weight:850;
  box-shadow:0 10px 26px rgba(4,33,24,.28);
  cursor:pointer;
}
.pwaUpdateButton{ background:#0f78a8; }
.pwaToast{
  max-width:min(340px,calc(100vw - 28px));
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:13px;
  background:var(--card);
  color:var(--text);
  font-size:11px;
  line-height:1.5;
  box-shadow:0 10px 28px rgba(0,0,0,.2);
}
.pwaInstallDialog{
  width:min(500px,calc(100vw - 24px));
  max-width:500px;
  max-height:calc(100vh - 24px);
  max-height:min(90dvh,680px);
  padding:0;
  overflow:hidden;
  border:0;
  border-radius:18px;
  background:var(--card);
  color:var(--text);
  box-shadow:0 24px 76px rgba(0,0,0,.36);
}
.pwaInstallDialog::backdrop{
  background:rgba(3,12,20,.68);
  backdrop-filter:blur(3px);
}
.pwaInstallDialogPanel{
  display:flex;
  max-height:calc(100vh - 24px);
  max-height:min(90dvh,680px);
  flex-direction:column;
}
.pwaInstallDialogHeader{
  flex:0 0 auto;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:15px 16px 12px;
  border-bottom:1px solid var(--line);
}
.pwaInstallDialogHeader span{
  color:#087f5b;
  font-size:10px;
  font-weight:900;
  letter-spacing:.04em;
}
.pwaInstallDialogHeader h2{
  margin:2px 0 0;
  font-size:18px;
  line-height:1.35;
}
.pwaInstallDialogHeader button{
  width:38px;
  height:38px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#f4f7fa;
  color:var(--text);
  font:inherit;
  cursor:pointer;
}
.pwaInstallDialogBody{
  flex:1 1 auto;
  overflow-y:auto;
  padding:14px 17px 10px;
  overscroll-behavior:contain;
}
.pwaInstallDialogBody ol{
  display:grid;
  gap:10px;
  margin:0;
  padding-left:22px;
  font-size:13px;
  line-height:1.55;
}
.pwaInstallDialogBody li::marker{
  color:#087f5b;
  font-weight:900;
}
.pwaInstallDialogBody p{
  margin:14px 0 0;
  padding:10px 11px;
  border-radius:11px;
  background:#eef6f2;
  color:#355348;
  font-size:11px;
  line-height:1.55;
}
.pwaInstallDialogFooter{
  display:flex;
  flex:0 0 auto;
  justify-content:flex-end;
  padding:10px 16px 15px;
}
.pwaInstallDialogFooter .btn{ min-width:120px; }

/* Keep the controls attached to the radar instead of making people hunt above it. */
.radarMapBlock{
  width:100%;
  max-width:832px;
  margin-inline:auto;
}
.radarViewerShell{
  --radar-zoom-space:58px;
  position:relative;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:15px;
  background:#07111f;
}
.radarViewerShell > .tambonRadarToolbar{
  position:absolute;
  z-index:21;
  top:9px;
  left:9px;
  width:auto;
  margin:0;
  padding:3px;
  border-color:rgba(255,255,255,.32);
  border-radius:11px;
  background:rgba(2,17,32,.84);
  flex-wrap:nowrap;
  gap:0;
  box-shadow:0 5px 16px rgba(0,0,0,.28);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.radarViewerShell > .tambonRadarToolbar .radarControlGroup{
  width:auto;
  flex-wrap:nowrap;
  gap:4px;
}
.radarViewerShell > .tambonRadarToolbar .radarControlLabel{
  padding:0 5px;
  color:rgba(255,255,255,.82);
  font-size:10px;
  font-weight:850;
  white-space:nowrap;
}
.radarViewerShell > .tambonRadarToolbar .subtab{
  min-height:38px;
  flex:0 0 auto;
  padding:0 9px;
  border-color:rgba(255,255,255,.34);
  border-radius:8px;
  background:rgba(21,48,66,.88);
  color:#fff;
  font-size:10.5px;
  font-weight:850;
  white-space:nowrap;
}
.radarViewerShell > .tambonRadarToolbar .subtab:hover{
  background:rgba(28,65,86,.96);
}
.radarViewerShell > .tambonRadarToolbar .subtab.active{
  border-color:rgba(110,231,183,.78);
  background:rgba(6,118,83,.96);
  color:#fff;
}
.radarMapQuickActions{
  position:absolute;
  z-index:20;
  top:9px;
  right:9px;
  display:flex;
  max-width:calc(100% - 18px);
  gap:6px;
  overflow:visible;
  padding:2px;
}
.radarMapQuickActions .btn{
  flex:0 0 auto;
  min-height:38px;
  padding:0 11px;
  border-color:rgba(255,255,255,.38);
  border-radius:10px;
  background:rgba(2,17,32,.82);
  color:#fff;
  font-size:11px;
  font-weight:850;
  white-space:nowrap;
  box-shadow:0 5px 16px rgba(0,0,0,.28);
  backdrop-filter:blur(8px);
}
.radarMapQuickActions .btn:hover{ background:rgba(4,38,57,.92); }
.radarMapQuickActions .btn.active{
  border-color:rgba(110,231,183,.74);
  background:rgba(6,95,70,.9);
  color:#fff;
}
.radarViewerShell .tmdRadarScroll{
  border:0;
  border-radius:0;
}
.radarViewerShell .radarImageNotice{ top:56px; }
.radarViewerShell > .radarZoomBar{
  margin:0;
  padding:8px 10px;
  border-top:1px solid var(--line);
  background:#f7f9fc;
}
.radarMapBlock .tambonRadarStatus{
  align-items:center;
  padding-inline:2px;
}
.radarStatusRefresh{
  min-height:36px;
  margin-left:auto;
  padding:0 10px;
  border-radius:10px;
  font-size:11px;
  white-space:nowrap;
}
.radarMapBlock + .rainInsight,
.radarFocusCardCompact,
.radarAdvancedOptions{
  width:100%;
  max-width:832px;
  margin-inline:auto;
}
.tambonRadarPanel > .rainInsight{
  grid-template-columns:auto minmax(0,1fr);
  margin-top:10px;
}
.radarFocusCardCompact{
  margin-top:10px;
  margin-bottom:0;
}
.radarAdvancedOptions{
  margin-top:10px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:14px;
  background:#f7f9fc;
}
.radarAdvancedOptions > summary{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:4px 14px;
  padding:12px 14px;
  color:var(--text);
  font-size:13px;
  font-weight:900;
  cursor:pointer;
  list-style:none;
}
.radarAdvancedOptions > summary::-webkit-details-marker{ display:none; }
.radarAdvancedOptions > summary::after{
  content:"＋";
  grid-column:2;
  grid-row:1 / span 2;
  color:#087f5b;
  font-size:18px;
}
.radarAdvancedOptions[open] > summary::after{ content:"−"; }
.radarAdvancedOptions > summary small{
  color:var(--muted);
  font-size:11px;
  font-weight:650;
}
.radarAdvancedBody{
  padding:0 10px 10px;
  border-top:1px solid var(--line);
}
.radarAdvancedBody .radarExperienceBar{
  margin:10px 0 0;
}
.radarAdvancedControls{
  display:grid;
  grid-template-columns:minmax(140px,220px);
  align-items:center;
  gap:8px;
  margin-top:9px;
}
.radarAdvancedControls .rainRadiusControl{
  min-height:42px;
  margin:0;
}

.radarViewerShell:fullscreen .radarMapQuickActions,
.radarViewerShell.is-pseudo-fullscreen .radarMapQuickActions{
  top:calc(env(safe-area-inset-top,0px) + 58px);
  left:calc(env(safe-area-inset-left,0px) + 10px);
  right:auto;
}
.radarViewerShell:fullscreen > .tambonRadarToolbar,
.radarViewerShell.is-pseudo-fullscreen > .tambonRadarToolbar{
  top:calc(env(safe-area-inset-top,0px) + 8px);
  left:calc(env(safe-area-inset-left,0px) + 10px);
}
.radarViewerShell:fullscreen #radarFullscreenBtn,
.radarViewerShell.is-pseudo-fullscreen #radarFullscreenBtn{
  display:none;
}
.radarViewerShell:fullscreen .radarImageNotice,
.radarViewerShell.is-pseudo-fullscreen .radarImageNotice{
  top:calc(env(safe-area-inset-top,0px) + 104px);
}
.radarViewerShell:fullscreen .tmdRadarScroll,
.radarViewerShell.is-pseudo-fullscreen .tmdRadarScroll{
  height:calc(100vh - var(--radar-zoom-space));
  height:calc(100dvh - var(--radar-zoom-space) - env(safe-area-inset-bottom,0px));
}
.radarViewerShell:fullscreen > .radarZoomBar,
.radarViewerShell.is-pseudo-fullscreen > .radarZoomBar{
  position:absolute;
  z-index:25;
  right:0;
  bottom:env(safe-area-inset-bottom,0px);
  left:0;
}
.radarViewerShell:fullscreen,
.radarViewerShell.is-pseudo-fullscreen{
  height:100vh;
  height:100dvh;
}
.radarFullscreenExit{
  top:calc(env(safe-area-inset-top,0px) + 10px);
  right:calc(env(safe-area-inset-right,0px) + 10px);
}

@media (max-width:720px){
  .rainAlertCenter{
    padding:12px;
    border-radius:16px;
  }
  .rainAlertHeader{
    grid-template-columns:auto minmax(0,1fr);
  }
  .rainAlertStatus{
    grid-column:1 / -1;
    width:max-content;
    margin-left:54px;
  }
  .rainAlertScope{
    grid-template-columns:1fr 1fr;
  }
  .rainAlertPlace{ grid-column:1 / -1; }
  .rainAlertActions{
    display:grid;
    grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr);
  }
  .rainNotifyPrimary,
  .rainNotifyTestButton{
    width:100%;
    min-width:0;
  }
  .radarMapQuickActions{
    top:58px;
    right:7px;
    left:auto;
    max-width:none;
    justify-content:flex-end;
  }
  .radarViewerShell > .tambonRadarToolbar{
    top:7px;
    left:7px;
  }
  .radarViewerShell > .tambonRadarToolbar .radarControlLabel{
    padding-inline:4px;
    font-size:9.5px;
  }
  .radarViewerShell > .tambonRadarToolbar .subtab{
    min-height:38px;
    padding-inline:7px;
    font-size:10px;
  }
  .radarMapQuickActions .btn{
    min-height:36px;
    padding:0 9px;
    font-size:10.5px;
  }
  .radarViewerShell .radarImageNotice{
    top:110px;
    right:7px;
  }
  .radarViewerShell > .radarZoomBar{
    gap:6px;
    padding:7px 8px;
  }
  .radarAdvancedControls{
    grid-template-columns:1fr;
  }
  .radarAdvancedControls .btn{
    width:100%;
  }
  .radarStatusRefresh{
    width:100%;
    margin:7px 0 0;
  }
  .radarExperienceBar{
    grid-template-columns:1fr;
    align-items:stretch;
  }
  .radarModePicker{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .radarModeButton{
    min-width:0;
    padding:0 7px;
    font-size:11px;
  }
  .radarDistrictLabel{
    max-width:64px;
    padding:1px 3px;
    font-size:7px;
  }
  .radarTimelineHeader{ display:block; }
  .radarTimelineStatus{
    margin-top:3px;
    text-align:left;
  }
  .radarTimelineControls{
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  .radarSpeedControl{
    grid-column:1 / -1;
    justify-content:space-between;
    margin-left:0;
  }
  .rainInsight{
    grid-template-columns:auto minmax(0,1fr);
  }
  .radarSourceActions{
    flex:1 1 100%;
    justify-content:flex-start;
    margin-left:0;
  }
  .radarSourceActions .btn{
    flex:1 1 calc(50% - 4px);
    min-width:0;
    padding-inline:8px;
    white-space:normal;
    text-align:center;
  }
  .radarSafetyNote{
    padding:9px 10px;
    font-size:10.5px;
  }
  .shortTrendMetrics{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .shortTrendMetric{
    min-height:68px;
    padding:8px 9px;
  }
  .shortTrendMetric > strong{ font-size:14px; }
  .hourlyForecastCard{ padding:13px; }
  .hourlyForecastHeader{
    display:block;
    margin-bottom:10px;
  }
  .hourlyForecastHeader .sectionTitle{ font-size:18px; }
  .hourlyForecastSummary{
    display:inline-flex;
    max-width:100%;
    margin-top:8px;
    border-radius:10px;
    text-align:left;
  }
  .hourlyForecastStrip{
    grid-auto-columns:112px;
  }
  .forecastHeader{
    display:block;
    margin-bottom:10px;
  }
  .forecastStatus{
    max-width:100%;
    margin-top:8px;
    white-space:normal;
  }
  .forecastDays{
    grid-template-columns:none;
    grid-auto-flow:column;
    grid-auto-columns:minmax(142px,43vw);
    gap:8px;
    overflow-x:auto;
    padding:2px 1px 7px;
    scroll-padding-inline:1px;
    scroll-snap-type:x proximity;
    scrollbar-width:thin;
    overscroll-behavior-inline:contain;
  }
  .forecastDay{
    min-height:214px;
    scroll-snap-align:start;
  }
  .forecastDaySkeleton{ min-height:214px; }
  .forecastEmpty{
    width:calc(100vw - 48px);
    grid-column:auto;
  }
  .sourceDisclosureBody,
  .sourceDetailsBody{
    padding:9px 10px 10px;
    font-size:10px;
  }
}

@media (max-width:460px){
  .rainAlertHeading h3{ font-size:15px; }
  .rainAlertStatus{ margin-left:0; }
  .rainAlertScope{ grid-template-columns:1fr 1fr; }
  .rainAlertPlace{ grid-column:1 / -1; }
  .rainAlertTriggers{
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  .rainAlertTriggers::before{
    grid-column:1 / -1;
    margin-bottom:-1px;
  }
  .rainAlertTriggers span{
    justify-content:flex-start;
    border-radius:10px;
  }
  .rainAlertTriggers span:last-child{ grid-column:auto; }
  .rainAlertActions{ grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr); }
  .rainNotifyPrimary{ grid-column:1 / -1; }
  .rainAlertActions:has(.rainNotifyTestButton:not([hidden])) .rainNotifyPrimary{ grid-column:auto; }
}

@media (max-width:360px){
  .rainAlertScope,
  .rainAlertActions{
    grid-template-columns:1fr;
  }
  .rainAlertPlace{ grid-column:auto; }
}

@media (prefers-reduced-motion:reduce){
  .radarModeButton,
  .tmdRadarCanvas{ transition:none; }
  .forecastDaySkeleton,
  .rainAlertStatus[data-state="active"] > span{ animation:none; }
}

/* 2026-07 usability pass: simple summaries, compact controls and contextual links */
:where(a,button,select,input,summary):focus-visible{
  outline:3px solid rgba(14,165,233,.48);
  outline-offset:3px;
}
.liveBadge[data-state="stale"]{
  color:#9a6700;
  background:#fff7d6;
}
.liveBadge[data-state="stale"] span{ background:#d99512; }
#weatherCard,
#rainSummaryCard,
#khonkaenRadar,
#hourlyForecastCard,
#sevenDayForecast{ scroll-margin-top:76px; }

.weatherQuickNav{
  display:flex;
  gap:7px;
  margin-top:10px;
  overflow-x:auto;
  padding:2px;
  scrollbar-width:none;
}
.weatherQuickNav::-webkit-scrollbar{ display:none; }
.weatherQuickNav a{
  display:inline-flex;
  min-height:40px;
  flex:0 0 auto;
  align-items:center;
  justify-content:center;
  padding:0 13px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
  color:#294158;
  font-size:12px;
  font-weight:850;
  text-decoration:none;
  box-shadow:0 4px 14px rgba(25,48,71,.05);
}
.weatherQuickNav a:first-child{
  border-color:#9cd3bf;
  background:#edf9f4;
  color:#087f5b;
}

.rainSummaryCard{
  padding:14px;
  border-color:#cfe2ed;
  background:linear-gradient(145deg,#f6fbff 0%,#fff 76%);
}
.rainSummaryHeader{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.rainSummaryHeader h2{
  margin:2px 0 3px;
  font-size:17px;
  line-height:1.25;
}
.rainSummaryRadarLink,
.contextLink{
  color:#087f5b;
  font-size:11.5px;
  font-weight:850;
  text-decoration:none;
}
.rainSummaryRadarLink{
  flex:0 0 auto;
  padding:7px 9px;
  border:1px solid #b8dfcf;
  border-radius:999px;
  background:#eaf8f1;
}
.rainSummaryGrid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px;
  margin-top:11px;
}
.rainSummaryItem{
  display:grid;
  min-width:0;
  min-height:78px;
  align-content:center;
  padding:9px 10px;
  border:1px solid #dfe8ef;
  border-radius:11px;
  background:rgba(255,255,255,.84);
}
.rainSummaryItem > span{
  color:#526a7e;
  font-size:11px;
  font-weight:800;
}
.rainSummaryItem > strong{
  margin:3px 0;
  color:#15384b;
  font-size:14px;
  font-weight:900;
  line-height:1.25;
  overflow-wrap:anywhere;
}
.rainSummaryItem > small{
  color:#6b7f91;
  font-size:11px;
  line-height:1.3;
}
.rainSummaryItem[data-state="clear"]{ border-color:#a9d9c6; background:#f1fbf6; }
.rainSummaryItem[data-state="rain"]{ border-color:#91c9e0; background:#eef8fc; }
.rainSummaryItem[data-state="warning"]{ border-color:#e9bd86; background:#fff8ec; }
.rainSummaryItem[data-state="error"]{ border-color:#efb5ad; background:#fff5f3; }
.rainSummaryExplain{
  margin:8px 0 6px;
  color:#4b6579;
  font-size:11.5px;
  line-height:1.5;
}
.contextLink{
  display:inline-flex;
  min-height:32px;
  align-items:center;
}

.tambonRadarPanel > .rainInsight{
  width:100%;
  max-width:832px;
  margin:10px auto;
}
.radarMapQuickActions{ overflow:visible; }
.radarMapControlsMenu{
  position:relative;
  flex:0 0 auto;
}
.radarMapControlsMenu > summary{
  display:inline-flex;
  min-height:38px;
  align-items:center;
  justify-content:center;
  padding:0 11px;
  border:1px solid rgba(255,255,255,.38);
  border-radius:10px;
  background:rgba(2,17,32,.82);
  color:#fff;
  font-size:11px;
  font-weight:850;
  white-space:nowrap;
  cursor:pointer;
  list-style:none;
  box-shadow:0 5px 16px rgba(0,0,0,.28);
}
.radarMapControlsMenu > summary::-webkit-details-marker{ display:none; }
.radarMapControlsMenu > summary::after{
  content:"▾";
  margin-left:6px;
  font-size:9px;
}
.radarMapControlsMenu[open] > summary::after{ content:"▴"; }
.radarMapControlsPanel{
  position:absolute;
  z-index:30;
  top:calc(100% + 6px);
  right:0;
  display:grid;
  min-width:136px;
  gap:5px;
  padding:6px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:12px;
  background:rgba(2,17,32,.94);
  box-shadow:0 12px 28px rgba(0,0,0,.34);
}
.radarMapControlsPanel .btn{
  width:100%;
  justify-content:flex-start;
  box-shadow:none;
}

.radarFocusCardCompact{
  display:grid;
  grid-template-columns:64px minmax(0,1fr) auto;
  align-items:center;
}
.radarFocusPreview{
  position:relative;
  width:64px;
  height:64px;
  overflow:hidden;
  border:1px solid #bfd4df;
  border-radius:11px;
  background:
    radial-gradient(circle at center,rgba(14,165,233,.25) 0 3px,transparent 4px),
    #dfe9e4;
}
.radarFocusPreview canvas{
  display:block;
  width:100%;
  height:100%;
}
.radarFocusPreview span{
  position:absolute;
  right:3px;
  bottom:3px;
  left:3px;
  overflow:hidden;
  padding:2px 3px;
  border-radius:5px;
  background:rgba(2,17,32,.72);
  color:#fff;
  font-size:8px;
  font-weight:800;
  text-align:center;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.hourlyChartWrap{
  margin:2px 0 10px;
  padding:11px;
  border:1px solid #dce6ee;
  border-radius:14px;
  background:#f8fafc;
}
.hourlyChartWrap[hidden]{ display:none !important; }
.hourlyChartHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color:#294158;
  font-size:13px;
}
.hourlyFirstRainButton{
  min-height:38px;
  padding:0 10px;
  color:#075985;
  background:#eaf7ff;
  font-size:11px;
}
.hourlyFirstRainButton[hidden]{ display:none !important; }
.hourlyChartLegend{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin:7px 0 3px;
  color:#607086;
  font-size:11px;
}
.hourlyChartLegend span{ display:inline-flex; align-items:center; gap:5px; }
.hourlyChartLegend i{ display:inline-block; width:14px; height:4px; border-radius:4px; }
.hourlyLegendRain{ background:#38a9dc; }
.hourlyLegendTemp{ background:#ef6f51; }
.hourlyChartScroll{
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  scrollbar-width:thin;
}
.hourlyForecastChart{
  display:block;
  width:100%;
  min-width:760px;
  height:auto;
  overflow:visible;
}
.hourlyForecastDetails{
  border:1px solid #dde6ee;
  border-radius:12px;
  background:#fff;
}
.hourlyForecastDetails > summary{
  display:flex;
  min-height:44px;
  align-items:center;
  padding:0 12px;
  color:#294158;
  font-size:12px;
  font-weight:850;
  cursor:pointer;
}
.hourlyForecastDetails > summary::after{
  content:"＋";
  margin-left:auto;
  color:#087f5b;
}
.hourlyForecastDetails[open] > summary::after{ content:"−"; }
.hourlyForecastDetails .hourlyForecastStrip{
  padding:2px 10px 11px;
}
.hourlyForecastItem.is-first-rain{
  border-color:#58afd2;
  box-shadow:inset 0 3px 0 #38a9dc;
}

.forecastHighlights{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin:0 0 11px;
}
.forecastHighlights[hidden]{ display:none !important; }
.forecastHighlight{
  min-width:0;
  padding:9px 10px;
  border:1px solid #dce6ee;
  border-radius:11px;
  background:#f8fafc;
}
.forecastHighlight span{
  display:block;
  color:#607086;
  font-size:11px;
  font-weight:750;
}
.forecastHighlight strong{
  display:block;
  margin-top:3px;
  color:#294158;
  font-size:13px;
  line-height:1.35;
}
.forecastRelatedLinks{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:10px;
}
.forecastRelatedLinks a{
  display:inline-flex;
  min-height:36px;
  align-items:center;
  padding:0 10px;
  border:1px solid #d6e2e9;
  border-radius:999px;
  background:#f7fafc;
  color:#315a70;
  font-size:11.5px;
  font-weight:800;
  text-decoration:none;
}

.footerServiceLinks{
  display:grid;
  grid-template-columns:1.15fr 1fr .9fr;
  gap:16px;
}
.footerServiceHeading{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}
.footerServiceHeading strong{
  color:#294158;
  font-size:13px;
}
.footerServiceHeading span{
  color:var(--muted);
  font-size:10.5px;
}
.footerLinkGroup{
  min-width:0;
  padding:11px;
  border:1px solid #e0e8ef;
  border-radius:13px;
  background:#f8fafc;
}
.footerLinkGroup > strong{
  display:block;
  margin-bottom:7px;
  color:#294158;
  font-size:12px;
}
.footerLinkGroup > div{
  display:flex;
  flex-wrap:wrap;
  gap:6px 10px;
}
.footerLinkGroup a{
  color:#4b6579;
  font-size:11.5px;
  line-height:1.45;
  text-decoration:none;
}
.footerLinkGroup a:hover,
.forecastRelatedLinks a:hover,
.contextLink:hover{ color:#087f5b; text-decoration:underline; }

.pwaUtilityDismiss{
  top:-14px;
  right:-10px;
  width:44px;
  height:44px;
}
.pwaInstallDialogHeader button,
.radarModeButton,
.radarTimelineControls .btn,
.radarSpeedControl select,
.radarMapQuickActions .btn,
.radarMapControlsMenu > summary,
.radarStatusRefresh,
.zoomButton,
.zoomReset,
.subtab{ min-height:44px; }
.pwaInstallDialogHeader button,
.zoomButton{ min-width:44px; width:44px; height:44px; }
.radarFrameRange{ min-height:44px; }

.shortTrendMetric > span,
.shortTrendMetric > small,
.hourlyForecastCondition,
.hourlyForecastRain,
.hourlyForecastMiniMeta,
.hourlyForecastWind,
.forecastDayRain,
.radarSafetyNote{ font-size:11px; }
.shortTrendFoot,
.radarTimelineStatus,
.radarTimelineTicks,
.forecastDayMeta,
.forecastDayMeta > span,
.forecastSource,
.radarLegendLevel small,
.radarImageNotice,
.sourceDisclosureBody,
.sourceDetailsBody{ font-size:11px; }

.weatherGuideCta{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
  padding:14px 16px;
  border:1px solid #99d5bf;
  border-radius:15px;
  background:
    radial-gradient(circle at 100% 0,rgba(28,181,127,.16),transparent 34%),
    linear-gradient(135deg,#effbf6,#f7fcff);
  color:#17384a;
  text-decoration:none;
  box-shadow:0 8px 22px rgba(8,127,91,.08);
}
.weatherGuideCtaIcon{
  display:grid;
  width:44px;
  height:44px;
  place-items:center;
  border-radius:13px;
  background:#d9f5ea;
  font-size:23px;
}
.weatherGuideCta strong{
  display:block;
  color:#087f5b;
  font-size:14px;
  line-height:1.35;
}
.weatherGuideCta small{
  display:block;
  margin-top:2px;
  color:#597083;
  font-size:10.5px;
  line-height:1.45;
}
.weatherGuideCta b{
  display:inline-flex;
  min-height:38px;
  align-items:center;
  justify-content:center;
  padding:0 12px;
  border-radius:999px;
  background:#087f5b;
  color:#fff;
  font-size:11px;
  white-space:nowrap;
}
.weatherGuideCta:hover{
  border-color:#62ba99;
  transform:translateY(-1px);
}

@media (max-width:860px){
  .weatherQuickNav{
    position:sticky;
    z-index:40;
    top:0;
    margin-inline:-3px;
    padding:7px 3px;
    background:rgba(243,246,250,.94);
    backdrop-filter:blur(10px);
  }
  .footerServiceLinks{ grid-template-columns:1fr; gap:9px; }
}

@media (max-width:640px){
  .weatherQuickNav{
    gap:4px;
    margin-top:7px;
    margin-inline:0;
    padding:5px 2px;
  }
  .weatherQuickNav a{
    min-height:40px;
    padding-inline:10px;
    font-size:11.5px;
  }
  .rainSummaryGrid{ grid-template-columns:1fr; }
  .rainSummaryItem{
    grid-template-columns:minmax(0,1fr) auto;
    min-height:62px;
    align-items:center;
    gap:2px 10px;
  }
  .rainSummaryItem > span{ grid-column:1; }
  .rainSummaryItem > strong{ grid-column:2; grid-row:1 / span 2; text-align:right; }
  .rainSummaryItem > small{ grid-column:1; }
  .radarMapQuickActions{
    right:7px;
    left:auto;
    width:auto;
  }
  .radarMapQuickActions .btn,
  .radarMapControlsMenu > summary{ min-height:44px; font-size:11px; }
  .radarMapControlsPanel{ min-width:150px; }
  .radarFocusCardCompact{
    grid-template-columns:64px minmax(0,1fr);
  }
  .radarFocusActions{ grid-column:1 / -1; }
  .hourlyChartWrap{ margin-inline:-2px; padding:9px; }
  .hourlyChartHeader{ align-items:flex-start; }
  .hourlyForecastChart{ min-width:700px; }
  .forecastHighlights{ grid-template-columns:1fr; }
  .forecastNarrativesHeader{
    align-items:center;
    gap:8px;
  }
  .forecastCopyButton{
    min-height:38px;
    padding-inline:9px;
  }
  .forecastNarrativeList{ grid-template-columns:1fr; }
  .forecastNarrativeItem{
    grid-template-columns:70px minmax(0,1fr);
    padding:8px 9px;
  }
  .weatherGuideCta{
    grid-template-columns:40px minmax(0,1fr);
    gap:9px;
    padding:12px;
  }
  .weatherGuideCtaIcon{
    width:40px;
    height:40px;
    font-size:20px;
  }
  .weatherGuideCta b{
    grid-column:1 / -1;
    min-height:42px;
  }
  .footerServiceHeading{
    margin-bottom:6px;
  }
  .footerServiceHeading span{ display:none; }
  .footerServiceLinks{ gap:5px; }
  .footerLinkGroup{
    padding:8px 9px;
    border-radius:11px;
  }
  .footerLinkGroup > strong{
    margin-bottom:4px;
    font-size:11.5px;
  }
  .footerLinkGroup > div{ gap:3px 8px; }
  .footerLinkGroup a{
    display:inline-flex;
    min-height:32px;
    align-items:center;
    padding-block:2px;
    line-height:1.3;
  }
}

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