/* MyBody 2.0 — base estrutural. Cores/efeitos vivem SÓ em aurum.css. */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  background: var(--au-bg);
  color: var(--au-text);
  font-family: "Sora", system-ui, sans-serif;
  font-weight: 300;
}
.hidden { display: none !important; }

.screen {
  min-height: 100dvh;
  max-width: 460px;
  margin: 0 auto;
  /* o fim reserva a tab bar (--au-h-nav) + 36px de respiro */
  padding: calc(env(safe-area-inset-top, 0px) + 18px) 26px calc(var(--au-h-nav) + 36px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
}
/* [fix 2026-08-11] treino minimizado: a barra do treino (fixa, ~46px acima
   da nav) cobria os CTAs de pé de tela — com ela viva, o fim do scroll
   desce o equivalente. */
/* O lado do COACH tem barra própria (#coachNav, menor e no visual pré-v2):
   fica no reserva de antes, senão a barra maior do atleta abriria um vão
   morto no pé das telas dele. */
#coachTodayView, #coachAthletesView, #editorView, #libraryView, #coachChatView {
  padding-bottom: calc(104px + env(safe-area-inset-bottom));
}
/* [dono 07/10] A CAIXA DE MENSAGENS DO COACH É TELA: a altura é a da janela
   (não cresce com a conversa) e quem rola é a lista/as bolhas, com o campo
   de escrever sempre à vista no pé. */
#coachChatView { height: 100dvh; min-height: 0; box-sizing: border-box; }
#coachChatView .coach-chat-tela { flex: 1; min-height: 0; display: flex; flex-direction: column; width: 100%; max-width: 760px; margin: 0 auto; }
/* [07/10 · "the app keeps jamming", lote 3] O CHAT DO ATLETA TAMBÉM: sem
   altura, a página crescia com a conversa (40 mensagens = 5123px), a lista
   nunca rolava sozinha e a aba abria na mensagem MAIS ANTIGA — a última e
   o campo de escrever ficavam 4000px abaixo. Agora a tela tem a altura da
   janela (o padding já reserva a barra de abas) e quem rola são as bolhas,
   que abrem no fim. */
#chatView { height: 100dvh; min-height: 0; box-sizing: border-box; }
#chatView #chatScroll { min-height: 0; }
body.fs-docked .screen {
  padding-bottom: calc(var(--au-h-nav) + 90px + env(safe-area-inset-bottom));
}
/* ── [dono 2026-08-14] A RESERVA ALCANÇAVA SÓ `.screen` ───────────────────
   A regra acima nasceu em 11/08 e resolvia a Home. Mas metade do app não é
   `.screen`: as telas EMPURRADAS (Peso, Capacidades, foco muscular, Goal)
   são `.pushed-screen` — sobreposições `position:fixed` — e a Conta é
   camada. Nelas o CTA nascia debaixo da barra do treino minimizado, e o
   sintoma era o pior possível: o botão APARECE e o toque não funciona.

   Medido com a barra em 710→760: "Registrar peso" 689–744 (clique morto) ·
   "Rodar bateria de teste" 690–744 (clique morto) · "Trocar senha" 715–767
   (clique morto). Home, Histórico, Agenda, Goal, Mobilidade, Fotos, recibo
   e prévia estavam sãos.

   O `!important` é necessário e não é preguiça: as telas empurradas
   declaram o padding INLINE (elas calculam o próprio recuo a partir do
   token da nav), e estilo inline vence folha. É o mesmo motivo do
   `.pushed-screen[style*="padding"]` logo acima nesta folha.

   A conta é a mesma de sempre: altura da nav + a barra (51) + respiro. */
body.fs-docked .pushed-screen,
body.fs-docked .pushed-screen[style*="padding"] {
  padding-bottom: calc(var(--au-h-nav) + 90px + env(safe-area-inset-bottom)) !important;
}
/* CAMADAS (a Conta e quem vier depois): elas não são `.screen` nem
   `.pushed-screen` — abrem em `#modalRoot`, num container sem classe
   nenhuma. Em vez de um seletor frágil por posição no DOM, a camada que
   precisa reservar a faixa da barra se declara com `.au-reserva-dock`.
   Medido antes: "Trocar senha" nascia em 715–767, com a barra em 710–760 —
   visível e com o clique morto. */
body.fs-docked .au-reserva-dock {
  padding-bottom: calc(var(--au-h-nav) + 90px + env(safe-area-inset-bottom)) !important;
}

/* ── [1a Barra mono · aprovada 2026-08-10] tab bar do ATLETA: sólida
   (superfície + linha), itens de TEXTO por luminância, ativo = traço 1px
   rente ao topo do próprio item (sobrepõe a linha da barra). Trocar de
   território NÃO anima (100+×/dia) — único feedback é o press. Ouro nunca
   aparece aqui. A nav do coach (#coachNav) segue no visual pré-v2. ── */
#bottomNav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: stretch;
  /* [dono 2026-08-12] barra maior de novo (variante B do mockup
     mockups/menu-2x.html): 68 → 104px e rótulo 12 → 20px. O 2× literal do
     RÓTULO (24px) não cabe — "AGENDA" mediria 104px numa aba de 86px.
     [dono 2026-08-14 · opção A do mockup tres-ajustes] 104 → 84px e o
     rótulo 20 → 15px: ficou grande demais (12% da tela). Não é volta ao
     original — 84/15 segue acima do iOS (~49pt/~10pt). A altura mora no
     token --au-h-nav (aurum.css), pra nenhuma tela ficar pra trás. */
  height: calc(var(--au-h-nav) + env(safe-area-inset-bottom, 0px));
  padding: 0 0 env(safe-area-inset-bottom, 0px);
  background: var(--au-surface);
  border-top: 1px solid var(--au-line);
  /* acima das telas empurradas (.pushed-screen 210) — antes a aba GOAL
     cobria a propria barra de abas; abaixo de qualquer folha (300+). */
  z-index: 220;
}
.nav-btn {
  background: none; border: none; cursor: pointer;
  font: 400 .75rem "Space Mono", monospace;
  letter-spacing: .22em;
  color: var(--au-muted);
  padding: 10px 8px;
  min-height: 44px;
}
.nav-btn.active { color: var(--au-text); }
/* [2026-08-14] A caixa alta da barra do COACH era o texto LITERAL do
   index.html ("HOJE"). Quando os rótulos passaram a vir do i18n (que guarda
   "Hoje"/"Today", como todas as outras chaves do app), a barra ficaria em
   caixa mista. Sobe pro CSS — que já é onde a barra do atleta faz isso.
   Em português o resultado é byte a byte o mesmo de antes. */
#coachNav .nav-btn { text-transform: uppercase; }
/* [17/10] o tablist das quatro abas não é caixa: as abas continuam filhas do layout da <nav> */
#coachNav .coach-side-abas { display: contents; }
#bottomNav .nav-btn {
  flex: 1;
  min-width: 0;
  font-size: var(--au-fs-m); /* 15 — foi 12, depois 20 */
  /* espaçamento cai de .12 pra .06em: é o que faz "AGENDA" caber nas 4 abas
     em 375px sem virar rolagem horizontal. */
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 0 4px;
  border-top: 1px solid transparent;
  margin-top: -1px;
}
#bottomNav .nav-btn.active { border-top-color: var(--au-text); }
/* [dono 07/10] recado do coach não lido: ponto ouro na aba CHAT (era o
   ponto da faixa do coach na Home, que saiu). Só pintura — o aria-label diz. */
#bottomNav .nav-btn.tem-nao-lida { position: relative; }
#bottomNav .nav-btn.tem-nao-lida::after {
  content: ""; position: absolute; top: 10px; right: calc(50% - 30px);
  width: 7px; height: 7px; border-radius: 50%; background: var(--au-gold);
}
/* telas estreitas (Android de 360, e o teste de 320px): desce um degrau da
   escala. Nunca sai da régua Sora/Space Mono.
   [dono 2026-08-14] Com o rótulo em 15px esta regra tinha se INVERTIDO —
   mandava 17px, ou seja AUMENTAVA a fonte justamente onde falta espaço.
   Passou pra 13, o degrau abaixo do novo padrão. */
@media (max-width: 374px) {
  #bottomNav .nav-btn { font-size: var(--au-fs-xs); /* 13 */ }
}
/* press e reduced-motion vivem na regra global de aurum.css */

/* ── [APPLE VERSION · tela 05] baralho da Home: scroll-snap nativo
   (gesto 1:1 do sistema), sem barra visível; press = feedback 120ms. ── */
.home-deck { scrollbar-width: none; }
.home-deck::-webkit-scrollbar { display: none; }
.home-card { transition: transform var(--au-dur-press) var(--au-ease); }

/* ── Modal (recibo e folhas) — estrutura App2; cores via aurum ─────────
   [apple-design · §7 caminho simétrico] A folha ENTRA subindo e SAI pelo
   MESMO caminho. Antes ela aparecia e sumia por troca de innerHTML (0ms,
   sem caminho nenhum) — num app cuja identidade é luz e halo, isso lia
   como erro de render. Curva de gaveta do projeto, 320ms na entrada e
   280ms na saída (a saída é resposta do sistema: snap). ── */
@keyframes auSheetIn { from { transform: translateY(100%) } to { transform: translateY(0) } }
@keyframes auSheetOut { from { transform: translateY(0) } to { transform: translateY(100%) } }
@keyframes auFadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes auFadeOut { from { opacity: 1 } to { opacity: 0 } }

.modal-backdrop {
  /* acima da tab bar (220): folha sempre cobre a navegacao */
  position: fixed; inset: 0; z-index: 300;
  background: rgba(5, 5, 4, .72);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: flex-end; justify-content: center;
  animation: auFadeIn 200ms linear both;
}
.modal {
  background: var(--au-surface);
  border: 1px solid var(--au-line);
  border-radius: 22px 22px 0 0;
  width: 100%; max-width: 460px;
  max-height: 94dvh;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 16px 22px calc(28px + env(safe-area-inset-bottom));
  box-sizing: border-box;
  animation: auSheetIn var(--au-dur-sheet) var(--au-ease-sheet) both;
  will-change: transform;
}
.modal-backdrop.closing { animation: auFadeOut 200ms linear both }
/* [01/10] A JANELA DO VÍDEO DA BIBLIOTECA não sobe de baixo: ela cresce do
   quadro do painel e volta pra ele (js/core/video-transicao.js, a mesma do
   executor e do montador). Sem isto a folha subia de novo a cada repintura. */
.video-backdrop, .video-backdrop .modal { animation: none }
.modal-backdrop.closing .modal { animation: auSheetOut 280ms var(--au-ease-sheet) both }
@media (prefers-reduced-motion: reduce) {
  .modal-backdrop.closing, .modal-backdrop.closing .modal {
    animation: auFadeOut 160ms linear both !important;
  }
}

/* ── [P9/P10] Camadas do PLAYER: a prévia, o mapa da sessão e a barra
   minimizada apareciam e sumiam por corte seco, enquanto o overlay de
   vídeo — irmão deles, no mesmo arquivo — já entrava e saía animado.
   Mesma régua das folhas: entra e sai pelo MESMO caminho.
   · camada de conteúdo (prévia/mapa): opacidade, 240ms;
   · player cheio ⇄ barra acoplada: deslize vertical, 320ms de gaveta.

   [SEM ZOOM · dono 2026-08-18] A camada nascia em `scale(.96)` e crescia.
   O dono mandou tirar todo efeito de zoom, principalmente nos caminhos que
   se abrem de DENTRO de uma tela — que é exatamente o que esta classe
   anima. Ficou o fade: entra e sai pelo mesmo caminho, sem escala.
   `auLayerIn`/`auLayerOut` MORRERAM (regra 1) — sem a escala eles eram
   `auFadeIn`/`auFadeOut` com outro nome, e nome duplicado é o começo de
   duas verdades. As linhas de reduced-motion da camada saíram junto: elas
   existiam pra CORTAR o deslocamento, e não há mais deslocamento pra
   cortar. As da `.au-sheet-up` ficam — a folha ainda desliza. ── */
.au-layer { animation: auFadeIn 240ms var(--au-ease) both }
.au-layer.closing { animation: auFadeOut 200ms var(--au-ease) both }
.au-sheet-up { animation: auSheetIn var(--au-dur-sheet) var(--au-ease-sheet) both }
.au-sheet-up.closing { animation: auSheetOut 280ms var(--au-ease-sheet) both }
@media (prefers-reduced-motion: reduce) {
  .au-sheet-up { animation: auFadeIn 200ms linear both }
  .au-sheet-up.closing { animation: auFadeOut 160ms linear both }
}
.modal-close-x {
  min-width: 44px; min-height: 44px;
  background: none; border: none; cursor: pointer;
  color: var(--au-muted); font-size: 15px;
  float: right;
}
.modal-actions { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.workout-receipt-danger-btn, .workout-receipt-link-btn, .workout-edit-toggle-btn, .btn-secondary {
  background: none; border: 1px solid rgba(255, 255, 255, .14);
  color: var(--au-text); border-radius: 100px;
  padding: 11px 16px; min-height: 44px;
  font: 400 .875rem "Sora"; cursor: pointer;
}
.workout-receipt-danger-btn { color: var(--au-orange); border-color: rgba(217, 154, 108, .45); }
.workout-edited-badge {
  font: 400 .625rem "Space Mono", monospace; letter-spacing: .14em;
  color: var(--au-gold-dim); text-transform: uppercase;
}
.workout-receipt-meta-row { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.badge.zone { font: 400 .6875rem "Space Mono", monospace; color: var(--au-muted); }
.workout-blocks { list-style: none; font: 400 .9375rem/1.8 "Sora"; color: var(--au-text-soft); }
.workout-section-title { font: 400 .6875rem "Space Mono", monospace; letter-spacing: .18em; color: var(--au-gold-dim); text-transform: uppercase; }
.empty-day { color: var(--au-muted); font: 400 .875rem "Sora"; }

.icon-btn { background: none; border: 1px solid rgba(255, 255, 255, .14); border-radius: 50%; min-width: 44px; min-height: 44px; color: var(--au-text); cursor: pointer; }

/* ── [quebra·acessibilidade] Alvos de toque ≥44pt (regra 12) nos controles
   transplantados do manequim/hub que vinham menores do App 1. Só sizing —
   cor/efeito seguem no manikin.css/aurum.css. */
.hub-mode-seg button { min-height: 44px; }
.hub-seg-pill { min-height: 44px; }
.hub-flip-btn { min-height: 44px; }
.attn-tab { min-height: 44px; }

/* [auditoria] Os botoes PT/EN da Conta so tinham min-height e NENHUMA outra
   regra em todo o css/ — renderizavam como <button> nativo (cinza claro do
   sistema) sobre preto, com menos de 44px de largura. Agora seguem o
   segmento do design system: pilula neutra, ativo por luminancia. */
.account-lang-toggle { display: flex; gap: 6px; flex: none; }
.account-lang-btn {
  min-height: 44px; min-width: 62px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 18px; border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: none; color: var(--au-muted);
  font: 400 .75rem "Space Mono", monospace; letter-spacing: .2em;
  text-transform: uppercase; cursor: pointer;
}
.account-lang-btn.active { border-color: rgba(255, 255, 255, .28); color: var(--au-text); }

/* ── [quebra·agenda coach] A agenda transplantada traz seu PRÓPRIO
   .agenda-wrap (padding 18px + max-width:640px). Dentro do .screen (que
   já tem padding 26px), isso dobrava o padding e o wrap estourava os
   375px do celular — empurrando a barra de abas do coach pra fora da
   tela. Fix: na agenda, o .screen não re-aplica padding horizontal (o
   wrap cuida disso) e o wrap fica capado em 100%. */
#agendaView { padding-left: 0; padding-right: 0; }
.agenda-wrap { max-width: 100%; }

/* ── [FICHA DO ALUNO · F1] ────────────────────────────────────────────
   Mockup aprovado: mockups/ficha-do-aluno.html.

   Vive aqui e NÃO em estilo inline: o DESIGN-CONTRATO proíbe declarar
   fonte ou altura de botão dentro de uma tela, e o coach-athletes.js é um
   transplante cheio desse vício antigo — o markup NOVO não pode piorá-lo.
   Tamanhos saem dos tokens de escala; nenhuma cor crua. */
.ficha-bloco { margin-top: 18px; }
.ficha-bloco .au-k2 { margin-bottom: 4px; }

.ficha-linha {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; padding: 9px 0;
  border-bottom: 1px solid var(--au-line);
}
.ficha-rot {
  flex: none;
  font-size: var(--au-fs-xs); font-weight: 300;
  color: var(--au-muted);
}
/* O VALOR é o dado — fica na cor cheia do texto e pode quebrar em duas
   linhas (lista de músculos pedidos é longa); o rótulo nunca encolhe. */
.ficha-val {
  flex: 1; min-width: 0; text-align: right;
  font-size: var(--au-fs-m); font-weight: 300;
  color: var(--au-text); overflow-wrap: anywhere;
}
/* [dono 15/10] O DETALHE DE CADA "SIM" DO PAR-Q, logo abaixo da linha do
   sim (que perde a borda: os dois são UMA resposta). Texto da pessoa, na cor
   cheia; sem detalhe, o aviso "pergunte" sai em cobre — atenção, régua AURUM. */
.ficha-linha-sim { border-bottom: none; padding-bottom: 2px; }
.ficha-parq-det {
  padding: 0 0 10px; border-bottom: 1px solid var(--au-line);
  font-size: var(--au-fs-s); font-weight: 300; line-height: 1.5;
  color: var(--au-text); overflow-wrap: anywhere;
}
.ficha-parq-falta { color: var(--au-orange); }
.ficha-vazia {
  font-size: var(--au-fs-xs); font-weight: 300;
  color: var(--au-faint); line-height: 1.5;
}

/* ── [dono 2026-08-20] AS SESSÕES PRESENCIAIS NA FICHA ────────────────
   Uma linha = UM botão (nada aninhado) que leva pra aba AGENDA no dia
   certo — o mesmo gesto que o bloco do HOJE já faz. Alvo de 44 pela
   regra 7; nenhuma cor crua, nenhum tamanho fora da escala. */
.ficha-sess {
  display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: 44px; padding: 4px 2px; text-align: left;
  background: none; border: none; border-bottom: 1px solid var(--au-line);
  cursor: pointer;
}
.ficha-sess .fs-hora {
  flex: none; font-family: 'Space Mono', monospace; font-size: var(--au-fs-m);
  color: var(--au-text); font-variant-numeric: tabular-nums;
}
.ficha-sess .fs-dia {
  flex: 1; min-width: 0; font-size: var(--au-fs-xs); font-weight: 300;
  color: var(--au-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ficha-sess .fs-arw { flex: none; color: var(--au-gold); font-size: var(--au-fs-m); }

/* ── [FICHA · F2] O CADERNO DO COACH ──────────────────────────────────
   Anotação privada sobre o aluno. Moldura TRACEJADA + cadeado + a frase
   "só você vê" — a MESMA linguagem que as fotos de progresso já usam do
   lado do atleta (photos.js), em vez de inventar texto novo pro mesmo
   conceito.

   O tracejado usa `--au-seal-dashed`, o MESMO token do selo do método.
   Cheguei a escrever o valor à mão (o mockup pede .45 contra os .5 do
   token) e o `tests/selo-usa-o-token.js` reprovou — com razão: 0,05 de
   opacidade ninguém enxerga, e mais um tracejado dourado solto no CSS é
   como a marca do método passou a pesar diferente em 9 lugares antes.
   Abrir exceção no guarda pra uma diferença invisível apodrece o guarda.
   Aqui o papel é outro (moldura de bloco, não assinatura), mas a
   gramática visual é a mesma: "isto não é o normal da tela". */
.coach-nota {
  margin-top: 14px; padding: 12px 13px;
  border: var(--au-seal-dashed); border-radius: 12px;
  background: rgba(201, 162, 74, .04);
}
.coach-nota-selo {
  display: flex; align-items: center; gap: 6px;
  font: 400 var(--au-fs-mono-xs) "Space Mono", monospace;
  letter-spacing: .16em; text-transform: uppercase; color: var(--au-gold);
}
.coach-nota-texto {
  margin: 8px 0 0;
  font-size: var(--au-fs-xs); font-weight: 400; line-height: 1.5;
  color: var(--au-text-soft); white-space: pre-wrap; overflow-wrap: anywhere;
}
.coach-nota-vazia { color: var(--au-faint); font-style: italic; }
.coach-nota-campo {
  width: 100%; margin: 8px 0 0; background: none; border: none; resize: none;
  color: var(--au-text-soft); outline: none;
  font-size: var(--au-fs-xl); font-weight: 400; line-height: 1.5;
  font-family: "Sora", sans-serif;
}

/* ── DESLIZAR PRA REMOVER O ROUND [dono 2026-09-06] ────────────────────
   O "Remover" fica ATRÁS do cartão, e o cartão desliza por cima dele. Só
   `transform` anima (régua do AURUM), e a moldura recorta — sem isso o
   botão apareceria pela lateral antes de o dedo chegar nele.

   COBRE, e não vermelho: é a cor de ATENÇÃO desta casa (`--au-orange`), a
   mesma do "Cancelar esta sessão" e do aviso de round pulado. Vermelho
   seria uma cor nova pra um gesto que apaga um round em branco. */
.fs-swipe{ position:relative; overflow:hidden; border-radius:12px }
.fs-swipe-card{
  position:relative; z-index:1;
  transform:translateX(0);
  transition:transform 220ms var(--au-ease-sheet);
  touch-action:pan-y;   /* a rolagem vertical continua da tela */
}
.fs-swipe-card.aberto{ transform:translateX(calc(var(--fs-swipe-w) * -1)) }
.fs-swipe-card.arrastando{ transition:none }

/* ── [dono 2026-09-08] A FAIXA CRESCE COM O DEDO ──────────────────────
   Ele viu no iPhone: "quando deslizado para a esquerda, surge um botão de
   apagar série, mas esse surgimento deve ser melhor do que tem hoje, pois
   o botão já fica todo preenchido, vazando e dando aparência pouco
   profisional".

   Estava: um retângulo de largura FIXA (104px) com borda e raio PRÓPRIOS,
   ligado e desligado de uma vez por `visibility` no primeiro milímetro de
   arrasto. Medido no mockup: com o dedo a 12px o botão já estava inteiro
   na tela, e o canto arredondado dele aparecia por cima do canto da linha
   — o "vazando".

   Agora a tinta ocupa EXATAMENTE o que foi revelado (o JS escreve a
   largura a cada `pointermove`), sem raio próprio: quem arredonda é a
   moldura `.fs-swipe`, que já recorta. Não há como vazar, porque não há
   nada além da faixa. O conteúdo (lixeira + palavra) entra por opacidade
   a partir de ~45% do gesto — ver `fsLigarDeslizeDoRound`.

   O ESTADO ASSENTADO VEM DAQUI, não de uma animação no nó do gesto: o
   `fim()` do arrasto re-renderiza, e o nó em que o gesto escrevia é
   jogado fora. A faixa aberta NASCE com a largura cheia, como o cartão já
   nascia com o `translateX` do `.aberto`. */
.fs-swipe{ --fs-swipe-w:104px }
/* [dono 2026-10-03] A barra do topo do executor (relógio · Terminar) fica
   presa enquanto a lista rola — senão, rolado, o vídeo aberto nasce sem
   relógio na tela. O deslocamento negativo anula o padding de cima da
   coluna (safe-area + 26px), pra ela grudar na borda e não deixar a lista
   aparecendo por cima dela; o padding devolve o respiro. */
.fs-topo-preso{
  position:sticky;
  top:calc(-1 * (env(safe-area-inset-top, 0px) + 26px));
  z-index:3;
  margin:calc(-1 * (env(safe-area-inset-top, 0px) + 26px)) -28px 0;
  padding:calc(env(safe-area-inset-top, 0px) + 26px) 28px 8px;
  background:var(--au-surface);
}

/* [dono 16/10] o relógio e o "ROUND 4 / 15" empilhados, na altura de toque
   da barra (44) — a barra não fica mais larga */
.fs-relogio-pilha{ display:inline-flex; flex-direction:column; justify-content:center; min-height:44px; min-width:0; line-height:1.25; }
/* a seta de voltar NUNCA cede largura (o fiscal pegou 20×44 em 16/10 quando o
   contador entrou): quem cede é a pilha do relógio */
.fs-topo-preso #fsCtlMin{ flex:none; }
.fs-round-conta{ padding:0 4px; overflow:hidden; text-overflow:ellipsis; font:400 var(--au-fs-mono-s) 'Space Mono',monospace; letter-spacing:.08em; color:var(--au-muted); font-variant-numeric:tabular-nums; }
.fs-round-conta:empty{ display:none; }

.fs-swipe-del{
  position:absolute; right:0; top:0; bottom:0; width:0;
  display:flex; align-items:center; justify-content:center;
  border:none; border-radius:0;
  /* a linha que separa a faixa do cartão é SOMBRA INTERNA, não `border`:
     com `width:0` uma borda de 1px ainda ocuparia 1px de caixa, e "fechada
     não tem um pixel" é a régua que substituiu o `visibility` (08/09). */
  box-shadow:inset 1px 0 0 rgba(217,154,108,.28);
  background:rgba(217,154,108,.16); color:var(--au-orange);
  font:400 var(--au-fs-xs) 'Sora',sans-serif; cursor:pointer; padding:0;
  overflow:hidden; white-space:nowrap;
}
.fs-swipe:has(.fs-swipe-card.aberto) .fs-swipe-del{ width:var(--fs-swipe-w) }
.fs-swipe-del-in{
  display:flex; align-items:center; gap:7px;
  opacity:0; transform:scale(.86);
  transition:opacity 90ms linear, transform 160ms var(--au-ease);
}
.fs-swipe:has(.fs-swipe-card.aberto) .fs-swipe-del-in{ opacity:1; transform:none }
.fs-swipe-del:active .fs-swipe-del-in{ transform:scale(.97) }
/* [06/09, achado na FOTO da alternativa E] O "REMOVER" VAZAVA ATRAVÉS DO
   CARTÃO FECHADO — o cartão tem 3% de branco de fundo (translúcido) e o
   botão cobre morava atrás dele, a 104px de largura, lido por cima dos
   números sem ninguém ter deslizado nada.
   [08/09] QUEM GARANTE ISSO AGORA É A LARGURA ZERO: fechada, a faixa não
   tem um pixel. Foi o que liberou a linha a perder o fundo opaco na peça
   das caixas — sem a faixa nova, o "Remover" voltaria a vazar. */
/* ── [dono 2026-10-06] DIREITA ACRESCENTA: a faixa "+ Round" ───────────
   O espelho do "Remover", do lado esquerdo e com a mesma régua de 08/09:
   largura ZERO fechada (o JS escreve a largura a cada movimento) e a linha
   de separação é sombra interna, nunca borda. Neutra e não cobre — é o
   gesto de ACRESCENTAR, o mesmo tom do botão tracejado "+ round". Acende
   (`.pronta`) quando soltar já acrescenta. */
.fs-swipe-add{
  position:absolute; left:0; top:0; bottom:0; width:0;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; white-space:nowrap; pointer-events:none;
  background:rgba(255,255,255,.05); box-shadow:inset -1px 0 0 rgba(255,255,255,.18);
  color:var(--au-text-soft); font:400 var(--au-fs-xs) 'Sora',sans-serif;
}
.fs-swipe-add.pronta{ background:rgba(255,255,255,.12); color:var(--au-text) }
.fs-swipe-add-in{ opacity:0 }
/* segurar a linha não pode abrir a lupa nem o menu do iOS: o toque longo
   é nosso (régua nas caixas, menu do round fora delas) */
.fs-swipe-card{ -webkit-touch-callout:none }

/* ── [dono 2026-10-06] A RÉGUA: segurar a caixa e arrastar ──────────────
   A caixa cresce de leve ao armar (a única resposta que a web dá no
   iPhone, que não vibra) e a fita aparece por cima dela. A fita é OPACA —
   no mockup, translúcida, deixava os números da linha de baixo aparecerem
   por trás — e só a janela interna esmaece nas pontas. */
.fs-cx.fs-regua-armada{
  transform:scale(1.06);
  background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.35);
}
.fs-regua{
  /* acima do executor, que é uma camada fixa em z-index 4000 — a 1ª foto
     pegou a fita POR BAIXO dele, invisível, com a caixa já mudando */
  position:fixed; z-index:4050; pointer-events:none; overflow:hidden;
  border-radius:12px; background:var(--au-surface-2);
  border:1px solid rgba(255,255,255,.28); box-shadow:0 18px 40px -10px rgba(0,0,0,.8);
  animation:fsReguaEntra 200ms var(--au-ease);
}
@keyframes fsReguaEntra{ from{ opacity:0; transform:scale(.95) } to{ opacity:1; transform:none } }
.fs-regua-janela{
  position:absolute; inset:0; overflow:hidden;
  -webkit-mask-image:linear-gradient(transparent,#000 30%,#000 70%,transparent);
  mask-image:linear-gradient(transparent,#000 30%,#000 70%,transparent);
}
.fs-regua-fita{ will-change:transform }
.fs-regua-v{
  height:36px; display:grid; place-items:center;
  font:300 var(--au-fs-m) 'Sora',sans-serif; color:var(--au-faint);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.fs-regua-v.c{ font-size:var(--au-fs-t-s); color:var(--au-text) }
.fs-regua-marca{
  position:absolute; left:6px; right:6px; top:50%; height:36px; transform:translateY(-50%);
  border-top:1px solid rgba(255,255,255,.14); border-bottom:1px solid rgba(255,255,255,.14);
}

/* ── [dono 2026-10-06] O MENU DO ROUND (segurar o R) ────────────────────
   Os dois gestos da linha em botões de 44px, pra quem não arrasta (regra
   7). Ancorado na linha (`data-fs-rest-anc`), logo abaixo dela. */
.fs-round-menu{
  position:absolute; left:0; top:calc(100% + 4px); z-index:6;
  display:flex; gap:6px; padding:6px; border-radius:14px;
  background:var(--au-surface-2); border:1px solid rgba(255,255,255,.14);
  box-shadow:0 18px 40px -10px rgba(0,0,0,.8);
  animation:fsReguaEntra 200ms var(--au-ease);
}
.fs-round-menu .au-chip{ font-size:var(--au-fs-s) }
.fs-round-menu .au-chip:active{ transform:scale(.97) }
.fs-round-menu-del{ color:var(--au-orange); border-color:rgba(217,154,108,.4) }

/* ── [dono 2026-10-07] O BRILHO DOS GESTOS ─────────────────────────────
   "Adicione um glow em todos os gestos, para dar uma diferenciada." Só
   enquanto o dedo age; a lista parada não muda. A linha (`.fs-swipe`) corta
   o cartão que desliza — sem o corte os números vazariam pro lado. Com uma
   faixa acesa, o corte troca de `overflow` por `clip-path`: corta SÓ o lado
   pra onde o cartão vai e deixa o brilho respirar em volta da faixa. */
.fs-swipe:has(.fs-swipe-add.pronta){ overflow:visible; clip-path:inset(-24px 0 -24px -24px round 12px) }
.fs-swipe:has(.fs-swipe-card.aberto){ overflow:visible; clip-path:inset(-24px -24px -24px 0 round 12px) }
.fs-swipe-add.pronta{ box-shadow:var(--au-glow-gesto); border-radius:12px }
.fs-swipe:has(.fs-swipe-card.aberto) .fs-swipe-del{ box-shadow:var(--au-glow-gesto-cobre); border-radius:12px }
.fs-cx.fs-regua-armada{ box-shadow:var(--au-glow-gesto) }
.fs-regua{ box-shadow:var(--au-glow-gesto), 0 18px 40px -10px rgba(0,0,0,.8) }
.fs-round-menu{ box-shadow:var(--au-glow-gesto), 0 18px 40px -10px rgba(0,0,0,.8) }
.fs-round-menu .fs-round-menu-del{ box-shadow:var(--au-glow-copper) }
[data-fs-rest-anc]:has(.fs-round-menu) .fs-rn{ box-shadow:var(--au-glow-gesto); background:rgba(255,255,255,.1); color:var(--au-text) }

/* ── [dono 2026-10-07] O TUTORIAL DE GESTOS (player-tutorial.js) ───────
   Acima do executor (4000) e da régua (4050). O véu é o anel de sombra do
   foco; a linha acesa é uma CÓPIA da de verdade, com as classes do app. */
#fsTutorialRoot{ position:fixed; inset:0; z-index:4100; -webkit-user-select:none; user-select:none }
#fsTutorialRoot .fst-veu{ position:absolute; inset:0 }
#fsTutorialRoot .fst-foco{
  position:absolute; border-radius:14px; pointer-events:none;
  box-shadow:0 0 0 1px rgba(245,243,238,.28), 0 0 0 4000px rgba(0,0,0,.78);
}
/* opaca: a linha do app é transparente, e a de verdade apareceria por trás
   da cópia quando ela desliza (a 1ª foto pegou os números em dobro) */
#fsTutorialRoot .fst-demo{ position:absolute; pointer-events:none; background:var(--au-surface); border-radius:12px }
#fsTutorialRoot .fst-demo .fs-swipe-card{ transition:transform 420ms var(--au-ease-sheet) }
#fsTutorialRoot .fst-demo .fs-swipe-add{ transition:width 420ms var(--au-ease-sheet) }
#fsTutorialRoot .fst-demo .fs-swipe-add-in{ opacity:1 }
#fsTutorialRoot .fst-regua{ position:absolute; opacity:0; animation:none; transition:opacity 200ms var(--au-ease) }
#fsTutorialRoot .fst-regua .fs-regua-fita{ transition:transform 360ms var(--au-ease) }
#fsTutorialRoot .fst-menu{ pointer-events:none }
#fsTutorialRoot .fst-dedo{
  position:absolute; left:0; top:0; width:44px; height:44px; margin:-22px 0 0 -22px;
  border-radius:50%; pointer-events:none; opacity:0;
  background:rgba(245,243,238,.22); border:1.5px solid rgba(245,243,238,.85);
  box-shadow:0 0 0 6px rgba(245,243,238,.08);
  transition:transform 420ms var(--au-ease-sheet), opacity 200ms linear;
}
#fsTutorialRoot .fst-folha{
  position:absolute; left:12px; right:12px; bottom:calc(14px + env(safe-area-inset-bottom, 0px));
  max-width:440px; margin:0 auto; padding:18px 18px 12px; border-radius:24px;
  background:var(--au-surface-2); border:1px solid rgba(255,255,255,.1);
  box-shadow:0 -10px 40px -10px rgba(0,0,0,.9);
}
#fsTutorialRoot .fst-corpo{ animation:fsReguaEntra 320ms var(--au-ease) }
#fsTutorialRoot .fst-tit{ font:300 var(--au-fs-t-s)/1.25 'Sora',sans-serif; color:var(--au-text); margin:6px 0 4px; text-wrap:balance }
#fsTutorialRoot .fst-txt{ font:300 var(--au-fs-s)/1.55 'Sora',sans-serif; color:var(--au-muted); margin:0; min-height:44px }
#fsTutorialRoot .fst-txt b{ font-weight:400; color:var(--au-text-soft) }
#fsTutorialRoot .fst-pe{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px }
#fsTutorialRoot .fst-pontos{ display:flex; gap:6px }
#fsTutorialRoot .fst-pontos i{ width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.2) }
#fsTutorialRoot .fst-pontos i.on{ background:var(--au-text); transform:scale(1.3) }
#fsTutorialRoot .fst-seguir{ width:auto; padding:0 28px }
#fsTutorialRoot .au-link-mono:active, #fsTutorialRoot .fst-seguir:active{ transform:scale(.97) }

@media (prefers-reduced-motion: reduce){
  #fsTutorialRoot .fst-demo .fs-swipe-card, #fsTutorialRoot .fst-demo .fs-swipe-add,
  #fsTutorialRoot .fst-dedo, #fsTutorialRoot .fst-regua, #fsTutorialRoot .fst-regua .fs-regua-fita{ transition:none }
  #fsTutorialRoot .fst-corpo{ animation:none }
  .fs-swipe-card{ transition:none }
  .fs-swipe-del-in{ transition:none }
  .fs-cx.fs-regua-armada{ transform:none }
  .fs-regua, .fs-round-menu{ animation:none }
}

/* ── [dono 2026-09-08] A LINHA DO ROUND: CAIXA POR VALOR ───────────────
   Ele mandou o print do Strong: "separa as linhas da mesma forma que esse
   app, mas em vez de ter o 'ultimo', mantenha % body weight". No Strong
   cada valor editável é uma CAIXA; aqui o que dizia "isto se toca" era um
   pontilhado de 1px embaixo do número — pista fina demais para o dedo.

   A linha deixou de ser um cartão fechado: o `.fs-swipe-card` continua
   sendo o nó (é ele que desliza e que carrega o `data-fs-jump`), mas sem
   fundo e sem borda. Quem se destaca são as caixas.

   O "AGORA" NÃO GANHOU RÉGUA. Ela continua no cabeçalho do exercício
   (`.fs-bloco-agora`, decisão de 07/09) — o mockup aprovado desenha assim,
   e "um sinal de ouro por tela" é a régua do dono de 06/09. O round da vez
   se destaca por LUZ: as caixas dele são mais claras. */
/* as colunas da linha e do cabeçalho — UMA fonte pros dois (era uma const
   inline no JS, e inline não pode ser ajustado por media query). A coluna
   do valor é a maior: é ela que carrega "137,5" dentro de uma caixa. */
/* [04/10, opção B] a 5ª coluna é o DESCANSO (`.fs-rest-pill`): o divisor
   de 44px entre as linhas morreu e o round foi de 96 pra 50px. O % encolheu
   (é o número derivado) pra carga continuar cabendo "137,5"; o descanso tem
   largura fixa no mínimo de toque, e a linha recua 6px (era 12) — foi a
   conta que fez "172%" e "137,5" caberem também em 375. */
.fs-grid-linha{
  display:grid; grid-template-columns:26px .62fr 1.3fr .85fr 44px;
  align-items:center; gap:6px;
}
.fs-cx{
  /* [04/10] recuo 6px (era 8): com a 5ª coluna, "PESADA" do elástico
     pedia 59px numa caixa de 57 em 375 */
  min-height:44px; min-width:44px; padding:0 6px;
  border-radius:10px;
  background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.05);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:transform 120ms var(--au-ease);
}
.fs-cx:active{ transform:scale(.97) }
/* a moldura do campo aberto (`fsCampoNoLugar`, player-edicao.js) é um span
   no lugar do botão: o botão mede a borda POR DENTRO (border-box é o padrão
   dele no navegador) e o span não — sem isto a linha descia 2px ao tocar.
   Sem a borda, o miolo fica com os 44px do campo. */
.fs-cell[data-editing="1"]{ box-sizing:border-box }
.fs-cx[data-editing="1"]{ border-width:0 }
.fs-band{ font-size:var(--au-fs-s) }
.fs-swipe-card.cur .fs-cx{ background:rgba(255,255,255,.085); border-color:rgba(255,255,255,.12) }
/* telas muito estreitas (iPhone SE de 320): o número do round da vez desce
   pro corpo de 17px como os outros — em 320 a caixa tem 59px e "137,5" a
   20px pede 68. A distinção do "agora" continua sendo o FUNDO da caixa, que
   é o que o mockup aprovado usa. O `!important` é necessário e não é
   preguiça: a fonte da célula é declarada INLINE (a escala vem do JS), e
   inline vence folha — mesmo motivo do `.pushed-screen[style*="padding"]`. */
@media (max-width: 359px){
  .fs-swipe-card.cur .fs-cx:not(.fs-rest-pill){ font-size:var(--au-fs-xl) !important }
  /* e a caixa aperta o recuo: em 320 ela tem ~59px, e 16px de padding
     deixavam 43 úteis pra "137,5". Medido nos quatro casos (carga longa,
     por tempo, inglês e o rótulo do elástico, que é o texto mais largo). */
  .fs-cx{ padding:0 2px }
  .fs-cx span{ font-size:var(--au-fs-xs) }
  /* [04/10] com a 5ª coluna, as frações deixavam o % com ~24px e "172%"
     cortava: em 320 as três caixas vão no mínimo de toque e o % fica com
     o resto (~27px), com o número a 10px. */
  .fs-grid-linha{ grid-template-columns:22px 26px minmax(0,1fr) 44px 44px; gap:4px }
  .fs-pc{ font-size:var(--au-fs-mono-xs) !important }
  /* [04/10] a 5ª coluna tirou largura da carga: "PESADA" desce pra 10px
     e a caixa recua 2px (era 4) — medido sem corte em 320. */
  .fs-cx .fs-band{ font-size:var(--au-fs-mono-xs) }
}
/* o número do round: caixinha discreta na coluna de 26px que o grid já
   reserva — é rótulo, não alvo (quem recebe o toque é a linha inteira).
   [07/10] --au-muted, não --au-faint: o faint é calibrado contra o fundo
   PRETO, e dentro da caixinha de 5% e do cartão do exercício caía pra
   4,46:1 em 11px — abaixo do AA (régua `contraste-legivel`). Muted dá ~6:1
   e continua apagado diante do valor da linha. Vale pro descanso abaixo. */
.fs-rn{
  width:26px; height:26px; border-radius:7px;
  display:grid; place-items:center;
  background:rgba(255,255,255,.05);
  font:600 var(--au-fs-mono) 'Space Mono',monospace; color:var(--au-muted);
}
/* [dono 16/10] o round filho (drop set · rest-pause): a técnica no lugar do
   número, em texto mais claro — é a parte do round que pede atenção, sem cor
   nova (tecnicas-de-serie.js) */
.fs-rn-tec{ color:var(--au-text-soft); letter-spacing:-.02em }
/* [dono 16/10] a legenda do D / RP embaixo dos rounds: leitura, apagada,
   alinhada com a coluna do R (a letra em mono, como na caixinha) */
.fs-tec-leg{ margin:10px 6px 2px; }
.fs-tec-leg p{ margin:4px 0 0; font:400 var(--au-fs-xs)/1.4 'Sora',sans-serif; color:var(--au-muted) }
.fs-tec-leg b{ font:600 var(--au-fs-mono) 'Space Mono',monospace; color:var(--au-text-soft); margin-right:4px }

/* ── [dono 2026-10-04] O DESCANSO É A 5ª CAIXA DA LINHA (opção B) ─────
   "As séries estão muito grandes e tomando muito espaço da tela." Medido:
   96px por round, metade dele o divisor do descanso (08/09). Agora o tempo é
   uma caixa como a da carga (`.fs-cx`), em mono pequeno e apagado; em ouro
   quando corre; mais apagado quando já foi cumprido. A barra de 3px que
   drena volta a ser só do round que está descansando (`.fs-rest-barra`),
   da borda do R até a borda do ✓. */
.fs-rest{ display:block; min-width:0 }
.fs-rest-pill{
  width:100%; padding:0 2px;
  font:400 var(--au-fs-mono) 'Space Mono',monospace; letter-spacing:.04em;
  color:var(--au-muted); white-space:nowrap;
}
.fs-rest.correndo .fs-rest-pill{ color:var(--au-gold); border-color:rgba(201,162,74,.35) }
.fs-rest.cumprido .fs-rest-pill{ opacity:.6 }
.fs-rest-barra{
  position:relative; height:3px; margin:5px 0 0 6px; border-radius:2px;
  background:rgba(201,162,74,.20); overflow:hidden;
}
.fs-rest-fill{ position:absolute; inset:0 auto 0 0; background:var(--au-gold); border-radius:2px }

/* a pílula do ±30 s: abre EM CIMA do tempo, no lugar, sem cobrir o treino.
   Ela é IRMÃ do botão do tempo, nunca filha — botão dentro de botão é ARIA
   inválido, e o `textContent` da pílula tem que continuar sendo só o tempo. */
.fs-rest-pop{
  /* [04/10] ancorada na LINHA do round, encostada à direita da caixa do
     tempo (44px do ✓ + 9 de vão): a caixa mora perto da borda direita, e uma
     pílula centrada nela sairia da tela. */
  position:absolute; z-index:6; right:53px; bottom:100%;
  transform:translateY(-6px);
  display:flex; align-items:center; gap:2px; padding:4px;
  border-radius:14px; background:var(--au-surface-2);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 12px 30px -14px rgba(0,0,0,.9);
}
/* quando a linha está colada no topo da área que rola, a pílula abre PRA
   BAIXO — senão ela nasce fora da vista, e o toque não teria resposta. */
.fs-rest-pop--baixo{ bottom:auto; top:100%; transform:translateY(6px) }
/* a moldura do campo aberto (`fsCampoNoLugar`, player-edicao.js) é um span
   no lugar do botão do meio: mesma caixa, senão a pílula encolhe ao digitar */
.fs-rest-pop button, .fs-rest-pop .fs-cell[data-editing="1"]{
  min-width:44px; min-height:44px; padding:0 12px;
  border:none; background:none; border-radius:10px; cursor:pointer;
  font:400 var(--au-fs-m) 'Sora',sans-serif; color:var(--au-text-soft);
  white-space:nowrap;   /* "− 30 s" em três linhas foi o que a foto pegou */
}
.fs-rest-pop button:active{ background:rgba(255,255,255,.07) }

/* [dono 07/10] embaixo da barra que drena: "Descansando · −30 · +30 · Pular".
   Botões irmãos de 44px (alvo Apple); sem fill — o único fill sólido da tela
   é o "Terminar". Só transform no toque. */
.fs-rest-acoes{ display:flex; align-items:center; gap:6px; margin:4px 53px 2px 6px }
.fs-rest-acoes-k{
  flex:1; min-width:0; font:400 var(--au-fs-mono-xs) 'Space Mono',monospace;
  letter-spacing:.18em; text-transform:uppercase; color:var(--au-gold-kicker);
}
.fs-rest-acoes button{
  min-width:var(--au-h-tap); min-height:var(--au-h-tap); padding:0 12px;
  border:1px solid var(--au-line); border-radius:100px; background:none; cursor:pointer;
  font:400 var(--au-fs-m) 'Sora',sans-serif; color:var(--au-text-soft); white-space:nowrap;
  box-shadow:none; transition:transform 120ms cubic-bezier(.22,1,.36,1);
}
.fs-rest-acoes button:active{ transform:scale(.97) }

/* [dono 07/10] o bloco FEITO aberto pra corrigir: "✓ Feito" em verde (verde
   = concluído) e o "Fechar" do lado — botão irmão, 44px (.au-link-mono) */
.fs-bloco-feito{ display:flex; justify-content:space-between; align-items:center; margin:-10px 0 2px 2px }
.fs-bloco-feito-k{ font:400 var(--au-fs-mono-xs) 'Space Mono',monospace; letter-spacing:.18em; text-transform:uppercase; color:var(--au-green) }
.fs-bloco-fechar{ color:var(--au-text-soft); transition:transform 120ms cubic-bezier(.22,1,.36,1) }
.fs-bloco-fechar:active{ transform:scale(.97) }

/* [dono 07/10] A ESCALA DO ESFORÇO numa RAMPA que sobe (0–10) — o desenho é
   nosso. Um controle só (`role=slider`, 96px de altura, a largura da
   coluna): toca ou arrasta. Os degraus acendem em luminância até o valor; o
   escolhido é o branco. [10/10] as palavras são as da CR-10 de Foster e a
   rampa é de DUAS telas (o fim do treino e o recibo do treino sem esforço —
   esforco.js, no core): as classes deixaram o prefixo `fs-` do executor. */
.esforco-num{ font:100 var(--au-fs-hero-xl)/1 'Sora',sans-serif; color:var(--au-text); font-variant-numeric:tabular-nums }
.esforco-lbl{ font:400 var(--au-fs-xl) 'Sora',sans-serif; color:var(--au-text-soft); margin-top:8px; min-height:1.4em }
.esforco{
  display:flex; align-items:flex-end; gap:5px; height:96px; margin-top:26px; padding:0 2px;
  cursor:pointer; touch-action:none; outline:none; border-radius:8px;
}
.esforco:focus-visible{ box-shadow:0 0 0 2px var(--au-text-soft) }
.esforco-degrau{ flex:1; border-radius:4px 4px 2px 2px; background:rgba(255,255,255,.10) }
.esforco-degrau.ate{ background:rgba(245,243,238,.42) }
.esforco-degrau.sel{ background:var(--au-text) }
.esforco-n{ display:flex; gap:5px; padding:0 2px; margin-top:6px }
.esforco-n span{ flex:1; text-align:center; font:400 var(--au-fs-mono-xs) 'Space Mono',monospace; color:var(--au-faint) }
.esforco-pontas{ display:flex; justify-content:space-between; margin-top:6px; font:400 var(--au-fs-mono-xs) 'Space Mono',monospace; letter-spacing:.16em; text-transform:uppercase; color:var(--au-faint) }
/* [dono 15/10] A PRONTIDÃO: "How are you feeling today?" ao tocar em Start
   (js/core/prontidao.js; mockup prontidao-antes-do-treino.html). A roupa é a
   das folhas (.modal-backdrop/.modal); a camada sobe acima da prévia e do
   executor (z 4000). Cinco linhas de 60px, toda em P&B: o toque afunda a
   linha e acende o número — a resposta é o retorno, não um botão a mais. */
#prontidaoRoot .modal-backdrop{ z-index:4600 }
.prontidao-cab{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px }
.prontidao-cab .au-iconbtn{ margin:-6px -12px 0 0; flex:none }
.prontidao-titulo{ font:300 var(--au-fs-xl)/1.25 'Sora',sans-serif; color:var(--au-text); margin:6px 0 4px }
.prontidao-sub{ font:300 var(--au-fs-s)/1.5 'Sora',sans-serif; color:var(--au-muted); margin:0 0 12px }
.prontidao-op{
  width:100%; display:flex; align-items:center; gap:14px; min-height:60px; padding:0 4px; box-sizing:border-box;
  background:none; border:none; border-top:1px solid var(--au-line-soft); border-radius:0; color:var(--au-text);
  text-align:left; cursor:pointer; transition:transform var(--au-dur-press) var(--au-ease);
}
.prontidao-op:last-child{ border-bottom:1px solid var(--au-line-soft) }
.prontidao-op:active{ transform:scale(.97); background:rgba(255,255,255,.06); border-radius:12px }
.prontidao-op:active .prontidao-n{ background:var(--au-text); color:var(--au-on-light); border-color:var(--au-text) }
.prontidao-op:focus-visible{ outline:2px solid var(--au-text-soft); outline-offset:-2px; border-radius:12px }
.prontidao-n{ width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,.16); display:grid; place-items:center; flex:none; font:400 var(--au-fs-mono-s) 'Space Mono',monospace; color:var(--au-muted) }
.prontidao-txt{ flex:1; min-width:0 }
.prontidao-t{ display:block; font:300 var(--au-fs-l) 'Sora',sans-serif }
.prontidao-s{ display:block; font:300 var(--au-fs-xs)/1.4 'Sora',sans-serif; color:var(--au-muted); margin-top:1px }
.prontidao-go{ flex:none; font:300 1.25rem 'Sora',sans-serif; color:var(--au-faint) }
.prontidao-nota{ font:300 var(--au-fs-xs)/1.5 'Sora',sans-serif; color:var(--au-faint); margin-top:12px; text-align:center }
@media (prefers-reduced-motion: reduce){ .prontidao-op:active{ transform:none } }
/* a linha "Before" do recibo (receipt-esforco.js, os dois recibos) */
.rc-prontidao{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:44px; margin-top:4px }
.rc-prontidao-v{ font:300 var(--au-fs-l) 'Sora',sans-serif; color:var(--au-text) }
.rc-prontidao-v.nao{ color:var(--au-faint) }

/* a nota pro coach: as capas (as MESMAS do executor, `fsCapaBotaoHTML`) e o campo */
.fs-nota-k{ display:block; margin-top:30px }
.fs-nota-capas{ display:flex; gap:8px; margin-top:10px; overflow-x:auto; padding:2px; -webkit-overflow-scrolling:touch }
.fs-nota-capas [aria-pressed="true"]{ border:1.5px solid var(--au-text) !important }
.fs-nota-capas button:active{ transform:scale(.97) }
.fs-nota-sobre{ font:300 var(--au-fs-xs)/1.45 'Sora',sans-serif; color:var(--au-faint); margin-top:8px }
.fs-nota-sobre b{ font-weight:400; color:var(--au-text-soft) }
.fs-nota-campo{
  display:block; width:100%; box-sizing:border-box; margin-top:8px; min-height:72px; resize:none;
  padding:12px 14px; border:1px solid var(--au-line); border-radius:14px; background:none;
  font:300 var(--au-fs-xl)/1.45 'Sora',sans-serif; color:var(--au-text); outline:none;
}
.fs-nota-campo:focus{ border-color:var(--au-text-soft) }
.fs-nota-campo::placeholder{ color:var(--au-faint) }
.au-btn.fs-salvar-off{ opacity:.35; box-shadow:none; cursor:not-allowed }

/* [dono 07/10] REORDENAR (player-reordenar.js): o link no começo da lista e
   a folha com os cartões de uma linha. A supersérie é UM cartão; o feito e o
   começado ficam apagados e sem controles. Erguido = o cartão no dedo. */
/* [dono 16/10 · lições do STNDRD] o Swap (player-troca.js): a pílula no
   cabeçalho do exercício e a folha das variações (a moldura é a do reordenar) */
.fs-troca-abrir{ flex:none; width:44px; height:44px; padding:0; justify-content:center; border-radius:22px; border:1px solid var(--au-line); background:transparent; color:var(--au-text-soft); font:300 var(--au-fs-s) 'Sora',sans-serif; display:inline-flex; align-items:center; gap:6px; cursor:pointer; box-shadow:none; transition:transform 120ms cubic-bezier(.22,1,.36,1) }
.fs-troca-abrir:active{ transform:scale(.97) }
.fs-troca-sub{ margin:0 0 14px }
.fs-troca-lista{ list-style:none; margin:0; padding:0 }
.fs-troca-op{ width:100%; min-height:60px; display:flex; align-items:center; gap:12px; padding:8px 2px; background:none; border:none; border-bottom:1px solid var(--au-line-soft); color:var(--au-text-soft); text-align:left; cursor:pointer; transition:transform 120ms cubic-bezier(.22,1,.36,1) }
.fs-troca-op:active{ transform:scale(.97) }
.fs-troca-op.agora{ cursor:default }
.fs-troca-txt{ flex:1; min-width:0; display:grid }
/* o nome quebra em duas linhas em vez de virar "Chest-Supported Seated C…" (fiscal, 16/10): é a escolha que ele está fazendo */
.fs-troca-nome{ font:300 var(--au-fs-l)/1.3 'Sora',sans-serif; color:var(--au-text); overflow-wrap:anywhere }
.fs-troca-det{ font:300 var(--au-fs-xs) 'Sora',sans-serif; color:var(--au-muted) }
.fs-troca-agora{ flex:none; font:400 var(--au-fs-mono-xs) 'Space Mono',monospace; letter-spacing:.16em; color:var(--au-gold) }
.fs-troca-k{ flex:none; font:400 var(--au-fs-mono-xs) 'Space Mono',monospace; letter-spacing:.1em; color:var(--au-muted) }
@media (prefers-reduced-motion: reduce){ .fs-troca-abrir, .fs-troca-op{ transition:none } }
.fs-ro-link{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin:14px 0 -12px }
.fs-ro-abrir{ color:var(--au-text-soft); transition:transform 120ms cubic-bezier(.22,1,.36,1) }
.fs-ro-abrir:active{ transform:scale(.97) }
.fs-ro{ position:fixed; inset:0; z-index:4300; background:var(--au-surface); font-family:'Sora',system-ui,sans-serif; overflow-y:auto; -webkit-overflow-scrolling:touch }
.fs-ro-col{ max-width:460px; min-height:100%; margin:0 auto; box-sizing:border-box; display:flex; flex-direction:column; padding:calc(env(safe-area-inset-top, 0px) + 18px) 24px 34px }
.fs-ro-tit{ margin:12px 0 4px; font:400 var(--au-fs-t) 'Sora',sans-serif; color:var(--au-text) }
.fs-ro-sub{ margin:0 0 14px }
.fs-ro-lista{ list-style:none; margin:0; padding:0 }
.fs-ro-cartao{
  display:flex; align-items:center; gap:4px; min-height:64px; margin:8px 0; padding:6px 6px 6px 14px;
  border:1px solid var(--au-line); border-radius:14px; background:var(--au-surface-2);
  transition:transform 160ms cubic-bezier(.22,1,.36,1);
}
.fs-ro-cartao.trava{ background:none; border-color:var(--au-line-soft) }
.fs-ro-cartao.trava .fs-ro-nome{ color:var(--au-muted) }
.fs-ro-cartao.erguido{ transform:scale(1.02); box-shadow:0 18px 40px -14px rgba(0,0,0,.9), 0 0 0 1px var(--au-text-soft); position:relative; z-index:2 }
.fs-ro-txt{ flex:1; min-width:0; padding:6px 0 }
.fs-ro-nome{ display:block; font:300 var(--au-fs-l)/1.35 'Sora',sans-serif; color:var(--au-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.fs-ro-nome em{ font-style:normal; font:400 var(--au-fs-mono) 'Space Mono',monospace; color:var(--au-muted); margin-right:6px }
.fs-ro-k{ display:block; margin-top:3px; font:400 var(--au-fs-mono-xs) 'Space Mono',monospace; letter-spacing:.16em; text-transform:uppercase; color:var(--au-faint) }
.fs-ro-k.fs-ro-feito{ color:var(--au-green) }
.fs-ro-bt{
  flex:none; width:var(--au-h-tap); height:var(--au-h-tap); display:grid; place-items:center;
  border:none; background:none; border-radius:10px; cursor:pointer; padding:0;
  font:400 var(--au-fs-l) 'Sora',sans-serif; color:var(--au-text-soft); box-shadow:none;
  transition:transform 120ms cubic-bezier(.22,1,.36,1);
}
.fs-ro-bt:active{ transform:scale(.97) }
.fs-ro-bt:disabled{ opacity:.25; cursor:default }
.fs-ro-alca{ touch-action:none; color:var(--au-muted); letter-spacing:-2px; cursor:grab }
.fs-ro-nota{ margin:14px 0 0; font:300 var(--au-fs-xs)/1.5 'Sora',sans-serif; color:var(--au-faint) }
@media (prefers-reduced-motion: reduce){ .fs-ro-cartao{ transition:none } .fs-ro-cartao.erguido{ transform:none } }

/* [dono 08/10] o cartão "Phone calendar" no pé da agenda do coach
   (agenda-calendario.js): separado da lista por uma linha, como seção */
.ag-cal{ margin-top:28px; padding-top:18px; border-top:1px solid var(--au-line-soft); max-width:520px }
/* [08/10] "Block my busy times": o campo do link (17px — o iPhone não dá
   zoom) e o estado com o ponto (verde = lendo; cobre = falhou) */
.ag-cal-campo{
  display:block; width:100%; box-sizing:border-box; min-height:48px; padding:0 14px;
  border:1px solid var(--au-line); border-radius:12px; background:none; outline:none;
  font:300 var(--au-fs-xl) 'Sora',sans-serif; color:var(--au-text);
}
.ag-cal-campo:focus{ border-color:var(--au-text-soft) }
.ag-cal-campo::placeholder{ color:var(--au-faint) }
.ag-cal-estado{ display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border:1px solid var(--au-line); border-radius:14px }
.ag-cal-ponto{ flex:none; width:8px; height:8px; border-radius:50%; background:var(--au-green); margin-top:7px }
.ag-cal-ponto.cobre{ background:var(--au-orange) }
.ag-cal-t{ font:400 var(--au-fs-m) 'Sora',sans-serif; color:var(--au-text) }
.ag-cal a.au-ghost{ display:flex; align-items:center; justify-content:center; text-decoration:none; box-sizing:border-box }

/* [dono 07/10] com o executor aberto o fundo não rola (`fsTravarFundo`) */
html.fs-fundo-travado, html.fs-fundo-travado body{ overflow:hidden; overscroll-behavior:none }
.fs-rest-pop .fs-rest-pop-val{
  min-width:64px; justify-content:center; display:flex; align-items:center;
  color:var(--au-text); font-family:'Space Mono',monospace;
  border-left:1px solid var(--au-line); border-right:1px solid var(--au-line); border-radius:0;
}
/* campo aberto no valor do meio: sem o recuo do botão (e sem as divisórias,
   que a regra de cima zera), o campo de 64px dá os mesmos 64 — a pílula não
   alarga ao digitar */
.fs-rest-pop .fs-cell[data-editing="1"]{ padding:0 }

/* ── A RÉGUA DE OURO: "VOCÊ ESTÁ AQUI" [dono 2026-09-06, alternativa E] ──
   O ouro deixou de ser MOLDURA no executor. Antes havia cinco usos na mesma
   tela (relógio, cartão do exercício, linha do round, número do mapa e o
   avatar) e nenhum dizia sozinho "é aqui que você está" — o dono viu no
   iPhone: "as duas seleções em amarelo estão chamando atenção".
   Agora o "agora" é UM sinal, repetido onde ele vale: uma régua vertical de
   3px à esquerda — a mesma linguagem da barra de descanso, que já era 3px
   em ouro. Ela marca o round da vez, a linha do exercício em cena no mapa e
   o chip aceso da supersérie. O resto se destaca por LUZ (fundo mais claro,
   texto branco), nunca por cor.
   `--fs-agora-x` é onde a régua encosta: 0 dentro de um cartão (a moldura
   do deslize recorta), negativo numa linha sem cartão (o mapa). */
.fs-agora{ position:relative }
.fs-agora::before{
  content:""; position:absolute; left:var(--fs-agora-x, 0); top:8px; bottom:8px;
  width:3px; border-radius:3px; background:var(--au-gold); pointer-events:none;
}

/* [dono 2026-09-07 · a lista do treino] A RÉGUA SUBIU PRO BLOCO. Com todos
   os exercícios na tela, o "agora" que importa primeiro é QUAL EXERCÍCIO —
   a régua do bloco responde isso de uma olhada, e a linha da vez continua
   se destacando por LUZ (fundo mais claro e o cartão com borda), sem uma
   segunda régua ao lado da primeira. Ela recua 14px pra fora do texto, no
   vão do padding de 28px da coluna do player. */
.fs-bloco-agora{ position:relative }
.fs-bloco-agora::before{
  /* [foto, 07/09] Ela marca o CABEÇALHO do bloco, não o bloco inteiro: em
     390px um exercício de 4 rounds tem ~900px de altura, e uma régua dessa
     altura vira uma faixa de ouro no lado da tela — o oposto de "~3 usos
     por tela". Do topo do nome ao pé da capa é o que aponta o exercício. */
  content:""; position:absolute; left:-14px; top:16px; height:52px;
  width:3px; border-radius:3px; background:var(--au-gold); pointer-events:none;
}

/* ── O VÍDEO DO EXERCÍCIO NO EXECUTOR [dono 2026-09-06] ────────────────
   "Sem aparecer o botão de play e voltar ou avançar 10 segundos, pois
   esses botões deixam a tela mais escura e fica difícil de ver."

   O `controls` nativo saiu; o que sobra por cima da imagem é UMA camada
   invisível que ouve o toque, um sinal que aparece e some, e uma barra de
   3px. [junção 06/09] A CAIXA COM PROPORÇÃO MORREU junto com ela: a camada
   virou TELA CHEIA (`object-fit:cover`; desde 01/10 o vídeo é um QUADRO inteiro
   com respiro dentro dela, ver `fsQuadroStyle`), decisão posterior do dono na outra
   worktree — sem caixa não há proporção a reservar, e o pulo deitado→
   vertical deixou de existir por construção.

   O ALVO DA BARRA TEM 44px de altura — os 3px são só o que se VÊ. É a
   mesma solução do ± do executor, que ganhou 44 com o quadrado menor
   dentro; a régua do contrato é sobre o DEDO, não sobre a tinta. */
.fsv-toque{ position:absolute; inset:0; cursor:pointer; background:none; border:none }
.fsv-sinal{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(.94);
  min-width:76px; height:76px; padding:0 18px; border-radius:38px;
  background:rgba(11,10,9,.55); color:var(--au-text);
  display:grid; place-items:center; font:400 var(--au-fs-l) 'Sora',sans-serif;
  opacity:0; pointer-events:none;
  transition:opacity 180ms var(--au-ease), transform 180ms var(--au-ease);
}
.fsv-sinal.on{ opacity:1; transform:translate(-50%,-50%) scale(1) }
/* [dono 2026-10-02, opção A de mockups/executor-video-ficha.html] A CAMADA
   É UMA TELA QUE ROLA: o vídeo de borda a borda no topo, a ficha embaixo.
   A linha de progresso (e a barra de procurar que ela era) morreu a pedido
   do dono. A coluna para em 480px no Mac; no iPhone é a tela inteira. */
.fsv-rolo{ position:absolute; inset:0; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; overscroll-behavior:contain }
.fsv-col{ position:relative; max-width:480px; margin:0 auto; padding-bottom:calc(env(safe-area-inset-bottom,0px) + 40px) }
.fsv-topo{ position:relative; width:100%; max-height:calc(100vh - 150px); max-height:calc(100dvh - 150px); overflow:hidden; background:var(--au-surface) }
.fsv-fade-t{ position:absolute; left:0; right:0; top:0; height:130px; background:linear-gradient(rgba(11,10,9,.55),transparent); pointer-events:none }
.fsv-fade-b{ position:absolute; left:0; right:0; bottom:-1px; height:240px; background:linear-gradient(transparent,var(--au-bg) 78%); pointer-events:none }
.fsv-ficha{ position:relative; margin-top:-84px; padding:0 20px }
.fsv-tit{ display:flex; align-items:center; justify-content:space-between; gap:12px }
.fsv-nome{ margin:0; font:500 var(--au-fs-t) 'Sora',sans-serif; line-height:1.15; color:var(--au-text); min-width:0; overflow-wrap:anywhere }
.fsv-hist-link{ flex:none; color:var(--au-muted) }
.fsv-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px }
.fsv-hoje{ display:flex; align-items:center; gap:12px; margin-top:16px; padding:12px 14px; border-radius:14px; background:rgba(255,255,255,.035) }
.fsv-hoje-k{ font:400 var(--au-fs-mono-m) 'Space Mono',monospace; letter-spacing:.22em; text-transform:uppercase; color:var(--au-gold) }
.fsv-hoje b{ font:500 var(--au-fs-xl) 'Sora',sans-serif; color:var(--au-text) }
.fsv-hoje-r{ margin-left:auto; font:400 var(--au-fs-xs) 'Sora',sans-serif; color:var(--au-muted); white-space:nowrap }
.fsv-sec{ margin-top:24px }
.fsv-sec > .au-kicker{ margin-bottom:12px }
.fsv-equip{ display:flex; align-items:center; gap:14px }
.fsv-equip-ic{ width:72px; height:72px; flex:none; border-radius:16px; background:rgba(255,255,255,.05); display:grid; place-items:center; color:var(--au-text-soft) }
.fsv-equip-l{ font:500 var(--au-fs-l) 'Sora',sans-serif; color:var(--au-text) }
.fsv-equip-s{ font:400 var(--au-fs-xs) 'Sora',sans-serif; color:var(--au-muted); margin-top:2px }
/* [16/10] a prévia: o equipamento do treino inteiro (player-previa.js ·
   previaEquipamentoHTML). Só leitura, P&B, sem fill — o fill sólido da tela
   é o "Iniciar treino". */
.previa-equip{ margin-top:22px }
.previa-equip-lista{ list-style:none; margin:10px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px }
.previa-equip-item{ display:flex; align-items:center; gap:8px; min-height:44px; padding:0 14px 0 8px; border:1px solid var(--au-line); border-radius:100px }
.previa-equip-ic{ width:30px; height:30px; flex:none; display:grid; place-items:center; color:var(--au-text-soft) }
.previa-equip-l{ font:400 var(--au-fs-s) 'Sora',sans-serif; color:var(--au-text) }
.previa-equip-so{ display:flex; align-items:center; gap:10px; min-height:44px; margin-top:6px; font:400 var(--au-fs-s) 'Sora',sans-serif; color:var(--au-text-soft) }
.fsv-alvos{ display:flex; flex-wrap:wrap; gap:12px }
.fsv-alvo{ width:96px }
.fsv-alvo-ic{ width:96px; height:108px; border-radius:16px; background:rgba(255,255,255,.04); display:grid; place-items:center; overflow:hidden }
.fsv-alvo-ic svg{ width:78px; height:92px; overflow:hidden }
.fsv-alvo-corpo{ fill:rgba(255,255,255,.07) }
.fsv-alvo--p .fsv-alvo-musc{ fill:var(--au-gold) }
.fsv-alvo--s .fsv-alvo-musc{ fill:rgba(201,162,74,.5) }
.fsv-alvo-l{ font:400 var(--au-fs-xs) 'Sora',sans-serif; color:var(--au-text); margin-top:8px }
.fsv-alvo-s{ font:400 var(--au-fs-xs) 'Sora',sans-serif; color:var(--au-muted) }
.fsv-recado > div{ margin-top:0 }
.fsv-hist-l{ display:flex; justify-content:space-between; gap:12px; padding:12px 0; border-top:1px solid var(--au-line); font:400 var(--au-fs-s) 'Sora',sans-serif; color:var(--au-text-soft) }
.fsv-vazio{ margin:0; font:400 var(--au-fs-s) 'Sora',sans-serif; color:var(--au-muted) }
.fsv-angulos{ position:absolute; right:max(12px, calc(50% - 228px)); top:calc(env(safe-area-inset-top,0px) + 12px); transition:opacity 160ms var(--au-ease) }
.fsv-angulos.fsv-sumir{ opacity:0; pointer-events:none !important }
/* a barra que acende quando o vídeo sai de vista: nome + prescrição;
   tocar volta ao vídeo. Opacidade só — não desliza (frequência alta). */
.fsv-compacto{
  position:absolute; left:0; right:0; top:0; z-index:1; border:0; cursor:pointer; text-align:left;
  padding:calc(env(safe-area-inset-top,0px) + 12px) 16px 12px max(72px, calc(50% - 168px));
  min-height:calc(env(safe-area-inset-top,0px) + 68px);
  background:var(--au-bg); border-bottom:1px solid var(--au-line);
  display:flex; flex-direction:column; justify-content:center; gap:4px;
  opacity:0; pointer-events:none;
  /* [dono 2026-10-04] SOME NA HORA, ACENDE COM FADE. Num peteleco rápido pra
     cima o vídeo já tinha voltado e a barra ainda levava 160ms apagando por
     cima do topo dele. A transição mora só no estado `.on`: o CSS usa a
     transição do estado DE CHEGADA, então acender anima e apagar é imediato. */
  transition:none;
}
.fsv-compacto.on{ opacity:1; pointer-events:auto; transition:opacity 160ms var(--au-ease) }
.fsv-compacto-n{ font:500 var(--au-fs-xl) 'Sora',sans-serif; color:var(--au-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.fsv-compacto-h{ font:400 var(--au-fs-mono-s) 'Space Mono',monospace; letter-spacing:.14em; text-transform:uppercase; color:var(--au-muted) }
/* [dono 2026-10-03, o "1" de mockups/executor-video-cartao.html] O VÍDEO É
   UM CARTÃO, não a tela toda. O véu é o treino escurecido (tocar nele
   fecha); o cartão vai de logo abaixo da barra do treino (o `top` vem do JS,
   medido no "Terminar") até o pé, com 8px de folga e cantos de 30px. No Mac
   ele para em 480px, centralizado. A seta de voltar morreu: a saída visível
   é o puxador (44 de alvo, o traço de 38×5 dentro). O véu é o mesmo preto
   quente das outras folhas do app. */
.fsv-veu{ position:absolute; inset:0; background:rgba(5,5,4,.62) }
.fsv-cartao{
  position:absolute; left:8px; right:8px; bottom:calc(env(safe-area-inset-bottom,0px) + 8px);
  top:calc(env(safe-area-inset-top,0px) + 16px);   /* sem a barra do treino por cima (a prévia); com ela, o JS mede */
  border-radius:30px; overflow:hidden; background:var(--au-surface);
  box-shadow:0 0 0 1px var(--au-line), 0 -12px 50px rgba(0,0,0,.6);
}
@media (min-width:520px){
  .fsv-cartao{ left:50%; right:auto; width:480px; margin-left:-240px }
}
.fsv-cartao .fsv-col{ max-width:none; padding-bottom:28px }
/* a barra de rolagem clássica (Mac com "mostrar sempre", Chrome no Windows)
   comia 15px do cartão e o vídeo deixava de ir de borda a borda — medido em
   1440px: vídeo de 465 num cartão de 480. Rola igual, sem a barra. */
/* [dono 2026-10-04] SEM O ELÁSTICO DO iOS DENTRO DO CARTÃO. "Quando eu dou
   um scroll muito rápido para cima, o topo do vídeo fica com uma faixa
   cinza, enquanto o botão de deslizar permanece lá." Medido no Safari do
   Simulador: a rolagem passava do topo (scrollTop −105) e o conteúdo descia,
   mostrando o fundo do cartão acima do vídeo — o tracinho fica, porque mora
   fora da rolagem. `contain` só impede o encadeamento; `none` tira o quique.
   Puxar o cartão pra baixo no topo não depende dele (são os Touch Events de
   `player-video-cartao.js`). */
.fsv-cartao .fsv-rolo{ overscroll-behavior-y:none }
/* [dono 2026-10-05] A ROLAGEM DO CARTÃO É NOSSA (fsVideoLigarRolagem,
   player-video-cartao.js): o Safari não rola nada por conta própria aqui,
   então não há disputa entre a rolagem dele e o puxar pra fechar. A roda
   do Mac não é afetada por `touch-action`. */
.fsv-cartao, .fsv-veu{ touch-action:none }
.fsv-cartao .fsv-rolo{ scrollbar-width:none }
.fsv-cartao .fsv-rolo::-webkit-scrollbar{ display:none }
.fsv-cartao .fsv-topo{ max-height:64vh; max-height:64dvh }
.fsv-cartao .fsv-fade-b{ background:linear-gradient(transparent,var(--au-surface) 78%) }
/* [03/10, medido no Safari do Simulador] A faixa de cima do cartão (0–44px)
   é do PUXADOR, e só dele: com 4 ângulos, dois botões de ângulo caíam
   embaixo do tracinho e o toque neles FECHAVA o vídeo; e a barra compacta
   escrevia o nome por baixo dele. Os dois desceram pra baixo da faixa. */
.fsv-cartao .fsv-compacto{ padding:44px 20px 12px; min-height:96px; background:var(--au-surface) }
.fsv-cartao .fsv-angulos{ right:12px; top:44px }
/* centralizado por MARGEM, nunca por transform: a regra global
   `button:active{transform:scale(.97)}` (aurum.css) trocava o
   `translateX(-50%)` e o tracinho pulava 60px pra direita debaixo do dedo. */
.fsv-puxa{
  pointer-events:auto; position:absolute; top:0; left:50%; margin-left:-60px; z-index:2;
  width:120px; height:44px; border:0; padding:9px 0 0; background:none; cursor:grab;
  display:flex; justify-content:center; touch-action:none;
}
/* `.fsv-cartao` na frente pra VENCER `button:active:not(:disabled)` do
   aurum.css (0,2,1): sem isso o tracinho ainda encolhia 3% no Simulador */
.fsv-cartao .fsv-puxa:active{ transform:none }
/* toque longo no tracinho, no vídeo ou nos ângulos abria a LUPA de seleção
   de texto do iOS (visto segurando o tracinho por 3 s no Simulador) */
.fsv-puxa, .fsv-topo, .fsv-angulos, .fsv-compacto{ -webkit-user-select:none; user-select:none; -webkit-touch-callout:none }
.fsv-puxa i{ display:block; width:38px; height:5px; border-radius:3px; background:rgba(245,243,238,.5); transition:background-color 120ms var(--au-ease), transform 120ms var(--au-ease) }
/* o retorno do toque é no PRÓPRIO tracinho: acende e alarga — no dedo
   descendo (pointer-down) e enquanto o cartão é arrastado, venha o arraste
   do tracinho ou do conteúdo */
.fsv-puxa:active i, .fsv-cartao.arrastando .fsv-puxa i{ background:rgba(245,243,238,.9); transform:scaleX(1.2) }
.fsv-cartao.arrastando .fsv-puxa{ cursor:grabbing }
.fsv-puxa:focus-visible{ outline:2px solid var(--au-text-soft); outline-offset:-4px; border-radius:12px }
/* a camada de gestos do vídeo é role=button: o `:active` global a
   encolhia a cada toque (invisível, mas mexia no alvo do dedo) */
.fsv-topo .fsv-toque:active{ transform:none }
@media (prefers-reduced-motion: reduce){
  .fsv-puxa i{ transition:background-color 120ms linear }
  .fsv-puxa:active i, .fsv-cartao.arrastando .fsv-puxa i{ transform:none }
}
@media (prefers-reduced-motion: reduce){
  .fsv-sinal{ transition:opacity 120ms linear; transform:translate(-50%,-50%) }
  .fsv-sinal.on{ transform:translate(-50%,-50%) }
}

/* ── A TELA DE PAGAMENTO (19/08/2026 · tela cheia desde 03/09/2026) ────
   Estrutura só; cor e movimento vêm dos tokens do aurum.css, e a entrada
   sobe como as folhas do app de propósito — pagamento que entra diferente
   das demais superfícies parece outro app.

   NÃO HÁ CTA SÓLIDO AQUI, E AGORA NÃO HÁ BOTÃO NENHUM NOSSO. O botão de
   pagar é desenhado pelo STRIPE, dentro do iframe dele — a régua "um fill
   sólido por tela" continua valendo, e quem o gasta é ele. Desde o quadro
   D, o "Cancelar" ghost também saiu: quem fecha é a seta da barra. */
/* AS CAMADAS. A tab bar vive em 220 e os modais em 300 — com o
   `.modal-backdrop` dizendo, por escrito, "acima da tab bar: folha sempre
   cobre a navegação". A folha de pagamento nasceu em 60/61 e ficaria
   ATRÁS da barra de abas: o pagamento com a navegação desenhada por cima.
   Vai pra 320/321, acima também do modal comum — porque ela abre EM CIMA
   da folha de confirmação, que é 300. */
.pg-veu {
  position: fixed; inset: 0; z-index: 320;
  background: rgba(0, 0, 0, .58);
  animation: auFadeIn 260ms var(--au-ease) both;
}
/* ── TELA CHEIA, NÃO MAIS FOLHA (dono 03/09/2026, quadro D) ───────────
   A folha do rodapé morreu junto com o puxador, o kicker, o valor em ouro
   e o "Cancelar" ghost. Motivo medido: o valor aparecia duas vezes (o
   nosso e o do resumo do próprio Stripe), e o formulário dele é LONGO —
   numa folha de 92vh ele rolava dentro de uma tela que também rolava.
   Em tela cheia é uma rolagem só, e a superfície inteira é dele.

   Ela ENTRA subindo, como a folha entrava: é uma apresentação modal, e o
   gesto de "isto veio por cima do que eu estava fazendo" continua certo. */
.pg-tela {
  position: fixed; inset: 0; z-index: 321;
  display: flex; flex-direction: column;
  background: var(--au-bg);
  transform: translateY(100%);
  transition: transform var(--au-dur-sheet) var(--au-ease-sheet);
}
.pg-tela.on { transform: translateY(0); }

/* A BARRA É A ÚNICA CHROME NOSSA: a seta (o Stripe embutido não tem botão
   de sair) e o nome do que se paga. Mono APAGADO, nunca o kicker dourado —
   ouro aqui seria o app assinando uma tela que não é dele. */
.pg-barra {
  flex: none; display: flex; align-items: center; gap: 4px;
  padding: calc(env(safe-area-inset-top, 0px) + 8px) 20px 8px;
  border-bottom: 1px solid var(--au-line-soft);
}
.pg-barra-tit {
  font: 400 var(--au-fs-mono-s) "Space Mono", monospace;
  letter-spacing: .2em; text-transform: uppercase; color: var(--au-muted);
}
/* Uma rolagem só, e ela é a do formulário dele. */
.pg-rolo {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 16px 16px calc(env(safe-area-inset-bottom, 0px) + 24px);
}
/* O que o Stripe não tem como saber: a data da sessão, a renovação do
   plano. Rola junto com o formulário, como o resumo dele faria. */
.pg-ctx { margin: 0 0 14px; font-size: var(--au-fs-xs); color: var(--au-muted); }
/* O iframe do Stripe cresce sozinho; a altura mínima evita o salto de
   layout entre a tela subir e ele terminar de se desenhar. Em tela cheia
   ela subiu de 260 pra 420: o formulário dele tem e-mail, cartão, validade,
   CVC, nome e o botão de pagar — reservar meia folha fazia a chegada dele
   empurrar a tela inteira. */
/* [23/09 · revisão jurídica] A LINHA DOS 14 DIAS, acima dos campos do
   cartão. Ela usa o interruptor canônico (`.au-switch-row`) — nenhum
   desenho novo pra um gesto que o app já tem —, e o que muda aqui é só o
   espaço em volta: a linha da Conta e a das Fotos vivem em listas, esta
   vive sozinha antes de um bloco de terceiro. */
.pg-14d { margin: 0 0 18px; }
.pg-14d .au-switch-row { margin-top: 0; }

.pg-mount { min-height: 420px; }

/* ── A ESPERA DE ~3s (dono 20/08/2026 · refeita 03/09/2026) ───────────
   Enquanto o Stripe não chega, a área reservada precisa DIZER que está
   vindo. A 1ª versão era um esqueleto dos campos — e o dono mediu com o
   dedo: "por alguns segundos não existe nenhum tipo de ação". O esqueleto
   era `--au-line` (7% de branco) pulsando entre 40% e 73% de opacidade:
   sobre a tela cheia preta, invisível. Agora: o anel canônico girando
   (`.au-anel`, aurum.css — só transform) e a frase em texto claro,
   centrados na área que o bloco do Stripe vai ocupar, no mesmo lugar e
   do mesmo tamanho — a troca não empurra nada. */
.pg-mount-esperando { display: flex; flex-direction: column; justify-content: center; }
.pg-espera {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 48px 12px; text-align: center;
}
.pg-espera-tit { font-size: var(--au-fs-l); color: var(--au-text); }
.pg-espera-sub { font-size: var(--au-fs-xs); color: var(--au-muted); }

@media (prefers-reduced-motion: reduce) {
  .pg-tela { transition: opacity 200ms linear; transform: none; opacity: 0; }
  .pg-tela.on { opacity: 1; }
  .pg-veu { animation: none; }
}

/* ═══ A ABA DO CICLO (atleta) — "onde eu estou" ═══════════════════════════
   [dono 2026-09-09 · forma A de mockups/goal-vira-ciclo.html]
   Classes da tela que substituiu as variantes do GOAL. Nenhuma fonte ou
   altura de botão vive inline lá (contrato visual, 11/08): tudo aqui, com os
   tokens da escala. O ouro aparece TRÊS vezes na tela e todas estão neste
   bloco: a semana atual na fita (o "agora"), o PR (mérito) e a porta
   "Trocar". O percentual da carga é NEUTRO de propósito — cobre é a cor de
   atenção/lesão nesta casa, e pintar a carga de cobre seria o app dando um
   diagnóstico que a literatura não sustenta (31/08). */

.gc-k { font: 400 var(--au-fs-mono-s) 'Space Mono', monospace; letter-spacing: .22em;
        text-transform: uppercase; color: var(--au-faint) }

/* a primeira linha: o objetivo */
.gc-obj { display: flex; align-items: flex-start; gap: 12px;
          padding-bottom: 16px; border-bottom: 1px solid var(--au-line) }
.gc-obj-col { flex: 1; min-width: 0 }
.gc-obj-n { font: 400 var(--au-fs-xl)/1.35 'Sora', sans-serif; color: var(--au-text); margin-top: 6px }
.gc-obj-ed { flex: none; color: var(--au-gold) }

/* o herói */
.gc-hero-k { margin-top: 22px }
.gc-hero { display: flex; align-items: baseline; gap: 10px; margin-top: 8px; white-space: nowrap }
.gc-hero-n { line-height: 1 }
.gc-hero-u { font: 400 var(--au-fs-m)/1.3 'Sora', sans-serif; color: var(--au-muted) }
/* [dono 17/10] o herói em PALAVRAS ("Easy week") e a posição numa linha só */
.gc-estado { font: 300 var(--au-fs-t-xl)/1.1 'Sora', sans-serif; color: var(--au-text);
             letter-spacing: -.01em; margin-top: 8px }
.gc-estado-s { font: 400 var(--au-fs-m) 'Sora', sans-serif; color: var(--au-muted); margin-top: 6px }
.gc-estado-s b { font-weight: 400; color: var(--au-text) }

/* a FITA das semanas (02/10, forma B) — a ALTURA vem do JS (a meta da
   semana, ou o desenho do padrão sem meta), a COR diz se já passou. Semanas
   agrupadas por bloco (`.gc-fita-b`), com respiro entre os blocos; a linha de
   base ancora as barras. */
.gc-fita { display: flex; align-items: flex-end; gap: 7px; height: 44px; margin-top: 20px;
           border-bottom: 1px solid var(--au-line) }
.gc-fita-b { flex: 1; display: flex; align-items: flex-end; gap: 2px; height: 100% }
.gc-fita i { flex: 1; min-width: 2px; border-radius: 2px 2px 1px 1px; background: rgba(255,255,255,.15) }
.gc-fita i.gc-w-dl { background: rgba(255,255,255,.08) }
.gc-fita i.gc-w-done { background: rgba(255,255,255,.42) }
.gc-fita i.gc-w-dl.gc-w-done { background: rgba(255,255,255,.24) }
.gc-fita i.gc-w-now { background: var(--au-gold) }
.gc-fita-txt { display: flex; justify-content: space-between; gap: 10px; margin-top: 10px;
               font: 400 var(--au-fs-mono-xs) 'Space Mono', monospace; letter-spacing: .16em;
               text-transform: uppercase; color: var(--au-faint) }

/* os blocos */
.gc-card { border-top: 1px solid var(--au-line); margin-top: 22px; padding-top: 16px }
.gc-l { font: 400 var(--au-fs-s)/1.55 'Sora', sans-serif; color: var(--au-muted);
        margin: 4px 0 0; max-width: 300px }
.gc-vazio { font: 400 var(--au-fs-s)/1.6 'Sora', sans-serif; color: var(--au-muted);
            margin: 10px 0 0; max-width: 300px }
.gc-nota { font: 400 var(--au-fs-xs)/1.5 'Sora', sans-serif; color: var(--au-faint); margin: 10px 0 0 }

/* [dono 17/10] os QUATRO INDICADORES da semana, em grade 2×2. Valor em Sora
   leve, rótulo em mono; o verde das bolinhas é só o "concluído" (régua da
   casa). Texto escalável: a grade quebra pra uma coluna se não couber. */
.gc-inds { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 22px 18px; margin-top: 16px }
.gc-ind-v { font: 200 var(--au-fs-t-l)/1 'Sora', sans-serif; color: var(--au-text);
            font-variant-numeric: tabular-nums; letter-spacing: -.01em }
.gc-ind-v small { font: 400 var(--au-fs-m) 'Sora', sans-serif; color: var(--au-muted); letter-spacing: 0 }
.gc-ind-v-txt { font-size: var(--au-fs-t); font-weight: 300; padding-top: 6px }
.gc-ind-l { font: 400 var(--au-fs-mono-xs) 'Space Mono', monospace; letter-spacing: .16em;
            text-transform: uppercase; color: var(--au-faint); margin-top: 8px }
.gc-ind-d { font: 400 var(--au-fs-xs) 'Sora', sans-serif; color: var(--au-muted); margin-top: 3px }
.gc-pontos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px }
.gc-pontos i { width: 10px; height: 10px; border-radius: 50%; box-sizing: border-box;
               border: 1px solid rgba(255,255,255,.3) }
.gc-pontos i.gc-ponto-ok { background: var(--au-green); border-color: var(--au-green) }
.gc-frase { font: 400 var(--au-fs-xs)/1.5 'Sora', sans-serif; color: var(--au-muted);
            margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--au-line-soft) }
.gc-frase b { font-weight: 400; color: var(--au-text) }

/* "o que mudou" */
.gc-mud { display: flex; align-items: center; gap: 11px; min-height: var(--au-h-tap);
          font-size: var(--au-fs-s); color: var(--au-text-soft) }
.gc-mud-t { flex: none; font: 400 var(--au-fs-mono) 'Space Mono', monospace;
            letter-spacing: .14em; color: var(--au-faint) }
.gc-mud-pr { color: var(--au-gold) }
.gc-mud-f { flex: 1; min-width: 0 }
.gc-mud-q { flex: none; margin-left: auto; font-size: var(--au-fs-xs); color: var(--au-muted);
            font-variant-numeric: tabular-nums }
.gc-porta { display: block; width: 100%; text-align: center; margin-top: 6px }

/* [dono 07/10 · faixas, fatia 2] ATÉ A FALHA: a caixa das reps diz MAX. Na
   letra do número ("MAX" a 24px) não cabia — saía "M…": desce pra ~60%. */
#fsPlayerRoot .fs-max{ display:block; font-size:.6em; letter-spacing:.06em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* (é ELE quem corta, com o texto dentro: assim a régua TEXTO CORTADO do fiscal o enxerga se um dia não couber) */

/* ── [dono 17/10 · "implemente" — mockups/peso-grafico-navegavel.html v4]
   BODY › PESO: a tela só diz o peso. O gráfico se arrasta
   (body-peso-grafico.js) e "Log weight" abre a folha (body-peso-folha.js).
   Ouro nenhum: perder peso não é mérito pra todo atleta. ── */
/* `.pushed-screen.peso-tela`: o `.pushed-screen` do manikin.css carrega DEPOIS
   desta folha e trocava o recuo de baixo — o CTA nascia atrás da barra de abas */
.pushed-screen.peso-tela{ padding:calc(env(safe-area-inset-top, 0px) + 14px) 22px calc(var(--au-h-nav) + 16px + env(safe-area-inset-bottom)); background:radial-gradient(100% 55% at 20% 8%, var(--au-surface-2), var(--au-bg) 62%); display:flex; flex-direction:column; box-sizing:border-box }
/* nada encolhe: o gráfico só tem filhos absolutos (altura de conteúdo 0) e,
   numa tela mais baixa (o Safari do iPhone, com a barra), a coluna flex o
   espremia — os meses e o "Recent" subiam por cima dele. Faltou altura, rola. */
.peso-tela > *{ flex-shrink:0 }
.peso-topo{ display:flex; align-items:center; justify-content:space-between; gap:12px }
.peso-topo-t{ font:400 var(--au-fs-m) 'Sora',sans-serif; color:var(--au-text-soft) }
.peso-topo-vao{ width:44px }
/* altura FIXA: com o dedo no gráfico a linha de baixo troca de texto, e nada pode pular */
.peso-num{ margin-top:10px; height:96px }
.peso-big{ display:flex; align-items:baseline; gap:8px }
.peso-big b{ font:200 var(--au-fs-hero-l)/1 'Sora',sans-serif; letter-spacing:-.02em; color:var(--au-text); font-variant-numeric:tabular-nums }
.peso-big span{ font:300 var(--au-fs-t-s) 'Sora',sans-serif; color:var(--au-muted) }
.peso-quando{ margin-top:10px; font:400 var(--au-fs-s) 'Sora',sans-serif; color:var(--au-text-soft); font-variant-numeric:tabular-nums; white-space:nowrap }
.peso-quando-s{ color:var(--au-muted) }
.peso-seg{ display:flex; padding:3px; border-radius:14px; background:var(--au-surface); border:1px solid var(--au-line); margin-top:14px }
.peso-seg-b{ flex:1; min-height:44px; border:0; border-radius:11px; background:none; color:var(--au-muted); font:400 var(--au-fs-s) 'Sora',sans-serif; cursor:pointer; transition:transform var(--au-dur-press) var(--au-ease) }
.peso-seg-b:active{ transform:scale(.97) }
.peso-seg-b.on{ background:var(--au-surface-2); color:var(--au-text) }
.peso-seg-b[disabled]{ color:var(--au-faint); cursor:default; opacity:.6 }
/* o gráfico: 210px de desenho + a fila dos meses embaixo */
.peso-g{ position:relative; height:210px; margin:14px 0 26px; touch-action:pan-y; user-select:none; -webkit-user-select:none; outline:none; border-radius:8px }
.peso-g:focus-visible{ box-shadow:0 0 0 2px var(--au-line) }
@media (hover:hover) and (pointer:fine){ .peso-g{ cursor:crosshair } }
.peso-g-svg{ position:absolute; left:0; top:0; width:100%; height:210px; overflow:visible }
.peso-g-mes{ stroke:rgba(255,255,255,.08); stroke-width:1; vector-effect:non-scaling-stroke }
.peso-g-linha{ fill:none; stroke:var(--au-text); stroke-width:1.8; stroke-linejoin:round; stroke-linecap:round; vector-effect:non-scaling-stroke }
.peso-g-pontos{ position:absolute; inset:0; pointer-events:none }
.peso-g-p{ position:absolute; width:6px; height:6px; border-radius:50%; background:var(--au-bg); border:1.4px solid var(--au-text); transform:translate(-50%,-50%); box-sizing:border-box }
.peso-g-p.ult{ width:10px; height:10px; background:var(--au-text) }
.peso-g-fio{ position:absolute; top:30px; bottom:0; width:1px; background:rgba(255,255,255,.35); pointer-events:none }
.peso-g-cur{ position:absolute; width:13px; height:13px; border-radius:50%; background:var(--au-text); border:2px solid var(--au-bg); transform:translate(-50%,-50%); pointer-events:none; box-sizing:border-box }
.peso-g-data{ position:absolute; top:2px; height:24px; line-height:22px; padding:0 10px; border-radius:12px; background:var(--au-surface-2); border:1px solid rgba(255,255,255,.18); color:var(--au-text); font:500 var(--au-fs-xs) 'Sora',sans-serif; white-space:nowrap; transform:translateX(-50%); pointer-events:none; box-sizing:border-box }
.peso-g-fio[hidden], .peso-g-cur[hidden], .peso-g-data[hidden]{ display:none }
.peso-g-meses{ position:absolute; left:0; right:0; top:100%; height:22px; pointer-events:none }
.peso-g-meses span{ position:absolute; top:6px; transform:translateX(-50%); font:400 var(--au-fs-xs) 'Sora',sans-serif; color:var(--au-muted); white-space:nowrap }
.peso-lista{ border-top:1px solid var(--au-line) }
.peso-lista-k{ display:block; padding:14px 0 4px }
.peso-li{ display:flex; align-items:center; min-height:44px; border-bottom:1px solid var(--au-line-soft); font-variant-numeric:tabular-nums }
.peso-li span{ font:400 var(--au-fs-s) 'Sora',sans-serif; color:var(--au-muted) }
.peso-li b{ margin-left:auto; font:400 var(--au-fs-m) 'Sora',sans-serif; color:var(--au-text) }
.peso-li.on{ background:rgba(255,255,255,.04) }
.peso-mola{ flex:1; min-height:16px }
/* o "Log weight" fica SEMPRE à vista: preso no pé da área que rola (no Safari
   do iPhone, com a barra de endereço, ele caía abaixo da dobra); a lista
   passa por baixo de um esmaecido */
.peso-pe{ position:sticky; bottom:0; z-index:1; margin:0 -22px; padding:28px 22px 0; background:linear-gradient(transparent, var(--au-bg) 34px) }
.peso-cta{ width:100% }
.peso-vazio{ margin-top:auto }
.peso-vazio-t{ font:200 var(--au-fs-hero-l)/1.1 'Sora',sans-serif; color:var(--au-text) }
.peso-vazio-s{ font:400 var(--au-fs-m)/1.6 'Sora',sans-serif; color:var(--au-muted); margin-top:12px; max-width:294px }
/* a folha de registrar */
.peso-folha{ text-align:center }
.peso-folha-alca{ width:36px; height:5px; border-radius:3px; background:rgba(255,255,255,.2); margin:0 auto 16px }
.peso-folha-t{ margin:0; font:400 var(--au-fs-xl) 'Sora',sans-serif; color:var(--au-text) }
.peso-folha-s{ margin-top:4px; font:400 var(--au-fs-s) 'Sora',sans-serif; color:var(--au-muted) }
.peso-step{ display:flex; align-items:center; justify-content:center; gap:14px; margin:26px 0 4px }
.peso-step-b{ flex:none; width:56px; height:56px; border-radius:50%; border:1px solid rgba(255,255,255,.16); background:none; color:var(--au-text); font:300 var(--au-fs-t) 'Sora',sans-serif; cursor:pointer; transition:transform var(--au-dur-press) var(--au-ease) }
.peso-step-b:active{ transform:scale(.97) }
.peso-step-n{ display:flex; align-items:baseline; justify-content:center; gap:4px; min-width:0 }
.peso-step-n input{ width:2.4em; min-width:0; border:0; background:none; color:var(--au-text); font:200 var(--au-fs-hero-l)/1 'Sora',sans-serif; text-align:center; font-variant-numeric:tabular-nums; padding:0; outline:none; user-select:text; -webkit-user-select:text }
.peso-step-n input:focus-visible{ box-shadow:0 2px 0 var(--au-line) }
.peso-step-n span{ font:300 var(--au-fs-t-s) 'Sora',sans-serif; color:var(--au-muted) }
.peso-folha-erro{ min-height:22px; margin:6px 0 12px; font:400 var(--au-fs-s)/1.5 'Sora',sans-serif; color:var(--au-orange) }
.peso-folha-erro:empty{ visibility:hidden }
.peso-folha .au-btn{ width:100% }
.peso-folha-cancelar{ display:inline-flex; align-items:center; justify-content:center; min-height:44px; margin-top:8px; padding:0 16px }