/* ============================================================
   ROTEM na Prática — folha de estilo

   Duas regras para manter isto legível ao longo do tempo:

   1. NENHUMA cor literal fora do bloco de temas abaixo. Cor sempre por token
      semântico (o que a cor significa), nunca por valor. Foi a ausência disso
      que impediu o modo claro de existir: a paleta estava espalhada em 137
      hexadecimais soltos, sem alavanca para trocar.

   2. NENHUM tamanho de fonte literal. Só os degraus da escala. Antes eram 25
      tamanhos distintos, quase todos separados por meio pixel — o olho não
      consegue montar hierarquia com isso e a tela inteira parece competir
      por atenção.

   As cores dos canais (EXTEM/INTEM/FIBTEM/HEPTEM/APTEM) são convenção do
   equipamento e têm um par por tema: mesmo matiz reconhecível, luminância
   recalibrada para o fundo.
   ============================================================ */

/* ---------- escala tipográfica: 8 degraus ---------- */
:root{
  /* Tipografia */
  --fs-2xs: clamp(10px, 1.5vw, 11px);
  --fs-xs: clamp(11.5px, 1.8vw, 13px);
  --fs-sm: clamp(13px, 2vw, 14.5px);
  --fs-base: clamp(15px, 2.2vw, 16.5px);
  --fs-md: clamp(16px, 2.5vw, 18px);
  --fs-lg: clamp(19px, 3vw, 22px);
  --fs-xl: clamp(24px, 4vw, 30px);
  --fs-display: clamp(34px, 5vw, 44px);

  /* Espaçamento (Escala Fluida / Apple) */
  --space-3xs: 2px;
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;

  /* Formas (Raios mais arredondados / Squircle vibe) */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 9999px;

  /* ---------- movimento ----------
     Uma curva só para tudo que responde ao dedo. Ela sai rápido e chega devagar,
     que é o que faz um controle parecer preso a uma mola em vez de a um relógio:
     o olho lê a saída como resposta imediata e a chegada como acomodação. Curvas
     simétricas (ease, linear) soam mecânicas exatamente por não terem isso. */
  --ease: cubic-bezier(.32,.72,0,1);
  --dur-toque: .18s;    /* resposta a hover e pressão */
  --dur-tela: .32s;     /* algo entrando ou saindo da tela */
}

/* ---------- TEMA ESCURO (padrão) ---------- */
:root, [data-theme="dark"]{
  color-scheme:dark;

  --bg:#0e1116;
  --surface-1:#161b22;      /* card */
  --surface-2:#1c2430;      /* controle sobre o card */
  --surface-3:#0a0d12;      /* recesso: input, caixa de dado */
  --border:#2a3441;
  --border-soft:#1e2530;

  --text-1:#e6edf3;         /* corpo */
  --text-2:#9fb0c2;         /* secundário */
  --text-3:#8a9cb0;         /* rótulo */
  --text-4:#5c6c7e;         /* nota de rodapé, referência */
  --text-strong:#ffffff;    /* destaque dentro de parágrafo */

  --accent:#7c9cff;
  --accent-on:#0b1020;      /* texto sobre o accent */
  --accent-soft:#86a7ff;    /* accent como texto sobre fundo escuro */
  --accent-line:#4c74c0;

  --ok-bg:#12261a;   --ok-border:#245c33;  --ok-text:#7ee0a1;  --ok:#3fb950;  --ok-on:#06210d;
  --warn-bg:#2b2413; --warn-border:#5c4d1f;--warn-text:#e8c766;--warn:#e3b341; --warn-on:#2a1f00;
  --bad-bg:#2b1517;  --bad-border:#5c2b2f; --bad-text:#ff9a94; --bad:#f85149;
  --info-bg:#1a2740; --info-border:#2f4a78;--info-text:#9dc0ff;--info-bg-deep:#141c2b;
  --tag-bg:#22304a;  --tag-text:#9dc0ff;

  /* canais — convenção do equipamento */
  --ex:#3fb950; --in:#58a6ff; --fib:#f85149; --hep:#2ddede; --ap:#e3b341;

  /* traçado */
  --canvas-grid:#1e2530; --canvas-axis:#2a3441; --canvas-label:#5c6c7e;
  --canvas-guide:#8899aa88; --canvas-mcf:#ffffff33;

  --shadow-lift: 0 8px 24px rgba(0,0,0,0.4);
  --shadow-card: 0 24px 64px rgba(0,0,0,0.5), 0 8px 24px rgba(0,0,0,0.3);

  /* Para onde uma superfície caminha ao receber o cursor. No escuro ela clareia;
     no claro, escurece. Sempre em direção ao contraste com o próprio texto,
     nunca em direção a uma cor fixa — foi apostar numa cor fixa que fez o texto
     dos botões coloridos sumir. */
  --hover-para: #ffffff;
  --hover-forca: 10%;
  --press-forca: 16%;
  --gate-glow-a:#1d3155; --gate-glow-b:#172f2b;
}

/* ---------- TEMA CLARO ---------- */
[data-theme="light"]{
  color-scheme:light;

  --bg:#f4f7fa;
  --surface-1:#ffffff;
  --surface-2:#eef2f7;
  --surface-3:#f7f9fc;
  --border:#d3dce6;
  --border-soft:#e7ecf2;

  --text-1:#0f1620;
  --text-2:#46596d;
  --text-3:#5b6f85;
  --text-4:#7d8ea1;
  --text-strong:#000000;

  --accent:#2f4bbd;
  --accent-on:#ffffff;
  --accent-soft:#26409f;
  --accent-line:#7d97e0;

  --ok-bg:#e7f6ec;   --ok-border:#9ecfae;  --ok-text:#10632c;  --ok:#1a7f37;  --ok-on:#ffffff;
  /* âmbar preenchido: claro com texto escuro. Escurecer o âmbar para caber texto branco
     produz um marrom pesado que destoa do resto da paleta clara. */
  --warn-bg:#fdf4e0; --warn-border:#dfc888;--warn-text:#7a5504;--warn:#f0a72a; --warn-on:#3b2900;
  --bad-bg:#fdeceb;  --bad-border:#efb0aa; --bad-text:#a01c14; --bad:#cf222e;
  --info-bg:#e9f1fe; --info-border:#b2c8f2;--info-text:#1c468f;--info-bg-deep:#eff4fe;
  --tag-bg:#e2eafb;  --tag-text:#1c468f;

  --ex:#1a7f37; --in:#0969da; --fib:#cf222e; --hep:#0b7f7f; --ap:#9a6700;

  --canvas-grid:#e7ecf2; --canvas-axis:#c6d2e0; --canvas-label:#7d8ea1;
  --canvas-guide:#8899aa99; --canvas-mcf:#00000026;

  --shadow-lift: 0 8px 24px rgba(15,22,32,0.06);
  --shadow-card: 0 24px 64px rgba(15,22,32,0.08), 0 8px 24px rgba(15,22,32,0.04);

  --hover-para: #0f1620;
  --hover-forca: 7%;
  --press-forca: 12%;
  --gate-glow-a:#dbe6fb; --gate-glow-b:#dcefe9;
}

*{box-sizing:border-box}

/* ---------- o "travamento" que não era travamento ----------
   No iPhone, dois toques seguidos num controle — apertar e apertar de novo por
   impaciência — o Safari lê como duplo-toque e amplia a página. Os controles
   fixos (transporte, abas) ficam então ancorados a um viewport maior que a área
   visível, saem da tela pelas bordas, e a impressão é de aplicativo travado.

   touch-action:manipulation desliga SÓ o duplo-toque-para-ampliar nestes
   elementos. O gesto de pinça continua funcionando na página inteira, que é o
   que importa para quem precisa aumentar os números. */
button, label, summary, a, .tabbtn, .caseitem, .opt, .mecopt, .predopt, .answer{
  touch-action:manipulation;
}
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

body{margin:0;background:var(--bg);color:var(--text-1);
  font:var(--fs-base)/1.6 'Inter', -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
[hidden]{display:none!important}
button{font:inherit;cursor:pointer;border:none;border-radius:var(--r-sm)}

/* ---------- foco ----------
   Um anel duplo — halo translúcido por fora, traço firme por dentro — em vez de
   um contorno de 2px. O halo garante que o indicador apareça sobre qualquer
   fundo, inclusive sobre o próprio accent, onde um traço da mesma cor sumiria.
   `:focus-visible` e não `:focus`: quem clica com o mouse não precisa ver isto,
   quem navega por teclado precisa. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  box-shadow:0 0 0 5px color-mix(in oklab, var(--accent), transparent 78%)}
button:disabled{opacity:.32;cursor:not-allowed}
h1,h2,h3,h4{margin:0;font-weight:600}
.wrap{max-width:1500px;margin:0 auto;padding:var(--space-md)}

/* acesso e identidade */
.access-gate{min-height:100vh;display:grid;place-items:center;padding:var(--space-lg);
  background:radial-gradient(circle at 18% 12%,var(--gate-glow-a) 0,transparent 34%),
             radial-gradient(circle at 82% 82%,var(--gate-glow-b) 0,transparent 31%),var(--bg)}
.access-card{width:min(540px,100%);background:var(--surface-1);border:1px solid var(--border);
  border-radius:var(--r-xl);padding:var(--space-xl);box-shadow:var(--shadow-card)}
/* A arte foi recortada na própria silhueta, então esta altura é a da marca em si,
   não de um quadrado com margem embutida. O tema decide qual arquivo buscar: só
   o do tema ativo é baixado. */
.access-brand{margin:0 auto 16px;height:124px;
  background-repeat:no-repeat;background-position:center;background-size:contain}
/* O ?v= não é enfeite: a hospedagem só manda no-cache para js, css e html, então
   uma imagem trocada com o mesmo nome continuaria velha no navegador de quem já
   visitou. Suba o número sempre que a arte mudar. */
html[data-theme="light"] .access-brand{background-image:url('../img/logo-light.png?v=2')}
html[data-theme="dark"]  .access-brand{background-image:url('../img/logo-dark.png?v=2')}
html[data-theme="dark"] .light-only{display:none !important;}
html[data-theme="light"] .dark-only{display:none !important;}
.access-kicker{margin-top:var(--space-lg);color:var(--accent-soft);text-transform:uppercase;letter-spacing:1.5px;font-size:var(--fs-2xs);font-weight:800}
.access-card h1{font-size:var(--fs-xl);line-height:1.16;letter-spacing:-.6px;margin:7px 0 12px}
.access-lead{color:var(--text-2);font-size:var(--fs-md);line-height:1.7;margin:0 0 23px}
.checkout-area{text-align:center;margin-bottom:var(--space-xl)}
.checkout-btn{
  width:100%;font-size:var(--fs-md);padding:16px;text-decoration:none;
  display:flex;align-items:center;justify-content:center;gap:10px;
  background:var(--text-1);color:var(--bg);
  font-weight:800;letter-spacing:0.5px;
  border-radius:var(--r-xl);
  box-shadow:0 8px 24px -6px var(--text-2);
  transition:all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.btn.checkout-btn:hover:not(:disabled){
  transform:translateY(-3px) scale(1.015);
  box-shadow:0 12px 32px -8px var(--text-2);
  background:var(--text-1);color:var(--bg);
}
.checkout-btn:active{transform:translateY(1px) scale(0.98);box-shadow:var(--shadow-lift)}
.checkout-note{font-size:var(--fs-xs);color:var(--text-3);margin-top:var(--space-sm)}
.access-divider{display:flex;align-items:center;text-align:center;color:var(--text-4);font-size:var(--fs-xs);margin:var(--space-xl) 0 var(--space-md)}
.access-divider::before, .access-divider::after{content:'';flex:1;border-bottom:1px solid var(--border-soft)}
/* :not() é pseudo-CLASSE (dois-pontos simples) e vai no elemento, não no
   pseudo-elemento — dois pseudo-elementos também não se encadeiam. Escrito como
   ::not(...)::before, o seletor era inválido e o navegador descartava as duas
   regras: o texto do divisor encostava nas linhas. */
.access-divider:not(:empty)::before{margin-right:12px}
.access-divider:not(:empty)::after{margin-left:12px}
.access-actions{display:grid;gap:var(--space-sm)}
/* únicas cores literais do arquivo: identidade visual exigida por Google e Apple,
   que não muda com o tema do app */
.auth-btn{width:100%;padding:11px 14px;border:1px solid var(--border);background:#fff;color:#17202a;
  font-weight:750;display:flex;align-items:center;justify-content:center;gap:var(--space-sm)}
.auth-btn span{font-size:var(--fs-md);line-height:1}.auth-btn.apple{background:#07090c;color:#fff;border-color:#3d4653}
.auth-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:var(--shadow-lift)}
.activation-form{border-top:1px solid var(--border);margin-top:18px;padding-top:16px}
.activation-form label{display:block;font-size:var(--fs-sm);color:var(--text-2);margin-bottom:7px}
.activation-form>div{display:flex;gap:7px}.activation-form input{min-width:0;flex:1;background:var(--surface-3);
  border:1px solid var(--border);color:var(--text-1);border-radius:var(--r-sm);padding:9px 10px;font:inherit;text-transform:uppercase}
.access-status{min-height:22px;color:var(--text-2);font-size:var(--fs-sm);line-height:1.55;margin-top:var(--space-md)}
.access-status.error{color:var(--bad-text)}.access-status.ok{color:var(--ok-text)}
.access-legal{color:var(--text-4);font-size:var(--fs-2xs);line-height:1.6;margin:22px 0 0}

/* ---------- demonstração da página de venda ----------
   Mora depois do portão: a altura acima dele não muda, então nem o botão de
   compra nem a entrada por e-mail descem de posição por causa desta seção.
   O .access-gate tem min-height:100vh, então quem chega vê a mesma tela de
   antes e isto só aparece para quem rola. */
.demo{background:var(--bg);padding:clamp(48px,9vw,96px) var(--space-lg) clamp(56px,10vw,110px);
  border-top:1px solid var(--border)}
.demo-topo{width:min(680px,100%);margin:0 auto clamp(28px,5vw,46px);text-align:center}
.demo-kicker{color:var(--accent-soft);text-transform:uppercase;letter-spacing:1.5px;
  font-size:var(--fs-2xs);font-weight:800}
.demo h2{font-size:var(--fs-xl);line-height:1.16;letter-spacing:-.6px;margin:7px 0 12px}
.demo-lead{color:var(--text-2);font-size:var(--fs-md);line-height:1.7;margin:0}

/* Uma coluna no celular, duas a partir do tablet. Sem carrossel: rolar é o que
   o polegar já faz, e um carrossel esconde metade do argumento atrás de um
   gesto que ninguém pediu. */
.demo-passos{list-style:none;margin:0 auto;padding:0;width:min(1080px,100%);
  display:grid;gap:clamp(26px,4vw,40px);grid-template-columns:1fr}
@media (min-width:760px){
  .demo-passos{grid-template-columns:1fr 1fr}
  /* São cinco: o último sobra sozinho e deixa um buraco do lado direito.
     Ocupando a largura inteira e centrado, a fileira fecha. */
  .demo-passo:last-child{grid-column:1 / -1;justify-self:center;width:min(520px,100%)}
}
.demo-passo figure{margin:0;background:var(--surface-1);border:1px solid var(--border);
  border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-card);height:100%;
  display:flex;flex-direction:column}
/* As capturas têm alturas naturais diferentes — o cartão de um caso não tem a
   mesma altura da tela de uma questão. Antes eu forçava todas numa caixa com
   object-fit:cover, e o corte caía no meio de títulos e botões: cada imagem
   parecia fatiada num ponto arbitrário.

   Agora a caixa tem proporção fixa e a imagem é CONTIDA e centrada nela. Nada é
   cortado duas vezes, e a sobra assume a cor de tela de aparelho — que é o que
   a imagem é. */
.demo-passo .tela{aspect-ratio:4 / 5;background:#0e1116;overflow:hidden}
/* `object-fit:contain` numa imagem que ocupa a caixa inteira, e não
   max-width/max-height em porcentagem: a altura da caixa vem de aspect-ratio, e
   porcentagem resolvida contra ela falha — as capturas mais altas estouravam a
   caixa e voltavam a ser cortadas embaixo, que era exatamente o defeito. */
.demo-passo img{display:block;width:100%;height:100%;object-fit:contain}
.demo-passo figcaption{padding:16px 18px 20px;color:var(--text-2);
  font-size:var(--fs-sm);line-height:1.65}
.demo-passo figcaption b{color:var(--text-1);font-weight:700}
.demo-fim{width:min(540px,100%);margin:clamp(36px,6vw,58px) auto 0;text-align:center}
.demo-fim .checkout-btn{width:100%}
.local-preview{margin-top:7px;width:100%}
.account-area{margin-left:auto;display:flex;align-items:center;gap:var(--space-sm);padding-left:8px}
.account-area>div{display:flex;flex-direction:column;line-height:1.25;text-align:right;max-width:190px}
.account-area b{font-size:var(--fs-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.account-area small{font-size:var(--fs-2xs);color:var(--text-3)}
.account-area .btn{font-size:var(--fs-2xs);padding:6px var(--space-sm)}
@media(max-width:620px){
  .access-card{padding:25px}
  .access-card h1{font-size:var(--fs-lg)}
  .account-area > div{display:none}
}

/* ---------- topbar: navegação em cima, simulação embaixo ----------
   Eram cinco classes de controle na mesma linha (seção, consulta, modo,
   conta, relógio). Separadas, cada faixa responde a uma pergunta só. */
/* O fundo sólido vem primeiro de propósito: color-mix() só existe no Safari 16.2+
   e no Chrome 111+. Sem essa linha, um iPhone mais antigo descarta a declaração
   inteira e a barra fica transparente, com o conteúdo passando por baixo dela ao
   rolar. Quem entende color-mix simplesmente sobrescreve. */
.topbar{display:flex;align-items:center;gap:var(--space-sm);flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;
  background:var(--surface-1);
  background:color-mix(in srgb, var(--surface-1) 85%, transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--space-xs) var(--space-sm);margin-bottom:var(--space-sm);
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.topbar::-webkit-scrollbar{display:none}
.topbar .nav-group{display:flex;gap:var(--space-3xs);padding:var(--space-2xs);background:var(--surface-2);border-radius:var(--r-md);flex-shrink:0}
.topbar .util-group{margin-left:auto;display:flex;align-items:center;gap:var(--space-xs);flex-shrink:0}
.brand{font-size:var(--fs-md);font-weight:700;letter-spacing:.3px;margin-right:4px}
.brand span{color:var(--accent)}
.pilot-badge{display:inline-block;margin-left:6px;padding:2px 7px;border:1px solid var(--accent-line);
  border-radius:var(--r-pill);color:var(--info-text);background:var(--info-bg);font-size:var(--fs-2xs);font-weight:800;
  letter-spacing:.8px;text-transform:uppercase;vertical-align:2px}

/* barra de simulação: aparece só dentro de um caso */
.simbar{display:flex;align-items:center;gap:var(--space-sm);flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;
  background:var(--surface-1);
  background:color-mix(in srgb, var(--surface-1) 85%, transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--border);border-radius:var(--r-lg);
  padding:var(--space-xs) var(--space-sm);margin-bottom:var(--space-sm);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.simbar::-webkit-scrollbar{display:none}
.simbar .lbl{font-size:var(--fs-2xs);letter-spacing:1.2px;text-transform:uppercase;color:var(--text-3);font-weight:700}
.simbar.pre .spd,.simbar.pre #seedChip{display:none}   /* antes de iniciar: só a escolha de modo */

/* ---------- controles de transporte flutuantes ----------
   Pausar e adiantar são as ações que mais se repetem durante a leitura de um caso.
   Presas no topo, exigiam subir a página inteira — e no celular ainda rolar a barra
   para o lado. Aqui elas acompanham a rolagem, no desktop e no celular. */
.simfloat{position:fixed;z-index:900;display:flex;align-items:center;gap:var(--space-2xs);
  background:var(--surface-1);border:1px solid var(--border);border-radius:var(--r-pill);
  padding:6px;box-shadow:var(--shadow-card);
  right:var(--space-md);bottom:calc(var(--space-md) + env(safe-area-inset-bottom))}
.simfloat .clockface{font-size:var(--fs-md);min-width:76px;padding:4px 10px;border:none;background:transparent}
.simfloat .btn{min-height:38px;padding:8px var(--space-sm);font-size:var(--fs-sm);border-radius:var(--r-pill)}
.simfloat .btn#btnPlay{background:var(--accent);color:var(--accent-on);font-weight:700}
.simfloat .btn#btnPlay.rodando{background:var(--surface-2);color:var(--text-1);font-weight:600}
body.modal-open .simfloat{display:none}     /* o modal é a única coisa que aceita toque */

/* ---------- aviso de marco ----------
   Aparece logo acima do transporte, quando o parâmetro fica pronto em todos os
   canais. É um convite a decidir, não um bloqueio: as duas saídas ficam à mão. */
.marco{position:fixed;z-index:901;background:var(--info-bg);border:1px solid var(--accent-line);
  border-radius:var(--r-lg);padding:var(--space-sm) var(--space-md);box-shadow:var(--shadow-card);
  right:var(--space-md);bottom:calc(var(--space-md) + 62px + env(safe-area-inset-bottom));
  max-width:min(420px,calc(100vw - 2 * var(--space-md)))}
.marco-txt{font-size:var(--fs-sm);line-height:1.5;color:var(--info-text);margin-bottom:var(--space-xs)}
.marco-txt b{color:var(--text-1)}
.marco-acoes{display:flex;gap:var(--space-xs);flex-wrap:wrap;justify-content:flex-end}
body.modal-open .marco{display:none}
@media(max-width:1250px){
  .marco{left:14px;right:14px;max-width:none;
    bottom:calc(84px + 62px + env(safe-area-inset-bottom))}
  .marco-acoes .btn{flex:1 1 auto}
}
@media(max-width:1250px){
  /* acima da pílula de abas, que ocupa o rodapé no celular */
  .simfloat{left:14px;right:14px;justify-content:center;
    bottom:calc(84px + env(safe-area-inset-bottom))}
}
.clock{display:flex;align-items:center;gap:var(--space-sm);flex-wrap:wrap}
.clockface{font-variant-numeric:tabular-nums;font-size:var(--fs-lg);font-weight:700;
  background:var(--surface-3);border:1px solid var(--border);border-radius:var(--r-md);padding:3px 12px;min-width:104px;text-align:center}
.spd{display:flex;gap:var(--space-3xs)}
.spd button{background:var(--surface-2);color:var(--text-2);padding:var(--space-xs) var(--space-sm);font-size:var(--fs-sm);border:1px solid transparent;border-radius:var(--r-pill)}
.spd button{transition:background-color .18s var(--ease), color .18s var(--ease)}
/* O rótulo sobe para --text-1 junto com o fundo. Mantê-lo em --text-2, que é
   uma cor de apoio, custava contraste exatamente no estado em que o aluno está
   olhando para o controle. */
.spd button:hover:not(.on){background:color-mix(in oklab, var(--surface-2), var(--hover-para) var(--hover-forca));color:var(--text-1)}
.spd button:active:not(.on){background:color-mix(in oklab, var(--surface-2), var(--hover-para) var(--press-forca));color:var(--text-1);transform:scale(.98)}
.spd button.on:active{transform:scale(.98)}
.spd button.on{background:var(--accent);color:var(--accent-on);font-weight:700;border-color:transparent;box-shadow:var(--shadow-lift)}
.spd button.on:hover{background:color-mix(in oklab, var(--accent), var(--hover-para) var(--hover-forca))}
/* ---------- botões ----------
   O variante declara o TOKEN; a base o consome; o hover deriva dele. Antes o
   variante pintava `background` direto e o hover pintava por cima com uma cor
   fixa — e como `.btn:hover:not(:disabled)` tem especificidade (0,3,0) contra
   (0,2,0) de `.btn.primary`, o hover vencia sempre, trocava o fundo e deixava
   a cor do texto do variante. O resultado media 1,03:1 de contraste: texto
   branco sobre quase-branco no tema claro, e quase-preto sobre quase-preto no
   escuro. Invisível, nos dois.

   Nesta forma o efeito é derivado da cor real do botão, então um variante novo
   nasce com hover correto sem ninguém precisar lembrar de escrevê-lo. */
.btn{
  --btn-bg: var(--surface-2);
  --btn-fg: var(--text-1);
  /* .btn também veste <a> — os CTAs da página de vendas são links. Sem isto,
     todo botão-âncora sai SUBLINHADO, e a página inteira parece malfeita. */
  text-decoration:none;
  background:var(--btn-bg); color:var(--btn-fg);
  padding:var(--space-sm) var(--space-md);
  border:1px solid transparent;border-radius:var(--r-pill);min-height:44px;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background-color .18s var(--ease), transform .18s var(--ease),
             box-shadow .18s var(--ease), border-color .18s var(--ease)}
.btn:hover:not(:disabled){
  background:color-mix(in oklab, var(--btn-bg), var(--hover-para) var(--hover-forca))}
/* Afundar sob o dedo em vez de saltar: o toque confirma que foi registrado sem
   deslocar o que está em volta. */
.btn:active:not(:disabled){
  background:color-mix(in oklab, var(--btn-bg), var(--hover-para) var(--press-forca));
  transform:scale(.98)}
.btn.primary{--btn-bg:var(--accent); --btn-fg:var(--accent-on); font-weight:700;box-shadow:var(--shadow-lift)}
.btn.go{--btn-bg:var(--ok); --btn-fg:var(--ok-on); font-weight:700;box-shadow:var(--shadow-lift)}
.btn.warn{--btn-bg:var(--warn); --btn-fg:var(--warn-on); font-weight:700;box-shadow:var(--shadow-lift)}
.btn.ghost{--btn-bg:transparent}
.btn-icon{padding:var(--space-xs) var(--space-sm);line-height:1;border-radius:var(--r-md)}
.btn-sm{padding:var(--space-2xs) var(--space-sm);min-height:34px;font-size:var(--fs-xs)}
/* rótulo de parâmetro que abre a explicação clínica: é um botão, mas precisa
   ler como rótulo de tabela — sem caixa, sem fundo, só o pontilhado de dica */
.btn-tip{background:none;padding:0;border:none;color:var(--text-3);font:inherit;
  font-size:var(--fs-xs);letter-spacing:.4px;text-align:left;min-height:0;
  border-bottom:1px dotted var(--border);border-radius:0}
.btn-tip:hover{color:var(--accent-soft);border-bottom-color:var(--accent-line)}
.btn-tip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.grid{display:grid;grid-template-columns:330px 1fr 322px;gap:var(--space-md);align-items:start}

/* Tab System Mobile/Tablet */
.mobile-tabs{display:none}

@media(max-width:1250px){
  /* Modo Celular / Tablet Portrait */
  .grid { display: block; padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
  .tab-pane { display: none; }
  .tab-pane.active { display: block; animation: fadeIn .3s ease; }
  /* Respiro ao rolar até os traçados: encostados no topo eles perdem a fileira
     de ensaios logo acima, que é a referência de qual pergunta cada curva
     responde. */
  #channels{ scroll-margin-top: var(--space-md) }

  .mobile-tabs {
    display: flex;
    position: fixed;
    bottom: calc(16px + env(safe-area-inset-bottom));
    left: 14px;
    right: 14px;
    z-index: 1000;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 100px;
    padding: 5px;
    gap: 4px;
    box-shadow: var(--shadow-card);
  }
  
  /* Removemos o sticky do card principal para não engolir a tela */
  #col-paciente .card:first-child {
    position: relative;
    z-index: 1;
    box-shadow: none;
  }

  .tabbtn {
    flex: 1;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-2);
    font-size: var(--fs-sm);
    font-weight: 600;
    padding: 10px 4px;
    border-radius: 100px;
    min-height: 40px;
  }
  .tabbtn.on { 
    background: var(--surface-1); 
    color: var(--text-1); 
    font-weight: 700;
    box-shadow: var(--shadow-lift); 
  }
}

@media(max-width:760px){
  /* Reduzir o topbar/simbar em telas bem pequenas para economizar espaço */
  .topbar { padding: 5px 8px; gap: 6px; }
  .topbar .brand { display: none; } /* Oculta a logo para salvar espaço, mas mantém a navegação e o tema */
  .topbar .nav-group { margin-left: 0; }
  .topbar .navbtn { padding: 4px 8px; font-size: var(--fs-xs); }
  .simbar { padding: 5px 8px; margin-bottom: 6px; gap: 6px; }
  /* A barra tinha de rolar para o lado num aparelho estreito. O rótulo é
     decorativo e o código do caso reaparece no cabeçalho da análise — sem os
     dois, o que resta (modo e ritmo) cabe inteiro na tela. */
  .simbar .lbl { display: none; }
  .simbar #seedChip { display: none; }
  .chanbody{grid-template-columns:1fr}
  .params{border-left:none!important;border-top:1px solid var(--border)}
}

@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

.card{background:var(--surface-1);border:1px solid var(--border-soft);border-radius:var(--r-lg);padding:var(--space-lg);margin-bottom:var(--space-lg)}
.card h3{font-size:var(--fs-xs);letter-spacing:1.4px;text-transform:uppercase;color:var(--text-3);margin-bottom:var(--space-sm)}
.vinheta{font-size:var(--fs-base);line-height:1.62}
.vinheta b{color:var(--text-strong)}
.tagrow{display:flex;gap:var(--space-xs);flex-wrap:wrap;margin-bottom:var(--space-sm)}
.tag{font-size:var(--fs-2xs);letter-spacing:.6px;text-transform:uppercase;font-weight:700;
  padding:var(--space-3xs) var(--space-xs);border-radius:var(--r-pill);background:var(--tag-bg);color:var(--tag-text)}
.tag.ctx{background:var(--ok-bg);color:var(--ok-text)}
.tag.lvl{background:var(--warn-bg);color:var(--warn-text)}
.tag.r2{background:var(--info-bg-deep);color:var(--accent-soft)}

table.kv{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
table.kv td{padding:var(--space-2xs) 0;border-bottom:1px solid var(--border-soft)}
table.kv td:last-child{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.f-hi{color:var(--bad)} .f-lo{color:var(--warn)} .f-ok{color:var(--text-2)}
.locked{color:var(--text-3);font-style:italic;font-weight:400!important}
.nr{color:var(--text-2);font-weight:600}
.sang{background:var(--surface-3);border:1px solid transparent;border-radius:var(--r-md);padding:var(--space-xs) var(--space-sm);margin-top:var(--space-xs);font-size:var(--fs-sm)}
.sang b{color:var(--text-strong)}

/* plataforma */
.plat{display:flex;gap:var(--space-xs);margin-bottom:10px}
.plat button{flex:1;padding:7px 5px;background:var(--surface-2);border:1px solid var(--border);
  color:var(--text-2);font-size:var(--fs-sm);font-weight:700}
.plat button.on{background:var(--info-bg);border-color:var(--accent);color:var(--info-text)}
.assaybtns{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.assaybtns button{padding:10px 6px;background:var(--surface-2);border:1px solid var(--border);
  color:var(--text-1);font-weight:700;font-size:var(--fs-base);display:flex;flex-direction:column;gap:2px;align-items:center;text-align:center}
.assaybtns button small{font-weight:400;font-size:var(--fs-2xs);color:var(--text-3);letter-spacing:.2px}
.assaybtns button{transition:background-color var(--dur-toque) var(--ease), border-color var(--dur-toque) var(--ease)}
.assaybtns button:hover:not(:disabled){border-color:var(--accent);
  background:color-mix(in oklab, var(--surface-2), var(--hover-para) var(--hover-forca))}
.assaybtns button.done{background:var(--ok-bg);border-color:var(--ok-border);color:var(--text-2)}
.assaybtns button[data-a="EXTEM"]{border-left:3px solid var(--ex)}
.assaybtns button[data-a="INTEM"]{border-left:3px solid var(--in)}
.assaybtns button[data-a="FIBTEM"]{border-left:3px solid var(--fib)}
.assaybtns button[data-a="HEPTEM"]{border-left:3px solid var(--hep)}
.assaybtns button[data-a="APTEM"]{border-left:3px solid var(--ap)}
.assaybtns button.cart{grid-column:1/-1;flex-direction:column;padding:10px}
.slots{font-size:var(--fs-xs);color:var(--text-3);margin:9px 0 0;line-height:1.6}
.slots b{color:var(--warn-text)}

.chan{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--r-lg);margin-bottom:var(--space-md);overflow:hidden}
.chan.r2{border-color:var(--accent-line)}
.chanhd{display:flex;align-items:center;gap:var(--space-sm);padding:8px 13px;background:var(--surface-2);border-bottom:1px solid var(--border)}
.dot{width:9px;height:9px;border-radius:50%;flex:none}
.chanhd .nm{font-weight:700;letter-spacing:.6px;font-size:var(--fs-base)}
.chanhd .sub{font-size:var(--fs-xs);color:var(--text-3)}
.chanhd .rt{margin-left:auto;font-size:var(--fs-xs);color:var(--text-2);font-variant-numeric:tabular-nums;text-align:right}
.chanbody{display:grid;grid-template-columns:1fr 226px;gap:0}
@media(max-width:760px){
  .chanbody{grid-template-columns:1fr}
  .params{border-left:none!important;border-top:1px solid var(--border)}
  /* a faixa de referência é alinhada à direita para a coluna estreita do desktop;
     na largura toda do celular ela ficava longe do próprio rótulo */
  .params .ref{display:inline;text-align:left;margin-left:7px}
}
.chanbody canvas{width:100%;height:auto;display:block}
.params{border-left:1px solid var(--border);padding:var(--space-sm) var(--space-md)}
.params table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.params td{padding:2.5px 0}
.params td:first-child{color:var(--text-3);font-size:var(--fs-xs);letter-spacing:.4px}
.params td:last-child{text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
.ref{font-size:var(--fs-2xs);color:var(--text-4);text-align:right;display:block;font-weight:400;letter-spacing:0}
.delta{font-size:var(--fs-2xs);font-weight:600;margin-left:4px}
.d-up{color:var(--ok-text)}.d-dn{color:var(--bad-text)}
.empty{padding:var(--space-xl) 16px;text-align:center;color:var(--text-3);font-size:var(--fs-base);line-height:1.7}
.rodsep{display:flex;align-items:center;gap:var(--space-sm);margin:16px 0 10px}
.rodsep span{font-size:var(--fs-xs);letter-spacing:1.4px;text-transform:uppercase;color:var(--text-3);font-weight:700}
.rodsep i{flex:1;height:1px;background:var(--border)}

.opt-group{margin-bottom:var(--space-md)}
.opt-group-title{font-size:var(--fs-2xs);text-transform:uppercase;color:var(--text-3);margin-bottom:5px;
  font-weight:700;letter-spacing:1px;border-bottom:1px solid var(--border);padding-bottom:3px}
.opt{display:flex;align-items:flex-start;gap:var(--space-sm);padding:9px 11px;border-radius:var(--r-md);cursor:pointer;
  font-size:var(--fs-sm);border:1px solid transparent;min-height:48px}
.opt{transition:background-color var(--dur-toque) var(--ease), border-color var(--dur-toque) var(--ease)}
.opt:hover{background:color-mix(in oklab, var(--surface-2), var(--hover-para) var(--hover-forca))}
.opt input{margin-top:2px;accent-color:var(--accent);flex:none}
.opt.sel{background:var(--info-bg);border-color:var(--info-border)}
.opt.given{background:var(--ok-bg);border-color:var(--ok-border);opacity:.85}
.opt.given::after{content:"administrado";font-size:var(--fs-2xs);color:var(--ok-text);margin-left:auto;
  text-transform:uppercase;letter-spacing:.5px;font-weight:700;white-space:nowrap}
.opt em{display:block;font-style:normal;color:var(--text-3);font-size:var(--fs-xs)}
textarea{width:100%;background:var(--surface-3);border:1px solid var(--border);color:var(--text-1);
  border-radius:var(--r-sm);padding:8px;font:inherit;font-size:var(--fs-sm);resize:vertical;min-height:48px}

/* ---------- painel modal ----------
   O z-index precisa ficar ACIMA da barra de abas do celular (1000). Enquanto ele
   valia 50, a pílula flutuante "Cenário / ROTEM / Conduta" cobria justamente a
   faixa onde ficam os botões do modal: o toque caía na aba, o modal não fechava
   e o aplicativo parecia travado. A barra também some enquanto há um modal aberto —
   não existe navegação de aba a decidir enquanto uma pergunta está na frente. */
.ovl{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1200;overflow-y:auto;
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch;display:none;
  padding:var(--space-lg) var(--space-lg) calc(var(--space-lg) + env(safe-area-inset-bottom));
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.ovl.on{display:block}
body.modal-open{overflow:hidden}
body.modal-open .mobile-tabs{display:none}
.sheet{max-width:940px;margin:0 auto;background:var(--surface-1);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:var(--space-lg);box-shadow:var(--shadow-card)}
/* No celular a folha é mais alta que a tela. Duas âncoras impedem que a saída
   fique escondida no fim de uma rolagem longa: a pergunta gruda a faixa de ação
   no rodapé; a análise, que é um documento de leitura, gruda o cabeçalho — e com
   ele o "Fechar" — no topo. */
.sheet-head{display:flex;align-items:center;gap:var(--space-sm);flex-wrap:wrap;margin-bottom:var(--space-md)}
.sheet-actions{display:flex;gap:var(--space-xs);flex-wrap:wrap;margin-top:var(--space-md)}
@media(max-width:760px){
  .sheet{padding:var(--space-md)}
  .sheet-head{position:sticky;top:calc(-1 * var(--space-md));z-index:3;background:var(--surface-1);
    margin:calc(-1 * var(--space-md)) calc(-1 * var(--space-md)) var(--space-sm);
    padding:var(--space-sm) var(--space-md);border-bottom:1px solid var(--border)}
  .sheet-actions{position:sticky;bottom:0;background:var(--surface-1);z-index:2;
    margin:var(--space-md) calc(-1 * var(--space-md)) calc(-1 * var(--space-md));
    padding:10px var(--space-md) calc(10px + env(safe-area-inset-bottom));
    border-top:1px solid var(--border)}
  .sheet-actions .btn{flex:1 1 46%;min-width:132px;padding:var(--space-sm) var(--space-xs);
    font-size:var(--fs-sm);line-height:1.25;text-align:center}
  /* fim de documento: já está no fim da rolagem, não precisa grudar */
  .sheet-actions.fim{position:static;margin:var(--space-md) 0 0;padding:0;border-top:none}
}
.verdict{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-md) var(--space-md);border-radius:var(--r-lg);margin-bottom:var(--space-md)}
.verdict .sc{font-size:var(--fs-display);font-weight:800;font-variant-numeric:tabular-nums;flex:none;line-height:1}
.v-ok{background:var(--ok-bg);border:1px solid transparent}
.v-mid{background:var(--warn-bg);border:1px solid transparent}
.v-bad{background:var(--bad-bg);border:1px solid transparent}
.sec{margin-bottom:var(--space-md)}
.sec h4{font-size:var(--fs-xs);letter-spacing:1.4px;text-transform:uppercase;color:var(--text-3);margin-bottom:var(--space-xs)}
.sec p,.sec li{font-size:var(--fs-base);line-height:1.68}
.sec ul,.sec ol{margin:0;padding-left:var(--space-lg)}
.pill{display:inline-block;padding:3px 9px;border-radius:var(--r-pill);font-size:var(--fs-xs);margin:2px 4px 2px 0;font-weight:600}
.p-ok{background:var(--ok-bg);color:var(--ok-text);border:1px solid var(--ok-border)}
.p-miss{background:var(--bad-bg);color:var(--bad-text);border:1px solid var(--bad-border)}
.p-extra{background:var(--warn-bg);color:var(--warn-text);border:1px solid var(--warn-border)}
.p-nice{background:var(--info-bg);color:var(--info-text);border:1px solid var(--info-border)}
.box{background:var(--surface-3);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--space-sm) var(--space-md);font-size:var(--fs-base);line-height:1.65}
.box.key{border-left:3px solid var(--accent)}
.box.trap{border-left:3px solid var(--warn)}
.box.fatal{border-left:3px solid var(--bad)}
.box.good{border-left:3px solid var(--ok)}
.ref-cite{font-size:var(--fs-xs);color:var(--text-3);line-height:1.6}
.pred-porque{font-size:var(--fs-xs);color:var(--text-2);line-height:1.6}
code{background:var(--surface-3);padding:1px 5px;border-radius:4px;font-size:var(--fs-sm);color:var(--accent-soft)}
.chip{font-size:var(--fs-xs);color:var(--text-2);background:var(--surface-2);border:1px solid var(--border);
  padding:2px 8px;border-radius:var(--r-pill);display:inline-block;margin:2px 3px 2px 0}
.chip.bad{border-color:var(--bad-border);color:var(--bad-text)}
.chip.accent{border-color:var(--accent-line);color:var(--info-text)}
.prov{font-weight:400;color:var(--text-4)}
.prov-note{font-size:var(--fs-2xs);color:var(--text-4);padding-top:5px}
.igual{font-weight:400;color:var(--text-4)}

.caselist{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:var(--space-sm)}
.caseitem{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--space-sm) var(--space-md);
  cursor:pointer;text-align:left;color:var(--text-1)}
.caseitem{transition:background-color var(--dur-toque) var(--ease),
  border-color var(--dur-toque) var(--ease), transform var(--dur-toque) var(--ease)}
.caseitem:hover{border-color:var(--accent);
  background:color-mix(in oklab, var(--surface-1), var(--hover-para) var(--hover-forca))}
.caseitem:active{transform:scale(.995)}
.caseitem .n{font-weight:700;font-size:var(--fs-base);margin-bottom:3px}
.caseitem .d{font-size:var(--fs-xs);color:var(--text-3);line-height:1.6}
.caseitem.seen{opacity:.62}
.caseitem.seen .n::after{content:" ✓";color:var(--ok)}
/* posição na trilha: numeração discreta, para a ordem se ler sem explicação */
.caseitem-pos{display:inline-grid;place-items:center;width:20px;height:20px;flex:none;
  border-radius:50%;background:var(--surface-3);border:1px solid var(--border);
  color:var(--text-3);font-size:var(--fs-2xs);font-weight:700;margin-right:7px;vertical-align:1px}
.caseitem.sugerido{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent-line);opacity:1}
.caseitem.sugerido .caseitem-pos{background:var(--accent);color:var(--accent-on);border-color:transparent}
/* a retomada é mapa retrospectivo: só existe em caso já resolvido */
.caseitem-retoma{margin-top:7px;padding-top:7px;border-top:1px solid var(--border-soft);
  font-size:var(--fs-2xs);color:var(--text-3);line-height:1.5;white-space:normal}
.foot{text-align:center;color:var(--text-3);font-size:var(--fs-xs);padding:18px 8px;line-height:1.7}
.notice{background:var(--info-bg);border:1px solid var(--info-border);border-radius:var(--r-md);padding:var(--space-sm) var(--space-md);
  font-size:var(--fs-sm);color:var(--info-text);line-height:1.55;margin-bottom:var(--space-md)}
.banner{background:var(--warn-bg);border:1px solid var(--warn-border);color:var(--warn-text);border-radius:var(--r-md);
  padding:9px 13px;font-size:var(--fs-sm);display:none;align-items:center;gap:var(--space-sm);margin-bottom:var(--space-md)}
.banner.on{display:flex}
.predbox{background:var(--info-bg-deep);border:1px solid var(--info-border);border-radius:var(--r-md);padding:var(--space-sm) var(--space-md);margin-bottom:var(--space-md)}
.predbox h5{margin:0 0 4px;font-size:var(--fs-xs);letter-spacing:1.2px;text-transform:uppercase;color:var(--info-text)}
.predq{margin-bottom:12px}
.predq .lab{font-weight:700;font-size:var(--fs-base);margin-bottom:5px}
.predq .lab small{font-weight:400;color:var(--text-3);letter-spacing:.2px;display:block}
.predopt{display:block;padding:6px 9px;border:1px solid var(--border);border-radius:var(--r-sm);margin-bottom:4px;
  cursor:pointer;font-size:var(--fs-sm);background:var(--surface-2)}
.predopt{transition:background-color var(--dur-toque) var(--ease), border-color var(--dur-toque) var(--ease)}
.predopt:hover{border-color:var(--accent);
  background:color-mix(in oklab, var(--surface-2), var(--hover-para) var(--hover-forca))}
.predopt.on{background:var(--info-bg);border-color:var(--accent-line)}
.predopt input{margin-right:7px;accent-color:var(--accent)}
.mec{background:var(--info-bg-deep);border:1px solid var(--info-border);border-radius:var(--r-md);padding:10px 12px;margin-bottom:var(--space-md)}
.mec h5{margin:0 0 6px;font-size:var(--fs-xs);letter-spacing:1.2px;text-transform:uppercase;color:var(--info-text)}
.mec .hint{font-size:var(--fs-xs);color:var(--text-3);line-height:1.5;margin-bottom:7px}
.mecopt{display:inline-block;padding:4px 10px;border:1px solid var(--border);border-radius:var(--r-pill);margin:2px 3px 2px 0;
  cursor:pointer;font-size:var(--fs-sm);background:var(--surface-2)}
.mecopt.on{background:var(--info-bg);border-color:var(--accent-line);color:var(--info-text);font-weight:600}
.mecopt input{position:absolute;opacity:0;pointer-events:none}
.mecopt:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.subsc{display:flex;gap:var(--space-sm);flex-wrap:wrap;margin-bottom:14px}
.subsc div{flex:1;min-width:130px;background:var(--surface-3);border:1px solid var(--border);border-radius:var(--r-md);padding:9px 11px}
.subsc .t{font-size:var(--fs-2xs);letter-spacing:1.1px;text-transform:uppercase;color:var(--text-3)}
.subsc .v{font-size:var(--fs-lg);font-weight:800;font-variant-numeric:tabular-nums}
.subsc .ok{color:var(--ok)} .subsc .bad{color:var(--bad)} .subsc .mid{color:var(--warn)}
.db-layer{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);margin:0 0 12px;overflow:hidden}
.db-layer>summary{cursor:pointer;list-style:none;padding:12px 14px;font-weight:750;color:var(--text-1)}
.db-layer>summary::-webkit-details-marker{display:none}
.db-layer>summary::after{content:"+";float:right;color:var(--accent);font-size:var(--fs-md);line-height:1}
.db-layer[open]>summary::after{content:"−"}
.db-layer>.db-body{border-top:1px solid var(--border);padding:var(--space-md)}
.pilot-intro{border-left:3px solid var(--accent)}
.pilot-intro h2{font-size:var(--fs-md);margin-bottom:5px}
.pilot-intro p{margin:0;color:var(--text-2);line-height:1.65}
table.pred{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
table.pred td{padding:5px 6px;border-bottom:1px solid var(--border-soft);vertical-align:top}
table.pred td:first-child{font-weight:700;white-space:nowrap}
.warnline{background:var(--bad-bg);border:1px solid var(--bad-border);color:var(--bad-text);border-radius:var(--r-md);
  padding:8px 11px;font-size:var(--fs-sm);line-height:1.5;margin:10px 0;display:none}
.warnline.on{display:block}
/* O anel de alerta sai do token, não de um rgb copiado. Escrito à mão, ele era
   o vermelho do tema ESCURO — e piscava nessa cor também no tema claro, onde o
   --bad é outro. Cor copiada de token parece tokenizada e não acompanha o tema:
   é pior do que uma cor literal assumida. */
@keyframes flash{0%,100%{box-shadow:0 0 0 0 transparent}
  35%{box-shadow:0 0 0 4px color-mix(in oklab, var(--bad), transparent 55%)}}
.flash{animation:flash .9s ease-out 2}
.predbox.falta{border-color:var(--bad-border);background:var(--bad-bg)}
.mec.vazio{border-color:var(--warn-border);background:var(--warn-bg)}
.mec .obrig{float:right;font-size:var(--fs-2xs);letter-spacing:.6px;color:var(--warn-text);font-weight:700}

/* academia */
.navbtn{background:transparent;border:1px solid transparent;color:var(--text-2);padding:6px 12px}
.navbtn{transition:background-color var(--dur-toque) var(--ease), color var(--dur-toque) var(--ease)}
.navbtn:hover:not(.on){color:var(--text-1);
  background:color-mix(in oklab, var(--surface-2), var(--hover-para) var(--hover-forca))}
.navbtn.on{background:var(--surface-1);border-color:var(--border);color:var(--text-1);font-weight:700;box-shadow:var(--shadow-lift)}
.academy{max-width:1180px;margin:0 auto}
.academy-hero{display:grid;grid-template-columns:1.45fr .75fr;gap:var(--space-md);margin-bottom:var(--space-md)}
.academy-hero .lead{font-size:var(--fs-md);line-height:1.7;color:var(--text-2);max-width:760px;margin:8px 0 0}
.eyebrow{font-size:var(--fs-2xs);letter-spacing:1.4px;text-transform:uppercase;color:var(--accent-soft);font-weight:800}
.academy h1{font-size:var(--fs-xl);line-height:1.15;margin-top:4px;letter-spacing:-.5px}
.ready{display:flex;align-items:center;gap:15px;height:100%}
.ready-num{width:86px;height:86px;border-radius:50%;display:grid;place-items:center;flex:none;
  border:8px solid var(--border);background:var(--surface-3);font-size:var(--fs-lg);font-weight:800}
.ready-num.good{border-color:var(--ok-border);color:var(--ok-text)}
.ready-num.mid{border-color:var(--warn-border);color:var(--warn-text)}
.ready-copy b{display:block;font-size:var(--fs-md);margin-bottom:3px}.ready-copy span{font-size:var(--fs-xs);color:var(--text-2);line-height:1.6}
.flow-steps{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-sm);margin-top:10px}
.flow-step{background:var(--surface-3);border:1px solid var(--border);border-radius:var(--r-md);padding:9px 10px;font-size:var(--fs-xs);color:var(--text-2)}
.flow-step b{display:block;color:var(--text-1);font-size:var(--fs-sm);margin-bottom:2px}
/* Um destino só, com o motivo ao lado. Antes eram três botões, dois deles
   chamando a mesma coisa — escolha que não era escolha. */
.proximo-passo{display:flex;align-items:center;gap:var(--space-md);flex-wrap:wrap;
  margin-top:var(--space-md);padding:var(--space-sm) var(--space-md);
  background:var(--info-bg);border:1px solid var(--info-border);border-radius:var(--r-md)}
.proximo-motivo{flex:1;min-width:200px;display:flex;flex-direction:column;gap:2px}
.proximo-motivo b{font-size:var(--fs-2xs);letter-spacing:1.1px;text-transform:uppercase;color:var(--info-text)}
.proximo-motivo span{font-size:var(--fs-sm);color:var(--text-2);line-height:1.5}
.proximo-passo .btn{flex:none}
@media(max-width:600px){ .proximo-passo .btn{width:100%} }
.academy-actions{display:flex;gap:var(--space-sm);flex-wrap:wrap;margin-top:var(--space-md)}
.academy-grid{display:grid;grid-template-columns:1.4fr .8fr;gap:var(--space-md);align-items:start}
.module-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-sm)}
.module{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);padding:13px;position:relative}
.module{transition:background-color var(--dur-toque) var(--ease), border-color var(--dur-toque) var(--ease)}
.module:hover{border-color:var(--accent-line);
  background:color-mix(in oklab, var(--surface-1), var(--hover-para) var(--hover-forca))}.module.done{border-color:var(--ok-border);background:var(--ok-bg)}
.module .step{font-size:var(--fs-2xs);color:var(--accent-soft);text-transform:uppercase;letter-spacing:1px;font-weight:800}
.module h4{font-size:var(--fs-base);margin:3px 0 4px}.module p{font-size:var(--fs-xs);color:var(--text-2);line-height:1.55;margin:0 0 10px}
.module-foot{display:flex;align-items:center;gap:var(--space-sm)}.module-foot .btn{margin-left:auto;padding:5px 10px;font-size:var(--fs-xs)}
.bar{height:6px;background:var(--surface-3);border-radius:10px;overflow:hidden;flex:1;min-width:70px;border:1px solid var(--border-soft)}
.bar>i{display:block;height:100%;background:var(--accent);border-radius:10px}.done .bar>i{background:var(--ok)}
.barlabel{font-size:var(--fs-2xs);color:var(--text-3);font-variant-numeric:tabular-nums}
.skill-list{display:flex;flex-direction:column;gap:var(--space-sm)}
.skill-row{display:grid;grid-template-columns:112px 1fr 47px;gap:var(--space-sm);align-items:center;font-size:var(--fs-xs)}
.skill-row .nm{font-weight:650}.skill-row .pct{text-align:right;color:var(--text-2);font-variant-numeric:tabular-nums}
.review-card{border-left:3px solid var(--accent)}
.review-card .big{font-size:var(--fs-lg);font-weight:800;line-height:1}.review-card p{color:var(--text-2);font-size:var(--fs-sm);line-height:1.55}
.academy-note{font-size:var(--fs-xs);color:var(--text-2);line-height:1.65}
.academy-note b{color:var(--text-1)}
/* Na coluna larga o texto ocupa a linha e a ação fica na ponta: um botão pequeno
   centralizado num card de ~800px ficaria solto no meio do vazio. */
.academy-footer{display:flex;align-items:center;gap:var(--space-md)}
.academy-footer>div{flex:1;min-width:0}
.academy-footer .btn{flex:none}
@media(max-width:600px){.academy-footer{flex-direction:column;align-items:stretch;gap:var(--space-sm)}}

.lesson-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:var(--space-md)}.lesson-head .btn{margin-left:auto}
.lesson-head h2{font-size:var(--fs-lg);margin:2px 0 3px}.lesson-head p{margin:0;color:var(--text-2);font-size:var(--fs-sm)}
.lesson-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:var(--space-md);align-items:start}
.concept-list{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-sm);margin-top:11px}
.concept{background:var(--surface-3);border:1px solid var(--border);border-radius:var(--r-md);padding:10px 11px}
.concept b{display:block;font-size:var(--fs-sm);margin-bottom:3px}.concept span{font-size:var(--fs-xs);color:var(--text-2);line-height:1.6}
.qmeta{display:flex;align-items:center;gap:7px;margin-bottom:10px;flex-wrap:wrap}
.qcount{margin-left:auto;font-size:var(--fs-xs);color:var(--text-3)}
.question{font-size:var(--fs-md);line-height:1.55;margin:0 0 7px}.qcontext{color:var(--text-2);font-size:var(--fs-base);line-height:1.62;margin-bottom:var(--space-md)}
.data-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(115px,1fr));gap:7px;margin:12px 0}
.data-point{background:var(--surface-3);border:1px solid var(--border);border-radius:var(--r-md);padding:8px 10px}
.data-point b{display:block;font-size:var(--fs-2xs);color:var(--text-3);letter-spacing:.7px}.data-point span{font-size:var(--fs-md);font-weight:750;font-variant-numeric:tabular-nums}
.answer-list{display:flex;flex-direction:column;gap:7px;margin-top:12px}
.answer{display:flex;gap:var(--space-sm);align-items:flex-start;text-align:left;color:var(--text-1);background:var(--surface-2);
  border:1px solid var(--border);border-radius:var(--r-md);padding:10px 12px;width:100%;line-height:1.55;font-size:var(--fs-base)}
.answer{transition:background-color var(--dur-toque) var(--ease), border-color var(--dur-toque) var(--ease)}
.answer:hover:not(:disabled){border-color:var(--accent);
  background:color-mix(in oklab, var(--surface-2), var(--hover-para) var(--hover-forca))}.answer.selected{border-color:var(--accent);background:var(--info-bg)}
.answer.correct{border-color:var(--ok-border);background:var(--ok-bg)}.answer.wrong{border-color:var(--bad-border);background:var(--bad-bg)}
.answer .letter{width:21px;height:21px;border-radius:50%;display:grid;place-items:center;background:var(--surface-3);color:var(--text-2);font-size:var(--fs-2xs);flex:none}
.confidence{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:13px;padding-top:12px;border-top:1px solid var(--border)}
.confidence span{font-size:var(--fs-xs);color:var(--text-2);margin-right:2px}.confbtn{padding:6px var(--space-sm);background:var(--surface-2);border:1px solid var(--border);color:var(--text-2)}
.confbtn.on{border-color:var(--accent);background:var(--info-bg);color:var(--info-text)}
.qactions{display:flex;gap:var(--space-sm);justify-content:flex-end;margin-top:13px;flex-wrap:wrap}
.feedback{margin-top:var(--space-md);border-radius:var(--r-md);padding:12px 14px;border:1px solid var(--border);line-height:1.62}
.feedback.ok{background:var(--ok-bg);border-color:var(--ok-border)}.feedback.bad{background:var(--bad-bg);border-color:var(--bad-border)}
.feedback h4{font-size:var(--fs-base);margin-bottom:3px}.feedback p{margin:0;font-size:var(--fs-sm);color:var(--text-1)}
.feedback .chain{margin-top:8px;color:var(--text-2);font-size:var(--fs-xs)}
.session-result{text-align:center;padding:22px 12px}.session-result .score{font-size:var(--fs-display);font-weight:850;line-height:1}
.session-result h2{font-size:var(--fs-lg);margin:7px 0}.session-result p{max-width:560px;margin:0 auto 16px;color:var(--text-2);line-height:1.65}
.mini-stat{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-sm);margin-bottom:9px}
.mini-stat>div{background:var(--surface-3);border:1px solid var(--border);border-radius:var(--r-md);padding:9px}.mini-stat b{display:block;font-size:var(--fs-md)}.mini-stat span{font-size:var(--fs-2xs);color:var(--text-3)}
.due-list{font-size:var(--fs-xs);color:var(--text-2);line-height:1.7}
.offline-badge{font-size:var(--fs-2xs);color:var(--ok-text);margin-left:auto}
@media(max-width:900px){.academy-hero,.academy-grid,.lesson-layout{grid-template-columns:1fr}.academy-hero .card{margin-bottom:0}.module-grid{grid-template-columns:1fr}}
@media(max-width:600px){.academy h1{font-size:var(--fs-lg)}.concept-list,.flow-steps{grid-template-columns:1fr}.lesson-head{flex-wrap:wrap}.lesson-head .btn{margin-left:0}.skill-row{grid-template-columns:96px 1fr 42px}.ready{align-items:flex-start}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

/* ================= tutorial de entrada =================
   Vive dentro do modal de sempre (#ovl/#sheet). As classes internas dos SVG
   levam prefixo tt- porque .step, .chip, .clock, .score, .sub, .dot, .foot e
   .brand já significam outra coisa aqui — e o cruzamento aconteceria nos dois
   sentidos. Nenhuma cor literal: toda figura herda os tokens dos dois temas. */
.tut-art{background:var(--bg);border:1px solid var(--border-soft);
  border-radius:var(--r-lg);padding:12px;margin-bottom:var(--space-md)}
.tut-art svg{display:block;width:100%;height:auto}
.tut-art svg text{font-family:inherit;fill:var(--text-2)}
.tut-step{font-size:var(--fs-2xs);color:var(--text-4);text-transform:uppercase;
  letter-spacing:1.4px;font-weight:800;margin-bottom:6px}
.tut-copy h2{font-size:var(--fs-lg);margin:0 0 8px;letter-spacing:-.4px;line-height:1.25}
.tut-copy p{margin:0;color:var(--text-2);font-size:var(--fs-sm);line-height:1.7;max-width:64ch}
.tut-foot{display:flex;align-items:center;gap:var(--space-sm);flex-wrap:wrap;
  margin-top:var(--space-lg);padding-top:var(--space-md);border-top:1px solid var(--border-soft)}
.tut-dots{display:flex;gap:7px}
.tut-dot{width:8px;height:8px;border-radius:999px;border:none;background:var(--border);
  cursor:pointer;padding:0;transition:width .18s ease,background .18s ease}
.tut-dot.on{background:var(--accent);width:22px}
.tut-sp{display:flex;gap:var(--space-xs);margin-left:auto}
/* No celular a faixa de botões vira uma linha própria: com os pontos ao lado,
   "Próxima" espremia até virar duas linhas de texto dentro do botão. */
/* O cabeçalho do modal quebra linha por padrão, e aqui isso jogava o "×"
   sozinho para uma segunda linha inteira. Título e fechar dividem a mesma. */
.tut-head{flex-wrap:nowrap}
.tut-head>div:first-child{min-width:0}
.tut-head h3{overflow-wrap:anywhere}
.tut-dica{display:none}
@media(max-width:600px){
  .tut-sp{margin-left:0;width:100%}
  .tut-sp .btn{flex:1 1 0;min-width:0;padding:9px 6px}
  .tut-copy h2{font-size:var(--fs-md)}
  /* A figura tem 640 unidades de largura. Encolhida para os 267px que sobram num
     celular, um rótulo de 10px vira 4px — a ilustração existe, mas não se lê.
     Abaixo de 600px ela mantém um tamanho mínimo legível e a moldura desliza. */
  .tut-art{overflow-x:auto;padding:10px;scrollbar-width:thin}
  .tut-art svg{min-width:560px}
  .tut-dica{display:block;font-size:var(--fs-2xs);color:var(--text-4);
    margin:-14px 0 var(--space-md);text-align:center}
}
/* --- classes internas das ilustrações --- */
.tut-art .tt-brand{font-size:13px;font-weight:800;fill:var(--text-1)}
.tut-art .tt-brand2{fill:var(--text-3);font-weight:500}
.tut-art .tt-pill-on rect{fill:var(--accent);opacity:.16}
.tut-art .tt-pill-t{font-size:10.5px;fill:var(--text-3);text-anchor:middle;font-weight:600}
.tut-art .tt-pill-t.tt-on{fill:var(--accent-soft);font-weight:800}
.tut-art .tt-col{font-size:9.5px;fill:var(--text-4);letter-spacing:1.3px;font-weight:800}
.tut-art .tt-col.tt-acc{fill:var(--accent-soft)}
.tut-art .tt-tiny{font-size:10px;fill:var(--text-3)}
.tut-art .tt-ctr{text-anchor:middle}
.tut-art .tt-sub{font-size:8.6px;fill:var(--text-3)}
.tut-art .tt-chip-l{font-size:9.5px;font-weight:800}
.tut-art .tt-chip-r{font-size:8.6px;fill:var(--text-3);text-anchor:end}
.tut-art .tt-small{font-size:12px;fill:var(--text-2)}
.tut-art .tt-b{font-weight:800;fill:var(--text-1)}
.tut-art .tt-assay{font-size:13px;font-weight:800;text-anchor:middle}
.tut-art .tt-ex{fill:var(--ex)} .tut-art .tt-in{fill:var(--in)}
.tut-art .tt-fib{fill:var(--fib)} .tut-art .tt-hep{fill:var(--hep)}
.tut-art .tt-mut{fill:var(--text-4)}
.tut-art .tt-acc{fill:var(--accent-soft)} .tut-art .tt-acc-on{fill:var(--accent-on)}
.tut-art .tt-ok-t{fill:var(--ok)} .tut-art .tt-warn-t{fill:var(--warn-text)}
.tut-art .tt-bad-t{fill:var(--bad-text)} .tut-art .tt-warn-on{fill:var(--warn-on)}
.tut-art .tt-btn-t{font-size:10px;text-anchor:middle;font-weight:700}
.tut-art .tt-clock{font-size:22px;font-weight:800;fill:var(--text-1);text-anchor:middle;
  font-variant-numeric:tabular-nums}
.tut-art .tt-sub-t{font-size:8.5px;fill:var(--text-4);letter-spacing:1.1px;font-weight:800}
.tut-art .tt-sub-v{font-size:15px;font-weight:800}
.tut-art .tt-score{font-size:34px;font-weight:800;text-anchor:middle;font-variant-numeric:tabular-nums}
/* Resgate no celular: a barra lateral, e com ela o cartão "Como funciona",
   desce para depois da grade de módulos em 900px e fica enterrada. Acima disso
   o link seria ruído ao lado do cartão que já está visível. */
.tutorial-inline,.tutorial-primeira{background:none;border:none;padding:0;cursor:pointer;
  font:inherit;font-size:var(--fs-xs);color:var(--accent);text-decoration:underline;
  text-underline-offset:3px}
.tutorial-inline:hover,.tutorial-primeira:hover{color:var(--accent-soft)}
.tutorial-inline{display:none;margin-top:var(--space-sm)}
@media(max-width:900px){ .tutorial-inline{display:inline-block} }
/* Na faixa de prontidão o link entra depois de um botão, então precisa de ar à
   esquerda e da liberdade de cair para a linha de baixo em telas estreitas. */
.tutorial-primeira{margin-left:8px;display:inline-block}

/* ---------- faixa da amostra gratuita ----------
   Um convite, não um anúncio: fica no topo da tela de estudo, é dispensável com
   a rolagem, e não se repete em nenhuma outra tela. Quem está testando já sabe
   que está testando — repetir isso a cada clique irrita mais do que converte. */
.amostra-faixa{display:flex;align-items:center;gap:var(--space-lg);flex-wrap:wrap;
  border-left:3px solid var(--accent)}
.amostra-acoes{display:flex;gap:var(--space-xs);flex-wrap:wrap;flex-shrink:0}
.amostra-faixa .btn{white-space:nowrap}
@media(max-width:700px){
  .amostra-faixa{gap:var(--space-md)}
  .amostra-acoes{width:100%}
  .amostra-faixa .btn{flex:1 1 100%}
}

/* ---------- cartão do livro ----------
   Fica no corpo da página, não na barra lateral: no celular a lateral desce
   para depois de tudo, e material que o aluno pagou não pode ficar enterrado.
   A "capa" é um retângulo com a lombada sugerida por um gradiente — basta para
   o olho reconhecer um livro sem carregar uma imagem de capa. */
.livro-card{display:flex;align-items:center;gap:var(--space-md);flex-wrap:wrap}
.livro-capa{flex:0 0 auto;width:52px;height:72px;border-radius:3px 6px 6px 3px;
  background:linear-gradient(105deg,
    var(--accent-line) 0 5px, var(--accent) 5px 46%, var(--accent-soft) 100%);
  box-shadow:var(--shadow-lift)}
.livro-txt{flex:1 1 260px;min-width:0}
.livro-txt p{margin:0;color:var(--text-2);font-size:var(--fs-sm);line-height:1.6;max-width:60ch}
.livro-card .btn{flex-shrink:0}
/* Onde ler antes de praticar. Discreto de propósito: é apoio, não a instrução
   principal do cartão. */
.module-livro{margin:6px 0 0;font-size:var(--fs-xs);color:var(--text-3)}
@media(max-width:600px){
  .livro-capa{width:40px;height:56px}
  .livro-card .btn{width:100%}
}

/* ---------- entrada por link de e-mail ---------- */
.access-ou{display:flex;align-items:center;gap:var(--space-sm);margin:var(--space-md) 0;
  font-size:var(--fs-2xs);color:var(--text-4);text-transform:uppercase;letter-spacing:1.4px;font-weight:800}
.access-ou::before,.access-ou::after{content:"";flex:1;height:1px;background:var(--border-soft)}
.link-form label{display:block;font-size:var(--fs-xs);color:var(--text-2);margin-bottom:6px;font-weight:600}
.link-form>div{display:flex;gap:var(--space-xs)}
.link-form input{flex:1;min-width:0;background:var(--surface-3);color:var(--text-1);
  border:1px solid var(--border);border-radius:var(--r-pill);padding:0 var(--space-md);min-height:44px;
  transition:border-color var(--dur-toque) var(--ease)}
.link-form input:focus{border-color:var(--accent-line);outline:none}
.link-form .btn{flex-shrink:0}
.link-nota{margin:8px 0 0;font-size:var(--fs-2xs);color:var(--text-3);line-height:1.5}
.link-nota.ok{color:var(--ok-text)}
.link-nota.erro{color:var(--bad-text)}
/* Quando o acesso pelo Google falha por bloqueio do navegador, este é o caminho
   que resta — e ele precisa parar de parecer a alternativa discreta. */
.link-form.em-destaque{background:var(--surface-2);border:1px solid var(--accent-line);
  border-radius:var(--r-lg);padding:var(--space-md);margin-top:var(--space-xs)}
.link-form.em-destaque label{color:var(--text-1)}
@media(max-width:420px){ .link-form>div{flex-wrap:wrap} .link-form .btn{width:100%} }

/* ---------- calibração ----------
   Mesma gramática visual das habilidades: nome, barra, número. A diferença é o
   que a barra mede — não quanto se sabe, e sim quanto vale a própria certeza. */
.calib-list{display:flex;flex-direction:column;gap:var(--space-xs)}
.calib-row{display:grid;grid-template-columns:112px 1fr 46px;align-items:center;gap:var(--space-sm)}
.calib-row .nm{font-size:var(--fs-xs);color:var(--text-2)}
.calib-row .bar{height:6px;background:var(--surface-2);border-radius:var(--r-pill);overflow:hidden}
.calib-row .bar i{display:block;height:100%;background:var(--accent);border-radius:var(--r-pill)}
.calib-row .pct{font-size:var(--fs-xs);color:var(--text-1);font-variant-numeric:tabular-nums;text-align:right}
.calib-nota{font-size:var(--fs-2xs);color:var(--text-4);margin-top:var(--space-xs);line-height:1.5}
@media(max-width:600px){ .calib-row{grid-template-columns:96px 1fr 42px} }

/* ---------- avisos sobre a caixa de lixo eletrônico ----------
   Domínio novo não tem histórico de envio, e os provedores separam por
   precaução. O aviso vive nos dois pontos onde a pessoa está esperando um
   e-mail que talvez já tenha chegado — não numa página de ajuda que ela não
   vai abrir enquanto olha a caixa de entrada vazia. */
.link-lixo{color:var(--text-4);display:inline-block;margin-top:var(--space-3xs)}
.modal-dica{font-size:var(--fs-xs);color:var(--text-2);line-height:1.6;
  margin:var(--space-xs) 0 0;max-width:52ch}

/* ---------- navegador embutido ----------
   O Google recusa OAuth dentro da janela do Instagram. O aviso precisa ser lido
   ANTES do botão, não depois da recusa. */
.aviso-embutido{background:var(--warn-bg);border:1px solid var(--warn-border);
  border-radius:var(--r-md);padding:11px 14px;margin:0 0 var(--space-sm);
  font-size:var(--fs-xs);line-height:1.6;color:var(--text-1)}
.aviso-embutido b{color:var(--warn-text)}
/* O Google não some: quem já o usa procuraria por ele e concluiria que o acesso
   acabou. Só deixa de ser o caminho principal. */
.access-actions.secundario{opacity:.72}
.access-actions.secundario:hover,.access-actions.secundario:focus-within{opacity:1}

/* ---------- campos: 16px no celular, por último de propósito ----------
   O iOS amplia a página sozinho ao focar um campo com fonte abaixo de 16px. O
   campo de justificativa da conduta tinha 13px, então bastava tocar nele para a
   tela inteira se deslocar — o mesmo efeito que fazia o aplicativo parecer travado.
   Esta regra fica no fim do arquivo porque a definição base de `textarea` vem
   depois do topo e, com especificidade igual, quem vem por último vence. */
@media(max-width:760px){
  textarea, input[type="text"], input:not([type]), select{ font-size:16px }
}

body.modo-amostra {
  padding-bottom: 80px; /* espaço para o banner no rodapé */
}

/* ---------- Banner Amostra ---------- */
.banner-amostra {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  padding: var(--space-md) var(--space-lg);
  gap: var(--space-md);
  flex-wrap: wrap;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.2);
}
.banner-amostra > div {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

/* ---------- Modal de Ativação ---------- */
dialog.modal {
  margin: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-1);
  color: var(--text-1);
  padding: var(--space-xl);
  max-width: 480px;
  width: 90%;
  box-shadow: 0 12px 40px rgba(0,0,0,0.3);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
dialog.modal::backdrop {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
dialog.modal form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  position: relative;
}
dialog.modal .modal-close {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 32px;
  height: 32px;
  border-radius: var(--r-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-lg);
  padding: 0;
}
dialog.modal h2 { margin: 0; font-size: var(--fs-lg); }
dialog.modal label { font-size: var(--fs-sm); color: var(--text-2); }
dialog.modal form > div { display: flex; gap: var(--space-sm); }
dialog.modal input {
  flex: 1;
  background: var(--surface-3);
  color: var(--text-1);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 0 var(--space-md);
  min-height: 44px;
}
dialog.modal input:focus { border-color: var(--accent-line); outline: none; }
.modal-status { font-size: var(--fs-xs); color: var(--text-3); }
.modal-status.error { color: var(--bad-text); }
.modal-status.ok { color: var(--ok-text); }

/* ---------- Gráfico Aranha (Radar) ---------- */
.spider-details {
  background: var(--surface-2);
  border-radius: var(--r-lg);
  margin-bottom: 12px;
  overflow: hidden;
}
.spider-details summary {
  padding: 12px 16px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  font-size: var(--fs-sm);
  color: var(--text-2);
  display: flex;
  align-items: center;
}
.spider-container {
  padding: 0 16px 16px;
  display: flex;
  justify-content: center;
}
.radar-svg {
  width: 100%;
  max-width: 260px;
  height: auto;
  overflow: visible;
}
.radar-grid {
  fill: none;
  stroke: var(--border);
  stroke-width: 1;
}
.radar-axis {
  stroke: var(--border);
  stroke-width: 1;
  stroke-dasharray: 4 4;
}
.radar-label {
  fill: var(--text-2);
  /* Degrau da escala, não valor solto: o SVG do radar escala com a página, ao
     contrário das ilustrações do tutorial, que têm viewBox fixo e por isso são
     a única exceção legítima a esta regra. */
  font-size: var(--fs-2xs);
  font-weight: 500;
}
.radar-data {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linejoin: round;
}
.radar-data-fill {
  fill: var(--accent);
  opacity: 0.15;
}