/* =======================================================================
   AURUM — design system da nova versão (substitui a "Palette B").
   -----------------------------------------------------------------------
   Conceito aprovado pelo dono (2026-08-07): preto profundo + UM ouro usado
   como luz (não como tinta) + tipografia fina + halos sutis. Regras:
     · um só brilho por tela, guiando o olho;
     · caixas viram linhas finas + espaço;
     · botões e alvos de toque ≥44px (acessibilidade Apple);
     · animações curtas e desligáveis (prefers-reduced-motion).
   Este arquivo carrega DEPOIS do style.css e vai vencendo tela a tela
   conforme as fatias do PLANO-IMPLEMENTACAO.md são aplicadas.
   ===================================================================== */

/* ── [DESIGN-CONTRATO aprovado 2026-08-11] FONTES AUTO-HOSPEDADAS ──
   Sora = todo texto (pesos 100–600 numa fonte variável) · Space Mono =
   SÓ kickers/rótulos-carimbo (decisão "2a duas vozes" do dono). Nada de
   Google Fonts em produção: o app é PWA offline. ── */
@font-face{
  font-family:'Sora'; font-style:normal; font-weight:100 600; font-display:swap;
  src:url('../fonts/sora-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Sora'; font-style:normal; font-weight:100 600; font-display:swap;
  src:url('../fonts/sora-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Space Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/spacemono-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Space Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/spacemono-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  /* paleta Aurum */
  --au-bg:#050504;
  --au-surface:#0d0c0a;
  --au-surface-2:#12100e;
  --au-line:rgba(255,255,255,.07);
  --au-line-soft:rgba(255,255,255,.04);
  --au-gold:#c9a24a;
  --au-gold-hi:#e8c979;
  --au-gold-dim:#8a7a55;
  /* ouro-escuro do KICKER decorativo — valor aprovado na régua de cor do
     pacote APPLE VERSION (CLAUDE.md: "kicker decorativo = ouro-escuro
     #8a7135"). Era escrito à mão em 33 lugares; agora é token. */
  --au-gold-kicker:#a38746;
  /* superfície levemente tingida de ouro (fundo de avatar/selo do autor) —
     era #26211a hardcoded em 15 lugares. */
  --au-gold-tint:#26211a;
  /* BORDA DO SELO TRACEJADO — o monograma quadrado do MÉTODO/IA.

     A regra da assinatura é INVIOLÁVEL (avatar redondo sólido = Matheus
     humano · monograma quadrado tracejado = método, que nunca assina como
     ele), e mesmo assim o tracejado estava escrito à mão em NOVE lugares
     com CINCO opacidades diferentes (.45 · .5 · .55 · .6): a mesma marca
     parecia mais forte ou mais fraca dependendo da tela em que você a
     encontrasse. A 12ª rodada registrou a divergência; aqui ela morre.

     O valor canônico é o do `fsAuthorSignatureHTML` (.5), que a 12ª rodada
     nomeou fonte de verdade da regra — e é o MESMO .5 da borda do selo
     sólido, então os dois lados da regra passam a pesar igual.

     O TAMANHO de cada selo continua sendo de quem desenha a tela (16px na
     assinatura, 22px na mobilidade, 40px no cartão de escolha do modo):
     isso é layout, e é legítimo variar. Aqui mora só a COR/efeito, que é o
     que o AURUM manda centralizar. */
  --au-seal-dashed:1px dashed rgba(201,162,74,.5);
  --au-text:#f5f3ee;
  --au-text-soft:#d9d6cf;
  /* [legibilidade 2026-08-11 · medido] os secundários subiram de degrau:
     o antigo --au-faint tinha 2,7:1 de contraste sobre o fundo (reprova
     em qualquer critério; era a real causa do "não dá pra ler", mais que
     o tamanho). Agora: muted 7,2:1 · faint 5,1:1 · kicker 5,9:1. */
  --au-muted:#9d998f;
  --au-faint:#847f77;
  --au-green:#5fa87a;
  --au-orange:#d99a6c;
  --au-red:#e0895a;

  /* ── CARGA DA SESSÃO (periodização não-linear, 31/08) ────────────────
     PESADO · MODERADO · LEVE, e eles são LUMINÂNCIA da mesma luz quente,
     nunca matiz novo — a mesma régua que já governa as zonas Z1–Z4 de
     endurance. Um matiz por zona (vermelho/amarelo/verde) daria à grade
     três cores que não querem dizer nada no resto do app, e roubaria do
     ouro o papel de apontar o "agora".

     NÃO HÁ COR PRA "SEM SESSÃO": dia vazio é vazio. Pintá-lo de um cinza
     próprio faria descanso parecer estímulo fraco, e na ondulatória o
     descanso é parte do desenho. */
  --au-load-heavy:rgba(245,243,238,.30);
  --au-load-mod:rgba(245,243,238,.15);
  --au-load-light:rgba(245,243,238,.06);

  /* o ÚNICO fill sólido do app (CTA pílula clara) — vive aqui pra as telas
     pararem de reimplementar o gradiente à mão. */
  --au-cta-a:#f5f3ee;
  --au-cta-b:#dedbd2;
  --au-on-light:#0a0a09;

  /* efeitos padrão (únicos permitidos — consistência em todas as telas) */
  --au-glow-gold:0 0 18px -6px rgba(201,162,74,.6);
  --au-glow-gold-soft:0 0 26px -12px rgba(201,162,74,.5);
  --au-glow-green:0 0 8px rgba(95,168,122,.7);
  --au-glow-copper:0 0 8px rgba(217,154,108,.7);
  --au-btn-shadow:0 10px 30px -12px rgba(245,243,238,.32);
  /* [dono 2026-10-07] O BRILHO DO GESTO — só enquanto o dedo age (faixa
     "+ Round" pronta, "Remove" aberto, caixa armada e régua, menu do R).
     Branco nos gestos de fazer; cobre no de tirar (cobre = atenção).
     Mockup aprovado: mockups/executor-gestos-glow.html. */
  --au-glow-gesto:0 0 22px -4px rgba(245,243,238,.42), 0 0 0 1px rgba(245,243,238,.30);
  --au-glow-gesto-cobre:0 0 22px -4px rgba(217,154,108,.55), 0 0 0 1px rgba(217,154,108,.45);
  /* tempos: press é curto (régua), UI padrão 180ms, folha 320ms. */
  --au-dur-press:120ms;
  --au-dur:180ms;
  --au-dur-sheet:320ms;
  --au-ease:cubic-bezier(.22,1,.36,1);
  --au-ease-sheet:cubic-bezier(.32,.72,0,1);

  /* ── ESCALA DO CONTRATO v2 (DESIGN-CONTRATO.md · legibilidade aprovada
     pelo dono 2026-08-11: +2 degraus, piso de 10px nos carimbos).
     Em REM: 1rem = base do app = o "Tamanho do Texto" do iPhone quando o
     sistema oferece (Dynamic Type, abaixo). Os px ao lado são o valor na
     base padrão de 16px — é contra eles que o fiscal mede. ── */
  --au-fs-mono-xs:.625rem;  /* 10 */  --au-fs-mono-s:.625rem;  /* 10 */
  --au-fs-mono:.6875rem;    /* 11 */  --au-fs-mono-m:.6875rem; /* 11 */
  --au-fs-mono-l:.75rem;    /* 12 */  --au-fs-mono-xl:.75rem;  /* 12 */
  --au-fs-xs:.8125rem;  /* 13 */ --au-fs-s:.875rem;   /* 14 */
  --au-fs-sm:.875rem;   /* 14 */ --au-fs:.9375rem;    /* 15 */
  --au-fs-m:.9375rem;   /* 15 */ --au-fs-l:1rem;      /* 16 */
  --au-fs-xl:1.0625rem; /* 17 — corpo padrão iOS */
  --au-fs-t-s:1.25rem;  /* 20 */ --au-fs-t:1.5rem;    /* 24 */
  --au-fs-t-m:1.625rem; /* 26 */ --au-fs-t-l:1.875rem;/* 30 */
  --au-fs-t-xl:2.125rem;/* 34 */ --au-fs-t-xxl:2.5rem;/* 40 */
  --au-fs-hero-s:3rem;  /* 48 */ --au-fs-hero:3.25rem;/* 52 */
  --au-fs-hero-l:3.5rem;/* 56 */ --au-fs-hero-xl:7rem;/* 112 */
  /* alturas fechadas de alvo/botão (não escalam: são alvo de dedo) */
  --au-h-cta:54px; --au-h-ghost:48px; --au-h-tap:44px;
  /* altura da tab bar do atleta (#bottomNav), sem a safe-area. Toda tela que
     precisa reservar espaço embaixo soma este token + o respiro DELA — assim
     mexer na barra não deixa nenhuma tela pra trás. [dono 2026-08-12: 68→104]
     [dono 2026-08-14: 104→84, opção A do mockup tres-ajustes] Em 104 ela
     comia 12% de uma tela de 844px. 84 continua ACIMA do padrão iOS (~49pt,
     ~83px com safe-area), então o ganho de alcance que ele pediu em 12/08
     fica de pé — e as telas recuperam 20px, que é justamente o que faltava
     no manequim de músculo pra caber sem rolagem.
     [dono 2026-09-03: 84→60, opção A de mockups/home-espera-chat-e-barra.html]
     "Existe muito espaço em branco entre o menu inferior e a parte inferior
     da tela." Medido no iPhone: 84 de barra + 34 de área segura, rótulo
     centrado — o texto acabava a 76px do fim da tela, e a barra é só texto,
     sem ícone. Em 60 o rótulo fica a 64px do fim e toda tela ganha 24px.
     O alvo continua inteiro (os 60px são tocáveis, acima dos 44 do
     contrato); o alcance que ele pediu em 12/08 mora no ALVO, não na
     altura visual. */
  --au-h-nav:60px;
  /* enquadramento */
  --au-frame-max:460px; --au-pad-x:26px;
}

/* ── BASE DO APP + DYNAMIC TYPE (aprovado 2026-08-11) ──
   Tudo o que o app desenha usa rem, então a base manda em tudo. No iPhone
   a base passa a ser o "Tamanho do Texto" do sistema (-apple-system-body):
   quem precisa de letra maior resolve sozinho nos Ajustes, sem depender
   de release nova. Fora do iOS, base fixa de 16px. As alturas de alvo
   (44/48/54) NÃO escalam — alvo de dedo é físico, não tipográfico. */
html{ font-size:16px; }
@supports (font: -apple-system-body){
  @media (pointer:coarse){
    html{ font:-apple-system-body; }
  }
}
body{ font-family:'Sora',system-ui,sans-serif; font-size:var(--au-fs-xl); }
/* [fiscal 2026-08-11] controles de formulário NÃO herdam família por
   padrão do navegador — todo botão sem font-family explícito caía em
   Arial. Era a maior fonte de "voz" fora do padrão no app inteiro. */
button, input, select, textarea{ font-family:inherit }
/* ── [dono 2026-08-11] ZOOM fora do caminho ──
   1) o iOS dá zoom automático ao focar campo com fonte < 16px — o piso de
      1.0625rem (17px) nos campos mata o salto de tela ao digitar;
   2) `touch-action: manipulation` desliga o zoom de DUPLO-TOQUE e, de
      quebra, remove o atraso de ~300ms que o iOS punha em todo toque.
   A pinça de dois dedos CONTINUA funcionando (acessibilidade) — e quem
   precisa de letra maior tem o Dynamic Type, que o app respeita. */
input, select, textarea{ font-size:max(1.0625rem, 1em) }
html{ touch-action:manipulation; -webkit-text-size-adjust:100%; }

/* A base do app muda pro preto Aurum (o style.css antigo usa #060606). */
:root{ --bg:var(--au-bg); --surface:var(--au-surface); }
body{ background:var(--au-bg); }

/* [BOOT · gate de abertura 2026-08-14] A SAÍDA da cobertura que segura a
   tela até o Firebase dizer se existe sessão salva (#bootSplash no
   index.html; a lógica em js/core/boot-splash.js). Só opacity, como manda a
   régua de movimento — e por ser fade puro ele continua valendo inteiro com
   reduced-motion, que corta deslocamento e mantém o esmaecer. A cobertura em
   si nasce estilizada INLINE porque precisa valer antes deste arquivo
   chegar; aqui mora só o que acontece bem depois do carregamento. */
#bootSplash{ transition:opacity 220ms cubic-bezier(.22,1,.36,1) }
#bootSplash.is-gone{ opacity:0; pointer-events:none }

/* ---- tipografia utilitária ---- */
.au-k{ font:400 .625rem 'Space Mono',monospace; letter-spacing:.28em; color:var(--au-gold-dim); text-transform:uppercase }
.au-k2{ font:400 .625rem 'Space Mono',monospace; letter-spacing:.2em; color:var(--au-faint); text-transform:uppercase }
.au-title{ font:200 var(--au-fs-t-m)/1.15 'Sora',sans-serif; color:var(--au-text); letter-spacing:-.01em }
.au-huge{ font:100 var(--au-fs-hero-l)/1 'Sora',sans-serif; color:var(--au-text); letter-spacing:-.03em }
.au-huge small{ font-size:.34em; color:var(--au-muted); font-weight:200 }
.au-sub{ font:400 .875rem/1.6 'Sora',sans-serif; color:var(--au-muted) }
.au-mono{ font:400 .6875rem 'Space Mono',monospace; letter-spacing:.1em; color:var(--au-muted); text-transform:uppercase }

/* ---- o fio de ouro (assinatura de topo de cada tela) ---- */
.au-hairline{ height:1px; background:linear-gradient(90deg,rgba(201,162,74,.5),rgba(201,162,74,.05)); margin:11px 0; border:none }
.au-hairline-center{ height:1px; background:linear-gradient(90deg,transparent,rgba(201,162,74,.55),transparent); border:none }

/* ---- ✓ de conclusão com glow + citação do coach (mockup tela 4; a
   citação serve também pra nota/voz do coach em outras telas) ---- */
.au-check{ width:44px; height:44px; border-radius:50%; border:1px solid rgba(201,162,74,.5); display:grid; place-items:center; margin:0 auto; box-shadow:var(--au-glow-gold-soft); color:var(--au-gold); font-size:16px }
.au-quote{ border:1px solid rgba(201,162,74,.3); background:rgba(201,162,74,.05); border-radius:11px; padding:12px 14px; font:italic 400 .9375rem/1.55 'Sora',sans-serif; color:var(--au-text-soft) }
.au-quote .au-quote-sig{ font:400 .625rem 'Space Mono',monospace; letter-spacing:.16em; color:var(--au-gold-dim); text-transform:uppercase; font-style:normal; white-space:nowrap }

/* ---- TOQUE LONGO NÃO ABRE A LUPA (dono 2026-10-03) ----
   No iPhone, segurar ~1 s num botão abria a lupa de seleção do iOS e
   selecionava o rótulo dele ("Start workout", a faixa do coach, o título do
   cartão do treino) — medido no Safari do Simulador. Quem é pra TOCAR não
   seleciona e não oferece o menu de "salvar imagem"; quem é pra LER
   (recados, chat, termos, números de dado) continua selecionável, porque
   nada disso é botão. `!important` porque 4 linhas do dossiê do Corpo
   nascem com `all:unset` inline, que zera qualquer regra sem ele.
   Campo de digitar SEMPRE devolve a seleção — o executor abre o campo de
   carga DENTRO de uma linha tocável, e sem a 2ª regra o iOS pode recusar
   o foco. Guarda: régua LUPA do fiscal. */
button, [role="button"], [role="switch"], [role="tab"], label, summary,
[data-fs-jump], .home-card, .ed-rowdrag, .au-press{
  -webkit-user-select:none !important; user-select:none !important;
  -webkit-touch-callout:none !important;
}
input, textarea, select, [contenteditable="true"]{
  -webkit-user-select:text !important; user-select:text !important;
  -webkit-touch-callout:default !important;
}

/* ---- RESPOSTA AO TOQUE (régua Apple: o feedback nasce no PRESS, não no
   soltar). O app desenha quase tudo com style="" inline — e estilo inline
   NÃO tem :active, então 24 elementos declaravam a transição certa e nunca
   encolhiam. Esta regra única devolve o press a todo pressável do app. Só
   transform (GPU), 120ms, curva do projeto. ---- */
button, [role="button"], .au-press{
  transition:transform var(--au-dur-press) var(--au-ease);
}
button:active:not(:disabled), [role="button"]:active, .au-press:active{
  transform:scale(.97);
}
/* botões de largura total encolhem menos (a mesma escala num bloco largo
   parece um salto) */
.au-btn:active:not(:disabled), .au-btn-quiet:active, .au-ghost:active, .home-card:active{
  transform:scale(.985);
}

/* ---- botões (CLASSES CANÔNICAS do contrato — telas NÃO redeclaram
   fonte/altura de botão inline; muda aqui, muda em todas) ---- */
.au-btn{
  display:flex; align-items:center; justify-content:center; width:100%;
  min-height:var(--au-h-cta); border:none; border-radius:100px; cursor:pointer;
  background:linear-gradient(180deg,var(--au-cta-a),var(--au-cta-b)); color:var(--au-on-light);
  font:500 var(--au-fs-xl) 'Sora',sans-serif; box-shadow:var(--au-btn-shadow);
  transition:transform var(--au-dur-press) var(--au-ease);
}
.au-btn:disabled{ opacity:.35; cursor:default }
/* CTA secundário neutro (mesma altura do .au-btn, sem o fill sólido): ação
   repetível/opcional — ex.: "Repetir a rotina" quando a mobilidade do dia
   já foi feita. Formaliza o estilo que já vivia inline em Peso/Capacidades. */
.au-btn-quiet{
  display:flex; align-items:center; justify-content:center; width:100%;
  min-height:var(--au-h-cta); border-radius:100px; cursor:pointer;
  background:rgba(239,237,232,.06); border:1px solid rgba(239,237,232,.28);
  color:var(--au-text); font:500 var(--au-fs-xl) 'Sora',sans-serif;
  /* [dono 2026-08-12] ZERAR é obrigatório: o glow é a assinatura do ÚNICO
     CTA sólido da tela (a luz que a pílula branca joga no escuro). Como
     metade do app escreve class="au-btn au-btn-quiet", sem esta linha o
     secundário herdava o glow do .au-btn e disputava o olho com o CTA —
     "Pausar" brilhava igual a "Concluir" no executor de mobilidade.
     O .au-btn-gold já fazia isso; faltava aqui. */
  box-shadow:none;
  transition:transform var(--au-dur-press) var(--au-ease);
}
/* CTA da ÚLTIMA ação do treino (variante ouro do contrato) */
.au-btn-gold{
  background:rgba(201,162,74,.10); color:var(--au-gold);
  border:1px solid rgba(201,162,74,.55); box-shadow:none;
}
.au-ghost{
  display:flex; align-items:center; justify-content:center; width:100%;
  min-height:var(--au-h-ghost); border-radius:100px; cursor:pointer; background:none;
  border:1px solid rgba(201,162,74,.35); color:var(--au-gold);
  font:400 var(--au-fs-mono-m) 'Space Mono',monospace; letter-spacing:.2em; text-transform:uppercase;
  transition:transform var(--au-dur-press) var(--au-ease);
}
/* ---- LARGURA DOS BOTÕES CANÔNICOS numa linha lado a lado.
   `.au-btn`, `.au-btn-quiet` e `.au-ghost` nascem `width:100%` — é o certo
   pro CTA, que ocupa a largura da tela. Numa LINHA com dois botões isso
   estoura: cada um tenta 100% do container e os dois transbordam.

   [dono 2026-08-18, do print dele] Foi assim que "Cancelar/Salvar" da nota
   do aluno passou POR CIMA da barra lateral do coach. Medido antes do
   conserto, com o editor da nota aberto: a 1280px cada botão tinha 602px e
   o Cancelar começava em x=24 (a barra vai até 236); a 1440px tinha 762px e
   começava em x=-136, ou seja FORA da tela. E piorava quanto MAIS larga a
   janela — o contrário do que a intuição diz, porque 100% de um container
   maior é um botão maior.

   As duas saídas viram classe porque o contrato proíbe tela declarar
   geometria de botão inline: muda aqui, muda em todas.
   · `.au-btn-auto` — largura pelo CONTEÚDO (par Cancelar/Salvar, ações
     curtas encostadas numa borda);
   · `.au-btn-row`  — os botões DIVIDEM a linha por igual (dois CTAs de
     mesmo peso, ex.: as duas escolhas do fecho da mobilidade).
   Vêm depois dos blocos acima de propósito: mesma especificidade, quem
   está por último vence. ---- */
.au-btn-auto{ flex:0 0 auto; width:auto; padding:0 22px }
.au-btn-row{ flex:1 1 0; width:auto; min-width:0 }

/* kicker/carimbo (Space Mono — decisão 2a) */
.au-kicker{ font:400 var(--au-fs-mono-m) 'Space Mono',monospace; letter-spacing:.22em; text-transform:uppercase; color:var(--au-gold-kicker) }
.au-kicker-soft{ font:400 var(--au-fs-mono-m) 'Space Mono',monospace; letter-spacing:.22em; text-transform:uppercase; color:var(--au-faint) }
/* número-herói (dado grande, algarismos tabulares) */
.au-hero-n{ font:100 var(--au-fs-hero) 'Sora',sans-serif; color:var(--au-text); font-variant-numeric:tabular-nums; letter-spacing:-.02em }
.au-hero-n small{ font-size:.8125rem; color:var(--au-muted); font-weight:400 }
/* chip de AÇÃO (tocável, 44) × chip de LEITURA (32, nunca clicável) */
.au-chip{ display:inline-flex; align-items:center; justify-content:center; min-height:var(--au-h-tap); padding:0 16px; border:1px solid rgba(255,255,255,.14); border-radius:100px; background:none; color:var(--au-text-soft); font:400 var(--au-fs-l) 'Sora',sans-serif; cursor:pointer }
.au-chip.on{ border-color:var(--au-text); color:var(--au-text) }
.au-chip-read{ display:inline-flex; align-items:center; min-height:32px; padding:0 12px; border:1px solid rgba(255,255,255,.14); border-radius:100px; font:400 var(--au-fs-mono-s) 'Space Mono',monospace; letter-spacing:.12em; color:var(--au-muted) }
/* link-carimbo (pular round, refazer avaliação…) — alvo 44 via padding */
/* `min-width` entrou em 14/08 junto com a detecção de idioma, e o motivo
   fica registrado porque ele só aparece num idioma: a classe tinha a metade
   VERTICAL da regra dos 44 (`min-height`) e não a horizontal. Medido na tela
   do Peso: o botão `tHero("FIX","CORRIGIR")` dá 79,5px em português e
   **34,8px em inglês** — abaixo do mínimo. Passou despercebido porque o
   fiscal sempre rodou em português, que era o padrão cravado de todo mundo;
   com a detecção, quem tem o celular em inglês cai nesse estado por padrão.
   As outras 8 usos da classe já são `width:100%`, então nada mais muda. */
.au-link-mono{ background:none; border:none; cursor:pointer; min-height:var(--au-h-tap); min-width:var(--au-h-tap); padding:12px 4px; font:400 var(--au-fs-mono) 'Space Mono',monospace; letter-spacing:.2em; text-transform:uppercase; color:var(--au-faint) }
.au-ghost:active{ border-color:rgba(201,162,74,.7); box-shadow:var(--au-glow-gold) }
/* [dono 29/09] O GHOST DE PERIGO — cobre, a cor de atenção desta casa (a mesma
   do "Cancelar esta sessão" e do "Apagar treino"). Nasce no "Apagar aluno" do
   hub; ação que destrói não acende ouro no toque, que é a cor do "agora". */
.au-ghost--perigo{ border-color:rgba(217,154,108,.45); color:var(--au-orange) }
.au-ghost--perigo:active{ border-color:rgba(217,154,108,.85); box-shadow:none }

/* ENTRADA SOCIAL — Apple e Google lado a lado, SÓ com o símbolo
   (dono 2026-08-19, variante B de mockups/login-porta.html).

   POR QUE SEM TEXTO: eram três pílulas idênticas empilhadas — uma parede que
   obrigava a ler três linhas pra escolher uma. Com o símbolo, os dois ocupam
   UMA linha e a decisão vira reconhecimento, não leitura.

   OS DOIS SÃO SILENCIOSOS de propósito: o único fill sólido da tela é o
   "Criar conta" (régua AURUM — um fill por tela, e ele é o CTA). Zeram o
   glow pelo mesmo motivo do `.au-btn-quiet`: sem isso herdariam a luz que é
   a assinatura da pílula branca.

   SEM TEXTO, O `aria-label` É A ÚNICA COISA QUE O LEITOR DE TELA ANUNCIA —
   é obrigatório, exatamente como no `.au-back` (voltar só com a seta). */
/* A PORTA (gate de abertura + painel de entrada do login).
   As duas telas compartilham a MESMA composição de propósito: identidade no
   centro exato, ações no rodapé. É isso que faz o monograma não se mexer
   quando o login entra — medido: MW em 337 nas duas, salto zero. */
.boot-splash-panel,
.auth-door{
  position:relative; display:flex; flex-direction:column; justify-content:center;
  box-sizing:border-box; width:100%; max-width:460px; margin:0 auto;
  min-height:100dvh; padding:45px 26px;
}
.boot-splash-panel{ min-height:100% }
.auth-door-mark{ text-align:center }
/* [dono 19/08] O FILETE DOURADO RESPIRA MENOS, e agora respira IGUAL dos
   dois lados. Ele tinha `margin:18px auto` inline (nas DUAS telas — gate e
   login, regra 11), e a frase logo abaixo somava outros 20px de topo: o vão
   de baixo era 38px contra 18 de cima, quase o dobro, e ninguém tinha
   medido. Agora são 12px de cada lado, escritos UMA vez.
   A largura sai do inline junto: ela é do desenho da porta, não de quem
   escreve a tela (DESIGN-CONTRATO). A classe `.au-hairline-center` em si
   NÃO muda — ela é usada em outras telas e continua sem margem própria. */
.boot-splash-panel .au-hairline-center,
.auth-door-mark .au-hairline-center{ width:56px; margin:8px auto }

/* [dono 19/08] A PROMESSA EM 17px (--au-fs-xl, o corpo padrao do iOS).
   Ela nasceu em 26 e ele achou grande; 20 foi o meio do caminho e ele
   escolheu 17 olhando os quatro degraus lado a lado.
   O que se ganha, medido depois: em 17 ela cabe numa linha tambem no SE
   (375px), onde 20 ja quebrava em duas. Em 320 ela ainda quebra — e tudo
   bem: quebra natural, sem vazar e sem rolagem. O preco e que ela fica do mesmo tamanho da linha do gate, entao a
   diferenca entre as duas telas passa a ser o PESO (200 aqui, 400 la) e a
   cor (--au-text-soft contra --au-muted), nao o tamanho. */
.auth-door-voz{
  font:200 var(--au-fs-xl)/1.4 'Sora',sans-serif; color:var(--au-text-soft);
  text-align:center; margin:0; letter-spacing:0;
}
.auth-door-acoes{
  position:absolute; left:26px; right:26px;
  bottom:calc(26px + env(safe-area-inset-bottom, 0px));
  display:flex; flex-direction:column; gap:8px;
}
.auth-door-termos{
  text-align:center; font:400 var(--au-fs-xs)/1.7 'Sora',sans-serif;
  color:var(--au-muted); margin:4px 0 0;
}
.auth-door-legal{ display:flex; justify-content:center; gap:18px; margin-top:2px }
.auth-door-legal a{
  color:var(--au-text-soft); text-decoration:underline;
  display:inline-flex; align-items:center; justify-content:center;
  min-height:var(--au-h-tap); padding:0 6px;
  font:400 var(--au-fs-xs) 'Sora',sans-serif;
}
/* TELA CURTA (dono 2026-08-19). Em 375×667 sobravam 17px entre a promessa e
   o primeiro botão — não sobrepunha, mas espremia. Abaixo de 700px de altura
   a identidade sobe e deixa de disputar o rodapé. Medido em 390×844: nada
   muda (a regra nem entra). */
@media (max-height: 700px){
  /* A identidade continua CENTRADA — o que muda é em quê. Aqui ela se
     centra no espaço que sobra ACIMA das ações, e não na tela inteira: um
     respiro embaixo empurra o conjunto pra cima metade do valor.
     A 1ª tentativa foi `flex-start` com 12vh de topo e ficou pior que o
     problema — o monograma subia pra 80px numa tela de 667 e sobravam 143px
     de vazio embaixo dele. Medir os dois lados é o que separou as duas.
     O gate NÃO entra: lá não há ações, e centrar pela tela é o certo. */
  .auth-door{ justify-content:flex-start }
  .auth-door-acoes{ position:static; left:auto; right:auto; bottom:auto;
                    padding-bottom:env(safe-area-inset-bottom, 0px) }
  /* UMA margem automática só. Com `auto` nos dois (aqui e nas ações) o
     espaço livre se dividia em TRÊS e a identidade subia demais: 53px de
     folga em cima contra 106 embaixo. Sozinha, ela absorve o vão inteiro e
     centra de verdade no espaço acima das ações. */
  .auth-door-mark{ margin:auto 0 }
}

.au-social-row{ display:flex; gap:10px }
.au-social-row[hidden]{ display:none }   /* o display:flex acima venceria o `hidden` (login social desligado, 07/10) */
.au-social-btn{
  flex:1 1 0; min-width:0; min-height:var(--au-h-cta);
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:100px; background:none; border:1px solid rgba(255,255,255,.16);
  color:var(--au-text-soft); cursor:pointer; box-shadow:none;
  transition:transform var(--au-dur-press) var(--au-ease);
}
.au-social-btn:active{ transform:scale(.97) }
/* VOLTAR canônico (dono 2026-08-12, variante A do mockup
   "botao-voltar-so-seta"): SÓ A SETA. A palavra ao lado ("← HOJE",
   "← CORPO") era um terceiro carimbo em Space Mono disputando o topo com o
   kicker da tela e a assinatura do autor. Alvo de 44×44 invisível (o
   margin-left negativo alinha a SETA com a coluna do texto, não a caixa).
   `aria-label` é OBRIGATÓRIO em todo uso: sem texto, é a única coisa que o
   leitor de tela tem pra anunciar. */
.au-back{
  display:inline-flex; align-items:center; justify-content:flex-start;
  width:var(--au-h-tap); height:var(--au-h-tap); margin-left:-10px; padding:0;
  border:none; background:none; cursor:pointer;
  font:400 var(--au-fs-t-s) 'Sora',sans-serif; line-height:1; color:var(--au-text-soft);
  transition:transform var(--au-dur-press) var(--au-ease);
}
.au-back:active{ transform:scale(.92) }
/* ── TIRA DE PORTAS COM ÍCONE (HUB do aluno · dono 2026-08-20) ──────────
   Variante do trilho de abas logo abaixo, e não uma tabela nova: mesma
   rolagem horizontal (exceção já sancionada no fiscal), mesmo fio de 2px
   embaixo da ativa, mesma família de cor. O que muda é que cada porta leva
   um ícone com o rótulo EMBAIXO.

   O RÓTULO NÃO É ENFEITE. Ícone sozinho é adivinhação — e pra quem usa
   leitor de tela ele simplesmente não existe. Por isso a palavra está no
   desenho, e não só num `aria-label` (que continua obrigatório).

   56px de altura: acima dos 44 da régua da Apple, com folga pro texto. */
.au-tabs-ico{
  display:flex; gap:0; overflow-x:auto; flex:none;
  border-bottom:1px solid var(--au-line);
  scrollbar-width:none; -ms-overflow-style:none; -webkit-overflow-scrolling:touch;
}
.au-tabs-ico::-webkit-scrollbar{ display:none }
.au-tab-ico{
  position:relative; flex:none; min-width:72px; min-height:56px;
  padding:8px 12px 6px; margin-bottom:-1px;
  background:none; border:none; border-bottom:2px solid transparent; cursor:pointer;
  color:var(--au-faint);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  transition:color var(--au-dur-press) var(--au-ease), transform var(--au-dur-press) var(--au-ease);
}
.au-tab-ico span{
  font:400 var(--au-fs-mono-xs) 'Space Mono',monospace; letter-spacing:.14em;
  text-transform:uppercase; white-space:nowrap;
}
.au-tab-ico.on{ color:var(--au-gold); border-bottom-color:var(--au-gold) }
.au-tab-ico:active{ transform:scale(.97) }
/* ponto ouro: tem recado esperando. Mesmo sinal do selo M do resto do app. */
.au-tab-ico .au-tab-pt{
  position:absolute; top:9px; right:14px; width:7px; height:7px; border-radius:50%;
  background:var(--au-gold); box-shadow:var(--au-glow-gold);
}

/* TRILHO DE ABAS (dono 2026-08-13, opção C do mockup
   "mobilidade-abas-por-articulacao"): rola na horizontal — exceção já
   sancionada no fiscal, mesma família do baralho e do arquivo.
   A aba ATIVA é o "agora" da tela, e por isso é o único lugar onde o ouro
   entra aqui: um fio de 2px embaixo. Sem fill, sem pílula — pílula
   competiria com o CTA, que é o único fill sólido da tela (régua AURUM).
   Cada aba entrega 44px de alvo; o rótulo é Space Mono porque é rótulo de
   controle com estado, não kicker decorativo. */
.au-tabs{
  display:flex; gap:0; overflow-x:auto; flex:none;
  border-bottom:1px solid var(--au-line);
  scrollbar-width:none; -ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;
}
.au-tabs::-webkit-scrollbar{ display:none }
.au-tab{
  flex:none; display:inline-flex; align-items:center; justify-content:center;
  min-height:var(--au-h-tap); padding:0 13px; margin-bottom:-1px;
  background:none; border:none; border-bottom:2px solid transparent; cursor:pointer;
  font:400 var(--au-fs-mono) 'Space Mono',monospace; letter-spacing:.16em;
  text-transform:uppercase; color:var(--au-faint); white-space:nowrap;
  transition:color var(--au-dur-press) var(--au-ease), transform var(--au-dur-press) var(--au-ease);
}
.au-tab:active{ transform:scale(.97) }
.au-tab.on{ color:var(--au-text); border-bottom-color:var(--au-gold) }
.au-iconbtn{ /* voltar/fechar — já padronizado em 44px na rodada de acessibilidade */
  display:flex; align-items:center; justify-content:center;
  min-width:44px; min-height:44px; background:none; border:none;
  color:var(--au-muted); cursor:pointer;
}

/* ---- INTERRUPTOR (dono 2026-09-02) ----
   "algo como o iPhone tem em suas configurações, mostrando uma cor quando on
   e sem cor quando off". É um BOTÃO com role="switch" (não um checkbox
   escondido): assim um clique é um evento só — com <label>+<input> o
   navegador dispara o clique duas vezes e um ouvinte delegado desliga o que
   acabou de ligar. Caixa de 44 pelo contrato; o trilho é 40×24. Cor de "on"
   = ouro por padrão; `.au-switch--orange` pinta de cobre (atenção/lesão).
   UM interruptor no app inteiro: a Conta e a tela de Lesões usam este. */
.au-switch{ display:inline-flex; align-items:center; justify-content:center; min-width:var(--au-h-tap); min-height:var(--au-h-tap); padding:0; background:none; border:none; cursor:pointer; flex:none; transition:transform var(--au-dur-press) var(--au-ease) }
.au-switch:active{ transform:scale(.97) }
.au-switch-track{ position:relative; display:block; width:40px; height:24px; border-radius:100px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); transition:background var(--au-dur) var(--au-ease), border-color var(--au-dur) var(--au-ease) }
.au-switch-thumb{ position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:var(--au-muted); transition:transform var(--au-dur) var(--au-ease), background var(--au-dur) var(--au-ease) }
.au-switch.on .au-switch-track{ background:var(--au-gold-tint); border-color:rgba(201,162,74,.6) }
.au-switch.on .au-switch-thumb{ transform:translateX(16px); background:var(--au-gold) }
.au-switch--orange.on .au-switch-track{ background:rgba(217,154,108,.16); border-color:rgba(217,154,108,.6) }
.au-switch--orange.on .au-switch-thumb{ background:var(--au-orange) }
/* [dono 03/09] A LINHA DE AJUSTE — o interruptor como linha inteira
   (ícone · título · legenda · trilho à direita), a mesma cara pra qualquer
   "quem vê / ligar isto" do app. Nasceu na tela de fotos ("Matheus pode
   ver"); o `--lendo` é o estado antes de ler, SEM botão, com o trilho
   apagado só pra a linha não pular quando a leitura chegar. */
.au-switch-row{ width:100%; justify-content:flex-start; gap:12px; min-height:56px; padding:6px 0; border-top:1px solid var(--au-line); border-bottom:1px solid var(--au-line); text-align:left; color:var(--au-text); margin-top:14px }
.au-switch-row .au-switch-track{ margin-left:auto }
.au-switch-row-ico{ flex:none; width:24px; display:grid; place-items:center; color:var(--au-faint) }
.au-switch-row.on .au-switch-row-ico{ color:var(--au-gold) }
.au-switch-row-txt{ flex:1; min-width:0 }
.au-switch-row-t{ display:block; font:300 var(--au-fs-l) 'Sora',sans-serif; color:var(--au-text) }
.au-switch-row-s{ display:block; font:300 var(--au-fs-xs)/1.45 'Sora',sans-serif; color:var(--au-muted); margin-top:2px }
.au-switch-row--lendo{ display:flex; align-items:center; opacity:.6 }

/* ---- superfícies ---- */
.au-card{ background:var(--au-surface); border:1px solid var(--au-line); border-radius:16px; padding:14px }
.au-card-gold{ border-color:rgba(201,162,74,.4); box-shadow:var(--au-glow-gold-soft) }
.au-card-green{ border-color:rgba(95,168,122,.4); background:rgba(95,168,122,.04) }
.au-row{ display:flex; align-items:center; gap:10px; padding:10px 2px; border-bottom:1px solid var(--au-line-soft) }
.au-row:last-child{ border-bottom:none }

/* ---- campos ---- */
.au-input{
  background:none; border:none; border-bottom:1px solid rgba(255,255,255,.14);
  border-radius:0; padding:11px 2px; font:400 1.0625rem 'Sora',sans-serif;
  color:var(--au-text); width:100%; min-height:44px; outline:none;
  transition:border-color var(--au-dur) var(--au-ease);
}
.au-input:focus{ border-bottom-color:rgba(201,162,74,.6); box-shadow:0 12px 18px -14px rgba(201,162,74,.35) }
/* [16/08] Placeholder dos campos de carga (kg × reps, `js/core/cargas-declaradas.js`).
   O VALOR digitado é 24px de propósito — é número que se lê de longe, com o
   celular no chão. Mas a palavra "reps" nesse tamanho NÃO CABE nos 62px do
   campo e saía cortada, nas DUAS telas que usam a linha (a folha do Goal e a
   tela de cargas do onboarding). Medido: precisava de 54px e tinha 44.
   Quem pegou foi a CAPTURA DE TELA — medida de borda não vê texto cortado
   DENTRO do elemento, porque nada vaza. Só o placeholder encolhe. */
input[data-carga]::placeholder{ font-size:var(--au-fs-m); letter-spacing:0 }
.au-numbox{
  border:1px solid rgba(201,162,74,.4); border-radius:14px; padding:10px;
  text-align:center; box-shadow:0 0 16px -9px rgba(201,162,74,.6); min-height:44px;
}
.au-numbox .v{ font:100 2.125rem 'Sora',sans-serif; color:var(--au-text) }
.au-numbox .l{ font:400 .625rem 'Space Mono',monospace; letter-spacing:.16em; color:var(--au-gold-dim); text-transform:uppercase; margin-top:2px }

/* ---- pontos/barras com halo (status) ---- */
.au-dot{ width:6px; height:6px; border-radius:50%; flex:0 0 auto }
.au-dot.gold{ background:var(--au-gold); box-shadow:0 0 10px rgba(201,162,74,.6) }
.au-dot.green{ background:var(--au-green); box-shadow:var(--au-glow-green) }
.au-dot.orange{ background:var(--au-orange); box-shadow:0 0 8px rgba(217,154,108,.7) }
.au-dot.off{ background:none; border:1px solid rgba(255,255,255,.12) }
.au-bar{ height:3px; border-radius:100px; background:var(--au-surface); position:relative; overflow:hidden; flex:1 }
.au-bar>i{ position:absolute; left:0; top:0; bottom:0; border-radius:100px; background:var(--c,var(--au-gold)); box-shadow:0 0 8px color-mix(in srgb, var(--c,var(--au-gold)) 55%, transparent) }

/* ---- segmentos/chips (alvo 44px) ---- */
.au-seg{ display:flex; gap:6px }
.au-seg>*{
  flex:1; display:flex; align-items:center; justify-content:center; min-height:44px;
  border:1px solid rgba(255,255,255,.1); border-radius:100px; background:none;
  color:var(--au-text-soft); font:400 .9375rem 'Sora',sans-serif; cursor:pointer;
  transition:border-color var(--au-dur) var(--au-ease), color var(--au-dur) var(--au-ease);
}
.au-seg>.on{ border-color:rgba(201,162,74,.55); color:var(--au-gold); box-shadow:var(--au-glow-gold) }
/* [dono 17/08 · texto cortado] SEGMENTO QUE QUEBRA EM DUAS FILEIRAS.
   Um `.au-seg` não encolhe abaixo da PALAVRA de cada item: os itens são
   `flex:1` com `min-width:auto`, e uma palavra só não tem onde quebrar.
   Medido no passo "Onde você treina" em 320px, com o app em INGLÊS: os três
   botões pedem 331px numa faixa de 268, e "Outdoors" ia até 357 — 37px FORA
   DA TELA. Em português ("Rua") cabia, e por isso o defeito só aparecia num
   idioma. Nem o fiscal nem a varredura de texto cortado pegavam: a tela não
   rola (o corte é do container) e o botão em si não está com overflow
   escondido — quem estoura é a FAIXA.
   Encolher a fonte não resolve: a 15px "Outdoors" ainda pede mais espaço do
   que os 85px que sobram por botão. Então a faixa quebra: em 320 o terceiro
   desce pra segunda fileira, inteiro e legível. Em 375+ nada muda.
   Modificador, e não mudança no `.au-seg`: a classe canônica serve o passo
   dos DIAS (5 números curtos) e a experiência, que devem continuar numa
   fileira só. */
.au-seg-wrap{ flex-wrap:wrap }
.au-seg-wrap>*{ flex:1 1 auto }

/* ---- slider (RPE e afins) — trilho verde→ouro, polegar com halo ---- */
.au-slider{ -webkit-appearance:none; appearance:none; width:100%; height:44px; background:none; cursor:pointer }
.au-slider::-webkit-slider-runnable-track{ height:3px; border-radius:100px; background:linear-gradient(90deg,var(--au-green),var(--au-gold)) }
.au-slider::-webkit-slider-thumb{ -webkit-appearance:none; width:22px; height:22px; border-radius:50%; background:#f5f3ee; border:none; margin-top:-9.5px; box-shadow:0 0 16px rgba(201,162,74,.85) }
.au-slider::-moz-range-track{ height:3px; border-radius:100px; background:linear-gradient(90deg,var(--au-green),var(--au-gold)) }
.au-slider::-moz-range-thumb{ width:22px; height:22px; border-radius:50%; background:#f5f3ee; border:none; box-shadow:0 0 16px rgba(201,162,74,.85) }

/* ---- trilho de exercícios do player ---- */
.au-rail{ display:flex; gap:7px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; margin:0 -26px; padding:2px 26px }
.au-rail::-webkit-scrollbar{ display:none }
.au-rail-item{ flex:0 0 58px; background:none; border:none; padding:0; cursor:pointer; text-align:center }
.au-rail-thumb{ width:58px; height:58px; border-radius:13px; background:var(--au-surface-2); border:1px solid var(--au-line); display:flex; align-items:center; justify-content:center; position:relative; font:400 .9375rem 'Space Mono',monospace; letter-spacing:.06em; color:var(--au-muted); transition:border-color var(--au-dur) var(--au-ease), box-shadow var(--au-dur) var(--au-ease) }
.au-rail-item.done .au-rail-thumb{ opacity:.45 }
.au-rail-item.cur .au-rail-thumb{ border-color:rgba(201,162,74,.6); box-shadow:var(--au-glow-gold); color:var(--au-gold) }
.au-rail-chk{ position:absolute; top:-5px; right:-5px; width:16px; height:16px; border-radius:50%; background:var(--au-green); color:var(--au-bg); font-size:.6875rem; display:flex; align-items:center; justify-content:center }
.au-rail-bar{ height:2px; border-radius:100px; background:var(--au-surface-2); margin-top:5px; position:relative; overflow:hidden }
.au-rail-bar>i{ position:absolute; left:0; top:0; bottom:0; border-radius:100px; background:var(--au-green) }
.au-rail-item.cur .au-rail-bar>i{ background:var(--au-gold); box-shadow:0 0 8px rgba(201,162,74,.7) }
.au-rail-name{ font:400 6.5px 'Space Mono',monospace; letter-spacing:.06em; color:var(--au-muted); text-transform:uppercase; margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:58px }
.au-rail-item.cur .au-rail-name{ color:var(--au-gold) }

/* ---- tabela de séries do player (aprovada: futuras em fantasma tracejado) ---- */
.au-setrow{ display:flex; align-items:center; gap:8px; padding:7px 2px; min-height:44px; border-bottom:1px solid var(--au-line-soft); background:none; border-left:none; border-right:none; border-top:none; width:100%; cursor:pointer; text-align:left }
.au-setrow:last-child{ border-bottom:none }
.au-setrow .no{ width:18px; font:400 .75rem 'Space Mono',monospace; color:var(--au-faint); text-align:center; flex:0 0 auto }
.au-setrow .tgt{ flex:1.3; font:400 .75rem/1.35 'Sora',sans-serif; color:var(--au-muted); min-width:0 }
.au-setrow .cell{ flex:1; border:1px solid rgba(255,255,255,.09); border-radius:9px; padding:7px 0; text-align:center; font:400 .9375rem 'Sora',sans-serif; color:var(--au-text); min-height:32px }
.au-setrow .ck{ width:22px; height:22px; border-radius:7px; border:1px solid rgba(255,255,255,.14); display:flex; align-items:center; justify-content:center; font-size:.8125rem; flex:0 0 auto; color:transparent }
.au-setrow.done .cell{ border-color:transparent; background:var(--au-surface); color:var(--au-faint) }
.au-setrow.done .ck{ background:var(--au-green); border-color:var(--au-green); color:var(--au-bg) }
.au-setrow.cur .no{ color:var(--au-gold) }
.au-setrow.cur .cell{ border-color:rgba(201,162,74,.45); box-shadow:0 0 14px -8px rgba(201,162,74,.6) }
.au-setrow.cur .ck{ border-color:rgba(201,162,74,.6) }
.au-setrow.fut .cell{ border:1px dashed rgba(255,255,255,.12); color:var(--au-faint); font-style:italic }
.au-setrow.fut .ck{ border-style:dashed; opacity:.5 }
.au-setrow.fut .tgt,.au-setrow.fut .no{ opacity:.55 }

/* ---- login (porta de entrada) — luz vinda de cima, preto Aurum ---- */
#loginView{ background:radial-gradient(90% 40% at 50% 0%, var(--au-surface), var(--au-bg) 70%) }

/* ---- acessibilidade ----
   Foco de teclado NÃO usa ouro: ouro já significa "selecionado/agora" no
   app (.au-seg>.on, .au-dot.gold) e quem navega por teclado não conseguia
   distinguir foco de seleção. Anel claro, neutro. */
:focus-visible{ outline:2px solid var(--au-text); outline-offset:2px }

/* Reduced-motion segue a régua aprovada: MANTÉM o fade, CORTA o
   deslocamento. O kill-switch antigo (transition-duration:.01ms em tudo)
   matava também os cross-fades — que a HIG manda preservar — e não
   neutralizava o transform do press (o botão continuava dando um salto
   seco). Agora: animações longas param, o press não desloca, e a folha
   entra por opacidade em vez de subir. */
/* ---- O PLAYER DE VÍDEO (dono 2026-09-03) ----
   Ver js/core/video-player.js. Botão central de 72px (fio de luz, sem
   fill), some enquanto roda; fio de progresso em ouro de 3px; botão de som
   de 44px. Só opacity/transform animam. */
.au-video{ position:relative; width:100%; line-height:0; background:var(--au-bg); overflow:hidden; cursor:pointer }
.au-video video{ width:100%; max-height:100%; display:block; background:var(--au-bg) }
.au-video-play{ position:absolute; left:50%; top:50%; width:72px; height:72px; margin:-36px 0 0 -36px; border-radius:50%; border:1px solid rgba(239,237,232,.45); background:rgba(11,10,9,.35); color:var(--au-text); display:grid; place-items:center; padding:0; cursor:pointer; opacity:1; transition:opacity 240ms var(--au-ease), transform var(--au-dur-press) var(--au-ease) }
.au-video-play:active{ transform:scale(.94) }
.au-video.playing .au-video-play{ opacity:0; transition-delay:500ms; pointer-events:none }
.au-video-bar{ position:absolute; left:0; right:0; bottom:0; height:3px; background:rgba(239,237,232,.12) }
.au-video-bar-fill{ display:block; height:100%; background:var(--au-gold) }
.au-video-mute{ position:absolute; right:8px; bottom:12px; width:44px; height:44px; border-radius:50%; border:none; background:rgba(11,10,9,.45); color:var(--au-text-soft); display:grid; place-items:center; padding:0; cursor:pointer; transition:transform var(--au-dur-press) var(--au-ease) }
.au-video-mute:active{ transform:scale(.92) }

@media (prefers-reduced-motion: reduce){
  .au-video-play{ transition:none }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
  }
  button:active, [role="button"]:active, .au-press:active,
  .au-btn:active:not(:disabled), .au-ghost:active,
  .home-card:active, .home-card-cta:active{ transform:none !important }
  .modal{ animation:auFadeIn 200ms linear both !important }
  .modal-backdrop{ animation:auFadeIn 200ms linear both !important }
}

/* [HIG · acessibilidade] O iPhone tem TRÊS ajustes de acessibilidade
   visual, não um. O app só respondia ao "Reduzir Movimento" — quem liga
   "Aumentar Contraste" ou "Reduzir Transparência" nos Ajustes não via
   diferença nenhuma. A diretriz é explícita: se o padrão não entrega o
   contraste, o app precisa PELO MENOS entregar um esquema de contraste
   maior quando o ajuste do sistema estiver ligado.
   Nada disso muda o app no estado padrão — só acende com o ajuste ligado,
   então a APPLE VERSION continua intacta pra quem não usa. */

/* Aumentar Contraste: a rampa de cinza se aproxima do texto cheio e as
   linhas (hoje quase invisíveis, 7% de branco) ganham corpo. */
@media (prefers-contrast: more){
  :root{
    --au-muted:#c6c2b8;      /* 7,2:1 → 11,5:1 */
    --au-faint:#b0aba1;      /* 5,1:1 →  8,9:1 */
    --au-text-soft:#efede8;
    --au-line:rgba(255,255,255,.28);
    --au-line-soft:rgba(255,255,255,.18);
    --au-gold-kicker:#c9a24a; /* 5,9:1 → 8,5:1 */
  }
  .au-chip, .au-ghost, .au-card{ border-color:rgba(255,255,255,.34) }
}

/* Reduzir Transparência: superfície fica opaca e o blur sai. Um vidro
   sobre conteúdo em movimento é justamente o que esse ajuste existe pra
   remover — manter o blur aqui seria ignorar o pedido do usuário. */
@media (prefers-reduced-transparency: reduce){
  *{ backdrop-filter:none !important; -webkit-backdrop-filter:none !important }
  .au-sheet, .au-sheet-up, .modal-content, .modal-fullscreen,
  #bottomNav, #coachNav{ background:var(--au-surface) !important }
  .modal-backdrop, .hub-inj-sheet-backdrop{ background:rgba(5,5,4,.94) !important }
}

/* ══ A GRADE DO CICLO — porta CICLO do hub (js/screens/coach-ciclo.js) ══
   [dono 2026-08-31] periodização não-linear.

   As cargas são os tokens --au-load-* (luminância, nunca matiz novo). O
   OURO aqui é só da semana ABERTA: é o "agora" da régua de cor, e é o
   único uso de ouro da tela. */
.cic{ display:flex; flex-direction:column; gap:18px; padding:16px 0 }

/* ── legenda ── */
.cic-legenda{ display:flex; flex-wrap:wrap; gap:12px 16px; align-items:center }
.cic-leg{
  display:inline-flex; align-items:center; gap:6px;
  font:400 var(--au-fs-mono-xs) 'Space Mono',monospace;
  letter-spacing:.14em; text-transform:uppercase; color:var(--au-faint);
}
.cic-sw{
  width:14px; height:14px; border-radius:3px; flex:none;
  border:1px solid var(--au-line); background:transparent;
}
.cic-sw.cic-pesado{ background:var(--au-load-heavy) }
.cic-sw.cic-moderado{ background:var(--au-load-mod) }
.cic-sw.cic-leve{ background:var(--au-load-light) }

/* ── a grade ── */
.cic-grade{ display:flex; flex-direction:column; gap:2px }
.cic-cab{ display:flex; align-items:center; gap:10px; padding:0 0 4px }
.cic-cab .cic-rot{ visibility:hidden }
.cic-cel-cab{
  flex:1; text-align:center;
  font:400 var(--au-fs-mono-xs) 'Space Mono',monospace;
  letter-spacing:.1em; color:var(--au-faint);
}

/* A LINHA É UM BOTÃO SÓ — nunca botão dentro de botão (a lição do
   executor): as células são estáticas e quem seleciona é a linha. */
.cic-linha{
  display:flex; align-items:center; gap:10px; width:100%;
  min-height:44px; padding:6px 8px;
  background:none; border:none; border-radius:8px; cursor:pointer;
  border-left:2px solid transparent;
  transition:background var(--au-dur) var(--au-ease), border-color var(--au-dur) var(--au-ease);
}
.cic-linha.on{ background:var(--au-surface-2); border-left-color:var(--au-gold) }
.cic-linha:active{ transform:scale(.99) }
.cic-rot{ flex:none; width:96px; text-align:left; display:flex; flex-direction:column; gap:1px }
/* O NOME DA SEMANA QUEBRA, NUNCA CORTA. Quem o escreve é o coach ("Semana
   3 · deload", "Choque"), e o fiscal pegou justamente esse: precisava de
   119px numa coluna de 86. Cortar o que ELE escreveu é a mesma classe do
   "4…" no lugar de "40 kg" — mesma decisão que a prévia do recado da Home
   já tinha tomado em 21/08.
   [29/09 · esqueleto] A FASE TAMBÉM QUEBRA. Ela cortava com reticências
   porque o texto era do app (Base/Build/Peak). Com a folha "Montar
   temporada" quem dá o nome da fase é o coach — e o fiscal pegou o nome
   real dele, "Fase 0 · Aprender", cortado (124px numa coluna de 96). */
.cic-sem{
  font:400 var(--au-fs-xs)/1.25 'Sora',sans-serif; color:var(--au-text-soft);
  overflow-wrap:anywhere;
}
.cic-linha.on .cic-sem{ color:var(--au-text) }
.cic-fase{
  font:400 var(--au-fs-mono-xs) 'Space Mono',monospace;
  letter-spacing:.12em; text-transform:uppercase; color:var(--au-faint);
  line-height:1.3; overflow-wrap:anywhere;
}
.cic-dias{ display:flex; gap:3px; flex:1; min-width:0 }
.cic-cel{
  position:relative; flex:1; height:30px; border-radius:4px;
  border:1px solid var(--au-line-soft); background:transparent;
}
.cic-cel.cic-pesado{ background:var(--au-load-heavy); border-color:transparent }
.cic-cel.cic-moderado{ background:var(--au-load-mod); border-color:transparent }
.cic-cel.cic-leve{ background:var(--au-load-light); border-color:transparent }
/* o ponto da marcação à mão: sem ele o coach não sabe quais dias ele já
   corrigiu e quais continuam sendo conta do app. */
.cic-mao{
  position:absolute; top:3px; right:3px; width:4px; height:4px;
  border-radius:50%; background:var(--au-gold);
}

/* ── [dono 04/09] as sub-abas, a moldura da linha e a faixa da semana ── */
.cic-abas{ margin:-4px 0 2px }
/* A LINHA VIROU MOLDURA COM DOIS BOTÕES IRMÃOS (a linha, e o "TREINO ›"
   da linha aberta) — nunca botão dentro de botão. */
.cic-linha-wrap{ display:flex; align-items:center; gap:4px }
.cic-linha-wrap .cic-linha{ flex:1; min-width:0 }
.cic-ir{ flex:none; color:var(--au-gold); white-space:nowrap; padding:12px 6px }
/* a faixa da semana (sub-aba TREINO): setas · nome · os sete dias · as
   mini-barras do ciclo. Uma linha só, 44px+. [06/10] O link "VISÃO GERAL ›"
   morreu (a sub-aba ao lado faz o mesmo); a faixa divide a fila com as
   sub-abas (`.cic-topo`). */
.cic-topo{ display:flex; align-items:center; gap:12px 16px; flex-wrap:wrap }
.cic-topo > .cic-abas{ flex:none }
.cic-topo > .cic-faixa{ flex:1 1 420px; min-width:0 }
.cic-faixa{
  display:flex; align-items:center; gap:10px;
  border:1px solid var(--au-line); border-radius:14px; padding:6px 8px 6px 2px;
}
.cic-faixa-seta{ flex:none; font:400 20px/1 'Sora',sans-serif; color:var(--au-text-soft) }
.cic-faixa-seta:disabled{ opacity:.3; cursor:default }
.cic-faixa-t{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px }
.cic-faixa-t b{ font:300 var(--au-fs-l)/1.2 'Sora',sans-serif; color:var(--au-text); overflow-wrap:anywhere }
.cic-faixa-t span{
  font:400 var(--au-fs-mono-xs) 'Space Mono',monospace; letter-spacing:.14em;
  text-transform:uppercase; color:var(--au-faint);
}
.cic-faixa-dias{ display:flex; gap:3px; flex:none }
.cic-faixa-dias .cic-cel{ flex:none; width:20px; height:20px }
.cic-faixa-mini{ display:flex; align-items:flex-end; gap:3px; height:28px; flex:none }
.cic-faixa-mini i{ display:block; width:12px; border-radius:2px 2px 0 0; background:var(--au-load-mod); min-height:0 }
.cic-faixa-mini i.desc{ background:var(--au-load-light) }
.cic-faixa-mini i.on{ background:var(--au-gold) }
/* [29/09 · esqueleto] semana só com meta: contorno, como no gráfico */
.cic-faixa-mini i.meta{ background:none; border:1px solid rgba(245,243,238,.42); border-bottom:none; box-sizing:border-box }
.cic-faixa-mini i.meta.on{ background:none; border-color:var(--au-gold) }
/* NO HUB ESTREITO a faixa fica com o essencial: setas, nome e os sete dias
   — as mini-barras ficam pra VISÃO GERAL, na sub-aba ao lado. Quem decide é a
   largura do HUB (container `hubcorpo`, coach-desktop.css), não a da
   janela: em 1280px com a lista aberta o hub tem 408px, e uma regra por
   janela deixaria o link e a seta 79px pra fora (medido, dirigindo). */
@container hubcorpo (max-width:639px){
  .cic-faixa-mini{ display:none }
  .cic-faixa-dias .cic-cel{ width:14px; height:14px }
  /* a linha de fase · padrão · mês · carga é texto do app, curto e
     conhecido: no estreito ela corta com reticências em vez de virar
     quatro linhas (a mesma regra da `.cic-fase` da grade). O nome da
     semana, que é do coach, continua quebrando. */
  .cic-faixa-t span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
}

/* ── estado vazio ── */
/* [dono 2026-09-03] o estado vazio virou a grade com a semana PREVISTA:
   mesma composição da grade cheia (.cic), só sem o painel de volume. A
   linha prevista não é botão — sem :active e sem cursor de mão. */
.cic-vazio .cic-nota{ font:400 var(--au-fs)/1.5 'Sora',sans-serif; color:var(--au-muted); margin:0 }
.cic-linha-prevista{ cursor:default }
.cic-linha-prevista .cic-sem{ color:var(--au-text) }

/* ══ GRÁFICO DO CICLO — barras por semana (coach-ciclo-grafico.js) ═════
   [dono 2026-09-02] a vista do slide da aula: training load por semana.
   O OURO é da semana SELECIONADA e de mais ninguém — é a mesma seleção
   da grade embaixo, então continua sendo UM uso de ouro, não um segundo. */
.cgr{ display:flex; flex-direction:column; gap:10px }
.cgr-padroes{ display:flex; gap:6px }
.cgr-chip{ min-width:56px; padding:0 12px }
.cgr-chip.on{ border-color:var(--au-gold); color:var(--au-gold) }

/* as faixas de bloco — a linha de cima do slide */
.cgr-faixas{ display:flex; gap:3px }
.cgr-faixa{
  flex:1; text-align:center; padding:3px 0; border-radius:4px;
  background:var(--au-line-soft);
  font:400 var(--au-fs-mono-xs) 'Space Mono',monospace; letter-spacing:.12em;
  color:var(--au-faint); white-space:nowrap; overflow:hidden;
}

/* o plot */
.cgr-plot{ display:flex; align-items:flex-end; gap:3px; height:132px }
.cgr-col{
  flex:1; min-width:0; height:100%; padding:0; border:none; background:none;
  display:flex; flex-direction:column; align-items:stretch; gap:4px; cursor:pointer;
}
.cgr-col:active{ transform:scale(.97) }
/* o FEITO: tracejado na altura da carga interna das sessões concluídas */
.cgr-feito{
  position:absolute; left:-2px; right:-2px; height:0;
  border-top:2px dashed var(--au-text-soft); pointer-events:none;
}

.cgr-temporada{ margin-left:auto }
/* o rolo do ciclo longo: a coluna nunca abaixo de 44px (3px de vão) */
.cgr-rolo{ overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:thin }
.cgr-rolo-in{ display:flex; flex-direction:column; gap:10px; min-width:calc(var(--cgr-n, 1) * 47px) }
.cgr-col{ min-width:44px }
.cgr-meta-linha{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 14px }
.cgr-meta-campo{ display:flex; align-items:center; gap:8px }
/* 17px: o piso do iPhone contra o zoom do teclado (régua ZOOM<16) */
.cgr-meta-input, .tmp-in{
  height:44px; box-sizing:border-box; padding:0 10px; min-width:0;
  font:400 var(--au-fs-xl) 'Sora',sans-serif; color:var(--au-text);
  background:var(--au-surface-2); border:1px solid var(--au-line); border-radius:10px;
}
.cgr-meta-input{ width:96px; text-align:right }
.cgr-meta-input:focus, .tmp-in:focus{ outline:none; border-color:var(--au-text-soft) }
.cgr-meta-un, .tmp-un{ font:400 var(--au-fs-mono-xs) 'Space Mono',monospace; letter-spacing:.12em; color:var(--au-muted) }
.cgr-meta-pct{ font:400 var(--au-fs-xs) 'Sora',sans-serif; color:var(--au-muted) }
.cgr-meta-erro, .tmp-erro{ font:400 var(--au-fs-xs) 'Sora',sans-serif; color:var(--au-orange); margin:0 }

/* ══ [dono 2026-10-07, "implemente A"] UMA PISTA POR MODALIDADE ═══════
   coach-ciclo-grafico.js · mockup mockups/ciclo-por-modalidade.html.
   Cada SEMANA é um botão que atravessa as pistas; os nomes das pistas
   ficam numa coluna fixa à esquerda, nas MESMAS alturas. Modalidade por
   LUMINÂNCIA (a régua das zonas), nunca matiz novo. Contorno = meta,
   preenchimento = prescrito; o ouro é só da semana escolhida. */
/* [dono 15/10] "deixa essa parte das semanas maior, para melhor visualização
   das colunas": a pista foi de 52 pra 96px (só o coach vê, no Mac). */
.cpi{ --cpi-h:96px; --cpi-gap:6px; --cpi-faixa:20px; --cpi-rot:112px }
.cpi-barra{ display:flex; align-items:center; gap:8px 12px; flex-wrap:wrap }
.cpi-barra .cgr-temporada{ margin-left:auto }
.cpi-quadro{ display:flex; gap:8px; align-items:flex-start }
.cpi-rotulos{ flex:none; width:var(--cpi-rot); display:flex; flex-direction:column; gap:var(--cpi-gap) }
.cpi-rot-faixa{ height:var(--cpi-faixa) }
.cpi-rot{ height:var(--cpi-h); display:flex; flex-direction:column; justify-content:center; padding-right:6px }
.cpi-rot b{ font:400 var(--au-fs-s) 'Sora',sans-serif; color:var(--au-text-soft) }
.cpi-rot small{ font:400 var(--au-fs-mono-xs) 'Space Mono',monospace; letter-spacing:.1em; text-transform:uppercase; color:var(--au-faint); white-space:nowrap }
.cpi-rot-x{ height:16px; font:400 var(--au-fs-mono-xs) 'Space Mono',monospace; letter-spacing:.12em; text-transform:uppercase; color:var(--au-faint) }
.cpi .cgr-rolo{ flex:1; min-width:0 }
.cpi .cgr-rolo-in{ gap:var(--cpi-gap) }
.cpi .cgr-faixas{ height:var(--cpi-faixa) }
.cpi .cgr-faixa{ display:flex; align-items:center; justify-content:center; padding:0 }
.cpi-fases{ display:flex; gap:3px; height:var(--cpi-faixa) }
.cpi-fase{
  min-width:0; display:flex; align-items:center; padding:0 8px; border-radius:4px;
  background:var(--au-line-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font:400 var(--au-fs-mono-xs) 'Space Mono',monospace; letter-spacing:.12em; text-transform:uppercase; color:var(--au-faint);
}
.cpi-plot{ height:auto; align-items:stretch }
.cpi-col{ gap:var(--cpi-gap); border-radius:6px }
.cpi-pista{ position:relative; display:block; height:var(--cpi-h); flex:none; box-sizing:border-box; border-bottom:1px solid var(--au-line) }
.cpi-meta, .cpi-pres{ position:absolute; left:3px; right:3px; bottom:0; border-radius:3px 3px 0 0; pointer-events:none }
.cpi-meta{ border:1px solid var(--cpi-c); border-bottom:none; box-sizing:border-box }
.cpi-pres{ background:var(--cpi-c) }
.cpi-m-natacao{ --cpi-c:rgba(245,243,238,.80) }
.cpi-m-ciclismo{ --cpi-c:rgba(245,243,238,.60) }
.cpi-m-corrida{ --cpi-c:rgba(245,243,238,.44) }
.cpi-m-outra{ --cpi-c:rgba(245,243,238,.32) }
.cpi-m-forca{ --cpi-c:rgba(245,243,238,.26) }
.cpi-total{ --cpi-c:rgba(245,243,238,.30) }
.cpi-total .cpi-pres{ background:rgba(245,243,238,.16) }
.cpi-total .cpi-meta{ border-color:rgba(245,243,238,.45) }
.cpi-col.fora .cpi-total .cpi-meta{ border-color:var(--au-orange) }
.cpi-col.desc .cpi-pista{ opacity:.5 }
.cpi-col.on{ box-shadow:0 0 0 1px rgba(201,162,74,.6) }
.cpi-col .cgr-x{ height:16px }
/* o cartão da semana escolhida */
.cpi-cartao{ margin-top:6px; padding:14px 16px; border:1px solid var(--au-line); border-radius:16px; background:var(--au-surface); display:flex; flex-direction:column; gap:14px }
.cpi-cartao-topo{ display:flex; gap:18px; flex-wrap:wrap }
.cpi-cartao-tit{ flex:1 1 220px; min-width:0 }
.cpi-cartao-tit h3{ font:300 var(--au-fs-t-s) 'Sora',sans-serif; color:var(--au-text); margin:4px 0 2px }
.cpi-cartao-meta{ font:400 var(--au-fs-xs)/1.45 'Sora',sans-serif; color:var(--au-muted); margin:0 }
.cpi-aviso{ font:400 var(--au-fs-xs)/1.45 'Sora',sans-serif; color:var(--au-orange); margin:6px 0 0 }
.cpi-mods{ flex:2 1 360px; display:grid; grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)); gap:10px }
.cpi-mod{ border-left:2px solid var(--cpi-c); padding:2px 0 2px 10px; display:flex; flex-direction:column; gap:4px }
.cpi-mod b{ font:300 var(--au-fs-t-s) 'Sora',sans-serif; color:var(--au-text) }
.cpi-mod-meta{ display:flex; align-items:center; gap:6px; font:400 var(--au-fs-xs) 'Sora',sans-serif; color:var(--au-muted) }
.cpi-meta-h{ width:64px; text-align:right }
.cpi-semana{ display:flex; flex-direction:column; gap:10px; border-top:1px solid var(--au-line); padding-top:12px }
.cic-visao-uma{ display:flex; flex-direction:column; gap:22px }
@media (prefers-reduced-motion: reduce){ .cpi-col:active{ transform:none } }

/* ── A FOLHA DE MONTAR A TEMPORADA (coach-ciclo-temporada.js) ──────────
   A casca é a das folhas do coach (alfEstiloUmaVez); aqui só o miolo. */
.tmp-explica{ font:400 var(--au-fs-xs)/1.45 'Sora',sans-serif; color:var(--au-text-soft); margin:10px 0 0 }
.tmp-lista{ margin-top:14px; overflow-y:auto; -webkit-overflow-scrolling:touch; display:flex; flex-direction:column; gap:12px; min-height:0 }
.tmp-fase{ border:1px solid var(--au-line); border-radius:14px; padding:12px }
.tmp-fase-topo{ display:flex; align-items:center; gap:8px }
.tmp-fase-cont{ flex:1; min-width:0; font:300 var(--au-fs) 'Sora',sans-serif; color:var(--au-text) }
.tmp-nome{ flex:1; width:100% }
.tmp-tirar{ flex:none; min-width:44px; padding:0 }
.tmp-linha{ display:flex; align-items:center; gap:10px; margin-top:10px; flex-wrap:wrap }
/* [07/10] 80px: "STRENGTH" (as horas por modalidade) pede 73 — o fiscal pegou */
.tmp-linha .au-kicker-soft{ width:80px; flex:none }
.tmp-passo{ min-width:44px; padding:0 }
.tmp-n{ min-width:28px; text-align:center; font:300 var(--au-fs-xl) 'Sora',sans-serif; color:var(--au-text) }
.tmp-ua{ width:88px; text-align:right }
.tmp-seta{ color:var(--au-muted) }
.tmp-mais{ align-self:flex-start }
.tmp-regra{ font:400 var(--au-fs-xs)/1.5 'Sora',sans-serif; color:var(--au-faint); margin:0 }
.tmp-previa{ font:400 var(--au-fs-xs)/1.45 'Sora',sans-serif; color:var(--au-text-soft); margin:12px 0 0 }
.cgr-x{
  flex:none; text-align:center;
  font:400 var(--au-fs-mono-xs) 'Space Mono',monospace; color:var(--au-faint);
}
.cgr-col.on .cgr-x{ color:var(--au-gold) }

.cgr-nota{
  font:400 var(--au-fs-xs)/1.45 'Sora',sans-serif; color:var(--au-faint); margin:0;
}

/* ── quantas semanas o ciclo tem (dono 2026-09-02) ── */
.cgr-semanas{ display:flex; align-items:center; gap:8px; flex-wrap:wrap }
.cgr-qtd{
  font:400 var(--au-fs-mono-xs) 'Space Mono',monospace; letter-spacing:.14em;
  text-transform:uppercase; color:var(--au-faint);
}
.cgr-mais, .cgr-menos{ min-width:44px; padding:0; font-size:var(--au-fs-l) }
.cgr-menos[disabled]{ opacity:.35; cursor:default }
/* A BARRA SOZINHA NÃO PODE OCUPAR A TELA INTEIRA (o dono viu isso no
   print: 1 semana virava um bloco de ouro de 1140px). O `flex:1` estica
   pra preencher; o teto de 64px mantém a barra com CARA de barra, e o
   gráfico começa a fazer sentido já na primeira semana. */
.cgr-col{ max-width:64px }
.cgr-plot{ justify-content:flex-start }
/* a faixa que fecha um mês ganha um traço a mais de luz — é o padrão que
   o dono usa, e ele lê "MÊS" antes de contar semana. */
.cgr-faixa.mes{ background:rgba(245,243,238,.10); color:var(--au-text-soft) }

/* ══ PUXAR PRA ATUALIZAR (js/core/puxar-pra-atualizar.js) ══════════════
   [dono 2026-09-02] o gesto que faltava pra pegar versão nova num PWA
   instalado, onde não há barra de endereço nem Cmd+R. */
.pxa-ind{
  position:fixed; top:calc(env(safe-area-inset-top, 0px) + 4px); left:50%;
  transform:translateX(-50%); z-index:400;
  width:30px; height:30px; display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition:opacity var(--au-dur) var(--au-ease), transform var(--au-dur) var(--au-ease);
}
.pxa-anel{
  width:20px; height:20px; border-radius:50%;
  border:2px solid var(--au-line); border-top-color:var(--au-muted);
  display:block;
}
/* pronto pra soltar: o anel vira ouro — é o "agora" da régua de cor */
.pxa-ind.pronto .pxa-anel{ border-color:var(--au-gold-dim); border-top-color:var(--au-gold) }
.pxa-ind.girando .pxa-anel{ animation:pxaGira .7s linear infinite }
@keyframes pxaGira{ to{ transform:rotate(360deg) } }

.pxa-selo{
  position:fixed; top:calc(env(safe-area-inset-top, 0px) + 10px); left:50%;
  transform:translateX(-50%) translateY(-8px); z-index:401;
  padding:7px 14px; border-radius:999px;
  background:var(--au-surface-2); border:1px solid var(--au-line);
  font:400 var(--au-fs-mono-xs) 'Space Mono',monospace; letter-spacing:.14em;
  text-transform:uppercase; color:var(--au-text-soft);
  opacity:0; pointer-events:none;
  transition:opacity var(--au-dur) var(--au-ease), transform var(--au-dur) var(--au-ease);
}
.pxa-selo.on{ opacity:1; transform:translateX(-50%) translateY(0) }

/* ── ANEL DE ESPERA (03/09/2026) — o "está vindo" do app ─────────────
   Nasceu na folha de pagamento (o esqueleto invisível de 7% de branco não
   dizia nada); é a mesma família do anel do puxar-pra-atualizar, só que
   pra qualquer espera de rede. Só transform anima. 28px, sem cor nova:
   trilho na linha do app, arco em text-soft. */
.au-anel{
  display:inline-block; width:28px; height:28px; border-radius:50%;
  border:2px solid var(--au-line); border-top-color:var(--au-text-soft);
}
.au-anel--girando{ animation:auGira .8s linear infinite }
@keyframes auGira{ to{ transform:rotate(360deg) } }
@media (prefers-reduced-motion: reduce){ .au-anel--girando{ animation:none } }

/* reduced-motion: o anel não gira, mas o gesto e o selo continuam */
@media (prefers-reduced-motion: reduce){
  .pxa-ind.girando .pxa-anel{ animation:none }
  .pxa-ind, .pxa-selo{ transition:opacity var(--au-dur) var(--au-ease) }
}

/* =======================================================================
   MINIATURA DO EXERCÍCIO — ver o movimento, não só o nome (dono 23/09)
   A peça que o editor usa nos TRÊS lugares em que se prescreve. O que é
   canônico aqui é a MOLDURA (borda, raio, recorte); o TAMANHO é do lugar,
   como `.au-btn` e `.au-ghost` já fazem com altura.
   Ver js/core/exercicio-miniatura.js.
   ==================================================================== */
.au-exthumb{
  display:flex; align-items:center; justify-content:center;
  border-radius:8px; border:1px solid var(--au-line);
  background:var(--au-surface-2); overflow:hidden; flex:none;
  object-fit:cover; color:var(--au-faint); font:300 var(--au-fs-xl) 'Sora',sans-serif;
  /* quem recebe o toque é o botão em volta: sem isso a imagem come o clique */
  pointer-events:none;
}
.au-exthumb--m{ width:48px; height:64px }
.au-exthumb--p{ width:36px; height:48px }
.au-exthumb--sem{ background:none; border-style:dashed; border-color:var(--au-faint) }
.au-exthumb video{ width:100%; height:100%; object-fit:cover; display:block }

/* O ALVO É 44, A IMAGEM É MENOR. Área invisível não resolve — o fiscal
   mede a caixa do próprio elemento (a lição do ± de 13/08). */
.au-exthumb-btn{
  flex:none; display:flex; align-items:center; justify-content:center;
  min-width:44px; min-height:44px; padding:0;
  background:none; border:none; cursor:pointer;
  transition:transform var(--au-dur-press) var(--au-ease);
}
.au-exthumb-btn:active{ transform:scale(.95) }
.au-exthumb-btn:focus-visible{ outline:1px solid var(--au-gold); outline-offset:2px; border-radius:10px }
.au-exthumb-btn--m{ min-width:48px }

/* A CAMADA — acima da folha da biblioteca do editor (4600), porque é de
   dentro dela que o toque nasce. */
.au-exvideo{
  position:fixed; inset:0; z-index:4700; background:rgba(5,5,4,.92);
  display:flex; align-items:center; justify-content:center; padding:24px;
  /* [01/10] entrada e saída: js/core/video-transicao.js (a do app inteiro) */
}
.au-exvideo-quadro{ width:min(100%,420px); max-height:82vh; aspect-ratio:3/4 }
.au-exvideo-quadro .au-video{ width:100%; height:100%; border-radius:14px; overflow:hidden }
.au-exvideo-yt{ width:100%; aspect-ratio:16/9 }
.au-exvideo-yt iframe{ width:100%; height:100%; border:0; border-radius:14px }
.au-exvideo-nome{
  position:absolute; left:16px; right:72px; bottom:22px;
  font:300 var(--au-fs-l) 'Sora',sans-serif; color:var(--au-text);
  text-shadow:0 2px 14px rgba(0,0,0,.85); pointer-events:none;
}
.au-exvideo-x{
  position:absolute; top:14px; right:14px; width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  border-radius:999px; background:rgba(0,0,0,.5);
  border:1px solid rgba(255,255,255,.2); color:var(--au-text);
  font-size:20px; line-height:1; cursor:pointer; padding:0;
}

/* ── O SELETOR DE ÂNGULO (dono 2026-09-25, mockup exercicio-dois-angulos A)
   Ao lado do ✕, no topo do vídeo. UMA peça pros dois lugares que tocam o
   vídeo pra ver (executor do atleta e camada do editor): `angulosSeletorHTML`
   no core. Cada botão tem 44 de alvo; a pílula acesa é o ::before, recuado
   4px, pra o alvo não encolher junto com o desenho. Sem ouro: o ouro da
   tela cheia é a barra do progresso. */
.au-angulos{
  display:flex; height:44px; border-radius:22px;
  /* a linha é sombra por dentro, não `border`: a borda comia 2px e os
     botões saíam com 42 (o fiscal acusou na cena nova) */
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16); background:rgba(20,18,16,.45);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}
.au-angulo{
  position:relative; min-width:44px; height:44px; padding:0 12px; border:0; background:none; cursor:pointer;
  font:400 var(--au-fs-mono-xs) 'Space Mono',monospace; letter-spacing:.14em; text-transform:uppercase;
  color:var(--au-muted); transition:transform 120ms cubic-bezier(.22,1,.36,1), color 160ms;
}
.au-angulo::before{
  content:""; position:absolute; inset:4px; border-radius:18px; background:transparent;
  transition:background 160ms cubic-bezier(.22,1,.36,1); z-index:-1;
}
.au-angulo{ z-index:0 }
.au-angulo.on{ color:var(--au-text) }
.au-angulo.on::before{ background:rgba(245,243,238,.14) }
.au-angulo:active{ transform:scale(.97) }
.au-angulo:focus-visible{ outline:2px solid var(--au-text-soft); outline-offset:-4px; border-radius:18px }
/* o selinho da miniatura do executor: "este exercício tem N ângulos" */
.au-angulos-conta{
  position:absolute; left:3px; top:3px; min-width:15px; height:15px; padding:0 3px; border-radius:4px;
  background:rgba(11,10,9,.72); color:var(--au-text-soft); pointer-events:none;
  font:400 var(--au-fs-mono-xs)/15px 'Space Mono',monospace; text-align:center;
}
.au-exvideo .au-angulos{ position:absolute; top:14px; left:14px }
/* [dono 2026-10-02] "mude o botão de ângulo de visão, deixe ele mais
   minimalista" → "mude o montador também" — nos DOIS vídeos (executor do
   atleta e camada do montador) o seletor é só texto: o aberto em
   branco com um ponto embaixo, o outro apagado; sem pílula e sem fundo. A
   sombra das letras é o que segura a leitura sobre qualquer vídeo. O alvo
   continua 44. A classe nasce em `angulosSeletorHTML` (exercicio-angulos.js). */
.au-angulos--texto{ background:none; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; gap:2px }
.au-angulos--texto .au-angulo{ padding:0 8px; color:rgba(255,255,255,.6); text-shadow:0 1px 6px rgba(0,0,0,.75) }
.au-angulos--texto .au-angulo::before{ inset:auto; left:50%; bottom:7px; width:4px; height:4px; margin-left:-2px; border-radius:50% }
.au-angulos--texto .au-angulo.on{ color:var(--au-text) }
.au-angulos--texto .au-angulo.on::before{ background:var(--au-text) }

/* ── PORTA · ESQUECI A SENHA (dono 2026-10-01) ─────────────────────────
   Os dois painéis de js/screens/auth-senha.js, na roupa do painel de
   e-mail do login (seta só, título grande, campo em linha, UM botão claro).
   Mockup: mockups/esqueci-a-senha.html. Quem decide o que aparece é
   `data-estado` no painel — cada peça leva a classe `sn-so-<estado>`. */
.auth-sn{
  display:flex; flex-direction:column; width:100%; max-width:460px; box-sizing:border-box;
  min-height:100dvh; margin:0 auto;
  /* 60px = o mesmo topo do painel de e-mail: abaixo do seletor PT | EN, que é
     fixo no canto da porta (a 1ª versão, com 44, encostava o rótulo nele) */
  padding:calc(60px + env(safe-area-inset-top, 0px)) 26px calc(30px + env(safe-area-inset-bottom, 0px));
  font-family:'Sora',system-ui,sans-serif;
}
.auth-sn-topo{
  display:flex; justify-content:space-between; align-items:center; min-height:var(--au-h-tap);
  font:400 var(--au-fs-mono-l) 'Space Mono',monospace; letter-spacing:.2em; color:var(--au-muted); text-transform:uppercase;
}
.auth-sn-miolo{ margin-top:auto }
.auth-sn-tit{ margin:0; font:200 var(--au-fs-hero)/1.02 'Sora',sans-serif; letter-spacing:-.05em; color:var(--au-text) }
.auth-sn-tit--m{ font-size:var(--au-fs-t-xxl) }
.auth-sn-txt{ margin:14px 0 0; font:300 var(--au-fs-m)/1.55 'Sora',sans-serif; color:var(--au-muted) }
.auth-sn-txt b{ font-weight:400; color:var(--au-text-soft); overflow-wrap:anywhere }
.auth-sn-form{ display:flex; flex-direction:column; margin-top:28px }
.auth-sn-form .au-btn{ margin-top:24px }
.auth-sn-rot{
  display:flex; flex-direction:column; gap:2px;
  font:400 var(--au-fs-mono-xs) 'Space Mono',monospace; letter-spacing:.26em; color:var(--au-gold-dim); text-transform:uppercase;
}
.auth-sn-linha{ display:flex; align-items:center; gap:4px }
.auth-sn-linha .au-input{ flex:1; min-width:0 }
.auth-sn-olho{
  flex:none; width:var(--au-h-tap); height:var(--au-h-tap); margin-right:-10px;
  display:flex; align-items:center; justify-content:center;
  background:none; border:none; cursor:pointer; color:var(--au-muted);
  transition:transform var(--au-dur-press) var(--au-ease);
}
.auth-sn-olho[aria-pressed="true"]{ color:var(--au-text-soft) }
.auth-sn-olho:active{ transform:scale(.92) }
.auth-sn-regra{ display:flex; align-items:center; gap:8px; margin:10px 0 0; font:300 var(--au-fs-xs) 'Sora',sans-serif; color:var(--au-faint) }
.auth-sn-regra.ok{ color:var(--au-green) }
.auth-sn-regra-i{
  width:16px; height:16px; border-radius:50%; border:1px solid currentColor;
  display:inline-flex; align-items:center; justify-content:center; font:400 var(--au-fs-mono-xs) 'Space Mono',monospace;
}
.auth-sn-erro{ margin:10px 0 0; font:300 var(--au-fs-s)/1.45 'Sora',sans-serif; color:var(--au-orange) }
.auth-sn-link{
  align-self:center; display:flex; align-items:center; justify-content:center;
  min-height:var(--au-h-tap); padding:10px 8px; margin-top:8px;
  background:none; border:none; cursor:pointer; font:400 var(--au-fs-s) 'Sora',sans-serif; color:var(--au-muted);
}
.auth-sn-link:disabled{ cursor:default; color:var(--au-faint) }
.auth-sn-icone{
  width:56px; height:56px; border-radius:50%; border:1px solid rgba(255,255,255,.14);
  display:flex; align-items:center; justify-content:center; color:var(--au-text-soft); margin-bottom:22px;
}
.auth-sn-icone--verde{ border-color:rgba(95,168,122,.45); color:var(--au-green) }
.auth-sn-icone--cobre{ border-color:rgba(217,154,108,.45); color:var(--au-orange) }
.auth-sn-remet{
  border:1px solid var(--au-line); border-radius:14px; padding:14px 16px;
  font:300 var(--au-fs-xs)/1.5 'Sora',sans-serif; color:var(--au-muted); overflow-wrap:anywhere;
}
.auth-sn-remet .au-k{ display:block; margin-bottom:4px }
.auth-sn-remet b{ font-weight:400; color:var(--au-text-soft) }
.auth-sn-centro{
  margin:auto 0; display:flex; flex-direction:column; align-items:center; text-align:center; gap:16px;
  font:300 var(--au-fs-m) 'Sora',sans-serif; color:var(--au-muted);
}
.auth-sn-centro .auth-sn-icone{ margin-bottom:0 }
.auth-sn-entrando{ display:inline-flex; align-items:center; gap:10px }
.auth-sn-anel-p{ width:18px; height:18px }
/* os estados: cada peça só existe no estado dela */
.auth-sn .sn-so-pedir, .auth-sn .sn-so-enviado, .auth-sn .sn-so-conferindo,
.auth-sn .sn-so-form, .auth-sn .sn-so-pronto, .auth-sn .sn-so-vencido{ display:none }
.auth-sn[data-estado="pedir"] .sn-so-pedir,
.auth-sn[data-estado="enviado"] .sn-so-enviado,
.auth-sn[data-estado="conferindo"] .sn-so-conferindo,
.auth-sn[data-estado="form"] .sn-so-form,
.auth-sn[data-estado="pronto"] .sn-so-pronto,
.auth-sn[data-estado="vencido"] .sn-so-vencido{ display:flex; flex-direction:column }
.auth-sn[data-estado] .auth-sn-link.sn-so-pedir{ flex-direction:row }
@media (prefers-reduced-motion: reduce){ .auth-sn-olho:active{ transform:none } }

/* =======================================================================
   O ENQUADRAMENTO AUTOMÁTICO (dono 04/10) — ver js/core/enquadramento.js.
   `.au-enq-moldura` é o quadro que recorta; a mídia dentro dela leva a
   posição calculada (inline, porque é conta). [05/10] As laterais
   desfocadas (`.au-enq-fundo`) morreram: o vídeo nunca afasta.
   ==================================================================== */
.au-enq-moldura{ position:relative; overflow:hidden }

/* ── "GET A BETTER PRICE" [dono 05/10/2026] ─────────────────────────────
   A linha que leva aos planos antes de pagar a sessão avulsa. Mora aqui
   porque aparece em duas telas (o lembrete e a confirmação "Book and
   pay") — regra 11. `--colada` encosta embaixo do item do £55 (o item
   perde os cantos de baixo com `.au-melhor-acima`). */
.au-melhor{ display:flex; align-items:center; gap:10px; width:100%; min-height:56px; margin:12px 0 0;
  padding:9px 16px; border:1px solid var(--au-line); border-radius:14px; background:rgba(255,255,255,.02);
  color:inherit; font:inherit; text-align:left; cursor:pointer; transition:transform 120ms cubic-bezier(.22,1,.36,1) }
.au-melhor--colada{ margin-top:-1px; border-top-color:var(--au-line-soft); border-radius:0 0 14px 14px }
.au-melhor-acima{ border-bottom-left-radius:0 !important; border-bottom-right-radius:0 !important }
.au-melhor-txt{ flex:1; min-width:0 }
.au-melhor-t{ display:block; font:400 var(--au-fs-m) 'Sora',sans-serif; color:var(--au-text) }
.au-melhor-s{ display:block; font:300 var(--au-fs-xs) 'Sora',sans-serif; color:var(--au-muted); margin-top:1px }
.au-melhor-l{ flex:none; font:400 var(--au-fs-mono) 'Space Mono',monospace; letter-spacing:.18em; text-transform:uppercase; color:var(--au-gold) }
.au-melhor:active{ transform:scale(.98) }

/* ── O TREINO DIÁRIO NA HOME [dono 05/10/2026, "implemente A"] ──────────
   A faixa acima do baralho (mockups/treinos-diarios.html, tela 2 · A): um
   botão sozinho, vale em dia de treino e de descanso; feito, some até
   amanhã. Fonte: js/screens/home-diarios.js. */
.au-diario{ display:flex; align-items:center; gap:12px; width:100%; min-height:56px; margin:10px 0 0;
  padding:10px 14px; border:1px solid var(--au-line); border-radius:14px; background:rgba(255,255,255,.03);
  color:inherit; font:inherit; text-align:left; cursor:pointer }
.au-diario + .au-diario{ margin-top:8px }
.au-diario-txt{ flex:1; min-width:0 }
.au-diario-k{ display:block; font:400 var(--au-fs-mono-xs) 'Space Mono',monospace; letter-spacing:.16em; text-transform:uppercase; color:var(--au-gold-kicker) }
.au-diario-t{ display:block; font:400 var(--au-fs-m) 'Sora',sans-serif; color:var(--au-text); margin-top:2px; overflow-wrap:anywhere }
.au-diario-s{ display:block; font:300 var(--au-fs-xs) 'Sora',sans-serif; color:var(--au-muted); margin-top:2px }
.au-diario-seta{ flex:none; color:var(--au-muted) }

/* ── A FAIXA DO BLOCO NA HOME (dono 08/10, mockups/semana-a-vista-e-mesociclo.html)
   ‹ BASE · SEMANA 2 DE 4 › e um tracinho por semana do bloco: verde = feita,
   ouro = a semana à vista (o "agora"), contorno = a semana que se está
   olhando. Sem fill. As setas são alvos de 44. */
.hb-faixa{ display:flex; align-items:center; gap:4px; margin:18px -10px 0 }
.hb-seta{ width:var(--au-h-tap); height:var(--au-h-tap); flex:none; border-radius:50%; border:none; background:none; cursor:pointer; color:var(--au-text-soft); font:300 var(--au-fs-t-s) 'Sora',sans-serif; display:flex; align-items:center; justify-content:center; padding:0; transition:transform 120ms cubic-bezier(.22,1,.36,1) }
.hb-seta:active{ transform:scale(.92) }
/* na borda (primeira/última semana que existe) a seta SOME, guardando o
   lugar: cinza a 18% reprovava o contraste AA, e seta sem destino não é
   informação — o tracinho já diz onde se está */
.hb-seta:disabled{ visibility:hidden }
.hb-meio{ flex:1; min-width:0; text-align:center }
.hb-t{ font:400 var(--au-fs-mono) 'Space Mono',monospace; letter-spacing:.2em; text-transform:uppercase; color:var(--au-text-soft); overflow-wrap:anywhere }
.hb-t em{ font-style:normal; color:var(--au-muted) }
.hb-barras{ display:flex; gap:6px; justify-content:center; margin-top:9px }
.hb-barras i{ flex:0 1 34px; height:3px; border-radius:2px; background:rgba(255,255,255,.14) }
.hb-barras i.hb-feita{ background:var(--au-green) }
.hb-barras i.hb-agora{ background:var(--au-gold) }
.hb-barras i.hb-vendo{ outline:1px solid rgba(255,255,255,.55); outline-offset:3px }
.hb-nota{ margin-top:14px; text-align:center; font:400 var(--au-fs-s) 'Sora',sans-serif; line-height:1.5; color:var(--au-muted) }
.hb-acao{ display:flex; justify-content:center }
.hb-vazia{ border:1px solid rgba(255,255,255,.09); border-radius:16px; padding:28px 22px; text-align:center; margin-top:22px }
.hb-vazia-t{ font:300 var(--au-fs-t-s) 'Sora',sans-serif; line-height:1.4; color:var(--au-text) }
.hb-vazia-s{ font:400 var(--au-fs-s) 'Sora',sans-serif; line-height:1.5; color:var(--au-muted); margin-top:8px }

/* ── [dono 08/10] O RECIBO DE ENDURANCE: CARGA (min × esforço) e CORAÇÃO ·
   TRIMP (Edwards), receipt-endurance.js. P&B; zonas por luminância (Z1 escuro
   → Z5 branco), a mesma régua das zonas do executor. ── */
.rc-ccs { margin-top: 20px; }
.rc-cc { border-top: 1px solid var(--au-line-soft); padding-top: 16px; margin-top: 16px; }
.rc-cc:first-child { margin-top: 0; }
.rc-cc-num { font: 300 var(--au-fs-t) 'Sora', sans-serif; color: var(--au-text); }
.rc-cc-un { font: 400 var(--au-fs-mono-xs) 'Space Mono', monospace; letter-spacing: .12em; color: var(--au-faint); margin-left: 4px; }
.rc-cc-conta { font: 300 var(--au-fs-sm)/1.5 'Sora', sans-serif; color: var(--au-muted); margin-top: 4px; }
.rc-zonas { margin-top: 10px; }
.rc-z { display: grid; grid-template-columns: 30px minmax(0, 1fr) 56px 26px; gap: 10px; align-items: center; min-height: 28px; font: 400 var(--au-fs-mono-xs) 'Space Mono', monospace; color: var(--au-muted); }
.rc-z b { font-weight: 400; color: var(--au-text-soft); text-align: right; }
.rc-z-t { height: 8px; border-radius: 4px; background: var(--au-line-soft); overflow: hidden; }
.rc-z-t i { display: block; height: 100%; }
.rc-z-p { text-align: right; color: var(--au-faint); }
/* [dono 10/10] O ESFORÇO QUE FALTOU (receipt-esforco.js): a linha do recibo
   do treino que chegou pelo Strava sem esforço, e a folha com a escala. */
.rc-esforco { display: flex; align-items: center; justify-content: space-between; gap: 14px; border-top: 1px solid var(--au-line-soft); padding-top: 16px; margin-top: 20px; }
.rc-esforco-txt { font: 300 var(--au-fs-sm)/1.5 'Sora', sans-serif; color: var(--au-muted); margin-top: 4px; }
.rc-esforco-btn { flex: none; width: auto; padding: 0 20px; }
.rc-esforco-titulo { font: 100 var(--au-fs-t)/1.1 'Sora', sans-serif; letter-spacing: -.02em; color: var(--au-text); margin-top: 10px; }
.rc-esforco-pergunta { font: 400 var(--au-fs-xl) 'Sora', sans-serif; color: var(--au-muted); margin: 6px 0 22px; }
/* AS 5 ZONAS DE FC POR LUMINÂNCIA — uma classe só pra todo lugar que pinta
   tempo em zona (o recibo e a aba LOAD do coach): .au-fcz1 … .au-fcz5 */
.au-fcz1 { background: rgba(255,255,255,.18); } .au-fcz2 { background: rgba(255,255,255,.36); } .au-fcz3 { background: rgba(255,255,255,.56); }
.au-fcz4 { background: rgba(255,255,255,.78); } .au-fcz5 { background: var(--au-text); }