:root {
  --font-ui: "Noto Sans Bengali", "Noto Sans Bangla", "Noto Sans", system-ui, sans-serif;
  --ink: #102a43;
  --muted: #486581;
  --surface: #ffffff;
  --surface-soft: #f4f8fb;
  --line: #d9e2ec;
  --blue: #1479b8;
  --blue-deep: #075985;
  --green: #12805c;
  --amber: #b7791f;
  --red: #c53030;
  --radius: 14px;
  --space-1: .5rem;
  --space-2: .75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --content-width: 72rem;
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--surface-soft); font: 400 16px/1.55 var(--font-ui); }
button, input, select { font: inherit; }

.app-shell { max-width: var(--content-width); min-height: 100vh; margin: auto; background: var(--surface); }
.app-header { display: flex; gap: var(--space-2); align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); }
.brand { font-size: 1.125rem; font-weight: 750; }
.language-switch { display: inline-flex; padding: .2rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-soft); }
.language-switch button { border: 0; border-radius: 999px; padding: .3rem .7rem; background: transparent; color: var(--ink); }
.language-switch button[aria-pressed="true"] { color: white; background: var(--blue-deep); }

.primary-nav { display: flex; overflow-x: auto; gap: .25rem; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line); }
.primary-nav a { white-space: nowrap; padding: .45rem .7rem; color: var(--ink); text-decoration: none; border-radius: 8px; }
.primary-nav a[aria-current="page"] { color: var(--blue-deep); font-weight: 700; background: #e6f4fb; }

.page { padding: var(--space-4); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-3); }
.card { grid-column: span 4; padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: 0 1px 2px rgb(16 42 67 / .05); }
.card h2, .card h3 { margin: 0 0 .35rem; line-height: 1.25; }
.decision-card { position: relative; overflow: hidden; }.decision-card .decision-art { display: block; width: 5rem; height: 3.8rem; margin: -.25rem 0 .2rem; }.rain-plan.rain-dry { background: linear-gradient(135deg, #f7fcff, #fff); }.rain-plan.rain-maybe { background: linear-gradient(135deg, #f1f8ff, #fff); }.rain-plan.rain-wet, .rain-plan.rain-storm { background: linear-gradient(135deg, #e9f4fb, #fff); }.comfort-card { background: linear-gradient(135deg, #fff4dc, #fff); }.air-card .air-art { display: block; width: 5rem; height: 3.8rem; margin: -.25rem 0 .2rem; }
.air-card { color: var(--ink); text-decoration: none; border-inline-start: .4rem solid var(--green); }
.air-card .text-link { display: inline-block; margin-top: .35rem; }
.air-card.air-moderate { border-inline-start-color: var(--amber); }
.air-card.air-unhealthy, .air-card.air-very-unhealthy { border-inline-start-color: var(--red); }
.air-pill { display: inline-flex; padding: .22rem .55rem; border-radius: 999px; color: var(--green); background: #e8f7ef; font-size: .85rem; font-weight: 750; }
.air-moderate .air-pill { color: var(--amber); background: #fff6df; }
.air-unhealthy .air-pill, .air-very-unhealthy .air-pill { color: var(--red); background: #fdecec; }
.air-pill.air-moderate { color: var(--amber); background: #fff6df; }
.air-pill.air-unhealthy, .air-pill.air-very-unhealthy { color: var(--red); background: #fdecec; }
.metric { display: block; margin: .45rem 0; font-size: 2rem; font-weight: 760; line-height: 1.1; }
.meta, .muted { color: var(--muted); font-size: .9rem; }

.status { display: inline-flex; gap: .4rem; align-items: center; padding: .25rem .55rem; border-radius: 999px; font-size: .85rem; font-weight: 650; }
.status::before { width: .6rem; height: .6rem; border-radius: 50%; content: ""; background: currentColor; }
.status.available { color: var(--green); background: #e8f7ef; }
.status.beta, .status.degraded { color: var(--amber); background: #fff6df; }
.status.unavailable { color: var(--red); background: #fdecec; }

.notice { margin-block: var(--space-3); padding: var(--space-3); border-inline-start: .3rem solid var(--blue); background: #edf8ff; }
.notice.warning { border-color: var(--amber); background: #fff7e7; }
.notice.alert { border-color: var(--red); background: #fff0f0; }

.scroll-table { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; min-width: 38rem; }
th, td { padding: .8rem; text-align: start; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { color: var(--ink); background: #edf5fa; font-size: .88rem; }
tr:last-child td { border-bottom: 0; }

.chart, .map-placeholder { min-height: 12rem; display: grid; place-items: center; border: 1px dashed #9fb3c8; border-radius: var(--radius); color: var(--muted); background: linear-gradient(135deg, #f8fbfd, #edf7fb); }
.loading { display: inline-flex; gap: .6rem; align-items: center; color: var(--muted); }
.loading::before { width: 1rem; height: 1rem; border: 2px solid #9fb3c8; border-top-color: var(--blue); border-radius: 50%; content: ""; animation: spin .8s linear infinite; }
.no-data { padding: var(--space-4); text-align: center; color: var(--muted); border: 1px dashed #9fb3c8; border-radius: var(--radius); }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 46rem) {
  body { background: var(--surface); }
  .app-header, .page { padding: var(--space-3); }
  .grid { grid-template-columns: 1fr; }
  .card { grid-column: auto; }
  .card.priority { order: -1; }
  .metric { font-size: 1.8rem; }
  .primary-nav { position: sticky; top: 0; z-index: 2; background: var(--surface); }
}

.brand { color: var(--ink); text-decoration: none; }
.page-intro { margin-bottom: var(--space-4); }
.page-intro h1 { margin: .15rem 0 .35rem; font-size: clamp(1.7rem, 5vw, 2.4rem); line-height: 1.15; }
.lightning-status,.lightning-map-card,.lightning-history{padding:var(--space-4);border:1px solid var(--line);border-radius:16px;background:var(--surface);margin-bottom:var(--space-4)}.lightning-status{display:grid;grid-template-columns:1.2fr 1fr;gap:var(--space-3);border-inline-start:5px solid #e5a316}.lightning-status h2,.lightning-map-card h2,.lightning-history h2{margin:.2rem 0 .45rem}.lightning-status dl{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin:0}.lightning-status dl div{padding:.7rem;border-radius:10px;background:#f2f7fa}.lightning-status dt{font-size:.74rem;color:var(--muted)}.lightning-status dd{margin:.25rem 0 0;font-weight:800}.lightning-working-map{margin:var(--space-3) 0 0}.lightning-working-map img{display:block;width:100%;min-height:260px;padding:.5rem;border:1px solid #b6d2df;border-radius:14px;background:#eff7fb}.lightning-working-map figcaption{margin-top:.6rem;color:var(--muted);font-size:.86rem}.lightning-map-card small{display:block;margin-top:.6rem;color:var(--muted)}.lightning-zone-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-3);margin-bottom:var(--space-4)}.lightning-zone-card{padding:var(--space-3);border:1px solid var(--line);border-radius:14px;background:var(--surface)}.lightning-zone-card h2{margin:0}.lightning-zone-card strong{display:block;margin:.6rem 0 .15rem}.lightning-zone-card p,.lightning-zone-card small{display:block;margin:.2rem 0;color:var(--muted)}.lightning-zone-card a{font-weight:700}.lightning-period-tabs{display:flex;gap:.5rem;overflow-x:auto;padding-bottom:.5rem}.lightning-period-tabs button{white-space:nowrap;padding:.55rem .75rem;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);font:inherit;font-weight:700}.lightning-period-tabs button.selected{background:#075985;color:#fff;border-color:#075985}.lightning-coverage{display:flex;gap:.7rem;align-items:center;margin:var(--space-3) 0;padding:.8rem;border-radius:10px}.lightning-coverage.no-source{color:#684700;background:#fff5dc;border-inline-start:4px solid #d38a10}.lightning-coverage span{font-size:.9rem}.lightning-history-placeholder{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}.lightning-history-placeholder>div{min-height:100px;padding:var(--space-3);border-radius:12px;background:#f3f7fa;color:var(--muted)}.lightning-history-placeholder h3{margin:0;color:var(--ink)}@media(max-width:620px){.lightning-status{grid-template-columns:1fr}.lightning-status dl{grid-template-columns:1fr}.lightning-history-placeholder{grid-template-columns:1fr}}
.eyebrow { margin: 0; color: var(--blue-deep); font-size: .8rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.hero-card { grid-column: span 6; background: linear-gradient(135deg, #e6f4fb, #fff); }
.hero { margin: calc(var(--space-4) * -1); padding: 2.4rem var(--space-4) 2rem; color: white; background: linear-gradient(155deg, #075985, #1479b8 58%, #59b6d9); }
.hero .eyebrow, .hero .muted { color: #e6f6fd; }
.hero h1 { margin: .25rem 0; font-size: clamp(2rem, 8vw, 3.4rem); }
.hero-condition, .hero-range, .hero-summary { margin: .25rem 0; font-size: 1.1rem; }
.hero-summary { max-width: 38rem; }
.hero .status { color: white; background: rgb(255 255 255 / .18); }
.hour-strip { display: flex; gap: .6rem; overflow-x: auto; padding: .25rem 0 var(--space-2); }
.hour-tile { position: relative; flex: 0 0 5.7rem; min-height: 8rem; display: grid; gap: .3rem; padding: .7rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.hour-tile { color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
.hour-tile:hover, .hour-tile:focus-visible { border-color: var(--blue); box-shadow: 0 0 0 3px #cdeefa; outline: 0; }
.hour-tile small { color: var(--muted); font-size: .75rem; }
.hour-tile.has-official-alert,.forecast-hour.has-official-alert { border-color:#d15b42; box-shadow:inset 0 3px 0 #d15b42; background:#fff8f5; }
.official-alert-badge { display:inline-flex; align-items:center; width:max-content; max-width:100%; padding:.18rem .4rem; overflow:hidden; border-radius:999px; color:#9b331f; text-overflow:ellipsis; white-space:nowrap; font-size:.62rem; font-weight:800; line-height:1.15; background:#ffe6df; }
.hour-alert-detail { display:grid; gap:.22rem; margin:.8rem 0; padding:.75rem .85rem; border-inline-start:4px solid #d15b42; border-radius:10px; color:#752b1d; background:#fff0eb; }
.hour-alert-detail span { font-size:.8rem; }
.weather-symbol { display: grid; width: 2.1rem; height: 2rem; place-items: center; }.hourly-icon { width: 2rem; height: 1.75rem; filter: drop-shadow(0 1px 1px rgb(16 42 67 / .12)); }.hourly-moon { filter: drop-shadow(0 1px 2px rgb(16 42 67 / .25)); }
.aqi-dot { position: absolute; top: .6rem; right: .6rem; width: .55rem; height: .55rem; border-radius: 50%; background: var(--green); }
.aqi-moderate { background: var(--amber); }.aqi-unhealthy, .aqi-very-unhealthy { background: var(--red); }
.trust-line { display: flex; flex-wrap: wrap; gap: .7rem 1rem; align-items: center; margin-top: var(--space-5); padding: var(--space-3); border-radius: var(--radius); background: #edf5fa; }
.trust-line span { color: var(--muted); flex: 1 1 20rem; }
.hour-sheet { position: fixed; inset: auto 0 0; z-index: 5; max-width: 46rem; margin: auto; padding: var(--space-4); border-radius: 22px 22px 0 0; background: white; box-shadow: 0 -10px 35px rgb(16 42 67 / .22); max-height: 86vh; overflow: auto; }
.hour-sheet h2 { margin: .15rem 0; }.hour-sheet .metric { font-size: 3rem; }
.sheet-close { position: sticky; top: .5rem; z-index: 3; display: grid; place-items: center; margin: 0 0 -2.3rem calc(100% - 2.3rem); width: 2.3rem; height: 2.3rem; border: 0; border-radius: 999px; font-size: 1.7rem; line-height: 1; color: var(--ink); background: var(--surface-soft); box-shadow: 0 2px 8px rgb(16 42 67 / .12); }
.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; margin-top: var(--space-3); }
.detail-grid article { padding: .8rem; border-radius: 12px; background: var(--surface-soft); }.detail-grid h3, .detail-grid p { margin: 0 0 .3rem; }.detail-grid small { color: var(--muted); }
.detail-links { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: var(--space-3); }.detail-links a { color: var(--blue-deep); font-weight: 700; }
.astronomy-card { position: relative; overflow: hidden; color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
.astronomy-card:hover, .astronomy-card:focus-visible { border-color: var(--blue); box-shadow: 0 0 0 3px #cdeefa; outline: 0; }
.sun-card { background: linear-gradient(135deg, #fff8d7, #fff 72%); }.moon-card { background: linear-gradient(135deg, #e8eef7, #fff 72%); }
.celestial-art { display: block; width: 4.25rem; height: 4.25rem; margin-bottom: .3rem; }.astronomy-hero .celestial-art { width: 5.5rem; height: 5.5rem; flex: 0 0 auto; margin: 0; }
.astronomy-hero { display: flex; align-items: center; gap: 1rem; margin: .5rem 0 1.2rem; }.astronomy-hero h2, .astronomy-hero p { margin: 0; }
.uv-detail { width: 100%; margin: .6rem 0; padding: .95rem; border: 1px solid var(--line); border-inline-start: .35rem solid var(--green); border-radius: 12px; color: var(--ink); text-align: left; background: #f3fbf7; font: inherit; cursor: pointer; }.uv-detail h3, .uv-detail p { margin: 0 0 .25rem; }.uv-detail small { color: var(--muted); }.uv-detail.uv-moderate { border-inline-start-color: var(--amber); background: #fff9e8; }.uv-detail.uv-high, .uv-detail.uv-very-high, .uv-detail.uv-extreme { border-inline-start-color: var(--red); background: #fff1ef; }
.solar-exposure { margin:.8rem 0; padding:1rem; border:1px solid #f0cf6b; border-inline-start:.4rem solid #e4a11b; border-radius:12px; background:#fff9e8; }.solar-exposure strong,.solar-exposure b { display:block; }.solar-exposure b { margin:.2rem 0; font-size:1.7rem; color:#9a5700; }.solar-exposure p { margin:.35rem 0 0; color:var(--muted); font-size:.85rem; }
.source-group-note { margin:0; padding:0 1rem .75rem; color:var(--muted); font-size:.8rem; }
.uv-chart { display: grid; gap: .45rem; max-height: 55vh; overflow: auto; margin: var(--space-3) 0; padding: var(--space-3); border-radius: var(--radius); background: var(--surface-soft); }.uv-hour { display: grid; grid-template-columns: 4.7rem 1fr 2rem; gap: .65rem; align-items: center; font-size: .85rem; }.uv-hour i { height: .7rem; border-radius: 999px; background: linear-gradient(90deg, var(--green) var(--uv), #d9e2ec var(--uv)); }.uv-hour i.uv-moderate { background: linear-gradient(90deg, var(--amber) var(--uv), #d9e2ec var(--uv)); }.uv-hour i.uv-high, .uv-hour i.uv-very-high, .uv-hour i.uv-extreme { background: linear-gradient(90deg, var(--red) var(--uv), #d9e2ec var(--uv)); }.uv-hour b { text-align: right; }
.comfort-card { text-align: left; cursor: pointer; }.comfort-card .text-link { display: block; margin-top: .55rem; }.comfort-sheet { inset: 0; max-width: 46rem; max-height: none; padding: var(--space-4); border-radius: 0; overflow-y: auto; background: linear-gradient(180deg, #fff8ec 0, #fff 40%); }.comfort-hero { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; margin: var(--space-3) 0; }.comfort-hero div { padding: 1rem; border-radius: 16px; background: linear-gradient(135deg, #fff0cf, #fffaf1); }.comfort-hero span, .comfort-hero small { display: block; color: var(--muted); }.comfort-hero strong { display: block; margin: .2rem 0; font-size: 2rem; color: #ad481c; }.comfort-explanation { margin: -.25rem 0 var(--space-3); padding: .75rem .9rem; border-left: 4px solid #e65c31; border-radius: 0 10px 10px 0; background: #fff2df; color: #77401f; }.comfort-legend { display: flex; gap: 1rem; font-size: .8rem; color: var(--muted); }.comfort-legend span { display: inline-flex; align-items: center; gap: .35rem; }.comfort-legend i { width: .65rem; height: .65rem; border-radius: 50%; background: #3385b8; }.comfort-legend span + span i { background: #e65c31; }.comfort-chart { display: grid; gap: .45rem; margin: var(--space-2) 0; padding: var(--space-3); border: 1px solid #f0dcc3; border-radius: var(--radius); background: rgb(255 255 255 / .75); }.comfort-hour { display: grid; grid-template-columns: 4.6rem 1fr 2.6rem 2.6rem; gap: .5rem; align-items: center; font-size: .82rem; }.comfort-hour > span { color: #3385b8; text-align: right; }.comfort-hour > b { color: #c84d26; text-align: right; }.comfort-track { position: relative; height: 1.3rem; border-radius: 999px; background: linear-gradient(90deg, #d9edf8, #fee6cf); }.comfort-track i { position: absolute; top: 50%; width: .8rem; height: .8rem; border: 2px solid white; border-radius: 50%; box-shadow: 0 1px 3px rgb(16 42 67 / .25); transform: translate(-50%, -50%); }.comfort-track .comfort-actual { left: var(--position); background: #3385b8; }.comfort-track .comfort-feels { left: var(--position); background: #e65c31; }
.rain-plan { text-align: left; cursor: pointer; }.rain-plan .text-link { display: block; margin-top: .55rem; }.rain-sheet { inset: 0; max-width: 46rem; max-height: none; padding: var(--space-4); border-radius: 0; overflow-y: auto; background: linear-gradient(180deg, #eef9ff 0, #fff 38%); }.rain-head, .rain-hour { display: grid; grid-template-columns: 4.6rem 1fr 2.7rem 3.4rem; gap: .55rem; align-items: center; }.rain-head { margin: var(--space-3) 0 .35rem; padding: 0 .35rem; color: var(--muted); font-size: .75rem; }.rain-head span:nth-child(2) { grid-column: 2 / 4; }.rain-chart { display: grid; gap: .55rem; padding: var(--space-3); border: 1px solid #cfe7f4; border-radius: var(--radius); background: rgb(255 255 255 / .8); }.rain-hour { font-size: .82rem; }.rain-hour > span { color: #1679ad; text-align: right; }.rain-hour > b { text-align: right; color: #12618e; }.rain-track { height: 1rem; overflow: hidden; border-radius: 999px; background: #ddecf6; }.rain-track i { display: block; width: var(--rain); height: 100%; border-radius: inherit; background: linear-gradient(90deg, #56b5e9, #087caf); }
.air-focus { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin: var(--space-3) 0 1rem; padding: 1.1rem; border-left: 5px solid var(--green); border-radius: var(--radius); background: #edfaf3; }.air-focus.air-moderate { border-color: #dd9e18; background: #fff7df; }.air-focus.air-unhealthy, .air-focus.air-very-unhealthy { border-color: var(--red); background: #fff0ef; }.air-focus p { margin: 0; color: var(--muted); font-size: .85rem; }.air-focus strong { display: block; font-size: 3.25rem; line-height: .95; }.air-focus span { display: inline-block; margin-top: .35rem; font-weight: 700; }.air-hour-strip { display: flex; gap: .45rem; overflow-x: auto; margin: var(--space-3) calc(var(--space-3) * -1); padding: 0 var(--space-3) .5rem; scrollbar-width: thin; }.air-hour { position: relative; display: grid; min-width: 4.3rem; gap: .2rem; padding: .6rem; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); font: inherit; text-align: left; }.air-hour.air-good { border-color: #b9e2cf; background: #edfaf3; }.air-hour.air-moderate { border-color: #efd68c; background: #fff7df; }.air-hour.air-unhealthy, .air-hour.air-very-unhealthy { border-color: #ebb6b0; background: #fff0ef; }.air-hour.selected { border-color: var(--blue); box-shadow: 0 0 0 2px #2689bd; }.air-hour .aqi-dot { position: static; width: .55rem; height: .55rem; }.air-hour small { color: var(--muted); }.pollutant-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; margin: var(--space-2) 0; }.pollutant-tile { min-height: 8.4rem; padding: .9rem; border: 1px solid #cfe8da; border-radius: 15px; background: #edfaf3; }.pollutant-tile.pollutant-moderate { border-color: #f0d791; background: #fff7df; }.pollutant-tile.pollutant-unhealthy { border-color: #edb8b3; background: #fff0ef; }.pollutant-tile h3, .pollutant-tile small, .pollutant-tile span { display: block; margin: 0; }.pollutant-tile small { color: var(--muted); font-size: .72rem; }.pollutant-tile strong { display: block; margin: .45rem 0 .2rem; font-size: 2rem; }.pollutant-tile span { font-size: .82rem; font-weight: 700; color: #17634c; }.pollutant-tile.pollutant-moderate span { color: #8a5a00; }.pollutant-tile.pollutant-unhealthy span { color: #ad2f28; }.air-explainer { margin: var(--space-4) 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-soft); }.air-explainer summary { padding: 1rem; cursor: pointer; font-weight: 700; }.air-explainer div { padding: 0 1rem 1rem; }.air-explainer p { margin: .75rem 0 0; }
@media (max-width: 32rem) { .detail-grid { grid-template-columns: 1fr; } }
.pollutant-tile.pollutant-neutral { border-color: var(--line); background: #fff; }.pollutant-tile.pollutant-neutral.pollutant-missing { border-style: dashed; background: #f5f7f8; }.pollutant-tile.pollutant-neutral span { color: var(--muted); font-weight: 650; }.pollutant-tile.pollutant-neutral small { min-height: 1rem; }.air-method-note { margin: var(--space-2) 0; padding: .8rem 1rem; border-left: 4px solid var(--blue); border-radius: 0 var(--radius) var(--radius) 0; background: #edf7fc; color: #224862; }
.hero-temperature { display: block; margin: .25rem 0; font-size: clamp(3rem, 10vw, 4.5rem); line-height: 1; }
.section-heading { display: flex; gap: var(--space-3); align-items: end; justify-content: space-between; margin: var(--space-5) 0 var(--space-2); }
.section-heading h2 { margin: .1rem 0 0; }
.section-gap { margin-top: var(--space-5); }
.text-link { color: var(--blue-deep); font-weight: 700; white-space: nowrap; }
.nav-dot { display: inline-block; width: .38rem; height: .38rem; margin-left: .3rem; border-radius: 50%; background: var(--amber); vertical-align: middle; }
.station-now-grid .station-now-card { color: var(--ink); text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }.station-now-card:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgb(16 42 67 / .12); }.station-now-card .metric { font-size: clamp(1.55rem, 5vw, 2.15rem); }.station-status { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; margin: var(--space-3) 0; }.station-status div { padding: .85rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); }.station-status strong, .station-status span { display: block; }.station-status span { margin-top: .15rem; color: var(--muted); font-size: .85rem; }.station-metric-tabs, .station-range-tabs { display: flex; gap: .45rem; overflow-x: auto; padding: .1rem 0 .5rem; scrollbar-width: thin; }.station-metric-tab, .station-range { flex: 0 0 auto; border: 1px solid var(--line); border-radius: 999px; padding: .45rem .75rem; background: #fff; color: var(--ink); font-weight: 650; }.station-metric-tab.selected, .station-range.selected { border-color: var(--blue); background: #e6f4fb; color: var(--blue-deep); }.station-chart-card { margin: var(--space-2) 0 var(--space-5); padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(160deg, #f2f9fd, #fff 72%); }.station-chart-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }.station-chart-heading h2, .station-chart-heading p { margin: 0; }.station-chart-heading > strong { font-size: 1.8rem; color: var(--blue-deep); }.station-chart { display: block; width: 100%; height: auto; margin-top: .25rem; }.station-baseline { stroke: #d9e2ec; stroke-width: 1; }.station-line { fill: none; stroke: #1479b8; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }.station-point { fill: #fff; stroke: #1479b8; stroke-width: 1.5; }.station-axis { fill: #627d98; font-size: 10px; }.station-history { margin-top: var(--space-5); }.station-history-row { padding: .85rem 0; border-bottom: 1px solid var(--line); }.station-history-row time { display: block; margin-bottom: .55rem; font-weight: 700; }.station-reading-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }.station-reading-grid span { padding: .45rem .55rem; border-radius: 9px; background: var(--surface-soft); }.station-reading-grid span.selected { background: #e6f4fb; outline: 1px solid #8bc6e6; }.station-reading-grid small, .station-reading-grid b { display: block; }.station-reading-grid small { color: var(--muted); font-size: .7rem; }.station-reading-grid b { font-size: .9rem; }
@media (max-width: 46rem) { .hero-card { grid-column: auto; } .section-heading { align-items: start; flex-direction: column; gap: var(--space-1); } }
.station-gridline { stroke: #d9e2ec; stroke-width: 1; stroke-dasharray: 3 3; }

/* Daily outlook uses the same glanceable, touch-first treatment as the hourly cards. */
.daily-strip { display:flex; gap:.75rem; overflow-x:auto; margin:.75rem calc(var(--space-3) * -1) 0; padding:.15rem var(--space-3) .75rem; scroll-snap-type:x proximity; }
.daily-card { flex:0 0 min(76vw,12.5rem); min-height:13rem; padding:1rem; border:1px solid var(--line); border-radius:18px; color:var(--ink); text-decoration:none; background:linear-gradient(145deg,#f4fbff,#fff 68%); box-shadow:0 2px 8px rgb(16 42 67 / .06); scroll-snap-align:start; transition:transform .15s ease,box-shadow .15s ease; }
.daily-card.today { border-color:#8dc9e8; background:linear-gradient(145deg,#e3f5ff,#fff 68%); }
.daily-card:hover,.daily-card:focus-visible { transform:translateY(-2px); box-shadow:0 7px 18px rgb(16 42 67 / .12); outline:0; }
.daily-card header { display:flex; justify-content:space-between; gap:.5rem; align-items:baseline; }.daily-card header strong { font-size:1rem; }.daily-card header small { color:var(--muted); font-size:.72rem; text-align:right; }
.daily-icon { display:block; width:3.5rem; height:3rem; margin:.45rem 0 .25rem; }.daily-icon svg { display:block; width:100%; height:100%; }
.daily-temperatures { display:flex; align-items:baseline; gap:.55rem; }.daily-temperatures b { font-size:1.75rem; line-height:1; }.daily-temperatures span { color:var(--muted); font-size:1rem; }
.daily-range { position:relative; height:.45rem; margin:.85rem 0 .65rem; overflow:hidden; border-radius:999px; background:#d8e6ef; }.daily-range i { position:absolute; left:var(--start); width:var(--width); height:100%; border-radius:inherit; background:linear-gradient(90deg,#55a8d8,#f0a72f); }
.daily-card p { margin:0; color:var(--muted); font-size:.8rem; }.daily-card p strong { color:#17638d; }

.brand { color: var(--ink); text-decoration: none; }
.page-intro { margin-bottom: var(--space-4); }
.page-intro h1 { margin: .15rem 0 .35rem; font-size: clamp(1.7rem, 5vw, 2.4rem); line-height: 1.15; }
.eyebrow { margin: 0; color: var(--blue-deep); font-size: .8rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.hero-card { grid-column: span 6; background: linear-gradient(135deg, #e6f4fb, #fff); }
.hero-temperature { display: block; margin: .25rem 0; font-size: clamp(3rem, 10vw, 4.5rem); line-height: 1; }
.section-heading { display: flex; gap: var(--space-3); align-items: end; justify-content: space-between; margin: var(--space-5) 0 var(--space-2); }
.section-heading h2 { margin: .1rem 0 0; }
.section-gap { margin-top: var(--space-5); }
.text-link { color: var(--blue-deep); font-weight: 700; white-space: nowrap; }
.nav-dot { display: inline-block; width: .38rem; height: .38rem; margin-left: .3rem; border-radius: 50%; background: var(--amber); vertical-align: middle; }
@media (max-width: 46rem) { .hero-card { grid-column: auto; } .section-heading { align-items: start; flex-direction: column; gap: var(--space-1); } }
.evidence-list { display: grid; grid-template-columns: minmax(8rem, 1fr) 2fr; gap: var(--space-1) var(--space-3); margin: var(--space-4) 0; padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius); }
.evidence-list dt { font-weight: 750; }
.evidence-list dd { margin: 0; color: var(--muted); overflow-wrap: anywhere; }
@media (max-width: 46rem) { .evidence-list { grid-template-columns: 1fr; gap: .15rem; } }

/* Model comparison, source health and river context use the same compact,
   touch-first patterns as the hourly air-quality view. */
.model-tabs { display:flex; gap:.5rem; overflow-x:auto; margin:0 0 1rem; padding-bottom:.2rem; }.model-tab,.model-hour { flex:0 0 auto; border:1px solid var(--line); border-radius:999px; padding:.55rem .8rem; color:var(--ink); background:var(--surface); font:inherit; font-weight:700; }.model-tab.selected,.model-hour.selected { color:white; border-color:var(--blue-deep); background:var(--blue-deep); }.model-hour-strip { display:flex; gap:.45rem; overflow-x:auto; margin:1rem calc(var(--space-3) * -1); padding:0 var(--space-3) .5rem; }.model-hour { min-width:4.5rem; border-radius:11px; font-size:.85rem; }.model-selected { margin-top:1rem; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }.model-selected > p,.model-selected > h2 { margin:.8rem 1rem .2rem; }.provider-head,.provider-row { display:grid; grid-template-columns:1.35fr repeat(4,minmax(2.8rem,1fr)); gap:.35rem; align-items:center; padding:.7rem 1rem; font-size:.78rem; }.provider-head { position:sticky; top:0; color:var(--muted); background:#edf5fa; font-weight:700; }.provider-row { border-top:1px solid var(--line); }.provider-row span { text-align:right; }.model-explainer,.comparison-table,.source-group { margin:1rem 0; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }.model-explainer summary,.comparison-table summary,.source-group summary { display:flex; justify-content:space-between; gap:1rem; padding:1rem; cursor:pointer; font-weight:750; }.model-explainer p { padding:0 1rem 1rem; color:var(--muted); }.model-history { display:grid; gap:.65rem; padding:.75rem; background:var(--surface-soft); }.model-history article { display:grid; grid-template-columns:4.2rem 5.1rem minmax(0,1fr); gap:.55rem; align-items:start; padding:.7rem; border-radius:12px; background:var(--surface); }.history-time { font-weight:700; font-size:.82rem; }.actual-reading { padding:.4rem .5rem; border-radius:9px; background:#dff1ff; color:#075985; }.actual-reading small,.actual-reading strong { display:block; }.prediction-list { display:flex; flex-wrap:wrap; gap:.35rem; }.prediction { display:grid; gap:.05rem; min-width:3.7rem; padding:.28rem .42rem; border-radius:8px; color:#334e68; background:#f0f4f7; font-size:.72rem; }.prediction b { color:#486581; font-size:.67rem; }.source-summary { display:grid; gap:.2rem; margin:1rem 0; padding:1rem; border-left:5px solid var(--green); border-radius:var(--radius); background:#edfaf3; }.source-summary.attention { border-color:var(--red); background:#fff0ef; }.source-summary span { color:var(--muted); font-size:.88rem; }.source-group summary span { color:var(--muted); font-size:.82rem; font-weight:500; }.source-group article { display:grid; grid-template-columns:.7rem 1fr auto; gap:.65rem; align-items:start; padding:.75rem 1rem; border-top:1px solid var(--line); }.source-group article small { display:block; color:var(--muted); font-size:.78rem; }.source-group time { max-width:7rem; color:var(--muted); text-align:right; font-size:.72rem; }.source-dot { width:.62rem; height:.62rem; margin-top:.35rem; border-radius:50%; background:#9fb3c8; }.source-available { background:var(--green); }.source-degraded { background:var(--amber); }.source-unavailable { background:var(--red); }.river-card { color:var(--ink); text-decoration:none; border-inline-start:.4rem solid var(--green); }.river-card.river-moderate { border-inline-start-color:var(--amber); }.river-card.river-unhealthy { border-inline-start-color:var(--red); }.river-card .metric small { font-size:1rem; }.river-wave { margin:-.4rem 0 -.3rem; color:#1679ad; font-size:3rem; line-height:1; }.river-hero { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin:1rem 0; padding:1rem; border-left:6px solid var(--green); border-radius:var(--radius); background:#edfaf3; }.river-hero.river-moderate { border-color:var(--amber); background:#fff7df; }.river-hero.river-unhealthy { border-color:var(--red); background:#fff0ef; }.river-hero p,.river-hero span { display:block; margin:0; color:var(--muted); font-size:.82rem; }.river-hero strong { display:block; margin:.25rem 0; font-size:2rem; line-height:1.1; }.river-hero strong small { font-size:.9rem; }.river-hero .river-time { font-size:1.1rem; }.river-chart-card,.river-detail { margin:1rem 0; padding:1rem; border:1px solid var(--line); border-radius:var(--radius); }.river-chart-card h2,.river-detail h2 { margin:0 0 .25rem; }.river-chart { display:block; width:100%; margin-top:.5rem; overflow:visible; }.river-line { fill:none; stroke:#1479b8; stroke-width:3; }.river-point { fill:#1479b8; }.danger-line { stroke:#c53030; stroke-width:2; stroke-dasharray:6 4; }.danger-label { fill:#a62b2b; font-size:10px; font-weight:700; }
@media (max-width:32rem) { .provider-head,.provider-row { grid-template-columns:1.15fr repeat(4,minmax(2.4rem,1fr)); gap:.2rem; padding-inline:.65rem; font-size:.7rem; }.model-history article { grid-template-columns:3.6rem 4.6rem minmax(0,1fr); gap:.4rem; padding:.55rem; }.river-hero { grid-template-columns:1fr; } }

/* Night sky is intentionally an observation guide, not a simulated planetarium. */
.night-sky-home { display:grid; grid-template-columns:7.5rem minmax(0,1fr); gap:1rem; align-items:center; margin-top:var(--space-5); padding:1rem; overflow:hidden; border:1px solid #345477; border-radius:18px; color:#f6fbff; text-decoration:none; background:linear-gradient(135deg,#10294c,#274f7b); transition:transform .15s ease,box-shadow .15s ease; }.night-sky-home:hover,.night-sky-home:focus-visible { transform:translateY(-2px); box-shadow:0 8px 20px rgb(16 42 67 / .22); outline:0; }
.night-sky-home .eyebrow { color:#b9dcf4; }.night-sky-home h2,.night-sky-home p { margin:.15rem 0; }.night-sky-home p { color:#d9e9f4; font-size:.86rem; }.night-sky-home .text-link { display:inline-block; margin-top:.35rem; color:#fff4bb; }.night-sky-art { display:block; width:100%; height:auto; filter:drop-shadow(0 7px 10px rgb(0 0 0 / .2)); }
.night-hero { display:grid; grid-template-columns:minmax(0,1fr) min(38vw,10rem); gap:1rem; align-items:center; margin:calc(var(--space-4) * -1); padding:2.1rem var(--space-4) 1.8rem; overflow:hidden; color:#f4f9ff; background:radial-gradient(circle at 82% 12%,#486c98 0 3%,transparent 22%),linear-gradient(145deg,#0c1e3a,#183d67 62%,#28628a); }.night-hero .eyebrow { color:#bfe3fb; }.night-hero h1 { margin:.25rem 0 .45rem; font-size:clamp(2rem,8vw,3.35rem); line-height:1.05; }.night-hero p { margin:.2rem 0; color:#e0edf7; }.night-hero .night-sky-art { max-width:10rem; }
.night-hero-metrics { display:flex; flex-wrap:wrap; gap:.45rem; margin-top:1rem; }.night-hero-metrics span { display:grid; gap:.1rem; padding:.45rem .55rem; border:1px solid rgb(255 255 255 / .2); border-radius:10px; color:#d9eaf7; background:rgb(0 0 0 / .14); font-size:.7rem; }.night-hero-metrics b { color:#fff; font-size:.95rem; }
.night-feature { margin:var(--space-4) 0; padding:1rem; border:1px solid #cad9e8; border-radius:18px; background:linear-gradient(135deg,#edf3fb,#fff); }.night-feature > div { display:flex; gap:1rem; align-items:center; }.night-feature .celestial-art { flex:0 0 5.7rem; width:5.7rem; height:5.7rem; margin:0; }.night-feature h2,.night-feature p { margin:.15rem 0; }.night-feature p { color:var(--muted); }
.night-guide-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.7rem; }.night-guide-grid article { min-height:10.7rem; padding:.85rem; border:1px solid var(--line); border-radius:15px; background:var(--surface); }.night-symbol { display:grid; width:2.25rem; height:2.25rem; place-items:center; margin-bottom:.5rem; border-radius:50%; color:#fff9d9; background:#264d78; font-size:1.35rem; }.night-guide-grid h3,.night-guide-grid p { margin:.2rem 0; }.night-guide-grid p { color:var(--muted); font-size:.79rem; }
.night-timeline { margin-top:var(--space-5); padding:1rem; border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(180deg,#f4f9fd,#fff); }.night-timeline .section-heading { margin:0 0 .8rem; }.night-timeline-row { display:grid; grid-template-columns:4.7rem 1rem minmax(0,1fr); gap:.7rem; align-items:start; min-height:4.2rem; }.night-timeline-row time { color:#375a7c; font-weight:750; font-size:.84rem; }.night-timeline-row i { position:relative; display:block; width:.7rem; height:.7rem; margin-top:.2rem; border:2px solid #fff; border-radius:50%; background:#d7a72c; box-shadow:0 0 0 2px #476b8d; }.night-timeline-row:not(:last-child) i::after { position:absolute; top:.65rem; left:50%; width:2px; height:3.45rem; background:#b8cbdc; content:""; }.night-timeline-row p { margin:.15rem 0; color:var(--muted); font-size:.82rem; }.night-source-note { margin:var(--space-4) 0; padding:1rem; border-left:5px solid #315d89; border-radius:0 var(--radius) var(--radius) 0; background:#ecf4fa; }.night-source-note h2,.night-source-note p { margin:.2rem 0; }.night-source-note p { color:#36536c; }
@media (max-width:36rem) { .night-guide-grid { grid-template-columns:1fr; }.night-guide-grid article { min-height:auto; }.night-hero { grid-template-columns:minmax(0,1fr) 6.5rem; }.night-sky-home { grid-template-columns:6.3rem minmax(0,1fr); } }
.planet-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; }.planet-grid article { position:relative; min-height:9.6rem; padding:.9rem; overflow:hidden; border:1px solid #ced9e8; border-radius:16px; background:linear-gradient(145deg,#f5f8fc,#fff); }.planet-grid h3,.planet-grid p { margin:.2rem 0; }.planet-grid p { color:var(--muted); font-size:.8rem; }.planet-orb { display:block; width:2.1rem; height:2.1rem; margin-bottom:.55rem; border-radius:50%; background:#d4c6a2; box-shadow:inset -.45rem -.32rem .35rem rgb(60 44 29 / .35),0 3px 7px rgb(16 42 67 / .14); }.planet-venus { background:#f8e8b3; }.planet-mars { background:#d9815d; }.planet-jupiter { width:2.35rem; background:repeating-linear-gradient(180deg,#e8d3ad 0 .32rem,#ba8264 .32rem .52rem,#f0e0c2 .52rem .74rem); }.planet-saturn { position:relative; background:#e6ca88; }.planet-saturn::after { position:absolute; inset:.95rem -.55rem; border:2px solid #b89156; border-radius:50%; transform:rotate(-18deg); content:""; }.satellite-pass { margin:var(--space-4) 0; padding:1rem; border:1px solid #a9bfd7; border-inline-start:5px solid #516f91; border-radius:var(--radius); background:linear-gradient(135deg,#edf4fb,#fff); }.satellite-pass.pass-ready { border-inline-start-color:#15966a; background:linear-gradient(135deg,#eaf9f1,#fff); }.satellite-pass h2,.satellite-pass p { margin:.25rem 0; }.satellite-pass > strong { display:block; margin:.35rem 0; font-size:1.35rem; }.satellite-pass small { display:block; margin-top:.7rem; color:var(--muted); font-size:.78rem; }
.forecast-hero { margin:calc(var(--space-4) * -1); padding:2rem var(--space-4) 1.5rem; color:#fff; background:linear-gradient(145deg,#0a527b,#187db4 60%,#64b8d8); }.forecast-hero .eyebrow,.forecast-hero small { color:#d9f2ff; }.forecast-hero h1,.forecast-hero p { margin:.25rem 0; }.forecast-hero h1 { font-size:clamp(2rem,8vw,3.3rem); }.forecast-day-strip { display:flex; gap:.75rem; overflow-x:auto; margin:var(--space-4) calc(var(--space-3) * -1) 0; padding:.2rem var(--space-3) .9rem; scroll-snap-type:x proximity; }.forecast-day { flex:0 0 min(76vw,13rem); min-height:13.2rem; padding:1rem; border:1px solid var(--line); border-radius:18px; color:var(--ink); text-align:left; font:inherit; background:linear-gradient(145deg,#f4fbff,#fff 68%); scroll-snap-align:start; cursor:pointer; }.forecast-day.selected { border-color:#1383ba; box-shadow:0 0 0 3px #d7f0fb; background:linear-gradient(145deg,#e1f4ff,#fff 68%); }.forecast-day.unavailable { color:#526c85; border-style:dashed; background:#f6f8fa; cursor:default; }.forecast-day header { display:flex; justify-content:space-between; gap:.4rem; }.forecast-day header small,.forecast-day p { color:var(--muted); font-size:.76rem; }.forecast-day p { margin:.55rem 0 .25rem; }.forecast-day-icon { display:block; margin:1.45rem 0 1.1rem; color:#90a4b7; font-size:2.4rem; line-height:1; }.forecast-confidence { display:block; margin-top:.45rem; color:#17638d; font-size:.72rem; font-weight:700; }.forecast-hour-strip { display:flex; gap:.6rem; overflow-x:auto; margin:0 calc(var(--space-3) * -1); padding:.2rem var(--space-3) 1rem; }.forecast-hour { display:grid; flex:0 0 6rem; min-height:8.5rem; gap:.3rem; padding:.75rem; border:1px solid var(--line); border-radius:14px; color:var(--ink); text-align:left; font:inherit; background:#fff; cursor:pointer; }.forecast-hour:hover,.forecast-hour:focus-visible { border-color:var(--blue); box-shadow:0 0 0 3px #cdeefa; outline:0; }.forecast-hour small { color:var(--muted); font-size:.72rem; }.forecast-awaiting { padding:1rem; border:1px dashed #99adbd; border-radius:var(--radius); background:#f6f9fb; }.forecast-awaiting h2,.forecast-awaiting p { margin:.2rem 0; }.forecast-awaiting p { color:var(--muted); }.forecast-decisions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; }.forecast-decisions article { min-height:8.5rem; padding:.9rem; border:1px solid var(--line); border-radius:15px; background:var(--surface); }.forecast-decisions h3,.forecast-decisions p { margin:.1rem 0; }.forecast-decisions strong { display:block; margin:.5rem 0; color:#134f78; }.forecast-decisions p { color:var(--muted); font-size:.78rem; }
@media (max-width:32rem) { .forecast-decisions { grid-template-columns:1fr; }.forecast-decisions article { min-height:auto; } }

.river-gridline { stroke:#d8e4ed; stroke-width:1; }.river-detail strong { color:var(--ink); }

@media (max-width: 46rem) {
  .feature-status-table { overflow: visible; }
  .feature-status-table table, .feature-status-table tbody, .feature-status-table tr, .feature-status-table td { display: block; min-width: 0; width: 100%; }
  .feature-status-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .feature-status-table tr { padding: .8rem 0; border-bottom: 1px solid var(--line); }
  .feature-status-table tr:last-child { border-bottom: 0; }
  .feature-status-table td { display: grid; grid-template-columns: 6.7rem minmax(0, 1fr); gap: .7rem; padding: .3rem .8rem; border: 0; }
  .feature-status-table td::before { color: var(--muted); font-size: .78rem; font-weight: 750; content: attr(data-label); }
  .feature-status-table .status { justify-self: start; }
}

/* Keep the home decision cards visually balanced with the Padma card. */
.rain-plan, .comfort-card, .air-card { text-align: center; }
.decision-card .decision-art, .air-card .air-art { margin-inline: auto; }
.rain-plan,.comfort-card,.air-card,.river-card,.sun-card,.moon-card,.night-sky-home { min-height:13.5rem; border:0; color:#fff; background-color:#12334a; background-repeat:no-repeat; background-position:center; background-size:cover; box-shadow:0 5px 16px rgb(15 42 62 / .16); }.rain-plan { background-image:linear-gradient(90deg,rgb(3 22 35 / .82),rgb(3 22 35 / .38)),url('../../public/cards/rain-glass.jpg'); }.comfort-card { background-image:linear-gradient(90deg,rgb(3 25 43 / .82),rgb(3 25 43 / .25)),url('../../public/cards/feels-like.jpg'); }.air-card { background-image:linear-gradient(90deg,rgb(4 42 48 / .83),rgb(4 42 48 / .28)),url('../../public/cards/air-quality.jpg'); }.river-card { background-image:linear-gradient(90deg,rgb(3 25 43 / .85),rgb(3 25 43 / .22)),url('../../public/cards/padma-river.jpg'); }.sun-card { background-image:linear-gradient(90deg,rgb(2 41 81 / .82),rgb(2 41 81 / .2)),url('../../public/cards/sun-uv.jpg'); }.moon-card { background-image:linear-gradient(90deg,rgb(1 8 22 / .78),rgb(1 8 22 / .12)),url('../../public/cards/moon.jpg'); }.night-sky-home { background-image:linear-gradient(90deg,rgb(0 5 15 / .85),rgb(0 5 15 / .24)),url('../../public/cards/night-sky.jpg'); }.rain-plan h2,.rain-plan strong,.rain-plan .meta,.comfort-card h2,.comfort-card strong,.comfort-card .meta,.air-card h2,.air-card strong,.air-card .meta,.river-card h2,.river-card strong,.river-card .meta,.sun-card h2,.sun-card strong,.sun-card .meta,.moon-card h2,.moon-card strong,.moon-card .meta { color:#fff; text-shadow:0 1px 3px rgb(0 0 0 / .45); }.rain-plan .decision-art,.comfort-card .decision-art,.air-card .air-art,.sun-card .celestial-art,.moon-card .celestial-art,.river-card .river-wave,.night-sky-home > div:first-child { display:none; }.rain-plan .text-link,.comfort-card .text-link,.air-card .text-link,.river-card .text-link { color:#fff; }.air-card .air-pill,.river-card .air-pill { color:#123b48; background:rgb(255 255 255 / .88); text-shadow:none; }.night-sky-home { grid-template-columns:1fr; align-items:end; }.night-sky-home .eyebrow,.night-sky-home h2,.night-sky-home p,.night-sky-home strong { position:relative; z-index:1; color:#fff; text-shadow:0 1px 3px rgb(0 0 0 / .48); }.night-sky-home .text-link { color:#fff2a8; }
.rain-plan.rain-dry,.rain-plan.rain-maybe,.rain-plan.rain-wet,.rain-plan.rain-storm { background-image:linear-gradient(90deg,rgb(3 22 35 / .7),rgb(3 22 35 / .24)),url('../../public/cards/rain-glass.jpg'); }.river-card { background-position:68% center; background-image:linear-gradient(90deg,rgb(3 25 43 / .7),rgb(3 25 43 / .08)),url('../../public/cards/padma-river.jpg'); }
.comfort-card > strong { display:block; margin:.35rem 0; font-size:clamp(2.6rem,9vw,3.3rem); line-height:.95; letter-spacing:-.045em; }
.sun-card > .metric { display:block; margin:.35rem 0; font-size:clamp(2.6rem,9vw,3.3rem); line-height:.95; letter-spacing:-.045em; }
.sun-card .sun-uv-label { margin:.1rem 0 .55rem; color:#fff; font-weight:750; text-shadow:0 1px 3px rgb(0 0 0 / .45); }
.rain-plan > strong { display:block; margin:.45rem auto; max-width:15rem; font-size:clamp(1.6rem,6.2vw,2.15rem); line-height:1.02; letter-spacing:-.03em; }
.provider-head span:not(:first-child) { text-align: right; }

@media (max-width: 46rem) {
  .verification-table { overflow: visible; }
  .verification-table table, .verification-table tbody, .verification-table tr, .verification-table td { display: block; min-width: 0; width: 100%; }
  .verification-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .verification-table tr { padding: .8rem 0; border-bottom: 1px solid var(--line); }
  .verification-table tr:last-child { border-bottom: 0; }
  .verification-table td { display: grid; grid-template-columns: 7.4rem minmax(0, 1fr); gap: .7rem; padding: .3rem .8rem; border: 0; }
  .verification-table td::before { color: var(--muted); font-size: .78rem; font-weight: 750; content: attr(data-label); }
}

/* Six current station readings fit as a clear two-row grid on a phone. */
@media (max-width: 46rem) {
  .station-now-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
  .station-now-grid .station-now-card { min-width: 0; padding: .7rem .55rem; }
  .station-now-card h2 { margin-bottom: .25rem; font-size: .86rem; overflow-wrap: anywhere; }
  .station-now-card .metric { margin: .2rem 0 .35rem; font-size: clamp(1.2rem, 5.2vw, 1.65rem); line-height: 1.08; overflow-wrap: anywhere; }
  .station-now-card .meta { margin: 0; font-size: .67rem; line-height: 1.35; }
}

.ensemble-window { margin: .75rem 0; color: var(--muted); font-size: .85rem; font-weight: 700; }
.ensemble-hour-strip { display: none; }
@media (max-width: 46rem) {
  .ensemble-table { display: none; }
  .ensemble-hour-strip { display: flex; gap: .6rem; overflow-x: auto; margin: 1rem calc(var(--space-3) * -1) 0; padding: .2rem var(--space-3) 1rem; scroll-snap-type: x proximity; }
  .ensemble-hour-strip article { flex: 0 0 7rem; display: grid; gap: .32rem; min-height: 8.2rem; padding: .8rem; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(145deg, #f3f9fc, #fff); scroll-snap-align: start; }
  .ensemble-hour-strip time { color: var(--blue-deep); font-size: .8rem; font-weight: 750; }
  .ensemble-hour-strip strong { font-size: 1.55rem; line-height: 1.1; }
  .ensemble-hour-strip span, .ensemble-hour-strip small { color: var(--muted); font-size: .78rem; }
}

.storm-alert-card { text-align: center; }
.storm-alert-card > strong { display: block; margin: .45rem 0; }
.storm-alert-clear { border-inline-start: .4rem solid var(--green); background: linear-gradient(135deg, #edfaf3, #fff); }
.storm-alert-active { border-inline-start: .4rem solid var(--red); background: linear-gradient(135deg, #fff0ef, #fff); }
.storm-feed-unavailable { border-inline-start: .4rem solid var(--amber); background: linear-gradient(135deg, #fff7df, #fff); }
.storm-alert-card { min-height:12rem; overflow:hidden; background-repeat:no-repeat; background-size:cover; background-position:center; }.storm-alert-clear { color:#fff; border-inline-start-color:#48c292; background-image:linear-gradient(90deg,rgb(0 44 35 / .9),rgb(0 54 42 / .4)),url('../../public/alerts/bangladesh-flag.jpg'); animation:official-flag-breeze 18s ease-in-out infinite alternate; }.storm-alert-clear h2,.storm-alert-clear strong,.storm-alert-clear .meta { color:#fff; text-shadow:0 1px 3px rgb(0 0 0 / .42); }.storm-alert-clear .status { color:#087a54; background:rgb(239 255 248 / .94); }.storm-alert-active { color:#fff; border-inline-start-color:#ff7770; background-image:linear-gradient(135deg,#9e1f2b,#d94743 62%,#772034); }.storm-alert-upcoming { color:#3f2805; border-inline-start: .4rem solid #e7ae33; background:linear-gradient(135deg,#fff0bd,#f0b944 65%,#d88d1e); }.storm-alert-active h2,.storm-alert-active strong,.storm-alert-active .meta,.storm-alert-active .text-link { color:#fff; text-shadow:0 1px 3px rgb(0 0 0 / .25); }.storm-alert-active .status { color:#9c1e28; background:#fff1f1; }.storm-alert-upcoming h2,.storm-alert-upcoming strong,.storm-alert-upcoming .meta,.storm-alert-upcoming .text-link { color:#3f2805; }.storm-alert-upcoming .status { color:#765011; background:#fff8df; }@keyframes official-flag-breeze { to { background-position:calc(50% + 10px) center; } }@media (prefers-reduced-motion:reduce) { .storm-alert-clear { animation:none; } }
.storm-alert-clear { border:1px solid #4fd2a0; border-inline-start:1px solid #4fd2a0; background-image:linear-gradient(90deg,rgb(0 46 36 / .68),rgb(0 64 48 / .18)),url('../../public/alerts/bangladesh-flag.jpg'); }.alert-all-clear { display:inline-flex; align-items:center; gap:.35rem; width:max-content; margin:.2rem auto .55rem; padding:.32rem .58rem; border:1px solid #78e0b5; border-radius:999px; color:#073b2e; background:rgb(239 255 248 / .94); font-size:.78rem; font-weight:800; text-shadow:none; }.alert-all-clear i { display:inline-grid; width:1rem; height:1rem; place-items:center; border-radius:50%; color:#fff; background:#159567; font-style:normal; }.alert-all-clear span { color:#087a54; }

/* Evidence modules: source clarity takes priority over visual certainty. */
.radar-workspace,.satellite-workspace { margin-top:1rem; }.radar-context { margin:0 0 .7rem; color:var(--muted); }.radar-figure { margin:0; overflow:hidden; border:1px solid var(--line); border-radius:18px; background:#e9f0f5; }.radar-figure img { display:block; width:100%; min-height:13rem; object-fit:contain; background:#dce7ef; }.radar-figure figcaption { display:flex; justify-content:space-between; gap:.7rem; padding:.7rem .85rem; font-size:.8rem; background:#fff; }.radar-figure figcaption span { color:var(--muted); text-align:right; }.radar-frame-strip { display:flex; gap:.55rem; overflow-x:auto; margin:.8rem calc(var(--space-3) * -1); padding:.15rem var(--space-3) .7rem; scroll-snap-type:x proximity; }.radar-frame-button { display:grid; flex:0 0 7.8rem; gap:.28rem; padding:.65rem .7rem; border:1px solid var(--line); border-radius:12px; color:var(--ink); text-align:left; font:inherit; background:#fff; cursor:pointer; scroll-snap-align:start; }.radar-frame-button.selected,.radar-frame-button:hover,.radar-frame-button:focus-visible { border-color:var(--blue); box-shadow:0 0 0 3px #d9effa; outline:0; }.radar-frame-button span { color:var(--muted); font-size:.72rem; }.evidence-note,.archive-card,.research-card { margin-top:1rem; padding:1rem; border-inline-start:5px solid #3f779e; border-radius:0 var(--radius) var(--radius) 0; background:#edf5fa; }.evidence-note p,.research-card p { margin:.35rem 0 0; color:#38546b; }.satellite-hero { padding:1.2rem; border-radius:18px; color:#f5fbff; background:radial-gradient(circle at 86% 15%,#85c8e7 0 4%,transparent 27%),linear-gradient(145deg,#0b3f69,#1576a9); }.satellite-hero .eyebrow,.satellite-hero p,.satellite-hero span { color:#d8edf8; }.satellite-hero h2 { margin:.35rem 0; color:#fff; font-size:2.7rem; }.satellite-hero span { font-size:.8rem; }.satellite-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.55rem; margin: .8rem 0; }.satellite-stats article { display:grid; gap:.25rem; padding:.75rem; border:1px solid var(--line); border-radius:14px; background:#fff; }.satellite-stats span { color:var(--muted); font-size:.72rem; }.satellite-stats strong { font-size:1.05rem; }.archive-card { border-inline-color:#7f69a7; background:#f3effb; }.archive-card h3,.archive-card p { margin:.15rem 0; }.archive-card dl { display:grid; grid-template-columns:6rem 1fr; gap:.35rem .7rem; margin:.8rem 0 0; font-size:.82rem; }.archive-card dt { color:var(--muted); }.archive-card dd { margin:0; overflow-wrap:anywhere; }.research-card { border-inline-color:#b37718; background:#fff7df; }.research-card h3 { margin:.2rem 0; }.research-columns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem; margin-top:.9rem; }.research-columns strong { font-size:.85rem; }.research-columns .plain-list { margin:.35rem 0; font-size:.78rem; }.guidance-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; }.guidance-card { overflow:hidden; border:1px solid var(--line); border-radius:15px; background:#fff; }.guidance-card a { display:block; color:inherit; text-decoration:none; }.guidance-card img { display:block; width:100%; aspect-ratio:1.5; object-fit:cover; background:#eef3f6; }.guidance-card div { padding:.7rem; }.guidance-card h3,.guidance-card p { margin:.1rem 0; }.guidance-card p,.guidance-card small { color:var(--muted); font-size:.75rem; }.upper-air-table td small { display:block; margin-top:.15rem; color:var(--muted); font-size:.7rem; }
@media (max-width:46rem) { .satellite-stats { grid-template-columns:1fr; }.research-columns,.guidance-grid { grid-template-columns:1fr; }.radar-figure figcaption { display:grid; }.radar-figure figcaption span { text-align:left; } }

.upper-air-workspace { display:grid; gap:.85rem; }
.upper-air-intro { padding:1.05rem; border-radius:18px; color:#eaf7ff; background:radial-gradient(circle at 88% 5%,#75c9e2 0,transparent 29%),linear-gradient(145deg,#123f68,#167eaa); }
.upper-air-intro .eyebrow,.upper-air-intro p,.upper-air-intro span { color:#d8edf7; }
.upper-air-intro h2 { margin:.25rem 0 .45rem; color:#fff; }
.upper-air-intro span { display:block; margin-top:.65rem; font-size:.78rem; }
.upper-air-heading { margin:.25rem 0 0; font-size:1.15rem; }
.upper-air-time-strip { display:flex; gap:.55rem; overflow-x:auto; margin:0 calc(var(--space-3) * -1); padding:.1rem var(--space-3) .45rem; scroll-snap-type:x proximity; }
.upper-air-time { display:grid; flex:0 0 7.2rem; gap:.25rem; padding:.65rem .7rem; border:1px solid var(--line); border-radius:13px; color:var(--ink); text-align:left; font:inherit; background:#fff; cursor:pointer; scroll-snap-align:start; }
.upper-air-time span { color:var(--muted); font-size:.72rem; }
.upper-air-time.selected,.upper-air-time:hover,.upper-air-time:focus-visible { border-color:var(--blue); box-shadow:0 0 0 3px #d9effa; outline:0; background:#eef8fd; }
.upper-air-selected-time { margin:.15rem 0 0; color:var(--muted); }
.upper-air-layers { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; }
.upper-air-layer { display:grid; gap:.55rem; padding:.85rem; border:1px solid var(--line); border-radius:16px; background:#fff; }
.upper-air-layer h3,.upper-air-layer p { margin:.15rem 0; }.upper-air-layer p,.upper-air-layer small { color:var(--muted); font-size:.75rem; }.upper-air-level { color:#126b98; font-size:.72rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }.upper-air-values { display:grid; gap:.18rem; }.upper-air-values strong { font-size:1.4rem; }.upper-air-values span { font-size:.78rem; }.upper-air-layer small { border-top:1px solid var(--line); padding-top:.55rem; }


.radar-map { position:relative; min-height:21rem; background:#dce7ef; }.radar-map > img { display:block; width:100%; min-height:21rem; object-fit:contain; background:#dce7ef; }.radar-map .leaflet-container { position:absolute; inset:0; width:100%; height:100%; font:inherit; }.leaflet-tooltip { padding:.22rem .4rem; border:0; border-radius:7px; color:#14334e; font-weight:700; box-shadow:0 1px 5px #5678; }.leaflet-control-attribution { font-size:.58rem; }.radar-figure img { min-height:0; }

.radar-map[data-map-ready='true'] > img { display:none; }.radar-map[data-map-ready='true'] { height:21rem; min-height:21rem; }

.radar-product { margin-top:1.35rem; padding-top:1.2rem; border-top:1px solid var(--line); }.radar-product header h2,.radar-product header p { margin:.2rem 0; }.radar-product header p:not(.eyebrow) { color:var(--muted); }.radar-animation { display:flex; align-items:center; gap:.75rem; margin:.75rem 0 .1rem; color:var(--muted); font-size:.8rem; }.radar-play { flex:0 0 auto; padding:.58rem .82rem; border:0; border-radius:10px; color:#fff; background:#126b98; font:inherit; font-weight:750; cursor:pointer; }.radar-play[aria-pressed='true'] { background:#784d19; }.radar-product-intro { margin-top:0; }

.upper-air-explanation-button { display:block; width:100%; margin:.25rem 0 .7rem; padding:.68rem .85rem; border:1px solid #b37718; border-radius:12px; color:#704816; text-align:left; font:inherit; font-weight:800; background:#fff7e5; cursor:pointer; }.upper-air-explanation-button::after { content:'View what these readings mean'; float:right; color:#9a6c2d; font-weight:600; }

/* Keep all four upper-air readings in view; interpretation opens only when requested. */
.upper-air-layer { gap:.32rem; padding:.65rem; }
.upper-air-layer h3 { margin:.05rem 0; font-size:1rem; line-height:1.1; }
.upper-air-layer p { margin:.05rem 0; }
.upper-air-values { gap:.08rem; }
.upper-air-values strong { font-size:1.22rem; line-height:1.1; }
.upper-air-explanation-button { margin:.7rem 0 .35rem; }

.forecast-evidence-button { width:100%; margin-top:.8rem; padding:.75rem .9rem; border:1px solid #176c98; border-radius:12px; color:#07577f; font:inherit; font-weight:800; text-align:left; background:#edf8fd; cursor:pointer; }.forecast-evidence-button::after { content:'Open all available guidance'; float:right; color:#3b7490; font-weight:600; }.forecast-evidence-sheet { max-width:46rem; }.forecast-evidence-section { margin:.9rem 0; padding:.85rem; border:1px solid var(--line); border-radius:14px; background:#fff; }.forecast-evidence-section h3,.forecast-evidence-section p { margin:.1rem 0 .45rem; }.forecast-evidence-section p { color:var(--muted); font-size:.8rem; }.forecast-evidence-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem .85rem; margin:0; }.forecast-evidence-list div { min-width:0; }.forecast-evidence-list dt { color:var(--muted); font-size:.7rem; }.forecast-evidence-list dd { margin:.12rem 0 0; color:var(--ink); font-size:.9rem; font-weight:750; }.forecast-provider-list { display:grid; gap:.55rem; }.forecast-provider-list article { padding:.7rem; border-radius:10px; background:#f4f9fc; }.forecast-provider-list article > strong { display:block; margin-bottom:.45rem; }.forecast-provider-list dl { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.4rem .7rem; margin:0; }.forecast-provider-list dt { color:var(--muted); font-size:.68rem; }.forecast-provider-list dd { margin:.05rem 0 0; font-size:.82rem; font-weight:750; }.forecast-upper-levels { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.55rem; }.forecast-upper-levels article { display:grid; gap:.18rem; padding:.65rem; border-radius:10px; background:#edf6fb; }.forecast-upper-levels span { font-size:1.1rem; font-weight:800; }.forecast-upper-levels small { color:var(--muted); font-size:.7rem; line-height:1.3; }

.upper-air-hour-signal { margin-top:.75rem; padding:.7rem; border-inline-start:4px solid #2c7da5; border-radius:9px; background:#edf7fc; }.upper-air-hour-signal p { margin:.25rem 0; color:#294f67; }.upper-air-hour-signal small { color:#547087; font-size:.72rem; }

.hourly-aqi { display:inline-flex; width:max-content; padding:.16rem .36rem; border-radius:999px; font-size:.62rem; font-weight:800; line-height:1.15; }.hourly-aqi.aqi-good { color:#087a54; background:#e2f7ed; }.hourly-aqi.aqi-moderate { color:#875f08; background:#fff4d7; }.hourly-aqi.aqi-unhealthy,.hourly-aqi.aqi-very-unhealthy { color:#a52f31; background:#ffeaeb; }

.hour-decision-stack { display:grid; gap:.7rem; }.hour-decision-stack > article,.hour-secondary-grid > article { padding:.9rem; border-radius:14px; background:#f2f7fa; }.hour-decision-stack h3,.hour-decision-stack p { margin:.1rem 0; }.hour-decision-stack p { font-size:1.02rem; }.hour-decision-stack small { color:var(--muted); font-size:.78rem; }.hour-secondary-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; }.hour-secondary-grid > article { min-width:0; }.hour-secondary-grid .air-pill,.uv-hour-pill { display:inline-flex; max-width:100%; padding:.25rem .45rem; border-radius:999px; white-space:nowrap; font-size:.72rem; font-weight:800; }.uv-hour-pill.uv-low { color:#27724b; background:#e4f6e8; }.uv-hour-pill.uv-moderate { color:#856514; background:#fff4d7; }.uv-hour-pill.uv-high,.uv-hour-pill.uv-very-high,.uv-hour-pill.uv-extreme { color:#a4352d; background:#ffe7e5; }.hour-confidence { margin:.15rem 0 .1rem; color:var(--muted); font-size:.78rem; }.forecast-evidence-button { display:block; text-decoration:none; }

.hour-secondary-grid > .hour-mini-card { display:grid; align-content:center; min-height:4.6rem; padding:.65rem .75rem; }.hour-mini-card h3 { margin:0; font-size:.82rem; }.hour-mini-card strong { margin-top:.2rem; font-size:1.55rem; line-height:1; }.hour-mini-card.air-good,.hour-mini-card.uv-low { color:#087a54; background:#e2f7ed; }.hour-mini-card.air-moderate,.hour-mini-card.uv-moderate { color:#875f08; background:#fff4d7; }.hour-mini-card.air-unhealthy,.hour-mini-card.air-very-unhealthy,.hour-mini-card.uv-high,.hour-mini-card.uv-very-high,.hour-mini-card.uv-extreme { color:#a52f31; background:#ffeaeb; }.hour-mini-card.air-unknown,.hour-mini-card.uv-unknown { color:var(--muted); background:#f2f5f7; }

.hour-secondary-grid > .hour-mini-card { justify-items:center; text-align:center; }.forecast-evidence-button { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:4.25rem; padding: .8rem 1rem; text-align:center; }.forecast-evidence-button::after { float:none; display:block; margin-top:.22rem; text-align:center; }

.hour-analysis-card { display:block; width:100%; padding:.9rem; border:0; border-radius:14px; color:var(--ink); text-align:left; font:inherit; background:#f2f7fa; cursor:pointer; }.hour-analysis-card h3,.hour-analysis-card p { margin:.1rem 0; }.hour-analysis-card p { font-size:1.02rem; }.hour-analysis-card small { color:var(--muted); font-size:.78rem; }.hour-mini-card { border:0; cursor:pointer; font:inherit; }.hour-analysis-sheet { max-width:46rem; }.hour-analysis-bars { display:flex; align-items:end; gap:.32rem; min-height:15rem; margin:1rem 0; padding:.85rem .35rem .4rem; overflow-x:auto; border-radius:14px; background:#f4f8fa; }.hour-analysis-bars article { display:grid; grid-template-rows:2.2rem 8.5rem auto 1.8rem; flex:0 0 3rem; align-items:end; gap:.22rem; text-align:center; }.hour-analysis-bars strong { align-self:start; color:#476278; font-size:.63rem; line-height:1.1; }.hour-analysis-bars i { display:block; width:100%; height:var(--bar); min-height:2px; border-radius:6px 6px 1px 1px; background:#207eae; }.hour-analysis-bars b { font-size:.72rem; }.hour-analysis-bars span { min-height:1.5rem; color:var(--muted); font-size:.6rem; line-height:1.1; }.air-analysis article.aqi-good i { background:#159567; }.air-analysis article.aqi-moderate i { background:#d49416; }.air-analysis article.aqi-unhealthy i,.air-analysis article.aqi-very-unhealthy i { background:#d14b4b; }.uv-analysis article.uv-low i { background:#32a663; }.uv-analysis article.uv-moderate i { background:#d7a016; }.uv-analysis article.uv-high i,.uv-analysis article.uv-very-high i,.uv-analysis article.uv-extreme i { background:#d45044; }.hour-analysis-lines { display:grid; gap:.55rem; margin:1rem 0; }.hour-analysis-lines article { display:grid; grid-template-columns:3.5rem 1fr 2.4rem 2.4rem; gap:.45rem; align-items:center; }.hour-analysis-lines strong { font-size:.72rem; }.hour-analysis-lines article > div { position:relative; height:1.3rem; border-radius:999px; background:linear-gradient(90deg,#dceef6,#fce5d7); }.hour-analysis-lines i { position:absolute; top:.22rem; left:calc(var(--point) - .4rem); width:.8rem; height:.8rem; border:2px solid #fff; border-radius:50%; box-shadow:0 1px 3px #3458; }.hour-analysis-lines .actual { background:#258dc0; }.hour-analysis-lines .feels { background:#e05f37; }.hour-analysis-lines span,.hour-analysis-lines b { font-size:.75rem; text-align:right; }.hour-analysis-legend { display:flex; gap:1rem; color:var(--muted); font-size:.75rem; }.hour-analysis-legend span:first-child { color:#258dc0; }.hour-analysis-legend span:last-child { color:#e05f37; }
.hour-analysis-list { display:grid; gap:.55rem; margin:1rem 0; padding:.8rem; border-radius:14px; background:#f4f8fa; }.hour-analysis-list article { display:grid; grid-template-columns:3.7rem minmax(4rem,1fr) 2.55rem 4.1rem; gap:.45rem; align-items:center; min-height:2.35rem; padding:.35rem .2rem; border-bottom:1px solid #dfe9ee; }.hour-analysis-list article:last-child { border-bottom:0; }.hour-analysis-list strong { color:#36556c; font-size:.72rem; }.hour-analysis-list article > div { height:.8rem; overflow:hidden; border-radius:999px; background:#dcecf5; }.hour-analysis-list i { display:block; width:var(--fill); height:100%; min-width:2px; border-radius:inherit; background:#1788bd; }.hour-analysis-list b { text-align:right; font-size:.82rem; }.hour-analysis-list span { color:var(--muted); font-size:.68rem; text-align:right; }.rain-analysis i { background:linear-gradient(90deg,#62c2ed,#1679ad); }.air-analysis article.aqi-good i { background:#159567; }.air-analysis article.aqi-moderate i { background:#d49416; }.air-analysis article.aqi-unhealthy i,.air-analysis article.aqi-very-unhealthy i { background:#d14b4b; }.uv-analysis article.uv-low i { background:#32a663; }.uv-analysis article.uv-moderate i { background:#d7a016; }.uv-analysis article.uv-high i,.uv-analysis article.uv-very-high i,.uv-analysis article.uv-extreme i { background:#d45044; }

.hero { position:relative; isolation:isolate; display:block; min-height:17rem; padding:2rem var(--space-4); overflow:hidden; background:#075985; }.hero::after { content:""; position:absolute; z-index:-1; inset:0; background:linear-gradient(90deg, rgb(1 35 67 / .76) 0%, rgb(1 42 76 / .45) 48%, rgb(1 41 72 / .12) 100%); }.hero-copy { position:relative; z-index:2; max-width:21rem; }.hero h1 { font-size:clamp(1.65rem,7vw,2.4rem); }.hero-feels { margin:.2rem 0; color:#e7f6fd; font-size:1rem; font-weight:700; }.hero-condition { margin:.5rem 0 0; font-size:1rem; }.hero-updated { margin:.85rem 0 0; color:#d5eef9; font-size:.72rem; }.hero-art { position:absolute; z-index:-2; inset:0; overflow:hidden; background:#075985; }.hero-art > img { width:100%; height:100%; object-fit:cover; object-position:center; transform:scale(1.025); animation:hero-sky-shift 18s ease-in-out infinite alternate; }.hero-light,.hero-clouds,.hero-rainfall,.hero-lightning { position:absolute; pointer-events:none; }.hero-day.hero-clear .hero-light { inset:-30% -14% auto auto; width:72%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle, rgb(255 250 205 / .5) 0 3%, rgb(255 238 163 / .18) 23%, transparent 62%); animation:hero-sunlight 7s ease-in-out infinite alternate; }.hero-cloud .hero-clouds,.hero-rain .hero-clouds,.hero-storm .hero-clouds { inset:-15% -16% 6% 30%; background:radial-gradient(ellipse at 28% 70%, rgb(37 61 81 / .43) 0 19%, transparent 37%),radial-gradient(ellipse at 68% 40%, rgb(52 73 90 / .5) 0 25%, transparent 45%),linear-gradient(145deg, transparent 25%, rgb(37 61 81 / .32) 70%, transparent); filter:blur(5px); animation:hero-cloud-drift 20s ease-in-out infinite alternate; }.hero-rain .hero-rainfall,.hero-storm .hero-rainfall { inset:0; opacity:.72; background-image:linear-gradient(108deg, transparent 0 46%, rgb(198 235 250 / .12) 47% 48%, transparent 49% 100%),linear-gradient(108deg, transparent 0 62%, rgb(198 235 250 / .18) 63% 64%, transparent 65% 100%); background-size:26px 34px,39px 47px; animation:hero-rainfall 1.05s linear infinite; }.hero-storm .hero-lightning { inset:0; opacity:0; background:radial-gradient(circle at 72% 18%, rgb(255 251 218 / .92), transparent 33%); mix-blend-mode:screen; animation:hero-lightning 8s steps(1,end) infinite; }.hero-night .hero-light { inset:0; background:radial-gradient(circle at 74% 22%, rgb(241 246 255 / .24), transparent 23%); animation:hero-moon-glow 5s ease-in-out infinite alternate; }@keyframes hero-sky-shift { to { transform:scale(1.08) translate3d(-1.2%, .5%, 0); } }@keyframes hero-sunlight { to { opacity:.45; transform:scale(1.08); } }@keyframes hero-cloud-drift { to { transform:translate3d(-4%, 1%, 0); } }@keyframes hero-rainfall { to { background-position:0 34px,0 47px; } }@keyframes hero-lightning { 0%,86%,89%,100% { opacity:0; } 87%,88% { opacity:.95; } }@keyframes hero-moon-glow { to { opacity:.55; } }@media (max-width:25rem) { .hero { min-height:15.5rem; padding-top:1.55rem; } }

/* Preserve text contrast while allowing the card photography to remain visible. */
.comfort-card { background-position:68% center; background-image:linear-gradient(90deg,rgb(3 25 43 / .58),rgb(3 25 43 / .06)),url('../../public/cards/feels-like.jpg'); }
.rain-plan.rain-dry,.rain-plan.rain-maybe,.rain-plan.rain-wet,.rain-plan.rain-storm { background-image:linear-gradient(90deg,rgb(3 22 35 / .52),rgb(3 22 35 / .08)),url('../../public/cards/rain-glass.jpg'); }

/* A real image element avoids mobile-browser background rendering faults on the feels-like card. */
.comfort-card { position:relative; isolation:isolate; overflow:hidden; background-image:none; }
.comfort-card-photo { position:absolute; z-index:0; inset:0; display:block !important; width:100%; height:100%; object-fit:cover; object-position:68% center; }
.comfort-card::before { position:absolute; z-index:1; inset:0; background:linear-gradient(90deg,rgb(3 25 43 / .52),rgb(3 25 43 / .04)); content:''; }
.comfort-card > :not(.comfort-card-photo) { position:relative; z-index:2; }
.rain-plan.rain-dry,.rain-plan.rain-maybe,.rain-plan.rain-wet,.rain-plan.rain-storm { background-image:linear-gradient(90deg,rgb(3 22 35 / .32),rgb(3 22 35 / .02)),url('../../public/cards/rain-glass.jpg'); }
.sky-home-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-top:1rem}.sky-home-grid>*{grid-column:auto;min-width:0}.sky-home-grid .moon-card,.sky-home-grid .night-sky-home{min-height:13.5rem;margin:0}.sky-home-grid .moon-card{width:100%;text-align:left}.sky-home-grid .night-sky-home{display:grid;grid-template-columns:1fr;align-items:end;padding:1rem}@media(max-width:36rem){.sky-home-grid{grid-template-columns:1fr}.sky-home-grid .moon-card,.sky-home-grid .night-sky-home{min-height:12rem}}

/* Official-warning details use the same readable sheet pattern as the other home cards. */
.storm-alert-card { cursor:pointer; }
.storm-alert-card:focus-visible { outline:3px solid #72c7e9; outline-offset:3px; }
.official-alert-sheet { max-width:46rem; }
.official-alert-status,.official-alert-detail { margin:.9rem 0; padding:1rem; border-radius:14px; }
.official-alert-status h3,.official-alert-status p,.official-alert-detail h3,.official-alert-detail p { margin:.1rem 0 .45rem; }
.official-alert-status small,.official-alert-detail small { display:block; color:var(--muted); font-size:.78rem; }
.alert-status-clear { border-left:5px solid #159567; color:#095e43; background:#eaf9f1; }
.alert-status-active { border-left:5px solid #c93c3c; color:#7b2025; background:#fff0ef; }
.alert-status-upcoming { border-left:5px solid #c88a13; color:#70490c; background:#fff7df; }
.alert-status-unavailable { border-left:5px solid #c88a13; color:#70490c; background:#fff7df; }
.official-alert-detail { border:1px solid var(--line); background:#f7fafc; }
.official-alert-detail strong { display:block; margin:.45rem 0; color:var(--ink); font-size:.86rem; }
.official-alert-detail .text-link { display:inline-block; margin-top:.55rem; }

/* Himawari radiation is displayed separately from GSMaP rainfall. */
.himawari-radiation-card { margin:1rem 0; padding:1rem; border:1px solid #8fc8e3; border-radius:16px; background:linear-gradient(145deg,#e5f5fc,#fff); }
.himawari-radiation-card h2,.himawari-radiation-card p { margin:.2rem 0; }
.himawari-radiation-card h2 { color:#075985; font-size:2rem; }
.himawari-radiation-card dl { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.55rem; margin:.8rem 0; }
.himawari-radiation-card dl div { padding:.55rem; border-radius:10px; background:rgb(255 255 255 / .7); }
.himawari-radiation-card dt,.himawari-radiation-card small { color:var(--muted); font-size:.72rem; }
.himawari-radiation-card dd { margin:.12rem 0 0; font-weight:800; }

/* Daylight cloud-property study-area views remain visibly distinct from photo imagery and rainfall evidence. */
.himawari-cloud-card { margin:1rem 0; padding:1rem; border:1px solid #a7c5d7; border-radius:16px; background:linear-gradient(145deg,#edf5f9,#fff); }
.himawari-cloud-card h2,.himawari-cloud-card p { margin:.2rem 0; }
.himawari-cloud-card figure { margin:.85rem 0 .65rem; overflow:hidden; border:1px solid #bed0dc; border-radius:12px; background:#253748; }
.satellite-rainfall-map-canvas { height:19rem; min-height:19rem; background:#e7f0f5; }
.satellite-rainfall-map-canvas .leaflet-container { height:100%; width:100%; }
.satellite-rainfall-map-canvas > img { display:block; width:100%; height:100%; object-fit:cover; }
.himawari-cloud-map { height:19rem; min-height:19rem; background:#e7f0f5; }
.himawari-cloud-map .leaflet-container { height:100%; width:100%; }
.himawari-cloud-card figcaption,.himawari-cloud-card small { display:block; padding:.55rem .7rem; color:var(--muted); font-size:.74rem; }
.himawari-cloud-frames { display:flex; gap:.45rem; overflow-x:auto; padding:.1rem 0 .45rem; }
.himawari-cloud-thumb { flex:0 0 5.9rem; width:5.9rem; padding:0; overflow:hidden; border:1px solid #bed0dc; border-radius:8px; background:#f6fafc; color:#264b6b; text-align:left; cursor:pointer; }
.himawari-cloud-thumb.selected { border:2px solid #096a9c; box-shadow:0 0 0 2px #c9e9f7; }
.himawari-cloud-thumb img { display:block; width:100%; aspect-ratio:1.25; background:#253748; image-rendering:pixelated; object-fit:cover; }
.himawari-cloud-thumb span { display:block; padding:.2rem .28rem; font-size:.63rem; line-height:1.2; white-space:nowrap; }
.satellite-loading-card { min-height:14rem; display:grid; align-content:center; gap:.65rem; padding:1.5rem; border:1px solid var(--line); border-radius:18px; color:#eaf7ff; background:radial-gradient(circle at 84% 18%,#77c7e9 0,transparent 28%),linear-gradient(145deg,#0b4b78,#167aaa); }
.satellite-loading-card .loading { color:#fff; font-weight:750; }
.satellite-loading-card .loading::before { border-color:#bfe5f7; border-top-color:#fff; }
.satellite-loading-card p { max-width:31rem; margin:0; color:#d9eff9; }

/* Use image elements for key home cards: this is more dependable on mobile than a CSS-only background. */
.rain-plan { position:relative; isolation:isolate; overflow:hidden; background-image:none !important; }
.rain-plan-photo { position:absolute; z-index:0; inset:0; display:block !important; width:100%; height:100%; object-fit:cover; object-position:center; }
.rain-plan::before { position:absolute; z-index:1; inset:0; content:''; background:linear-gradient(90deg,rgb(3 22 35 / .32),rgb(3 22 35 / .02)); }
.rain-plan > :not(.rain-plan-photo) { position:relative; z-index:2; }
.storm-alert-card { position:relative; isolation:isolate; overflow:hidden; background-image:none !important; }
.storm-alert-photo { position:absolute; z-index:0; inset:0; display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
.storm-alert-clear::before,.storm-feed-unavailable::before { position:absolute; z-index:1; inset:0; content:''; }
.storm-alert-clear::before { background:linear-gradient(90deg,rgb(0 46 36 / .68),rgb(0 64 48 / .18)); }
.storm-feed-unavailable { color:#fff; border-color:#e6b758; background-color:#704c13; }
.storm-feed-unavailable::before { background:linear-gradient(90deg,rgb(89 58 6 / .78),rgb(89 58 6 / .26)); }
.storm-alert-clear > :not(.storm-alert-photo),.storm-feed-unavailable > :not(.storm-alert-photo) { position:relative; z-index:2; }
.storm-feed-unavailable h2,.storm-feed-unavailable strong,.storm-feed-unavailable .meta { color:#fff; text-shadow:0 1px 3px rgb(0 0 0 / .38); }
.storm-feed-unavailable .status { color:#765011; background:#fff8df; }

/* Sun & UV research page */
.sun-now-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;margin:1rem 0}.sun-now-grid article{padding:1rem;border:1px solid #efd37a;border-radius:16px;background:linear-gradient(135deg,#fff6d8,#fff)}.sun-now-grid p,.sun-now-grid span{display:block;margin:0;color:var(--muted);font-size:.85rem}.sun-now-grid strong{display:block;margin:.35rem 0;font-size:clamp(2rem,8vw,3.25rem);color:#945500}.sun-guidance,.sun-section,.source-note{margin:1rem 0;padding:1rem;border-radius:16px}.sun-guidance{border-left:5px solid #df9d19;background:#fff8e6}.sun-guidance.uv-high,.sun-guidance.uv-very-high,.sun-guidance.uv-extreme{border-left-color:#cc392f;background:#fff0ee}.sun-guidance h2,.sun-guidance p,.sun-section h2,.sun-section p,.source-note h2,.source-note p{margin:.2rem 0 .55rem}.sun-section{border:1px solid var(--line);background:#fff}.sun-chart{display:grid;gap:.5rem}.sun-row{display:grid;grid-template-columns:4.7rem 1fr 4.5rem;gap:.65rem;align-items:center;font-size:.82rem}.sun-row>div{height:.8rem;border-radius:999px;background:#edf0f2;overflow:hidden}.sun-row i{display:block;width:var(--sun);height:100%;border-radius:inherit;background:linear-gradient(90deg,#f7bd2d,#e77d1d)}.sun-row.observed i{background:linear-gradient(90deg,#20866f,#0c587f)}.sun-row b{text-align:right}.sun-key{display:inline-block;width:.65rem;height:.65rem;margin:0 .25rem 0 .55rem;border-radius:99px;vertical-align:-.04rem}.sun-key:first-child{margin-left:0}.observed-key{background:#167262}.forecast-key{background:#ed991e}.sunlight-comparison{display:grid;gap:.55rem}.sun-compare-row{display:grid;grid-template-columns:4.7rem minmax(0,1fr);gap:.65rem;align-items:center;font-size:.82rem}.sun-compare-bars{display:grid;gap:.25rem}.sun-compare-bars>div{display:grid;grid-template-columns:minmax(0,1fr) 4.5rem;gap:.45rem;align-items:center}.sun-compare-bars i{display:block;width:var(--sun);height:.65rem;border-radius:999px}.sun-compare-bars .observed i{background:linear-gradient(90deg,#20866f,#0c587f)}.sun-compare-bars .forecast i{background:linear-gradient(90deg,#f7bd2d,#e77d1d)}.sun-compare-bars b{text-align:right;font-size:.74rem}.sun-compare-bars em{color:var(--muted);font-size:.75rem;font-style:normal}.sun-uv-table{display:grid;gap:.35rem}.sun-uv-table header,.sun-uv-row{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:.35rem;align-items:center;text-align:center}.sun-uv-table header{color:var(--muted);font-size:.75rem;font-weight:700}.sun-uv-row{padding:.45rem;border-radius:9px;background:var(--surface-soft);font-size:.85rem}.sun-uv-row b{padding:.2rem;border-radius:6px}.uv-low{color:#266b49}.uv-moderate{color:#935e00}.uv-high,.uv-very-high,.uv-extreme{color:#ae322b}.source-note{border-left:4px solid var(--blue);background:#edf7fc}@media(max-width:32rem){.sun-now-grid{grid-template-columns:1fr}.sun-row{grid-template-columns:4rem minmax(0,1fr) 4.1rem;gap:.45rem;font-size:.76rem}.sun-compare-row{grid-template-columns:3.6rem minmax(0,1fr);gap:.45rem;font-size:.76rem}.sun-compare-bars>div{grid-template-columns:minmax(0,1fr) 3.95rem;gap:.35rem}.sun-compare-bars b{font-size:.69rem}}

.solar-forecast-link{display:block;color:inherit;text-decoration:none;cursor:pointer}.solar-forecast-link:hover,.solar-forecast-link:focus-visible{box-shadow:0 0 0 3px #f4d581;outline:0}.solar-forecast-link span{display:block;margin-top:.65rem;color:#805000;font-size:.84rem;font-weight:750}

.sun-uv-graph{display:grid;gap:.45rem;padding:.8rem;border-radius:14px;background:var(--surface-soft)}.sun-uv-graph-row{display:grid;grid-template-columns:4.7rem 1fr 2rem;gap:.65rem;align-items:center;font-size:.84rem}.sun-uv-graph-row i{height:.8rem;border-radius:999px;background:linear-gradient(90deg,#19885f var(--uv),#d9e2ec var(--uv))}.sun-uv-graph-row i.uv-moderate{background:linear-gradient(90deg,#bd7a16 var(--uv),#d9e2ec var(--uv))}.sun-uv-graph-row i.uv-high,.sun-uv-graph-row i.uv-very-high,.sun-uv-graph-row i.uv-extreme{background:linear-gradient(90deg,#cb4035 var(--uv),#d9e2ec var(--uv))}.sun-uv-graph-row b{text-align:right}

.solar-forecast-link{border:0;width:100%;font:inherit;text-align:left}.solar-forecast-sheet{background:linear-gradient(180deg,#fffaf0 0,#fff 38%)}.sheet-return{margin-top:1rem;border:0;padding:0;background:transparent;cursor:pointer}

.satellite-sun-panel{margin:1rem 0;padding:1rem;border:1px solid #b9d7e8;border-left:5px solid #2782b6;border-radius:16px;background:linear-gradient(135deg,#edf8ff,#fff)}.satellite-sun-panel h2,.satellite-sun-panel p,.satellite-sun-panel small{margin:.2rem 0 .5rem}.satellite-sun-panel strong{display:block;font-size:2rem;color:#125b84}.satellite-sun-panel small{display:block;color:var(--muted)}.satellite-sun-panel.stale{border-left-color:#a77519;background:#fff9ec}.satellite-sun-panel.stale strong{color:#76520d}
.satellite-atmosphere-note{min-height:8.5rem;box-sizing:border-box}
.sentinel-atmosphere-panel{margin:1rem 0;padding:1rem;border:1px solid #9fcde6;border-radius:16px;background:#f3faff}.sentinel-atmosphere-panel h2,.sentinel-atmosphere-panel p{margin:.2rem 0 .55rem}.sentinel-product-tabs{display:flex;gap:.45rem;overflow-x:auto;margin:1rem -.2rem .75rem;padding:.15rem .2rem .45rem}.sentinel-product-tab{flex:0 0 auto;padding:.5rem .72rem;border:1px solid #9fcde6;border-radius:999px;color:#075985;background:#fff;font:inherit;font-size:.83rem;font-weight:750}.sentinel-product-tab.selected{border-color:#075985;color:#fff;background:#075985}.sentinel-product-tab:disabled{opacity:.45}.sentinel-image{margin:.3rem 0 .8rem;overflow:hidden;border:1px solid #b8d7e8;border-radius:12px;background:#e8f2f8}.sentinel-image img{display:block;width:100%;min-height:10rem;object-fit:cover;background:#e8f2f8}.sentinel-image figcaption{padding:.55rem .65rem;color:#486581;background:#fff;font-size:.78rem}.sentinel-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.45rem;margin:.75rem 0}.sentinel-metrics span{padding:.55rem;border-radius:9px;background:#fff;color:#334e68;font-size:.77rem}.sentinel-metrics b{display:block;margin-bottom:.2rem;color:#486581;font-size:.68rem}@media(max-width:32rem){.sentinel-metrics{grid-template-columns:1fr 1fr}.sentinel-metrics span:last-child{grid-column:span 2}}
.sentinel-water-panel{margin:1rem 0;padding:1rem;border:1px solid #98c8e4;border-radius:16px;background:#f1f9fd}.sentinel-water-panel h2,.sentinel-water-panel p{margin:.2rem 0 .55rem}.sentinel-water-panel .sentinel-image img{aspect-ratio:1.1;object-fit:cover;filter:contrast(1.08)}
.sentinel-map-figure{display:grid;background:#dce7ef}.sentinel-atmosphere-map{position:relative;grid-area:1/1;width:100%;aspect-ratio:4/3;background:#dce7ef}.sentinel-atmosphere-map .leaflet-container{position:absolute;inset:0;width:100%;height:100%;font:inherit}.sentinel-static-fallback{display:block;position:relative;grid-area:1/1;z-index:1;width:100%;aspect-ratio:4/3;overflow:hidden;background:#dce7ef}.sentinel-static-tiles{position:absolute;left:-1.1%;top:-24.5%;width:100.45%;height:160.1%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr))}.sentinel-static-tiles img{display:block;width:100%;height:100%;object-fit:cover}.sentinel-static-overlay{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;opacity:.52}.sentinel-atmosphere-map[data-map-ready="true"]+.sentinel-static-fallback{display:none}.sentinel-map-figure figcaption{grid-area:2/1}.sentinel-legend{display:inline-flex;align-items:center;gap:.3rem;margin-top:.35rem;white-space:nowrap;font-size:.7rem}.sentinel-legend i,.sentinel-legend b{display:inline-block;width:1.25rem;height:.55rem;border-radius:2px;background:#b4c5d0}.sentinel-legend b{background:#cf4a3b}@media(max-width:32rem){.sentinel-legend{white-space:normal}}
.space-study-area,.space-archive-status{margin:1rem 0;padding:1rem;border:1px solid var(--line);border-radius:16px;background:#fff}.space-study-area h2,.space-study-area p,.space-archive-status h2,.space-archive-status p{margin:.2rem 0 .55rem}.sentinel2-study-map{height:20rem;margin:.8rem 0;border:1px solid #b8d7e8;border-radius:12px;background:#e8f2f8;overflow:hidden}.sentinel2-study-map .leaflet-container{width:100%;height:100%;font:inherit}.space-placeholders{display:grid;gap:.55rem}.space-placeholders article{display:flex;justify-content:space-between;gap:1rem;padding:.75rem;border-radius:10px;background:#f3f7fa}.space-placeholders span{color:var(--muted);font-size:.85rem}
.provider-row strong small{display:block;color:var(--muted);font-size:.66rem;font-weight:650}.provider-row.provider-unavailable{color:var(--muted);background:#f6f8f9}.provider-row.provider-unavailable span:last-child{font-size:.7rem}

/* Optional research context is visually separate from the primary local outlook. */
.regional-outlook{margin:1rem 0;padding:1rem;border:1px solid #b9d7e8;border-radius:16px;background:linear-gradient(145deg,#edf8ff,#fff)}.regional-outlook h2,.regional-outlook p{margin:.2rem 0 .55rem}.regional-outlook>small{display:block;margin-top:.75rem;color:var(--muted);font-size:.76rem}.regional-pollutants{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem;margin:.85rem 0}.regional-pollutants article{padding:.65rem;border-radius:10px;background:#fff}.regional-pollutants span,.regional-pollutants small{display:block;color:var(--muted);font-size:.72rem}.regional-pollutants strong{display:block;margin:.15rem 0;font-size:1.3rem}.cams-hour-strip{display:flex;gap:.45rem;overflow-x:auto;margin:.8rem -.15rem;padding:.1rem .15rem .55rem}.cams-hour{display:grid;min-width:4.5rem;gap:.22rem;padding:.6rem;border:1px solid #b9d7e8;border-radius:12px;color:var(--ink);font:inherit;text-align:left;background:#fff}.cams-hour strong{font-size:.8rem}.cams-hour small{color:var(--muted);font-size:.68rem}.cams-hour.selected{border-color:var(--blue);background:#e6f4fb;box-shadow:0 0 0 2px #2689bd}.regional-outlook.unavailable{border-style:dashed;background:#f6f8f9}
.satellite-rainfall-map{margin:1rem 0;padding:1rem;border:1px solid #b9d7e8;border-radius:16px;background:#f5fbfe}.satellite-rainfall-map h2,.satellite-rainfall-map p{margin:.2rem 0 .6rem}.satellite-rainfall-map figure{margin:.75rem 0;overflow:hidden;border:1px solid #b9d7e8;border-radius:12px;background:#e8f1f5}.satellite-rainfall-map img{display:block;width:100%;min-height:10rem;object-fit:cover;background:#e8f1f5}.satellite-rainfall-map figcaption{padding:.6rem .7rem;color:var(--muted);font-size:.76rem;background:#fff}
.methods-principles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem;margin:1rem 0}.methods-principles article,.methods-group{padding:1rem;border:1px solid var(--line);border-radius:16px;background:#fff}.methods-principles h2,.methods-group h2,.methods-principles p,.methods-group>p{margin:.15rem 0 .55rem}.methods-principles p,.methods-group>p{color:var(--muted);font-size:.88rem}.methods-group{margin:1rem 0}.method-source{display:flex;gap:.7rem;padding:.8rem 0;border-top:1px solid var(--line)}.method-source:first-child{border-top:0}.method-source .source-dot{flex:0 0 .7rem;margin-top:.35rem}.method-source p,.method-source small{display:block;margin:.1rem 0;color:var(--muted);font-size:.82rem}.method-source small{font-size:.74rem}@media(max-width:40rem){.methods-principles{grid-template-columns:1fr}}

.lightning-zone-map{margin:.65rem 0}.lightning-zone-map img{display:block;width:100%;aspect-ratio:1.5;object-fit:contain;border:1px solid #c9dce7;border-radius:10px;background:#eff7fb}.lightning-zone-map figcaption{margin-top:.3rem;color:var(--muted);font-size:.76rem}
.space-latest,.space-compare{margin:1rem 0;padding:1rem;border:1px solid #9fcde6;border-radius:16px;background:#f3faff}.space-latest h2,.space-compare h2{margin:.2rem 0 .6rem}.sentinel2-layer-tabs{display:flex;gap:.45rem;overflow-x:auto;padding:.15rem 0 .65rem}.sentinel2-layer-tabs button,.space-placeholders button{border:1px solid #9fcde6;border-radius:999px;background:#fff;color:#075985;padding:.45rem .7rem;font:inherit;font-size:.82rem;font-weight:700;white-space:nowrap}.sentinel2-layer-tabs button.selected{background:#075985;color:#fff}.sentinel2-image,.space-compare figure{margin:.35rem 0 .75rem;overflow:hidden;border:1px solid #b8d7e8;border-radius:12px;background:#e8f2f8}.sentinel2-image img,.space-compare img{display:block;width:100%;aspect-ratio:4/3;object-fit:contain;background:#e8f2f8}.sentinel2-image figcaption,.space-compare figcaption{padding:.55rem .65rem;background:#fff;color:#486581;font-size:.78rem}.space-compare-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}.space-compare-grid figure{margin:0}.space-compare-grid img{aspect-ratio:1}@media(max-width:32rem){.space-compare-grid{grid-template-columns:1fr}.space-placeholders article{align-items:flex-start;flex-direction:column;gap:.4rem}}
.sentinel2-guide{margin:.7rem 0;padding:.7rem;border-radius:10px;background:#fff}.sentinel2-guide h3,.sentinel2-guide p{margin:.1rem 0 .45rem}.sentinel2-guide p{color:#486581;font-size:.84rem}.sentinel2-scale{display:grid;grid-template-columns:minmax(5rem,1fr) 7rem minmax(5rem,1fr);align-items:center;gap:.5rem;margin:.55rem 0}.sentinel2-scale span{font-size:.73rem;color:#486581}.sentinel2-scale span:last-child{text-align:right}.sentinel2-scale i{height:.65rem;border-radius:99px}.sentinel2-scale.ndvi i{background:linear-gradient(90deg,#7f3b08,#f7f7f7,#1b7837)}.sentinel2-scale.ndwi i{background:linear-gradient(90deg,#8c510a,#f6e8c3,#01665e)}


/* Dedicated Padma River archive: satellite scenes remain clearly separate from FFWC levels. */
.padma-scene-strip{display:flex;gap:.5rem;overflow-x:auto;margin:.8rem -.15rem;padding:.15rem .15rem .55rem;scroll-snap-type:x proximity}.padma-scene-strip button{display:grid;flex:0 0 6.2rem;gap:.18rem;padding:.62rem;border:1px solid #9fcde6;border-radius:11px;color:#28536d;text-align:left;font:inherit;background:#fff;scroll-snap-align:start;cursor:pointer}.padma-scene-strip button.selected{border:2px solid #075985;background:#e9f6fc;color:#064c72}.padma-scene-strip small{font-size:.68rem;color:#58728a}.padma-latest-image img{aspect-ratio:4/3;object-fit:contain;background:#e8f2f8}.padma-compare{margin:.8rem 0;padding:.8rem;border:1px solid #b8d7e8;border-radius:12px;background:#fff}.padma-compare h3,.padma-compare p{margin:.12rem 0 .45rem}.padma-compare p{color:#486581;font-size:.82rem}.padma-compare figure{margin:.5rem 0 0;overflow:hidden;border:1px solid #d2e2eb;border-radius:9px}.padma-compare img{display:block;width:100%;aspect-ratio:4/3;object-fit:contain;background:#e8f2f8}.padma-compare figcaption{padding:.5rem .6rem;color:#486581;font-size:.74rem}.padma-compare-picker{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;margin:.8rem 0;padding:.65rem;border-radius:10px;background:#e8f4f9;font-size:.8rem}.padma-compare-picker span{flex-basis:100%;color:#486581;font-weight:700}.padma-compare-picker button{border:1px solid #9fcde6;border-radius:999px;padding:.35rem .55rem;color:#075985;font:inherit;font-size:.75rem;background:#fff;cursor:pointer}

.sentinel-static-location{position:absolute;left:50.6%;top:54.3%;z-index:2;transform:translate(-50%,-50%);padding:.16rem .38rem;border:2px solid #075985;border-radius:999px;background:#fff;color:#063d60;font-size:.72rem;font-weight:800;box-shadow:0 1px 3px #0006}.sentinel-static-location::before{content:'';position:absolute;width:.52rem;height:.52rem;border-radius:50%;background:#e63946;border:2px solid #fff;left:50%;top:100%;transform:translate(-50%,.18rem)}.sentinel-legend em{font-style:normal;color:#51697d}

/* Sentinel-5P colours are a relative satellite-column scale, not an AQI scale. */
.sentinel-colour-guide{margin:.65rem .65rem .15rem;padding:.55rem .1rem 0;background:#fff}.sentinel-colour-ramp{height:.75rem;border:1px solid #9eb9c9;border-radius:999px}.sentinel-colour-labels{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.3rem;margin-top:.32rem;color:#486581;font-size:.68rem;line-height:1.2}.sentinel-colour-labels span:nth-child(2){text-align:center}.sentinel-colour-labels span:last-child{text-align:right}.sentinel-colour-guide p{margin:.48rem 0 .05rem;color:#486581;font-size:.72rem;line-height:1.35}

/* Primary user journeys: concise, predictable navigation and clear research hubs. */
.brand-purpose{display:block;max-width:34rem;margin-top:.12rem;color:var(--muted);font-size:.73rem;line-height:1.3}.home-purpose{max-width:68rem;margin:.85rem auto 1.1rem;padding:.7rem .85rem;border-radius:12px;background:#eef7fb;color:#486581;font-size:.83rem}.home-purpose a{color:#075985;font-weight:750}.local-context-heading{margin-top:1.35rem}.local-context-grid .card{grid-column:span 6}.explore-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem;margin:1rem 0}.explore-card{display:block;min-height:12.5rem;padding:1.1rem;border:1px solid #b9d7e8;border-radius:16px;color:var(--ink);text-decoration:none;background:linear-gradient(145deg,#f3fbff,#fff);box-shadow:0 2px 8px rgb(25 80 110 / .06)}.explore-card:nth-child(2){border-color:#abd5c7;background:linear-gradient(145deg,#effaf5,#fff)}.explore-card:nth-child(3){border-color:#d6c6ed;background:linear-gradient(145deg,#f7f3ff,#fff)}.explore-card:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgb(25 80 110 / .13)}.explore-card h2{margin:.4rem 0 .45rem;font-size:1.2rem}.explore-card p{margin:0;color:#486581;font-size:.88rem;line-height:1.45}.explore-card span{display:block;margin-top:1rem;color:#075985;font-size:.82rem;font-weight:800}.more-group{padding:1rem;border:1px solid var(--line);border-radius:16px;background:#fff;margin:1rem 0}.more-group h2{margin:.1rem 0 .25rem;font-size:1rem}.more-group>p{margin:.1rem 0 .65rem;color:#486581;font-size:.86rem}.more-group a{display:block;padding:.55rem 0;border-top:1px solid var(--line);color:#075985;text-decoration:none;font-size:.87rem;font-weight:750}.more-group a:first-of-type{border-top:0}.more-group a span{display:block;margin-top:.12rem;color:#486581;font-size:.76rem;font-weight:400}.more-group a:hover{text-decoration:underline}a:focus-visible,button:focus-visible{outline:3px solid #e29d16;outline-offset:3px}
@media(max-width:46rem){.brand-purpose{display:none}.primary-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.3rem;overflow:visible;padding:.45rem .6rem}.primary-nav a{min-width:0;padding:.46rem .25rem;text-align:center;font-size:.76rem}.home-purpose{margin:.65rem 0 1rem;font-size:.78rem}.local-context-grid .card{grid-column:span 12}.explore-grid{grid-template-columns:1fr}.explore-card{min-height:0;padding:1rem}.more-group{padding:.85rem}}