/* The forecast is one reading surface over the city sky. Dialogs and map
   controls keep their own surfaces. */
:root { --brand-blue:#2f6bff; --blue:var(--brand-blue); }
/* One brand accent for account, city selection and radar controls. */
html body :is(#cityDialog,#accountDialog,#sourcesDialog,#hourlyDetailDialog,#alertDetail) :is(button,input,select,summary,a):focus-visible { outline-color:var(--brand-blue); }
#cityDialog #locateCity,#accountDialog :is(#accountSubmit,#profileSave,#notificationPreferencesSave),#accountDialog .account-tabs button[aria-pressed=true] { background:var(--brand-blue); border-color:var(--brand-blue); color:var(--on-accent); }
#cityDialog .city-actions button:not(#locateCity),#accountDialog .notification-actions button { border-color:color-mix(in srgb,var(--brand-blue) 50%,transparent); }
#accountDialog #accountLogout { color:var(--brand-blue); border-color:color-mix(in srgb,var(--brand-blue) 50%,transparent); }
#cityDialog .city-result[data-current=true] { border-left-color:var(--brand-blue); }
#cityDialog .favorite-city-card[aria-current=true] { border-color:var(--brand-blue); }
#accountDialog .profile-avatar { background:var(--brand-blue); color:var(--on-accent); }
#accountDialog :is(.notification-types,.notification-location,.notification-quiet-toggle) input[type=checkbox] { accent-color:var(--brand-blue); }
#accountDialog .notification-status.is-on { color:var(--brand-blue); border-color:color-mix(in srgb,var(--brand-blue) 35%,transparent); background:color-mix(in srgb,var(--brand-blue) 8%,transparent); }
#accountDialog .notification-status.is-on::before { background:var(--brand-blue); }
#accountDialog :is(.notification-location-row,.notification-device) button { color:var(--brand-blue) !important; border-color:color-mix(in srgb,var(--brand-blue) 50%,transparent); }
#radarMapContent .weather-player button { color:var(--brand-blue); }
#radarMapContent .weather-player #weatherPlay { background:var(--brand-blue); border-color:var(--brand-blue); color:var(--on-accent); }
#radarMapContent .weather-player input { accent-color:var(--brand-blue); }
#radarMapContent .leaflet-control-attribution a { color:var(--brand-blue); }
/* Keep native scrolling; the browser controls the indicator's size and fade. */
@media (forced-colors:none) {
  html,.dialog-scroll,.rain-chart { scrollbar-color:var(--brand-blue) transparent; }
  @supports not (scrollbar-color:blue transparent) {
    html::-webkit-scrollbar,.dialog-scroll::-webkit-scrollbar,.rain-chart::-webkit-scrollbar { width:10px; height:10px; }
    html::-webkit-scrollbar-track,.dialog-scroll::-webkit-scrollbar-track,.rain-chart::-webkit-scrollbar-track { background:transparent; }
    html::-webkit-scrollbar-thumb,.dialog-scroll::-webkit-scrollbar-thumb,.rain-chart::-webkit-scrollbar-thumb { background:var(--brand-blue); border:2px solid transparent; border-radius:999px; background-clip:padding-box; }
    html::-webkit-scrollbar-corner,.dialog-scroll::-webkit-scrollbar-corner,.rain-chart::-webkit-scrollbar-corner { background:transparent; }
  }
}
@media (forced-colors:active) {
  html,.dialog-scroll,.rain-chart { scrollbar-color:auto; }
}
/* Browser page pinch remains available. Installed apps only pan the page;
   Leaflet handles map zoom independently. Neither mode zooms on double tap. */
body { touch-action:manipulation; }
html[data-pwa-no-zoom],html[data-pwa-no-zoom] body { touch-action:pan-x pan-y; }
/* Header actions share the sky, with native 44px touch targets. */
html body .topbar {
  position:relative;
  top:auto;
  max-width:860px;
  height:auto;
  min-height:64px;
  margin-top:calc(env(safe-area-inset-top) + 10px);
  padding:10px 0;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  grid-template-rows:auto;
  gap:0 10px;
  align-items:center;
  border:0;
  border-radius:0;
  background:transparent !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  animation:none;
  color:#f2f7ff;
}
body[data-ink="dark"] .topbar { color:#082744; }
.topbar::before,.topbar::after { display:none !important; }
.topbar .brand { grid-column:2; grid-row:1; justify-self:center; min-height:44px; gap:2px; color:var(--brand-blue); }
.topbar .brand .brand-mark { margin-left:0; visibility:visible; background-color:var(--brand-blue); }
.topbar .brand span:last-child,.topbar .account-trigger,.topbar .search-trigger { color:inherit !important; }
.topbar .brand span:last-child { font-family:var(--font-brand); }
.topbar .account-trigger {
  grid-column:1;
  grid-row:1;
  justify-self:start;
  min-width:44px;
  min-height:44px;
  max-width:100%;
  margin:0;
  padding:0;
  background:transparent;
  text-align:left;
}
.topbar .top-actions { grid-column:3; grid-row:1; justify-self:end; width:96px; }
.topbar .search-trigger {
  width:44px;
  height:44px;
  min-height:44px;
  padding:10px;
  justify-content:center;
  border:0;
  border-radius:0;
  background:transparent !important;
  box-shadow:none !important;
}
.topbar .search-trigger svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.topbar .share-trigger { color:inherit; flex:none; }
.topbar .share-trigger:disabled { opacity:.4; cursor:default; }
.topbar .share-weather-status { grid-column:1/-1; grid-row:2; color:inherit; }
@media(max-width:520px) {
  html body .topbar { column-gap:6px; }
  .topbar .brand .brand-mark { width:26px; height:32px; flex-basis:26px; }
  .topbar .brand span:last-child { font-size:1.1rem; }
}
.topbar :is(a,button):focus-visible { outline:2px solid currentColor; outline-offset:4px; }
@media(max-width:380px) {
  .topbar .brand .brand-mark { width:22px; height:28px; flex-basis:22px; }
  .topbar .brand span:last-child { font-size:.95rem; }
}
#weatherView {
  --reading-ink:#f2f7ff;
  --reading-muted:#cbdceb;
  --reading-line:#b8d4ef30;
  --reading-link:var(--brand-blue);
  --text:var(--reading-ink);
  --muted:var(--reading-muted);
  --canvas-text:var(--reading-ink);
  --canvas-muted:var(--reading-muted);
  --line:var(--reading-line);
  --blue:var(--reading-link);
  width:min(860px,100%);
  margin-inline:auto;
  color:var(--reading-ink);
}
body[data-ink="dark"] #weatherView {
  --reading-ink:#082744;
  --reading-muted:#173c58;
  --reading-line:#12345730;
}
/* Specific to the home so no old day/night card variant can repaint a box. */
#weatherView .panel {
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  color:var(--reading-ink);
  overflow:visible;
}
#weatherView .panel::before,#weatherView .panel::after { display:none !important; }
#weatherView :is(.metric,.source-card):is(:hover,:active) { transform:none; }
#weatherView :is(.intro,.weather-hero) { padding-inline:0; }
#weatherView .intro { padding-block:10px 0; }
/* Freshness remains announced without taking space in the visual header. */
#weatherView #dataStatus { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
#weatherView #dataStatus:not(.stale) .live-dot { animation:none; } /* invisível fora do estado antigo: o pulso repintava sem ninguém ver */
#weatherView #dataStatus.stale { position:static; width:auto; height:auto; margin:0 0 12px; overflow:visible; clip-path:none; white-space:normal; }
#weatherView .intro h1 { text-align:center; margin-top:16px; font-size:clamp(2.4rem,9vw,3.8rem); font-weight:600; }
#weatherView #cityDistance { text-align:center; color:var(--reading-muted); }
#weatherView .weather-hero { padding-block:12px 24px; }
#weatherView .weather-main { grid-template-columns:minmax(0,1fr); justify-items:center; gap:18px; text-align:center; }
#weatherView .wx-copy { display:flex; justify-content:center; width:100%; padding-inline:28px; }
#weatherView .temperature {
  position:relative;
  width:max-content;
  max-width:100%;
  justify-content:center;
  gap:.04em;
  font-size:clamp(6rem,27vw,9rem) !important;
  font-weight:300;
  letter-spacing:-.05em;
  line-height:1 !important;
  color:var(--reading-ink) !important;
}
/* Center the complete reading, including its degree, on the city's axis. */
#weatherView .temperature .deg {
  position:relative;
  inset-inline-start:auto;
  top:0;
  margin:0 !important;
  transform:none;
  font-size:1em; /* grau do tamanho do número, como no Apple Weather (pedido do usuário, 1.15) */
  letter-spacing:0;
  font-weight:inherit;
  color:inherit !important;
}
#weatherView .condition { width:100%; max-width:none; font-size:clamp(1.15rem,4.5vw,1.55rem) !important; font-weight:500; color:var(--reading-ink) !important; }
#weatherView :is(.hourly-peek,.quick-metrics,.metrics,.insight-card,.section-block,.sun-section) { margin:0; }
#weatherView :is(.hourly-peek,.insight-card,.section-block,.sun-section) { padding:28px 0; border-top:1px solid var(--reading-line) !important; }
#weatherView .section-heading { margin-bottom:18px; align-items:center; gap:16px; }
#weatherView .section-heading > div:first-child { min-width:0; }
#weatherView .section-heading > p { flex:0 1 48%; min-width:0; text-align:right; }
#weatherView :is(.section-heading h2,.hourly-peek-heading h2,.weather-map-copy h2,.insight-card h2) { color:var(--reading-ink); font-weight:600; }
/* Fixed-width digits keep changing readings aligned without a second UI font. */
#weatherView,#cityDialog,#hourlyDetailDialog,#alertDetail,#radarMapContent { font-variant-numeric:tabular-nums; }
#weatherView :is(.hourly-peek-item > strong,.quick-metric > strong,.hero-temperature-extreme strong,.metric > strong,.wind-reading > strong,.air-index b,.forecast-day > strong,.temp-range strong) { font-weight:600; }
#weatherView :is(.hourly-peek-heading a,.summary-link,.source-link,.source-content a) { color:var(--reading-link); }
#weatherView .hourly-peek-list { padding:4px 0; gap:8px; grid-auto-columns:minmax(72px,1fr); }
#weatherView .hourly-peek-item { min-height:145px; padding:10px 4px; border:0; border-bottom:2px solid transparent; border-radius:0; background:none; transform:none; }
#weatherView .hourly-peek-item > strong { margin-top:0; }
#weatherView .hourly-peek-item.is-now { border-bottom:2px solid var(--reading-link); background:none; }
#weatherView :is(.peek-time,.peek-rain,.peek-temp) { color:var(--reading-ink); }
#weatherView .hourly-peek-item.is-now .peek-time { color:var(--reading-link); }
#weatherView :is(.hero-temperature-extreme small,.quick-metric:first-child .metric-head > span:first-child) { font-size:.8rem; line-height:1.35; }
#weatherView .metrics { display:grid; grid-template-columns:minmax(0,1fr); gap:0; }
#weatherView .metrics .metric { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 20px; min-height:0; padding:20px 0; border-top:1px solid var(--reading-line) !important; }
#weatherView .metric-head { align-items:center; gap:8px; color:var(--reading-muted) !important; }
#weatherView .metric-head > span:first-child { color:var(--reading-muted); font-size:.8rem; letter-spacing:.045em; }
#weatherView .metric-head > [data-weather-icon-name] { width:24px; height:24px; flex:none; margin-right:auto; }
#weatherView .metric-head .metric-weather-icon { width:24px; height:24px; }
/* Reading tiles use line glyphs in the brand blue, the same stroke family as the section icons. */
#weatherView .metric-head > [data-weather-icon-style="line"] { color:var(--graphic-blue); opacity:1; }
#weatherView .metric-line-icon { display:block; width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
#weatherView .metrics .metric > strong,#weatherView .metrics .wind-reading { grid-column:2; grid-row:1; margin:0; }
#weatherView .metrics .metric > strong,#weatherView .metrics .wind-reading > strong { color:var(--reading-ink); font-size:1.65rem; line-height:1.1; }
#weatherView .metrics .metric strong sup { color:var(--reading-muted); font-size:.55em; font-weight:600; } /* %, hPa, km/h maiores e mais grossos (1.14.5) */
#weatherView .metrics .metric > small { grid-column:1/-1; margin:0; color:var(--reading-muted); font-size:.8rem; }
#weatherView .metrics .wind-reading { justify-content:flex-end; flex-wrap:nowrap; }
#weatherView .metrics .wind-reading > strong { display:block; flex:none; white-space:nowrap; }
#weatherView .metrics .wind-reading > strong sup { font-size:.55em; margin-left:4px; }
html body #weatherView .wind-compass { width:46px; height:46px; flex-basis:46px; }
#weatherView .compass-labels { fill:var(--reading-muted); }
#weatherView .compass-ring { stroke:var(--reading-line); }
body[data-ink="dark"] #weatherView .compass-tip { fill:#0757aa; stroke:#123457; }
#weatherView .uv-scale { grid-column:1/-1; margin:0; }
html body #weatherView .metrics .air-metric { display:flex; gap:16px; padding:28px 0; }
#weatherView .air-index b { color:var(--reading-ink); }
/* AQI de três dígitos não quebra o número em telas de 320px: a descrição cede a largura. */
#weatherView .air-index { flex-shrink:0; }
#weatherView .air-index b { white-space:nowrap; }
#weatherView .air-description { min-width:0; }
#weatherView :is(.air-index > span,.air-description small,.air-scale-labels,.air-source) { color:var(--reading-muted) !important; }
body[data-ink="dark"] #weatherView :is(.air-metric,.air-outlook b)[data-aqi-level="good"] { --aqi-accent:#096546; }
body[data-ink="dark"] #weatherView :is(.air-metric,.air-outlook b)[data-aqi-level="moderate"] { --aqi-accent:#725100; }
body[data-ink="dark"] #weatherView :is(.air-metric,.air-outlook b)[data-aqi-level="sensitive"] { --aqi-accent:#873a05; }
body[data-ink="dark"] #weatherView :is(.air-metric,.air-outlook b)[data-aqi-level="poor"] { --aqi-accent:#98283b; }
body[data-ink="dark"] #weatherView :is(.air-metric,.air-outlook b)[data-aqi-level="very-poor"] { --aqi-accent:#62398c; }
body[data-ink="dark"] #weatherView :is(.air-metric,.air-outlook b)[data-aqi-level="hazardous"] { --aqi-accent:#7a2653; }
#weatherView :is(.source-card,.weather-map-card) { padding:0; }
#weatherView .source-content { padding:20px 0; }
#weatherView .source-content p { color:var(--reading-muted); }
#weatherView .rain-phrase { padding:0; margin-bottom:16px; }
html body #weatherView .rain-chart { padding:28px 0 8px; margin:0; overflow-x:auto; }
#weatherView .weather-map-copy .eyebrow,#weatherView #weatherSourceNote { color:var(--reading-muted); }
#weatherView .weather-map-stage { border-radius:12px; background:var(--map-background); }
#weatherView .forecast-row { padding:20px 0; border-color:var(--reading-line); background:none; box-shadow:none; animation:none; }
#weatherView .forecast-row:hover { background:none; }
#weatherView .forecast-condition { color:var(--reading-ink); }
#weatherView .forecast-condition > span { min-width:0; }
#weatherView .temp-range { display:grid; grid-template-columns:4ch minmax(24px,1fr) 4ch; align-items:center; }
#weatherView .temp-range strong { white-space:nowrap; text-align:center; }
#weatherView .forecast-rain { align-items:center; flex-wrap:nowrap; }
#weatherView .forecast-rain > span:last-child { min-width:0; text-align:right; }
@media(min-width:721px) {
  #weatherView .forecast-row { grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) minmax(0,1.35fr) minmax(0,.9fr) minmax(0,1.15fr); gap:12px 16px; }
}
@media(min-width:721px) and (max-width:900px) {
  #weatherView .forecast-row { grid-template-columns:minmax(0,1.1fr) minmax(0,1.5fr) minmax(0,1.45fr) minmax(0,1fr); }
}
@media(min-width:721px) {
  /* Quatro colunas que ocupam a linha toda: a chuva encosta na borda direita e a nota de UV,
     quase sempre ausente, desce para baixo da condição em vez de reservar uma quinta coluna vazia. */
  #weatherView .forecast-list .forecast-row { grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) minmax(0,1.45fr) minmax(0,1fr); }
  #weatherView .forecast-list .forecast-row > .forecast-rain { justify-content:flex-end; }
  /* Larguras fixas em algarismos tabulares: as gotas ficam na mesma vertical em todos os dias. */
  #weatherView .forecast-list .forecast-rain-chance { min-width:4ch; text-align:right; }
  #weatherView .forecast-list .forecast-rain-volume { min-width:9ch; text-align:right; }
  #weatherView .forecast-list .forecast-row > .forecast-uv { display:block; grid-column:2 / -1; grid-row:2; text-align:left; color:var(--reading-muted); }
}
#weatherView .forecast-row.best-day .forecast-day > strong { color:var(--reading-link); }
#weatherView .sun-section { min-height:0; gap:22px; }
#weatherView .sun-section :is(.sun-copy p,.sun-times span,.sunshine-note,.moon-inline) { color:var(--reading-muted); }
#weatherView .sun-section .arc-line path { stroke:var(--reading-line); }
#weatherView :is(a,button,summary,[tabindex]):focus-visible { outline:2px solid var(--reading-link); outline-offset:4px; }
@media(max-width:720px) {
  #weatherView .intro { padding-top:10px; }
  #weatherView .intro h1 { margin-top:16px; }
  #weatherView :is(.hourly-peek,.insight-card,.section-block,.sun-section) { padding-block:24px; }
  #weatherView .forecast-row { gap:12px 16px; }
  #weatherView .section-heading { flex-direction:column; align-items:stretch; }
  #weatherView .insight-card { grid-template-columns:minmax(0,1fr) 44px; }
  
}

/* Reading colors follow the actual sky phase, even on a dark-mode device. */
#weatherView .temp-track { background:var(--reading-line); box-shadow:none; }
#weatherView .temp-track .temp-now { background:#f8fbff; border-color:var(--reading-link); box-shadow:0 0 0 1px #f8fbff; }
#weatherView .weather-map-legend { background:var(--map-surface); color:var(--map-ink); border-color:var(--map-line); }
#weatherView .weather-player { grid-template-columns:44px 48px 44px minmax(80px,1fr); gap:8px; }
#weatherView .weather-player button { display:grid; place-items:center; width:44px; height:44px; padding:0; border:1px solid var(--map-line); border-radius:50%; background:var(--map-surface); color:var(--map-link); }
#weatherView .weather-player #weatherPlay { width:48px; height:48px; background:var(--brand-blue); color:var(--on-accent); border-color:var(--brand-blue); box-shadow:0 3px 10px #12345724; }
#weatherView .weather-player button svg { display:block; width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
#weatherView .weather-player #weatherPlay .player-play { width:25px; height:25px; fill:currentColor; stroke-width:1.5; }
#weatherView .weather-player #weatherPlay .player-pause { stroke-width:3; }
#weatherView #weatherPlay[aria-pressed="false"] .player-pause,#weatherView #weatherPlay[aria-pressed="true"] .player-play { display:none; }

/* Stronger labels and graphics on the continuous sky, independent of device theme. */
#weatherView {
  --range-cool:#32b8ff; --range-warm:#ffd34a; --range-hot:#ff762f;
  --chart-rain-top:#22b8ff; --chart-rain-bottom:#2673ff;
  --chart-wind-top:#1bddda; --chart-wind-bottom:#138be1;
  --graphic-blue:var(--brand-blue);
}
#weatherView .section-icon { color:var(--graphic-blue); }
#weatherView .section-icon svg { stroke-width:2.2; }
#weatherView .source-badge.inmet { background:var(--brand-blue); color:var(--on-accent); border-color:var(--brand-blue); box-shadow:none; font-weight:700; }

#weatherView .source-state { font-weight:700; }
#weatherView .inmet-yellow,#alertDetail .inmet-yellow { --alert-color:#ffe178; --alert-accent:#f4c430; }
#weatherView .inmet-orange,#alertDetail .inmet-orange { --alert-color:#ffba75; --alert-accent:#ee861d; }
#weatherView .inmet-red,#alertDetail .inmet-red { --alert-color:#ffaba4; --alert-accent:#e1534b; }
#alertDetail .inmet-unknown { --alert-color:var(--dialog-muted); --alert-accent:var(--dialog-muted); }
body[data-ink="dark"] #weatherView .inmet-yellow { --alert-color:#594000; --alert-accent:#ffca24; }
body[data-ink="dark"] #weatherView .inmet-orange { --alert-color:#713800; --alert-accent:#ff881e; }
body[data-ink="dark"] #weatherView .inmet-red { --alert-color:#812029; --alert-accent:#f54857; }

/* Official notices have their own quiet surface and a clear reading order. */
html body #weatherView #inmetCard { min-height:0; }
#weatherView #inmetCard .source-head { flex-wrap:wrap; gap:10px 16px; }
#weatherView .inmet-alert { min-width:0; padding:20px; border:1px solid var(--reading-line); border-left:3px solid var(--alert-accent); border-radius:20px; background:linear-gradient(135deg,color-mix(in srgb,var(--alert-accent) 7%,transparent),color-mix(in srgb,var(--reading-ink) 3%,transparent)); }
#weatherView .inmet-alert + .inmet-alert { margin-top:14px; }
.inmet-alert-heading { display:grid; grid-template-columns:40px minmax(0,1fr); align-items:start; gap:14px; }
.inmet-alert-icon { display:grid; place-items:center; width:40px; height:40px; border:1px solid color-mix(in srgb,var(--alert-accent) 28%,transparent); border-radius:12px; background:color-mix(in srgb,var(--alert-accent) 10%,transparent); color:var(--alert-color); }
.inmet-alert-icon svg { width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.inmet-alert-title { min-width:0; }
.inmet-alert-status { display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px; margin-bottom:10px; }
#weatherView .inmet-alert .inmet-level { display:inline-flex; align-items:center; min-height:26px; max-width:100%; margin:0; padding:3px 9px; border:1px solid color-mix(in srgb,var(--alert-accent) 25%,transparent); border-radius:999px; background:color-mix(in srgb,var(--alert-accent) 8%,transparent); font-size:.75rem; line-height:1.4; }
.inmet-stage { color:var(--reading-muted); font-size:.75rem; line-height:1.4; }
#weatherView .inmet-alert h3 { margin:0; color:var(--reading-ink); font-size:1.25rem; line-height:1.3; letter-spacing:-.025em; }
.inmet-severity-note { display:block; margin-top:5px; color:var(--reading-muted); font-size:.8125rem; }
#weatherView .inmet-alert .inmet-alert-risk { margin:18px 0; font-size:.9375rem; line-height:1.65; }
.inmet-alert-meta { display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); gap:14px; margin:0; padding-top:16px; border-top:1px solid var(--reading-line); }
.inmet-alert-meta > div { min-width:0; }
.inmet-alert-meta dt { color:var(--reading-muted); font-size:.75rem; line-height:1.45; }
.inmet-alert-meta dd { margin:5px 0 0; color:var(--reading-ink); font-size:.8125rem; line-height:1.5; }
.inmet-alert-actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px 16px; margin-top:18px; }
#weatherView .inmet-alert .inmet-detail { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:44px; max-width:100%; margin:0; font:750 .8125rem/1.4 var(--font-ui); text-decoration:none; }
#weatherView .inmet-alert button.inmet-detail { padding:10px 14px; border:1px solid var(--brand-blue); border-radius:12px; background:var(--brand-blue); color:var(--on-accent); }
#weatherView .inmet-alert .inmet-official { padding:8px 0; }
#weatherView .inmet-alert .inmet-official:hover { text-decoration:underline; }
#weatherView .inmet-alert button.inmet-detail > span { font-size:1.25rem; line-height:1; }
.inmet-official svg,.inmet-official-link svg { flex:none; width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
#weatherView .inmet-alert[data-stage=stale] { border-left-color:var(--reading-muted); }
#weatherView .inmet-notice { padding:12px 16px; border:1px solid var(--reading-line); border-radius:14px; font-size:.875rem; }
@media(max-width:380px) { #weatherView .inmet-alert { padding:16px; } .inmet-alert-heading { gap:10px; } .inmet-alert-meta { grid-template-columns:minmax(0,1fr); } }

/* Details reuse the common modal's fixed heading and single scrolling body. */
#alertDetail .dialog-heading h2 { min-width:0; }
#alertDetail .inmet-detail-summary { display:flex; align-items:center; gap:14px; padding:16px; border:1px solid color-mix(in srgb,var(--alert-accent) 25%,var(--dialog-line)); border-radius:16px; background:color-mix(in srgb,var(--alert-accent) 8%,transparent); }
#alertDetail .inmet-alert-icon { flex:none; }
#alertDetail .inmet-level { margin:0; }
#alertDetail .inmet-detail-summary p { margin:4px 0 0; font-size:.8125rem; }
#alertDetail .inmet-detail-source { margin:16px 0 6px; font-size:.8125rem; }
#alertDetail .inmet-detail-validity { margin:0 0 20px; font-size:.9375rem; }
#alertDetail .inmet-detail-times { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:0 0 20px; }
#alertDetail .inmet-detail-times > div { min-width:0; padding:12px; border:1px solid var(--dialog-line); border-radius:12px; background:var(--dialog-surface); }
#alertDetail .inmet-detail-times > div:last-child { grid-column:1/-1; display:flex; align-items:baseline; flex-wrap:wrap; gap:8px; padding:4px 0; border:0; background:none; }
#alertDetail .inmet-detail-times dt { margin:0; color:var(--dialog-muted); font-size:.8125rem; font-weight:500; }
#alertDetail .inmet-detail-times dd { margin:5px 0 0; font-size:.9375rem; line-height:1.5; }
#alertDetail .inmet-detail-times > div:last-child dd { margin:0; font-size:.8125rem; }
#alertDetail .inmet-detail-sections { margin:0; }
#alertDetail .inmet-detail-sections > div { padding:16px 0; border-top:1px solid var(--dialog-line); }
#alertDetail .inmet-detail-sections dt { margin:0; font-size:.9375rem; }
#alertDetail .inmet-detail-sections dd { margin:8px 0 0; color:var(--dialog-muted); font-size:.9375rem; line-height:1.65; }
#alertDetail details summary { min-height:44px; cursor:pointer; font-size:.875rem; }
#alertDetail .inmet-official-link { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:44px; padding:10px 14px; margin-top:18px; border:1px solid color-mix(in srgb,var(--brand-blue) 40%,transparent); border-radius:12px; font-size:.875rem; text-decoration:none; }
#alertDetail .inmet-official-link:hover { text-decoration:underline; }
#alertDetail .inmet-detail-others { margin-top:22px; padding-top:16px; border-top:1px solid var(--dialog-line); }
#alertDetail .inmet-detail-others h3 { margin:0 0 10px; font-size:.9375rem; font-weight:600; }
#alertDetail .inmet-detail-other { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; column-gap:12px; width:100%; min-height:44px; margin:0 0 8px; padding:10px 14px; border:1px solid var(--dialog-line); border-left:4px solid var(--alert-accent,var(--dialog-line)); border-radius:12px; background:var(--dialog-surface); color:inherit; font:inherit; text-align:left; cursor:pointer; }
#alertDetail .inmet-detail-other strong { font-size:.9375rem; font-weight:600; }
#alertDetail .inmet-detail-other small { grid-column:1; color:var(--dialog-muted); font-size:.8125rem; }
#alertDetail .inmet-detail-other > span { grid-column:2; grid-row:1 / span 2; font-size:1.2rem; }
#weatherView .temp-track .temp-fill { background:linear-gradient(90deg,var(--range-cool),var(--range-warm),var(--range-hot)); }
#weatherView .rain-chart .wind-direction { color:var(--graphic-blue); }
#weatherView .sun-label :is(span,svg) { color:var(--graphic-blue); }
/* Darker daytime rain/storm skies need deeper ink than the clear-sky palette. */
body[data-ink="dark"]:is([data-weather="rain"],[data-weather="storm"]) #weatherView {
  --reading-ink:#041a2e; --reading-muted:#08243b;
}
body[data-ink="dark"]:is([data-weather="rain"],[data-weather="storm"]) #weatherView .inmet-yellow { --alert-color:#2f2100; }
body[data-ink="dark"]:is([data-weather="rain"],[data-weather="storm"]) #weatherView .inmet-orange { --alert-color:#3d1f00; }
body[data-ink="dark"]:is([data-weather="rain"],[data-weather="storm"]) #weatherView .inmet-red { --alert-color:#4b101b; }

/* A fine edge defines vivid graphics without darkening their fills. */
#weatherView .temp-track .temp-fill,
#weatherView .rain-chart :is(.rain-bar,.temp-bar,.wind-bar) { box-shadow:inset 0 0 0 1px #12345726; }

/* Keep the closing brand and its source link centered at every screen size. */
/* The footer owns the bottom safe area; keep it out of the content above it. */
.night-stage > main.shell { padding-bottom:0; }
footer.shell { max-width:860px; margin-top:0; flex-direction:column; align-items:center; justify-content:center; gap:20px; text-align:center; color:var(--intro-ink); }
footer.shell > .footer-brand { flex:none; width:100%; max-width:none; flex-direction:column; align-items:center; justify-content:center; gap:12px; }
footer.shell .footer-brand-copy { align-items:center; text-align:center; }
footer.shell .footer-brand-copy span { color:var(--intro-ink); }
footer.shell .footer-details { justify-items:center; gap:5px; text-align:center; }
footer.shell .footer-details .footer-link { justify-self:center; min-height:44px; color:var(--intro-ink); }
footer.shell .footer-brand-copy strong { font-family:var(--font-brand); color:var(--brand-blue); }
/* Links para as páginas das capitais: recolhidos no rodapé, na mesma tinta dos outros links. */
/* Mesmo espaço entre "Privacidade" e "Previsão nas capitais" que entre os dois primeiros links (gap 5px, não os 20px do rodapé). */
footer.shell .capital-links { margin-top:-15px; }
footer.shell .capital-links { display:block; width:100%; max-width:640px; padding:0; border:0; border-radius:0; background:none; box-shadow:none; color:var(--intro-ink); font-size:.85rem; line-height:1.5; }
footer.shell .capital-links summary { display:inline-flex; align-items:center; justify-content:center; min-height:44px; cursor:pointer; color:var(--intro-ink); font-size:.77rem; text-decoration:underline; text-underline-offset:3px; }
footer.shell .capital-links ul { display:flex; flex-wrap:wrap; justify-content:center; gap:0 14px; margin:4px 0 0; padding:0; list-style:none; }
footer.shell .capital-links a, footer.shell .capital-links a:hover { display:inline-flex; align-items:center; min-height:32px; padding:0; border-radius:0; background:none; box-shadow:none; transform:none; font-size:inherit; font-weight:400; color:var(--intro-ink); text-decoration:underline; text-decoration-color:color-mix(in srgb,currentColor 35%,transparent); text-underline-offset:3px; }
footer.shell .capital-links a[aria-current="page"] { font-weight:600; text-decoration:none; }
body[data-ink="dark"] footer.shell .capital-links :is(summary,a) { color:#193d60; }
#sourcesDialog :is(.sources-list b,a),#alertDetailBody a { color:var(--brand-blue); }
.weather-map-section,body[data-phase="night"] .weather-map-section { --map-link:var(--brand-blue); }

.hourly-decision { margin:0 0 18px; font-size:.95rem; font-weight:700; line-height:1.55; color:var(--reading-ink); }
#weatherView .hourly-peek-item { min-height:170px; }
/* The picker is one vertical column. Inherited flex wrapping sizes its entire
   column to the favorites' intrinsic width and clips buttons/results on phones. */
#cityDialog .city-picker { flex-wrap:nowrap; }
#cityDialog .city-actions { grid-template-columns:repeat(2,minmax(0,1fr)); }
.favorite-cities { min-width:0; }
.favorite-city-list { --favorite-card-width:clamp(150px,calc(50% - 5px),180px); display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x proximity; padding-block:4px; }
.favorite-city-card { flex:0 0 var(--favorite-card-width); min-height:112px; display:grid; justify-items:start; gap:5px; padding:14px; border:1px solid var(--reading-line,var(--dialog-line)); border-radius:16px; background:transparent; color:inherit; font:inherit; text-align:left; scroll-snap-align:start; cursor:pointer; }
.favorite-city-card[aria-current=true] { border-color:var(--reading-link,#6ba4ff); }
.favorite-city-card strong { font-size:1rem; }
.favorite-city-card small { color:var(--reading-muted,var(--dialog-muted)); font-size:.75rem; }
.favorite-city-card .favorite-reading { font-weight:800; font-size:1.2rem; }
.favorite-city-card .favorite-summary { font-size:.8rem; line-height:1.4; }
/* Shared content rows align readings even when a city name wraps. Older
   browsers retain the existing scrollable cards without clipping content. */
@supports(grid-template-rows:subgrid) {
  .favorite-city-list { display:grid; grid-auto-flow:column; grid-auto-columns:var(--favorite-card-width); grid-template-rows:repeat(8,auto); gap:5px 10px; }
  .favorite-city-card { grid-row:1/span 8; grid-template-rows:subgrid; align-items:start; }
  .favorite-city-card > strong { grid-row:1; }
  .favorite-reading { grid-row:2; }
  .favorite-city-card > .favorite-summary { grid-row:3; }
  .favorite-city-card > .favorite-feels-like { grid-row:4; }
  .favorite-range { grid-row:5; }
  .favorite-local-time { grid-row:6; }
  .favorite-alert { grid-row:7; }
  .favorite-updated { grid-row:8; }
}
#dialogFavoriteStatus { margin:8px 0 0; font-size:.8rem; color:var(--dialog-muted); }
#dialogFavoriteStatus:empty { display:none; }
#cityDialog .favorite-cities { margin-bottom:6px; }
#cityDialog .favorite-city-card { min-height:112px; border:1px solid var(--dialog-line); background:var(--dialog-surface); color:var(--dialog-text); padding:12px; }
#cityDialog .favorite-city-card small { color:var(--dialog-muted); }

/* Rain timing belongs to the hourly forecast, below its chart. */

#weatherView :is(.hourly-peek-item,.hour-column) { color:var(--reading-ink); font:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; }

#weatherView .hour-solar-event { display:block; max-width:100%; font-size:.7rem; line-height:1.4; color:var(--reading-link); white-space:normal; }

#weatherView .air-details { grid-column:1/-1; margin-top:12px; font-size:.8rem; line-height:1.5; color:var(--reading-muted); }
#weatherView .air-details summary { min-height:44px; display:list-item; align-content:center; cursor:pointer; font-weight:700; color:var(--reading-ink); }
#weatherView .air-details p { margin:10px 0; }
#weatherView .air-details dl { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
#weatherView .air-details dd { margin:4px 0 0; font-weight:700; color:var(--reading-ink); }
.share-weather-status { margin:0; font-size:.8rem; }
.share-weather-status:empty { display:none; }
#shareWeatherText { box-sizing:border-box; width:100%; margin-top:8px; min-height:160px; padding:12px; border:1px solid var(--dialog-line); border-radius:12px; background:var(--dialog-surface); color:var(--dialog-text); font:inherit; font-size:16px; }
.moon-inline #moonIllumination { display:block; margin-top:6px; font-size:.75rem; }

#hourlyDetailDialog .dialog-heading > div { min-width:0; }
#hourlyDetailDialog #hourlyDetailCity { margin:6px 0 0; font-size:.875rem; }
.hourly-detail-weather { display:grid; grid-template-columns:72px auto; align-items:center; justify-content:center; gap:8px 18px; text-align:center; }
#hourlyDetailIcon { grid-row:1/3; width:72px; height:72px; display:grid; place-items:center; }
#hourlyDetailIcon .weather-icon { display:block; width:72px; height:72px; }
#hourlyDetailTemperature { font-size:3.75rem; font-weight:900; line-height:1.1; }
#hourlyDetailDialog #hourlyDetailCondition { margin:0; font-size:1rem; }
.hourly-detail-readings { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 20px; margin:24px 0 16px; }
.hourly-detail-readings > div { min-width:0; padding:16px 0; border-top:1px solid var(--dialog-line); }
.hourly-detail-readings dt { color:var(--dialog-muted); font-size:.875rem; line-height:1.4; }
.hourly-detail-readings dd { margin:6px 0 0; font-size:1.15rem; font-weight:800; }
@supports(grid-template-rows:subgrid) {
  .hourly-detail-readings > div { display:grid; grid-row:span 2; grid-template-rows:subgrid; align-items:start; }
}
#hourlyDetailDialog .hourly-detail-note { margin:0 0 12px; font-size:.875rem; }
#hourlyDetailSource { color:var(--dialog-muted); font-size:.8rem; line-height:1.5; }
.hourly-detail-navigation { flex:none; display:flex; justify-content:space-between; gap:12px; padding:16px 24px; border-top:1px solid var(--dialog-line); }
.hourly-detail-navigation button { background:var(--dialog-surface); color:var(--dialog-text); border:1px solid var(--dialog-line); font:inherit; }
.hourly-detail-navigation button:disabled { opacity:.4; cursor:default; }

#accountDialog :is(.notification-types,.notification-city-choices) { min-width:0; margin:4px 0; padding:0; border:0; }
#accountDialog :is(.notification-types,.notification-city-choices) legend { padding:0; margin-bottom:10px; color:var(--dialog-text); font-size:1rem; font-weight:800; }
#accountDialog .notification-types label:not(.notification-summary-time) { display:flex; align-items:flex-start; gap:12px; min-height:48px; padding:12px 0; border-bottom:1px solid var(--dialog-line); font-size:.9375rem; line-height:1.45; color:var(--dialog-text); cursor:pointer; }
#accountDialog .notification-types input[type=checkbox] { flex:none; width:20px; height:20px; margin:1px 0 0; accent-color:var(--brand-blue); }
#accountDialog .notification-types label > span { min-width:0; }
#accountDialog .notification-types label small { display:block; margin-top:3px; font-size:.8rem; }
#accountDialog .notification-city-choices .notification-location { margin:10px 0; cursor:pointer; }
#accountDialog .notification-city-choices .notification-location:has(input:disabled) { opacity:.7; cursor:default; }
#accountDialog form .notification-summary-time { display:grid; padding:14px 0; }
@media(max-width:430px) {
  .hourly-detail-readings { gap:0 14px; }
  .hourly-detail-readings dd { font-size:1.05rem; }
  .hourly-detail-navigation { padding:14px 20px; }
}

/* Social login belongs to the existing account dialog. */
#accountDialog .account-social { display:grid; gap:10px; margin:0 0 18px; }
#accountDialog .account-social[hidden],#accountDialog .account-provider[hidden] { display:none; }
#accountDialog .account-provider { display:flex; align-items:center; justify-content:center; gap:12px; width:100%; min-height:44px; }
#accountDialog .account-provider-icon { flex:none; width:20px; height:20px; }
#accountDialog #accountGoogle { background:#fff; color:#1f1f1f; border-color:#747775; font-family:Arial,sans-serif; font-weight:500; }
#accountDialog #accountApple { background:#000; color:#fff; border-color:#747775; }
#accountDialog .account-provider:focus-visible { outline:2px solid var(--blue); outline-offset:3px; }
#accountDialog .account-email-separator { text-align:center; font-size:.8rem; color:var(--dialog-muted,var(--muted)); }

/* Painéis entram de cima e saem para baixo; somente transform/opacity. */
@media (prefers-reduced-motion:no-preference) {
  html body :is(#cityDialog,#accountDialog,#sourcesDialog,#hourlyDetailDialog,#dailyDetailDialog,#shareWeatherDialog,#brazilDialog,#monthDialog,#homeLayoutDialog,#changelogDialog,#whatsNewDialog,#alertDetail,#radarDialog,#installPushDialog)[open] { animation:pluvia-dialog-enter .4s cubic-bezier(.22,1,.36,1); }
  html body :is(#cityDialog,#accountDialog,#sourcesDialog,#hourlyDetailDialog,#dailyDetailDialog,#shareWeatherDialog,#brazilDialog,#monthDialog,#homeLayoutDialog,#changelogDialog,#whatsNewDialog,#alertDetail,#radarDialog,#installPushDialog)[open]::backdrop { animation:pluvia-backdrop-enter .28s ease-out; }
  html body :is(#cityDialog,#accountDialog,#sourcesDialog,#hourlyDetailDialog,#dailyDetailDialog,#shareWeatherDialog,#brazilDialog,#monthDialog,#homeLayoutDialog,#changelogDialog,#whatsNewDialog,#alertDetail,#radarDialog,#installPushDialog)[open].pluvia-dialog-closing { animation:pluvia-dialog-exit .28s cubic-bezier(.4,0,1,1) forwards; }
  html body :is(#cityDialog,#accountDialog,#sourcesDialog,#hourlyDetailDialog,#dailyDetailDialog,#shareWeatherDialog,#brazilDialog,#monthDialog,#homeLayoutDialog,#changelogDialog,#whatsNewDialog,#alertDetail,#radarDialog,#installPushDialog)[open].pluvia-dialog-closing::backdrop { animation:pluvia-backdrop-exit .28s ease-in forwards; }
  @keyframes pluvia-dialog-enter { from { opacity:0; transform:translateY(-100dvh); } to { opacity:1; transform:translateY(0); } }
  @keyframes pluvia-dialog-exit { from { opacity:var(--pluvia-exit-opacity,1); transform:var(--pluvia-exit-from,none); } to { opacity:0; transform:translateY(var(--pluvia-exit-distance,100dvh)); } }
  @keyframes pluvia-backdrop-enter { from { opacity:0; } to { opacity:1; } }
  @keyframes pluvia-backdrop-exit { from { opacity:1; } to { opacity:0; } }
}
@media (prefers-reduced-motion:reduce) { html body :is(#cityDialog,#accountDialog,#sourcesDialog,#hourlyDetailDialog,#dailyDetailDialog,#shareWeatherDialog,#brazilDialog,#monthDialog,#homeLayoutDialog,#changelogDialog,#whatsNewDialog,#alertDetail,#radarDialog,#installPushDialog)[open],html body :is(#cityDialog,#accountDialog,#sourcesDialog,#hourlyDetailDialog,#dailyDetailDialog,#shareWeatherDialog,#brazilDialog,#monthDialog,#homeLayoutDialog,#changelogDialog,#whatsNewDialog,#alertDetail,#radarDialog,#installPushDialog)[open]::backdrop { animation:none !important; } }
/* <details> abrem/fecham pela altura (dialog-motion.js): só layout, sem transform/opacity. */
details > .details-motion { display:grid; grid-template-rows:1fr; transition:grid-template-rows .34s cubic-bezier(.22,1,.36,1); }
details > .details-motion[data-collapsed] { grid-template-rows:0fr; }
details > .details-motion > .details-motion-inner { min-width:0; min-height:0; }
details > .details-motion[data-moving] > .details-motion-inner { overflow:hidden; }
@media (prefers-reduced-motion:reduce) { details > .details-motion { transition:none; } }
#accountDialog :is(#accountRecoveryForm,#accountDeleteForm) { display:grid; gap:14px; }
#accountDialog :is(#accountRecoveryForm,#accountDeleteForm)[hidden] { display:none; }
#accountDialog .account-text-action { background:transparent; color:var(--dialog-muted); text-decoration:underline; text-underline-offset:3px; }
.account-delete { margin-top:24px; padding-top:16px; border-top:1px solid var(--dialog-line); }
.account-delete summary { cursor:pointer; min-height:44px; display:flex; align-items:center; }
#accountDialog #accountDelete { border:1px solid #fa948e88; background:#8d322b33; color:#ffd0cc; }
#cityDialog .favorite-alert { color:var(--dialog-muted); line-height:1.5; }
#cityDialog .favorite-alert[data-severity="yellow"] { color:#f5d885; }
#cityDialog .favorite-alert[data-severity="orange"] { color:#ffb87b; }
#cityDialog .favorite-alert[data-severity="red"] { color:#ffada5; }

/* Chance e volume são grandezas separadas, inclusive quando o volume falta. */

/* Recentralizar no município, como o botão de localização dos apps de mapa. */
#radarMapContent .weather-map-recenter { position:absolute; z-index:500; top:12px; right:12px; display:grid; place-items:center; width:44px; height:44px; padding:0; border:1px solid var(--map-line); border-radius:50%; background:var(--map-surface); color:var(--map-link); box-shadow:0 6px 18px #10234033; cursor:pointer; }
#radarMapContent .weather-map-recenter[hidden] { display:none; }
#radarMapContent .weather-map-recenter svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
#radarMapContent .weather-map-recenter .recenter-dot { fill:none; }
#radarMapContent .weather-map-recenter[data-centered="true"] .recenter-dot { fill:currentColor; }
#radarMapContent .weather-map-recenter[aria-busy="true"] { opacity:.6; cursor:progress; }
/* "Você está aqui": ponto azul com borda branca, distinto do marcador do município (menor, sem halo). */
.pluvia-user-dot { display:grid; place-items:center; }
.pluvia-user-dot span { width:16px; height:16px; border:3px solid #fff; border-radius:50%; background:var(--brand-blue,var(--brand-blue)); box-shadow:0 0 0 1px #10234033,0 2px 8px #10234066; }
#radarMapContent .weather-map-recenter:focus-visible { outline:2px solid var(--brand-blue); outline-offset:3px; }
#radarMapContent .weather-map-error { right:68px; }
#radarMapContent .weather-map-legend:empty { display:none; }
/* Explicit grid shrinkage keeps map controls inside narrow Safari viewports. */
#weatherView .weather-map-card { grid-template-columns:minmax(0,1fr); }
#radarMapContent { min-width:0; max-width:100%; }
#radarMapContent .weather-player input { min-width:0; box-sizing:border-box; margin:0; }

/* Compact planning and astronomy use the existing reading palette. */

#weatherView .astronomy-details { grid-column:1/-1; min-width:0; width:100%; padding-top:16px; border-top:1px solid var(--reading-line); color:var(--reading-muted); }
#weatherView .astronomy-details summary { min-height:44px; padding:8px 0; cursor:pointer; color:var(--reading-ink); font-weight:700; }
#weatherView .astronomy-details dl { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin:18px 0; }
#weatherView .astronomy-details :is(p,small,dt) { font-size:.8125rem; line-height:1.6; }
#weatherView .astronomy-details dd { margin:5px 0 0; font-size:1.1rem; color:var(--reading-ink); }
#accountDialog .notification-timing { display:block; min-width:0; margin:18px 0; padding:18px 0; border:0; border-block:1px solid var(--dialog-line); }
#accountDialog .notification-timing legend { color:var(--dialog-text); font-size:1rem; font-weight:800; }
#accountDialog .notification-timing > label { margin:16px 0 8px; }
#accountDialog form .notification-quiet-toggle { display:flex; align-items:center; gap:12px; min-height:48px; color:var(--dialog-text); cursor:pointer; }
#accountDialog .notification-quiet-toggle input { flex:none; width:20px; height:20px; accent-color:var(--brand-blue); }
#accountDialog .notification-time-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
#accountDialog .notification-time-pair[hidden] { display:none; }
#accountDialog .notification-timing label:not(.notification-quiet-toggle) { display:grid!important; grid-template-columns:minmax(0,1fr); gap:8px; }
#accountDialog .notification-time-pair input { width:100%!important; min-width:0; }
#accountDialog select:focus-visible { outline:2px solid var(--brand-blue); outline-offset:3px; }

/* Daily detail shares the existing hourly readings and native modal. */
#weatherView button.forecast-row { width:100%; border-radius:0; border-inline:0; border-block-end:0; font:inherit; color:var(--reading-ink); text-align:left; cursor:pointer; }
#dailyDetailDialog { font-variant-numeric:tabular-nums; }
#dailyDetailDialog .dialog-heading > div { min-width:0; }
#dailyDetailTitle { }
#dailyDetailCity { margin:6px 0 0; font-size:.875rem; }
#dailyDetailSource { display:block; margin-top:18px; color:var(--dialog-muted); font-size:.8rem; line-height:1.5; }
#dailyDetailDialog .hourly-detail-note { font-size:.875rem; }
.daily-detail-hours { display:flex; gap:10px; overflow-x:auto; padding:4px 2px 12px; scroll-snap-type:x proximity; }
.daily-hour { display:grid; align-content:start; justify-items:center; gap:8px; flex:0 0 112px; min-height:180px; padding:12px 8px; scroll-snap-align:start; background:var(--dialog-surface); color:var(--dialog-text); border:1px solid var(--dialog-line); border-radius:14px; font:inherit; }
.daily-hour > span:nth-child(2),.daily-hour .weather-icon { width:40px; height:40px; }
.daily-hour > strong { font-size:1.4rem; }
.daily-hour > small { color:var(--dialog-muted); font-size:.75rem; }
#dailyDetailDialog :is(button,[tabindex]):focus-visible { outline:2px solid var(--brand-blue); outline-offset:2px; }
/* Keep loading feedback stable while a new image is prepared offscreen. */
#radarMapContent .weather-frame-status { min-height:2.8em; margin:12px 0 0; color:var(--reading-muted); font-size:.8rem; line-height:1.4; }
#radarMapContent .weather-map-retry { min-height:44px; margin-top:8px; padding:8px 16px; background:var(--brand-blue); color:var(--on-accent); border:1px solid var(--brand-blue); border-radius:12px; font:inherit; }
#radarMapContent .weather-map-retry[hidden] { display:none; }
body[data-ink="dark"]:is([data-weather="rain"],[data-weather="storm"]) .topbar { color:#041a2e; }
body[data-ink="dark"]:is([data-weather="rain"],[data-weather="storm"]) #weatherView .intro h1 { color:var(--reading-ink); }

.radar-dialog #radarMapContent .weather-frame-status { color:var(--map-ink); }

/* ===== Home compacta (outubro/2026) =====
   Avisos logo abaixo do topo, leituras em grade, 7 dias em uma linha por dia
   e gráfico por hora recolhido. Só layout: cores continuam nos tokens de leitura. */

/* Títulos de seção com um estilo só. */
#weatherView :is(.section-heading h2,.hourly-peek-heading h2) { font-size:1.3rem; line-height:1.2; letter-spacing:-.02em; font-weight:600; }
#weatherView .section-heading > div:first-child { gap:10px; }
#weatherView .section-icon { flex-basis:22px; }
#weatherView .section-icon svg { width:22px; height:22px; }
#weatherView .hourly-decision { margin:0 0 10px; font-size:.8rem; font-weight:400; line-height:1.45; color:var(--reading-muted); }

/* Avisos: sem aviso confirmado, uma linha discreta; com aviso, o card completo no mesmo lugar. */
#weatherView .alerts-section { padding-block:14px; }
#weatherView .alerts-section:is([data-alert-state="clear"],[data-alert-state="loading"]) .section-heading {
  position:absolute; width:1px; height:1px; margin:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}
#weatherView .alerts-section:is([data-alert-state="clear"],[data-alert-state="loading"]) #inmetCard {
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:2px 12px;
}
#weatherView .alerts-section:is([data-alert-state="clear"],[data-alert-state="loading"]) #inmetCard .source-head { grid-column:1; grid-row:1 / span 2; gap:8px; }
#weatherView .alerts-section:is([data-alert-state="clear"],[data-alert-state="loading"]) #inmetContent { grid-column:2; grid-row:1; padding:0; }
#weatherView .alerts-section:is([data-alert-state="clear"],[data-alert-state="loading"]) #inmetContent h3 { margin:0; font-size:.9rem; font-weight:600; line-height:1.35; }
#weatherView .alerts-section:is([data-alert-state="clear"],[data-alert-state="loading"]) #inmetContent p { display:none; }
#weatherView .alerts-section:is([data-alert-state="clear"],[data-alert-state="loading"]) #inmetUpdated { grid-column:2; grid-row:2; margin:0; font-size:.75rem; }
#weatherView .alerts-section:is([data-alert-state="clear"],[data-alert-state="loading"]) .source-link { grid-column:3; grid-row:1 / span 2; align-self:center; margin:0; font-size:.8rem; white-space:nowrap; }
#weatherView .alerts-section[data-alert-state="clear"] #inmetState { display:none; }
/* Reserves the one-line reading that replaces the empty loading content (no shift on arrival). */
#weatherView .alerts-section[data-alert-state="loading"] #inmetContent:empty { min-height:calc(.9rem * 1.35); }
#weatherView .alerts-section #inmetContent h3 { overflow-wrap:normal; hyphens:manual; }
@media(max-width:420px) {
  /* Telas estreitas: o link oficial desce para a linha da leitura, sem espremer a frase. */
  #weatherView .alerts-section:is([data-alert-state="clear"],[data-alert-state="loading"]) #inmetCard { grid-template-columns:auto minmax(0,1fr); }
  #weatherView .alerts-section:is([data-alert-state="clear"],[data-alert-state="loading"]) #inmetCard .source-head { grid-row:1 / span 3; align-self:start; }
  #weatherView .alerts-section:is([data-alert-state="clear"],[data-alert-state="loading"]) .source-link { grid-column:2; grid-row:3; justify-self:start; min-height:0; }
}

/* Leituras em grade: tiles da mesma fileira compartilham as linhas de rótulo, valor e nota. */
#weatherView .metrics { grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:20px; row-gap:0; }
#weatherView .metrics .metric-sky { grid-row:span 4; grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto auto auto; align-content:start; gap:0; padding:18px 0; }
@supports (grid-template-rows:subgrid) {
  #weatherView .metrics .metric-sky { grid-template-rows:subgrid; }
}
#weatherView .metrics .metric-sky > .metric-head { grid-column:1; grid-row:1; min-width:0; }
#weatherView .metrics .metric-sky > .metric-head > span:first-child { min-width:0; }
#weatherView .metrics .metric-sky > strong,
#weatherView .metrics .metric-sky > .wind-reading { grid-column:1; grid-row:2; justify-self:start; align-self:center; margin-top:10px; }
#weatherView .metrics .metric-sky > .wind-reading { justify-content:flex-start; gap:10px; }
#weatherView .metrics .metric-sky > small { grid-column:1; grid-row:3; margin-top:6px; white-space:normal; overflow:visible; text-overflow:clip; }
#weatherView .metrics .metric-sky > .visibility-badge { grid-column:1; grid-row:4; justify-self:start; margin-top:8px; }
#weatherView .metrics :is(.uv-metric,.air-metric,.station-metric) { grid-column:1 / -1; }
#weatherView .metrics .station-metric[hidden] { display:none; }
@media(min-width:721px) {
  #weatherView .metrics { grid-template-columns:repeat(4,minmax(0,1fr)); column-gap:24px; }
}

/* Gráfico por hora recolhido: a faixa "Próximas horas" já mostra a mesma leitura resumida. */

/* 7 dias: uma linha por dia; a frase só aparece quando acrescenta algo. */
#weatherView .forecast-row { padding-block:14px; }
#weatherView .forecast-day .weekend-note { display:none; }
#weatherView .forecast-rain-values { display:flex; gap:.35em; white-space:nowrap; }
#weatherView .forecast-rain-volume::before { content:"· "; }
@media(max-width:720px) {
  /* Chuva com largura fixa (não auto): cada linha é uma grade própria, e uma coluna automática deslocava ícone e números quando o volume tinha mais dígitos. */
  #weatherView .forecast-list .forecast-row { grid-template-columns:minmax(0,1fr) 32px 4rem minmax(0,1.5fr); gap:4px 10px; padding:12px 0; align-items:center; }
  #weatherView .forecast-list .forecast-row > .forecast-day { grid-column:1; grid-row:1; }
  #weatherView .forecast-list .forecast-row > .forecast-condition { grid-column:2; grid-row:1; position:relative; gap:0; }
  #weatherView .forecast-list .forecast-row > .forecast-condition > span { position:absolute; inset:0 auto auto 0; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  #weatherView .forecast-list .forecast-weather-icon { width:32px; height:32px; }
  #weatherView .forecast-list .forecast-row > .forecast-rain { grid-column:3; grid-row:1; justify-content:flex-start; gap:0; }
  #weatherView .forecast-list .forecast-rain > span:first-child { display:none; }
  #weatherView .forecast-rain-values { display:grid; justify-items:end; gap:0; width:100%; line-height:1.25; text-align:right; }
  #weatherView .forecast-rain-volume { color:var(--reading-muted); font-size:.7rem; }
  #weatherView .forecast-rain-volume::before { content:none; }
  #weatherView .forecast-list .forecast-row > .temp-range { grid-column:4; grid-row:1; width:auto; }
  #weatherView .forecast-list .forecast-row > .forecast-uv { grid-column:1 / -1; grid-row:2; color:var(--reading-muted); }
  #weatherView .forecast-day > strong { font-size:.95rem; }
  #weatherView .forecast-day > span { font-size:.72rem; }
}

/* Radar: até o mapa montar, um aviso no lugar da caixa vazia. */
#weatherView #weatherMap:empty::after { content:"Carregando mapa…"; display:grid; place-items:center; height:100%; color:var(--reading-muted); font-size:.85rem; }
@media(prefers-reduced-motion:reduce) {
  #weatherView .hourly-chart-details > summary::after { transition:none; }
}

/* Lua no arco do ciclo do dia: reutiliza o disco/fase de moon-view; posição definida em renderSun. */
#weatherView .sun-arc .moon-dot { position:absolute; width:52px; height:52px; transform:translate(-50%,-50%); filter:drop-shadow(0 0 10px rgba(196,216,255,.35)); pointer-events:none; }
#weatherView .sun-arc .moon-dot[hidden] { display:none; }
#weatherView .sun-arc .moon-dot svg { display:block; width:100%; height:100%; overflow:visible; }

/* Skeleton loading: placeholder bars in the reading ink (dark by day, light at night and on
   dark rain skies), with a light sweep that moves only by transform. Values replace them on
   the first render; reduced motion keeps the bars still. */
#weatherView .sk { position:relative; display:inline-block; overflow:hidden; vertical-align:middle; border-radius:8px; background:color-mix(in srgb,var(--reading-ink) 13%,transparent); }
#weatherView .sk::after { content:""; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--reading-ink) 16%,transparent),transparent); animation:pluvia-skeleton 1.4s ease-in-out infinite; }
#weatherView .sk-temp { width:2.1ch; height:.72em; border-radius:18px; }
#weatherView .sk-num { width:3.2ch; height:.85em; }
#weatherView .sk-wide { width:5ch; }
#weatherView .sk-line { width:min(11rem,90%); height:.8em; border-radius:6px; }
#weatherView .sk-short { width:3.5rem; }
#weatherView .sk-icon { width:30px; height:30px; border-radius:50%; }
#weatherView .sk-bar { width:min(9rem,45%); height:.6em; border-radius:6px; }
/* Same box and rows as the real hourly item, so the first render does not resize the list. */
#weatherView .sk-peek { cursor:default; }
#weatherView .sk-peek .sk-short { width:2.6rem; }
#weatherView .sk-row { display:grid; grid-template-columns:minmax(0,5rem) 30px minmax(0,1fr); align-items:center; justify-items:start; gap:14px; min-height:52px; padding:0 4px; border-bottom:1px solid var(--reading-line); }
#weatherView .sk-row .sk-bar { justify-self:end; }
#weatherView.initial-loading :is(.temperature,.current-bottom strong,.metric strong) { animation:none; }
/* Sem o número, o grau sai do layout: invisível ele ainda ocupava espaço e o esqueleto ficava à
   esquerda do eixo da cidade. Com o número, o conjunto número + grau volta a ser centralizado. */
#weatherView.initial-loading .temperature .deg { display:none; }
@keyframes pluvia-skeleton { to { transform:translateX(100%); } }
@media (prefers-reduced-motion:reduce) { #weatherView .sk::after { animation:none; display:none; } }

/* "Vai chover?": uma linha logo abaixo da condição, na tinta de leitura. */
#weatherView .rain-answer { margin:8px auto 0; max-width:32rem; color:var(--reading-ink); font-size:1rem; font-weight:500; line-height:1.4; text-align:center; text-wrap:balance; }
#weatherView .rain-answer[data-tone="loading"] .sk-line { width:min(15rem,80%); }

/* Medidor visual de intensidade de chuva */
#weatherView .rain-gauge { margin:8px auto 2px; width:min(18rem,85%); display:flex; flex-direction:column; align-items:center; gap:5px; }
#weatherView .rain-gauge[hidden] { display:none !important; }
#weatherView .rain-gauge-track { width:100%; height:5px; border-radius:999px; background:rgba(255,255,255,.18); overflow:hidden; position:relative; }
body[data-ink="dark"] #weatherView .rain-gauge-track { background:rgba(0,0,0,.12); }
#weatherView .rain-gauge-fill { height:100%; width:0%; border-radius:999px; background:linear-gradient(90deg,#5ea4ff,var(--brand-blue,var(--brand-blue))); transition:width .9s cubic-bezier(.22,1,.36,1) .25s; }
@media (prefers-reduced-motion:reduce) { #weatherView .rain-gauge-fill { transition:none; } }
#weatherView .rain-gauge[data-level="heavy"] .rain-gauge-fill,
#weatherView .rain-gauge[data-level="storm"] .rain-gauge-fill { background:linear-gradient(90deg,var(--brand-blue),#8a5aff); }
#weatherView .rain-gauge-label { margin:0; font-size:.78rem; font-weight:600; color:var(--reading-muted); letter-spacing:.02em; }

/* Índice de Confiança PLUVIA */

/* Dicas contextuais: lista curta, só quando há algo para fazer. */
#weatherView .tips-section { margin:0; padding:14px 0 18px; border-bottom:1px solid var(--reading-line); }
#weatherView .tips-title { margin:0 0 10px; color:var(--reading-muted); font-size:.8rem; font-weight:600; letter-spacing:.045em; text-transform:uppercase; }
#weatherView .tips-list { display:grid; gap:10px; margin:0; padding:0; list-style:none; }
/* Ícone centrado na altura do texto (pedido do usuário, 1.23.2): no topo, com a dica em duas linhas, ele ficava alto. */
#weatherView .tips-list li { display:flex; align-items:center; gap:10px; color:var(--reading-ink); font-size:.95rem; line-height:1.4; }
#weatherView .tip-icon { flex:none; width:22px; height:22px; color:var(--graphic-blue); }


/* Ar nos próximos dias: três colunas compactas (dia, categoria, AQI máximo previsto), cor da categoria
   pelo mesmo --aqi-accent do card; a nota de previsão do modelo fica junto da fonte. */
#weatherView .air-outlook { grid-column:1/-1; margin-top:14px; }
#weatherView .air-outlook h3 { margin:0 0 8px; color:var(--reading-ink); font-size:.8rem; font-weight:600; }
#weatherView .air-outlook ol { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:0; padding:0; list-style:none; }
#weatherView .air-outlook li { display:grid; gap:2px; min-width:0; }
#weatherView .air-outlook li > span { color:var(--reading-muted); font-size:.75rem; }
#weatherView .air-outlook li > b { color:var(--aqi-accent,var(--reading-ink)); font-size:.88rem; font-weight:600; line-height:1.25; overflow-wrap:break-word; }
#weatherView .air-outlook li > small { color:var(--reading-muted); font-size:.72rem; line-height:1.35; font-variant-numeric:tabular-nums; }
/* Hoje vs. ontem: linha discreta abaixo do "Vai chover?"; vazia (sem leitura de ontem) não ocupa espaço. */
#weatherView .yesterday-note { margin:4px auto 0; max-width:32rem; color:var(--reading-muted); font-size:.85rem; line-height:1.4; text-align:center; }
#weatherView .yesterday-note:empty { display:none; }
#weatherView .yesterday-note .sk-line { width:min(11rem,60%); }
/* "No céu": próximas luas e chuva de meteoros entre a fase da Lua e o detalhe astronômico,
   na mesma tipografia do detalhe (rótulo pequeno, valor na tinta de leitura). */
#weatherView .sky-events { grid-column:1/-1; width:100%; min-width:0; padding-top:16px; border-top:1px solid var(--reading-line); color:var(--reading-muted); text-align:center; }
#weatherView .sky-events[hidden] { display:none; }
#weatherView .sky-events h3 { margin:0 0 12px; color:var(--reading-muted); font-size:.75rem; font-weight:500; letter-spacing:.09em; text-transform:uppercase; text-align:center; }
#weatherView .sky-events dl { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 18px; margin:0; }
#weatherView .sky-events dt { font-size:.8125rem; line-height:1.5; }
#weatherView .sky-events dd { margin:4px 0 0; color:var(--reading-ink); font-size:1rem; font-weight:600; }
#weatherView .sky-events .sky-events-meteor { grid-column:1/-1; }
#weatherView .sky-events .sky-events-meteor[hidden] { display:none; }
/* Ilustração dos eclipses (aria-hidden, só pintura dentro do SVG): a Lua desliza sobre o Sol até a fração
   encoberta na cidade, ou a sombra da Terra sobre a Lua; toca ao abrir "Mais sobre o céu". */
#weatherView .eclipse-figure { display:block; width:64px; height:64px; margin:0 auto 8px; overflow:visible; }
#weatherView .eclipse-figure .eclipse-sun { fill:#ffc94a; }
#weatherView .eclipse-figure .eclipse-glow { fill:#ffc94a; opacity:.22; }
#weatherView .eclipse-figure[data-tone="total"] .eclipse-glow { fill:#f2f5ff; opacity:.45; }
#weatherView .eclipse-figure .eclipse-moon-rim { fill:none; stroke:#ffffff26; stroke-width:1; }
#weatherView .eclipse-figure .eclipse-mover { transform:translateX(var(--eclipse-to)); }
#weatherView .eclipse-figure .eclipse-moon { fill:#141b2e; }
#weatherView .eclipse-figure .eclipse-umbra { fill:#2a1512; opacity:.8; }
#weatherView .eclipse-figure[data-tone="total"] .eclipse-umbra { fill:#9a3b22; opacity:.72; }
#weatherView .eclipse-figure[data-play] .eclipse-mover { animation:pluvia-eclipse 3.2s cubic-bezier(.25,.6,.2,1) .25s both; }
@keyframes pluvia-eclipse { from { transform:translateX(var(--eclipse-from)); } to { transform:translateX(var(--eclipse-to)); } }
@media (prefers-reduced-motion:reduce) { #weatherView .eclipse-figure[data-play] .eclipse-mover { animation:none; } }
#weatherView .sky-events dd small { color:var(--reading-muted); font-weight:400; }
#weatherView .sky-events small { display:block; max-width:34rem; margin:4px auto 0; font-size:.78rem; line-height:1.5; }

/* Brasil agora: capitais por região; cada linha é um botão (ícone, nome, temperatura, máx/mín)
   com colunas fixas para os números ficarem alinhados entre as linhas. */
html body #brazilDialog .brazil-status { min-height:1.2em; margin:0 0 8px; font-size:.8rem; line-height:1.5; }
html body #brazilDialog .brazil-status:empty { display:block; }
html body #brazilDialog .brazil-note { font-size:.8rem; line-height:1.5; }
/* Brasil agora em mapa: contorno estático, pontos nas capitais e etiquetas com a temperatura. Sem animação. */
.brazil-map { position:relative; width:100%; max-width:520px; margin:4px auto 18px; aspect-ratio:640 / 560; }
.brazil-map[hidden] { display:none; }
.brazil-map svg { display:block; width:100%; height:100%; }
.brazil-land { fill:#aac7e51f; stroke:#aac7e573; stroke-width:1.2; stroke-linejoin:round; }
.brazil-leader { stroke:#aac7e573; stroke-width:1; }
/* Campo contínuo de temperatura (1.20): imagem pequena interpolada, recortada pelo contorno e ampliada pelo navegador. */
.brazil-heat { opacity:.88; image-rendering:auto; }
.brazil-edge { fill:none; stroke:#0b143066; stroke-width:1.2; stroke-linejoin:round; }
.brazil-legend { display:flex; align-items:center; gap:8px; max-width:320px; margin:-8px auto 18px; color:var(--dialog-muted); font-size:.8125rem; font-variant-numeric:tabular-nums; }
.brazil-legend[hidden] { display:none; }
.brazil-legend i { flex:1; height:8px; border-radius:999px; background:linear-gradient(90deg,rgb(91,140,255) 0%,rgb(76,195,230) 31.25%,rgb(95,211,141) 53.1%,rgb(242,208,75) 68.75%,rgb(243,154,61) 84.4%,rgb(229,83,61) 100%); }
.brazil-dot { fill:#e8f0ff; stroke:#0b1430; stroke-width:1; }
.brazil-chip { position:absolute; transform:translate(-50%,-50%); padding:1px 6px; border-radius:999px; background:var(--chip,#8a96ad); color:#0b1430; font-size:.8125rem; font-weight:600; line-height:1.4; font-variant-numeric:tabular-nums; white-space:nowrap; cursor:pointer; box-shadow:0 0 0 1px #0b143040; }
.brazil-chip[data-missing] { background:#8a96ad; }
@media (max-width:360px) { .brazil-chip { padding:0 3px; letter-spacing:-.02em; } }
@media (forced-colors:active) { .brazil-chip { forced-color-adjust:none; border:1px solid CanvasText; } .brazil-land { stroke:CanvasText; } }
.brazil-list section + section { margin-top:18px; }
html body #brazilDialog .brazil-list h3 { margin:0 0 4px; color:var(--dialog-muted); font-size:.75rem; font-weight:500; letter-spacing:.09em; text-transform:uppercase; }
.brazil-list ul { margin:0; padding:0; list-style:none; }
html body #brazilDialog .brazil-row { display:grid; grid-template-columns:32px minmax(0,1fr) 3.2ch 4.4rem; align-items:center; gap:10px; width:100%; min-height:48px; margin:0; padding:6px 4px; border-radius:0; border:0; border-bottom:1px solid var(--dialog-line); background:none; color:var(--dialog-text); font:inherit; text-align:left; cursor:pointer; font-variant-numeric:tabular-nums; }
.brazil-row:hover { background:#aac7e50d; }
.brazil-row:focus-visible { outline:2px solid var(--brand-blue); outline-offset:2px; }
.brazil-icon { display:grid; place-items:center; width:32px; height:32px; }
.brazil-weather-icon { width:32px; height:32px; }
.brazil-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.brazil-temp { font-size:1.05rem; font-weight:600; text-align:right; }
.brazil-range { color:var(--dialog-muted); font-size:.8rem; text-align:right; white-space:nowrap; }
/* Telas estreitas: o nome não cede lugar à máx./mín. (que continua no rótulo acessível). */
@media(max-width:360px) { html body #brazilDialog .brazil-row { grid-template-columns:28px minmax(0,1fr) 3.2ch; gap:8px; } .brazil-icon,.brazil-weather-icon { width:28px; height:28px; } .brazil-range { display:none; } }
/* Compartilhar sem Web Share de arquivos: prévia do story e download, acima do texto para copiar. */
#shareWeatherDialog .share-weather-image { display:block; width:auto; max-width:100%; max-height:min(46vh,420px); margin:0 auto 12px; border-radius:16px; box-shadow:0 8px 24px #0006; }
#shareWeatherDialog .share-weather-image[hidden],#shareWeatherDialog .share-weather-download[hidden] { display:none; }
/* De dia a regra de links dos diálogos claros pintava "Baixar imagem" de azul-escuro sobre o botão azul. */
html body #shareWeatherDialog #shareWeatherDownload { color:#fff; }
#shareWeatherDialog .share-weather-download { display:flex; align-items:center; justify-content:center; min-height:44px; margin:0 0 16px; border-radius:12px; background:var(--brand-blue); color:var(--on-accent); font-weight:600; text-decoration:none; }

/* Próximas horas enxuto: hora, ícone, chance (só ≥ 20%, linha reservada) e temperatura. */
#weatherView .hourly-peek-item { min-height:0; gap:6px; padding-block:10px 12px; }
#weatherView .hourly-peek-item .peek-rain { min-height:20px; justify-content:center; font-size:.8125rem; }
#weatherView .hourly-peek-item > strong { font-size:1.35rem; }
/* "Previsão por hora" agora mora em Próximas horas: janela seca numa linha, gráfico recolhido logo abaixo. */
#weatherView .dry-window-line { margin:14px 0 0; color:var(--reading-muted); font-size:.875rem; line-height:1.45; }
#weatherView .dry-window-line strong { color:var(--reading-ink); font-weight:600; }
/* "Tá chovendo aí?": pílulas de resposta e a linha do resumo com altura reservada (sem empurrar a página). */
#weatherView .rain-report[hidden] { display:none; }
#weatherView .rain-report { margin:16px 0 0; padding-top:14px; border-top:1px solid var(--card-border, #aac7e526); }
#weatherView .rain-report-question { margin:0 0 10px; color:var(--reading-ink); font-size:.9375rem; font-weight:600; }
#weatherView .rain-report-options { display:grid; grid-template-columns:repeat(auto-fit,minmax(118px,1fr)); gap:8px; }
#weatherView .rain-report-options button { min-height:44px; padding:0 12px; border:1px solid var(--card-border, #aac7e540); border-radius:999px; background:transparent; color:var(--reading-ink); font:inherit; font-size:.875rem; font-weight:500; cursor:pointer; }
#weatherView .rain-report-options button[aria-pressed="true"] { border-color:var(--brand-blue); background:var(--brand-blue); color:var(--on-accent); }
#weatherView .rain-report-options button:disabled:not([aria-pressed="true"]) { opacity:.55; cursor:default; }
#weatherView .rain-report-summary { min-height:1.45em; margin:10px 0 0; color:var(--reading-muted); font-size:.8125rem; line-height:1.45; }
/* De dia a borda do cartão é branca (vidro azulado, 1.23) e somia no fundo claro: botões e divisórias usam a tinta escura. */
body[data-ink="dark"] #weatherView .rain-report-options button:not([aria-pressed="true"]) { border-color:rgba(19,35,61,.24); background:rgba(255,255,255,.32); }
body[data-ink="dark"] #weatherView :is(.rain-report,.install-card) { border-top-color:rgba(19,35,61,.12); }
body[data-ink="dark"] #weatherView .alert-banner:is([data-pending],[data-stage="future"]) { border-color:rgba(19,35,61,.16); }
@media (forced-colors:active) { #weatherView .rain-report-options button { border-color:ButtonText; } #weatherView .rain-report-options button[aria-pressed="true"] { forced-color-adjust:none; background:Highlight; color:HighlightText; } }
#weatherView .hourly-peek .rain-phrase { margin:10px 0 0; padding:0; border:0; background:none; box-shadow:none; }
#weatherView .hourly-peek .rain-phrase small { color:var(--reading-muted); font-size:.8125rem; }
/* Convite de alertas: "Ativar" principal e "Agora não" discreto, que esconde o convite neste aparelho. */
@media(max-width:640px) { .notification-prompt-actions { grid-column:1 / -1; } }
/* Radar compacto na Home: título com "Abrir radar" ao lado, miniatura baixa e só o horário da imagem.
   Player, zoom e localização ficam no radar ampliado (o mesmo #radarMapContent, movido ao diálogo). */
#weatherView .weather-map-card { grid-template-columns:minmax(0,1fr) auto; align-items:center; column-gap:16px; }
#weatherView .weather-map-card > #radarMapContent { grid-column:1 / -1; }
#weatherView .weather-map-card .expand-radar { grid-column:2; grid-row:1; margin:0; white-space:nowrap; }
.weather-map-card #radarMapContent .weather-map-stage { height:clamp(190px,30vw,240px); }
.weather-map-card #radarMapContent :is(.weather-player,#weatherMapRecenter,.leaflet-control-zoom,.weather-map-retry) { display:none !important; }
.weather-map-card #radarMapContent .weather-timebar { grid-template-columns:1fr; gap:4px; }
.weather-map-card #radarMapContent .weather-frame-status { min-height:0; margin:0; }
.weather-map-card #radarMapContent .weather-frame-status:empty { display:none; }
/* Na Home só falhas aparecem ("Imagem carregada."/"Consultando…" eram ruído); o diálogo mostra tudo. */
.weather-map-card #radarMapContent .weather-frame-status:not([data-state="error"]) { display:none; }
.radar-stage-open { position:absolute; inset:0; z-index:450; width:100%; height:100%; padding:0; border:0; background:none; cursor:pointer; }
.radar-dialog .radar-stage-open { display:none; }
/* Ciclo do dia compacto: arco em cima; embaixo Sol (nascer/pôr) | Lua (fase e iluminação) lado a lado.
   "No céu", horas de sol previstas e horários finos ficam em "Mais sobre o céu". */
#weatherView .astronomy-details .sunshine-note { margin:12px 0 0; text-align:center; }
#weatherView .astronomy-details .sky-events { margin-top:16px; }
@media(max-width:380px) {
  #weatherView .sky-pair { grid-template-columns:minmax(0,1fr); row-gap:14px; }
  #weatherView .sky-pair-moon { padding:14px 0 0; border-left:0; border-top:1px solid var(--reading-line); }
  #weatherView .sky-pair-sun { padding-right:0; }
}
/* ⓘ por seção: fontes e limites num balão, sem repetir avisos em todo card. Status de dado salvo,
   antigo ou reduzido continua sempre visível (#dataStatus, notas da própria leitura). */
.heading-with-tip { display:flex; align-items:center; gap:8px; min-width:0; }
.info-tip { position:relative; display:inline-block; flex:none; }
.info-tip > summary { display:grid; place-items:center; width:44px; height:44px; margin:-10px -12px; list-style:none; cursor:pointer; border-radius:50%; }
.info-tip > summary::-webkit-details-marker { display:none; }
/* Letra i reta (sem itálico) num círculo de borda; texto simples, sem SVG. */
.info-tip-icon { display:block; width:20px; height:20px; border:1.5px solid currentColor; border-radius:50%; color:var(--reading-muted,#8aa0b8); font:700 12px/17px var(--font-ui); font-style:normal; text-align:center; }
.info-tip[open] > summary > .info-tip-icon { color:var(--brand-blue); }
@media (hover:hover) { .info-tip > summary:hover > .info-tip-icon { color:var(--brand-blue); } }
.info-tip > summary:focus-visible { outline:2px solid var(--brand-blue); outline-offset:-6px; }
.info-tip-body { position:absolute; z-index:600; top:calc(100% + 4px); left:-12px; width:min(300px,calc(100vw - 48px)); padding:12px 14px; border:1px solid #a4c7e533; border-radius:14px; background:#0d2239; color:#e3eefb; box-shadow:0 16px 40px #0008; text-align:left; text-transform:none; letter-spacing:0; font:400 .8125rem/1.5 var(--font-ui); }
.info-tip-body p { margin:0; color:inherit !important; font-size:inherit !important; }
.info-tip-body p + p { margin-top:8px; }
.info-tip-body small { color:inherit !important; font-size:inherit !important; }
/* No card do ar e nos 7 dias o ⓘ fica à direita: o balão abre para dentro da tela. */
.metric-head .info-tip,.section-heading .info-tip { margin-left:auto; }
.metric-head .info-tip-body,.section-heading .info-tip-body { left:auto; right:-12px; }
.weather-map-card #radarMapContent #weatherSourceNote { display:none; }
/* Conta: sempre o ícone de pessoa (44px, mesmo traço da lupa); "Entrar" ou "Olá, Nome" fica para leitores de tela. */
.topbar .account-trigger[data-signed-in] { display:grid; place-items:center; width:44px; min-width:44px; padding:0; }
.topbar .account-trigger .account-icon { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.topbar .account-trigger .account-label { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
/* Logado: a mesma pessoa, preenchida no azul da marca. */
.topbar .account-trigger[data-signed-in="true"] .account-icon { color:var(--brand-blue); fill:currentColor; fill-opacity:.18; }
/* Letra mínima de leitura ~13px (0,8125rem) para textos corridos e notas que estavam em 11–12px;
   rótulos curtos em caixa alta continuam em 12px. A coluna fixa de chuva dos 7 dias no celular mantém 12px. */
#weatherView :is(.hour-solar-event,.hour-temp small,.rain-chart .rain-chance,.air-outlook li > small,.air-outlook li > span,.sky-events small,.inmet-stage,.inmet-alert-meta dt),
.moon-inline #moonIllumination,.favorite-city-card small,.daily-hour > small { font-size:.8125rem; }
#weatherView .alerts-section:is([data-alert-state="clear"],[data-alert-state="loading"]) #inmetUpdated { font-size:.8125rem; }
@media(max-width:720px) {
  #weatherView .forecast-day > span { font-size:.8125rem; }
  #weatherView .forecast-rain-volume { font-size:.75rem; }
}
/* O balão se ancora no cabeçalho da seção (largura dele), não no botão: nunca sai da tela no celular. */
#weatherView :is(.hourly-peek-heading,.metric-head,.section-heading,.weather-map-copy) { position:relative; }
.info-tip { position:static; }
.info-tip-body,.metric-head .info-tip-body,.section-heading .info-tip-body { left:0; right:0; width:auto; max-width:440px; }
.metric-head .info-tip-body,.section-heading .info-tip-body { left:auto; }
#weatherView .hourly-peek-list:not([data-rain="some"]) .peek-rain { display:none; }
/* Bloco da Lua simétrico ao do Sol: rótulo no topo, disco e fase lado a lado, texto sem espaçamento de rótulo. */
/* Banner de aviso INMET laranja/vermelho vigente: faixa sólida logo abaixo do "Vai chover?".
   Cores sólidas com contraste próprio (não dependem do céu); toque abre o detalhe oficial. */
#weatherView .alert-banner { display:flex; align-items:center; gap:12px; width:min(100%,32rem); min-height:56px; margin:14px auto 0; padding:10px 14px; border:0; border-radius:16px; font:inherit; text-align:left; cursor:pointer; box-shadow:0 6px 18px #10234033; }
#weatherView .alert-banner[hidden] { display:none; }
/* Faixa vazia enquanto o INMET responde (a última leitura da cidade tinha faixa): mesmo tamanho da faixa
   que costuma chegar, sem cor de severidade nem texto; a leitura troca o conteúdo no mesmo lugar. */
#weatherView .alert-banner[data-pending] { min-height:44px; padding:6px 12px; border:1px solid var(--card-border, #aac7e540); background:var(--card-fill, transparent); color:var(--reading-ink); box-shadow:none; cursor:default; }
#weatherView .alert-banner[data-pending="yellow"] { border-color:transparent; }
#weatherView .alert-banner[data-pending="strong"] { min-height:56px; padding:10px 14px; border-color:transparent; }
#weatherView .alert-banner[data-pending] > svg { opacity:.35; }
#weatherView .alert-banner[data-pending] .alert-banner-more { visibility:hidden; }
#weatherView .alert-banner[data-pending] :is(strong, small) { justify-self:start; border-radius:6px; background:color-mix(in srgb, currentColor 14%, transparent); opacity:1; }
#weatherView .alert-banner[data-pending] strong { width:72%; font-size:.875rem; }
#weatherView .alert-banner[data-pending="strong"] strong { font-size:.9375rem; }
#weatherView .alert-banner[data-pending] small { width:46%; }
/* Com a faixa vazia no lugar, a linha "Consultando" do INMET sai da tela (continua para leitores de tela). */
/* Sem aviso (1.26.2, pedido do usuário), a linha "INMET · Sem alertas" e o "Consultando" também saem da tela: o
   cartão só aparece quando há aviso. Leitores de tela continuam ouvindo o estado. */
#weatherView #alertas:is([data-alert-state="pending"],[data-alert-state="clear"],[data-alert-state="loading"]) { position:absolute !important; width:1px; height:1px; margin:0 !important; padding:0 !important; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
#weatherView .alert-banner[data-severity="orange"] { background:#f08c1e; color:#1a0d00; }
#weatherView .alert-banner[data-severity="red"] { background:#b3261e; color:#fff; }
/* Amarelo (perigo potencial) é frequente: faixa discreta, mais baixa e sem sombra, para laranja e
   vermelho continuarem chamando mais atenção. Mantém o alvo de 44 px. */
#weatherView .alert-banner[data-severity="yellow"] { min-height:44px; padding:6px 12px; background:#f3d046; color:#2b2200; box-shadow:none; }
#weatherView .alert-banner[data-severity="yellow"] strong { font-size:.875rem; }
/* Aviso só previsto: linha translúcida no vidro dos cartões, com o triângulo na cor da severidade e o
   texto na tinta de leitura; vira a faixa colorida quando começa a valer. */
#weatherView .alert-banner[data-stage="future"] { min-height:44px; padding:6px 12px; background:var(--card-fill, transparent); border:1px solid var(--card-border, #aac7e540); color:var(--reading-ink); box-shadow:none; }
#weatherView .alert-banner[data-stage="future"] strong { font-size:.875rem; }
#weatherView .alert-banner[data-stage="future"] > svg { color:#f3d046; }
#weatherView .alert-banner[data-stage="future"][data-severity="orange"] > svg { color:#f08c1e; }
#weatherView .alert-banner[data-stage="future"][data-severity="red"] > svg { color:#ff6b5e; }
body[data-ink="dark"] #weatherView .alert-banner[data-stage="future"] > svg { color:#8a6a00; }
body[data-ink="dark"] #weatherView .alert-banner[data-stage="future"][data-severity="orange"] > svg { color:#a34f00; }
body[data-ink="dark"] #weatherView .alert-banner[data-stage="future"][data-severity="red"] > svg { color:#b3261e; }
#weatherView .alert-banner > svg { flex:none; width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
#weatherView .alert-banner > span:not(.alert-banner-more) { display:grid; gap:2px; min-width:0; flex:1; }
#weatherView .alert-banner strong { font-size:.9375rem; font-weight:600; line-height:1.3; color:inherit; }
#weatherView .alert-banner small { font-size:.8125rem; line-height:1.3; color:inherit; opacity:.9; }
#weatherView .alert-banner-more { flex:none; font-size:1.4rem; line-height:1; }
#weatherView .alert-banner:focus-visible { outline:3px solid var(--brand-blue); outline-offset:3px; }
/* Bolinhas das cidades (deslizar o topo troca de cidade): alvo de 44px de altura, ponto de 8px. */
#weatherView .city-dots { display:flex; justify-content:center; flex-wrap:wrap; gap:0; margin:10px auto 0; }
#weatherView .city-dots[hidden] { display:none; }
#weatherView .city-dot { display:grid; place-items:center; width:24px; height:44px; padding:0; border:0; background:none; cursor:pointer; }
#weatherView .city-dot::before { content:""; width:8px; height:8px; border-radius:4px; background:var(--reading-ink); opacity:.3; transition:width .32s cubic-bezier(.22,1,.36,1), opacity .32s ease; }
#weatherView .city-dot[aria-current="true"]::before { width:18px; opacity:1; }
#weatherView .city-dot:focus-visible { outline:2px solid var(--brand-blue); outline-offset:-10px; border-radius:12px; }
@media (prefers-reduced-motion:reduce) { #weatherView .city-dot::before { transition:none; } }
/* Personalizar a Home: seções escondidas saem do layout; diálogo com caixa e setas de ordem (44px). */
#weatherView [data-home-hidden] { display:none !important; }
.home-layout-list { display:grid; gap:0; margin:12px 0 16px; padding:0; list-style:none; }
.home-layout-list li { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:52px; border-bottom:1px solid var(--dialog-line); }
.home-layout-list label { display:flex; align-items:center; gap:12px; min-width:0; min-height:44px; color:var(--dialog-text); cursor:pointer; }
.home-layout-list input { flex:none; width:20px; height:20px; margin:0; accent-color:var(--brand-blue); }
.home-layout-move { display:flex; gap:4px; flex:none; }
.home-layout-move button { width:44px; height:44px; border:1px solid var(--dialog-line); border-radius:12px; background:var(--dialog-surface); color:var(--dialog-text); font:600 1.1rem/1 var(--font-ui); cursor:pointer; }
.home-layout-move button:disabled { opacity:.35; cursor:default; }
.home-layout-reset { min-height:44px; width:100%; border:1px solid var(--dialog-line); border-radius:12px; background:none; color:var(--dialog-text); font:inherit; cursor:pointer; }
:is(.home-layout-move button,.home-layout-reset,.home-layout-list input):focus-visible { outline:2px solid var(--brand-blue); outline-offset:2px; }

/* Desktop largo (≥ 1100 px): cabeçalho, conteúdo e rodapé crescem juntos até 1180 px; abaixo do topo,
   as seções vão para duas colunas independentes (sem linhas em comum, então não sobram buracos). */
@media (min-width:1100px) {
  html body .topbar,footer.shell { max-width:1180px; }
  #weatherView { width:min(1180px,100%); }
  #weatherView .home-columns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:48px; align-items:start; }
  #weatherView .home-column { min-width:0; }
  #weatherView .home-column > :first-child { border-top:1px solid var(--reading-line) !important; }
  #weatherView .home-column .metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (min-width:1100px) {
  /* 7 dias na coluna: chance e volume empilhados (como no celular) para caber sem vazar; condição continua escrita. */
  #weatherView .home-column .forecast-list .forecast-row { grid-template-columns:minmax(0,.9fr) minmax(0,1.5fr) minmax(0,1.45fr) 5rem; }
  #weatherView .home-column .forecast-rain-values { display:grid; justify-items:end; gap:0; line-height:1.25; }
  #weatherView .home-column .forecast-rain-volume::before { content:none; }
  #weatherView .home-column .forecast-list :is(.forecast-rain-chance,.forecast-rain-volume) { min-width:0; }
  #weatherView .home-column .forecast-rain-volume { color:var(--reading-muted); font-size:.75rem; }
}
/* O alvo de 44px do ⓘ alinhado à direita não pode passar da borda da seção (rolagem lateral no iPhone SE). */
.metric-head .info-tip > summary,.section-heading .info-tip > summary { margin-right:-6px; }
/* Estabilidade na chegada dos dados (CLS): o esqueleto tem a mesma altura da leitura final.
   Sem chuva relevante (o caso comum), a linha da chance não existe nem no esqueleto; a janela seca
   ocupa sempre rótulo + valor em duas linhas; e o esqueleto do número não aumenta a linha do 30°. */
#weatherView .dry-window-line strong { display:block; }
#weatherView #temperature .sk-temp { vertical-align:top; }
/* ⓘ aberto: o texto vai para logo depois do título (app.js), no fluxo da página. Sem posição absoluta
   nem z-index: subir camadas de títulos/seções derrubava o Safari do iPhone. */
#weatherView .info-tip-body[data-inline] { position:static !important; z-index:auto !important; width:auto; max-width:none; margin:10px 0 14px; box-shadow:none; }
/* Toque (celular/tablet): sem animações de entrada nem revelação ao rolar. Com o celular deitado
   (mais de 720 px) elas voltavam a rodar sobre o céu animado; cada card animado vira uma camada do
   tamanho da página no Safari do iPhone, e girar a tela travava o app. */
@media (hover:none), (pointer:coarse) {
  .intro > div:first-child, .dashboard-grid > .panel, .metrics > .metric, .forecast-row { animation:none; }
  }
/* Toque (celular/tablet): esqueletos parados, sem o brilho deslizante. Cada barrinha com o brilho
   em transform virava uma camada própria sobre o céu animado (13 → 72 camadas ao trocar de cidade
   ou abrir sem dado salvo), o padrão que derrubava o Safari do iPhone. A barra cinza continua. */
@media (hover:none), (pointer:coarse) { #weatherView .sk::after { animation:none; display:none; } }
/* Troca de cidade com deslize (app.js slideToCity): só durante a troca, três textos do topo viram
   fotos de View Transition numa camada própria acima da página. A raiz não é fotografada (o resto da
   página e o céu atualizam direto), então a página não ganha camadas. */
:root { view-transition-name:none; }
/* Os nomes ficam no estilo dos três textos só durante a troca (app.js slideToCity); "-prev" é o gesto para trás.
   A foto antiga sai rápido para o lado do gesto (200 ms, sem ficar sobreposta à nova: "ManPetrolina"),
   e a nova desce no lugar, em cascata: nome, temperatura, condição. */
::view-transition-group(pluvia-city),::view-transition-group(pluvia-temp),::view-transition-group(pluvia-condition),::view-transition-group(pluvia-city-prev),::view-transition-group(pluvia-temp-prev),::view-transition-group(pluvia-condition-prev) { animation-duration:.5s; animation-timing-function:cubic-bezier(.22,1,.36,1); }
::view-transition-old(pluvia-city),::view-transition-old(pluvia-temp),::view-transition-old(pluvia-condition),::view-transition-old(pluvia-city-prev),::view-transition-old(pluvia-temp-prev),::view-transition-old(pluvia-condition-prev) { animation:pluvia-slide-out .2s cubic-bezier(.4,0,1,1) both; }
::view-transition-old(pluvia-city-prev),::view-transition-old(pluvia-temp-prev),::view-transition-old(pluvia-condition-prev) { animation-name:pluvia-slide-out-prev; }
::view-transition-new(pluvia-city),::view-transition-new(pluvia-temp),::view-transition-new(pluvia-condition),::view-transition-new(pluvia-city-prev),::view-transition-new(pluvia-temp-prev),::view-transition-new(pluvia-condition-prev) { animation:pluvia-slide-in .52s cubic-bezier(.22,1,.36,1) .1s both; }
::view-transition-new(pluvia-temp),::view-transition-new(pluvia-temp-prev) { animation-delay:.15s; }
::view-transition-new(pluvia-condition),::view-transition-new(pluvia-condition-prev) { animation-delay:.2s; }
@keyframes pluvia-slide-out { to { opacity:0; transform:translateX(-10%); } }
@keyframes pluvia-slide-out-prev { to { opacity:0; transform:translateX(10%); } }
@keyframes pluvia-slide-in { from { opacity:0; transform:translateY(-18px); } }
/* Céu entre cidades (app.js fadeSky): cópia do céu antigo (degradê, crepúsculo, nuvens e Sol/Lua), do
   tamanho da tela, acima do céu novo e abaixo do conteúdo (mesmo z-index -1 do céu, depois dele no DOM),
   que some em ~1,1 s. As cópias de nuvens/astros ficam na .sky-fade-scene, no lugar de .sky-effects,
   sem transform/animação: tudo é pintado na camada única da cópia. */
.night-stage > .sky-fade { position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; animation:pluvia-sky-fade 1.1s cubic-bezier(.4,0,.2,1) both; }
.night-stage > .sky-fade > span { position:absolute; left:0; right:0; background-repeat:no-repeat; background-size:100% 100%; }
.night-stage > .sky-fade > .sky-fade-scene { position:absolute; overflow:hidden; isolation:isolate; }
@keyframes pluvia-sky-fade { from { opacity:1; } to { opacity:0; } }
@media (prefers-reduced-motion:reduce) { .night-stage > .sky-fade { display:none; } }
/* Cascata "descendo" (app.js dropIn): o bloco desce 18 px enquanto é revelado de cima para baixo.
   Só top (position:relative) e clip-path: pintura, sem camada; transform/opacity em blocos derrubavam
   o Safari do iPhone. Só na troca de cidade, com o bloco parado na tela: nada espera a rolagem. */
#weatherView [data-drop="go"] { position:relative; animation:pluvia-drop .62s cubic-bezier(.22,1,.36,1) var(--drop-delay,0ms) both; }
@keyframes pluvia-drop { from { top:-18px; clip-path:inset(0 0 100% 0); } to { top:0; clip-path:inset(-40px); } }
/* Cidade sem previsão salva: o bloco fica guardado (recortado) até a previsão chegar e então desce (app.js). */
#weatherView [data-drop="hold"] { clip-path:inset(0 0 100% 0); }
/* Contém a pintura de cada bloco durante a descida: sem isso o top + clip-path repintava a camada da página inteira
   ~50 vezes por troca (1.25, medido: −35% de pintura); não cria camada (14 antes e depois). */
#weatherView [data-drop] { contain:paint; }
@media (prefers-reduced-motion:reduce) { #weatherView [data-drop] { clip-path:none; animation:none; } }
/* ⓘ abre e fecha pela altura (grid 0fr ↔ 1fr), empurrando o conteúdo de baixo sem criar camadas. */
#weatherView .info-tip-body[data-inline] { display:grid; grid-template-rows:1fr; transition:grid-template-rows .3s cubic-bezier(.3,.7,.2,1),margin .3s cubic-bezier(.3,.7,.2,1),padding .3s cubic-bezier(.3,.7,.2,1),border-color .3s,color .3s; }
#weatherView .info-tip-body[data-inline][data-collapsed] { grid-template-rows:0fr; margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0; border-color:transparent; color:transparent; }
#weatherView .info-tip-inner { min-height:0; overflow:hidden; }
@media (prefers-reduced-motion:reduce) { #weatherView .info-tip-body[data-inline] { transition:none; } }
/* Movimento suave onde não havia (só cor, fundo, layout de elementos pequenos ou SVG; nada de
   transform/opacity em blocos grandes, que viravam camadas e derrubavam o Safari do iPhone). */
:where(button, summary, a, [role="button"]) { transition:color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease; }
/* Toque: um véu na cor do próprio texto (sombra interna, por cima do fundo, sem trocá-lo) enquanto o
   dedo está no botão; some suave ao soltar. Só botões que não tinham resposta própria ao toque. */
html body :is(#accountButton,#openCitySearch,#shareWeather,#expandRadar,#notificationPromptButton,#notificationPromptDismiss,.footer-link,.account-more-item,.dialog-close,.hourly-modes button,.hourly-detail-navigation button,details > summary) { transition:color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .28s ease; }
html body :is(#expandRadar,#notificationPromptButton,#notificationPromptDismiss,.footer-link,.dialog-close,.hourly-modes button,.hourly-detail-navigation button):active:not(:disabled) { box-shadow:inset 0 0 0 100px color-mix(in srgb, currentColor 14%, transparent); transition-duration:0s; }
/* Linhas que abrem/fecham ("Mais sobre o céu", "Poluentes e origem", grupos da conta) e itens de lista: o véu acima virava
   um bloco cinza quadrado piscando no toque (vídeo do usuário, 1.15). Aqui o texto só esmaece e volta, como nos apps da Apple. */
html body :is(details > summary,.account-more-item,#accountButton,#openCitySearch,#shareWeather) { box-shadow:none !important; transition:opacity .28s ease; }
html body :is(details > summary,.account-more-item,#accountButton,#openCitySearch,#shareWeather):active { opacity:.45; transition-duration:0s; }
/* Os botões do topo também (vídeo do usuário, 1.15.2): o véu desenhava um quadrado cinza em volta da foto redonda. */
@media (prefers-reduced-motion:reduce) { html body :is(details > summary,.account-more-item,#accountButton,#openCitySearch,#shareWeather) { transition:none; } }
/* Bússola gira pelo menor caminho (app.js), marcador do UV e Sol/Lua do arco deslizam até a leitura nova. */
.compass-needle { transition:transform .8s cubic-bezier(.22,1,.36,1), opacity .4s ease; }
.uv-scale span { transition:left .8s cubic-bezier(.22,1,.36,1); }
#weatherView .sun-arc :is(.sun-dot,.moon-dot) { transition:left 1s cubic-bezier(.22,1,.36,1), top 1s cubic-bezier(.22,1,.36,1); }
/* Barras do gráfico crescem da base, em onda, ao abrir ou trocar o modo (data-grow só nesses gestos). */
#weatherView .rain-chart[data-grow] :is(.temp-bar,.wind-bar,.rain-bar) { animation:pluvia-bar-grow .6s cubic-bezier(.22,1,.36,1) calc(var(--i,0) * 16ms) both; }
@keyframes pluvia-bar-grow { from { height:0; min-height:0; } }
@media (prefers-reduced-motion:reduce) {
  :where(button, summary, a, [role="button"]), html body :is(#accountButton,#openCitySearch,#shareWeather,#expandRadar,#notificationPromptButton,#notificationPromptDismiss,.footer-link,.account-more-item,.dialog-close,.hourly-modes button,.hourly-detail-navigation button,details > summary), #weatherView .next-hour-bars span::after, .compass-needle, .uv-scale span, #weatherView .sun-arc :is(.sun-dot,.moon-dot), #weatherView .next-hour-bars span, html body :is(#weatherView .air-details,#weatherView .astronomy-details,#accountDialog .notification-checks,#accountDialog .account-delete,#alertDetail details) > summary::before, html body #accountDialog :is(.account-group > summary,.capital-links summary)::after { transition:none; }
  #weatherView .rain-chart[data-grow] :is(.temp-bar,.wind-bar,.rain-bar) { animation:none; }
}

/* Pacote visual (outubro/2026, a pedido): máx./mín. no topo, seções em cartões, um estilo de título
   e 7 dias compactos no celular. Os cartões são só pintura (fundo, borda e box-shadow, sem blur,
   transform ou z-index): não criam camadas e o céu continua visível atrás. A tinta segue data-ink. */
/* Vidro "líquido" sem backdrop-filter: um blur por cartão sobre as nuvens animadas seria refeito a
   cada quadro e já derrubou o Safari do iPhone. À noite o cartão é quase transparente, com uma linha
   fina e discreta em border-color (a borda em degradê via border-box apareceria pelo fundo transparente) (a pedido: sem degradê branco, sem borda de luz brilhante nos cantos). De dia o
   vidro claro mantém a borda de luz. Só pintura, nada cria camada. */
#weatherView {
  --card-bg:rgba(160,190,240,.08);
  --card-line:rgba(184,212,239,.14);
  --card-fill:linear-gradient(rgba(150,175,225,.085),rgba(150,175,225,.085)) padding-box;
  --card-rim:linear-gradient(transparent,transparent);
  --card-border:rgba(190,210,245,.13);
  --card-glow:none;
}
/* Dia (1.23, opção A escolhida pelo usuário: "achando feio" o vidro branco leitoso): vidro azulado bem mais
   transparente, puxado para o azul do céu, com borda branca fina e sombra azul suave. Sem borda de luz em degradê. */
body[data-ink="dark"] #weatherView {
  --card-bg:rgba(214,234,255,.24);
  --card-line:rgba(255,255,255,.5);
  --card-fill:linear-gradient(rgba(214,234,255,.26),rgba(214,234,255,.26)) padding-box;
  --card-rim:linear-gradient(transparent,transparent);
  --card-glow:0 6px 20px rgba(28,72,128,.08);
  --card-border:rgba(255,255,255,.55);
}
/* Céu cinza de dia (nublado, garoa, chuva e trovoada com tinta clara, 1.25): cartão cinza-escuro translúcido como no
   Apple Weather. O vidro azulado da noite clareava o cinza e o texto secundário ficava abaixo de 4,5:1. */
body[data-phase="day"][data-ink="light"] #weatherView {
  --card-bg:rgba(24,30,38,.34);
  --card-fill:linear-gradient(rgba(24,30,38,.34),rgba(24,30,38,.34)) padding-box;
  --card-border:rgba(255,255,255,.14);
}
/* Nublado de dia (1.26.6, referência do usuário: o nublado do app Tempo): céu cinza-azulado prateado e cartões
   de vidro azul-ardósia, em vez do cinza-chumbo. */
body[data-phase="day"][data-ink="light"][data-weather="cloud"] #weatherView {
  --card-bg:rgba(36,48,68,.6);
  --card-fill:linear-gradient(rgba(36,48,68,.6),rgba(36,48,68,.6)) padding-box;
  --card-border:rgba(255,255,255,.18);
}
/* Céu claro como no app Tempo: o texto branco sobre o céu leva uma sombra suave e larga (a mesma solução do app
   Tempo), em vez de escurecer o céu. Só no nublado de dia. */
body[data-phase="day"][data-ink="light"][data-weather="cloud"] :is(.topbar,.weather-hero,.site-footer) { text-shadow:0 1px 3px rgba(20,32,52,.35),0 0 18px rgba(20,32,52,.28); }
#weatherView .hero-range { margin:-8px 0 0; color:var(--reading-ink); font-size:1.05rem; font-weight:500; line-height:1.35; text-align:center; }
#weatherView .hero-range:empty { display:none; }
#weatherView .hero-range .sk-line { width:min(9rem,50%); }
#weatherView .weather-hero { padding-bottom:12px; }
#weatherView .weather-main > .city-dots { margin-top:0; }
/* Convite para favoritar (3ª visita à mesma cidade): uma linha discreta, alvos de 44 px. */
#weatherView .favorite-suggest { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:4px 8px; margin:6px auto 0; }
#weatherView .favorite-suggest[hidden] { display:none; }
#weatherView .favorite-suggest button { min-height:44px; padding:0 12px; border:0; border-radius:999px; background:none; font:inherit; font-size:.95rem; cursor:pointer; }
#weatherView .favorite-suggest-save { color:var(--reading-link); font-weight:600; }
#weatherView .favorite-suggest-dismiss { color:var(--reading-muted); }
#weatherView .favorite-suggest-extra { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
#weatherView .favorite-suggest-save { position:relative; }
#weatherView :is(#alertas,#tips,#chuva,.quick-metrics,.metrics,.weather-map-section,#previsao,#notificationPrompt,.sun-section) {
  margin:12px 0 0 !important;
  padding:18px 16px !important;
  border:1px solid var(--card-border,transparent) !important;
  border-radius:24px !important;
  background:var(--card-fill), var(--card-rim) border-box !important;
  box-shadow:var(--card-glow);
}
#weatherView #alertas { margin-top:4px !important; }
#weatherView .alerts-section:is([data-alert-state="clear"],[data-alert-state="loading"]) { padding-block:14px !important; }
/* Sem aviso (ou ainda consultando): só uma linha discreta, sem cartão; com aviso, falha ou leitura
   anterior, o cartão completo volta no mesmo lugar. */
/* Aviso vigente na faixa do topo: o cartão completo repetia a faixa; os outros avisos ficam no detalhe. */
#weatherView #alertas[data-alert-state="banner"] { display:none !important; }
#weatherView #alertas:is([data-alert-state="clear"],[data-alert-state="loading"]) {
  padding:4px 2px !important; border-color:transparent !important; background:none !important; box-shadow:none !important;
}
#weatherView .alerts-section:is([data-alert-state="clear"],[data-alert-state="loading"]) #inmetCard { min-height:28px; gap:0 10px; padding:0 !important; border:0 !important; background:none !important; box-shadow:none !important; }
#weatherView .alerts-section:is([data-alert-state="clear"],[data-alert-state="loading"]) #inmetCard .source-badge { min-height:24px; padding:3px 8px; font-size:.7rem; }
#weatherView .alerts-section:is([data-alert-state="clear"],[data-alert-state="loading"]) #inmetContent h3 { font-size:.85rem; font-weight:500; color:var(--reading-muted); }
#weatherView .alerts-section:is([data-alert-state="clear"],[data-alert-state="loading"]) #inmetUpdated { display:none; }
#weatherView .alerts-section:is([data-alert-state="clear"],[data-alert-state="loading"]) :is(#inmetCard .source-head, #inmetContent, .source-link) { grid-row:1; }
/* Na linha única o selo "INMET ·" ficava no topo da linha (align-self:start do layout de cartão) e o texto no centro: 5 px de degrau. */
#weatherView .alerts-section:is([data-alert-state="clear"],[data-alert-state="loading"]) #inmetCard .source-head { align-self:center; }
@media(max-width:420px) {
  /* Na linha única, o link ficaria por cima de "Consultando <cidade>": some até 420 px (o mapa oficial
     continua no cartão completo e no detalhe do aviso). */
  #weatherView .alerts-section:is([data-alert-state="clear"],[data-alert-state="loading"]) .source-link { display:none; }
}
#weatherView .home-column > :first-child { margin-top:12px !important; }
/* Linhas internas: a borda do cartão já separa o primeiro item. */
#weatherView .metrics .metric-sky:nth-child(-n+2) { border-top:0 !important; padding-top:0; }
#weatherView .metrics .metric:last-child { padding-bottom:0; }
#weatherView .forecast-list > :first-child { border-top:0 !important; }
#weatherView .forecast-list > .forecast-row:last-child { padding-bottom:0; }
#weatherView .forecast-list > .forecast-row:first-child { padding-top:4px; }
@media(min-width:721px) {
  #weatherView .metrics .metric-sky:nth-child(-n+4) { border-top:0 !important; padding-top:0; }
  #weatherView :is(#alertas,#tips,#chuva,.quick-metrics,.metrics,.weather-map-section,#previsao,#notificationPrompt,.sun-section) { padding:22px 24px !important; }
}
@media(min-width:1100px) {
  #weatherView .home-column .metrics .metric-sky:nth-child(-n+4) { border-top:1px solid var(--reading-line) !important; padding-top:18px; }
  #weatherView .home-column .metrics .metric-sky:nth-child(-n+2) { border-top:0 !important; padding-top:0; }
  #weatherView .home-columns { column-gap:24px; }
}

/* Um estilo de título: o mesmo h2 em todas as seções, sem sobretítulos nem ícones soltos. */
#weatherView :is(.section-icon,.weather-map-copy > .eyebrow,.notification-prompt .eyebrow) { display:none; }
#weatherView .sun-section .sun-copy { text-align:left; }
#weatherView .sun-section .sun-label { justify-content:flex-start; }
#weatherView .sun-section .sun-label svg { display:none; }
#weatherView .sun-section .sun-label span { color:var(--reading-ink); font-size:1.3rem; font-weight:600; letter-spacing:-.02em; line-height:1.25; }
#weatherView .sun-section .sun-copy strong { margin-top:10px; font-size:clamp(1.9rem,7vw,2.6rem); font-weight:600; }
/* Sino em traço, da mesma família dos ícones de leitura (antes era um emoji). */

/* 7 dias no celular: dia da semana sozinho (a data continua no detalhe e no rótulo do botão). */
@media(max-width:720px) {
  #weatherView .forecast-list .forecast-row { padding-block:10px; min-height:52px; }
  #weatherView .forecast-list .forecast-row > .forecast-day > span { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  #weatherView .forecast-list .forecast-row > .forecast-uv { font-size:.8125rem; }
}

/* Radar: erro sempre legível (a regra ".weather-map-card p" pintava o texto com a cor de leitura
   clara sobre a caixa branca à noite) e "Indisponível" fora do azul de link. */
#radarMapContent .weather-map-error { background:#fff; color:#8a2d12; pointer-events:none; } /* o toque passa para o mapa (abrir o radar) */
#radarMapContent #weatherFrameTime[data-state="error"] { color:var(--reading-muted,var(--map-ink)); }
/* Dentro do cartão a largura útil é menor: Sol e Lua empilham antes (nome da fase sem quebrar no meio). */
@media(max-width:440px) {
  #weatherView .sky-pair { grid-template-columns:minmax(0,1fr); row-gap:14px; }
  #weatherView .sky-pair-moon { padding:14px 0 0; border-left:0; border-top:1px solid var(--reading-line); }
  #weatherView .sky-pair-sun { padding-right:0; }
}
/* Ciclo do dia enxuto: uma linha (duração · o que falta), o arco com os horários nas pontas e a Lua
   numa linha. Antes o número grande, a frase, o arco e a tabela repetiam a mesma informação. */
#weatherView .sun-section { gap:14px; }
#weatherView .sun-section .sun-copy .sun-summary { margin:6px 0 0; font-size:.95rem; line-height:1.45; }
#weatherView .sun-section .sun-copy .sun-summary strong { display:inline; margin:0; color:var(--reading-ink); font-size:inherit; font-weight:500; letter-spacing:0; line-height:inherit; }
#weatherView .sun-section #sunPhrase:not(:empty)::before { content:" · "; }
/* "Pôr do sol promete" etc.: estimativa pelas nuvens por camada; some quando não há leitura. */
#weatherView .sun-section .sunset-glow { margin:4px 0 0; color:var(--reading-muted); font-size:.875rem; line-height:1.4; }
#weatherView .sun-section .sunset-glow:empty { display:none; }
#weatherView .sun-section .sun-ends { display:flex; justify-content:space-between; gap:12px; width:100%; margin-top:-22px; border:0; }
#weatherView .sun-section .sun-ends div { display:grid; gap:2px; min-width:0; padding:0; border:0; text-align:left; }
#weatherView .sun-section .sun-ends div + div { text-align:right; }
#weatherView .sun-section .sun-ends span { font-size:.8125rem; letter-spacing:0; }
#weatherView .sun-section .sun-ends strong { color:var(--reading-ink); font-size:1.15rem; font-weight:600; }
/* Cartão da Lua (pedido do usuário, no estilo do Apple Weather): fase, iluminação, próximo nascer/pôr e
   dias até a lua cheia à esquerda; o mesmo #moonDisc (textura NASA, fase de moon-view) grande à direita.
   Só pintura: sem transform, blur ou z-index. O halo é um degradê radial no fundo do próprio SVG. */
#weatherView .sun-section .moon-card { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:16px; width:100%; padding:16px 0 0; border-top:1px solid var(--reading-line); }
#weatherView .sun-section .moon-card-title { margin:0 0 6px; color:var(--reading-ink); font:600 .8125rem/1.3 var(--font-ui); letter-spacing:.06em; text-transform:uppercase; text-align:left; }
#weatherView .sun-section .moon-card .moon-label { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
#weatherView .sun-section .moon-card-rows { display:grid; margin:0; padding:0; border:0; }
#weatherView .sun-section .moon-card-rows div { display:flex; justify-content:space-between; align-items:baseline; gap:12px; min-width:0; padding:9px 0; border:0; border-bottom:1px solid var(--reading-line); }
#weatherView .sun-section .moon-card-rows div:last-child { border-bottom:0; }
#weatherView .sun-section .moon-card-rows dt { margin:0; color:var(--reading-muted); font:400 .9375rem/1.35 var(--font-ui); letter-spacing:0; text-align:left; white-space:nowrap; }
#weatherView .sun-section .moon-card-rows dd { margin:0; color:var(--reading-ink); font:500 .9375rem/1.35 var(--font-ui); font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; }
#weatherView .sun-section .moon-card-disc { display:block; width:clamp(104px,28vw,148px); height:auto; aspect-ratio:1; padding:6px; border-radius:50%; background:radial-gradient(circle closest-side,rgba(214,226,255,.16) 78%,rgba(214,226,255,.05) 90%,transparent 100%); }
body[data-ink="dark"] #weatherView .sun-section .moon-card-disc { background:radial-gradient(circle closest-side,rgba(19,35,61,.22) 80%,rgba(19,35,61,.06) 92%,transparent 100%); }
@media (max-width:359px) { #weatherView .sun-section .moon-card { gap:10px; } #weatherView .sun-section .moon-card-disc { width:84px; padding:4px; } #weatherView .sun-section .moon-card-rows div { display:grid; gap:2px; padding:7px 0; } #weatherView .sun-section .moon-card-rows dd { text-align:left; } }
/* Respiro entre o último cartão e a linha do rodapé (a borda do cartão encostava nela). */
#weatherView { padding-bottom:28px; }
@media (forced-colors:active) {
  #weatherView :is(#alertas,#tips,#chuva,.quick-metrics,.metrics,.weather-map-section,#previsao,#notificationPrompt,.sun-section) { border-color:CanvasText !important; box-shadow:none; }
}

/* Busca de cidades: digitando, os resultados sobem para logo abaixo do campo, antes dos botões e
   favoritos (que continuam ali embaixo). No celular o teclado escondia a lista lá no fim. */
#cityDialog[data-searching] :is(#cityResults,#cityPickerStatus) { order:-1; }

/* Próximas horas e 7 dias: complementos só para leitores de tela (o nome do botão é o texto visível). */
#weatherView :is(.hourly-peek-item,.forecast-row) .peek-extra { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }

/* Limpeza de interface (outubro/2026). */
#weatherView .dry-window-line[hidden] { display:none; }
/* 24 horários numa fileira que rola para o lado: seis e meio à vista (o meio horário mostra que tem mais). */
#weatherView .hourly-peek-list { gap:4px; grid-auto-columns:max(44px, calc((100% - 24px) / 6.5)); scroll-padding-inline:0; }
#weatherView .hourly-peek-item { scroll-snap-align:start; }
/* Dia sem chuva relevante: a coluna da chuva fica vazia, mantendo as gotas dos outros dias alinhadas. */
#weatherView .forecast-rain[data-rain="none"] { min-height:1px; }
/* Marcador do AQI igual ao do UV: a pílula de borda grossa parecia um "0" sobre a barra. */
#weatherView .air-scale i { top:50%; width:12px; height:12px; border:2px solid var(--panel-strong); border-radius:50%; background:var(--text); box-shadow:0 0 0 1px var(--text); transform:translate(-50%,-50%); }
/* Rodapé compacto: links lado a lado (quebram quando não cabem); uma lista aberta ocupa a linha toda. */
footer.shell .footer-details { display:flex; flex-wrap:wrap; justify-content:center; gap:0 20px; }
/* Termos de uso é um link de verdade (página /termos/): mesmo alvo de 44px e alinhamento dos botões vizinhos. */
footer.shell .footer-details a.footer-link { display:inline-flex; align-items:center; }
footer.shell .capital-links { display:flex; flex-wrap:wrap; justify-content:center; column-gap:20px; margin-top:-24px; }
footer.shell .capital-links > details[open] { flex-basis:100%; }
/* Celular: "Chuva na região" numa linha só; o botão vira "Radar" (o nome acessível continua "Abrir radar"). */
#weatherView #weatherMapCity:empty { min-height:1lh; }
@media (max-width:420px) { #weatherView .expand-radar-verb { display:none; } }
/* Abaixo de 340 px o título volta a quebrar para não encostar no ⓘ/botão. */
@media (min-width:340px) and (max-width:420px) { #weatherView .weather-map-copy h2 { white-space:nowrap; } }
/* Próximas horas: o "°" fica pendurado à direita (sem ocupar largura), então os algarismos se
   centralizam debaixo do ícone, como no Apple Weather. */
#weatherView .hourly-peek-item > strong { white-space:nowrap; }
#weatherView .hourly-peek-item > strong .peek-deg { margin-right:-.46em; }
/* Atalhos da Home para Brasil agora e Últimos 30 dias. */
#weatherView .home-shortcuts { display:flex; flex-wrap:wrap; gap:0 24px; margin-top:6px; padding:6px 0 0; border:0; border-top:1px solid var(--reading-line); border-radius:0; background:none; box-shadow:none; }
#weatherView .home-shortcut { min-height:44px; padding:0; border:0; background:none; color:var(--reading-link); font:inherit; font-size:.9375rem; font-weight:600; cursor:pointer; }
#weatherView .home-shortcut span { margin-left:2px; }

/* 7 dias no celular: a barra mínima-máxima ficava espremida (~33 px em 393 px). O dia tem largura
   própria até 4,5rem (cabe "Domingo"), a chuva 3,5rem e as temperaturas trilhos de 3,4ch; o resto vai para a barra. */
@media(max-width:720px) {
  /* 1.25.1 (pedido do usuário): nome do dia maior (1,125rem, coluna até 4,9rem: cabe "Domingo") e o ícone no meio do
     espaço entre o dia e a chuva (coluna flexível, ícone centrado), em vez de colado no nome. */
  #weatherView .forecast-list .forecast-row { grid-template-columns:minmax(3.6rem,4.9rem) 44px 3.5rem minmax(6.4rem,1fr); column-gap:6px; }
  #weatherView .forecast-list .forecast-row > .forecast-condition { justify-self:center; }
  #weatherView .forecast-list .forecast-row > .temp-range { grid-template-columns:3.4ch minmax(24px,1fr) 3.4ch; column-gap:6px; }
  #weatherView .forecast-list .forecast-day > strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}
#weatherView .forecast-day .day-short { display:none; }
/* Telas estreitas (até 374 px): "Sáb", "Dom"… em vez de cortar o nome; o nome inteiro segue para leitores de tela. */
@media(max-width:374px) {
  /* Até 374 px a barra ficava com ~30 px: chuva em 3rem (cabe "100%" e "12,5 mm") e espaços menores. */
  #weatherView .forecast-list .forecast-row { grid-template-columns:2.6rem 32px 3rem minmax(0,1fr); column-gap:6px; }
  #weatherView .forecast-list .forecast-row > .temp-range { column-gap:5px; }
  #weatherView .forecast-list .forecast-day .day-short { display:inline; }
  #weatherView .forecast-list .forecast-day .day-short ~ .weekend-note { display:none; }
  #weatherView .forecast-list .forecast-day .day-full:has(+ .day-short) { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
}

/* Organizar favoritos: linhas com mover para cima/baixo no lugar dos cartões. */
.favorite-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.favorite-organize { min-height:44px; padding:0 4px; border:0; background:none; color:var(--map-link,var(--brand-blue)); font:inherit; font-weight:600; cursor:pointer; }
.favorite-organize[hidden] { display:none; }
.favorite-city-list[data-editing] { display:flex; flex-direction:column; gap:0; overflow:visible; }
.favorite-order-row { display:grid; grid-template-columns:minmax(0,1fr) 44px 44px; align-items:center; gap:4px; min-height:48px; border-bottom:1px solid rgba(255,255,255,.12); }
.favorite-order-row:last-child { border-bottom:0; }
.favorite-order-row > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.favorite-order-row button { width:44px; height:44px; border:0; border-radius:999px; background:none; color:inherit; font:inherit; font-size:1.15rem; cursor:pointer; }
.favorite-order-row button:disabled { opacity:.3; cursor:default; }
#weatherView .swipe-hint { margin:4px auto 0; color:var(--reading-muted); font-size:.8125rem; text-align:center; }
#weatherView .swipe-hint[hidden] { display:none; }
.location-notice .notice-status { display:block; margin-top:4px; }
.location-notice .notice-status:empty { display:none; }

/* Convite de avisos na hora certa (chuva prevista ou aviso do INMET): uma linha discreta, sem cartão. */
#weatherView .alert-nudge { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:4px 12px; padding:6px 4px; color:var(--reading-ink); }
#weatherView .alert-nudge[hidden] { display:none; }
#weatherView .alert-nudge p { flex:1 1 220px; margin:0; font-size:.9375rem; }
#weatherView .alert-nudge-actions { display:flex; gap:4px; }
#weatherView .alert-nudge button { min-height:44px; padding:0 10px; border:0; background:none; color:var(--reading-link); font:inherit; font-size:.9375rem; font-weight:600; cursor:pointer; }
#weatherView .alert-nudge .alert-nudge-dismiss { color:var(--reading-muted); font-weight:400; }
/* Convite para instalar (só navegador do celular): linha discreta no fim dos 7 dias, ícone da marca. */
#weatherView .install-card { display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; margin:14px 0 0; padding:12px 0 0; border-top:1px solid var(--card-border, #aac7e526); color:var(--reading-ink); }
#weatherView .install-card[hidden] { display:none; }
#weatherView .install-card-icon { flex:0 0 40px; width:40px; height:40px; border-radius:10px; background:url("/icon-192.png") center / cover no-repeat; }
#weatherView .install-card p { flex:1 1 180px; margin:0; font-size:.875rem; line-height:1.4; color:var(--reading-muted); }
#weatherView .install-card p strong { display:block; color:var(--reading-ink); font-size:.9375rem; font-weight:600; }
#weatherView .install-card-actions { display:flex; gap:4px; margin-left:auto; }
#weatherView .install-card button { min-height:44px; padding:0 10px; border:0; background:none; color:var(--reading-link); font:inherit; font-size:.9375rem; font-weight:600; cursor:pointer; }
#weatherView .install-card .install-card-dismiss { color:var(--reading-muted); font-weight:400; }
/* Nascer/pôr como coluna própria entre as horas (horário, símbolo, nome), nas mesmas linhas das horas:
   dentro da coluna da hora ele abria uma linha vazia embaixo de todas as outras. */
#weatherView .hourly-solar-item { cursor:default; color:var(--reading-link); }
#weatherView .hourly-solar-item .peek-time { color:var(--reading-link); font-variant-numeric:tabular-nums; }
#weatherView .hourly-solar-item .solar-glyph { width:30px; height:30px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
#weatherView .hourly-peek-item.hourly-solar-item > strong.solar-label { font-size:.8125rem; font-weight:500; line-height:1.15; white-space:normal; text-align:center; color:var(--reading-link); }
/* A fileira rola pelo gesto; a metade do 7º horário já mostra que continua, então a barra some. */
#weatherView .hourly-peek-list { scrollbar-width:none; }
/* Hora atual só em azul no horário: o traço embaixo ficava longe do conteúdo, no pé da coluna. */
#weatherView .hourly-peek-item.is-now { border-bottom-color:transparent; }
#weatherView .hourly-peek-list .hourly-peek-item { padding-bottom:4px; }
#weatherView .hourly-peek-item .peek-rain { min-height:18px; margin-top:-2px; }
/* Gota + chance cabem na coluna (~55 px a 390 px): com a gota de 16 px e 4 px de espaço o grupo passava da coluna
   e a gota parecia ser da hora anterior. Gota menor e colada no número, centrados juntos sob a temperatura. */
#weatherView .hourly-peek-item .peek-rain { gap:1px; white-space:nowrap; font-variant-numeric:tabular-nums; }
#weatherView .hourly-peek-item .peek-rain .rain-metric-icon { width:12px; height:12px; flex:none; }

#weatherView .hourly-peek-list::-webkit-scrollbar { display:none; }

/* ===== Diálogos v2 (redesign a pedido, outubro/2026) =====
   Folha no estilo de listas agrupadas: cabeçalho leve, grupos em cartões com linhas finas,
   botões em pílula e interruptores no lugar das caixas de seleção. Só pintura: sem blur,
   sem transform/z-index em blocos; o motion de entrada/saída continua em dialog-motion.js. */
html body :is(#cityDialog,#accountDialog,#sourcesDialog,#hourlyDetailDialog,#dailyDetailDialog,#shareWeatherDialog,#brazilDialog,#monthDialog,#homeLayoutDialog,#changelogDialog,#whatsNewDialog,#alertDetail,#installPushDialog) {
  --dialog-bg:#0b1830; --dialog-surface:#ffffff0d; --dialog-surface-2:#ffffff17; --dialog-line:#ffffff14;
  --dialog-text:#f2f6ff; --dialog-muted:#a9b8d0; --sheet-radius:22px;
  border-color:#ffffff1a; border-radius:32px;
  background:linear-gradient(180deg,#14284a 0,#0b1830 240px) #0b1830;
  box-shadow:0 30px 90px #000a,inset 0 1px 0 #ffffff14;
}
html body :is(#cityDialog,#accountDialog,#sourcesDialog,#hourlyDetailDialog,#dailyDetailDialog,#shareWeatherDialog,#brazilDialog,#monthDialog,#homeLayoutDialog,#changelogDialog,#whatsNewDialog,#alertDetail,#installPushDialog) .dialog-heading {
  padding:20px 16px 10px 24px; border-bottom:0; background:transparent;
}
html body :is(#cityDialog,#accountDialog,#sourcesDialog,#hourlyDetailDialog,#dailyDetailDialog,#shareWeatherDialog,#brazilDialog,#monthDialog,#homeLayoutDialog,#changelogDialog,#whatsNewDialog,#alertDetail,#installPushDialog) .dialog-heading h2 { font-size:1.5rem; font-weight:650; letter-spacing:-.025em; }
html body :is(#cityDialog,#accountDialog,#sourcesDialog,#hourlyDetailDialog,#dailyDetailDialog,#shareWeatherDialog,#brazilDialog,#monthDialog,#homeLayoutDialog,#changelogDialog,#whatsNewDialog,#alertDetail,#installPushDialog) .dialog-close {
  width:44px; height:44px; border-radius:50%; background:#ffffff14; color:var(--dialog-text); font-size:24px; font-weight:300;
}
html body :is(#cityDialog,#accountDialog,#sourcesDialog) .dialog-scroll { padding:8px 20px 28px; }
/* Botões: pílulas. Primário no azul da marca; secundário em superfície clara translúcida. */
html body :is(#cityDialog,#accountDialog,#sourcesDialog) button:not(.dialog-close):not(.city-result):not(.favorite-city-card):not(.account-provider):not(.favorite-organize):not(.account-text-action):not(.city-button):not(.account-more-item) {
  border:0; border-radius:999px; background:var(--dialog-surface-2); color:var(--dialog-text); font-weight:600;
}
html body :is(#cityDialog,#accountDialog) :is(#accountSubmit,#profileSave,#notificationPreferencesSave,#savedPlaceSave,#accountRecoverySave) { background:var(--brand-blue); color:var(--on-accent); }
html body #accountDialog #notificationPreferencesSave:disabled { background:color-mix(in srgb,var(--brand-blue) 35%,transparent); color:color-mix(in srgb,var(--on-accent) 65%,transparent); }
html body :is(#cityDialog,#accountDialog,#sourcesDialog) :is(input:not([type=checkbox]),select) {
  min-height:50px; border:1px solid #ffffff1f; border-radius:16px; background:#ffffff0a; color:var(--dialog-text);
}
html body :is(#cityDialog,#accountDialog,#sourcesDialog) :is(input:not([type=checkbox]),select):focus { border-color:var(--brand-blue); outline:none; box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-blue) 25%,transparent); }
/* Títulos de grupo: discretos, como cabeçalhos de lista. */
html body :is(#cityDialog,#accountDialog,#sourcesDialog) :is(h3,h4,legend) { margin:0 0 10px; padding:0 4px; color:var(--dialog-muted); font-size:.875rem; font-weight:600; letter-spacing:0; text-transform:none; }
/* Interruptores: as mesmas caixas de seleção nativas (papel, foco e teclado intactos), desenhadas como chave. */
html body :is(#accountDialog,#sourcesDialog) input[type=checkbox] {
  -webkit-appearance:none; appearance:none; flex:none; position:relative; width:50px !important; height:30px !important; margin:0 !important;
  border-radius:999px; background:#ffffff2e; cursor:pointer; transition:background-color .2s ease;
}
html body :is(#accountDialog,#sourcesDialog) input[type=checkbox]::before {
  content:""; position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%; background:#fff;
  box-shadow:0 1px 3px #0006; transition:left .2s ease;
}
html body :is(#accountDialog,#sourcesDialog) input[type=checkbox]:checked { background:var(--brand-blue); }
html body :is(#accountDialog,#sourcesDialog) input[type=checkbox]:checked::before { left:23px; }
html body :is(#accountDialog,#sourcesDialog) input[type=checkbox]:disabled { opacity:.45; cursor:default; }
html body :is(#accountDialog,#sourcesDialog) input[type=checkbox]:focus-visible { outline:2px solid #88b9ff; outline-offset:3px; }
@media (forced-colors:active) { html body :is(#accountDialog,#sourcesDialog) input[type=checkbox] { -webkit-appearance:auto; appearance:auto; width:20px !important; height:20px !important; } html body :is(#accountDialog,#sourcesDialog) input[type=checkbox]::before { content:none; } }
@media (prefers-reduced-motion:reduce){ html body :is(#accountDialog,#sourcesDialog) input[type=checkbox],html body :is(#accountDialog,#sourcesDialog) input[type=checkbox]::before { transition:none; } }

/* --- Suas cidades --- */
html body #cityDialog .city-search-field { padding:4px 20px 14px; border-bottom:0; background:transparent; }
html body #cityDialog .city-search-field label { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
html body #cityDialog #citySearch {
  min-height:52px; padding-left:48px; border-radius:999px; background-color:#ffffff12;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9b8d0' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:18px 50%; background-size:20px;
}
/* Microfone dentro da pílula de busca (só aparece com reconhecimento de fala disponível). */
html body #cityDialog .city-search-field { position:relative; }
html body #cityDialog .city-search-field:has(.voice-search:not([hidden])) #citySearch { padding-right:56px; }
html body #cityDialog #voiceSearch {
  position:absolute; top:50%; right:26px; width:44px; height:44px; min-height:44px; margin-top:-27px; padding:0; border:0; border-radius:999px;
  background:transparent; color:#a9b8d0;
}
html body #cityDialog .voice-search::before {
  content:""; display:block; width:22px; height:22px; margin:auto; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='3' width='6' height='11' rx='3'/%3E%3Cpath d='M5 11a7 7 0 0 0 14 0M12 18v3'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='3' width='6' height='11' rx='3'/%3E%3Cpath d='M5 11a7 7 0 0 0 14 0M12 18v3'/%3E%3C/svg%3E") center/contain no-repeat;
}
html body #cityDialog #voiceSearch[data-listening] { background:var(--brand-blue); color:var(--on-accent); }
@media (forced-colors:active){ html body #cityDialog .voice-search::before { background:ButtonText; } }
@media (max-width:600px){ html body #cityDialog #voiceSearch { right:22px; margin-top:-26px; } }
html body #cityDialog .city-picker { gap:22px; }
html body #cityDialog .city-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
html body #cityDialog .city-actions > button {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; min-height:84px; padding:12px 2px; border:0;
  border-radius:20px; background:var(--dialog-surface); color:var(--dialog-text); font-size:.75rem; font-weight:600; line-height:1.2; text-align:center;
}
html body #cityDialog .city-actions > button::before {
  content:""; width:24px; height:24px; background:var(--brand-blue); background:#8fb4ff;
  -webkit-mask:var(--action-icon) center/contain no-repeat; mask:var(--action-icon) center/contain no-repeat;
}
html body #cityDialog #locateCity { background:var(--brand-blue); color:var(--on-accent); }
html body #cityDialog #locateCity::before { background:#fff; }
html body #cityDialog #favoriteCity { --action-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='m12 3 2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 17l-5.4 2.9 1-6.1-4.4-4.3 6.1-.9z'/%3E%3C/svg%3E"); }
html body #cityDialog #favoriteCity[aria-pressed=true] { --action-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='m12 3 2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 17l-5.4 2.9 1-6.1-4.4-4.3 6.1-.9z'/%3E%3C/svg%3E"); }
html body #cityDialog #favoriteCity[aria-pressed=true]::before { background:#ffd166; }
html body #cityDialog #locateCity { --action-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='7'/%3E%3Ccircle cx='12' cy='12' r='2.5' fill='black'/%3E%3Cpath d='M12 2v3m0 14v3M2 12h3m14 0h3'/%3E%3C/svg%3E"); }
html body #cityDialog #brazilOpen { --action-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.6 3.8 5.6 3.8 9s-1.3 6.4-3.8 9c-2.5-2.6-3.8-5.6-3.8-9S9.5 5.6 12 3Z'/%3E%3C/svg%3E"); }
html body #cityDialog .favorite-heading { padding:0 0 0 4px; }
html body #cityDialog .favorite-heading h3 { margin:0; padding:0; }
html body #cityDialog .favorite-organize { color:#8fb4ff; font-size:.875rem; }
html body #cityDialog .favorite-city-card {
  border:1px solid transparent; border-radius:22px; background:var(--dialog-surface); color:var(--dialog-text); padding:14px; font-weight:400;
}
html body #cityDialog .favorite-city-card[aria-current=true] { border-color:var(--brand-blue); background:color-mix(in srgb,var(--brand-blue) 12%,transparent); }
html body #cityDialog .favorite-city-card > strong { font-size:.9375rem; font-weight:600; }
html body #cityDialog .favorite-city-card .favorite-reading { font-size:2rem; font-weight:300; letter-spacing:-.03em; line-height:1.05; }
html body #cityDialog .favorite-city-card :is(.favorite-summary,.favorite-range,.favorite-local-time,.favorite-updated) { font-weight:400; }
html body #cityDialog .favorite-city-card .favorite-summary:not(.favorite-feels-like) { color:var(--dialog-text); font-size:.875rem; }
html body #cityDialog .favorite-city-card :is(.favorite-feels-like,.favorite-range,.favorite-local-time,.favorite-updated) { color:var(--dialog-muted); font-size:.8125rem; }
html body #cityDialog .favorite-city-card .favorite-alert { font-size:.8125rem; font-weight:500; }
html body #cityDialog .city-results { border-top:0; border-radius:var(--sheet-radius); background:var(--dialog-surface); overflow:hidden; }
html body #cityDialog .city-results:empty { display:none; }
html body #cityDialog .city-result { min-height:64px; padding:12px 18px; gap:2px; border-bottom:1px solid var(--dialog-line); }
html body #cityDialog .city-results li:last-child .city-result { border-bottom:0; }
html body #cityDialog .city-result span { font-size:1rem; font-weight:600; }
html body #cityDialog .city-result small { font-size:.8125rem; }
html body #cityDialog .city-result[data-current=true] { padding-left:18px; border-left:0; background:color-mix(in srgb,var(--brand-blue) 12%,transparent); }
html body #cityDialog #cityPickerStatus { padding:0 4px; }
html body #cityDialog .saved-places { margin:22px 0 0; padding:4px 18px; border:0; border-radius:var(--sheet-radius); background:var(--dialog-surface); }
html body #cityDialog .saved-places > summary { display:flex; flex-direction:column; justify-content:center; min-height:64px; font-size:1rem; font-weight:600; list-style:none; }
html body #cityDialog .saved-places > summary::-webkit-details-marker { display:none; }
html body #cityDialog .saved-places > summary span { margin:2px 0 0; font-size:.8125rem; font-weight:400; }
html body #cityDialog .saved-places[open] > summary { border-bottom:1px solid var(--dialog-line); }
html body #cityDialog .saved-place-row button { background:var(--dialog-surface-2); }

/* --- Minha conta --- */
html body #accountDialog #accountIntro { margin:4px 4px 20px; }
html body #accountDialog .account-tabs { padding:4px; border-radius:999px; background:#ffffff0f; }
html body #accountDialog #accountTabs button { min-height:44px; border-radius:999px; background:transparent; color:var(--dialog-muted); }
html body #accountDialog #accountTabs button[aria-pressed=true] { background:#ffffff26; color:#fff; }
html body #accountDialog .account-provider { min-height:50px; border-radius:999px; }
html body #accountDialog .account-text-action { min-height:44px; border:0; background:transparent; color:var(--dialog-muted); }
html body #accountDialog .profile-identity {
  flex-direction:column; align-items:center; gap:12px; margin:4px 0 22px; padding:24px 16px 22px; border-radius:26px; text-align:center;
  background:radial-gradient(120% 100% at 50% 0,color-mix(in srgb,var(--brand-blue) 25%,transparent),transparent 70%),var(--dialog-surface);
}
html body #accountDialog .profile-identity strong { font-size:1.375rem; font-weight:650; }
html body #accountDialog .profile-avatar { width:76px; height:76px; border-radius:50%; background:var(--brand-blue); color:var(--on-accent); font-size:2rem; font-weight:600; box-shadow:0 10px 30px color-mix(in srgb,var(--brand-blue) 33%,transparent); }
html body #accountDialog #accountIdentity { margin:2px 0 0; }
html body #accountDialog #profileForm { gap:10px; padding:16px; border-radius:var(--sheet-radius); background:var(--dialog-surface); }
html body #accountDialog #profileForm small { padding:0 4px; }
html body #accountDialog .notification-settings { margin:26px 0 0; padding:0; border-top:0; }
html body #accountDialog .notification-settings-head { padding:0 4px; }
html body #accountDialog .notification-settings-head h3 { margin:0; padding:0; color:var(--dialog-text); font-size:1.25rem; font-weight:650; }
html body #accountDialog .notification-status { min-height:32px; padding:6px 12px; border-radius:999px; font-size:.8125rem; font-weight:600; }
html body #accountDialog #notificationSupportNote { margin:10px 4px 14px; font-size:.9375rem; }
html body #accountDialog .notification-checks { margin:0 0 12px; padding:0 16px; border:0; border-radius:var(--sheet-radius); background:var(--dialog-surface); }
html body #accountDialog .notification-checks summary { display:flex; align-items:center; min-height:52px; color:var(--dialog-text); font-size:.9375rem; }
html body #accountDialog .notification-actions { margin:0 0 26px; gap:8px; }
html body #accountDialog .notification-actions button { min-height:50px; }
html body #accountDialog #notificationToggle { background:var(--brand-blue); color:var(--on-accent); }
html body #accountDialog .alert-preferences { gap:26px; }
html body #accountDialog .alert-preferences > small,html body #accountDialog .notification-help,html body #accountDialog #notificationPrivacy { margin:-16px 4px 0; font-size:.8125rem; line-height:1.5; }
html body #accountDialog :is(.notification-types,.notification-timing,.notification-city-choices) { margin:0; padding:0; border:0; }
html body #accountDialog :is(.notification-types,.notification-timing,.notification-city-choices) legend { float:left; width:100%; color:var(--dialog-muted); font-size:.875rem; font-weight:600; }
html body #accountDialog :is(.notification-types,.notification-timing,.notification-city-choices) legend + * { clear:both; }
html body #accountDialog .notification-types { display:block; padding:0; border-radius:var(--sheet-radius); }
html body #accountDialog .notification-types label:not(.notification-summary-time) {
  flex-direction:row-reverse; justify-content:space-between; align-items:center; gap:14px; min-height:56px; margin:0; padding:12px 16px;
  border-bottom:1px solid var(--dialog-line); background:var(--dialog-surface); color:var(--dialog-text); font-size:.9375rem;
}
html body #accountDialog .notification-types label:not(.notification-summary-time) strong { font-weight:500; }
html body #accountDialog .notification-types label:not(.notification-summary-time) small { margin-top:2px; font-size:.8125rem; }
html body #accountDialog .notification-types > label:first-of-type { border-radius:var(--sheet-radius) var(--sheet-radius) 0 0; }
html body #accountDialog .notification-types > label:nth-last-of-type(2) { border-bottom:0; border-radius:0 0 var(--sheet-radius) var(--sheet-radius); }
html body #accountDialog .notification-types:has(.notification-summary-time:not([hidden])) > label:nth-last-of-type(2) { border-bottom:1px solid var(--dialog-line); border-radius:0; }
html body #accountDialog form .notification-types .notification-summary-time { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 16px; border-radius:0 0 var(--sheet-radius) var(--sheet-radius); background:var(--dialog-surface); color:var(--dialog-text); }
html body #accountDialog form .notification-types .notification-summary-time[hidden] { display:none; }
html body #accountDialog form .notification-types .notification-summary-time input { width:auto; min-height:40px; }
html body #accountDialog .notification-timing { display:block; padding:0; border-block:0; }
html body #accountDialog .notification-timing > :is(label,div,small) { margin:0; }
html body #accountDialog .notification-timing > label:not(.notification-quiet-toggle),html body #accountDialog .notification-timing > .notification-time-pair { padding:14px 16px; background:var(--dialog-surface); border-bottom:1px solid var(--dialog-line); color:var(--dialog-muted); }
html body #accountDialog .notification-timing > label:first-of-type { border-radius:var(--sheet-radius) var(--sheet-radius) 0 0; }
html body #accountDialog form .notification-timing .notification-quiet-toggle { flex-direction:row-reverse; justify-content:space-between; min-height:56px; padding:12px 16px; background:var(--dialog-surface); border-bottom:1px solid var(--dialog-line); font-size:.9375rem; }
html body #accountDialog .notification-timing > label:last-of-type { border-bottom:0; border-radius:0 0 var(--sheet-radius) var(--sheet-radius); }
html body #accountDialog .notification-timing > small { display:block; padding:10px 4px 12px; font-size:.8125rem; }
html body #accountDialog .notification-timing > small:last-child { padding-bottom:0; }
html body #accountDialog .notification-city-choices .notification-location {
  flex-direction:row-reverse; justify-content:space-between; align-items:center; min-height:56px; margin:0 0 8px; padding:12px 16px;
  border:0; border-radius:18px; background:var(--dialog-surface); font-size:.9375rem;
}
html body #accountDialog .notification-city-choices > small { display:block; padding:2px 4px 0; font-size:.8125rem; }
html body #accountDialog :is(.notification-locations,.notification-devices) { margin-top:26px; padding:0; border-top:0; }
html body #accountDialog :is(.notification-locations,.notification-devices) > div { padding:4px 16px; border-radius:var(--sheet-radius); background:var(--dialog-surface); }
html body #accountDialog :is(.notification-locations,.notification-devices) > div > p { margin:12px 0; }
html body #accountDialog .notification-locations > small { display:block; padding:8px 4px 0; }
html body #accountDialog :is(.notification-location-row,.notification-device) { padding:12px 0; border-bottom:1px solid var(--dialog-line); }
html body #accountDialog :is(.notification-location-row,.notification-device):last-child { border-bottom:0; }
html body #accountDialog :is(.notification-location-row,.notification-device) button { min-height:40px; border:0; background:var(--dialog-surface-2); }
html body #accountDialog #accountLogout { margin-top:30px; border:0; background:var(--dialog-surface); color:var(--brand-blue); color:#8fb4ff; }
/* Cartão como os outros grupos da conta. Antes: a linha só em cima (border-top da regra antiga) com cantos
   de 22 px virava um arco, e o véu de toque do summary era um retângulo sem canto, 16 px mais estreito. */
html body #accountDialog .account-delete { margin-top:10px; padding:0 16px; border:0; border-radius:var(--sheet-radius); background:var(--dialog-surface); }
html body #accountDialog .account-delete > summary { display:flex; align-items:center; justify-content:center; min-height:52px; margin:0 -16px; padding:0 16px; border-radius:var(--sheet-radius); color:#ff9d97; font-size:.9375rem; font-weight:500; }
html body #accountDialog .account-delete[open] > summary { border-radius:var(--sheet-radius) var(--sheet-radius) 0 0; }
html body #accountDialog .account-delete[open] { padding-bottom:16px; }
/* Previsão por cidade (pedido do usuário, outubro/2026): os links das páginas de cidade saíram do rodapé e
   ficam aqui, em "Mais do PLUVIA". Continuam no HTML de todas as páginas para o Google achar as cidades. */
/* O nav global (abas antigas de styles.css) desenhava uma pílula enorme por trás e pintava o link sob o dedo/mouse. */
html body #accountDialog .capital-links { display:block; margin:24px 0 0; padding:0; border:0; border-radius:0; background:none; box-shadow:none; }
html body #accountDialog .capital-links .capital-page-note { margin:0 4px 10px; color:var(--dialog-muted); font-size:.8125rem; line-height:1.5; }
html body #accountDialog .capital-links details { border-radius:var(--sheet-radius); background:var(--dialog-surface); }
html body #accountDialog .capital-links details + details { margin-top:8px; }
html body #accountDialog .capital-links summary { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:52px; padding:0 16px; border-radius:var(--sheet-radius); color:var(--dialog-text); font-size:1rem; font-weight:500; list-style:none; cursor:pointer; }
html body #accountDialog .capital-links summary::-webkit-details-marker { display:none; }
html body #accountDialog .capital-links summary::after { content:"›"; flex:none; color:var(--dialog-muted); font-size:1.4rem; line-height:1; }
html body #accountDialog .capital-links details[open]:not([data-closing]) > summary::after { rotate:90deg; }
html body #accountDialog .capital-links ul { display:flex; flex-wrap:wrap; gap:0 16px; margin:0; padding:0 16px 12px; list-style:none; }
html body #accountDialog .capital-links a, html body #accountDialog .capital-links a:hover { display:inline-flex; align-items:center; min-height:36px; padding:0; border-radius:0; background:none; box-shadow:none; transform:none; color:var(--dialog-link,var(--brand-blue)); font-size:.9375rem; font-weight:500; text-decoration:none; }
@media (hover:hover) { html body #accountDialog .capital-links a:hover { text-decoration:underline; } }
html body #accountDialog .capital-links a[aria-current="page"] { color:var(--dialog-text); font-weight:600; }
html body[data-ink="dark"] #accountDialog details.account-delete > summary { color:#b42318; }
html body #accountDialog #accountDelete { border:0; border-radius:999px; background:#d93a3a; color:#fff; }

/* --- Fontes de dados --- */
html body #sourcesDialog #sourcesBody > p { margin:4px 4px 18px; }
html body #sourcesDialog .sources-list { border-radius:var(--sheet-radius); background:var(--dialog-surface); overflow:hidden; }
html body #sourcesDialog .sources-list article {
  display:grid; grid-template-columns:40px minmax(0,1fr); column-gap:14px; padding:16px; border-bottom:1px solid var(--dialog-line);
}
html body #sourcesDialog .sources-list article:last-child { border-bottom:0; }
html body #sourcesDialog .sources-list article::before {
  content:""; position:static; grid-row:1 / span 3; width:40px; height:40px; border-radius:12px;
  background:#8fb4ff26 var(--kind-icon) center/22px no-repeat;
}
html body #sourcesDialog .sources-list article { --kind-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238fb4ff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 18a4 4 0 0 1-.6-7.96A6 6 0 0 1 18 9a4.5 4.5 0 0 1-.5 9z'/%3E%3C/svg%3E"); }
html body #sourcesDialog .sources-list article[data-kind=official] { --kind-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236fd0b0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 4 6v5c0 5 3.4 8.6 8 10 4.6-1.4 8-5 8-10V6z'/%3E%3Cpath d='m8.5 12 2.5 2.5 4.5-5'/%3E%3C/svg%3E"); }
html body #sourcesDialog .sources-list article[data-kind=official]::before { background:#6fd0b026 var(--kind-icon) center/22px no-repeat; }
html body #sourcesDialog .sources-list article[data-kind=observation] { --kind-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c4b5fd' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Cpath d='M16.2 7.8a6 6 0 0 1 0 8.4M7.8 16.2a6 6 0 0 1 0-8.4M19 5a10 10 0 0 1 0 14M5 19A10 10 0 0 1 5 5'/%3E%3C/svg%3E"); }
html body #sourcesDialog .sources-list article[data-kind=observation]::before { background:#c4b5fd26 var(--kind-icon) center/22px no-repeat; }
html body #sourcesDialog .sources-list strong { grid-column:2; grid-row:1; font-size:1rem; font-weight:600; line-height:1.35; }
html body #sourcesDialog .sources-list b { grid-column:2; grid-row:2; margin:2px 0 0; color:#8fb4ff; font-size:.8125rem; font-weight:500; letter-spacing:0; }
html body #sourcesDialog .sources-list article[data-kind=official] b { color:#7fdcbc; }
html body #sourcesDialog .sources-list article[data-kind=observation] b { color:#cbbcff; }
html body #sourcesDialog .sources-list span { grid-column:2; grid-row:3; margin:6px 0 0; font-size:.875rem; line-height:1.5; }
html body #sourcesDialog .official-observations { margin:28px 0 0; }
html body #sourcesDialog .official-observations > p { margin:0 4px 10px; font-size:.875rem; }
html body #sourcesDialog .official-observations a {
  display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:52px; margin:0; padding:12px 16px;
  border:0; border-bottom:1px solid var(--dialog-line); border-radius:0; background:var(--dialog-surface); color:var(--dialog-text); font-size:.9375rem; text-decoration:none;
}
html body #sourcesDialog .official-observations a::after { content:"↗"; flex:none; color:#8fb4ff; }
html body #sourcesDialog .official-observations a:nth-of-type(1) { border-radius:var(--sheet-radius) var(--sheet-radius) 0 0; }
html body #sourcesDialog .official-observations a:last-of-type { border-bottom:0; border-radius:0 0 var(--sheet-radius) var(--sheet-radius); }
html body #sourcesDialog .source-credits { margin:28px 0 0; }
html body #sourcesDialog .source-credits label[for=analyticsConsent] { display:flex; flex-direction:row-reverse; align-items:center; justify-content:space-between; gap:14px; min-height:56px; padding:12px 16px; border-radius:var(--sheet-radius); background:var(--dialog-surface); color:var(--dialog-text); font-size:.9375rem; cursor:pointer; }
html body #sourcesDialog .source-credits p { margin:10px 4px 0; font-size:.8125rem; line-height:1.55; }
@media (max-width:600px) {
  html body :is(#cityDialog,#accountDialog,#sourcesDialog,#hourlyDetailDialog,#dailyDetailDialog,#shareWeatherDialog,#brazilDialog,#monthDialog,#homeLayoutDialog,#changelogDialog,#whatsNewDialog,#alertDetail,#installPushDialog) { border-radius:28px; }
  html body :is(#cityDialog,#accountDialog,#sourcesDialog,#hourlyDetailDialog,#dailyDetailDialog,#shareWeatherDialog,#brazilDialog,#monthDialog,#homeLayoutDialog,#changelogDialog,#whatsNewDialog,#alertDetail,#installPushDialog) .dialog-heading { padding:18px 14px 8px 20px; }
  html body :is(#cityDialog,#accountDialog,#sourcesDialog) .dialog-scroll { padding:6px 16px 24px; }
  html body #cityDialog .city-search-field { padding:4px 16px 12px; }
}

/* Faxina da Home (outubro/2026, 3). Rótulos dos blocos em caixa normal, pequenos e cinza (como no
   Apple Weather); a linha "sem alertas" fica discreta, sem o selo azul; no radar da Home o nome
   "Chuva" sai (o título já diz) e só fica o horário da imagem; atalhos viram dois blocos com ícone. */
#weatherView .metric-head > span:first-child { text-transform:none; letter-spacing:0; font-weight:500; font-size:.9375rem; }
#weatherView .alerts-section[data-alert-state="clear"] #inmetCard .source-badge { min-height:0; padding:0; border:0; background:none; box-shadow:none; color:var(--reading-muted); font-size:.85rem; font-weight:500; line-height:1.35; letter-spacing:0; }
#weatherView .alerts-section[data-alert-state="clear"] #inmetCard .source-badge::after { content:"\00a0·"; }
#weatherView .alerts-section[data-alert-state="clear"] #inmetContent h3 { color:var(--reading-muted); font-weight:400; }
#weatherView .alerts-section[data-alert-state="clear"] #inmetCard { column-gap:6px; }
.weather-map-card #weatherLayerName { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.weather-map-card #weatherFrameTime { color:var(--reading-muted); font-size:.875rem; font-weight:400; }
.weather-map-card #weatherFrameTime[data-state="ready"]::before { content:"Imagem de radar das "; }
.weather-map-card #weatherFrameTime:not([data-state]) { display:none; }
#weatherView .air-index > span { letter-spacing:0; font-weight:500; text-transform:none; color:var(--reading-muted); }
#weatherView .home-shortcuts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:14px; padding:0; border-top:0; }
#weatherView .home-shortcut {
  display:flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:10px 12px; border-radius:16px;
  background:color-mix(in srgb, var(--reading-link) 12%, transparent); color:var(--reading-link); font-size:.9375rem; font-weight:600; text-align:center;
}
#weatherView .home-shortcut::before {
  content:""; flex:none; width:20px; height:20px; background:currentColor;
  -webkit-mask:var(--shortcut-icon) center/contain no-repeat; mask:var(--shortcut-icon) center/contain no-repeat;
}
#weatherView #homeBrazil { --shortcut-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.6 3.8 5.6 3.8 9s-1.3 6.4-3.8 9c-2.5-2.6-3.8-5.6-3.8-9S9.5 5.6 12 3Z'/%3E%3C/svg%3E"); }
@media (forced-colors:active) { #weatherView .home-shortcut::before { background:ButtonText; } }
/* "Últimos 30 dias" quebrava em duas linhas a 390 px (texto ~120 px num espaço de ~108): menos respiro e
   letra um pouco menor no celular; abaixo de 360 px cada atalho ocupa a linha inteira. */
@media (max-width:440px) { #weatherView .home-shortcut { gap:6px; padding:10px 8px; font-size:.875rem; white-space:nowrap; } }
@media (max-width:359px) { #weatherView .home-shortcuts { grid-template-columns:minmax(0,1fr); } }
/* Puxar para atualizar: chip escuro com indicador que gira só enquanto consulta. */
.pull-refresh { width:max-content; white-space:nowrap; border:0; background:#0b1830f0; color:#fff; box-shadow:0 8px 24px #0006; font-weight:500; }
.pull-refresh::before { content:""; flex:none; width:16px; height:16px; border:2px solid #ffffff40; border-top-color:#8fb4ff; border-radius:50%; }
.pull-refresh.loading::before { animation:spin .9s linear infinite; }
@media (prefers-reduced-motion:reduce){ .pull-refresh.loading::before { animation:none; } }

/* Novidades do PLUVIA: lista de versões no diálogo (sempre escuro). Novidade no azul da marca, correção em cinza. */
.changelog-intro { margin:0 0 12px; color:rgba(255,255,255,.72); font-size:.875rem; }
.changelog-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:20px; }
.changelog-entry h3 { display:flex; align-items:center; gap:8px; margin:0; font-size:1.0625rem; font-weight:600; }
.changelog-badge { padding:2px 8px; border-radius:999px; background:var(--brand-blue,var(--brand-blue)); color:var(--on-accent); font-size:.8125rem; font-weight:600; }
.changelog-entry[data-kind="fix"] .changelog-badge { background:rgba(255,255,255,.16); }
.changelog-date { margin:2px 0 0; color:rgba(255,255,255,.64); font-size:.8125rem; }
.changelog-title { margin:8px 0 0; font-weight:600; }
.changelog-entry ul { margin:6px 0 0; padding-left:1.15em; display:flex; flex-direction:column; gap:4px; color:rgba(255,255,255,.86); }
/* Na folha (mesmo visual de Minha conta e Fontes de dados), as regras genéricas de título e parágrafo dos
   diálogos não valem para a lista de versões. */
html body :is(#changelogDialog,#whatsNewDialog) .changelog-entry h3 { margin:0; padding:0; color:var(--dialog-text); font-size:1.0625rem; font-weight:600; letter-spacing:0; }
html body #changelogDialog .changelog-intro { margin:0 0 16px; font-size:.875rem; }
html body :is(#changelogDialog,#whatsNewDialog) .changelog-date { margin:2px 0 0; font-size:.8125rem; }
html body :is(#changelogDialog,#whatsNewDialog) .changelog-entry .changelog-title { margin:8px 0 0; color:var(--dialog-text); font-size:1rem; font-weight:600; }
html body :is(#changelogDialog,#whatsNewDialog) .changelog-entry ul { color:var(--dialog-text); }
/* Detalhe do dia: sem o bloco de ícone/temperatura do detalhe horário, a condição sobrava 36 px abaixo do título. */
html body #dailyDetailDialog #dailyDetailCondition { margin-top:0; }
/* Janela "O que há de novo" (uma vez depois de uma atualização): as versões novas e dois botões. */
/* Uma só versão: o título da janela já diz qual é; fica a data e o nome da novidade. */
#whatsNewList > .changelog-entry:only-child h3 { display:none; }
#whatsNewList > .changelog-entry:only-child .changelog-date { margin:0; }
.whats-new-actions { display:flex; flex-direction:column; gap:6px; margin-top:22px; }
.whats-new-actions button { min-height:44px; border:0; border-radius:999px; font:inherit; font-weight:600; cursor:pointer; }
/* Branco sobre o azul da marca fica em 4,49:1: o texto do botão principal é grande e forte (≥ 18,7 px bold),
   onde o mínimo é 3:1. */
.whats-new-ok { background:var(--brand-blue,var(--brand-blue)); color:var(--on-accent); font-size:1.1875rem !important; font-weight:700 !important; }
.whats-new-all { background:none; color:var(--brand-blue); font-weight:500 !important; }
html body[data-ink="dark"] .whats-new-all { color:var(--dialog-link,var(--brand-blue)); }
.whats-new-actions button:focus-visible { outline:3px solid var(--brand-blue,var(--brand-blue)); outline-offset:3px; }
html body #whatsNewDialog .whats-new-actions button { min-height:48px; border-radius:999px; padding:12px 16px; }
html body #whatsNewDialog .whats-new-all { min-height:44px; background:none; }

/* Últimos 30 dias: terceiro atalho da Home (linha inteira no celular, três colunas com espaço) e o
   diálogo com os números do mês, mais barras estáticas de chuva por dia. Sem animação. */
#weatherView #homeMonth { --shortcut-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2.5'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4M8 14h2M14 14h2M8 17h2'/%3E%3C/svg%3E"); }
html body #monthDialog .dialog-heading p { margin:2px 0 0; color:var(--dialog-muted, #b8c3d6); font-size:.875rem; }
html body #monthDialog .month-status { min-height:1.2em; margin:0 0 10px; font-size:.8rem; line-height:1.5; }
html body #monthDialog .month-lead { margin:0 0 14px; font-size:1rem; line-height:1.5; }
html body #monthDialog .month-stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 18px; margin:0 0 18px; }
html body #monthDialog .month-stats dt { font-size:.8125rem; line-height:1.4; }
html body #monthDialog .month-stats dd { margin:4px 0 0; font-size:1.25rem; font-weight:600; font-variant-numeric:tabular-nums; }
html body #monthDialog .month-stats dd small { display:block; margin-top:2px; font-size:.8125rem; font-weight:400; }
html body #monthDialog .month-chart { margin:0 0 16px; }
html body #monthDialog .month-chart-bars svg { display:block; width:100%; height:72px; }
html body #monthDialog .month-bar { fill:var(--brand-blue, var(--brand-blue)); }
html body #monthDialog .month-bar-track { fill:currentColor; opacity:.25; }
html body #monthDialog .month-bar-missing { fill:none; }
html body #monthDialog .month-chart-axis { display:flex; justify-content:space-between; margin-top:6px; font-size:.8125rem; font-variant-numeric:tabular-nums; }
html body #monthDialog .month-chart-axis .month-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
html body #monthDialog .month-note { font-size:.8rem; line-height:1.5; }
@media (forced-colors:active) { html body #monthDialog .month-bar { fill:CanvasText; } }
/* Nome da cidade fixo ao lado da marca do radar (weather-map.js): pequeno, sem seta, legível sobre o mapa claro. */
#weatherMap .leaflet-tooltip.pluvia-city-label { padding:2px 8px; border:0; border-radius:999px; background:#0b1830e6; color:#fff; font:600 .8125rem/1.4 var(--font-ui,system-ui,sans-serif); box-shadow:0 1px 4px #0003; }
#weatherMap .leaflet-tooltip.pluvia-city-label::before { display:none; }
/* Fotos de perfil (modules/avatars.js): desenho de tempo sobre círculo colorido, no botão da conta,
   no topo de "Minha conta" e na escolha. Só pintura, sem transform/z-index. */
.topbar .account-trigger .account-avatar { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; overflow:hidden; background:var(--avatar-bg,var(--brand-blue)); box-shadow:0 0 0 2px var(--brand-blue); }
.topbar .account-trigger .account-avatar img,html body #accountDialog .profile-avatar[data-avatar] img,#accountDialog .avatar-face img { width:78%; height:78%; object-fit:contain; }
html body #accountDialog .profile-avatar[data-avatar] { overflow:hidden; background:var(--avatar-bg); }
#accountDialog .avatar-picker { margin:4px 0 18px; padding:0; border:0; min-width:0; }
#accountDialog .avatar-picker legend { margin-bottom:10px; padding:0; color:var(--dialog-muted); font-size:.9375rem; }
#accountDialog .avatar-picker small { display:block; margin-top:8px; color:var(--dialog-muted); font-size:.8125rem; }
#accountDialog .avatar-options { display:grid; grid-template-columns:repeat(auto-fill,minmax(48px,1fr)); gap:10px; }
html body #accountDialog #avatarOptions button.avatar-option { display:grid; place-items:center; width:100%; min-width:44px; min-height:48px; aspect-ratio:1; margin:0; padding:3px; border:2px solid transparent; border-radius:50%; background:transparent; box-shadow:none; }
html body #accountDialog #avatarOptions button.avatar-option[aria-pressed="true"] { border-color:var(--brand-blue); }
#accountDialog .avatar-face { display:grid; place-items:center; width:100%; height:100%; border-radius:50%; overflow:hidden; background:var(--avatar-bg,var(--brand-blue)); color:#fff; font-size:1.25rem; font-weight:600; }
@media (forced-colors:active) { html body #accountDialog #avatarOptions button.avatar-option[aria-pressed="true"] { border-color:Highlight; } }

/* ===== Diálogos claros de dia (pedido do usuário, outubro/2026) =====
   Com tinta escura (body[data-ink="dark"], o céu claro do dia), as folhas trocam o azul-noite por um
   off-white quente com cartões brancos e texto azul-marinho; à noite e com chuva forte/trovoada
   (tinta clara) continuam escuras. Mesmos tokens --dialog-*; só cores, sem blur/transform/z-index.
   Contraste medido por verify-contrast.py. */
html body[data-ink="dark"] :is(#cityDialog,#accountDialog,#sourcesDialog,#hourlyDetailDialog,#dailyDetailDialog,#shareWeatherDialog,#brazilDialog,#monthDialog,#homeLayoutDialog,#alertDetail,#installPushDialog,#installDialog,#changelogDialog,#whatsNewDialog,#termsDialog,#radarDialog) {
  --dialog-bg:#f7f5f0; --dialog-surface:#ffffff; --dialog-surface-2:#0b18300d; --dialog-line:#0b183017;
  --dialog-text:#13233d; --dialog-muted:#556479; --dialog-link:var(--brand-blue);
  --text:#13233d; --muted:#556479; --line:#0b18301f; --panel:#fff; --panel-strong:#fff; --panel-subtle:#0b18300a;
  color-scheme:light; color:var(--dialog-text); border-color:#0b183014;
  background:#f7f5f0; box-shadow:0 30px 90px #0b183040,inset 0 1px 0 #ffffffcc;
}
html body[data-ink="dark"] :is(#cityDialog,#accountDialog,#sourcesDialog,#hourlyDetailDialog,#dailyDetailDialog,#shareWeatherDialog,#brazilDialog,#monthDialog,#homeLayoutDialog,#alertDetail,#installPushDialog,#installDialog,#changelogDialog,#whatsNewDialog,#termsDialog,#radarDialog)::backdrop { background:#0b18304d; }
html body[data-ink="dark"] :is(#cityDialog,#accountDialog,#sourcesDialog,#hourlyDetailDialog,#dailyDetailDialog,#shareWeatherDialog,#brazilDialog,#monthDialog,#homeLayoutDialog,#alertDetail,#installPushDialog,#installDialog,#changelogDialog,#whatsNewDialog,#termsDialog,#radarDialog) :is(.dialog-heading,.dialog-heading h2,h3,strong,label,legend,summary) { color:var(--dialog-text); }
html body[data-ink="dark"] :is(#cityDialog,#accountDialog,#sourcesDialog,#hourlyDetailDialog,#dailyDetailDialog,#shareWeatherDialog,#brazilDialog,#monthDialog,#homeLayoutDialog,#alertDetail,#installPushDialog,#installDialog,#changelogDialog,#whatsNewDialog,#termsDialog,#radarDialog) :is(p,small,dt,.dialog-subtitle) { color:var(--dialog-muted); }
html body[data-ink="dark"] :is(#cityDialog,#accountDialog,#sourcesDialog,#hourlyDetailDialog,#dailyDetailDialog,#shareWeatherDialog,#brazilDialog,#monthDialog,#homeLayoutDialog,#alertDetail,#installPushDialog,#installDialog,#changelogDialog,#whatsNewDialog,#termsDialog,#radarDialog) .dialog-close { background:#0b18300f; color:var(--dialog-text); }
html body[data-ink="dark"] :is(#cityDialog,#accountDialog,#sourcesDialog,#hourlyDetailDialog,#dailyDetailDialog,#shareWeatherDialog,#brazilDialog,#monthDialog,#homeLayoutDialog,#alertDetail,#installPushDialog,#installDialog,#changelogDialog,#whatsNewDialog,#termsDialog,#radarDialog) a { color:var(--dialog-link); }
html body[data-ink="dark"] :is(#cityDialog,#accountDialog,#sourcesDialog) :is(input:not([type=checkbox]),select) { border-color:#0b18301f; background:#fff; color:var(--dialog-text); }
html body[data-ink="dark"] :is(#cityDialog,#accountDialog,#sourcesDialog,#monthDialog,#brazilDialog) input::placeholder { color:#5d6c81; }
html body[data-ink="dark"] :is(#accountDialog,#sourcesDialog) input[type=checkbox] { background:#0b183026; }
html body[data-ink="dark"] :is(#accountDialog,#sourcesDialog) input[type=checkbox]:checked { background:var(--brand-blue); }
html body[data-ink="dark"] #cityDialog #citySearch { background-color:#fff; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23556479' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E"); }
html body[data-ink="dark"] #cityDialog #voiceSearch { color:#556479; }
html body[data-ink="dark"] #cityDialog .city-actions > button::before,html body[data-ink="dark"] #cityDialog .favorite-organize { background-color:var(--brand-blue); }
html body[data-ink="dark"] #cityDialog .favorite-organize { background:none; color:var(--dialog-link); }
html body[data-ink="dark"] #cityDialog #locateCity::before { background:#fff; }
html body[data-ink="dark"] #cityDialog #favoriteCity[aria-pressed=true]::before { background:#e0a400; }
html body[data-ink="dark"] #cityDialog :is(.city-result[data-current=true],.favorite-city-card[aria-current=true]) { background:color-mix(in srgb,var(--brand-blue) 8%,transparent); }
html body[data-ink="dark"] #accountDialog .account-tabs { background:#0b18300d; }
html body[data-ink="dark"] #accountDialog #accountTabs button[aria-pressed=true] { background:#fff; color:var(--dialog-text); box-shadow:0 1px 3px #0b183026; }
html body[data-ink="dark"] #accountDialog .profile-identity { background:radial-gradient(120% 100% at 50% 0,color-mix(in srgb,var(--brand-blue) 12%,transparent),transparent 70%),#fff; }
html body[data-ink="dark"] #accountDialog #notificationPreferencesSave:disabled { background:color-mix(in srgb,var(--brand-blue) 25%,transparent); color:color-mix(in srgb,var(--on-accent) 85%,transparent); }
html body[data-ink="dark"] :is(#cityDialog,#accountDialog) :is(#accountSubmit,#profileSave,#notificationPreferencesSave,#savedPlaceSave,#accountRecoverySave,#locateCity) { color:#fff; }
html body[data-ink="dark"] .changelog-intro,html body[data-ink="dark"] .changelog-date { color:var(--dialog-muted); }
html body[data-ink="dark"] .changelog-entry ul { color:var(--dialog-text); }
html body[data-ink="dark"] .changelog-entry[data-kind="fix"] .changelog-badge { background:#0b183014; color:var(--dialog-text); }
html body[data-ink="dark"] #brazilDialog .brazil-row:hover { background:#0b18300a; }
html body[data-ink="dark"] :is(#changelogDialog,#whatsNewDialog,#termsDialog,#installDialog,#radarDialog) .dialog-close { border-radius:50%; }
html body[data-ink="dark"] :is(#changelogDialog,#whatsNewDialog) .changelog-title { color:var(--dialog-text); }
html body[data-ink="dark"] #sourcesDialog .sources-list b { color:var(--brand-blue); }
html body[data-ink="dark"] #sourcesDialog .sources-list article[data-kind=official] b { color:#0f7a52; }
html body[data-ink="dark"] #sourcesDialog .sources-list article[data-kind=observation] b { color:#5b3fc4; }
html body[data-ink="dark"] #sourcesDialog .sources-list article::before { background-color:color-mix(in srgb,var(--brand-blue) 15%,transparent); }
html body[data-ink="dark"] #sourcesDialog .sources-list article[data-kind=official]::before { background-color:#12a06a29; }
html body[data-ink="dark"] #sourcesDialog .sources-list article[data-kind=observation]::before { background-color:#7c5cf029; }

/* --- Minha conta em cartões (outubro/2026, a pedido: a janela era uma rolagem longa demais) ---
   Cada assunto vira um cartão que abre e fecha (<details>, mesma animação de altura dos outros), com o valor
   atual ao lado do título, como nos Ajustes do iPhone. O cartão é a superfície; as linhas de dentro ficam
   transparentes com divisórias. Só cor e layout: sem blur, z-index ou animação além da altura. */
.visually-hidden { position:absolute!important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
html body #accountDialog .account-group { margin:0 0 8px; padding:0 16px; border-radius:var(--sheet-radius); background:var(--dialog-surface); }
html body #accountDialog .account-group > summary { display:flex; align-items:center; gap:12px; min-height:54px; cursor:pointer; list-style:none; color:var(--dialog-text); font-size:.9375rem; font-weight:500; }
html body #accountDialog .account-group > summary::-webkit-details-marker { display:none; }
html body #accountDialog .account-group > summary::after { content:""; flex:none; width:7px; height:7px; margin:0 3px 3px 2px; border-right:2px solid var(--dialog-muted); border-bottom:2px solid var(--dialog-muted); transform:rotate(45deg); }
html body #accountDialog .account-group[open]:not([data-closing]) > summary::after { margin:4px 3px 0 2px; transform:rotate(-135deg); }
html body #accountDialog .account-group-title { flex:1; min-width:0; }
html body #accountDialog .account-group-value { flex:none; max-width:55%; overflow:hidden; color:var(--dialog-muted); font-size:.8125rem; font-weight:400; text-overflow:ellipsis; white-space:nowrap; }
html body #accountDialog .account-group-value:empty { display:none; }
html body #accountDialog .account-group .details-motion-inner > :last-child { margin-bottom:12px; }
html body #accountDialog .account-group :is(.notification-types,.notification-timing,.notification-city-choices) { margin:0; border-top:1px solid var(--dialog-line); }
html body #accountDialog .account-group :is(.notification-types label:not(.notification-summary-time),form .notification-types .notification-summary-time,.notification-timing > label:not(.notification-quiet-toggle),.notification-timing > .notification-time-pair,form .notification-timing .notification-quiet-toggle,.notification-city-choices .notification-location) {
  margin:0; padding-inline:0; border-radius:0!important; background:transparent; border-bottom:1px solid var(--dialog-line);
}
html body #accountDialog .account-group :is(.notification-types,.notification-timing) > label:last-of-type,html body #accountDialog .account-group .notification-city-choices .notification-location:last-child { border-bottom:0; }
html body #accountDialog .account-group .notification-types:has(.notification-summary-time:not([hidden])) > label:nth-last-of-type(2) { border-bottom:1px solid var(--dialog-line); }
html body #accountDialog .account-group .notification-summaries > label:has(+ .notification-summary-time[hidden]) { border-bottom:1px solid var(--dialog-line); }
html body #accountDialog .account-group .notification-summaries > label:nth-last-of-type(2):has(+ .notification-summary-time[hidden]) { border-bottom:0; }
html body #accountDialog .account-group .notification-timing > small { padding:10px 0 0; }
html body #accountDialog .account-group .account-group-note { display:block; margin:0; padding:10px 0 0; color:var(--dialog-muted); font-size:.8125rem; line-height:1.45; }
html body #accountDialog .account-group :is(.notification-locations,.notification-devices) { margin:0; border-top:1px solid var(--dialog-line); }
html body #accountDialog .account-group :is(.notification-locations,.notification-devices) > div { padding:0; border-radius:0; background:transparent; }
html body #accountDialog .account-group .notification-checks { margin:0; padding:0; border-top:1px solid var(--dialog-line); border-radius:0; background:transparent; }
html body #accountDialog .account-group .notification-checks > summary { color:var(--dialog-muted); font-size:.875rem; }
html body #accountDialog #accountProfileEdit .avatar-picker { margin:0; padding-top:12px; border-top:1px solid var(--dialog-line); }
html body #accountDialog #accountProfileEdit #profileForm { margin-top:14px; padding:0; background:transparent; }
html body #accountDialog .profile-identity { margin-bottom:14px; padding:20px 16px 18px; }
html body #accountDialog .notification-settings { margin-top:22px; }
html body #accountDialog .notification-settings-head { margin-bottom:2px; }
html body #accountDialog #notificationSupportNote { margin:6px 4px 12px; }
html body #accountDialog .notification-actions { margin-bottom:14px; }
html body #accountDialog .alert-preferences { gap:0; }
html body #accountDialog #notificationPreferencesSave { margin:6px 0 8px; }
html body #accountDialog #accountLogout { margin-top:18px; }
html body #accountDialog .account-group > summary .account-group-value { display:block; align-self:center; margin:0!important; padding:0!important; line-height:1.3; }
html body #accountDialog .account-group :is(.notification-types,.notification-timing,.notification-city-choices) { border-radius:0; }
html body #accountDialog .account-group #notificationPrivacy { margin:0; padding:10px 0 0; }
html body[data-ink="dark"] #accountDialog #accountLogout { color:var(--dialog-link,var(--brand-blue)); }
/* O invólucro da animação de altura é grade: sem min-width:0 o cartão cresce até o campo mais largo
   (fuso, horários) e passa da janela no celular. */
html body #accountDialog .account-group,html body #accountDialog .account-group > .details-motion,html body #accountDialog .account-group .details-motion-inner { min-width:0; max-width:100%; }
html body #accountDialog .account-group :is(select,input:not([type=checkbox])) { max-width:100%; min-width:0; }

/* --- Termos (outubro/2026): caixinha ao criar conta e ao ligar avisos; aviso discreto no primeiro acesso --- */
html body .terms-check { display:flex; align-items:flex-start; gap:12px; margin:14px 0 4px; color:var(--dialog-text, #e8eefc); font-size:.9375rem; line-height:1.45; cursor:pointer; }
html body .terms-check input[type=checkbox] { flex:none; width:22px; height:22px; margin:1px 0 0; accent-color:var(--brand-blue,var(--brand-blue)); }
html body .terms-check[hidden] { display:none; }
html body :is(.terms-check,.terms-social-note,.terms-notice) a { color:#9cc0ff; text-decoration:underline; text-underline-offset:2px; }
html body[data-ink="dark"] :is(#accountDialog,#termsDialog) :is(.terms-check,.terms-social-note) a { color:var(--dialog-link,var(--brand-blue)); }
html body #accountDialog .terms-social-note { display:block; margin:2px 4px 6px; color:var(--dialog-muted); font-size:.8125rem; line-height:1.45; text-align:center; }
html body #termsDialog p { margin:0 0 12px; color:var(--dialog-text); line-height:1.5; }
html body #termsDialog #termsAccept:disabled { opacity:.45; cursor:not-allowed; }
/* Aviso do primeiro acesso: cartão fixo embaixo, sem cobrir a leitura principal; some com "OK". */
.terms-notice { position:fixed; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom)); z-index:30; display:flex; align-items:center; gap:12px; max-width:34rem; margin:0 auto; padding:12px 12px 12px 16px; border-radius:18px; background:#0b1830f2; color:#fff; box-shadow:0 10px 30px #0006; font-size:.875rem; line-height:1.45; }
.terms-notice[hidden] { display:none; }
.terms-notice p { flex:1; min-width:0; margin:0; }
.terms-notice button { flex:none; min-width:64px; min-height:44px; padding:0 16px; border:0; border-radius:999px; background:var(--brand-blue,var(--brand-blue)); color:var(--on-accent); font:inherit; font-weight:700; font-size:1.1875rem; cursor:pointer; }
.terms-notice button:focus-visible { outline:3px solid #9cc0ff; outline-offset:2px; }
/* Na conta, o aceite é caixinha de marcar (não interruptor), ao lado do texto. */
html body #accountDialog #accountForm .terms-check { display:flex!important; flex-direction:row; align-items:flex-start; gap:12px; margin:6px 0 4px; color:var(--dialog-text); font-size:.9375rem; }
html body #accountDialog #accountForm .terms-check[hidden] { display:none!important; }
html body #accountDialog .terms-check input[type=checkbox] { -webkit-appearance:auto; appearance:auto; width:22px!important; height:22px!important; margin:1px 0 0!important; border-radius:4px; background:none; accent-color:var(--brand-blue,var(--brand-blue)); }
html body #accountDialog .terms-check input[type=checkbox]::before { content:none; display:none; }
/* Turnstile (verificação de segurança do login/avisos). Quase sempre invisível: o contêiner fica no
   fluxo sem altura e só ganha espaço e a frase quando o Cloudflare pede uma interação. Sem janela
   aberta, vira um cartão fixo embaixo, como o aviso dos Termos. Sem blur, transform ou animação. */
.captcha-box { margin:0; }
.captcha-box p { display:none; margin:0 0 8px; color:var(--dialog-text,#fff); font-size:.875rem; line-height:1.45; }
.captcha-box[data-state="interactive"] { margin:12px 0 4px; }
.captcha-box[data-state="interactive"] p { display:block; }
body > .captcha-box[data-state="interactive"] { position:fixed; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom)); z-index:31; max-width:34rem; margin:0 auto; padding:12px 16px; border-radius:18px; background:#0b1830f2; box-shadow:0 10px 30px #0006; }
body > .captcha-box[data-state="interactive"] p { color:#fff; }

/* "Mais do PLUVIA" na janela da conta (pedido do usuário, outubro/2026): os atalhos que ficavam no rodapé
   (Personalizar a Home, Novidades, Fontes de dados, Privacidade, Termos) viram linhas tocáveis num cartão,
   como os grupos da conta. Aparece com e sem conta. Só pintura: sem blur, transform ou z-index. */
/* O `nav` global de styles.css (abas antigas: linha flex, pílula, fundo) e o hover de `nav a` são anulados aqui. */
html body #accountDialog .account-more { display:block; margin:24px 0 0; padding:0; border:0; border-radius:0; background:none; box-shadow:none; }
html body #accountDialog #accountMore .account-more-item:hover { background:none; color:var(--dialog-text); box-shadow:none; transform:none; }
html body #accountDialog .account-more-list { display:flex; flex-direction:column; padding:0 16px; border-radius:var(--sheet-radius); background:var(--dialog-surface); }
html body #accountDialog #accountMore .account-more-item { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:52px; margin:0; padding:0; border:0; border-radius:0; background:none; color:var(--dialog-text); font:inherit; font-size:.9375rem; font-weight:500; text-align:left; text-decoration:none; cursor:pointer; box-shadow:none; transform:none; transition:none; }
html body #accountDialog #accountMore .account-more-item + .account-more-item { border-top:1px solid var(--dialog-line); }
html body #accountDialog #accountMore .account-more-item::after { content:""; flex:none; width:7px; height:7px; margin-right:3px; border-right:2px solid var(--dialog-muted); border-bottom:2px solid var(--dialog-muted); transform:rotate(-45deg); }
html body #accountDialog #accountMore .account-more-item:focus-visible { outline:2px solid var(--brand-blue); outline-offset:2px; border-radius:12px; }

/* Umidade: um ícone em traço por faixa ao lado da nota (pedido do usuário, 1.14.4). Só máscara e cor,
   no azul da marca como os outros ícones de leitura; nível desconhecido (carregando, sem leitura) não tem ícone. */
#weatherView .metrics #humidityNote { display:flex; align-items:center; gap:6px; }
#weatherView .metrics .metric[data-humidity-level] #humidityNote::before { flex:none; width:1.3em; height:1.3em; background:var(--brand-blue,var(--brand-blue)); -webkit-mask:var(--humidity-icon) center/contain no-repeat; mask:var(--humidity-icon) center/contain no-repeat; }
#weatherView .metrics .metric[data-humidity-level="dry"] #humidityNote::before { content:""; --humidity-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5c3.5 4.2 6 7.6 6 10.7a6 6 0 0 1-12 0c0-3.1 2.5-6.5 6-10.7z'/%3E%3Cpath d='M9.5 17.5h5'/%3E%3C/svg%3E"); }
#weatherView .metrics .metric[data-humidity-level="comfortable"] #humidityNote::before { content:""; --humidity-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8.5 14.5a4.2 4.2 0 0 0 7 0'/%3E%3Cpath d='M9 9.5h.01M15 9.5h.01' stroke-width='2.6'/%3E%3C/svg%3E"); }
#weatherView .metrics .metric[data-humidity-level="high"] #humidityNote::before { content:""; --humidity-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5c3.5 4.2 6 7.6 6 10.7a6 6 0 0 1-12 0c0-3.1 2.5-6.5 6-10.7z'/%3E%3Cpath d='M6 14.2a6 6 0 0 0 12 0z' fill='black'/%3E%3C/svg%3E"); }
#weatherView .metrics .metric[data-humidity-level="very-high"] #humidityNote::before { content:""; --humidity-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5c3.5 4.2 6 7.6 6 10.7a6 6 0 0 1-12 0c0-3.1 2.5-6.5 6-10.7z' fill='black'/%3E%3C/svg%3E"); }
#weatherView .metrics .metric[data-humidity-level="attention"] #humidityNote::before,
#weatherView .metrics .metric[data-humidity-level="alert"] #humidityNote::before,
#weatherView .metrics .metric[data-humidity-level="emergency"] #humidityNote::before { content:""; --humidity-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4l9 16H3z'/%3E%3Cpath d='M12 10v4'/%3E%3Cpath d='M12 17h.01' stroke-width='2.6'/%3E%3C/svg%3E"); }
@media (forced-colors:active) { #weatherView .metrics .metric[data-humidity-level] #humidityNote::before { background:CanvasText; } }

/* Ciclo do dia: o mesmo Sol realista do céu (sky-sun.svg, já no precache), a pedido do usuário (1.14.5).
   O disco ocupa ~51% da arte (o resto é halo), então o ponto fica maior; o halo já é o brilho, sem drop-shadow. */
#weatherView .sun-arc .sun-dot { width:88px; height:88px; filter:none; }
/* % da umidade ainda maior e mais grosso que as outras unidades (pedido do usuário, 1.14.6). */
#weatherView .metrics #humidity sup { font-size:.72em; font-weight:700; margin-left:2px; }

/* Alinhamento do topo (pedido do usuário, 1.15): com o grau do tamanho do número, centrar "número + grau" deixava os
   algarismos ~26 px à esquerda do eixo do nome da cidade. Um grau invisível do mesmo tamanho à esquerda equilibra o
   flex: os algarismos ficam no eixo e o grau pendura à direita, como no Apple Weather. Sem posição absoluta. */
#weatherView .temperature::before { content:"°"; visibility:hidden; font-size:1em; letter-spacing:0; }
#weatherView.initial-loading .temperature::before { display:none; }
/* Conta à esquerda: a foto (32 px + anel) ficava 6 px mais perto da borda que a lupa da direita, cujo desenho tem
   22 px de margem. A foto/ícone começa na mesma margem de 22 px; o alvo de toque continua com 44 px. */
.topbar .account-trigger[data-signed-in] { justify-items:start; padding-left:10px; }

/* Topo no ritmo do Apple Weather (pedido do usuário, 1.15.2): cidade em peso normal, temperatura fina, condição e
   "Sensação · Máx. · Mín." no mesmo tamanho e peso, tudo no mesmo eixo. Só tipografia, sem camadas. */
#weatherView .intro h1 { font-size:clamp(2.1rem,9vw,2.6rem); font-weight:400; letter-spacing:0; }
#weatherView .temperature { font-weight:200; }
#weatherView .condition, #weatherView .hero-range { font-size:clamp(1.05rem,5vw,1.25rem) !important; font-weight:500; line-height:1.3; }
#weatherView .hero-range { margin-top:-6px; }
/* Ajustes pedidos (1.15.2): grau um pouco menor que o número (o invisível à esquerda acompanha, para os algarismos
   continuarem no eixo), marca PLUVIA maior no celular e temperatura mais perto do nome da cidade. */
#weatherView .temperature .deg, #weatherView .temperature::before { font-size:.72em; }
html body #weatherView .weather-hero.current-card { padding-top:0 !important; }
@media(max-width:520px) {
  .topbar .brand .brand-mark { width:31px; height:38px; flex-basis:31px; }
  .topbar .brand span:last-child { font-size:1.32rem; }
}
@media(max-width:380px) {
  .topbar .brand .brand-mark { width:26px; height:32px; flex-basis:26px; }
  .topbar .brand span:last-child { font-size:1.12rem; }
}
/* Até 340 px a marca volta ao tamanho anterior: no WebKit o nome é mais largo e encostava nos botões da direita. */
@media(max-width:340px) {
  .topbar .brand .brand-mark { width:22px; height:28px; flex-basis:22px; }
  .topbar .brand span:last-child { font-size:.95rem; }
}
/* As mesmas faixas pela largura real do cabeçalho (container query): no CI WebKit as media queries de 380/340 px
   não valiam com a página desenhada a 320 px, e a marca encostava nos botões. O cabeçalho tem 20 px a menos que a tela. */
.topbar { container-type:inline-size; }
@container (max-width:360px) {
  .topbar .brand .brand-mark { width:26px; height:32px; flex-basis:26px; }
  .topbar .brand span:last-child { font-size:1.12rem; }
}
@container (max-width:320px) {
  .topbar .brand .brand-mark { width:22px; height:28px; flex-basis:22px; }
  .topbar .brand span:last-child { font-size:.95rem; }
}
/* Leituras largas ("100", "-12") em telas estreitas: o grau invisível encolhe primeiro (só ele pode encolher), e o grau
   real nunca sai da tela; os algarismos só deixam o eixo quando não cabem de outro jeito (CI WebKit, 320 px). */
#weatherView .temperature::before { flex:0 1 auto; min-width:0; overflow:hidden; }
#weatherView .temperature > #temperature, #weatherView .temperature > .deg { flex-shrink:0; }
/* Proporção do app Tempo (1.16, pedido do usuário): a temperatura tem ~2,8× o tamanho do nome da cidade
   (no iPhone, 34 e 96 pt), então os algarismos ocupam mais ou menos a mesma largura do nome logo acima. */
#weatherView .intro h1 { font-size:clamp(1.9rem,8.7vw,2.65rem); }
html body #weatherView .weather-hero .temperature { font-size:clamp(5.35rem,24.5vw,7.5rem) !important; }
/* Algarismos no eixo (1.25.5, pedido do usuário: "tem algo desalinhado"). Na 1.16.1 eles ficavam ~0,12 em à
   esquerda (o grau invisível perdia .34 do tamanho), como no app Tempo, mas com a condição centrada logo embaixo
   o número parecia torto (~12 px). Agora o grau invisível tem o tamanho inteiro e só o grau real fica pendurado. */
#weatherView .temperature::before { margin-inline-end:0; }
/* Sensação e máx./mín. entraram nos blocos de leitura (1.17): seis blocos, 2 colunas no celular e 3 a partir de
   721 px (com 4 sobravam dois na última fileira). A mínima fica menor, ao lado da máxima. */
#weatherView .metrics .metric-sky .metric-min { font-size:.62em; font-weight:500; color:color-mix(in srgb,currentColor 75%,transparent); }
@media(min-width:721px) {
  #weatherView .metrics { grid-template-columns:repeat(3,minmax(0,1fr)); }
  #weatherView .metrics .metric-sky:nth-child(4) { border-top:1px solid var(--reading-line) !important; padding-top:18px; }
}
/* Marca nova (1.18, opção C e combinação 2 escolhidas pelo usuário): o nome PLUVIA segue a tinta do céu, branca de
   noite e azul-marinho de dia (a mesma do slogan e do rodapé), e a gota é a mesma tinta puxada para o azul-claro.
   O azul da marca continua nos botões, links e destaques; só a assinatura deixou de ser azul. */
.topbar .brand { color:var(--intro-ink) !important; }
footer.shell .footer-brand-copy strong { color:var(--intro-ink); }
/* Marca nova (1.26): imagem colorida com transparência, não mais máscara de cor única. */
footer.shell .footer-brand-icon { width:64px; height:64px; flex-basis:64px; background:url("./logo-mark.webp?v=logo-5") center / contain no-repeat; -webkit-mask:none; mask:none; }
@media(max-width:720px) { footer.shell .footer-brand-icon { width:50px; height:50px; flex-basis:50px; } }
/* Cor nova dos destaques (1.18, pedido do usuário: "todos esses ícones azuis no novo padrão de cor do PLUVIA"):
   o azul vivo #2f6bff saiu. Na tinta clara (noite, chuva forte) o destaque é o azul-claro da gota nova, com texto
   azul-noite nos botões preenchidos; na tinta escura (céu claro de dia) é o azul-marinho da marca, com texto branco.
   Ícones em traço, links, bolinhas, interruptores, selos e botões preenchidos herdam pelos mesmos tokens. */
:root { --brand-blue:#b7d2ff; --on-accent:#0c1a33; }
:root[data-ink="dark"] { --brand-blue:#2f557f; --on-accent:#fff; }
#weatherView, .weather-map-section, body[data-phase="night"] .weather-map-section { --map-link:var(--brand-blue); }
/* O mapa segue a fase (claro de dia), não a tinta: no céu cinza de dia (tinta clara, 1.25) o azul-claro dos links e
   botões sobre a superfície clara do mapa ficava em 1,5:1. De dia o mapa usa sempre o azul-marinho da marca. */
body[data-phase="day"] .weather-map-section { --map-link:#2f557f; }
nav a:hover, nav a.active, #welcomeLocate, #installPushReload, #installDone { color:var(--on-accent); }
html body :is(#accountDialog,#sourcesDialog) input[type=checkbox]:checked::before { background:var(--on-accent); }
/* Chuva na próxima hora (1.19): barras do nowcast do radar, de agora a +60 min a cada 5 min. A altura é a fração da
   janela da cidade com eco projetado (cobertura, não intensidade); só aparece quando o radar vê chuva em cima da cidade
   ou chegando. Sem transform/opacity: as barras mudam só de altura. */
#weatherView .next-hour { margin:4px 0 14px; }
#weatherView .next-hour[hidden] { display:none !important; }
#weatherView .next-hour-heading { margin:0 0 8px; display:flex; align-items:baseline; justify-content:space-between; gap:8px; font-size:.95rem; font-weight:600; color:var(--reading-ink,inherit); }
#weatherView .next-hour-heading small { font-size:.8rem; font-weight:500; color:var(--reading-muted); }
#weatherView .next-hour-bars { height:44px; display:flex; align-items:flex-end; gap:3px; border-bottom:1px solid rgba(255,255,255,.18); }
body[data-ink="dark"] #weatherView .next-hour-bars { border-bottom-color:rgba(0,0,0,.14); }
#weatherView .next-hour-bars span { flex:1 1 0; min-width:0; height:8%; border-radius:3px 3px 0 0; background:rgba(255,255,255,.16); transition:height .6s cubic-bezier(.22,1,.36,1); }
body[data-ink="dark"] #weatherView .next-hour-bars span { background:rgba(0,0,0,.1); }
body #weatherView .next-hour-bars span[data-wet="1"], body[data-ink="dark"] #weatherView .next-hour-bars span[data-wet="1"] { background:var(--brand-blue); }
#weatherView .next-hour-axis { margin:4px 0 0; display:flex; justify-content:space-between; font-size:.8rem; color:var(--reading-muted); font-variant-numeric:tabular-nums; }
#weatherView .next-hour-text { margin:8px 0 0; font-size:.9rem; color:var(--reading-ink,inherit); }
/* Topo mais limpo (1.23.2, pedido do usuário: "tira essas informações daqui de cima"): no hero fica só o "Vai chover?".
   A barra de chuva abre o cartão Próximas horas e a nota de ontem fecha o cartão, alinhadas à esquerda como o resto. */
#weatherView .hourly-peek .rain-gauge { width:100%; margin:2px 0 14px; align-items:flex-start; }
#weatherView .hourly-peek .rain-gauge-label { text-align:left; }
#weatherView .hourly-peek .yesterday-note { max-width:none; margin:12px 0 0; text-align:left; font-size:.875rem; }
#weatherView .hourly-peek .yesterday-note .sk-line { margin:0; }
/* "Vai chover?" como primeira dica (1.23.2): mesma linha das dicas (ícone em traço centrado), texto à esquerda e um
   pouco mais forte, por ser a resposta principal. A lista das outras dicas só entra quando há o que fazer. */
#weatherView .tips-rain { display:flex; align-items:center; gap:10px; margin:0; }
#weatherView .tips-rain .rain-answer { flex:1; min-width:0; margin:0; max-width:none; font-size:.95rem; font-weight:600; text-align:left; text-wrap:pretty; }
#weatherView .tips-rain .rain-answer[data-tone="loading"] .sk-line { margin:0; }
#weatherView .tips-list { margin-top:10px; }
#weatherView .tips-list[hidden] { display:none; }

/* 7 dias (1.25.1, pedido do usuário): todas as linhas com o mesmo recuo interno de 10 px e a lista 10 px para fora,
   para o fundo de "Hoje" caber sem mudar as colunas; nome do dia maior no celular. No fim do arquivo para vencer as
   regras de padding das linhas acima. */
#weatherView .forecast-list { width:calc(100% + 20px); max-width:none; margin-inline:-10px; }
#weatherView .forecast-list > .forecast-row { padding-inline:10px; }
/* O nome fica num <span> dentro do <strong>, e styles.css põe todo span de .forecast-day em .75rem: herda o tamanho do strong. */
#weatherView .forecast-list .forecast-day > strong :is(.day-full,.day-short) { font-size:inherit; }
@media(max-width:720px) { #weatherView .forecast-list .forecast-day > strong { font-size:1.125rem; } }
@media(max-width:374px) { #weatherView .forecast-list .forecast-day > strong { font-size:1.05rem; } }
/* 7 dias (1.25.3, pedido do usuário: "centraliza tudo" e a cor do dia atual "nas letras, não no fundo"):
   chance e volume centrados na própria coluna (alinhados à direita, as linhas só com a chance pareciam tortas)
   e hoje sem fundo, com o nome num azul vivo: #6fb1ff com tinta clara (7,5:1) e #0f4aa8 com tinta escura
   (4,7:1 no cartão de dia). O azul da marca à noite (#b7d2ff) quase não se distinguia do branco. Só pintura. */
#weatherView .forecast-list .forecast-row > .forecast-condition { justify-self:center; align-self:center; }
@media(max-width:720px) {
  #weatherView .forecast-list .forecast-rain-values { justify-items:center; text-align:center; }
  #weatherView .forecast-list :is(.forecast-rain-chance,.forecast-rain-volume) { min-width:0; text-align:center; }
}
/* O nome fica num <span> que outras folhas pintam: a cor vai também nele. */
#weatherView .forecast-row[data-today] .forecast-day > strong,
#weatherView .forecast-row[data-today] .forecast-day > strong > span { color:#6fb1ff; font-weight:700; }
body[data-ink="dark"] #weatherView .forecast-row[data-today] .forecast-day > strong,
body[data-ink="dark"] #weatherView .forecast-row[data-today] .forecast-day > strong > span { color:#0f4aa8; }
/* Condição mais perto da temperatura (1.25.5, pedido do usuário: "muito separado"). A caixa do número tem a
   altura da fonte inteira, e embaixo dos algarismos sobra o espaço das letras com perna (~0,2 em): com o gap
   da coluna, a condição ficava ~37 px abaixo dos algarismos. Puxa a caixa de volta na proporção do número. */
#weatherView .wx-copy { margin-bottom:calc(clamp(5.35rem,24.5vw,7.5rem) * -.17); }
/* Detalhe por hora (1.25.5, pedido do usuário: ícone "desalinhado" e pequeno). O ícone ocupava as duas linhas
   (número e condição) e ficava centrado no bloco, mais baixo que o número. Agora tem 96 px e fica na linha do
   número, centrado nele; a condição vai embaixo do número. */
.hourly-detail-weather { grid-template-columns:96px auto; column-gap:14px; row-gap:2px; text-align:left; }
#hourlyDetailIcon { grid-row:1; width:96px; height:96px; }
#hourlyDetailIcon .weather-icon { width:96px; height:96px; }
#hourlyDetailTemperature { grid-column:2; align-self:center; line-height:1; }
#hourlyDetailDialog #hourlyDetailCondition { grid-column:1 / -1; text-align:center; }
/* Modos das Próximas horas (1.26, pedido do usuário, como no Apple Weather): Condição, Chuva e Vento. Seletor em
   pílula com três ícones (alvos de 44 × 36 px, aria-pressed); só cor e fundo, sem transform. */
#weatherView .hourly-peek-heading { flex-wrap:nowrap; }
#weatherView .hourly-modes { flex:0 0 auto; display:inline-flex; gap:2px; padding:3px; border-radius:999px; background:color-mix(in srgb,var(--reading-ink,#fff) 10%,transparent); }
#weatherView .hourly-modes button { display:grid; place-items:center; width:44px; height:36px; margin:0; padding:0; border:0; border-radius:999px; background:transparent; color:var(--reading-muted); cursor:pointer; }
#weatherView .hourly-modes button[aria-pressed="true"] { background:color-mix(in srgb,var(--reading-ink,#fff) 18%,transparent); color:var(--reading-ink); }
#weatherView .hourly-modes svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
#weatherView .hourly-modes button[aria-pressed="true"] svg:not(:has(path[d^="M3 9"])) { fill:currentColor; }
/* Chuva: barra de intensidade num trilho com as marcas de 2,5 e 7,5 mm/h (raiz de mm/h até 10) e a chance embaixo. */
#weatherView .hourly-peek-list[data-mode="rain"] .peek-bar { position:relative; display:block; width:22px; height:64px; margin:6px auto 2px; overflow:hidden; border-radius:7px; background:color-mix(in srgb,var(--reading-ink,#fff) 9%,transparent); background-image:linear-gradient(to top,transparent calc(50% - .5px),color-mix(in srgb,var(--reading-ink,#fff) 28%,transparent) calc(50% - .5px),color-mix(in srgb,var(--reading-ink,#fff) 28%,transparent) calc(50% + .5px),transparent calc(50% + .5px),transparent calc(87% - .5px),color-mix(in srgb,var(--reading-ink,#fff) 28%,transparent) calc(87% - .5px),color-mix(in srgb,var(--reading-ink,#fff) 28%,transparent) calc(87% + .5px),transparent calc(87% + .5px)); }
#weatherView .hourly-peek-list[data-mode="rain"] .peek-bar i { position:absolute; left:0; right:0; bottom:0; border-radius:7px 7px 0 0; background:linear-gradient(#8fdcff,#3fa9f5); }
#weatherView .hourly-peek-list[data-mode="rain"] .peek-bar[data-known="0"] { opacity:.45; }
#weatherView .hourly-peek-list[data-mode="rain"] .peek-chance { display:inline-flex; align-items:center; justify-content:center; gap:1px; font-size:.8125rem; font-weight:600; white-space:nowrap; font-variant-numeric:tabular-nums; color:var(--reading-ink); }
#weatherView .hourly-peek-list[data-mode="rain"] .peek-chance[data-low="1"] { color:var(--reading-muted); font-weight:500; }
#weatherView .hourly-peek-list[data-mode="rain"] .peek-chance[data-low="1"] .rain-metric-icon { display:none; }
/* Vento (1.26.5, como no app Tempo): colunas sem espaço entre si, separadas por um tracejado fino, velocidade
   grande e um gráfico contínuo embaixo (linha da velocidade sobre a área das rajadas). Cada coluna desenha o seu
   pedaço do gráfico; sem transform nem animação. */
#weatherView .hourly-peek-list[data-mode="wind"] { gap:0; }
#weatherView .hourly-peek-list[data-mode="wind"] .hourly-peek-item { padding-bottom:0; gap:2px; }
#weatherView .hourly-peek-list[data-mode="wind"] .hourly-peek-item + .hourly-peek-item { background:linear-gradient(color-mix(in srgb,var(--reading-ink,#fff) 22%,transparent) 50%,transparent 0) left top / 1px 6px repeat-y; }
#weatherView .hourly-peek-list[data-mode="wind"] .hourly-peek-item > strong { margin-top:4px; font-size:1.5rem; }
#weatherView .hourly-peek-list[data-mode="wind"] .peek-unit { font-size:.8125rem; color:var(--reading-muted); }
#weatherView .hourly-peek-list[data-mode="wind"] .peek-from { display:inline-flex; align-items:center; justify-content:center; gap:2px; min-height:1.3em; font-size:.75rem; font-weight:600; color:var(--reading-muted); }
#weatherView .hourly-peek-list[data-mode="wind"] .peek-from svg { width:11px; height:11px; fill:currentColor; }
#weatherView .hourly-peek-list[data-mode="wind"] .peek-wind-chart { position:relative; display:block; align-self:stretch; height:34px; margin:4px -4px 0; }
#weatherView .hourly-peek-list[data-mode="wind"] .peek-wind-chart svg { display:block; width:100%; height:100%; overflow:visible; }
#weatherView .hourly-peek-list[data-mode="wind"] .wind-gust { fill:color-mix(in srgb,#5fd0c4 34%,transparent); stroke:none; }
#weatherView .hourly-peek-list[data-mode="wind"] .wind-speed { fill:none; stroke:#5fd8e6; stroke-width:3; stroke-linecap:round; vector-effect:non-scaling-stroke; }
body[data-ink="dark"] #weatherView .hourly-peek-list[data-mode="wind"] .wind-gust { fill:color-mix(in srgb,#1f8f86 30%,transparent); }
body[data-ink="dark"] #weatherView .hourly-peek-list[data-mode="wind"] .wind-speed { stroke:#0f7f95; }
#weatherView .hourly-peek-list[data-mode="wind"] .wind-now { position:absolute; left:50%; width:10px; height:10px; margin:-5px 0 0 -5px; border-radius:50%; background:#fff; box-shadow:0 0 0 2.5px #10233f; }
/* Próxima hora (1.26, pedido do usuário: "confuso"): trilho escuro da altura toda e a parte com chuva em azul,
   enchendo de baixo (altura = fração da área da cidade com eco no radar, não intensidade). */
#weatherView .next-hour-bars { height:56px; gap:4px; border-bottom:0; }
#weatherView .next-hour-bars span { position:relative; height:100% !important; overflow:hidden; border-radius:6px; background:color-mix(in srgb,var(--reading-ink,#fff) 9%,transparent); transition:none; }
#weatherView .next-hour-bars span::after { content:""; position:absolute; left:0; right:0; bottom:0; height:var(--fill,0%); background:color-mix(in srgb,var(--reading-ink,#fff) 30%,transparent); }
@media (prefers-reduced-motion:no-preference) { #weatherView .next-hour-bars span::after { transition:height .6s cubic-bezier(.22,1,.36,1); } }
body #weatherView .next-hour-bars span[data-wet="1"], body[data-ink="dark"] #weatherView .next-hour-bars span[data-wet="1"] { background:color-mix(in srgb,var(--reading-ink,#fff) 9%,transparent); }
#weatherView .next-hour-bars span[data-wet="1"]::after { background:linear-gradient(#8fdcff,#3fa9f5); }
#weatherView .hourly-peek-list[data-mode="rain"] .peek-chance .rain-metric-icon { width:12px; height:12px; flex:0 0 12px; }
/* Até 389 px o título e o seletor não cabem lado a lado ("Próximas horas" quebrava em duas linhas): o seletor
   desce para uma linha própria, com os três botões dividindo a largura. */
@media(max-width:389px) {
  #weatherView .hourly-peek-heading { flex-wrap:wrap; row-gap:10px; }
  #weatherView .hourly-modes { flex:1 0 100%; }
  #weatherView .hourly-modes button { flex:1 1 0; width:auto; }
}

/* Troca de modo das Próximas horas (1.26.7, como no app Tempo): fade curto da fileira por View Transition
   (app.js, setHourlyMode) e a mesma altura nos três modos, para a janela seca e o "Tá chovendo aí?" não pularem.
   As barras de chuva sobem do zero (altura). Movimento reduzido: troca na hora. */
#weatherView .hourly-peek-list { min-height:10rem; }
::view-transition-old(pluvia-hourly) { animation:pluvia-hourly-out .16s ease-in both; }
::view-transition-new(pluvia-hourly) { animation:pluvia-hourly-in .3s ease-out .08s both; }
::view-transition-group(pluvia-hourly) { animation-duration:.38s; }
@keyframes pluvia-hourly-out { to { opacity:0; } }
@keyframes pluvia-hourly-in { from { opacity:0; } }
@keyframes pluvia-hourly-bar { from { height:0; } }
@media (prefers-reduced-motion:no-preference) {
  #weatherView .hourly-peek-list[data-mode="rain"] .peek-bar i { animation:pluvia-hourly-bar .6s cubic-bezier(.22,1,.36,1) .1s both; }
}


/* 7 dias no modo das Próximas horas (1.27, como no app Tempo). Chuva: faixa com as 24 horas do dia, cada barra
   enche de baixo pela mesma escala da fileira (só volume); hora ausente fica tracejada, nunca vazia como "seco".
   Vento: a trilha da temperatura vira a faixa menor–maior velocidade, em escala comum aos 7 dias. */
#weatherView .forecast-list .forecast-row > .temp-range.day-rain { display:flex; align-items:flex-end; gap:1px; height:26px; }
#weatherView .forecast-list .day-rain i { position:relative; flex:1 1 0; height:100%; border-radius:2px; background:color-mix(in srgb,var(--reading-ink,#fff) 10%,transparent); overflow:hidden; }
#weatherView .forecast-list .day-rain i::after { content:""; position:absolute; inset:auto 0 0; height:var(--fill,0%); background:linear-gradient(#8fdcff,#3fa9f5); }
#weatherView .forecast-list .day-rain i[data-missing] { background:repeating-linear-gradient(180deg,color-mix(in srgb,var(--reading-ink,#fff) 14%,transparent) 0 2px,transparent 2px 5px); }
#weatherView .forecast-list .day-wind .temp-fill { background:linear-gradient(90deg,#7fe3d6,#3fb8c9); }
body[data-ink="dark"] #weatherView .forecast-list .day-wind .temp-fill { background:linear-gradient(90deg,#2aa69a,#0f7f95); }
#weatherView .forecast-list[data-mode="rain"] .forecast-rain-volume, #weatherView .forecast-list[data-mode="wind"] .forecast-rain-volume { min-width:0; }
::view-transition-old(pluvia-daily) { animation:pluvia-hourly-out .16s ease-in both; }
::view-transition-new(pluvia-daily) { animation:pluvia-hourly-in .3s ease-out .08s both; }
::view-transition-group(pluvia-daily) { animation-duration:.38s; }
@media (prefers-reduced-motion:no-preference) {
  #weatherView .forecast-list .day-rain i::after { animation:pluvia-hourly-bar .6s cubic-bezier(.22,1,.36,1) .1s both; }
}

/* Próximos 7 dias dentro do cartão das Próximas horas (1.27.1, pedido do usuário, como no app Tempo): o bloco
   perde o próprio vidro e vira o fim do mesmo cartão, separado por uma linha fina. */
#weatherView #chuva #previsao { margin:22px 0 0 !important; padding:18px 0 0 !important; border:0 !important; border-top:1px solid var(--reading-line) !important; border-radius:0 !important; background:none !important; box-shadow:none !important; }
#weatherView #chuva #previsao .forecast-list { background:none; border:0; box-shadow:none; }

/* 1.27.2 (pedido do usuário): "Tá chovendo aí?" mora no cartão do radar, embaixo do mapa
   (relato de pessoas ao lado da chuva vista pelo radar), e não mais entre as horas e os 7 dias. */
#weatherView .weather-map-card > .rain-report { grid-column:1 / -1; margin:2px 0 0; }

/* Setas dos <details> giram em vez de trocar de desenho (pedido do usuário: "a setinha vira bem abrupta").
   O triângulo nativo do navegador não anima; aqui ele é um ::before que gira 90° em 320 ms, junto com a
   abertura pela altura de dialog-motion (data-closing devolve a seta no começo do fechamento). Só o
   pseudo-elemento gira; nada de transform nos blocos. */
html body :is(#weatherView .air-details,#weatherView .astronomy-details,#accountDialog .notification-checks,#accountDialog .account-delete,#alertDetail details) > summary { display:flex; align-items:center; gap:.5em; list-style:none; }
html body :is(#weatherView .air-details,#weatherView .astronomy-details,#accountDialog .notification-checks,#accountDialog .account-delete,#alertDetail details) > summary::-webkit-details-marker { display:none; }
html body :is(#weatherView .air-details,#weatherView .astronomy-details,#accountDialog .notification-checks,#accountDialog .account-delete,#alertDetail details) > summary::before { content:""; flex:none; width:.62em; height:.62em; background:currentColor; clip-path:polygon(18% 4%,96% 50%,18% 96%); transition:rotate .32s cubic-bezier(.3,.7,.2,1); }
html body :is(#weatherView .air-details,#weatherView .astronomy-details,#accountDialog .notification-checks,#accountDialog .account-delete,#alertDetail details)[open]:not([data-closing]) > summary::before { rotate:90deg; }
html body #accountDialog .account-group > summary::after { transition:transform .32s cubic-bezier(.3,.7,.2,1), margin .32s cubic-bezier(.3,.7,.2,1); }
html body #accountDialog .capital-links summary::after { transition:rotate .32s cubic-bezier(.3,.7,.2,1); }
@media (forced-colors:active) { html body :is(#weatherView .air-details,#weatherView .astronomy-details,#accountDialog .notification-checks,#accountDialog .account-delete,#alertDetail details) > summary::before { background:CanvasText; } }

/* 1.28: nascer e pôr do sol dos próximos 14 dias em "Mais sobre o céu" (modules/sun-table.js). Astronomia
   por coordenadas, não previsão; números tabulares para os horários ficarem na mesma vertical. */
#weatherView .astronomy-details .sun-table { margin:20px 0 18px; text-align:left; }
#weatherView .astronomy-details .sun-table h3 { margin:0; color:var(--reading-ink); font-size:1rem; font-weight:600; line-height:1.35; }
#weatherView .astronomy-details .sun-table-note { margin:4px 0 0; color:var(--reading-muted); }
#weatherView .astronomy-details .sun-table-note:empty { display:none; }
#weatherView .sun-table table { width:100%; margin-top:10px; border-collapse:collapse; font-variant-numeric:tabular-nums; }
#weatherView .sun-table :is(th,td) { padding:9px 0; border-top:1px solid var(--reading-line); color:var(--reading-ink); font-size:.9375rem; font-weight:400; line-height:1.3; text-align:right; white-space:nowrap; }
#weatherView .sun-table :is(th,td):first-child { text-align:left; }
#weatherView .sun-table thead th { padding-top:0; border-top:0; color:var(--reading-muted); font-size:.8125rem; font-weight:500; }
#weatherView .sun-table tbody th { font-weight:500; text-transform:capitalize; }
#weatherView .sun-table tbody tr[data-today] th { color:#6fb1ff; font-weight:700; }
body[data-ink="dark"] #weatherView .sun-table tbody tr[data-today] th { color:#0f4aa8; }
#weatherView .sun-table td:last-child { color:var(--reading-muted); }
@media (max-width:359px) { #weatherView .sun-table :is(th,td) { font-size:.875rem; } }

/* 1.29: gráfico do dia no detalhe diário (daily-detail.chart), no estilo do app Tempo. Traço e área no
   degradê frio → quente da faixa do dia, barras de chuva só pelo volume. O traço se desenha ao abrir ou
   trocar de dia (stroke-dashoffset: pintura dentro do SVG, sem camada); reduced-motion mostra pronto. */
#dailyDetailDialog .day-chart { --day-chart-hot:#ffa63d; --day-chart-mild:#ffd84d; --day-chart-cold:#5ac8fa; margin:6px 0 18px; padding:14px 12px 8px; border-radius:20px; background:var(--dialog-surface, rgba(255,255,255,.06)); }
#dailyDetailDialog .day-chart[hidden] { display:none; }
#dailyDetailDialog .day-chart-svg { display:block; width:100%; height:auto; overflow:visible; font-family:inherit; }
#dailyDetailDialog .day-chart-line { fill:none; stroke-width:3.2; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:0; animation:pluvia-day-chart-draw 1s cubic-bezier(.3,.7,.2,1) both; }
#dailyDetailDialog .day-chart-area { animation:pluvia-day-chart-fill .7s ease-out .35s both; }
#dailyDetailDialog .day-chart-grid { stroke:var(--dialog-line, rgba(255,255,255,.12)); stroke-width:1; stroke-dasharray:2 4; }
#dailyDetailDialog .day-chart-base { stroke:var(--dialog-line, rgba(255,255,255,.14)); stroke-width:1; }
#dailyDetailDialog .day-chart-axis { fill:var(--dialog-muted, #9fb0cc); font-size:10.5px; font-weight:500; }
#dailyDetailDialog .day-chart-mark { fill:var(--dialog-text, #fff); font-size:12.5px; font-weight:650; }
#dailyDetailDialog .day-chart-dot { stroke:var(--dialog-bg, #101a33); stroke-width:2; }
#dailyDetailDialog .day-chart-dot.is-high { fill:var(--day-chart-hot); }
#dailyDetailDialog .day-chart-dot.is-low { fill:var(--day-chart-cold); }
#dailyDetailDialog .day-chart-now { stroke:var(--dialog-text, #fff); stroke-opacity:.45; stroke-width:1.2; stroke-dasharray:3 3; }
#dailyDetailDialog .day-chart-now-dot { fill:var(--dialog-text, #fff); stroke:var(--dialog-bg, #101a33); stroke-width:2.5; }
#dailyDetailDialog .day-chart-now-label { fill:var(--dialog-text, #fff); font-weight:650; }
#dailyDetailDialog .day-chart-rain { fill:#5ac8fa; }
#dailyDetailDialog .day-chart-dry { font-style:italic; }
body[data-ink="dark"] #dailyDetailDialog .day-chart { --day-chart-hot:#f08a24; --day-chart-mild:#e6b800; --day-chart-cold:#1e90d6; }
body[data-ink="dark"] #dailyDetailDialog .day-chart-rain { fill:#1e90d6; }
@keyframes pluvia-day-chart-draw { from { stroke-dashoffset:1; } }
@keyframes pluvia-day-chart-fill { from { fill-opacity:0; } }
@media (prefers-reduced-motion:reduce) { #dailyDetailDialog :is(.day-chart-line,.day-chart-area) { animation:none; } }

/* 1.29: previsão de +10 a +30 min no radar ampliado (weather-map + radar-nowcast.forecastImages). O horário
   diz "Previsão para HH:MM" no azul da marca, para não ser confundido com uma imagem observada. */
#radarMapContent #weatherFrameTime[data-state="forecast"] { color:var(--brand-blue); font-weight:600; }