/* ═══════════════════════════════════════════════════════════════════════════
   OSS YOGA · DESIGN SYSTEM — BASE
   O chão de todas as telas: reset curto, tipografia, foco e utilidades.
   Carregar sempre DEPOIS de oss-tokens.css e ANTES de oss-componentes.css.
   ═══════════════════════════════════════════════════════════════════════════

   Três regras herdadas de defeitos reais, e por isso não "simplificáveis":

   1. TODO texto ganha `color` explícito. O tema escuro do Squarespace pinta
      de escuro tudo que herda cor — e o que sumia era o campo do código.
   2. NENHUM campo abaixo de 16px. Abaixo disso o iOS dá zoom sozinho ao
      focar, e o botão sai da tela.
   3. NENHUM estado depende só de cor. Verde vem com ✓, âmbar com ícone, erro
      com palavra. Quem não distingue cor lê tudo igual.

   Este arquivo NÃO estiliza `body` fora de uma classe. O Dojo embutido no
   Squarespace divide o `body` com o tema deles; quem quiser o fundo da casa
   pede por `.oss` na raiz da própria tela. */

/* ── Reset, o mínimo ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* `hidden` é como as telas trocam de passo. Sem o !important, qualquer regra
   com `display` explícito o vence e o elemento reaparece — já aconteceu: a
   tela de entrar mostrava "reenviar em 0:38" e o botão de reenviar ao mesmo
   tempo, dizendo duas coisas contrárias. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ── A casa ────────────────────────────────────────────────────────────────
   `.oss` é a raiz de uma tela nossa. Onde ela está, mandamos no visual;
   onde não está (dentro do Squarespace), só os componentes valem. */
.oss {
  margin: 0;
  background: var(--oss-fundo);
  color: var(--oss-tinta);
  font-family: var(--oss-sans);
  font-size: var(--oss-t-base);
  font-weight: var(--oss-peso-leve);
  line-height: var(--oss-linha-normal);
  /* Deixa a fonte respirar: sem isto, Jost em corpo pequeno fica sujo no
     Windows e grosso demais no Mac. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* O ponto e a vírgula alinhados na coluna do número — o que faz uma lista
     de valores parecer feita por gente que se importa. */
  font-variant-numeric: tabular-nums;
}

/* ── Tipografia ────────────────────────────────────────────────────────────
   A serifada é a VOZ da escola: título, número grande, nome de pessoa. A
   sem-serifa é a INTERFACE: rótulo, botão, tabela, recado. A regra é quase
   mecânica, e é o que faz três telas parecerem a mesma.

   ── POR QUE :where() EM VOLTA DE TUDO ────────────────────────────────────
   Um seletor como `.oss p` vale 0-1-1; uma classe de componente como
   `.oss-recado` vale 0-1-0 — e PERDE. Descobri isso com o rodapé da tela de
   entrar, que ignorava a própria margem porque `.oss p` a sobrescrevia.
   `:where()` zera a especificidade do que está dentro dele: a base passa a
   valer 0-0-0, e qualquer classe do sistema ou da tela ganha dela sem
   precisar de !important nem de seletor mais longo.

   Não usamos @layer, que resolveria o mesmo, porque o Dojo roda embutido no
   Squarespace: lá o estilo do tema chega SEM camada, e estilo sem camada
   ganha de estilo em camada — a página inteira viraria tema deles. */
.oss-display,
:where(.oss) :is(h1, h2, h3) {
  font-family: var(--oss-serif);
  font-weight: var(--oss-peso-leve);
  line-height: var(--oss-linha-apertada);
  color: var(--oss-tinta);
  margin: 0;
  /* Cormorant tem números velhos por padrão em alguns cortes; na interface
     eles desalinham colunas. */
  font-variant-numeric: lining-nums tabular-nums;
}
:where(.oss) h1 { font-size: var(--oss-t-2xl); }
:where(.oss) h2 { font-size: var(--oss-t-xl); }
:where(.oss) h3 { font-size: var(--oss-t-lg); }

:where(.oss) p { margin: 0 0 var(--oss-e-4); color: var(--oss-tinta-2); line-height: var(--oss-linha-solta); }
:where(.oss) p:last-child { margin-bottom: 0; }

/* O "sobrancelha": a linha em caixa alta acima de um título. É o recurso
   gráfico mais usado do sistema e o único ornamento permitido — dois fios
   curtos ladeando a palavra. */
.oss-sobrancelha {
  display: inline-flex;
  align-items: center;
  gap: var(--oss-e-3);
  font-family: var(--oss-sans);
  font-size: var(--oss-t-micro);
  font-weight: var(--oss-peso-forte);
  letter-spacing: var(--oss-tracking-alta);
  text-transform: uppercase;
  color: var(--oss-ouro-tinta);
}
.oss-sobrancelha::before, .oss-sobrancelha::after {
  content: ""; height: 1px; width: 24px; background: currentColor; opacity: .5;
}
.oss-sobrancelha.oss-fim::after,  .oss-sobrancelha.oss-inicio::before { content: none; }
/* Sobre fundo escuro o dourado legível fica sem contraste; ali vale o ouro. */
:where(.oss-escuro) .oss-sobrancelha, .oss-sobrancelha.oss-sobre-escuro { color: var(--oss-ouro); }

/* Legenda / meta: data, contagem, "há 3 dias". */
.oss-meta { font-size: var(--oss-t-mini); color: var(--oss-tinta-3); }

/* Texto corrido de verdade (documento, convite, aviso longo). */
.oss-prosa { max-width: var(--oss-medida); line-height: var(--oss-linha-solta); color: var(--oss-tinta-2); }
:where(.oss-prosa) strong { color: var(--oss-tinta); font-weight: var(--oss-peso-medio); }

/* ── Links ─────────────────────────────────────────────────────────────── */
:where(.oss) a { color: var(--oss-ouro-tinta); text-decoration-thickness: 1px; text-underline-offset: 3px; }
:where(.oss) a:hover { color: var(--oss-tinta); }
:where(.oss-escuro) a, a.oss-sobre-escuro { color: var(--oss-ouro); }

/* ── Foco: um anel, em tudo, sempre ────────────────────────────────────────
   Só :focus-visible — quem clica com o mouse não vê anel, quem navega por
   teclado vê sempre. Nunca `outline: none` sem substituto. */
:where(.oss) :focus-visible,
.oss-foco:focus-visible {
  outline: var(--oss-foco);
  outline-offset: var(--oss-foco-folga);
  border-radius: var(--oss-curva-sm);
}
/* Sobre fundo escuro o ouro já contrasta; o que falta é separar do fundo. */
:where(.oss-escuro) :focus-visible { outline-color: var(--oss-ouro); }

/* ── Só para leitor de tela ──────────────────────────────────────────────
   Onde moram os anúncios de troca de passo. Sem isto, quem usa leitor
   continua ouvindo o campo anterior depois de a tela mudar. */
.oss-so-leitor {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Pular para o conteúdo: aparece só no teclado, e é o primeiro foco da tela. */
.oss-pular {
  position: absolute; left: var(--oss-e-2); top: calc(var(--oss-e-2) * -10);
  z-index: var(--oss-z-recado);
  background: var(--oss-escuro); color: var(--oss-tinta-clara);
  padding: var(--oss-e-3) var(--oss-e-4);
  text-decoration: none; font-size: var(--oss-t-peq);
  transition: top var(--oss-tempo) var(--oss-curva-saida);
}
.oss-pular:focus { top: var(--oss-e-2); }

/* ── Caixas ────────────────────────────────────────────────────────────── */
.oss-forma  { width: 100%; max-width: var(--oss-larg-forma);  margin-inline: auto; }
.oss-painel { width: 100%; max-width: var(--oss-larg-painel); margin-inline: auto; }
.oss-app    { width: 100%; max-width: var(--oss-larg-app);    margin-inline: auto; }

/* O respiro lateral da página. Uma medida só, em toda tela, dos dois lados. */
.oss-margem { padding-inline: var(--oss-e-4); }
@media (min-width: 640px) { .oss-margem { padding-inline: var(--oss-e-5); } }

/* ── Empilhamento ─────────────────────────────────────────────────────────
   O ritmo vertical do sistema sai daqui, e não de margin solta em cada
   elemento. Uma tela inteira pode ser construída com três destes. */
.oss-pilha    > * + * { margin-top: var(--oss-e-4); }
.oss-pilha-sm > * + * { margin-top: var(--oss-e-2); }
.oss-pilha-lg > * + * { margin-top: var(--oss-e-6); }

.oss-linha { display: flex; align-items: center; gap: var(--oss-e-3); }
.oss-linha-fim { margin-left: auto; }
.oss-entre { display: flex; align-items: center; justify-content: space-between; gap: var(--oss-e-3); }

/* Fio horizontal. É separador de assunto, não enfeite: use pouco. */
.oss-fio { height: 1px; background: var(--oss-fio); border: 0; margin: var(--oss-e-5) 0; }

/* ── Ícones ────────────────────────────────────────────────────────────────
   Traço de 1.5, canto redondo, e SEMPRE do tamanho do texto ao lado —
   ícone maior que a palavra é a marca de interface amadora. */
.oss-i {
  display: inline-block;
  width: 1.15em; height: 1.15em;
  vertical-align: -.18em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.oss-i-lg { width: 1.5em; height: 1.5em; vertical-align: -.32em; }

/* ── Impressão ────────────────────────────────────────────────────────────
   A escola imprime folha de presença e certificado. Papel não tem hover. */
@media print {
  .oss { background: #fff; }
  .oss-nao-imprime { display: none !important; }
  :where(.oss) a { color: #000; text-decoration: underline; }
}