/* ============================================================
   App — base
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  background: var(--bg);
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.45;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0;
  line-height: 1.15;
}

button, input, textarea, select {
  font: inherit;
  color: inherit;
}

button { cursor: pointer; }

/* O zoom de pinça ficou permitido (ver o viewport no index.html). O que
   se tira é só o zoom por duplo toque em cima de um botão, que era o
   acidente que o `maximum-scale` evitava à custa de quem precisa de
   ampliar. */
button, [role="button"], a { touch-action: manipulation; }

::selection { background: var(--accent); color: var(--accent-ink); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-1);
}

/* números sempre alinhados — é um caderno, não um cartaz */
.num {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.02em;
}

/* Rótulo de seção: em frase e em negrito, como os cabeçalhos dos
   grupos do iPhone. Em caixa alta espaçada era um formulário impresso. */
.eyebrow {
  font: var(--t-rodape);
  font-weight: 600;
  color: var(--texto-2);
}

.mute { color: var(--ink-2); }
.dim  { color: var(--ink-3); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

[hidden] { display: none !important; }

/* A casca (topo, abas, assistente, folha, avisos) está em casca.css. */

/* ── Movimento ─────────────────────────────────────────────────
   Três gestos, e mais nenhum. Ver src/ui/animar.js — o JavaScript
   marca o começo, o CSS faz o percurso.
   ────────────────────────────────────────────────────────────── */

/* A vista entra: seis pixels e um fade. Trocar de aba era um corte
   seco, e num app de uma tela só a pessoa não via que mudou. */
.view:not([hidden]) {
  animation: vista-entra 260ms var(--ease);
}
@keyframes vista-entra {
  from { opacity: 0; transform: translateY(6px); }
}

/* As linhas entram em cascata curta — a folha a virar. O atraso vem
   do JavaScript, que é quem sabe a posição de cada uma. */
[data-entra] {
  opacity: 0;
  transform: translateY(7px);
  transition:
    opacity 300ms var(--ease) var(--atraso, 0ms),
    transform 300ms var(--ease) var(--atraso, 0ms);
}
[data-entra].is-dentro {
  opacity: 1;
  transform: none;
}

/* Um número a contar continua a ser o número, e não um destaque
   dentro dele: o <b> existe só para o JavaScript ter onde escrever. */
.day__kcal b,
.macro__val b,
.water__n b,
.nutri__m b {
  font-weight: inherit;
  font-style: inherit;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}