/* Rainfall page — singular visual owner. */
.ttv-rainfall-page{
  --ttv-rain-accent:#168bd2;
  --ttv-rain-deep:#0e5f94;
  --ttv-rain-soft:#eef8ff;
  --ttv-rain-line:#c9e2f2;
  padding:var(--ttv-space-6) 0 56px;
}
.ttv-rainfall-page .ttv-section__head--intro{align-items:flex-start}

/* Shared location context is owned by assets/css/location-switcher.css. */
.ttv-rainfall-page .ttv-utility-sourcebar{margin-top:var(--ttv-space-2)}
.ttv-rainfall-search-note{margin:var(--ttv-space-2) 0 0;padding:10px var(--ttv-space-3);border:1px solid var(--ttv-warn-line);border-radius:var(--ttv-radius-xs);background:var(--ttv-warn-bg);color:#805014;font-size:var(--ttv-text-sm)}

/* Data states */
.ttv-rainfall-state{margin-top:var(--ttv-section-gap);padding:15px var(--ttv-space-4);display:flex;align-items:flex-start;gap:11px;border:1px solid var(--ttv-warn-line);background:#fffaf2;border-radius:var(--ttv-radius-sm)}
.ttv-rainfall-state>.ttv-icon{color:var(--ttv-warn);margin-top:2px;flex:0 0 auto}
.ttv-rainfall-state__body{min-width:0;flex:1}
.ttv-rainfall-state strong{display:block}
.ttv-rainfall-state p{margin:2px 0 0;color:var(--ttv-muted);font-size:var(--ttv-text-sm)}
.ttv-rainfall-state--partial{border-color:var(--ttv-rain-line);background:var(--ttv-rain-soft)}
.ttv-rainfall-state--partial>.ttv-icon{color:var(--ttv-rain-accent)}
.ttv-rainfall-state__actions{margin-top:10px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.ttv-rainfall-state__actions :is(a,button){
  min-height:44px;padding:0 var(--ttv-space-3);border:1px solid var(--ttv-line);border-radius:var(--ttv-radius-xs);background:var(--ttv-surface);color:var(--ttv-blue-700);
  font:inherit;font-size:var(--ttv-text-sm);font-weight:700;display:inline-flex;align-items:center;justify-content:center;cursor:pointer
}
.ttv-rainfall-state__actions :is(a,button):hover,.ttv-rainfall-state__actions :is(a,button):focus-visible{background:var(--ttv-rain-soft);border-color:#85bee2}

/* Decision-first rainfall overview */
.ttv-rainfall-overview{
  border:1px solid var(--ttv-rain-line);border-top:4px solid var(--ttv-rain-accent);
  background:#f8fcff;box-shadow:none
}
.ttv-rainfall-kicker{display:block;margin-bottom:var(--ttv-space);color:var(--ttv-rain-deep);font-size:var(--ttv-text-xs);font-weight:700;letter-spacing:.065em;text-transform:uppercase}
.ttv-rainfall-overview__map,.ttv-rainfall-hourly .ttv-section__head>a{
  min-height:44px;display:inline-flex;align-items:center;gap:var(--ttv-space);color:var(--ttv-rain-deep);font-size:var(--ttv-text-sm);font-weight:700;white-space:nowrap
}
.ttv-rainfall-overview__map .ttv-icon,.ttv-rainfall-hourly .ttv-section__head>a .ttv-icon{width:14px;height:14px}
.ttv-rainfall-overview__layout{display:grid;grid-template-columns:minmax(280px,.78fr) minmax(0,1.22fr);gap:14px;align-items:stretch}
.ttv-rainfall-answer__result{
  height:100%;padding:var(--ttv-space-5);border:1px solid #cfe1ed;border-radius:var(--ttv-radius);background:var(--ttv-surface);display:grid;align-content:start;gap:14px;
  box-shadow:none
}
.ttv-rainfall-answer__result>div>span{font-size:var(--ttv-text-xs);font-weight:700;color:var(--ttv-rain-deep);text-transform:uppercase;letter-spacing:.055em}
.ttv-rainfall-answer__result>div>strong{display:block;margin-top:6px;font-size:27px;line-height:1.18;letter-spacing:-.45px;color:#123b58}
.ttv-rainfall-answer__result p{margin:6px 0 0;color:#536b7c;font-size:var(--ttv-text-sm);line-height:1.55}
.ttv-rainfall-answer__result ul{margin:0;padding:0;list-style:none;display:flex;align-items:flex-start;gap:6px;flex-wrap:wrap}
.ttv-rainfall-answer__result li{padding:6px 9px;border-radius:var(--ttv-radius-xs);background:var(--ttv-surface-muted);border:1px solid #dbe6ed;font-size:var(--ttv-text-xs);font-weight:700;color:#37556a}
.ttv-rainfall-answer__result--good{border-color:var(--ttv-good-line);background:var(--ttv-good-bg)}
.ttv-rainfall-answer__result--warn{border-color:var(--ttv-warn-line);background:var(--ttv-warn-bg)}
.ttv-rainfall-answer__result--danger{border-color:var(--ttv-danger-line);background:var(--ttv-danger-bg)}
.ttv-rainfall-answer__result--muted{background:var(--ttv-surface-soft)}
.ttv-rainfall-answer__forecast{margin-top:auto;min-height:42px;display:inline-flex;align-items:center;gap:var(--ttv-space);width:max-content;color:var(--ttv-rain-deep);font-size:var(--ttv-text-compact);font-weight:700}
.ttv-rainfall-answer__forecast .ttv-icon{width:14px;height:14px}

.ttv-rainfall-timeline{display:grid;grid-template-columns:1fr 1fr;gap:1px;border:1px solid var(--ttv-line-card);border-radius:var(--ttv-radius);background:var(--ttv-line-soft);overflow:hidden}
.ttv-rainfall-timeline__item{min-width:0;padding:15px;border:0;border-radius:0;background:var(--ttv-surface);display:grid;align-content:start;gap:var(--ttv-space);position:relative;overflow:hidden}
.ttv-rainfall-timeline__item::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:#9ab6c8}
.ttv-rainfall-timeline__item small{font-size:var(--ttv-text-xs);font-weight:700;color:#607a8c;text-transform:uppercase;letter-spacing:.05em}
.ttv-rainfall-timeline__item strong{font-size:var(--ttv-text-lead);line-height:1.28;color:#153e5a;overflow-wrap:anywhere}
.ttv-rainfall-timeline__item p{margin:1px 0 0;color:var(--ttv-muted);font-size:var(--ttv-text-xs);line-height:1.48}
.ttv-rainfall-timeline__item--wet{background:#f0f8fe}
.ttv-rainfall-timeline__item--wet::before{background:var(--ttv-rain-accent)}
.ttv-rainfall-timeline__item--watch{background:var(--ttv-surface-warning)}
.ttv-rainfall-timeline__item--watch::before{background:#d8931a}
.ttv-rainfall-timeline__item--dry{background:#f4fbf7}
.ttv-rainfall-timeline__item--dry::before{background:#31945a}
.ttv-rainfall-timeline__item--muted{background:#f7f9fb}

.ttv-rainfall-overview__metrics{margin-top:var(--ttv-space-3);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;border:1px solid var(--ttv-line-card);border-radius:var(--ttv-radius-sm);background:var(--ttv-line-soft);overflow:hidden}
.ttv-rainfall-overview__metrics>div{min-width:0;padding:var(--ttv-space-3) 13px;border:0;border-radius:0;background:var(--ttv-surface);display:grid;align-content:center;gap:3px}
.ttv-rainfall-overview__metrics small{font-size:var(--ttv-text-xs);line-height:1.35;color:var(--ttv-muted);font-weight:700}
.ttv-rainfall-overview__metrics strong{min-width:0;font-size:var(--ttv-text-xl);line-height:1.2;font-variant-numeric:tabular-nums;color:var(--ttv-ink-heading-soft);overflow-wrap:anywhere}
.ttv-rainfall-overview__metrics span{font-size:var(--ttv-text-xs);line-height:1.4;color:var(--ttv-muted)}

/* Rain/storm alert panel */
.ttv-rainfall-alerts-wrap{margin-top:var(--ttv-section-gap)}
.ttv-rainfall-alerts-wrap>.ttv-weather-alerts{margin:0}
.ttv-rainfall-alerts .ttv-weather-alerts__grid{grid-template-columns:1fr}

/* Hourly evidence + distinct rain windows */
.ttv-rainfall-hourly{padding-inline:0;background:transparent}
.ttv-rainfall-windows{margin-bottom:14px;padding:14px;border:1px solid #d4e5ef;border-radius:var(--ttv-radius-sm);background:var(--ttv-surface-info)}
.ttv-rainfall-windows__label{display:flex;align-items:baseline;justify-content:space-between;gap:var(--ttv-space-3);margin-bottom:9px}
.ttv-rainfall-windows__label strong{font-size:var(--ttv-text-sm);color:#173e59}
.ttv-rainfall-windows__label small{color:var(--ttv-muted);font-size:var(--ttv-text-xs);text-align:right}
.ttv-rainfall-windows__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;border:1px solid var(--ttv-line-soft);border-radius:var(--ttv-radius-sm);background:var(--ttv-line-soft);overflow:hidden}
.ttv-rainfall-windows__list article{min-width:0;padding:var(--ttv-space-3);border:0;border-radius:0;background:var(--ttv-surface);display:grid;gap:3px;box-shadow:none}
.ttv-rainfall-windows__list article>strong{font-size:var(--ttv-text-sm);line-height:1.4;overflow-wrap:anywhere;color:#153e5a}
.ttv-rainfall-windows__list article>span{color:var(--ttv-rain-deep);font-size:var(--ttv-text-xs);font-weight:700}
.ttv-rainfall-windows__list article>small{color:var(--ttv-muted);font-size:var(--ttv-text-xs);line-height:1.4}
.ttv-rainfall-windows__dry{min-height:58px;padding:10px 11px;border:1px dashed #acd4bc;border-radius:var(--ttv-radius-xs);background:#f5fbf7;display:flex;align-items:center;gap:9px;color:var(--ttv-good)}
.ttv-rainfall-windows__dry>.ttv-icon{width:22px;height:22px;flex:0 0 auto}
.ttv-rainfall-windows__dry span{display:grid;gap:1px;color:var(--ttv-ink)}
.ttv-rainfall-windows__dry small{color:var(--ttv-muted);font-size:var(--ttv-text-xs)}
.ttv-rainfall-hourly__scroll{overflow:auto;overscroll-behavior-inline:contain;border:1px solid #d4e2eb;border-radius:var(--ttv-radius-sm);background:var(--ttv-surface)}
.ttv-rainfall-hourly__table{min-width:680px}
.ttv-rainfall-hourly__head,.ttv-rainfall-hourly__row{min-height:50px;display:grid;grid-template-columns:88px minmax(130px,1.1fr) minmax(130px,1fr) 104px minmax(120px,.9fr);align-items:center;border-bottom:1px solid var(--ttv-line-soft);font-size:var(--ttv-text-sm);font-variant-numeric:tabular-nums}
.ttv-rainfall-hourly__head{min-height:46px;background:#eef7fc;border-bottom-color:#cfe0ea;color:#526d82;font-size:var(--ttv-text-xs);font-weight:700}
.ttv-rainfall-hourly__head>*{padding:var(--ttv-space-2) 10px}
.ttv-rainfall-hourly__row{min-height:46px;font-size:var(--ttv-text-sm)}
.ttv-rainfall-hourly__row:last-child{border-bottom:0}
.ttv-rainfall-hourly__row>*{padding:var(--ttv-space-2) 10px}
.ttv-rainfall-hourly__row time{font-weight:700}
.ttv-rainfall-hourly__row.is-wet{background:var(--ttv-surface);box-shadow:inset 3px 0 0 var(--ttv-accent-line)}
.ttv-rainfall-hourly__row.is-wet strong{color:var(--ttv-rain-deep)}

/* Multi-day trend: near-term days carry more visual weight. */
.ttv-rainfall-daily{padding-inline:0;background:transparent}
.ttv-rainfall-daily__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(138px,1fr));gap:9px}
.ttv-rainfall-daily__grid article{padding:13px 9px;border:1px solid var(--ttv-line-card);border-radius:var(--ttv-radius-sm);background:var(--ttv-surface);text-align:center;display:grid;gap:7px;min-width:0}
.ttv-rainfall-daily__grid article>div{display:grid;gap:1px}
.ttv-rainfall-daily__grid article>div small,.ttv-rainfall-daily__grid p small{font-size:var(--ttv-text-xs);color:var(--ttv-muted)}
.ttv-rainfall-daily__grid article>.ttv-icon,.ttv-rainfall-daily__grid article>span>.ttv-icon{width:26px;height:26px;margin:auto}
.ttv-rainfall-daily__grid article.is-wet{border-color:var(--ttv-rain-line);background:var(--ttv-surface)}
.ttv-rainfall-daily__grid article.is-near{border-color:#c8dce9}
.ttv-rainfall-daily__grid article.is-today{border-color:#79bee8;background:var(--ttv-rain-soft);box-shadow:inset 0 3px 0 var(--ttv-rain-accent)}
.ttv-rainfall-daily__grid article.is-later{background:#fcfdfe;color:#486071}
.ttv-rainfall-daily__grid p{margin:0;display:grid;line-height:1.3}
.ttv-rainfall-daily__grid b{font-size:var(--ttv-text-md);color:var(--ttv-rain-deep);overflow-wrap:anywhere}.ttv-rainfall-daily__grid article>div strong{overflow-wrap:anywhere}

/* Explanations + contextual exits */
.ttv-rainfall-explain{padding-inline:0;background:transparent}
.ttv-rainfall-explain__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ttv-rainfall-explain__grid>div{padding:2px var(--ttv-space-4) 2px 0;border:0;border-radius:0;background:transparent}
.ttv-rainfall-explain__grid strong{display:block;margin-bottom:var(--ttv-space);color:#173e59}
.ttv-rainfall-explain__grid p{margin:0;color:var(--ttv-muted);font-size:var(--ttv-text-sm);line-height:1.55}
.ttv-rainfall-page .ttv-faq{background:var(--ttv-surface-muted)}

@media (max-width:1024px){
  .ttv-rainfall-overview__layout{grid-template-columns:1fr}
  .ttv-rainfall-timeline{grid-template-columns:repeat(4,minmax(0,1fr))}
  .ttv-rainfall-overview__metrics{grid-template-columns:repeat(4,minmax(0,1fr))}
  .ttv-rainfall-windows__list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ttv-rainfall-daily__grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}

@media (max-width:768px){
  .ttv-rainfall-timeline{grid-template-columns:1fr 1fr}
  .ttv-rainfall-overview__metrics{grid-template-columns:1fr 1fr}
  .ttv-rainfall-windows__list{grid-template-columns:1fr}
  .ttv-rainfall-windows__label{display:grid;gap:2px}
  .ttv-rainfall-windows__label small{text-align:left}
  .ttv-rainfall-daily__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ttv-rainfall-explain__grid{grid-template-columns:1fr}
}

@media (max-width:640px){
  .ttv-rainfall-page{padding-top:var(--ttv-space-3)}
  .ttv-rainfall-overview .ttv-section__head,.ttv-rainfall-hourly .ttv-section__head{align-items:flex-start}
  .ttv-rainfall-overview__map,.ttv-rainfall-hourly .ttv-section__head>a{margin-top:3px;max-width:100%;white-space:normal;line-height:1.35}
  .ttv-rainfall-answer__result{padding:15px}
  .ttv-rainfall-answer__result>div>strong{font-size:var(--ttv-title-md)}
  .ttv-rainfall-timeline__item{padding:var(--ttv-space-3)}
  
  .ttv-rainfall-overview__metrics>div{padding:10px;border:0;border-bottom:1px solid var(--ttv-line-soft);border-radius:0;background:transparent}
  .ttv-rainfall-overview__metrics strong{font-size:var(--ttv-text-emphasis)}
  .ttv-rainfall-alerts .ttv-weather-alerts__head{display:grid;gap:var(--ttv-space-2)}
  .ttv-rainfall-alerts .ttv-weather-alerts__state{justify-self:start;white-space:normal}
  /* Phase 2C: 24-hour rows become labeled 2x2 data cards, with no hidden metrics. */
  .ttv-rainfall-hourly__scroll{overflow:visible;border:0;border-radius:0;background:transparent}
  .ttv-rainfall-hourly__table{min-width:0;width:100%;display:grid;gap:var(--ttv-space-2)}
  .ttv-rainfall-hourly__head{display:none}
  .ttv-rainfall-hourly__row{min-height:0;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;padding:var(--ttv-space-2);border:1px solid var(--ttv-line-soft);border-radius:var(--ttv-radius-sm);background:var(--ttv-surface)}
  .ttv-rainfall-hourly__row>time{grid-column:1/-1;padding:var(--ttv-space-2);font-weight:700;border-bottom:1px solid var(--ttv-line-soft)}
  .ttv-rainfall-hourly__row>*[data-label]{min-width:0;display:grid;align-content:start;gap:var(--ttv-space);padding:var(--ttv-space-2);text-align:left;overflow-wrap:anywhere}
  .ttv-rainfall-hourly__row>*[data-label]::before{content:attr(data-label);font-size:var(--ttv-text-xs);font-weight:600;line-height:1.35;color:var(--ttv-muted)}
  .ttv-rainfall-hourly__row>:nth-child(2),.ttv-rainfall-hourly__row>:nth-child(4){border-right:1px solid var(--ttv-line-soft)}
  .ttv-rainfall-hourly__row>:nth-child(n+4){border-top:1px solid var(--ttv-line-soft)}
  .ttv-rainfall-daily__grid{display:flex;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x proximity;padding-bottom:5px}
  .ttv-rainfall-daily__grid article{flex:0 0 134px;scroll-snap-align:start}
}

@media (max-width:390px){
  
  .ttv-rainfall-timeline{grid-template-columns:1fr 1fr;gap:7px}
  .ttv-rainfall-timeline__item{padding:10px;display:grid;grid-template-columns:1fr;align-content:start;gap:3px}
  .ttv-rainfall-timeline__item small,.ttv-rainfall-timeline__item p,.ttv-rainfall-timeline__item strong{grid-column:1;grid-row:auto;text-align:left;max-width:none}
  .ttv-rainfall-timeline__item strong{font-size:var(--ttv-text-md)}
  
  
  .ttv-rainfall-overview__metrics small,.ttv-rainfall-overview__metrics span{grid-column:1}
  .ttv-rainfall-overview__metrics strong{grid-column:2;grid-row:1/3;text-align:right}
  .ttv-rainfall-windows{padding:10px}
  .ttv-rainfall-daily__grid article{flex-basis:124px}
  .ttv-rainfall-state__actions{display:grid;grid-template-columns:1fr 1fr}
  .ttv-rainfall-state__actions>*:last-child{grid-column:1/-1}
}

/* v1.1.84 — Phase 27: expose the longest low-rain window already present in the 24h series. */
.ttv-rainfall-dry-window{margin-top:10px;padding:11px 13px;border:1px solid var(--ttv-good-line);border-radius:var(--ttv-radius-sm);background:var(--ttv-good-bg);display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;align-items:start}.ttv-rainfall-dry-window>span{width:34px;height:34px;border-radius:var(--ttv-radius-xs);background:var(--ttv-surface);color:var(--ttv-good);display:grid;place-items:center}.ttv-rainfall-dry-window>span .ttv-icon{width:18px;height:18px}.ttv-rainfall-dry-window div{min-width:0}.ttv-rainfall-dry-window small{display:block;color:#3d7254;font-size:var(--ttv-text-xs);font-weight:700}.ttv-rainfall-dry-window strong{display:block;margin-top:1px;font-size:var(--ttv-text-sm);line-height:1.35}.ttv-rainfall-dry-window p{margin:2px 0 0;color:var(--ttv-muted);font-size:var(--ttv-text-xs);line-height:1.45}


/* v1.1.94 — Phase 37: one grouped metric surface instead of four nested mobile cards. */
@media(max-width:640px){
  .ttv-rainfall-overview__metrics{grid-template-columns:1fr 1fr}
}
/* v1.1.98 — Phase 41 mobile real-use density: preserve scanability without four full-width metric rows. */
@media(max-width:390px){
  
  .ttv-rainfall-overview__metrics>div{align-items:center;min-height:82px;display:grid;grid-template-columns:1fr;align-content:center;gap:2px}
  .ttv-rainfall-overview__metrics>div :is(small,strong,span){grid-column:1;grid-row:auto;text-align:left}
}
/* v1.1.135 — Phase 78: align rainfall surfaces with the flat site-wide section hierarchy. */
.ttv-rainfall-page>.ttv-card.ttv-section{box-shadow:none}

/* v1.1.136 — Phase 79: keep long Vietnamese rainfall actions readable on narrow phones. */
@media (max-width:390px){
  .ttv-rainfall-overview__metrics{grid-template-columns:1fr 1fr;}
}