/* ==========================================================================
   ROTEFY · Sistema de design
   --------------------------------------------------------------------------
   Ponto de entrada único. A ordem das camadas abaixo é a única regra de
   precedência do sistema: um seletor de `components` sempre vence `layout`,
   independentemente da especificidade. É isso que impede a re-sedimentação
   que produziu o CSS anterior (4.976 linhas, 115 seletores repetidos).

   Regras invioláveis — design_system/PLANO-FRONTEND.md, seção 7:
     1. Nenhum `!important`.
     2. Nenhum componente definido duas vezes.
     3. Coral só onde há ação exigida do usuário.
     4. Um `h1` por página.
     5. Toda célula numérica usa `tabular-nums`.
     6. Nenhum valor cru em componente — só tokens de `rotefy.css`.
     7. Linha de percurso só onde a ordem carrega informação.
     8. Componente novo entra na página `/design-system/` no mesmo commit.

   A TRAVESSIA ACABOU (Task 13 da fatia C)
   Até esta tarefa a ordem começava por seis camadas do sistema anterior —
   `tokens`, `base`, `legacy`, `layout`, `components`, `pages` —, uma por
   folha das sete que a migração herdou, com `legacy` abaixo de `layout`/
   `components`/`pages` para que a regra nova vencesse a antiga sem
   especificidade e sem `!important`. As sete folhas foram apagadas nesta
   tarefa (7.982 linhas no início da fatia A, 6.986 ao fim da B, zero
   agora) e as seis camadas saíram com elas: uma camada declarada sem
   ocupante é ordem de precedência sobre o vazio. O que sobrou de vivo em
   `06-print.css` está em `impressao.css`, com os tokens traduzidos para o
   vocabulário de `rotefy.css` — ver a nota no topo daquele arquivo.

   `utils` fica: ela é a única camada hospedada por este arquivo, logo
   abaixo, e continua sendo a de última instância — só `print` a vence, e
   por um motivo estreito (ver a nota de UTILITÁRIOS).

   `rotefy` é o sistema, e `rotefy.css` é cópia byte a byte do mockup: ela
   não recebe regra nova.

   `correcoes` vive acima de `rotefy`, e só existe porque `rotefy.css` é
   cópia byte a byte do mockup (ver o comentário de procedência no topo
   daquele arquivo) e não pode ganhar regra nova: quando o próprio mockup
   derrota a sua assinatura visual — por especificidade (`.tbl td.esp`
   vencendo `[data-esp="…"]`) ou por ordem (`.qcard` declarada depois de
   `.espinha`, mesma especificidade) — a correção não pode entrar na folha
   espelhada. Uma camada posterior resolve isso sem tocar `rotefy.css`:
   camada posterior vence camada anterior independente de especificidade,
   então `correcoes.css` (uma regra rasa por defeito, documentado ali) vence
   sem precisar de seletores mais específicos que os do mockup.
   ========================================================================== */

@layer utils, rotefy, correcoes, print;

@import url("rotefy.c0676207a209.css") layer(rotefy);
@import url("correcoes.758e8ca0ef1e.css") layer(correcoes);
@import url("impressao.d0270266a7ee.css") layer(print);

/* ==========================================================================
   UTILITÁRIOS
   De última instância — por isso vivem acima de `components` e `pages` e
   não precisam de `!important` para vencer um componente. Só `print` fica
   acima delas, e por um motivo estreito: a folha de impressão precisa
   vencer o sistema inteiro sem exceção, porque o meio em que ela vale é
   outro.

   `.app-authenticated` e `.print-provenance` (escondida na tela; reacesa
   em `impressao.css`) chegaram aqui na Task 9 da fatia C: as duas eram
   legado puro (`07-legacy.css`/`04-components.css`) sem equivalente em
   `rotefy.css` — nenhuma é vocabulário do mockup, então não havia para
   onde "renomear" (medido: `grep` das duas em `rotefy.css` não acha
   nada). Token do sistema anterior (`--space-4`, `--topbar-height`)
   virou o equivalente de `rotefy.css` (`--top-h`) ou valor cru onde o
   mockup nunca teve token — `TokensQueSobrevivemTests` só varre
   `correcoes.css`/`impressao.css`, mas a garantia que ele existe para
   cumprir vale igual aqui: nenhum `var()` desta camada pode apontar para
   uma folha que a Task 13 apaga.

   `.skip-link` (terceira classe da mesma dívida) NÃO mora aqui — mora
   fora de camada nenhuma, logo abaixo do bloco. Medido ao vivo depois de
   mover para cá: `background`/`border-radius` batiam, mas `color`
   resolvia para `--n800` (herdado do `body`), não para `--n0` que a
   regra declara. Motivo: `rotefy.css:28` tem `a{color:inherit}`, na
   camada `rotefy` — que vem DEPOIS de `utils` na lista de `@layer` do
   topo deste arquivo, então vence `.skip-link{color:…}` pela ORDEM da
   camada, não por especificidade (`.skip-link` tem especificidade maior
   que `a`, e perdeu do mesmo jeito). Sem camada nenhuma, a regra vence
   `a{color:inherit}` incondicionalmente — a mesma garantia que já vale
   para `prefers-reduced-motion` logo abaixo. Não quebra a metade de
   impressão: a regra de `impressao.css` que esconde `.skip-link` no
   papel só declara `display`, propriedade que esta regra nunca toca.
   ========================================================================== */

@layer utils {
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .numeric-cell {
    text-align: right;
    font-variant-numeric: tabular-nums;
  }

  /* `<body class="app-authenticated">` só quando autenticado
     (`templates/base.html`) — gatilho vivo: quem lê são as duas
     declarações abaixo, `min-width`/`overflow-x` no próprio `<body>`.
     (A revisão da Task 9 desfez a justificativa anterior, que apontava
     para `.app-authenticated .toast-stack`: essa classe não é escrita por
     template nenhum nem por script nenhum.) O `background:
     var(--color-field)` que `07-legacy.css` também
     declarava para este seletor já perdia para `body{background:
     var(--n50)}` de `rotefy.css` (camada posterior) — morto por cascata
     antes desta tarefa, e não veio junto na mudança de folha. */
  .app-authenticated {
    min-width: 20rem;
    overflow-x: clip;
  }

  /* O par público de `.app-authenticated`, e a única regra VIVA que a
     deleção das sete folhas (Task 13) teria perdido em silêncio.
     `07-legacy.css` declarava `.landing-page, .public-auth-page {min-width:
     20rem; overflow-x: clip; background: var(--color-canvas)}` — o mesmo
     par de declarações que a Task 9 já tinha movido para cá pelo ramo
     autenticado, só que pelo ramo público.

     Por que nenhum teste viu: os dois nomes NÃO chegam ao HTML por
     `class="…"`. Eles vêm de `{% block body_class %}` (`landing/home.html`,
     `landing/contact*.html`, as cinco de `registration/`), e tanto a
     varredura da Task 9 quanto `NenhumTemplateLeOLegadoTests` procuravam
     `class="([^"]*)"` — literal, no template. Foi o inventário
     (`design_system/tools/css_inventory.py`, que varre o texto inteiro)
     que os achou, e por isso ele roda nesta tarefa antes do commit e não
     depois.

     `background: var(--color-canvas)` NÃO veio junto: ele já estava morto
     por cascata antes desta tarefa. `rotefy.css` declara
     `body{background:var(--n50)}` numa camada POSTERIOR a `legacy`, e
     camada posterior vence camada anterior independentemente de
     especificidade — `.landing-page` (0,1,0) perdia para `body` (0,0,1) do
     mesmo jeito. As outras duas regras do bloco original
     (`.landing-page .content` e, sob `@media (max-width: 424px)`,
     `.landing-page .shell`) também não vieram: `.content` e `.shell` são o
     `<main class="shell content">` que a Task 6 da fatia C apagou de
     `base.html` — nenhum template escreve os dois desde então. */
  .landing-page,
  .public-auth-page {
    min-width: 20rem;
    overflow-x: clip;
  }

  /* NÃO existe aqui uma regra para `.app-authenticated .toast-stack`.
     A Task 9 a trouxe de `04-components.css`, e a revisão mediu que
     `toast-stack` não é escrita por template nenhum nem por script
     nenhum: a pilha viva é `.toast-root` (`templates/base.html:201`), que
     `rotefy.css:680` ancora em `bottom:16px` e por isso nem precisa de
     recuo de topbar. Preservá-la aqui instalaria CSS morto numa folha que
     sobrevive à deleção das sete antigas — sem leitor e sem teste que
     reprovasse. Quem escreve `.toast-stack`/`.ex-toast` são só as
     ferramentas de `design_system/tools/`, que injetam a própria
     marcação. */

  /* Procedência do tenant na impressão: escondida na tela (o rodapé do
     trilho já mostra), reacesa só por `impressao.css` — ver a nota lá.
     Sem equivalente no mockup: a fatia A criou o marcador para este
     produto, não para o canvas exportado. */
  .print-provenance {
    display: none;
  }
}

/* ==========================================================================
   PULO PARA O CONTEÚDO
   Fora de qualquer camada de propósito, pelo mesmo motivo do bloco de
   movimento reduzido logo abaixo: sem camada, a regra vence
   `a{color:inherit}` (rotefy.css:28, camada `rotefy`) incondicionalmente —
   dentro de `@layer utils` ela perdia essa MESMA declaração de `color` por
   ORDEM de camada (`rotefy` vem depois de `utils`), apesar de
   `.skip-link` ter especificidade maior que `a`. Ver a nota longa no
   comentário de UTILITÁRIOS, acima.
   ========================================================================== */

/* `<a class="skip-link">`, a primeira coisa do `<body>`
   (`templates/base.html`), invisível até ganhar foco por teclado —
   `test_the_skip_link_is_the_first_thing_in_the_body` mede a ordem no
   HTML. Valores de `03-layout.css` (a versão que valia antes da Task 9 da
   fatia C: `layout` vencia `legacy` na ordem de `@layer`, então era ela,
   não a de `07-legacy.css`, quem pintava), com `--radius`→`--r` e
   `--ink`/`--ink-fg`→`--n900`/`--n0` (mesma relação escuro-sobre-claro,
   paleta de `rotefy.css`; nenhuma das duas tinha equivalente no mockup);
   `--z-skip-link` era só `1000` — cru aqui, como todo `z-index` de
   `rotefy.css`. A metade de impressão (`.skip-link{display:none}` sob
   `@media print`) mora em `impressao.css`, camada `print` — esta regra
   nunca declara `display`, então não compete com ela. */
.skip-link {
  position: absolute;
  z-index: 1000;
  top: 8px;
  left: 8px;
  padding: 8px 16px;
  border-radius: var(--r);
  background: var(--n900);
  color: var(--n0);
  transform: translateY(-200%);
}

.skip-link:focus-visible { transform: translateY(0); }

/* ==========================================================================
   MOVIMENTO REDUZIDO
   Fora de qualquer camada de propósito: regras não-encamadas vencem todas as
   camadas. É o que permite honrar `prefers-reduced-motion` sem `!important`.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto;
    transition-duration: .01ms;
    animation-duration: .01ms;
    animation-iteration-count: 1;
  }
}