/* SC-10 — Super Calculadora (redesign). Identidade pelos tokens já carregados na
   página (conhecimento.css + entidades.css): --vermelho, --linha, --raio, --mudo,
   --superficie, --verde, --ambar e afins. Hex direto só onde não existe token
   (fundos fracos de verde). */
.sc10-casca{padding-top:8px;padding-bottom:56px}
.sc10-titulo-secao{font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;color:var(--mudo);margin:0}

/* Hero: 4 chips do que ela responde (âncoras visuais, não links) */
.sc10-promessas{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:22px 0 0;padding:0 0 40px}
.sc10-promessas li{display:inline-flex;align-items:center;gap:8px;padding:8px 15px;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:rgba(255,255,255,.06);color:#e6e9ec;font-weight:600;font-size:.92rem}
.sc10-promessas svg{flex:none;color:var(--ep-vermelho-texto-esc)}

/* Como usar — 3 passos numerados */
.sc10-passos{margin:26px 0 0}
.sc10-passos ol{margin:12px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;counter-reset:sc10passo}
.sc10-passos li{counter-increment:sc10passo;position:relative;padding:16px 18px 16px 54px;border:1px solid var(--linha);border-radius:var(--raio);background:var(--superficie);color:var(--tinta-suave);line-height:1.5;font-size:.95rem}
.sc10-passos li::before{content:counter(sc10passo);position:absolute;left:16px;top:15px;width:26px;height:26px;border-radius:50%;background:var(--vermelho);color:#fff;font-weight:800;font-size:.9rem;display:grid;place-items:center}
.sc10-aviso{margin:20px 0 0}

/* Atalhos de composto: só selecionam; a dose nasce vazia sempre */
.sc10-comecar{margin:20px 0 0}
.sc10-atalhos{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0}
.sc10-atalhos a{display:inline-block;padding:7px 14px;border:1px solid var(--linha);border-radius:999px;background:var(--superficie);color:var(--tinta);font-weight:600;font-size:.9rem;text-decoration:none}
.sc10-atalhos a:hover{border-color:var(--vermelho);color:var(--vermelho)}
.sc10-comecar .nota{margin:8px 0 0;color:var(--mudo);font-size:.85rem}

/* Formulário */
.sc10-form{display:grid;gap:18px;margin-top:18px;padding:22px;border:1px solid var(--linha);border-radius:var(--raio);background:var(--superficie);box-shadow:var(--sombra-leve)}
.sc10-linhas{display:grid;gap:12px}
.sc10-linha{display:grid;grid-template-columns:minmax(190px,1.4fr) minmax(135px,.9fr) minmax(135px,.9fr) auto;gap:12px;align-items:start;padding:14px;border:1px solid var(--linha);border-radius:10px;background:var(--superficie-suave)}
.sc10-linha.sc10-oral{grid-template-columns:minmax(190px,1.4fr) minmax(220px,1fr) auto}
.sc10-campo{display:grid;gap:6px;min-width:0}
.sc10-campo label{font-weight:700;color:var(--tinta);font-size:.88rem}
.sc10-campo select,.sc10-campo input,select.sc10-sexo{width:auto;height:44px;border:1px solid var(--linha);border-radius:8px;background:var(--superficie);padding:0 12px;font:inherit;color:var(--tinta)}
.sc10-campo select,.sc10-campo input{width:100%;min-width:0;max-width:100%}
.sc10-campo select:focus-visible,.sc10-campo input:focus-visible,select.sc10-sexo:focus-visible{outline:3px solid var(--vermelho);outline-offset:1px}

/* ── ACESSIBILIDADE-03 · 05/09/2026 · O CAMPO REPROVADO NÃO TINHA MARCA NENHUMA ──────────────
   O G107 fez o certo do lado de quem ouve: `apontaCulpado` (super-calculadora.js) põe
   `aria-invalid="true"` e `aria-describedby` no campo culpado. No PIXEL não mudava nada. Medido
   nas três páginas a 1280×920, com o foco fora do campo: borda rgb(228,231,234) de 1px, fundo
   branco, sem outline e sem sombra — IDÊNTICOS aos do campo irmão válido. A única pista era o
   anel de foco, e o anel de foco desta folha (a regra logo acima) é o MESMO vermelho que
   qualquer campo recebe ao ser tabulado: ele diz «estou selecionado», não «estou errado». Tirou
   o foco, não sobra sinal nenhum, e a frase global («Escolha um composto na linha cuja dose foi
   preenchida.») não nomeia a linha. Com quatro linhas preenchidas e um composto repetido, as
   oito caixas devolviam UM ÚNICO estilo: nada dizia qual das duas foi a recusada.

   A marca tem de ser própria e PERSISTENTE, e não pode depender só de cor:
     · o campo ganha borda de erro de 2px e fundo de erro — os tokens do design system
       (`--ep-erro` e `--ep-erro-fundo`), que já se ajustam ao tema escuro;
     · o rótulo ganha um triângulo desenhado com bordas, sem texto nenhum dentro
       (`content:""`), para que o leitor de tela não passe a anunciar um caractere a mais no
       nome do campo — quem vê recebe forma, quem ouve já recebia o `aria-invalid`.

   Não se pendura aqui a classe `.ep-campo` do design system (que traria as regras
   `.ep-campo[aria-invalid="true"]` de graça): ela arrasta a caixa inteira do sistema
   — `display:block`, largura, tipografia — para dentro do grid `.sc10-linha`, e isso não foi
   medido. O `padding-inline` de 11px devolve o 1px que a borda mais grossa tira ao texto. */
.sc10-form [aria-invalid="true"]{border-color:var(--ep-erro);border-width:2px;background:var(--ep-erro-fundo);padding-inline:11px}
.sc10-campo:has([aria-invalid="true"])>label{color:var(--ep-erro)}
.sc10-campo:has([aria-invalid="true"])>label::after{content:"";display:inline-block;width:0;height:0;margin-left:7px;vertical-align:-1px;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:11px solid var(--ep-erro)}

.sc10-acoes{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
/* D-SC-03: o seletor de sexo divide a linha com os dois botões, e eles têm 46px por causa
   do padding. Sem isto ficava 2px mais baixo — o desalinhamento que o dono apontou não
   desaparecia só por tirar o rótulo de cima. `width:auto` porque é controlo de linha, e
   não campo de formulário a ocupar a largura toda. */
select.sc10-sexo{width:auto;height:46px}
.sc10-remover{height:44px}
.sc10-estado{padding:12px 14px;border-radius:9px;background:var(--azul-fraco);color:var(--azul)}
.sc10-estado.grave{background:var(--vermelho-fraco);color:var(--vermelho-escuro)}
/* G452 · o botão de repetir vive DENTRO da frase que explica a falha, e não numa barra à parte:
   quem lê «a conta demorou» tem a saída no mesmo lugar onde leu a notícia. Altura de 40px para
   continuar cabendo no dedo. */
.sc10-repetir{display:inline-block;margin-left:12px;height:40px;vertical-align:middle}

/* Selo de autoconferência — cabeçalho dos resultados */
.sc10-selo{margin-top:24px}
.sc10-selo h2{display:flex;align-items:center;gap:9px;margin:0 0 6px;font-size:1.02rem;text-transform:none;letter-spacing:0;color:var(--tinta)}
.sc10-selo.ok h2{color:var(--verde)}
.sc10-selo.ok h2::before{content:"✓";flex:none;width:22px;height:22px;border-radius:50%;background:var(--verde);color:#fff;font-size:.8rem;font-weight:800;display:grid;place-items:center}
.sc10-selo.falha h2{color:var(--vermelho-escuro)}
.sc10-selo.ok p{font-weight:500;color:var(--tinta-suave)}

/* Estado vazio: cartões-fantasma; em carregamento pulsam com aria-busy */
.sc10-fantasma{margin-top:24px}
/* G107 (auditoria do ciclo 08, 31/08/2026) — os dois cartões tracejados apareciam ANTES de
   qualquer cálculo, nos três idiomas: 316px de caixas vazias com barras cinzentas dentro, que é
   exatamente o desenho de um esqueleto de carregamento. Quem chega lê «está carregando» e espera
   por uma conta que ninguém pediu. O esqueleto só faz sentido enquanto há resultado a caminho —
   e é isso que a classe `carregando` já marca. A legenda («Os resultados aparecem aqui · …»)
   continua sempre visível: essa explica, não finge. */
.sc10-fantasma-cartoes{display:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.sc10-fantasma.carregando .sc10-fantasma-cartoes{display:grid}
.sc10-fantasma-cartao{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;align-content:start;min-height:150px;padding:20px;border:1px dashed var(--linha);border-radius:var(--raio);background:var(--superficie)}
.sc10-fantasma-cartao span{grid-column:1/-1;width:45%;height:14px;border-radius:6px;background:var(--superficie-suave)}
.sc10-fantasma-cartao i{display:block;height:36px;border-radius:8px;background:var(--superficie-suave)}
.sc10-fantasma>p{margin:14px 0 0;text-align:center;color:var(--mudo);font-size:.92rem}
.sc10-fantasma.carregando .sc10-fantasma-cartao span,.sc10-fantasma.carregando .sc10-fantasma-cartao i{animation:sc10pulsa 1.2s ease-in-out infinite}
@keyframes sc10pulsa{0%,100%{opacity:.5}50%{opacity:1}}

/* Resultados */
.sc10-resultados{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin-top:16px}
.sc10-card,.sc10-geral{padding:20px;border:1px solid var(--linha);border-radius:var(--raio);background:var(--superficie)}
.sc10-card h2,.sc10-geral h2{margin:0 0 10px}
.sc10-dose{margin:-4px 0 14px;color:var(--mudo);font-size:.9rem}

/* Grelha de 4 tiles de estatística (decalcada de .ferr-res) */
.sc10-tiles{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin:0}
.sc10-tile{display:grid;gap:4px;align-content:start;padding:12px 14px;border:1px solid var(--linha);border-radius:10px;background:var(--superficie-suave)}
.sc10-tile dt{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--mudo)}
.sc10-tile dd{margin:0;font-family:'Saira Condensed', 'Saira Condensed Recurso',sans-serif;font-weight:800;font-size:1.45rem;line-height:1.15;color:var(--tinta);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.sc10-tile dd.sem-valor{font-family:inherit;font-weight:600;font-size:.88rem;color:var(--mudo)}
.sc10-tile-det{margin:0;font-size:.8rem;line-height:1.4;color:var(--mudo)}

/* Pills de proveniência: oficial verde, curada neutra, último recurso âmbar */
.sc10-pill{justify-self:start;display:inline-block;padding:2px 9px;border:1px solid var(--linha);border-radius:999px;background:var(--superficie);color:var(--mudo);font-size:.72rem;font-weight:700;letter-spacing:.02em}
.sc10-pill.fonte_oficial{color:var(--verde);border-color:#bfe3c9;background:#f2fbf4}
.sc10-pill.ultimo_recurso{color:var(--ambar);border-color:#f6d9b0;background:var(--ambar-fraco)}
.sc10-faixa-uso{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin:12px 0 0;font-size:.9rem;color:var(--tinta-suave)}
.sc10-faixa-uso b{color:var(--mudo);font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;font-weight:700}

/* Cartão-herói: espera pós-ciclo em largura total */
.sc10-espera{grid-column:1/-1;display:flex;gap:16px;align-items:flex-start;padding:22px 24px;border:1px solid var(--linha);border-left:4px solid var(--vermelho);border-radius:var(--raio);background:var(--superficie);box-shadow:var(--sombra-leve)}
.sc10-ampulheta{flex:none;color:var(--vermelho);margin-top:3px}
.sc10-espera>div{flex:1;display:grid;gap:4px}
.sc10-espera h2{margin:0}
.sc10-espera-sub{margin:0;color:var(--mudo);font-size:.88rem;max-width:70ch}
.sc10-espera-num{margin:6px 0 0;font-family:'Saira Condensed', 'Saira Condensed Recurso',sans-serif;font-weight:800;font-size:2.1rem;line-height:1.1;color:var(--tinta);font-variant-numeric:tabular-nums}
.sc10-espera-det{margin:0;color:var(--mudo);font-size:.9rem}

/* Linha do tempo qualitativa do protocolo */
.sc10-tl{grid-column:1/-1;padding:20px 24px;border:1px solid var(--linha);border-radius:var(--raio);background:var(--superficie)}
.sc10-tl ol{display:flex;list-style:none;margin:20px 0 0;padding:0}
.sc10-tl-marco{flex:1;position:relative;padding:20px 12px 0 0;font-size:.85rem}
.sc10-tl-marco::before{content:"";position:absolute;top:3px;left:0;width:12px;height:12px;border-radius:50%;background:var(--vermelho)}
.sc10-tl-marco::after{content:"";position:absolute;top:8px;left:17px;right:-1px;border-top:3px solid var(--vermelho)}
.sc10-tl-marco:last-child::after{display:none}
.sc10-tl-marco.tracejado::after{border-top-style:dashed;border-top-color:var(--mudo)}
.sc10-tl-marco b{display:block;color:var(--tinta);font-weight:700}
.sc10-tl-num{display:block;margin-top:2px;font-family:'Saira Condensed', 'Saira Condensed Recurso',sans-serif;font-weight:800;font-size:1.15rem;color:var(--tinta);font-variant-numeric:tabular-nums}
.sc10-tl-marco small{display:block;color:var(--mudo)}
.sc10-tl-nota{margin:16px 0 0;color:var(--mudo);font-size:.82rem;max-width:80ch}

/* Fim do frasco: countdown POSITIVO (planeamento, nunca âmbar) */
.sc10-frasco{display:grid;gap:8px;margin-top:16px;padding:16px 18px;border:1px solid #bfe3c9;border-radius:var(--raio);background:#f2fbf4}
.sc10-frasco-num{margin:0;font-family:'Saira Condensed', 'Saira Condensed Recurso',sans-serif;font-weight:800;font-size:1.25rem;line-height:1.2;color:var(--tinta)}
.sc10-frasco-nota{margin:0;color:var(--mudo);font-size:.83rem}
.sc10-frasco-acoes .botao{height:40px}

/* Resumo geral (monitorização, alertas, protocolo feminino) */
.sc10-geral{grid-column:1/-1}
.sc10-geral ul{padding-left:20px;columns:2}
.sc10-geral li{break-inside:avoid;margin-bottom:6px}
.sc10-geral blockquote{margin:14px 0;padding:16px 18px;border-left:4px solid var(--vermelho);background:var(--superficie-suave);white-space:pre-wrap}
.sc10-geral blockquote footer{margin-top:10px;color:var(--mudo);font-size:.9rem}
.sc10-contradicao{display:block;margin-top:10px;color:var(--vermelho-escuro)}

/* Faixa VIP: depois da entrega de valor, compacta */
.sc10-faixa-vip{display:block;max-width:640px;margin:28px auto 0;padding:9px 16px;border:1px solid rgba(200,16,46,.35);border-radius:999px;background:var(--vermelho-fraco);color:var(--vermelho);font-weight:700;font-size:.88rem;text-align:center;text-decoration:none}
.sc10-faixa-vip:hover{border-color:var(--vermelho)}

/* A conta que ela faz + ferramenta irmã */
.sc10-formulas{margin-top:30px;padding-top:22px;border-top:1px solid var(--linha)}
.sc10-formulas ul{list-style:none;display:grid;gap:8px;margin:12px 0 0;padding:0}
.sc10-formulas code{display:inline-block;padding:8px 12px;border:1px solid var(--linha);border-radius:8px;background:var(--superficie);color:var(--tinta);font-size:.92rem}
.sc10-formulas .nota{margin:12px 0 0;color:var(--mudo);font-size:.9rem;max-width:74ch}
.sc10-irma{margin:18px 0 0}
.sc10-irma a{color:var(--vermelho);font-weight:700;text-decoration:none}
.sc10-irma a:hover{text-decoration:underline}

@media(min-width:761px) and (max-width:1100px){
  .sc10-linha,.sc10-linha.sc10-oral{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sc10-linha>*{min-width:0}
  .sc10-campo select,.sc10-campo input{width:100%;min-width:0}
  .sc10-remover{justify-self:start}
  /* ── RESPONSIVO-05 · 05/09/2026 · O TABLET LIA O NÚMERO PIOR QUE O CELULAR ─────────────────
     Este bloco já existia para o FORMULÁRIO — a linha de composto passa de quatro colunas para
     duas — e esqueceu os RESULTADOS. Acima de 760 px `.sc10-resultados` volta a duas colunas e
     `.sc10-tiles` continua com duas: são QUATRO colunas de número dentro de uma janela de 768.
     Medida a largura útil do `dd` de um ladrilho, igual nos três idiomas: 174 px a 500,
     304 px a 760 e 120 px a 761 — um pixel a mais de janela custava 60% da largura do número, e
     toda a faixa de tablet e de notebook pequeno (761 a ~975 px) lia o número mais estreito do
     que um celular de 500 px. Só aos ~976 px se recuperava. O rótulo comprido de um dos
     ladrilhos ocupava 5 linhas a 768 e a 800 px, e os dois `dd` da mesma fileira desalinhavam
     37 px a 768 e 55 px a 860 (contra 18 px a 500).

     A cura é estender a esta faixa o arranjo que o celular já usa: UMA coluna de cartão, com os
     quatro ladrilhos em 2×2 dentro dele. É o mesmo desenho de baixo de 761 px, e por isso não
     inventa disposição nova nem encurta rótulo nenhum (o texto é do Eagle AI — D12).

     ── 06/09/2026 · Decisão do dono · A FRONTEIRA DE 1101 PX SAIU ────────────────────────────
     Esta nota dizia que a partir de 1101 px o desenho de duas colunas de cartão voltava por
     escolha, e que tirar essa fronteira era decisão visual em aberto. O dono decidiu: «Coluna
     única também no desktop». `.sc10-resultados` e `.sc10-tiles` (abaixo) passaram a ter coluna
     única como REGRA PADRÃO da folha, em qualquer largura — não mais só até 1100 px — e por isso
     as duas linhas que existiam aqui para forçar a coluna única nesta faixa saíram: o padrão já
     faz o que elas faziam. */
}

@media(max-width:760px){
  .sc10-passos ol{grid-template-columns:1fr}
  /* G106 (auditoria do ciclo 08, 31/08/2026) — em espanhol, a 502px, a linha do composto ia até
     526px numa janela de 502, e `overflow-x:clip` cortava o excesso sem deixar rolagem para o
     recuperar: o que passava da borda simplesmente não existia para quem lê.
     A causa é a mesma do G181 no checkout: `1fr` é `minmax(auto, 1fr)` e tem piso no min-content.
     O min-content aqui é o `select` com `width:auto`, que se dimensiona pela opção MAIS LONGA —
     e os nomes dos compostos em espanhol são os mais longos dos três idiomas. Por isso o defeito
     só aparecia lá. `minmax(0,1fr)` tira o piso e o `width:100%` prende o select à célula. */
  .sc10-linha{grid-template-columns:minmax(0,1fr)}
  .sc10-linha.sc10-oral{grid-template-columns:minmax(0,1fr)}
  .sc10-linha>*{min-width:0}
  .sc10-campo select,.sc10-campo input{width:100%;min-width:0}
  .sc10-fantasma-cartoes{grid-template-columns:1fr}
  .sc10-resultados{grid-template-columns:1fr}
  .sc10-geral{grid-column:auto}
  .sc10-geral ul{columns:1}
  .sc10-espera{flex-direction:column;gap:8px}
  .sc10-tl ol{flex-direction:column;gap:16px;margin-top:14px}
  .sc10-tl-marco{padding:0 0 0 24px}
  .sc10-tl-marco::before{top:4px}
  .sc10-tl-marco::after{top:20px;bottom:-14px;left:4.5px;right:auto;border-top:none;border-left:3px solid var(--vermelho)}
  .sc10-tl-marco.tracejado::after{border-left-style:dashed;border-left-color:var(--mudo)}
  /* Botão Calcular sticky só quando há ≥1 composto válido (classe posta pelo JS)

     ── 01/09/2026 · G225 · A BARRA COBRIA O CAMPO QUE ESTAVA COM FOCO ─────────────────────────
     A auditoria do ciclo 11 (alta/P1), em 502 × 750 com mais de uma linha e navegação por Tab: a
     barra `Adicionar composto / Sexo / Calcular protocolo`, de 122 px, ficava SOBRE a primeira
     linha; o campo de dose estava focalizado atrás dela e, no centro do input, o hit-test do
     ponteiro entregava a barra. O teclado chegava a um campo invisível e o dedo acionava outra
     camada — numa tela onde o número que se digita é a dose.

     Três consertos, e o terceiro é o que resolve para quem usa teclado:

       · `scroll-margin-bottom` em tudo o que recebe foco dentro do formulário: quando o navegador
         rola até o campo, ele para ACIMA da barra em vez de debaixo dela. É a compensação de
         rolagem que a auditoria pediu, e é a única que o Tab respeita;
       · espaço no fim do formulário, para a barra ter onde ficar sem se sobrepor ao último campo;
       · e a barra encolhe: os controles passam a caber em duas linhas curtas em vez de três.

     ── 05/09/2026 · RESPONSIVO-04 · A BARRA VOLTOU A CRESCER, E A GUARDA NÃO VIU ───────────────
     O G225 dimensionou a compensação contra uma barra de TRÊS controles — «Adicionar composto /
     Sexo / Calcular protocolo», que é o que o parágrafo acima ainda descreve. O quarto controle,
     «Recomeçar» / «Empezar de nuevo», entrou a 04/09 (71f81bdff0), e com `flex-wrap` cada um
     ficou na sua própria fileira. Medido antes deste conserto, com um composto escolhido e a
     barra já fixa: 231 px em pt-BR de 320 a 390, em es-419 de 320 até 444 (412, 414 e 430 — os
     aparelhos mais comuns — entram todos) e em en abaixo de ~352. Com o `bottom`, 241 px de uma
     janela de 800: 30% da tela tapada enquanto se preenche o formulário. E a guarda comparava
     122 px de folha com 140 px de folha, sem abrir o navegador: passava VERDE.

     O conserto é uma GRELHA de duas colunas em vez do `flex-wrap`, que fixa o número de fileiras
     em DUAS por construção, e uma entrelinha de 1,25 para o rótulo que quebra em duas linhas não
     esticar a fileira. O `min-height` de 44 px mantém o piso de toque do design system mesmo na
     fileira de uma linha só.

     A reserva deixa de ser dois números soltos e passa a sair de UM: `--sc10-barra` é a altura
     declarada da barra e tudo o mais é `calc()` em cima dela. E a guarda
     `o-campo-com-foco-nao-fica-atras-da-barra.mjs` deixou de comparar folha com folha — ela MEDE
     a barra no navegador, nos três idiomas, de 320 a 500 px, e exige que a reserva cubra a altura
     real e que as fileiras não passassem de duas — número que a passagem seguinte corrige. Barra
     que volte a crescer reprova sozinha.

     ── 05/09/2026 · 2ª passagem · A GRELHA DE DUAS COLUNAS CORTAVA O SELETOR DE SEXO ───────────
     O conserto acima mediu a barra por ALTURA, FILEIRAS e RESERVA — e nenhuma dessas três mede se
     o que está escrito dentro dos controles ainda se lê. Prender cada filho à sua célula
     (`width:100%`) numa grelha de duas colunas cortou o rótulo ESCOLHIDO do seletor de sexo, que
     antes nascia com `width:auto` a partir da opção mais longa. Medido no Chromium, com o valor
     já escolhido (caixa / espaço de texto / rótulo): pt-BR 100/76/108 px a 320, 120/96/108 a 360,
     135/111/108 a 390 e 146/122/108 a 412 — cortava em TODAS, e a seta nativa ainda come ~18 px;
     es-419 igual até 412 («Sexo: Femenino» = 113 px); en cortava a 320 e a 360. Na tela via-se
     «Sexo: Fe», «Sexo: Femi», «Sexo: Feme».

     Por que não dá para resolver mantendo duas fileiras: a barra tem 216 px úteis a 320 px de
     janela, e a caixa de que o seletor precisa — medida clonando-o com uma opção só e
     `width:auto`, que é o que o navegador lhe daria para mostrar o rótulo inteiro — é de 159 px em
     pt-BR («Sexo: Masculino»; «Feminino» pede 154) e de 165 px em es-419. E o rótulo mais largo
     dos três idiomas NÃO é um valor escolhido: é o de origem, «Sexo: selecciona». Sobram 45 px
     para o controle vizinho — não cabe rótulo nenhum. A coluna só chega aos 165 px a partir de
     ~440 px de janela (a coluna é (janela − 110) ÷ 2).

     Então o seletor passa a ter FILEIRA INTEIRA abaixo de 481 px (os ~440 medidos, mais 20 px de
     folga para variação de métrica de fonte), e «Calcular protocolo» também — de graça, porque a
     meia largura obrigava-o a duas linhas. São TRÊS fileiras nessa faixa, e o preço é honesto: a
     barra mede 170 px (24,3% de uma janela de 740) contra os 146 px de duas fileiras cortadas e
     os 231 px do defeito de origem. De 481 px para cima o seletor cabe ao lado e as duas fileiras
     voltam, com a barra em 110 px. O enchimento da barra e dos botões encolhe junto (6 px em vez
     de 8/9, e 8 px em vez de 16 na horizontal): é o que mantém a barra sob o teto de um quarto da
     janela e é também o que faz a palavra mais longa de cada botão («Recomeçar», «compuesto»)
     caber na caixa a 320 px, onde antes transbordava por 4 px.

     Nada de texto mudou: encurtar «Sexo: Feminino» seria decisão do dono (D12/D8), não conserto.
     E a guarda ganhou a medida que faltava — LEGIBILIDADE: para cada controle da barra, a caixa
     que o rótulo exige (medida clonando o próprio controle, sem estimar métrica de fonte) tem de
     caber na caixa que a grelha deu.

     ── 05/09/2026 · RESPONSIVO-04 (3ª passagem) · O DONO ENCURTOU O RÓTULO EM VEZ DA GRELHA ──────
     Decisão do dono, citada inteira: «Encurtar os rótulos e voltar a duas fileiras (Recommended)»
     — «Opções «Masculino», «Feminino» e a de origem «Sexo (opcional)»; o nome acessível continua
     «Sexo»; a barra volta a 146 px.» O rótulo de origem («Sexo: selecciona», 165 px em es-419) era
     a peça mais larga da 2ª passagem; sem o prefixo «Sexo: » nas opções e com «Sexo (opcional)» no
     lugar de «Sexo: selecciona», o pior caso cai para 152 px (pt-BR e es-419 empatados em «Sexo
     (opcional)»; en fica em 141 px).

     Medido de novo (clone com `width:auto`, a coluna é (janela − 110) ÷ 2, a mesma fórmula, e a
     largura REAL da coluna a cada ponto — não só a fórmula — conferida no navegador): a coluna
     alcança 152 px a partir de 414 px de janela (151 px a 412, 152,5 a 415) — não mais ~440. Uma
     fronteira colada ao valor exato reprovaria com a mínima variação de métrica de fonte entre
     motores, então a fronteira nova fica em 430 px (os 414 medidos, mais folga — a mesma margem de
     segurança da passagem anterior), 16 px de sobra sobre o ponto exato.

     Isso devolve a MAIORIA da faixa móvel (a partir de 430 px) ao desenho de duas fileiras — e o
     dono pediu que essa faixa voltasse a ser a barra generosa da 1ª passagem (146 px: padding
     8px/10px, entrelinha 8px), não a versão comprimida que a 2ª passagem introduziu só para caber
     três fileiras. A compressão (6 px em vez de 8/9, 8 px em vez de 16 na horizontal) fica
     RESERVADA à faixa estreita que ainda precisa de três fileiras — 320 a 429 px — no bloco
     seguinte; ali o teto de política (um quarto da janela) continua a mandar. */
  /* Duas fileiras passam a ser o desenho PADRÃO desta faixa toda (é o que a maioria de 320–760 px
     usa agora): a barra generosa da 1ª passagem, medida no navegador em ~146 px. */
  .sc10-form.sc10-pronto{--sc10-barra:146px;--sc10-barra-fundo:10px;padding-bottom:calc(var(--sc10-barra) + var(--sc10-barra-fundo))}
  .sc10-form.sc10-pronto .sc10-acoes{position:sticky;bottom:var(--sc10-barra-fundo);z-index:5;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;align-items:stretch;padding:8px 10px;border:1px solid var(--linha);border-radius:12px;background:var(--superficie);box-shadow:var(--sombra-leve)}
  .sc10-form.sc10-pronto .sc10-acoes>*{width:100%;min-width:0;min-height:var(--ep-toque,44px);justify-content:center;text-align:center;line-height:1.25}
  /* O campo focalizado para acima da barra, e não atrás dela. */
  .sc10-form.sc10-pronto input,
  .sc10-form.sc10-pronto select,
  .sc10-form.sc10-pronto button:not([data-calcular]),
  .sc10-form.sc10-pronto a{scroll-margin-bottom:calc(var(--sc10-barra) + var(--sc10-barra-fundo) + 8px)}
}

/* RESPONSIVO-01 (fase de design, 06/09/2026) — abaixo de ~520px o número se descolava da
   unidade dentro do quadro de resultado: «entre 17,14 e» numa linha, «35,71» sozinho na
   seguinte, «semanas» sozinho na terceira — o mesmo valor, partido em três pedaços, porque a
   grelha de 2 colunas (`.sc10-tiles`, acima) reserva só metade do cartão para cada quadro.
   `.sc10-resultados` já empilha os CARTÕES numa coluna só a partir de 760px; os QUADROS dentro
   de cada cartão continuavam em 2 colunas até aqui, e eram eles quem apertava o texto.
   Medido nas cinco larguras da ficha (320/360/390/520/800): coluna única resolve por inteiro —
   o valor pode continuar a quebrar entre palavras («entre X e» numa linha, «Y unidade» na
   seguinte), mas o NÚMERO final e a unidade que o segue não se separam mais. Nada no texto
   muda — só a grelha ganha uma coluna a mais de largura por quadro.

   A faixa foi até 1100px, não até 520px, por causa da guarda RESPONSIVO-05 (05/09/2026, acima):
   ela já exige que o `dd` de um ladrilho nunca fique mais estreito, de 500px até 1100px, do que
   fica a 500px — porque de 761 a 1100px `.sc10-resultados` também empilha os CARTÕES numa coluna
   só (a mesma regra desta folha, algumas linhas acima). Parar esta correção em 520px violava essa
   guarda: a 500px o ladrilho ganhava a coluna única (388px, largo), mas de 521 a 975px continuava
   em 2 colunas (274 a 374px) — mais ESTREITO que o próprio celular de 500px que virou a régua,
   com a suíte inteira (`npm run test:super-calculadora`) reprovando 8 casos. Estendendo a coluna
   única por toda a faixa em que o cartão já é de uma coluna só (o mesmo desenho da guarda
   RESPONSIVO-05, sem inventar disposição nova), o `dd` voltava a crescer com a janela do início
   ao fim, e a fronteira de 1101px (F4, item 5 da ficha) ficava intocada — ali o cartão voltava a
   duas colunas por escolha do dono, e os ladrilhos com ele.

   ── 06/09/2026 · Decisão do dono · A FRONTEIRA DE 1101PX SAIU ────────────────────────────────
   O parágrafo acima descrevia a fronteira como intocada «por escolha do dono» — essa escolha
   mudou. Diante do conflito entre esta correção (coluna única até 1100px) e o F4 (duas colunas a
   partir de 1101px, reprovando a guarda RESPONSIVO-05 em 1101/1200/1440px), o dono decidiu:
   «Coluna única também no desktop». `.sc10-tiles` (acima, no corpo da folha) passou a ter coluna
   única como REGRA PADRÃO em qualquer largura, e por isso a media query que só a aplicava até
   1100px saiu daqui — o padrão já cobre a faixa inteira, sem fronteira nenhuma. */

/* Abaixo de 430 px a coluna ainda não chega aos 152 px de que «Sexo (opcional)» precisa (o pior
   caso dos três idiomas, seta nativa incluída) — ver a medição na nota acima. Só nesta faixa
   estreita o seletor e o botão de calcular voltam a fileira inteira, e só aqui o enchimento
   comprime (era o preço de caber três fileiras sob o teto de um quarto da janela; a barra
   generosa de cima seria alta demais aqui). Medido: 170 px de barra a 320 px, a mesma margem já
   provada na passagem anterior. */
@media(max-width:429px){
  .sc10-form.sc10-pronto{--sc10-barra:170px}
  .sc10-form.sc10-pronto .sc10-acoes{gap:6px;padding:6px 8px}
  .sc10-form.sc10-pronto .sc10-acoes>.botao{padding:6px 8px}
  .sc10-form.sc10-pronto .sc10-acoes>[data-sexo],
  .sc10-form.sc10-pronto .sc10-acoes>[data-calcular]{grid-column:1/-1}
}

/* ── D-SC-01 · doses padrão ──────────────────────────────────────────────────────────────────
   Atalhos de digitação sob o campo de dose. O campo nasce vazio e continua a nascer vazio:
   nenhum destes valores entra na conta sem um clique. */
.sc10-doses { display: flex; flex-direction: column; gap: 5px; margin-top: 7px; }
.sc10-doses-rot {
  font-size: var(--ep-t-11, 11px); font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ep-tinta-mudo);
}
.sc10-doses-lista { display: flex; flex-wrap: wrap; gap: 5px; }
.sc10-dose-chip {
  min-height: 30px; padding: 0 11px;
  border: 1px solid var(--ep-borda); border-radius: var(--ep-raio-pilula);
  background: var(--ep-fundo); color: var(--ep-tinta-suave);
  font-family: var(--ep-fonte-texto); font-size: var(--ep-t-13, 13px);
  font-variant-numeric: tabular-nums; cursor: pointer;
  transition: border-color var(--ep-transicao), color var(--ep-transicao);
}
.sc10-dose-chip:hover { border-color: var(--ep-acento); color: var(--ep-tinta); }
.sc10-dose-chip:focus-visible { outline: 2px solid var(--ep-foco); outline-offset: 2px; }
.sc10-dose-chip[aria-pressed="true"] {
  border-color: var(--ep-acento); background: var(--ep-acento-fundo);
  color: var(--ep-acento-tinta); font-weight: 700;
}
.sc10-dose-livre { font-style: italic; }
.sc10-doses-ajuda { font-size: var(--ep-t-11, 11px); line-height: 1.45; color: var(--ep-tinta-mudo); }
/* O alvo de toque de 30px é menor que os 44px da norma — no telemóvel eles crescem, que é onde
   o dedo é o ponteiro.

   ── 06/09/2026 (fase de design) · 40px → 44px, o piso `--ep-toque` da casa ────────────────────
   Os 40px eram escolha declarada («44px empurrariam o campo de dose para fora do ecrã»), mas a
   ficha pediu medir de novo em vez de aceitar a razão antiga sem prova. Medido no Chromium com
   toque emulado, nos três idiomas, a 320/360/390px, antes e depois: a lista de atalhos
   (`.sc10-doses-lista`, `flex-wrap`) ganha no máximo UMA fileira a mais nos casos mais estreitos
   (320px, pt-BR e es-419: de 3 para 4 fileiras) — nenhum chip quebra a própria fileira, nenhum
   estoura a largura da coluna, e não há transbordo horizontal em largura nenhuma. O campo de
   dose fica ACIMA da lista de atalhos no DOM (é ele quem a lista acompanha, não o contrário);
   a lista crescer empurra o que vem DEPOIS dela na página, não o campo. */
@media (pointer: coarse) { .sc10-dose-chip { min-height: var(--ep-toque, 44px); padding: 0 15px; } }

/* ── ACESSIBILIDADE-06 · 05/09/2026 · DOIS ALVOS DESTA FOLHA ABAIXO DO PISO DE 44 px ─────────
   Medido em 390×844 com toque emulado (`matchMedia("(pointer: coarse)")` verdadeiro), nos três
   idiomas, com a tela de resultados aberta:

     · os seis atalhos de «Comece por um composto» mediam 39 px de altura — em TODAS as larguras
       e também no dedo. É o menor alvo de ação da página e não tinha `min-height`, nem
       `--ep-toque`, nem regra nenhuma sob `pointer: coarse`;
     · «Adicionar ao calendário» (201×40) ENCOLHIA: o `.botao` da casa mede 45,6 px pelo próprio
       padding — é o que medem «Adicionar composto», «Recomeçar» e «Calcular protocolo» — e a
       regra `.sc10-frasco-acoes .botao{height:40px}` puxava-o para 40. Era um dos dois únicos
       botões da tela de resultados (o outro, «Lembrar no WhatsApp», saiu em 06/09/2026), que é
       onde o dedo cai depois de calcular.

   Os atalhos de dose (`.sc10-dose-chip`, a regra logo acima) NÃO foram tocados aqui — subiram
   depois, na fase de design (06/09/2026), para os mesmos 44px deste bloco, com a razão escrita
   na própria regra e medida de novo (não a mesma razão de 05/09, que não tinha prova).

   O «Tentar de novo» (`.sc10-repetir`, G452) entra aqui pelo mesmo motivo, e vai ALÉM da ficha
   que pediu este conserto: ela deixara-o de fora por não o ter medido — «só existe no estado de
   prazo esgotado e nunca apareceu nas passagens». Apareceu: com o pedido pendurado até o prazo de
   25 s da página, ele nasce com 40 px, pela mesma regra de altura fixa. É o ÚNICO botão da tela
   de falha, e é o botão que devolve a conta a quem já esperou. No desktop continua com os 40 px
   que o G452 escolheu para ele caber na frase; só cresce no dedo. */
@media (pointer: coarse) {
  .sc10-atalhos a { display: inline-flex; align-items: center; min-height: var(--ep-toque, 44px); }
  .sc10-frasco-acoes .botao { height: auto; min-height: var(--ep-toque, 44px); }
  .sc10-repetir { height: auto; min-height: var(--ep-toque, 44px); }
}

/* Os atalhos de dose fizeram a coluna do meio crescer, e com `align-items:end` as outras duas
   desciam com ela — os três rótulos deixavam de estar na mesma linha. A linha passa a alinhar
   pelo TOPO, que é onde os rótulos estão, e só o botão de remover mantém o alinhamento pelo
   fundo, que é onde os campos acabam. */
.sc10-linha > .sc10-remover { align-self: end; }
.sc10-campo { align-content: start; }

/* A RAZÃO DE CADA EXAME — 29/08/2026.
   Vem por baixo do nome, menor e mais apagada: o exame é a instrução, a razão é o apoio.
   Quase toda ela é citação literal de bula, por isso corre à largura toda e não se trunca —
   truncar uma citação é o começo de a deturpar. */
.razao-do-exame {
  margin: 4px 0 0;
  font-size: var(--ep-t-14, 0.875rem);
  line-height: var(--ep-lh-corpo, 1.55);
  color: var(--ep-tinta-mudo, #4a5157);
}
/* A RAZÃO ABRE SOB DEMANDA — 05/09/2026 (RESPONSIVO-06, decisão do dono «Abrir cada razão sob
   demanda (details/summary), citação inteira preservada»). O nome do exame é o `summary`: alvo de
   toque no piso da casa, marcador nativo mantido (é o que diz «há mais aqui»), e a razão inteira
   abaixo, como sempre foi. Nada se trunca: só a revelação muda. */
.exame-razao > summary {
  cursor: pointer;
  min-height: var(--ep-toque, 44px);
  display: flex;
  align-items: center;
  gap: 6px;
}
.exame-razao > summary::-webkit-details-marker { display: none; }
.exame-razao > summary::before {
  content: "";
  flex: 0 0 auto;
  width: 0; height: 0;
  border-left: 6px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform .15s ease;
}
.exame-razao[open] > summary::before { transform: rotate(90deg); }
.exame-razao > summary:focus-visible { outline: 2px solid var(--ep-foco, currentColor); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .exame-razao > summary::before { transition: none; } }

/* AVISO PRESO À FAIXA — 29/08/2026.
   Não é nota de rodapé: acompanha um número que a curadoria da casa liga a dano IRREVERSÍVEL.
   Por isso herda a cor de aviso do sistema e não a de texto apagado — o contrário da razão do
   exame, que é apoio. Aqui o texto é condição de o número poder ser lido. */
.sc10-faixa-aviso {
  margin: 6px 0 0;
  padding: 8px 10px;
  border-left: var(--ep-borda-grossa, 3px) solid var(--ep-aviso, #b26a00);
  background: var(--ep-erro-fundo, #fdf3ec);
  font-size: var(--ep-t-14, 0.875rem);
  line-height: var(--ep-lh-corpo, 1.55);
  color: var(--ep-tinta, #14171a);
}