/* =============================================================
   VAI DAR PRAIA? — folha de estilo única
   =============================================================
   Sem framework e sem passo de compilação: o site é servido tal como está.

   Nota sobre as cores: verde/amarelo/vermelho é o que foi pedido, mas a
   informação NUNCA depende só da cor — cada veredicto tem também um ícone
   com forma diferente e uma palavra escrita. Cerca de 8% dos homens têm
   daltonismo vermelho-verde, e a WCAG 1.4.1 proíbe exactamente isto.
   ============================================================= */

:root {
  color-scheme: light dark;

  /* superfícies */
  --fundo: #f3f7fa;
  --carta: #ffffff;
  --carta-2: #f7fafc;
  --borda: #dde5ec;
  --tinta: #10222e;
  --tinta-2: #4a6274;
  --tinta-3: #566e7d;   /* 5,35:1 em branco, 4,97:1 no fundo — passa em todas as superfícies */

  /* veredictos — escolhidos com contraste AA sobre branco */
  --verde: #0e7a4a;
  --verde-luz: #d7f2e3;
  --amarelo: #8a5c00;
  --amarelo-luz: #fdf0cf;
  --vermelho: #b3261e;
  --vermelho-luz: #fbdfdc;

  /* céu */
  --ceu-a: #7dd3e8;
  --ceu-b: #cdeef6;
  --sol-a: #ffe27a;
  --sol-b: #ffd24d;
  --sol-o: .9;
  --mar: #0e7490;

  /* A TINTA DO CABEÇALHO, que não é a do corpo. O <h1> e o claim estão por
     cima do céu — do gradiente e, num telemóvel, do SOL — e não por cima de
     `--fundo`. Medir contra o fundo dava-os por bons; medido no píxel, o claim
     ficava a 4,10:1 no céu inicial, com a norma a pedir 4,5:1. */
  --tinta-ceu: #10222e;
  /* E A TINTA ESBATIDA DO CÉU. Os rótulos de secção («ONDE FICA», «FAVORITOS»)
     estão fora de qualquer cartão, logo o que têm por trás é o céu — que no
     dia mau é um cinzento a #8b9aa6. Com `--tinta-3` davam 2,89:1, e a norma
     pede 4,5:1. O `--tinta-3` está medido «em branco e no fundo», e o comentário
     dele diz isso mesmo: o céu não estava na lista. */
  --tinta-ceu-2: #263138;
  /* Os nomes dos concelhos, no mapa: o `--carta` por baixo deles é claro, mas o
     traço do concelho e o mar por baixo não são, e mediram-se 3,91:1. */
  --tinta-mapa: #3c4d58;

  --raio: 14px;
  --raio-g: 22px;
  --sombra: 0 1px 2px rgba(16,34,46,.06), 0 12px 32px -12px rgba(16,34,46,.22);
  --gutter: clamp(1rem, 4vw, 2rem);
  --t: .22s cubic-bezier(.2,0,0,1);

  --f: ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #0b1519;
    --carta: #12212a;
    --carta-2: #172a35;
    --borda: #243b48;
    --tinta: #eaf4f8;
    --tinta-2: #a9c3d1;
    --tinta-3: #7794a5;
    --verde: #4ade9a;    --verde-luz: #0e3a2a;
    --amarelo: #fbcb52;  --amarelo-luz: #3a2f0d;
    --vermelho: #ff8a80; --vermelho-luz: #3d1714;
    --ceu-a: #0f3a4a;    --ceu-b: #0b2530;
    /* O SOL APAGA-SE NO ESCURO, e não é preciosismo: um disco a #ffd24d com
       90 % de opacidade por trás de texto claro dava 1,36:1 no «Praiómetro» e
       1,17:1 no claim — a norma pede 4,5:1, e a cauda de cada linha
       desaparecia mesmo. Um sol a arder num tema escuro também nunca fez
       sentido nenhum; fica a brasa, que é o que se vê de noite. */
    --sol-a: #6b4f1e;
    --sol-b: #513a12;
    --sol-o: .5;
    --tinta-ceu: #eaf4f8;
    --tinta-ceu-2: #9cb1bd;
    --tinta-mapa: #95acb9;
    --mar: #38bdf8;
    --sombra: 0 1px 2px rgba(0,0,0,.4), 0 14px 34px -14px rgba(0,0,0,.7);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100svh;
  font-family: var(--f); color: var(--tinta); background: var(--fundo);
  line-height: 1.5; overflow-x: hidden;
  padding-bottom: env(safe-area-inset-bottom);
}
h1, h2, h3, h4, p, ul, ol { margin: 0; }
ul { list-style: none; padding: 0; }
button, input { font: inherit; color: inherit; }
a { color: inherit; }

/* Qualquer regra de autor com `display` vence o `display:none` que o browser
   dá ao atributo hidden — foi assim que o botão «Entrar» ficou visível ao lado
   do avatar de quem já tinha entrado. */
[hidden] { display: none !important; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
/* Branco sobre --mar dava 2,14:1 no tema escuro, onde o --mar é um azul
   claro. Só se via com o foco em cima, e por isso ninguém deu por ela — o
   medidor de contraste do projecto corria só em tema claro. Tinta sobre carta
   inverte-se sozinho com o tema e passa nos dois. */
.salta {
  position: absolute; left: -999px; top: 0; z-index: 90;
  background: var(--tinta); color: var(--carta); padding: .7em 1.1em; text-decoration: none;
  border-radius: 0 0 var(--raio) 0; font-weight: 600;
}
.salta:focus { left: 0; }

:focus-visible { outline: 3px solid var(--mar); outline-offset: 3px; border-radius: 6px; }
/* O resultado tem `tabindex="-1"` só para o app.js lhe poder dar o foco depois
   de a previsão chegar — não se chega lá com o Tab. Um contorno de 3px em volta
   de meia página não diz a ninguém onde está o foco; só parecia um erro. O
   destino do foco continua a ser anunciado pelo `aria-labelledby`. */
.resultado:focus, .resultado:focus-visible { outline: none; }
/* E o mesmo para o <main>, pela mesma razão: leva `tabindex="-1"` só para o
   atalho de saltar ter destino, não para se chegar lá com o Tab. */
#principal:focus, #principal:focus-visible { outline: none; }

/* ===================================================== CÉU DE FUNDO ==== */
/* O fundo muda de cor com o veredicto — é o primeiro sinal, antes de se ler
   fosse o que fosse. Fica atrás de tudo e não recebe cliques. */
.ceu {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  background: linear-gradient(178deg, var(--ceu-a) 0%, var(--ceu-b) 46%, var(--fundo) 74%);
  transition: background 1s ease;
}
.ceu__sol {
  position: absolute; top: 6vh; right: 12vw; width: 22vmin; height: 22vmin;
  border-radius: 50%;
  background: radial-gradient(circle, var(--sol-a) 0 42%, var(--sol-b) 58%, transparent 72%);
  filter: blur(.4px); opacity: var(--sol-o); transition: opacity 1s ease, transform 1s ease;
}
.ceu__mar {
  position: absolute; inset: auto 0 0 0; height: 26vh;
  background: linear-gradient(180deg, transparent, color-mix(in oklab, var(--mar) 16%, transparent));
  opacity: .5;
}
body[data-cor="verde"]   { --ceu-a: #6fd0e6; --ceu-b: #d3f0f7; }
body[data-cor="amarelo"] { --ceu-a: #b9cbd6; --ceu-b: #e2ebf0; }
body[data-cor="vermelho"]{ --ceu-a: #8b9aa6; --ceu-b: #d3dae0; }
body[data-cor="amarelo"] .ceu__sol  { opacity: .45; }
body[data-cor="vermelho"] .ceu__sol { opacity: .12; }
@media (prefers-color-scheme: dark) {
  body[data-cor="verde"]   { --ceu-a: #0f4657; --ceu-b: #0b2530; }
  body[data-cor="amarelo"] { --ceu-a: #24333c; --ceu-b: #0e1c24; }
  body[data-cor="vermelho"]{ --ceu-a: #1d2830; --ceu-b: #0d181e; }
}

/* ======================================================== CABEÇALHO ==== */
.topo { padding: clamp(1rem, 3.5vw, 2rem) var(--gutter) 1rem; text-align: center; }

/* ============================================================ CONTA ==== */
/* Linha própria e não sobreposta ao cabeçalho: em 375 px a «Entrar» tapava o
   ponto de interrogação do título. A altura fica reservada desde o início,
   mesmo antes de se saber se há sessão, para a página não saltar. */
.conta {
  position: relative; z-index: 5; display: flex; justify-content: flex-end;
  align-items: center; min-height: 38px; margin-bottom: .5rem; text-align: left;
}
.conta--vazia { min-height: 0; margin-bottom: 0; }


/* ====================================================== PÁGINA DE TEXTO = */
.texto {
  max-width: 40rem; margin: 0 auto; padding: clamp(1.5rem, 5vw, 3rem) var(--gutter) 4rem;
  line-height: 1.65;
}
.texto h1 { font-size: clamp(1.7rem, 6vw, 2.4rem); font-weight: 800; letter-spacing: -.02em; }
.texto h2 {
  font-size: clamp(1.05rem, 3.6vw, 1.25rem); font-weight: 700; margin-top: 2rem; margin-bottom: .4rem;
}
.texto p, .texto ul { margin-bottom: .85rem; color: var(--tinta-2); }
/* O reset global tira os marcadores a todas as listas; aqui são precisos. */
.texto ul { padding-left: 1.2rem; list-style: disc; }
.texto li { margin-bottom: .3rem; }
.texto strong { color: var(--tinta); }
.texto__lead {
  font-size: 1.05rem; color: var(--tinta) !important; margin: .8rem 0 1.6rem;
  padding: .9rem 1rem; background: var(--carta); border: 1px solid var(--borda);
  border-radius: var(--raio);
}
.texto__voltar { font-weight: 600; }
.texto__data { font-size: .85rem; color: var(--tinta-3) !important; margin-top: 2rem; }
.texto__pendente {
  padding: .7rem .9rem; border-radius: var(--raio);
  background: var(--amarelo-luz); color: var(--amarelo) !important; font-weight: 600;
}
.conta__entrar {
  display: inline-flex; align-items: center; gap: .45rem; cursor: pointer;
  font: inherit; font-size: .85rem; font-weight: 600; color: var(--tinta);
  background: var(--carta); border: 1px solid var(--borda); border-radius: 999px;
  padding: .42rem .85rem; box-shadow: var(--sombra);
}
.conta__entrar:hover { border-color: var(--mar); }
.conta__entrar[disabled] { opacity: .6; cursor: default; }
.conta__entrar svg { flex: none; }

.conta__menu > summary { list-style: none; cursor: pointer; display: inline-flex; }
.conta__menu > summary::-webkit-details-marker { display: none; }
.conta__inicial {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: var(--mar); color: #fff; font-weight: 800; font-size: 1rem;
  border: 2px solid var(--carta); box-shadow: var(--sombra);
}
.conta__corpo {
  position: absolute; top: calc(100% + .5rem); right: 0; width: min(17rem, calc(100vw - 2 * var(--gutter)));
  background: var(--carta); border: 1px solid var(--borda); border-radius: var(--raio);
  box-shadow: var(--sombra); padding: .9rem; display: grid; gap: .5rem;
}
.conta__quem { display: grid; gap: .1rem; font-size: .88rem; word-break: break-word; }
.conta__quem span { color: var(--tinta-3); font-size: .82rem; }
.conta__nota { font-size: .8rem; color: var(--tinta-2); line-height: 1.45; }
.conta__botao {
  font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; text-align: left;
  padding: .5rem .6rem; border-radius: var(--raio);
  background: var(--carta-2); border: 1px solid var(--borda); color: var(--tinta);
}
.conta__botao:hover { border-color: var(--tinta-3); }
.conta__botao--perigo { color: var(--vermelho); }
.conta__botao--perigo:hover { border-color: var(--vermelho); }
.conta__botao[disabled] { opacity: .6; cursor: default; }

/* ---------------------------------------------------- painéis (Perfil) - */
/* `<dialog>` nativo e não uma div: traz de graça o fecho com Escape, o foco
   preso lá dentro enquanto está aberto, o resto da página inerte para leitores
   de ecrã, e o `::backdrop`. Nada disso é de graça numa div. */
.painel {
  width: min(30rem, calc(100vw - 2 * var(--gutter)));
  max-height: min(85svh, 44rem);
  padding: 0; border: 1px solid var(--borda); border-radius: var(--raio-g);
  background: var(--carta); color: var(--tinta); box-shadow: var(--sombra);
  overflow: hidden;
  /* O markup vive dentro do <header>, ao lado do avatar a que pertence, e o
     header é centrado: sem isto o painel herdava o centrado. */
  text-align: left;
}
.painel::backdrop { background: rgba(16, 34, 46, .45); backdrop-filter: blur(2px); }
.painel__topo {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .9rem 1rem; border-bottom: 1px solid var(--borda);
  position: sticky; top: 0; background: var(--carta); z-index: 1;
}
.painel__titulo { font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em; }
.painel__x {
  flex: none; width: 36px; height: 36px; display: grid; place-items: center; cursor: pointer;
  background: var(--carta-2); border: 1px solid var(--borda); border-radius: 50%; color: var(--tinta);
}
.painel__x:hover { border-color: var(--tinta-3); }
.painel__x svg { width: 18px; height: 18px; }
/* O corpo é que rola, não a página por baixo. */
.painel__corpo { padding: 1rem; display: grid; gap: 1rem; overflow-y: auto; max-height: inherit; }
.painel__bloco { display: grid; gap: .4rem; }
.painel__sub {
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--tinta-3);
}
.painel__nota { font-size: .85rem; color: var(--tinta-2); line-height: 1.5; }
.painel__nota a { color: var(--mar); }
.painel__linha { font-size: .95rem; font-weight: 600; }
.painel__bloco--perigo {
  border: 1px solid var(--borda); border-left: 3px solid var(--vermelho);
  border-radius: 0 var(--raio) var(--raio) 0; padding: .8rem; background: var(--carta-2);
}
.painel--curto { width: min(24rem, calc(100vw - 2 * var(--gutter))); }
.painel--curto .painel__titulo { margin-bottom: .5rem; }
/* Em coluna no telemóvel: lado a lado, «Apagar para sempre» ficava com metade
   da largura e o texto a partir-se. */
.painel__accoes { display: grid; gap: .5rem; margin-top: .3rem; }
.painel__accoes .conta__botao { text-align: center; padding: .6rem; }
@media (min-width: 26rem) {
  .painel__accoes { grid-auto-flow: column; justify-content: end; }
  .painel__accoes .conta__botao { padding: .6rem 1rem; }
}
/* Uma grelha de duas linhas: o ícone e a marca em cima, a pergunta por baixo.
   Com `inline-flex` e o claim em `inline`, a pergunta enrolava-se à volta do
   ícone e o cabeçalho ficava com três linhas desalinhadas. */
.marca {
  display: grid; grid-template-columns: auto auto; justify-content: center;
  align-items: center; gap: 0 .55rem;
  font-size: clamp(1.5rem, 5.4vw, 2.4rem); font-weight: 800; letter-spacing: -.02em;
}
/* «Praiómetro» é uma palavra inventada e não diz nada a quem chega pela
   primeira vez. A pergunta a que o site responde tem de estar no <h1>, e à
   vista também no telemóvel — estava escondida a um píxel de largura. */
.marca__claim {
  grid-column: 1 / -1; display: block;
  font-size: clamp(1rem, 3.6vw, 1.2rem); font-weight: 700; color: var(--tinta-ceu);
  margin-top: .1rem; text-wrap: balance;
}
.marca__icone { width: 1.15em; height: 1.15em; color: var(--mar); flex: none; }
.marca__icone svg { width: 100%; height: 100%; }

/* ========================================================== PROCURA ==== */
.procura { position: relative; padding: 0 var(--gutter); max-width: 640px; margin: 1.2rem auto 0; }
.procura__caixa {
  display: flex; align-items: center; gap: .5rem;
  background: var(--carta); border: 1px solid var(--borda); border-radius: 999px;
  padding: .45rem .5rem .45rem 1rem; box-shadow: var(--sombra);
}
.procura__caixa:focus-within { border-color: var(--mar); }
.procura__lupa { width: 20px; height: 20px; color: var(--tinta-3); flex: none; }
.procura__input {
  flex: 1; min-width: 0; border: 0; background: none; padding: .6rem 0; font-size: 1.05rem;
}
.procura__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.procura__input:focus { outline: none; }
.procura__perto {
  flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--mar); color: #fff; display: grid; place-items: center;
  transition: transform var(--t), filter var(--t);
}
.procura__perto svg { width: 21px; height: 21px; }
.procura__perto:hover { filter: brightness(1.1); }
.procura__perto:active { transform: scale(.94); }
.procura__perto[aria-busy="true"] { animation: pulsa 1s infinite; }
@keyframes pulsa { 50% { opacity: .5; } }

.sugestoes {
  position: absolute; left: var(--gutter); right: var(--gutter); z-index: 30;
  margin-top: .4rem; background: var(--carta); border: 1px solid var(--borda);
  border-radius: var(--raio); box-shadow: var(--sombra); overflow: hidden;
  max-height: min(52vh, 26rem); overflow-y: auto; overscroll-behavior: contain;
}
.sugestao {
  display: flex; align-items: baseline; gap: .6rem; width: 100%;
  padding: .7rem 1rem; cursor: pointer; border-bottom: 1px solid var(--borda);
  background: none; border-left: 0; border-right: 0; border-top: 0; text-align: left;
}
.sugestao:last-child { border-bottom: 0; }
.sugestao:hover { background: var(--carta-2); }
/* A MARCADA COM AS SETAS TEM DE SE VER. O único sinal era este fundo, que vale
   1,058:1 contra o da lista — a WCAG 1.4.11 pede 3:1 para um indicador que não
   é texto. Num combobox não há foco real a percorrer as opções (o foco fica na
   caixa e o `aria-activedescendant` é que anda), portanto não há anel do
   browser a salvar isto: quem escreve «praia» abre oito sugestões, três delas
   chamadas «Praia Nova», e carregava Enter sem saber qual das 995 ia abrir. */
.sugestao[aria-selected="true"] {
  background: var(--carta-2);
  outline: 2px solid var(--mar); outline-offset: -2px;
}
.sugestao__nome { font-weight: 600; }
.sugestao__meta { font-size: .82rem; color: var(--tinta-3); margin-left: auto; white-space: nowrap; }
.sugestao__rio {
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--mar); border: 1px solid currentColor; border-radius: 999px; padding: 0 .4em;
}
/* O NOME OFICIAL QUE FEZ O ENCONTRO. Quem escreve «Esmoriz» e recebe «Praia
   Velha» tem de perceber porquê, senão parece que o site abriu outra praia.
   Não é uma etiqueta como a de rio — é a mesma palavra que foi escrita —, por
   isso vai em texto normal e entre aspas baixas, que é como se cita em
   português. Não leva `white-space: nowrap`: alguns são compridos («Praia
   Velha dos Pescadores») e num telemóvel de 375 px têm de poder quebrar. */
.sugestao__alias { font-size: .82rem; color: var(--tinta-2); }
.sugestao__alias::before { content: "«"; }
.sugestao__alias::after { content: "»"; }
.procura__estado { text-align: center; color: var(--tinta-2); font-size: .9rem; margin-top: .6rem; min-height: 1.4em; }

/* ======================================================== RESULTADO ==== */
.resultado { max-width: 640px; margin: 1.2rem auto 0; padding: 0 var(--gutter); }

.veredicto {
  background: var(--carta); border: 1px solid var(--borda); border-radius: var(--raio-g);
  padding: clamp(1.2rem, 4vw, 1.8rem); box-shadow: var(--sombra); text-align: center;
  position: relative; overflow: hidden;
}
.veredicto__topo { display: flex; flex-direction: column; gap: .1rem; margin-bottom: 1rem; }
/* A estrela vive no canto e não entra na coluna: reservar-lhe largura ao lado
   do nome partia a data em duas linhas num telemóvel de 375 px. Só o nome se
   afasta dela — a data vem na linha de baixo, já fora do seu caminho. */
.veredicto__praia { padding: 0 2.2rem; }
.veredicto__praia { font-weight: 700; font-size: clamp(1.15rem, 4vw, 1.45rem); letter-spacing: -.01em; }
/* Sem text-transform: capitalize — em português dava «2 De Agosto». A
   primeira letra é posta no JavaScript. */
.veredicto__dia { color: var(--tinta-2); font-size: .95rem; }

/* O selo: cor + forma + palavra. Nunca só a cor. */
/* ============================================= AS DUAS PARTES DO DIA ====
   Uma regra e mais nenhuma: cada parte do dia é um bloco de largura inteira;
   quando as duas dizem o mesmo, são desenhadas JUNTAS, num bloco só, e o que
   dizem diz-se uma vez.

   NÃO HÁ UM ÚNICO <svg> DE DADOS AQUI. Os três ícones são forma, não gráfico:
   não codificam quantidade nenhuma. Nenhuma altura, nenhum comprimento e
   nenhuma área representa um número em lado nenhum deste ficheiro. Aqui esteve
   uma silhueta que o fazia, e foi rejeitada por ser confusa — ler um gráfico
   não trivial é competência de uma minoria, e ler um número é de quase todos.

   CONTRASTE, e a razão de a cor só pintar a palavra:
     verde    #0e7a4a sobre #d7f2e3 = 4,54:1   <- passa por 0,04
     amarelo  #8a5c00 sobre #fdf0cf = 5,13:1
     vermelho #b3261e sobre #fbdfdc = 5,22:1
   4,54:1 é o fio da navalha. Por isso a cor SÓ é usada em texto grande e
   pesado (onde a norma pede 3:1) e nos ícones; todos os NÚMEROS e todos os
   NOMES vão a var(--tinta) sobre o fundo pastel. */

.partes { margin: .9rem 0 0; }
.parte--verde    { --p-cor: var(--verde);    --p-fundo: var(--verde-luz); }
.parte--amarelo  { --p-cor: var(--amarelo);  --p-fundo: var(--amarelo-luz); }
.parte--vermelho { --p-cor: var(--vermelho); --p-fundo: var(--vermelho-luz); }
.parte--semdados { --p-cor: var(--tinta-3);  --p-fundo: var(--carta-2); }

/* O cartão deixa de ser centrado: tudo lá dentro é lista, e uma lista com
   números lê-se da esquerda. */
.veredicto { text-align: left; }
/* A BARRA DE COR DO TOPO SAIU — e saiu do ficheiro, não só do ecrã. Estava
   definida com 5px de altura e desligada vinte linhas abaixo com
   `content: none`, sem media query pelo meio: duas regras a anularem-se, e uma
   terceira (a posição da estrela) ainda a descontar a altura de uma barra que
   não existe. A razão de ter saído mantém-se: num dia partido teria de ter a
   cor da MÉDIA, que pode discordar das duas partes logo por baixo. */
.veredicto__praia { padding: 0 3rem 0 0; }
.veredicto__topo { margin-bottom: .2rem; }

/* --------------------------------- a resposta (só no estado partido) --- */
/* A maior coisa do cartão num dia partido. Vai a var(--tinta) e NUNCA a uma
   cor de veredicto: há duas cores no ecrã e a frase não é de nenhuma delas. */
.veredicto__resposta {
  margin: .9rem 0 .1rem;
  font-size: clamp(1.45rem, 6.6vw, 1.85rem);
  font-weight: 800; line-height: 1.12; letter-spacing: -.02em;
  color: var(--tinta); text-wrap: balance;
}
.veredicto__resposta:empty { display: none; }

/* ------------------------------------------------ os dois blocos ------ */
/* A fenda é o portador de «são dois» — e é o único que sobrevive ao modo de
   contraste elevado, coisa que a cor não faz.

   Aqui esteve uma segunda forma, para os dias em que as duas partes eram
   iguais: um bloco só, com a palavra dita uma vez. Saiu a pedido. Um cartão
   que muda de feitio consoante o dia obriga quem o abre de três em três
   semanas a reconhecer duas coisas em vez de uma; dois blocos todos os dias
   aprendem-se uma vez e nunca mais surpreendem. */
.partes__blocos { display: grid; gap: .625rem; list-style: none; padding: 0; }
/* O bloco deixou de ser a linha e passou a ser só a MOLDURA: a linha mudou-se
   para uma cabeça com as mesmas medidas, para haver onde pendurar o painel. A
   caixa fechada é, ao píxel, a que foi aprovada — 84 + 2 + 2 = 88. */
.bloco {
  display: block; padding: 0; min-height: 88px;
  background: var(--p-fundo); border: 2px solid var(--p-cor);
  border-radius: var(--raio-g);
}
.bloco__cabeca {
  display: flex; align-items: center; gap: .75rem;
  width: 100%; min-height: 84px; padding: .9rem 1rem; margin: 0;
  font: inherit; color: inherit; text-align: left;
  background: none; border: 0; border-radius: calc(var(--raio-g) - 2px);
}
button.bloco__cabeca { cursor: pointer; -webkit-tap-highlight-color: transparent; }
/* Com os +3 px de `outline-offset` globais, o anel de foco era desenhado POR
   CIMA do contorno de 2 px do bloco e lia-se como parte do desenho. Por dentro,
   sobre o pastel, vê-se — e o raio tem de ser reposto, senão um anel de 6 px
   dentro de uma caixa de 22 px fica torto nos cantos. */
button.bloco__cabeca:focus-visible {
  outline-offset: -4px; border-radius: calc(var(--raio-g) - 2px);
}
/* Um color-mix e não um filter: brightness() — a mesma regra escurece no claro
   e clareia no escuro. E NUNCA um transform: um antepassado transformado já
   matou cliques neste projecto uma vez. */
button.bloco__cabeca:active {
  background: color-mix(in oklab, var(--p-cor) 12%, transparent);
}
.bloco__icone { width: 44px; height: 44px; flex: none; color: var(--p-cor); }
.bloco__icone svg { width: 100%; height: 100%; display: block; }
.bloco__texto { display: grid; gap: .05rem; flex: 1; min-width: 0; }
.bloco__nome { font-size: 1.15rem; font-weight: 700; color: var(--tinta); line-height: 1.2; }
.bloco__palavra {
  font-size: 1.2rem; font-weight: 800; color: var(--p-cor);
  line-height: 1.2; letter-spacing: -.01em; text-wrap: balance;
}
.bloco__razao { font-size: .92rem; color: var(--tinta-2); line-height: 1.35; }
/* A nota fica encostada à direita, como foi aprovado. A seta vive POR BAIXO
   dela, na mesma coluna: não rouba largura à palavra, e fora da linha de
   leitura do número não se lê como «81 e a descer». Contas a 375 px: 33,75 (a
   nota, a 9vw) + 1,6 + 18 = 53,35 px, contra os 55,2 que a caixa já dava. */
.bloco__dir { margin-left: auto; flex: none; display: grid; justify-items: end; gap: .1rem; }
.bloco__nota {
  font-size: clamp(1.95rem, 9vw, 2.4rem); font-weight: 800; line-height: 1;
  color: var(--tinta); font-variant-numeric: tabular-nums; letter-spacing: -.03em;
}
.bloco__seta { width: 18px; height: 18px; color: var(--tinta-2); transition: transform var(--t); }
.bloco__seta svg { width: 100%; height: 100%; display: block; }
[aria-expanded="true"] .bloco__seta { transform: rotate(180deg); }

/* O único sinal ESCRITO de que os blocos se carregam. Uma frase não é uma
   legenda a decifrar: lê-se à primeira aos 70 anos, e mata o risco de a
   descoberta ficar pendurada só numa seta de 18 px. */
.partes__pista { margin-top: .5rem; font-size: .82rem; color: var(--tinta-2); line-height: 1.5; }
.partes__pista b { color: var(--tinta); font-weight: 700; }

/* ---------------------------- os cinco números, dentro do bloco ------- */
/* SEM animação de altura. Um bloco a crescer durante 300 ms é um bloco que
   durante 300 ms está a mentir sobre onde estão as coisas — e é a animação que
   faria a compensação de scroll medir um valor que ainda está a mudar. */
.bloco__numeros { padding: 0 1rem 1rem; }

/* A mesma anatomia do bloco, um andar abaixo: ícone à esquerda, nome, número
   encostado à direita, palavra por baixo a ocupar a largura toda. */
.nums { list-style: none; padding: 0; margin: 0; }
.nums__linha {
  display: grid; grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: baseline; column-gap: .6rem; row-gap: .1rem; padding: .4rem 0;
  /* O recuo vem primeiro: sem ele, um browser sem color-mix deitava fora a
     declaração inteira e ficava SEM separador nenhum. */
  border-top: 1px solid var(--borda);
  border-top-color: color-mix(in oklab, var(--p-cor) 28%, transparent);
}
/* Aqui esteve um fio de 2 px na linha da água, a dizer pela FORMA que aquele
   factor não se reparte pela manhã e pela tarde. Saiu com a frase que o
   explicava: um traço mais grosso sem uma palavra a dizer o que significa é
   exactamente a classe de coisa que este site tem andado a tirar do ecrã.
   A água continua a ser a mesma nas duas partes — e continua a ser o número
   que a conta usou; o que deixou de haver é um sinal que ninguém pediu. */
/* O ICONES_FACTOR estava declarado no app.js desde sempre e nunca foi chamado
   por ninguém. 22 px, com o nome escrito ao lado — um ícone com o nome ao lado
   nunca precisa de legenda. SEMPRE a mesma cor: nunca verde/amarelo/vermelho
   conforme o factor, que seria um segundo semáforo dentro do primeiro. */
.nums__icone { grid-column: 1; grid-row: 1; width: 22px; height: 22px;
               color: var(--tinta-2); align-self: center; }
.nums__icone svg { width: 100%; height: 100%; display: block; }
.nums__nome { grid-column: 2; font-size: .95rem; font-weight: 700;
              color: var(--tinta); line-height: 1.25; }
/* nowrap no valor + o nome livre para quebrar = transbordo estruturalmente
   impossível: quando aperta, é o nome que passa a duas linhas. */
.nums__valor {
  grid-column: 3; justify-self: end; text-align: right;
  font-size: 1.05rem; font-weight: 800; color: var(--tinta);
  font-variant-numeric: tabular-nums; line-height: 1.2; white-space: nowrap;
}
/* MEDIDO, e é a armadilha deste ficheiro: var(--tinta-3) sobre o pastel dá
   4,61:1 no tema CLARO — passa — e 3,96:1 no ESCURO. Chumba, e chumba só
   metade das vezes: foi assim que o «Saltar para o resultado» esteve meses a
   2,14:1. AQUI NÃO ENTRA NEM --tinta-3 NEM COR DE VEREDICTO. */
.nums__palavra { grid-column: 2 / -1; font-size: .875rem; color: var(--tinta-2); line-height: 1.35; }
.nums__extra   { color: var(--tinta-2); }
/* Os pesos (34/26/18/14/8) NÃO vão ao ecrã: são meta-informação sobre o modelo
   e não sobre o dia, e cinco números novos duplicavam a contagem de números da
   página. O peso diz-se pela ORDEM, e a ordem diz-se aqui. */
/* O TRIÂNGULO da linha do valor mau. A `--amarelo` — a cor do DESCONFORTO
   neste cartão — e nunca a `--vermelho`, que é a da SEGURANÇA e vive no aviso
   de trovoada. São dois triângulos com dois significados, e o que os separa é
   a cor e a caixa: este anda solto ao lado de um nome, aquele vem dentro de
   uma caixa vermelha a dizer «Aviso de segurança».
   Medido sobre os três pastéis do painel: 4,62-5,13:1 no claro e 8,31-10,34:1
   no escuro — e o mínimo para um objecto gráfico é 3:1. */
.nums__mau {
  display: inline-block; width: 1em; height: 1em;
  vertical-align: -.1em; margin-left: .35rem; color: var(--amarelo);
}
.nums__mau svg { width: 100%; height: 100%; display: block; }
@media (forced-colors: active) { .nums__mau { color: CanvasText; } }

.nums__ordem {
  margin-top: .6rem; padding-top: .6rem;
  border-top: 1px solid var(--borda);
  border-top-color: color-mix(in oklab, var(--p-cor) 28%, transparent);
  font-size: .8rem; color: var(--tinta-2); line-height: 1.45;
}
/* --tinta e sublinhado, e não var(--mar): no tema escuro o --mar é um azul
   claro e sobre o pastel escuro não está medido. */
.nums__ordem a { color: var(--tinta); font-weight: 700; text-decoration: underline; }

/* A fonte dos dados, que era o rodapé do «Ver os números». */
/* Só aparece nas praias de rio e nos pontos sem dados de mar. O :empty tira-a
   do fluxo no caso normal — sem caixa reservada e sem salto de layout. */
.veredicto__sem-mar { margin-top: .9rem; font-size: .78rem; color: var(--tinta-3); line-height: 1.45; }
.veredicto__sem-mar:empty { display: none; }
/* Sem número, o texto ocupa a largura toda. Nada de espaço reservado a um «✕»
   que se lê como avaria ou como «fechado», nunca como «não vale a pena». */
.bloco--sem-nota .bloco__nota { display: none; }

/* «já passou»: NUNCA por opacidade. O medidor de contraste do projecto lê a
   `color` sem descontar a opacidade dos antepassados, e um opacity:.55 daria
   texto a ~2,6:1 a passar no teste. */
/* --tinta-2 e NÃO --tinta-3: sobre o pastel escuro o --tinta-3 dá 3,96:1, e o
   nome está a 18,4 px — quatro décimas abaixo dos 18,66 px que a norma aceita
   como «texto grande», portanto exige 4,5:1 e chumba. Só se via no cartão de
   HOJE depois das 13h, e só no tema escuro: por isso esteve escondido até o
   teste passar a abrir um bloco. */
.bloco--passou .bloco__nome, .bloco--passou .bloco__nota { color: var(--tinta-2); }

/* A nota do dia e a frase da razão sairam do cartão a pedido; as regras que as
   pintavam sairam com elas. */
.partes__sem { font-size: 1.05rem; color: var(--tinta-2); line-height: 1.45; }

/* A previsão guardada. Usa a caixa do aviso de conforto — o amarelo — e nunca
   a de segurança: não é um perigo, é uma ressalva sobre a idade do número. */
.veredicto__antiga {
  margin: .5rem 0 0; padding: .5rem .7rem; border-radius: var(--raio);
  background: var(--amarelo-luz); color: var(--amarelo);
  font-size: .85rem; font-weight: 600; line-height: 1.4;
}

/* A MARÉ. Sem caixa de cor: não é um aviso nem um veredicto, é um facto sobre
   o mar. Um fio em cima separa-a dos blocos sem lhe dar peso de secção. */
.mare {
  margin-top: .9rem; padding-top: .7rem;
  border-top: 1px solid var(--borda);
}
/* A curva. `preserveAspectRatio="none"` estica-a à largura do cartão, e é de
   propósito: o que interessa é ONDE cai a maré nas horas, não a proporção
   entre o eixo do tempo e o da altura — que nem sequer tem escala, porque não
   se mostram metros. */
.mare__svg { display: block; width: 100%; height: 78px; overflow: visible; }
/* A janela de praia, 9h-19h. NEUTRA, e é de propósito: a primeira versão
   pintava-a de `--mar` como a água, e as duas manchas azuis liam-se como a
   mesma coisa em intensidades diferentes. Cinzento não compete com o mar. */
.mare__janela { fill: var(--tinta); opacity: .07; }
.mare__area   { fill: var(--mar); opacity: .28; }
.mare__linha  { fill: none; stroke: var(--mar); stroke-width: 2;
                stroke-linecap: round; stroke-linejoin: round; }
.mare__ponto  { fill: var(--mar); }
/* A hora a `--tinta`: sobre o cartão branco o `--mar` dá 4,52:1, que passa por
   duas centésimas, e este texto é pequeno. A tinta dá mais de 12:1. */
.mare__hora {
  fill: var(--tinta); font-size: 11px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
@media (forced-colors: active) {
  .mare__linha { stroke: CanvasText; }
  .mare__ponto { fill: CanvasText; }
  .mare__area, .mare__janela { fill: none; }
}

.veredicto__aviso {
  margin-top: .9rem; padding: .6rem .8rem; border-radius: var(--raio);
  background: var(--amarelo-luz); color: var(--amarelo); font-size: .88rem; font-weight: 600;
}

/* O padding e o gap SAEM do .bloco e vão para a .bloco__cabeca, na MESMA
   edição. Se ficassem onde estavam, abaixo dos 360 px o rectângulo pastel
   ganhava uma almofada dupla — uma a envolver a cabeça E o painel, outra
   dentro de cada um — o painel deixava de alinhar com o nome, e o bloco aberto
   crescia uns 26 px. Um defeito que só existe abaixo dos 360 px, ou seja,
   exactamente onde ninguém testa. */
@media (max-width: 360px) {
  .veredicto { padding: 14px; }
  .bloco { min-height: 82px; }
  .bloco__cabeca { padding: .8rem; gap: .6rem; min-height: 78px; }
  .bloco__icone { width: 40px; height: 40px; }
  .bloco__palavra { font-size: 1.1rem; }
  .bloco__numeros { padding: 0 .8rem .8rem; }
  .nums__linha { padding: .35rem 0; column-gap: .5rem; }
  .nums__nome { font-size: .9rem; }
  .nums__palavra { font-size: .85rem; }
}

/* Com as cores todas forçadas para a mesma sobram a PALAVRA, o NÚMERO, o
   ÍCONE e — o mais importante — a fenda entre os dois blocos. «Um objecto ou
   dois» não depende de cor nenhuma. */
@media (forced-colors: active) {
  .bloco { background: Canvas; border-color: CanvasText; }
  .bloco__palavra, .bloco__icone { color: CanvasText; }
  /* Com as cores forçadas sobra o que sempre sobrou — a fenda entre os dois
     blocos, a palavra, o número — e agora também a seta e os fios. */
  .nums__linha, .nums__ordem { border-top-color: CanvasText; }
  .bloco__seta, .nums__icone { color: CanvasText; }
}

/* SEM ANIMAÇÃO na troca de dia: um bloco que se divide em dois durante 400 ms
   é um bloco que durante 400 ms está a mentir. */


/* ---------------------------------------------------------- a estrela */
.estrela {
  /* `.7rem` e não `calc(5px + .5rem)`: os 5px eram a altura da barra de cor do
     topo, que saiu. Este valor já estava escrito vinte linhas acima, num bloco
     com a mesma especificidade e MAIS ACIMA no ficheiro — portanto perdia para
     esta regra e nunca chegou a aplicar-se. Alguém corrigiu isto e a correcção
     ficou pelo caminho; agora está no sítio onde manda. */
  position: absolute; top: .7rem; right: .6rem; z-index: 1;
  width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer;
  background: none; border: 0; border-radius: 50%;
  color: var(--tinta-3); transition: color var(--t), transform var(--t);
}
.estrela svg { width: 25px; height: 25px; }
/* O nome acessível vem do aria-label, que diz a praia e o que o botão faz.
   Este texto fica cá como rede, para leitores que ignorem o aria-label. */
.estrela__texto {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.estrela:hover { color: var(--tinta); }
/* Marcada muda de COR e de FORMA — a estrela passa a cheia. A cor sozinha
   nunca chega (WCAG 1.4.1). */
/* #c07f00 dá 3,34:1 em branco; o dourado mais bonito, #d99400, ficava-se por
   2,56:1 e a 1.4.11 pede 3:1 a um controlo que mostra estado. */
.estrela[aria-pressed="true"] { color: #c07f00; }
.estrela[aria-pressed="true"] svg { fill: currentColor; }
@media (prefers-color-scheme: dark) { .estrela[aria-pressed="true"] { color: #f5b83d; } }
.estrela:active { transform: scale(.9); }
@media (prefers-reduced-motion: reduce) { .estrela { transition: none; } .estrela:active { transform: none; } }

/* ====================================================== AS TUAS PRAIAS = */
.favoritos { max-width: 640px; margin: 1.1rem auto 0; padding: 0 var(--gutter); }
.favoritos__titulo {
  font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  /* .25rem e não .5rem: a tira abaixo ganhou .25rem de `padding-block` para
     caber o anel do favorito escolhido, e a soma mantém o espaço de antes. */
  color: var(--tinta-3); margin-bottom: .25rem;
}
.favoritos__lista {
  list-style: none; display: flex; gap: .45rem; overflow-x: auto;
  /* `overflow-x: auto` obriga o `overflow-y` a passar de `visible` a `auto`:
     a tira corta também em cima e em baixo, não só aos lados. O favorito
     escolhido leva um anel de 2px em `box-shadow`, que fica FORA da caixa —
     sem folga aqui, o topo desse anel aparecia cortado a régua. */
  /* .25rem dos dois lados: a barra de scroll fica ABAIXO da caixa de conteúdo,
     não dentro dela, e por isso não é preciso somar-lhe a altura aqui. */
  padding-block: .25rem;
  /* A barra tem de se ver. Com 15 praias a tira transborda mais de 1300px, e
     a sangria até às margens não chega para dizer que há mais para o lado.
     `thin` é para o Firefox; no WebKit, dar altura à barra troca a de
     sobreposição — que no macOS desaparece quando se está quieto — por uma
     clássica, que fica sempre à vista. */
  scrollbar-width: thin;
  scrollbar-color: var(--tinta-3) transparent;
  /* No telemóvel a tira sangra até às margens, para se ver que rola. */
  margin: 0 calc(var(--gutter) * -1); padding-inline: var(--gutter);
  scroll-snap-type: x proximity;
  /* O encosto tem de ser na goteira, não na borda do ecrã: sem isto o
     `scroll-snap-align: start` alinhava o primeiro chip com o início do
     snapport e rolava a goteira toda para fora, deixando-o rente ao vidro e
     desalinhado do «AS TUAS PRAIAS» que está por cima. */
  scroll-padding-inline: var(--gutter);
}
.favoritos__lista::-webkit-scrollbar { height: 10px; }
.favoritos__lista::-webkit-scrollbar-track { background: transparent; }
.favoritos__lista::-webkit-scrollbar-thumb {
  background: var(--tinta-3); border-radius: 999px;
  /* A borda transparente com `background-clip` afina a barra para 4px sem a
     cortar nas pontas — mais discreta do que os 10px do canal. */
  border: 3px solid transparent; background-clip: content-box;
}
/* Os favoritos falam a mesma língua: fundo pastel e contorno de 2 px na cor
   do dia. Enquanto não se sabe a cor de uma praia, fica neutra — e isso lê-se
   como «ainda não sei», que é a verdade. */
.fav {
  scroll-snap-align: start;
  display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap;
  padding: .42rem .8rem .42rem .55rem; cursor: pointer; font: inherit;
  font-size: .88rem; font-weight: 600; color: var(--tinta);
  background: var(--fav-fundo, var(--carta));
  border: 2px solid var(--fav-cor, var(--borda)); border-radius: 999px;
  transition: box-shadow var(--t);
}
.fav[aria-current="true"] { box-shadow: 0 0 0 3px var(--fav-cor, var(--mar)); }
.fav__ponto {
  width: 20px; height: 20px; flex: none; display: grid; place-items: center;
  color: var(--fav-cor, var(--tinta-3));
}
.fav__ponto svg { width: 100%; height: 100%; }
.favoritos__aviso { margin-top: .5rem; font-size: .85rem; color: var(--amarelo); font-weight: 600; }
.fav__rio {
  font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--mar); border: 1px solid currentColor; border-radius: 999px;
  padding: 0 .4em; flex: none;
}
.fav--verde    { --fav-cor: var(--verde);    --fav-fundo: var(--verde-luz); }
.fav--amarelo  { --fav-cor: var(--amarelo);  --fav-fundo: var(--amarelo-luz); }
.fav--vermelho { --fav-cor: var(--vermelho); --fav-fundo: var(--vermelho-luz); }

/* Aqui viviam `--cor-actual` e `--cor-fundo`, definidas por veredicto no
   <body>. Saíram porque NINGUÉM AS LIA: a `--cor-fundo` já não tinha leitor
   nenhum, e a `--cor-actual` ficou sem o dela quando a barra de cor do topo do
   cartão saiu do ficheiro. O `data-cor` continua no <body> — é ele que muda o
   céu — e as variáveis do céu são outras. */

/* ============================================================= DIAS ====
   Três por linha e duas linhas, sem rolo horizontal. Seis células em linha a
   320 px davam 41 px cada: a nota a 11,8 px — mais pequena do que o aviso
   legal das bandeiras — e uns 124 px de tira a viver fora do ecrã. Três por
   linha dão uns 90 px, e a resposta mais valiosa que este site tem num dia
   mau («então quando?») deixa de exigir rolar em duas direcções. */
/* minmax(0, 1fr) e NÃO 1fr: `1fr` é `minmax(auto, 1fr)`, e o `auto` impede a
   célula de encolher abaixo do seu conteúdo mínimo. Com nomes de larguras
   diferentes, as seis colunas saíam desiguais — medido a 375 px: 47, 74, 57,
   57, 57 e 46 px — e a tira transbordava 16 px para fora do cartão. */
/* UMA regra para as duas larguras, sem ponto de corte nenhum: o minmax diz que
   a célula NUNCA encolhe abaixo dos 5,6rem (89,6 px, que é o tamanho a que ela
   fica no computador) e que estica até 1fr quando há espaço. No telemóvel os
   seis não cabem — 580 px de tira em 343 de cartão — e é a tira que rola, nunca
   a página. Houve uma versão a apertar os seis para dentro dos 375 px: davam 53
   px cada, obrigavam a abreviar «Amanhã» para «Qui» e a palavra do veredicto
   partia-se em três linhas. Foi tirada a pedido.

   O que aqui está de padding e de scroll-padding foi ganho a ferro no commit
   b7cd579 e não é decoração: sem os 3 px de folga o `overflow-x` cortava os
   2 px do anel do dia escolhido do lado esquerdo — via-se o contorno reto à
   esquerda e redondo à direita — e sem o `scroll-padding-inline` o browser
   rolava exactamente esses 3 px para encostar ao snapport e a folga deixava de
   existir (medido: `scrollLeft` a 3). A margem negativa devolve o alinhamento
   com o cartão do veredicto. */
.dias {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(5.6rem, 1fr);
  gap: .5rem; margin-top: .6rem;   /* .8rem menos os 3 px que o padding cresceu */
  overflow-x: auto; overscroll-behavior-x: contain;
  /* `overflow-x: auto` obriga o `overflow-y` a passar de `visible` a `auto`: a
     tira corta também EM CIMA e em baixo, não só aos lados — a mesma armadilha
     que a tira dos favoritos já documenta. Em cima é preciso somar duas coisas:
     os 3 px do anel do dia escolhido, que vive em `box-shadow` e fica FORA da
     caixa, MAIS os 2 px que o `:hover` levanta o cartão. Com 3 px o anel do
     escolhido aparecia cortado a régua no topo assim que a célula levantava —
     medido, sobrava 1 px de folga para um anel de 3. O sexto píxel é margem
     para o arredondamento a 3 dpr.
     Aos lados bastam 3: aí não há nada a levantar, só o anel. */
  padding: 6px 3px; margin-inline: -3px;
  scroll-padding-inline: 3px;
  scroll-snap-type: x proximity;
  /* Sem barra, nada dizia que havia mais para o lado. */
  scrollbar-width: thin; scrollbar-color: var(--tinta-3) transparent;
}
.dias::-webkit-scrollbar { height: 10px; }
.dias::-webkit-scrollbar-track { background: transparent; }
.dias::-webkit-scrollbar-thumb {
  background: var(--tinta-3); border-radius: 999px;
  border: 3px solid transparent; background-clip: content-box;
}
/* O MESMO vocabulário dos blocos da manhã e da tarde: fundo pastel da cor do
   veredicto, contorno de 2 px na mesma cor, cantos grandes. Quem aprendeu a
   ler um bloco no cartão lê estes seis sem aprender nada de novo — e a tira
   deixa de ser uma fila de caixas brancas onde só a bolinha tem cor. */
.dia {
  scroll-snap-align: start;
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  padding: .7rem .3rem .75rem; cursor: pointer;
  background: var(--dia-fundo, var(--carta));
  border: 2px solid var(--dia-cor, var(--borda)); border-radius: var(--raio-g);
  transition: transform var(--t), box-shadow var(--t);
}
/* Só onde há mesmo um rato. Num telemóvel o `:hover` fica COLADO depois do
   toque: a célula tocada ficava levantada 2 px indefinidamente, e era isso que
   metia o topo do seu contorno dentro do corte da tira. Quem toca não precisa
   de um estado que diz «estás por cima disto». */
@media (hover: hover) {
  .dia:hover { transform: translateY(-2px); }
}
/* O dia escolhido: um anel por fora, e não uma cor diferente. Com os seis já
   pintados, mudar a cor do escolhido não se via. */
.dia[aria-selected="true"] { box-shadow: 0 0 0 3px var(--dia-cor, var(--mar)); }
/* Sem MAIÚSCULAS e sem letter-spacing: a uns 10 px, maiúsculas espaçadas
   tiram a silhueta às palavras e obrigam a ler letra a letra — que é
   exactamente o que a presbiopia não perdoa. Estava a 9,9 px. */
.dia__nome { font-size: .95rem; font-weight: 700; color: var(--tinta); }
/* Sem bolha: o cartão inteiro já é da cor do dia, e um círculo da mesma cor
   por dentro dele era um contorno a mais sem informação nenhuma. */
.dia__bolha { width: 30px; height: 30px; display: grid; place-items: center; color: var(--dia-cor); }
.dia__bolha svg { width: 100%; height: 100%; }
/* De 11,8 px para 21,6 px. Era mais pequena do que o aviso legal das
   bandeiras — e é o número que responde a «então quando?». */
/* A NOTA a var(--tinta) e não à cor do dia: sobre o fundo pastel, o verde
   #0e7a4a dá 4,54:1 — passa por quatro centésimas, e a norma só perdoa isso
   em texto grande. A tinta dá mais de 12:1. Quem carrega a cor é a palavra. */
.dia__nota { font-size: 1.5rem; font-weight: 800; color: var(--tinta);
             font-variant-numeric: tabular-nums; line-height: 1.05; }
/* A PALAVRA. Duas linhas SEMPRE reservadas, para as seis células terem a
   mesma altura e a grelha não dançar de dia para dia. */
.dia__palavra {
  font-size: .8rem; line-height: 1.15; font-weight: 600; color: var(--dia-cor, var(--tinta-2));
  min-height: 2.3em; display: flex; align-items: flex-start;
  justify-content: center; text-wrap: balance;
}
.dia--verde    { --dia-cor: var(--verde);    --dia-fundo: var(--verde-luz); }
.dia--amarelo  { --dia-cor: var(--amarelo);  --dia-fundo: var(--amarelo-luz); }
.dia--vermelho { --dia-cor: var(--vermelho); --dia-fundo: var(--vermelho-luz); }

/* ========================================================= DETALHE ==== */

/* =========================================================== VAZIO ==== */
.vazio { max-width: 640px; margin: 1.4rem auto 0; padding: 0 var(--gutter); text-align: center; }
.vazio__texto { color: var(--tinta-2); }
/* No telemóvel quebra, e são duas linhas. A partir de 36rem passa a `nowrap`,
   para as cinco ficarem sempre na mesma linha e nunca sobrar uma praia sozinha
   na linha de baixo por causa de dois pixéis.

   36rem e não menos: medidas as cinco dão 474px, e a caixa a essa largura tem
   530px — sobram 56px (12%). Aos 34rem sobravam só 26px, e a fonte não é a
   mesma em todos os sistemas: o Windows cai no Segoe UI, que é mais largo, e
   uma lista que aqui cabe podia lá transbordar. */
.vazio__sugestoes { display: flex; flex-wrap: wrap; gap: .45rem; justify-content: center; margin-top: 1rem; }
@media (min-width: 36rem) {
  .vazio__sugestoes { flex-wrap: nowrap; }
}
.atalho {
  border: 1px solid var(--borda); background: var(--carta); border-radius: 999px;
  padding: .45rem .9rem; cursor: pointer; font-size: .92rem; font-weight: 600;
  transition: transform var(--t), border-color var(--t);
}
.atalho:hover { transform: translateY(-1px); border-color: var(--mar); }

/* ========================================================== RODAPÉ ==== */
.rodape { max-width: 640px; margin: 2.5rem auto 0; padding: 0 var(--gutter) 3rem; }

.rodape__nav { text-align: center; margin-bottom: .9rem; display: flex; gap: 1.2rem; justify-content: center; flex-wrap: wrap; }
/* SUBLINHADOS, E COM A TINTA DO CÉU. Estavam a `var(--mar)`, o azul da marca,
   e isso trazia dois problemas de uma vez:
     · teal sobre céu ciano é um conflito de fundo. Medido no runner, com o céu
       azul, os três davam 4,13 a 4,17:1 — a norma pede 4,5 — e nem clarear o
       céu do dia mau chegava para o salvar: o azul teria de ir a #08404f, que
       já não é azul nenhum;
     · e distinguiam-se do texto à volta SÓ PELA COR, que é a WCAG 1.4.1.
   O sublinhado é o que um link de rodapé usa em qualquer sítio, e a tinta do
   céu já está medida contra todos os céus. */
.rodape__nav a {
  font-size: .88rem; font-weight: 600; color: var(--tinta-3);
  text-decoration: underline; text-underline-offset: 3px;
  display: inline-block; padding: .35rem .2rem;
}

.rodape__fontes { font-size: .8rem; color: var(--tinta-3); text-align: center; }
.rodape__fontes a { color: inherit; }

/* ========================================================= ECRÃS ====== */
/* A partir daqui os seis já cabem: cai o mínimo dos 5,6rem — as células passam
   a repartir a largura toda — e cai o rolo com ele. Estava nos 700 px, e entre
   os 620 e os 700 a tira rolava por 8 px, que é o pior dos dois mundos: rola,
   mas não se percebe que rola. Medido: a 620 px as células ficam a 89,3, três
   décimas abaixo do mínimo — não se vê. */
@media (min-width: 620px) {
  .dias { grid-auto-columns: 1fr; overflow: visible; }
}
@media (prefers-reduced-motion: reduce) {
  /* `animation-duration: .01ms` sem travar as repetições transforma uma
     animação infinita — como o `pulsa` do botão do alfinete — num pisca a
     60 Hz. É o oposto do que quem liga esta preferência está a pedir, e para
     quem tem sensibilidade vestibular ou fotossensibilidade chega a ser
     perigoso. As repetições têm de ser travadas também. */
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .ceu { transition: none; }
  .procura__perto[aria-busy="true"] { animation: none; opacity: .6; }
}

/* No modo de contraste elevado do Windows o sistema força todas as cores de
   contorno para a mesma, e a selecção do dia e do favorito actual — que só se
   marcam por border-color + box-shadow — ficavam iguais a todos os outros.
   O outline é das poucas coisas que sobrevive. */
@media (forced-colors: active) {
  .dia[aria-selected="true"],
  .fav[aria-current="true"] { outline: 3px solid Highlight; outline-offset: 2px; }
  .estrela[aria-pressed="true"] svg { fill: Highlight; stroke: Highlight; }
}

/* Um veto de segurança — trovoada, rajadas, mar muito cavado — não pode ser
   dito no mesmo tom amarelo que «a água está fria». */
.veredicto__aviso--perigo {
  background: var(--vermelho-luz); color: var(--vermelho);
  border: 1px solid currentColor;
  /* O triângulo ao lado do texto, e não em vez dele: a lei da cor nunca
     sozinha vale aqui como em todo o lado. */
  display: flex; align-items: flex-start; gap: .5rem;
}
.veredicto__aviso-icone { flex: none; width: 20px; height: 20px; margin-top: .05rem; }
.veredicto__aviso-icone svg { width: 100%; height: 100%; display: block; }

/* Aviso das bandeiras, junto ao veredicto. Discreto mas presente — estava no
   rodapé, onde ninguém chega, e é a única coisa no site que pode evitar que
   alguém confunda «vale a pena ir» com «é seguro nadar». */
.aviso-bandeiras {
  display: flex; align-items: flex-start; gap: .6rem;
  margin-top: 1rem; padding: .75rem .9rem;
  background: var(--carta); border: 1px solid var(--borda); border-radius: var(--raio);
  font-size: .85rem; color: var(--tinta-2); line-height: 1.45;
}
.aviso-bandeiras svg { width: 20px; height: 20px; flex: none; color: var(--mar); margin-top: .1rem; }
.aviso-bandeiras strong { color: var(--tinta); }

/* =========================================================== ONDE FICA == */
/* O mapa é SVG desenhado no browser a partir de data/mapa.json. Sem tiles e
   sem pedidos a terceiros — ver o comentário no index.html. */
/* SEM gutter próprio: o <section class="resultado"> que o contém já tem o dele,
   e os dois somados metiam o mapa 16 px para dentro de cada lado em relação aos
   irmãos — media 311 px onde o aviso das bandeiras media 343. O max-width
   também sai: era o mesmo 640 px do pai, a repetir a mesma regra em dois
   sítios. Medido a 375, 700 e 1000 px. */
.mapa { margin-top: 1.1rem; }
/* FORA DE UM CARTÃO, O QUE ESTÁ POR TRÁS DO TEXTO É O CÉU.
   Redefinem-se aqui as duas tintas esbatidas, e não se vai pintar elemento a
   elemento: as variáveis herdam, portanto tudo o que lá dentro use
   `var(--tinta-2)` ou `var(--tinta-3)` passa a receber a versão que aguenta o
   céu. Perseguir isto selector a selector era uma corrida sem fim — foi assim
   que o `--tinta-3` chegou aqui com o comentário «5,35:1 em branco, 4,97:1 no
   fundo»: as superfícies em que foi medido não incluíam a única que estas
   secções têm por trás.
   E o defeito só apareceu quando a bateria correu num runner do GitHub, com o
   céu azul: aqui nesse dia estava cinzento e dava tudo limpo. Oito textos
   entre 4,13 e 4,29:1, com a norma a pedir 4,5. */
.rodape, .procura__estado, .vazio, .mapa__titulo, .favoritos__titulo {
  --tinta-2: var(--tinta-ceu);
  --tinta-3: var(--tinta-ceu-2);
}

.mapa__titulo {
  font-size: .74rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--tinta-3); margin-bottom: .5rem;
}
.mapa__tela {
  background: var(--carta); border: 1px solid var(--borda);
  border-radius: var(--raio-g); overflow: hidden; line-height: 0;
}
.mapa__tela svg { width: 100%; height: auto; display: block; }
/* O mar tem de se ler como mar. Com o --carta-2 no fundo e o --fundo na terra
   — que diferem em três valores de cinzento — o mapa parecia uma mancha só. */
.m-mar  { fill: color-mix(in oklab, var(--mar) 14%, var(--carta)); }
.m-terra {
  fill: var(--carta); stroke: color-mix(in oklab, var(--mar) 28%, var(--carta));
  stroke-width: .8; stroke-linejoin: round;
}
.m-nome {
  font-family: var(--f); font-weight: 700; fill: var(--tinta-mapa);
  text-anchor: middle;
  /* `paint-order: stroke` desenha o contorno ANTES do preenchimento: o nome
     fica legível por cima do traço do concelho sem uma caixa por trás. */
  paint-order: stroke; stroke: var(--carta); stroke-width: 3px; stroke-linejoin: round;
}
.m-halo { fill: var(--mar); opacity: .25; }
.m-ponto { fill: var(--mar); stroke: var(--carta); stroke-width: 2; }