/* ==========================================================================
   moneytalks -- base
   ==========================================================================

   Reset minimo, os sete papeis tipograficos como classes, e **as tres
   primitivas que as duas telas desta story usam**: superficie de cartao, campo
   e botao.

   O que NAO esta aqui, de proposito: navegacao, badge de estado, estado vazio,
   `Sheet`, cartao-destaque, trilha de etapas, card de clipe. Sao da Story 1.4
   em diante, e escreve-los agora seria decidir a moldura sem a tela que a
   exercita. Esta folha e para ser **acrescida**, nunca reescrita.

   **Toda cor** vem de `tokens.css`, e `test_tokens.py` recusa uma cor literal
   aqui: ela significaria um token que faltou ser declarado nos dois temas, e
   sobreviveria ao alternador sem mudar.

   Nem todo *numero* e token, e a distincao e deliberada. Vira token o valor que
   um contrato fixa ou que se repete com a mesma razao -- raio, espaco, papel
   tipografico, `--alvo-de-toque`. Fica literal o valor que existe uma vez, para
   uma regra so, e cujo nome nao diria mais do que o proprio numero: o `6px`
   entre rotulo e campo, o `420px` da coluna do login. Nomear cada um deles
   produziria um dicionario de sinonimos, nao um sistema.
   ========================================================================== */

/* --------------------------------------------------------------------------
   A familia -- IBM Plex, servida de `web/static/fonts/`
   Relativo e nunca host externo: `test_tokens.py` recusa `http` em qualquer
   folha. `swap` porque a ferramenta e lida, e texto na fonte do sistema por um
   instante e melhor que texto invisivel. Um arquivo por peso que as folhas de
   fato declaram: 400, 500, 600 e 700 na Sans, 400 e 500 na Mono.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/IBMPlexSans-Regular-Latin1.678efa63c3fb.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/IBMPlexSans-Medium-Latin1.e0399fc4473d.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/IBMPlexSans-SemiBold-Latin1.106da8161b57.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/IBMPlexSans-Bold-Latin1.102e1e2880b8.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/IBMPlexMono-Regular-Latin1.71dd6bb610c9.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/IBMPlexMono-Medium-Latin1.46d493a70cd2.woff2") format("woff2");
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body,
h1,
h2,
h3,
p,
figure,
fieldset,
legend {
  margin: 0;
  padding: 0;
}

fieldset {
  border: 0;
}

html {
  /* O `data-tema` do servidor mora aqui; sem esta linha o fundo do documento
     ficaria branco atras de um `body` escuro durante o scroll elastico. */
  background: var(--cor-fundo);
  color-scheme: light;
  /* A barra de rolagem **sempre** aparece, mesmo em pagina que cabe na tela --
     pedido do operador em 17-09-2026. Sem ela, a pagina curta nao tem barra e a
     longa tem, e a largura util muda uns 15px de uma tela para a outra: a
     lateral, o titulo e o cartao pulam de lugar a cada navegacao. `scroll` e
     nao `scrollbar-gutter: stable`, porque o pedido e a barra visivel, e nao
     so o espaco reservado para ela. */
  overflow-y: scroll;
}

@media (prefers-color-scheme: dark) {
  /* `:root:not(...)`, e nao `html:not(...)`: o comentario da camada abaixo
     promete "mesma especificidade das camadas de `tokens.css`", e `html` da
     (0,1,1) contra os (0,2,0) de la. Funcionava por acidente da ordem no
     arquivo; agora a promessa e verdade, e `test_tokens.py` a afirma. */
  :root:not([data-tema="claro"]) {
    color-scheme: dark;
  }
}

html:root[data-tema="escuro"] {
  /* Diz ao navegador para pintar barras de rolagem, campos nativos e o menu de
     contexto no esquema escuro. Sem isto, o `<input>` do login nasce branco
     dentro de uma pagina escura em alguns navegadores.

     Mesma ordem e mesma especificidade das camadas de `tokens.css`, pela mesma
     razao -- ver a nota da camada 3 la. */
  color-scheme: dark;
}

body {
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte);
  font-size: var(--texto-body-tamanho);
  font-weight: var(--texto-body-peso);
  line-height: var(--texto-body-entrelinha);
  -webkit-font-smoothing: antialiased;
}

/* Anel de foco visivel nos dois temas -- WCAG 2.2 AA, e o piso de
   acessibilidade da espinha de experiencia. Vale para tudo que recebe foco,
   inclusive o resumo de erro do login, que tem `tabindex="-1"`.

   Sem `border-radius` aqui, de proposito: uma regra global de foco que declare
   raio sobrescreveria o raio proprio de todo elemento focavel. Hoje todo raio
   e `0` e a diferenca nao aparece; ela volta a importar no dia em que um
   degrau da escala deixar de ser. */
:focus-visible {
  outline: 2px solid var(--cor-anel);
  outline-offset: 2px;
}

/* `--cor-link`, e nao `--cor-primaria`: esta regra e a rede embaixo do primeiro
   `<a>` escrito sem classe, e a cor de acao crua da 4,33:1 sobre o canvas --
   abaixo dos 4,5:1 que AA cobra de texto, e um link e texto. Todo link que o
   produto de fato escreve carrega classe propria e nao passa por aqui. */
a {
  color: var(--cor-link);
}

/* --------------------------------------------------------------------------
   Os sete papeis
   -------------------------------------------------------------------------- */
.t-display {
  font-size: var(--texto-display-tamanho);
  font-weight: var(--texto-display-peso);
  line-height: var(--texto-display-entrelinha);
  letter-spacing: var(--texto-display-espacamento);
}

.t-display-sm {
  font-size: var(--texto-display-sm-tamanho);
  font-weight: var(--texto-display-sm-peso);
  line-height: var(--texto-display-sm-entrelinha);
  letter-spacing: var(--texto-display-sm-espacamento);
}

.t-numeral {
  font-family: var(--fonte-mono);
  font-size: var(--texto-numeral-tamanho);
  font-weight: var(--texto-numeral-peso);
  line-height: var(--texto-numeral-entrelinha);
  letter-spacing: var(--texto-numeral-espacamento);
  font-variant-numeric: tabular-nums;
}

.t-prose {
  font-size: var(--texto-prose-tamanho);
  font-weight: var(--texto-prose-peso);
  line-height: var(--texto-prose-entrelinha);
  max-width: var(--medida-de-leitura);
}

.t-body {
  font-size: var(--texto-body-tamanho);
  font-weight: var(--texto-body-peso);
  line-height: var(--texto-body-entrelinha);
}

.t-label {
  font-size: var(--texto-label-tamanho);
  font-weight: var(--texto-label-peso);
  line-height: var(--texto-label-entrelinha);
}

.t-caption {
  font-size: var(--texto-caption-tamanho);
  font-weight: var(--texto-caption-peso);
  line-height: var(--texto-caption-entrelinha);
}

.t-suave {
  color: var(--cor-suave-texto);
}

/* --------------------------------------------------------------------------
   Primitiva 1 -- superficie de cartao
   O contentor de tudo. Os 24px de padding nao encolhem por densidade.
   -------------------------------------------------------------------------- */
.cartao {
  background: var(--cor-cartao);
  color: var(--cor-cartao-texto);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-lg);
  padding: var(--espaco-cartao);
  box-shadow: var(--elevacao-cartao);
}

/* Teto de largura para o cartao que carrega **formulario**, e nao conteudo de
   largura cheia.

   Ate a Story 1.4 esse teto vinha do envelope `.superficie--larga`, que a tela
   de Configuracoes largou ao passar a estender a casca -- e o formulario passou
   a esticar ate os 1240px da coluna de conteudo, com os rotulos de `radio` a um
   palmo dos controles. O numero e o mesmo de antes; o que muda e onde ele mora:
   no cartao, que e quem sabe o que carrega, em vez de num envelope de pagina
   que a moldura substituiu. */
.cartao--medida {
  max-width: 640px;
}

/* --------------------------------------------------------------------------
   Primitiva 2 -- campo
   -------------------------------------------------------------------------- */
.campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.campo + .campo {
  margin-top: var(--espaco-entre-cartoes);
}

.campo > label {
  font-size: var(--texto-label-tamanho);
  font-weight: var(--texto-label-peso);
  line-height: var(--texto-label-entrelinha);
}

/* **Um grupo, e nao duas copias.** A `textarea` do editor de estrategia (Story
   3.2) e o mesmo campo do `input`: mesmo fundo, mesma borda, mesmo raio, mesma
   familia tipografica. Duplicar as declaracoes criaria dois campos que divergem
   no dia em que um deles mudar -- e o que diverge e sempre o que ninguem releu.
   O que e so da `textarea` mora na regra propria dela, logo abaixo.

   **E o `<select>` do filtro (`_filtros.html`) entrou no mesmo grupo**, pela
   razao literal da `textarea`: ele e o campo desta interface -- mesmo fundo,
   mesma borda de 3:1, mesmo alvo de toque, mesma familia --, e uma regra
   `.filtros select` paralela seria o segundo campo, o que diverge no dia em que
   alguem corrigir so um dos dois. O que ele **nao** ganha e aparencia propria: a
   seta e o menu sao os nativos do sistema, e e isso que faz o controle funcionar
   sem uma linha de script.

   **O respiro lateral e uma propriedade customizada, e nao um literal, ja
   aqui.** A `textarea` soma esse mesmo respiro de volta no `max-width` para que
   os 68ch valem para o texto e nao para a caixa (ver a regra dela) -- e enquanto
   o numero estivesse escrito duas vezes, mudar o do grupo faria a medida de
   leitura encolher sem nada acusar. Uma fonte, dois consumidores. */
.campo input,
.campo select,
.campo textarea {
  --campo-respiro-lateral: 12px;

  width: 100%;
  /* O campo de login e alcancado pelo polegar no celular tanto quanto o botao.
     O numero mora em `tokens.css`, com a razao. */
  min-height: var(--alvo-de-toque);
  padding: 0 var(--campo-respiro-lateral);
  background: var(--cor-cartao);
  color: var(--cor-cartao-texto);
  /* `--cor-borda-campo`, e nao `--cor-borda`: o campo tem o mesmo fundo do
     cartao que o contem, entao a borda e a **unica** coisa que o delimita --
     e a borda decorativa de cartao da 1,19:1, contra os 3:1 que a WCAG 2.2
     exige de limite de componente. Com ela, o campo era invisivel em repouso. */
  border: 1px solid var(--cor-borda-campo);
  border-radius: var(--raio-md);
  font-family: inherit;
  font-size: var(--texto-body-tamanho);
  line-height: var(--texto-body-entrelinha);
}

/* O `aria-invalid` que `web/views_auth.py::anotar_erros` escreve -- e que
   `estrategia.html` escreve pelo mesmo criterio -- e o que pinta a borda: o
   estado nao ganha uma classe propria que possa divergir do atributo que o
   leitor de tela anuncia. Uma fonte, duas leituras. */
.campo input[aria-invalid="true"],
.campo textarea[aria-invalid="true"] {
  border-color: var(--cor-erro);
}

/* O que e so da `textarea`. Ela herda do grupo acima tudo menos estas quatro
   declaracoes, e cada uma existe por um motivo proprio:

   - o `padding: 0 var(--campo-respiro-lateral)` do grupo serve a uma caixa de
     **uma** linha, onde a altura vem do `min-height` e a linha se centraliza
     sozinha; numa caixa de varias linhas ele cola a primeira linha na borda de
     cima -- por isso aqui o respiro vertical volta, e o lateral e o **mesmo**
     do grupo, pela variavel;
   - `min-height: var(--alvo-de-toque)` e o piso de um controle que se **clica**,
     e nao a altura de um campo onde se escreve prosa de varios paragrafos -- o
     criterio editorial inteiro cabe nos 240px sem rolar no caso comum;
   - `resize: vertical` deixa o operador aumentar a caixa para um criterio
     longo, e **so** na vertical: na horizontal ele arrastaria o texto para fora
     da medida de leitura, que e a declaracao seguinte;
   - **os 68ch valem para o texto, e nao para a caixa.** Com o `box-sizing:
     border-box` global, um `max-width` cru poria o `padding` *dentro* do teto e
     a linha real cairia para ~66ch; os dois respiros voltam somados, como em
     `.candidato__justificativa` de `casca.css`.

   O respiro lateral e uma propriedade customizada, e nao o mesmo numero escrito
   em tres lugares: a soma so devolve os 68ch enquanto o `padding` do grupo, o
   `padding` daqui e a parcela do `max-width` forem o mesmo valor, e literais
   iguais podem divergir sem que nada acuse -- a medida encolheria em silencio,
   que e o defeito exato que a soma existe para evitar. E o que
   `.candidato__justificativa` ja faz com `--casca-respiro-largo`; aqui a
   variavel e declarada **no grupo** porque quem aplica o respiro lateral e ele,
   e nao esta regra. */
.campo textarea {
  min-height: 240px;
  padding: 10px var(--campo-respiro-lateral);
  resize: vertical;
  max-width: calc(var(--medida-de-leitura) + 2 * var(--campo-respiro-lateral));
}

/* Campo e botao na mesma linha -- o formulario de um campo so (Jobs).

   O campo fica com todo o espaco que sobra, e o botao com a largura do proprio
   rotulo. `min-width: 0` porque um item flex nao encolhe abaixo do conteudo por
   padrao, e uma URL longa ja digitada empurraria o botao para fora do cartao no
   celular. `stretch` deixa os dois com a mesma altura, que ja e o alvo de toque
   nos dois. O erro do campo continua **embaixo** da linha, fora dela. */
.campo__linha {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.campo__linha input {
  flex: 1;
  min-width: 0;
}

.campo__linha .botao {
  flex: none;
}

.campo .erro-do-campo {
  font-size: var(--texto-caption-tamanho);
  line-height: var(--texto-caption-entrelinha);
  /* Sobre `--cor-cartao`, e nao sobre um tint: aqui `--cor-erro` da 4,83:1 e
     passa. Quem vai sobre tint e `--cor-erro-forte`, no `.aviso--erro`. */
  color: var(--cor-erro);
}

/* --------------------------------------------------------------------------
   Primitiva 3 -- botao
   -------------------------------------------------------------------------- */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--alvo-de-toque);
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--raio-md);
  background: var(--cor-primaria);
  color: var(--cor-primaria-texto);
  font-family: inherit;
  font-size: var(--texto-body-tamanho);
  /* O mesmo 500 do papel `label`, e por token: o rotulo de botao e um rotulo. */
  font-weight: var(--texto-label-peso);
  line-height: var(--texto-body-entrelinha);
  cursor: pointer;
  /* **Para o dia em que a primitiva vestir uma ancora, e ele chegou na Story
     5.3.** O link `Proximo clipe pendente` da barra da Revisao e o primeiro `<a>`
     do repositorio a usar esta classe, e um `<a>` traz sublinhado do navegador:
     sem esta linha ele sairia com o rotulo riscado por baixo dentro do campo de
     cor da marca. E declaracao **da primitiva**, e nao um `a.botao` ao lado,
     porque a promessa dela e sobre a aparencia e nao sobre a tag -- e ela e no-op
     no `<button>`, que nunca teve sublinhado. As sete irmas desta declaracao
     moram em `casca.css`, todas em classes de afordancia de ancora. */
  text-decoration: none;
}

/* Os tres estados que um botao sem retorno visual perde. `:disabled` importa
   mais que os outros dois: sem ele, um botao inerte e pixel a pixel igual a um
   clicavel, e o operador clica de novo achando que errou a mira. */
.botao:hover:not(:disabled) {
  filter: brightness(0.94);
}

.botao:active:not(:disabled) {
  filter: brightness(0.88);
}

.botao:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   Grupo de escolha exclusiva -- tres `radio` com rotulo textual.
   Alvo de 44px por linha: a escolha e feita no celular tanto quanto no desktop.
   -------------------------------------------------------------------------- */
.opcoes {
  display: flex;
  flex-direction: column;
  margin-top: var(--espaco-entre-cartoes);
}

.opcoes > label {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--alvo-de-toque);
  cursor: pointer;
}

.opcoes input[type="radio"] {
  accent-color: var(--cor-primaria);
  width: 18px;
  height: 18px;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Caixa de selecao e `radio` desenhados aqui, e nao pelo navegador.

   O controle nativo arredonda por conta propria -- o `radio` e um circulo em
   todo navegador, e o `checkbox` tem canto em quase todos --, e nenhum
   `--raio-*` o alcanca. A identidade de 16-09-2026 e canto reto sem excecao,
   entao os dois passam a ser um quadrado de borda de campo: cheio na cor de
   acao quando marcados, com um quadrado interno no `radio` e um visto no
   `checkbox`. Tamanho, margem e alinhamento continuam com as regras de cada
   componente (`.opcoes`, `.confirmacao`, `.interruptor`), que sao mais
   especificas e so declaram isso.
   -------------------------------------------------------------------------- */
input[type="checkbox"],
input[type="radio"] {
  appearance: none;
  display: inline-grid;
  place-content: center;
  width: 18px;
  height: 18px;
  border: 1px solid var(--cor-borda-campo);
  border-radius: 0;
  background: var(--cor-cartao);
  cursor: pointer;
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
  background: var(--cor-primaria);
  border-color: var(--cor-primaria);
}

input[type="radio"]:checked::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--cor-primaria-texto);
}

input[type="checkbox"]:checked::before {
  content: "";
  width: 10px;
  height: 10px;
  background: var(--cor-primaria-texto);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%);
}

input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.recuo-de-secao {
  margin-top: var(--espaco-cartao);
}

/* --------------------------------------------------------------------------
   Aviso -- o portador do erro de login e da nota de paleta em revisao.
   Tint de fundo mais texto na cor cheia: o padrao da referencia.
   -------------------------------------------------------------------------- */
.aviso {
  border-radius: var(--raio-md);
  padding: 12px 16px;
  font-size: var(--texto-body-tamanho);
  line-height: var(--texto-body-entrelinha);
}

/* `--cor-erro-forte` e nao `--cor-erro`: a cor cheia sobre o proprio tint da
   4,23:1 no tema claro, abaixo dos 4,5:1 de AA -- e este e o portador da
   mensagem de falha do login, que o produto exige que seja legivel. */
.aviso--erro {
  background: var(--cor-erro-tint);
  color: var(--cor-erro-forte);
}

.aviso--sucesso {
  background: var(--cor-sucesso-tint);
  color: var(--cor-sucesso-forte);
}

.aviso--alerta {
  background: var(--cor-aviso-tint);
  color: var(--cor-aviso-forte);
}

.aviso--info {
  background: var(--cor-info-tint);
  color: var(--cor-texto);
}

/* A lista de clipes que `plan` descartou, dentro de um `aviso--alerta`: a cor e a
   do aviso, e aqui so mora o ritmo entre os itens. */
.descartes {
  margin: 8px 0 0;
  padding-left: 20px;
}

.descartes__item + .descartes__item {
  margin-top: 8px;
}

.descartes__titulo {
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Superficie centrada -- o envelope das duas telas desta story.
   A 1.4 troca isto pela moldura com navegacao; ate la, e o que ha.
   -------------------------------------------------------------------------- */
.superficie {
  /* `100vh` primeiro como reserva para navegador sem `dvh`; `100dvh` depois
     porque no iOS Safari e no Chrome do Android a barra dinamica faz `100vh`
     transbordar a area visivel -- justamente na superficie onde o alvo de 44px
     foi dimensionado para o polegar. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: var(--espaco-entre-secoes);
  align-items: center;
  /* `safe` centraliza enquanto cabe e alinha ao inicio quando nao cabe. Sem
     ele, conteudo mais alto que a viewport transborda para **cima** e o topo do
     formulario fica inalcancavel por rolagem -- o caso do login com erro num
     celular em paisagem.

     Duas linhas pela mesma razao do `100vh`/`100dvh` acima: navegador que nao
     conhece a palavra-chave `safe` descarta a declaracao **inteira** e cai em
     `flex-start`, ou seja, perde a centralizacao. A reserva vem primeiro. */
  justify-content: center;
  justify-content: safe center;
  padding: var(--espaco-entre-secoes) 16px;
}

.superficie > * {
  width: 100%;
  max-width: 420px;
}

/* --------------------------------------------------------------------------
   A logo (`_logo.html`) -- a marca e o nome lado a lado.
   -------------------------------------------------------------------------- */

/* **Mora aqui, e nao em `casca.css`, desde a pagina inicial publica.** Ela era
   peca de moldura enquanto o unico lugar que a mostrava era a casca; `/app/` a
   pos num cabecalho que estende `base.html` e nao carrega a folha da moldura, e
   uma regra de logo escrita la deixaria o balao sem cor para o unico leitor que
   nunca teve sessao -- o revisor do Google.

   O balao pinta com a cor de acao e as barras com a tinta que a marca pareia com
   ela -- o mesmo par de `.botao`, ja medido em `tests/test_contraste.py`, e o
   mesmo do icone da aba. `Talks` sai mais leve que `Money` para o nome ler como
   duas palavras sem precisar de espaco. */
.logo {
  display: inline-flex;
  align-items: center;
  /* Literal de uma regra so, pela razao do cabecalho desta folha: e o degrau
     fino entre a marca e o nome, e `--casca-respiro` -- que valia o mesmo -- e
     declarado na folha da moldura, que esta pagina nao carrega. */
  gap: 8px;
}

.logo__marca {
  flex: none;
  width: 22px;
  height: 22px;
}

.logo__campo {
  fill: var(--cor-primaria);
}

.logo__traco {
  stroke: var(--cor-primaria-texto);
}

.logo__talks {
  font-weight: var(--texto-body-peso);
  color: var(--cor-suave-texto);
}

/* A logo como **cabecalho de pagina**, e nao como marca de barra: e o tamanho
   que a pagina inicial publica usa acima do titulo. A classe vai no **envelope**
   da logo, e nao no `.logo` de dentro: `_logo.html` traz o proprio `.logo`, e
   por-la no mesmo elemento pediria mexer no parcial que a casca compartilha.

   A marca cresce ate o corpo do papel de display, que e o token do `<h1>` logo
   abaixo dela -- assim os dois crescem juntos se a escala tipografica mudar, em
   vez de a logo ficar para tras num numero digitado aqui. */
.logo--cabecalho {
  font-size: var(--texto-display-sm-tamanho);
  font-weight: var(--texto-display-sm-peso);
}

.logo--cabecalho .logo__marca {
  width: var(--texto-display-tamanho);
  height: var(--texto-display-tamanho);
}

/* O modificador das paginas de documento -- Politica de Privacidade e Termos de
   Servico. O teto de 420px acima e a largura de um **formulario** (login) e de
   um recado curto (404): um documento legal inteiro dentro dele vira uma coluna
   estreita em qualquer tela, e a leitura fica impraticavel justamente para quem
   o sistema nao conhece -- o revisor do Google.

   O modificador solta o teto para `--medida-de-leitura`, que e o mesmo token que
   `.t-prose` usa: a largura de prosa deste sistema tem um valor so, e nao um
   numero digitado aqui. `.superficie` **nao** e tocada de proposito -- login e
   404 dependem do teto estreito dela. */
.superficie--documento > * {
  max-width: var(--medida-de-leitura);
}