/* Régua visual (06/11, docs/reviews/2026-11-06-ui-aluno-regua-visual.md): a fundação comum das telas do aluno.
   Escalas como tokens (tipo, espaçamento, raio, altura de controle), linhas balanceadas nos títulos e um componente
   único de estado. Carregada logo depois de tdc-v2.css e antes das folhas das frentes, que convergem para estes tokens.
   Tudo sob .tdc-v2. */

/* Escalas */
.tdc-v2{
  /* Tipo: 8 tamanhos, sem meio pixel. xs = legenda e metadado; sm = rótulo, chip e selo; md = texto secundário;
     body = corpo; lg = título de cartão; xl = título de seção; 2xl = título da página no celular; 3xl = no computador */
  --fs-xs:12px; --fs-sm:13px; --fs-md:14px; --fs-body:15px; --fs-lg:17px; --fs-xl:21px; --fs-2xl:28px; --fs-3xl:40px;
  --lh-tight:1.25; --lh-snug:1.4; --lh-body:1.6;
  /* Espaçamento: múltiplos de 4 */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px;
  /* Raios: cartão, controle pequeno e pílula (o antigo 9 px vira 8; o 6 px também) */
  --radius:14px; --radius-sm:8px; --radius-xs:8px; --radius-pill:999px;
  /* Controles: uma altura para botão e chip clicável */
  --control-h:44px;
  /* Largura de leitura do corpo de texto longo */
  --measure:68ch;
}

/* Quebra de linha: títulos balanceados (sem palavra sozinha na última linha) e parágrafos sem viúva */
.tdc-v2 :is(h1,h2,h3,h4){text-wrap:balance}
.tdc-v2 :is(p,li,figcaption,blockquote){text-wrap:pretty}

/* Estado: um componente só para concluído, praticado, novo, em andamento, não iniciado e equipe.
   Sempre com texto (e, quando houver, ícone): a cor nunca é o único sinal. */
.tdc-v2 .state{display:inline-flex;align-items:center;gap:var(--sp-1);min-height:24px;padding:0 var(--sp-2);border-radius:var(--radius-pill);font-size:var(--fs-xs);font-weight:700;line-height:1;letter-spacing:.01em;white-space:nowrap;border:1px solid transparent;background:var(--surface-3);color:var(--text-2)}
.tdc-v2 .state svg{width:12px;height:12px;flex:none}
.tdc-v2 .state.is-done{background:var(--success-soft);color:var(--success)}
.tdc-v2 .state.is-new{background:var(--brand-soft);color:var(--brand-300)}
.tdc-v2 .state.is-progress{background:var(--surface-3);color:var(--text)}
.tdc-v2 .state.is-idle{background:transparent;border-color:var(--border-strong);color:var(--muted)}
.tdc-v2 .state.is-team{background:var(--success-soft);color:var(--success)}

/* Selecionado (rodada visual V2, regra 2): uma linguagem só para filtro, ordenação, lista de fóruns, menu e chip — fundo
   --brand-soft, texto --text e anel interno de 1 px em --brand-400 —, sempre igual ao estado acessível (aria-current,
   aria-pressed; data-current no botão "Aulas" do menu). Substitui a pílula branca cheia, o roxo translúcido e o cinza.
   Componentes: .sel (a classe para qualquer item novo de chip ou de lista) e os que já existem. A especificidade (0,4,1,
   pelo :is) vence o desenho base desses componentes nas folhas das frentes: elas não redefinem o selecionado, só removem
   as regras antigas. */
.tdc-v2 :is(.sel,.main-nav a,.main-nav button.link,.chip-btn,.pill,.filter,.forums a):is([aria-current="page"],[aria-current="true"],[aria-pressed="true"],[data-current],.is-selected){background:var(--brand-soft);border-color:transparent;color:var(--text);box-shadow:inset 0 0 0 1px var(--brand-400)}
.tdc-v2 :is(.sel,.main-nav a,.main-nav button.link,.chip-btn,.pill,.filter,.forums a):is([aria-current="page"],[aria-current="true"],[aria-pressed="true"],[data-current],.is-selected):hover{background:color-mix(in srgb,var(--brand-400) 22%,transparent);color:var(--text)}