/* ============================================================
   App — acabamento (27/09/2026)

   A última camada, e só ela: nada aqui muda o que a tela diz, muda
   como a tela é feita. Entra depois de todas as outras justamente
   para ser fácil de ler e de tirar.

   A pesquisa que a justifica, em cinco linhas:

   1. **Profundidade por luminância.** Cada camada que se aproxima do
      olho fica 5–8 % mais clara. O app já tinha as três superfícies;
      faltava o fio de luz que diz onde uma acaba e a outra começa.
   2. **O fio (hairline) e o bisel.** Uma borda de meio pixel a 6–7 %
      e um `inset 0 1px 0` no topo leem-se como luz a bater na aresta.
      É o detalhe que mais separa uma interface cara de uma barata, e
      custa duas linhas.
   3. **Luz ambiente.** Um brilho de 12 % da cor de destaque no alto da
      tela faz o ecrã parecer iluminado em vez de pintado.
   4. **Grão.** Três por cento de ruído mata o bandeamento dos degradês
      e dá matéria ao vidro: um vidro com grão lê-se como vidro; um
      vidro limpo lê-se como um filtro de desfoque.
   5. **A ponta do anel.** Apple Fitness: `stroke-linecap: round`,
      degradê ao longo do arco e um ponto na ponta. É a assinatura.

   O que a Apple diz para NÃO fazer, e que aqui se respeita: o brilho
   especular não passa de 6 px, não se empilham dois vidros, e tudo
   isto desaparece com contraste alto, transparência reduzida ou
   movimento reduzido.
   ============================================================ */

:root {
  /* O fio de luz na borda de cada superfície. */
  --aro: light-dark(rgb(0 0 0 / .07), rgb(255 255 255 / .075));
  /* A aresta de cima, onde a luz bate; a de baixo é luz de ressalto. */
  --bisel: inset 0 1px 0 light-dark(rgb(255 255 255 / .9), rgb(255 255 255 / .055));
  /* Duas sombras: uma curta que cola ao objeto, uma longa que o solta. */
  --sombra-cartao:
    0 1px 2px light-dark(rgb(0 0 0 / .045), rgb(0 0 0 / .3)),
    0 8px 24px -8px light-dark(rgb(0 0 0 / .08), rgb(0 0 0 / .45));
  --luz-ambiente: 7%;
}

/* ── 1. as superfícies ganham aresta ──────────────────────── */

.cartao,
.grupo__corpo,
.mini,
.custom-card,
.semana-cartao {
  box-shadow:
    inset 0 0 0 .5px var(--aro),
    var(--bisel),
    var(--sombra-cartao);
}

/* Um cartão dentro de um cartão não repete a sombra longa: ficaria um
   buraco desenhado. Fica só o fio. */
.cartao .mini,
.grupo__corpo .mini {
  box-shadow: inset 0 0 0 .5px var(--aro);
}

/* O vidro já tinha o fio; ganha o bisel, que é o que o faz parecer
   uma peça e não uma mancha. */
.vidro {
  box-shadow:
    inset 0 0 0 .5px var(--vidro-borda),
    inset 0 1px 0 light-dark(rgb(255 255 255 / .8), rgb(255 255 255 / .08)),
    var(--sombra-flutuante);
}

/* ── 2. a luz que vem de cima ─────────────────────────────── */

/* Um brilho da cor de destaque no alto do ecrã. Fixo: a luz não rola
   com o conteúdo, porque a luz não está no papel — está na sala. */
.app::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: 46vh;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    130% 100% at 50% -20%,
    color-mix(in srgb, var(--destaque) var(--luz-ambiente), transparent),
    transparent 68%);
}
/* Só o conteúdo precisa de subir por cima do brilho: o topo, as abas e
   os redondos já são `fixed` com z-index próprio, e escrever
   `position: relative` neles apagava o `fixed` — a barra de abas caía
   para o fim do documento. */
.main { position: relative; z-index: 1; }

/* ── 3. o grão, que saiu ──────────────────────────────────── */

/* Havia aqui três por cento de ruído em `overlay` sobre a tela toda.
   Em teoria mata o bandeamento; num OLED, sobre preto puro, levanta o
   preto em manchas e lê-se como sujidade no ecrã — foi a primeira coisa
   que o dono notou. Um efeito que só funciona quando não se vê não
   vale o risco de se ver. */

/* ── 4. os anéis e as barras ──────────────────────────────── */

/* A ponta acesa: um halo da própria cor, curto. Seis pixels é o teto
   que a Apple põe ao brilho especular, e aqui vale a mesma régua. */
/* O halo do arco, discreto.
 *
 * Teve cinco pixels a 45 % e ficou mancha: o anel parecia desfocado, não
 * aceso. Dois pixels a 20 % é outra coisa — só se vê se se procurar, e
 * é essa a ideia. O ponto da ponta pode brilhar mais, porque é pequeno.
 */
.energia__arco { filter: drop-shadow(0 0 2px color-mix(in srgb, var(--destaque) 20%, transparent)); }
.energia__anel.is-acima .energia__arco { filter: drop-shadow(0 0 2px color-mix(in srgb, var(--atencao) 20%, transparent)); }
.mov-anel__arco,
.faixa-mov__arco,
.pg-anel__arco { filter: drop-shadow(0 0 2px color-mix(in srgb, var(--sucesso) 20%, transparent)); }
/* O arco do dia, em degradê: a mesma cor duas vezes, uma delas puxada
   para o branco. Não é para se notar — é para o arco parecer redondo. */
.energia__anel {
  --arco-de: color-mix(in srgb, var(--destaque) 82%, white);
  --arco-ate: var(--destaque);
}
.energia__anel.is-acima {
  --arco-de: color-mix(in srgb, var(--atencao) 82%, white);
  --arco-ate: var(--atencao);
}
.energia__arco { stroke: url(#arcoDoDia); }
/* O grupo que roda com o arco (ui/animar.js). A origem é o centro do
   viewBox, e não a caixa do ponto. */
.energia__giro { transform-box: view-box; transform-origin: 62px 62px; }
/* E o ponto aceso na ponta, que diz onde o dia parou. */
.energia__ponta {
  fill: color-mix(in srgb, var(--destaque) 22%, white);
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--destaque) 70%, transparent));
  /* Acende no sítio quando o arco chega (ui/animar.js, `encher`). */
  transform-box: fill-box;
  transform-origin: center;
}
.energia__anel.is-acima .energia__ponta {
  fill: color-mix(in srgb, var(--atencao) 22%, white);
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--atencao) 70%, transparent));
}
@media (prefers-reduced-motion: reduce) { .energia__ponta { filter: none; } }

/* A barra deixa de ser um retângulo pintado: ganha a mesma aresta de
   luz no topo que as superfícies têm. */
.barra > span,
.tr-prot__b i,
.mv-barra i,
.tr-vol__v,
.agua-meta__barra span {
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .22);
}

/* Os copos de água enchem-se com uma linha de luz por cima, como um
   líquido que pega o brilho do teto. */
.mini__copos i.on {
  background: linear-gradient(to bottom, color-mix(in srgb, var(--agua) 78%, white), var(--agua));
}

/* ── 5. os botões ─────────────────────────────────────────── */

/* O botão cheio ganha o bisel e um degradê de meio por cento: o
   suficiente para a luz parecer vir de cima, e não o suficiente para
   alguém dizer "tem um degradê". */
.botao--proeminente,
.btn--primary {
  background-image: linear-gradient(to bottom, rgb(255 255 255 / .12), rgb(255 255 255 / 0));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .22),
    0 1px 2px light-dark(rgb(0 0 0 / .12), rgb(0 0 0 / .4));
}
/* Tocar apaga a luz de cima: o objeto afunda debaixo do dedo. */
.botao--proeminente:active,
.btn--primary:active,
.botao-redondo:active,
.vidro:active { filter: brightness(.94); }

.botao-redondo {
  box-shadow: inset 0 0 0 .5px var(--aro), var(--bisel), var(--sombra-cartao);
}

/* ── 6. as peças pequenas ─────────────────────────────────── */

/* O botão do segmentado é um knob físico no iOS: tem sombra e aresta,
   e é isso que o faz parecer que desliza por cima e não por baixo. */
.seg3__marca,
.abas__pilula {
  box-shadow:
    inset 0 .5px 0 light-dark(rgb(255 255 255 / .9), rgb(255 255 255 / .09)),
    0 1px 3px light-dark(rgb(0 0 0 / .1), rgb(0 0 0 / .35));
}

/* O prato desenhado é a coisa mais nossa que o app tem. Ganha o fio de
   luz na borda e um brilho no canto de cima, como louça. */
.ref__foto,
.grade__foto img,
.post__foto img {
  box-shadow:
    inset 0 0 0 .5px var(--aro),
    inset 0 1px 0 light-dark(rgb(255 255 255 / .5), rgb(255 255 255 / .07));
}
.ref__foto--prato { position: relative; overflow: hidden; }
.ref__foto--prato::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, rgb(255 255 255 / .16), transparent 46%);
  pointer-events: none;
}

/* O selo de refeição feita: uma moeda, e não um adesivo. No cartão da
   refeição a moeda é o desenho do ícone, e não o botão quadrado à volta
   dele: a sombra no botão desenhava um quadrado com aresta em volta do
   ✓. A sombra vai no traço do próprio círculo. */
.ref__marca { border-radius: 50%; }
.ref__marca svg { filter: drop-shadow(0 1px 2px light-dark(rgb(0 0 0 / .2), rgb(0 0 0 / .5))); }
.ses-serie.is-feita .ses-serie__ok {
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .3),
    0 1px 3px light-dark(rgb(0 0 0 / .18), rgb(0 0 0 / .45));
}

/* O estado vazio ganha um anel tracejado à volta do ícone: diz "aqui
   cabe alguma coisa" sem escrever mais uma linha de texto. */
.vazio__icone {
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 1.5px dashed var(--separador);
  color: var(--texto-2);
}
.vazio__icone svg { width: 28px; height: 28px; }

/* A aba que acende dá um pulo curto, como no iOS. Só quando muda: o
   atributo só é reescrito ao trocar de tela, e reescrever o mesmo valor
   não reinicia a animação. */
@media (prefers-reduced-motion: no-preference) {
  .abas__item[aria-current="page"] .abas__icone--cheio { animation: aba-pula var(--medio) var(--mola); }
  @keyframes aba-pula { from { transform: scale(.78); } }
}

/* ── 7. a tipografia ──────────────────────────────────────── */

/* Um título de duas linhas parte-se pelo meio, e não com uma palavra
   sozinha em baixo. */
.titulo-grande,
.cartao h2, .cartao h3,
.agora__titulo,
.mov__titulo,
.vazio__titulo { text-wrap: balance; }

.agora__frase,
.vazio__texto,
.mov-meta__explica,
.mv-rodape,
.grupo__rodape { text-wrap: pretty; }

/* ── 8. o que some quando a pessoa pede ───────────────────── */

@media (prefers-reduced-transparency: reduce) {
  .app::before { display: none; }
}
@media (prefers-contrast: more) {
  .app::before { display: none; }
  .energia__ponta, .energia__arco, .mov-anel__arco, .faixa-mov__arco, .pg-anel__arco { filter: none; }
}
:root[data-contraste="mais"] .app::before { display: none; }

/* O brilho da ponta acompanha o dedo; quem pediu menos movimento não
   perde nada com ele parado, mas o custo de pintura some. */
@media (prefers-reduced-motion: reduce) {
  .energia__ponta, .energia__arco, .mov-anel__arco, .faixa-mov__arco, .pg-anel__arco { filter: none; }
}

/* Sem `color-mix` nem `light-dark` (WebView velho), nada disto se
   aplica — e o app continua exatamente como era. */
@supports not (color: color-mix(in srgb, red 10%, transparent)) {
  .app::before { display: none; }
  .energia__ponta, .energia__arco, .mov-anel__arco, .faixa-mov__arco, .pg-anel__arco { filter: none; }
}