/* ============================================================
   Tema compartilhado — tokens da direção "Grande".
   A home e a página de receita leem daqui, então não existe
   chance de as duas divergirem de cor com o tempo.
   ============================================================ */

:root {
  --bg: #FFFFFF;
  --bg-fundo: #F4F4F2;
  --linha: #DDDDD8;
  --ink: #121211;
  --muted: #4B4B47;
  --faint: #77776F;
  /* Reservada: o que precisa de atenção de verdade. */
  --marca: #A3341F;
  --marca-fraca: #FBEFEC;
  --sobre-marca: #FFFFFF;
  /* Azul: a cor do tempo. Só isso. */
  --tempo: #14538D;
  --tempo-fraco: #EAF1F8;
  /* Texto corrido dos passos. No claro é a própria tinta. */
  --corrido: #121211;
  /* Dourado das estrelas. Cor própria, e não `--marca`: a marca é
     reservada ao que pede atenção, e a nota é informação de leitura.
     Além disso estrela vermelha não lê como estrela. */
  --estrela: #DFA01B;
  --estrela-off: #E2E0DA;
  color-scheme: light;
}

/* Escuro: paleta herdada da direção C (Modo Cozinha) — fundo #121110,
   quase preto mas levemente quente, e o âmbar da chama como acento. */
html[data-tema="dark"] {
  --bg: #121110;
  --bg-fundo: #1C1A18;
  --linha: #302C28;
  --ink: #F5F0E8;
  --muted: #A39C92;
  --faint: #6E675F;
  --marca: #F0A538;
  --marca-fraca: rgba(240,165,56,.14);
  --sobre-marca: #1A1408;
  --tempo: #8CB8DE;
  --tempo-fraco: rgba(140,184,222,.13);
  /* No escuro, negrito e texto normal na MESMA cor quase não se
     distinguem — claro sobre escuro não engrossa como escuro sobre
     claro. O texto corrido recua um tom; o negrito fica na tinta cheia. */
  --corrido: #C9C2B6;
  /* No escuro o dourado claro; a estrela apagada precisa ficar acima
     de `--linha`, senão some no fundo e o convite a clicar desaparece. */
  --estrela: #F5B93F;
  --estrela-off: #453E35;
  color-scheme: dark;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Public Sans', -apple-system, system-ui, sans-serif;
  background: var(--bg); color: var(--ink);
  -webkit-font-smoothing: antialiased;
  font-size: 19px; line-height: 1.62;
  transition: background .15s, color .15s;
}

/* ---- chrome compartilhado: marca, idioma, tema ---- */
.topo { display: flex; align-items: center; gap: 20px; }
.marca-txt { display: inline-flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 700; letter-spacing: -.015em; color: inherit; text-decoration: none; }
/* `:not(.marca-logo)` porque o logo também é um span, e pegá-lo aqui o
   pintaria da cor apagada do sobrenome. */
.marca-txt span:not(.marca-logo) { color: var(--faint); font-weight: 400; }
/* SVG inline, e não <img> nem mask-image. Motivo de cada descarte:
   · <img> ficaria preto fixo e sumiria no modo escuro;
   · mask-image de arquivo local é bloqueada em file:// pela política de
     origem do Chrome — o logo virava um quadrado preto sólido ao abrir
     a página por duplo clique, que é justamente como se testa aqui.
   Inline resolve os dois: `fill: currentColor` segue a cor do texto. */
.marca-logo { width: 26px; height: 26px; flex: none; fill: currentColor; }
.topo-dir { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.langs { display: flex; gap: 4px; }
.lang {
  padding: 7px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--faint);
  font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
}
.lang:hover { color: var(--ink); background: var(--bg-fundo); }
.lang[aria-pressed="true"] { background: var(--marca-fraca); color: var(--marca); }
.btn-tema {
  width: 38px; height: 38px; border: 1px solid var(--linha); border-radius: 9px;
  background: transparent; color: var(--faint); cursor: pointer; font-size: 15px;
}
.btn-tema:hover { color: var(--ink); }

/* ---- coração de favorita, em qualquer lugar ---- */
.coracao { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; transition: fill .15s; }
.coracao.cheio { fill: currentColor; }

/* ---- crédito das fotos ----
   Obrigação das licenças CC BY / CC BY-SA, nas duas páginas: onde a
   foto aparece, o crédito acompanha. O mais discreto que a página tem —
   cumpre a licença sem competir com nada. */
.rodape-credito { margin-top: 60px; padding-top: 18px; border-top: 1px solid var(--linha); text-align: center; }
.rodape-credito a { font-size: 12.5px; color: var(--faint); text-decoration: none; }
.rodape-credito a:hover { color: var(--muted); text-decoration: underline; }

/* ---- celular: a prioridade ----
   Regra da Apple: nada abaixo de 44px de alvo de toque. No desktop
   o ponteiro tem precisão de pixel e 32px basta; no dedo, não. */
@media (max-width: 900px) {
  /* `display` e `align-items` já vêm da regra base — aqui só o alvo. */
  .marca-txt { min-height: 44px; }
  .lang { min-height: 44px; padding: 10px 13px; }
  .btn-tema { width: 44px; height: 44px; font-size: 16px; }
  .topo-dir { gap: 6px; }
}

/* iPhone deitado e telas baixas: barra fixa não pode comer a tela */
@media (max-height: 460px) {
  .topo { padding-top: 10px !important; padding-bottom: 10px !important; }
}

/* iOS dá zoom automático em campo com fonte < 16px ao focar.
   Manter tudo em 16px+ evita o salto de escala ao tocar na busca. */
input, textarea, select { font-size: max(16px, 1em); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
:focus-visible { outline: 3px solid var(--marca); outline-offset: 3px; }

/* ============================================================
   ESTRELAS — aparência compartilhada pelas duas páginas.
   O JS que as desenha é dados/avaliacao.js.
   ============================================================ */

/* A média quase nunca é inteira. Duas camadas de cinco estrelas, a
   dourada por cima recortada na largura exata da nota: 4,3 de 5 = 86%.
   Arredondar para meia estrela mostraria um desenho que não bate com
   o número escrito ao lado. */
.estrelas { position: relative; display: inline-block; line-height: 1; flex: none; }
.estrelas-fundo { display: flex; gap: 2px; color: var(--estrela-off); }
.estrelas-cheia {
  position: absolute; inset: 0; display: flex; gap: 2px;
  overflow: hidden; white-space: nowrap; color: var(--estrela);
}
.estrelas svg { width: 16px; height: 16px; flex: none; fill: currentColor; display: block; }
.estrela-una { display: inline-flex; color: var(--estrela); flex: none; }
.estrela-una svg { width: 14px; height: 14px; fill: currentColor; display: block; }

/* A média como se lê: estrelas, número, e SEMPRE quantas pessoas
   votaram. Um livro de família vive com dois ou seis votos — "4,3"
   sozinho finge ser estatística. */
.media { display: inline-flex; align-items: center; gap: 7px; }
.media-n { font-size: 15px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.media-c { font-size: 14.5px; color: var(--faint); }
/* Sem voto não existe "zero estrelas" — existe convite. */
.media-vazia { font-size: 14.5px; color: var(--faint); font-style: italic; }