/* =========================================================================
   Desenhando Conteúdos — "o baralho em uso"

   O Desenhando Conteúdos é um kit de cards: vinte formatos nomeados, em seis
   famílias, com ficha técnica para consulta. Este app é esse kit em uso — ele
   não reescreve o texto de ninguém, ele diz qual card cabe em cada trecho.
   Daí a interface: papel frio, a calha do revisor à esquerda, e o vocabulário
   do catálogo (código, família, formato) sempre à vista.

   Duas vozes, e a distinção entre elas é a tese:
     · a obra — títulos e o texto de quem escreve — é composta em Literata;
     · o catálogo — códigos, famílias, etiquetas — fala em IBM Plex Mono.
   A ferramenta em volta (botões, rótulos, formulários) usa IBM Plex Sans e
   não disputa atenção com nenhuma das duas.

   Uma cor de marca só: o azul DC, e ele fica reservado ao ato central do produto —
   apontar um formato. As outras quatro (violeta, ocre, verde, vermelho) não são
   decoração nem paleta: cada uma nomeia um tipo de marcação do revisor, aparece em
   traço fino ou fundo lavado, e nunca decide sozinha — toda cor vem acompanhada de
   rótulo em texto, para quem não as distingue.
   ========================================================================= */

:root {
    /* papel e tinta */
    --papel: #edeff2;
    --folha: #ffffff;
    --tinta: #101418;
    --tinta-fraca: #59616a;
    /* O tom antigo (#848c95) rendia 2,96:1 sobre o papel — abaixo do mínimo legível, e
       ele não pinta só cromo: o lado "antes" do diff e as metas das listas são texto que
       alguém precisa ler. Este passa (4,6:1 no papel, 5,3:1 na folha) ao custo de chegar
       perto do tom fraco. A hierarquia não se perde por isso: o que separa etiqueta de
       texto secundário aqui sempre foi o corpo, a mono e a caixa alta, não o cinza. */
    --tinta-tenue: #646c75;
    --regua: #dde1e6;
    --regua-forte: #c2c8cf;
    /* A régua que fecha um campo não é a que separa duas coisas na página. Divisória é
       enfeite e pode ser leve; aresta de controle diz onde se pode escrever ou clicar, e
       quem não a enxerga não acha o campo. As duas de cima ficam em 1,3:1 e 1,7:1 sobre a
       folha — abaixo dos 3:1 que uma aresta pede. Esta dá 3,7:1 na folha e 3,2:1 no papel,
       e é usada só nas bordas de campo e de botão: as outras réguas seguem claras, que é
       o que mantém o papel leve. */
    --regua-campo: #7e8690;

    /* azul DC — a cor da marca. O tom puro é gráfico (barras, traços, fundos);
       o escuro é o que pode virar texto sem cair abaixo do contraste AA. */
    --dc: #00afef;
    --azul: #0a72a0;
    --azul-fundo: #e7f7fe;

    /* demais marcas do revisor — cada uma carrega uma semântica, nunca sozinha */
    --violeta: #5b3f97;
    --violeta-fundo: #f3f0fa;
    --ocre: #8a5d0b;
    --ocre-fundo: #faf4e6;
    --verde: #226b4a;
    --verde-fundo: #edf5f0;
    --vermelho: #b3302a;
    --vermelho-fundo: #fbf0ef;

    /* medidas */
    --goteira: clamp(1rem, 4vw, 2rem);  /* respiro lateral de toda página */
    --margem: 5.5rem;        /* largura da margem do revisor */
    /* Medida de leitura. Não é um número fixo porque a tela não é: no notebook
       apertado 62ch já é o limite do confortável, no monitor largo travar em 62ch
       deixa o texto como uma tira no meio do papel. Cresce até 82ch e para —
       daí em diante a linha longa custa mais do que rende. */
    --medida: clamp(62ch, 40ch + 18vw, 82ch);
    --raio: 4px;
    --sombra: 0 1px 2px rgba(16, 20, 24, .05), 0 8px 24px -16px rgba(16, 20, 24, .3);

    /* vozes */
    --voz-ferramenta: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
    --voz-manuscrito: "Literata", Georgia, "Times New Roman", serif;
    --voz-titulo: "Literata", Georgia, "Times New Roman", serif;
    --voz-dado: "IBM Plex Mono", ui-monospace, monospace;
}

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

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

/* `50vw` conta a barra de rolagem, `50%` não: a sangria do baralho passa alguns pixels
   de cada borda quando a barra é clássica, e a página ganharia rolagem lateral. `clip`
   corta essa folga sem criar um contexto de rolagem (o que `hidden` faria, quebrando
   `position: sticky`). Só a área vazia da sangria some — o primeiro card continua
   alinhado com o texto, porque o recuo da fita é medido à parte. */
body { overflow-x: clip; }

body {
    margin: 0;
    background: var(--papel);
    color: var(--tinta);
    font-family: var(--voz-ferramenta);
    font-size: 16px;
    line-height: 1.55;
    font-feature-settings: "ss01";
}

/* Títulos na voz da obra, não numa terceira fonte só para eles: quem escreve e o
   que ele escreve falam igual. Literata pede peso 600 e um tracking negativo para
   não engordar em corpo grande. */
h1, h2, h3 { font-family: var(--voz-titulo); font-weight: 600; letter-spacing: -.02em;
    line-height: 1.15; color: var(--tinta); }
h1 { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); margin: 0 0 .5rem; }
h2 { font-size: 1.3rem; margin: 0 0 .5rem; }
h3 { font-size: 1.05rem; }
h1:focus { outline: none; }

a { color: var(--azul); text-underline-offset: .18em; text-decoration-thickness: 1px; }

:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; border-radius: 2px; }
/* O `main` recebe foco pelo link de pular, mas não é um controle: nada de anel nele. */
main:focus { outline: none; }

/* Só existe para quem lê com os ouvidos: fora da tela, mas dentro da árvore. Não usa
   `display: none` nem `visibility: hidden` — os dois somem também do leitor de tela. */
.sr-only {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; margin: -1px; padding: 0; border: 0;
}

/* Pular para o conteúdo: fora da tela até o Tab chegar nele, e aí desce como uma
   etiqueta presa na borda de cima. Cobre um pedaço do cabeçalho enquanto está em foco,
   que é exatamente o único momento em que ele importa. */
.pular {
    position: absolute; left: var(--goteira); top: -100%;
    z-index: 10; background: var(--folha); color: var(--tinta);
    border: 1px solid var(--tinta); border-radius: 0 0 var(--raio) var(--raio);
    border-top: 0; padding: .5rem .9rem; font-size: .85rem; text-decoration: none;
    box-shadow: var(--sombra);
}
.pular:focus { top: 0; }

/* Uma etiqueta é uma etiqueta: caixa alta, mono, discreta. Usada em toda a casa. */
.marca, .modo-etiqueta, .selo-formato, .formato, .etiqueta, .editado,
.card header, .comparar .lado h3, .arquitetura .formato {
    font-family: var(--voz-dado);
    font-size: .68rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .09em;
}

/* ---------------------------------------------------------------- cabeçalho */

.app-header {
    display: flex; align-items: center; gap: 1rem;
    padding: .85rem clamp(1rem, 4vw, 2rem);
    background: var(--folha);
    border-bottom: 1px solid var(--regua);
}
.app-header .marca {
    font-family: var(--voz-titulo); font-size: 1.15rem; font-weight: 600;
    text-transform: none; letter-spacing: -.01em;
    color: var(--tinta); text-decoration: none;
}
.app-header nav { margin-left: auto; display: flex; gap: 1.4rem; align-items: center;
    font-size: .9rem; }
.app-header nav a { color: var(--tinta-fraca); text-decoration: none;
    padding-bottom: 2px; border-bottom: 2px solid transparent; }
.app-header nav a:hover { color: var(--tinta); border-bottom-color: var(--regua-forte); }
/* NavLink acende a página atual: um traço de lápis sob o nome, não um botão. */
.app-header nav a.active { color: var(--tinta); border-bottom-color: var(--dc); }
.app-header .usuario { font-family: var(--voz-dado); font-size: .72rem;
    color: var(--tinta-tenue); }

/* No celular o topo vira duas faixas: a marca em cima, a navegação numa trilha que
   rola de lado. Quatro links não justificam esconder tudo atrás de um menu. */
@media (max-width: 700px) {
    .app-header { flex-wrap: wrap; gap: .5rem 1rem; padding-bottom: 0; }
    .app-header nav { margin-left: 0; width: 100%; gap: 1.1rem;
        overflow-x: auto; scrollbar-width: none;
        padding-bottom: .55rem; }
    .app-header nav::-webkit-scrollbar { display: none; }
    .app-header nav a { white-space: nowrap; }
    /* O e-mail sai da trilha: numa faixa que rola ele ficava sempre cortado, com cara
       de defeito. Quem precisa conferir a conta vê o nome dela em /sair. */
    .app-header .usuario { display: none; }
}

/* ------------------------------------------------------------------ páginas */

/* `width: 100%` não é enfeite: o body é flex em coluna, e a margem `auto` que
   centraliza faz o item ser medido pelo próprio conteúdo. Sem uma largura
   definida, a fita do baralho esticava a página inteira e o texto saía da tela
   no celular. */
.home, .pagina, .auth {
    width: 100%;
    max-width: 60rem;
    margin: clamp(1.5rem, 4vw, 3rem) auto;
    padding: 0 var(--goteira);
}
/* Estas duas são as únicas telas com duas colunas de verdade — texto e sugestões,
   antes e depois. Em 60rem elas se espremiam uma contra a outra e ainda sobrava
   papel vazio dos dois lados; aqui a folha acompanha a mesa. Formulários, listas
   e a arquitetura ficam nos 60rem: largura ali não vira leitura, vira olho
   viajando de um lado ao outro de uma linha curta. */
.pagina.conteudo, .pagina.comparar { max-width: 82rem; }
/* Entrar é uma folha isolada, não campos soltos no papel de fundo. */
.auth { max-width: 25rem; background: var(--folha); border: 1px solid var(--regua);
    border-radius: var(--raio); box-shadow: var(--sombra);
    padding: 1.75rem clamp(1.25rem, 4vw, 2rem) 2rem; margin-top: clamp(2rem, 8vh, 5rem); }
.auth h1 { font-size: 1.75rem; margin-bottom: 1.25rem; }
.auth label:first-of-type { margin-top: 0; }

/* A home é uma declaração de método: texto grande, sem cartões. A folha é larga —
   a mesma faixa do baralho — mas nem tudo ocupa a folha: a prosa fica na medida
   de leitura (`.home p`), e é o título que ganha o espaço. Título espremido numa
   coluna de 42rem quebrava em três linhas curtas e virava bloco, não frase. */
.home { max-width: 66rem; }
/* A medida do título é dada em `ch` porque o que importa é a quebra, não a
   largura: por volta de 22 caracteres a frase parte em duas linhas cheias. O
   `balance` reparte as duas para nenhuma delas ficar órfã. */
.home h1 { font-size: clamp(2.25rem, 1.4rem + 3vw, 3.75rem); max-width: 22ch;
    text-wrap: balance; }
.home h1 em { font-style: normal; box-shadow: inset 0 -.09em 0 var(--dc); }
/* A prova segue a coluna de texto, não a folha: é uma demonstração de leitura. */
.home .prova { max-width: 42rem; }

/* --- O baralho ------------------------------------------------------------
   Assinatura da home: os vinte formatos do kit, agrupados pelas seis famílias.
   O agrupamento é a informação — a família não se repete card a card, ela
   encabeça a pilha. É o mesmo vocabulário que o app usa depois, dito uma vez
   aqui para quem chega reconhecer o que vai ver.

   Nem fita que rola de lado, nem vitrine de caixinhas. A barra de rolagem
   horizontal escondia metade do kit atrás de um gesto que ninguém adivinha; a
   grade de vinte cartões brancos põe vinte peças competindo entre si, cada uma
   com sombra e moldura de coisa clicável — e nenhuma delas clica.

   O baralho vira glossário: a família na margem, os formatos como verbetes
   soltos no papel, marcados só por um risco fino. É a mesma margem do revisor
   que estrutura a tela de conteúdo, dita aqui pela primeira vez. Uma régua por
   família separa as seis; o resto é tipografia.

   A peça é mais larga que a coluna de texto — o baralho pede espaço, a prosa em
   volta não. Sangra até a borda da tela e o preenchimento traz o conteúdo de
   volta para um limite legível, centrado. */
/* O recuo devolve o conteúdo à mesma borda da folha da home — a soma tem que
   incluir a goteira, senão a família na margem sai alinhada com nada. */
.home .baralho { margin: 3rem calc(50% - 50vw) 2.5rem;
    padding: 0 max(var(--goteira), (100vw - 66rem) / 2 + var(--goteira)); }
.home .baralho .legenda { font-family: var(--voz-dado); font-size: .68rem;
    text-transform: uppercase; letter-spacing: .09em; color: var(--tinta-tenue);
    margin: 0 0 .4rem; max-width: none; padding: 0; }
.home .baralho .fita { list-style: none; display: grid; padding: 0; margin: 0; }
/* A faixa da família: rótulo na margem, verbetes na coluna. A régua acima é o
   que separa uma família da outra — não há moldura em lugar nenhum. */
.home .baralho .fita > li { display: grid; gap: .2rem 2rem;
    grid-template-columns: 11rem minmax(0, 1fr);
    padding: 1.25rem 0; border-top: 1px solid var(--regua); }
.home .baralho .familia { font-family: var(--voz-dado);
    font-size: .64rem; font-weight: 500; text-transform: uppercase; letter-spacing: .09em;
    line-height: 1.5; color: var(--tinta-fraca); margin: .15rem 0 0; }
/* `auto-fill` e não `auto-fit`: com quatro verbetes numa faixa e espaço para
   seis, o `fit` estica os quatro e as famílias deixam de ter a mesma bitola. */
.home .baralho .pilha { list-style: none; display: grid; gap: 1rem 2rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 10.5rem), 1fr));
    padding: 0; margin: 0; }
/* O risco fino é o verbete inteiro: sem fundo, sem moldura, sem sombra. No
   ponteiro ele acende no azul DC — que é exatamente o gesto do produto, apontar
   um formato. Aqui o dedo é o do leitor. */
.home .baralho .verbete {
    padding-left: .85rem; box-shadow: inset 2px 0 0 var(--regua-forte);
    transition: box-shadow .12s ease;
}
.home .baralho .verbete:hover { box-shadow: inset 2px 0 0 var(--dc); }
.home .baralho .nome { display: block; font-family: var(--voz-titulo); font-weight: 600;
    font-size: 1rem; line-height: 1.2; letter-spacing: -.01em; }
/* A definição é a ferramenta falando, não a obra: sans, e por isso precisa
   dizer a família da fonte de volta — `.home p` a compõe em Literata. */
.home .baralho .definicao { font-family: var(--voz-ferramenta); font-size: .78rem;
    line-height: 1.45; color: var(--tinta-fraca); margin: .3rem 0 0;
    max-width: 24ch; }

/* Tela estreita: a margem não cabe ao lado, então a família volta a ser um
   cabeçalho em cima da sua faixa. */
@media (max-width: 46rem) {
    .home .baralho .fita > li { grid-template-columns: minmax(0, 1fr); gap: .8rem; }
    .home .baralho .definicao { max-width: none; }
}
.home p { font-family: var(--voz-manuscrito); font-size: 1.05rem; line-height: 1.7;
    color: var(--tinta-fraca); max-width: 38rem; }
.home p strong { color: var(--tinta); font-weight: 600; }

/* A prova marcada: a mesma margem do revisor que estrutura a tela de conteúdo,
   aqui como demonstração. É a única peça decorada da home — o resto fica quieto. */
.home .prova { margin: 2.5rem 0; padding: 1.25rem 1.4rem 1.4rem; background: var(--folha);
    border: 1px solid var(--regua); border-radius: var(--raio); box-shadow: var(--sombra); }
.home .prova figcaption { font-family: var(--voz-dado); font-size: .68rem;
    text-transform: uppercase; letter-spacing: .09em; color: var(--tinta-tenue);
    padding-bottom: .9rem; border-bottom: 1px solid var(--regua); margin-bottom: 1.1rem; }
.home .prova .linha { display: grid; grid-template-columns: 5rem minmax(0, 1fr);
    column-gap: 1.1rem; border-left: 3px solid var(--regua-forte); padding: .1rem 0 .1rem 0;
    margin-bottom: 1.1rem; }
.home .prova .linha > * { grid-column: 2; }
.home .prova .marca { grid-column: 1; grid-row: 1 / -1; text-align: right;
    padding-top: .15rem; color: var(--tinta-tenue); }
.home .prova .marca-formato { border-left-color: var(--azul); }
.home .prova .marca-formato .marca { color: var(--azul); }
.home .prova .marca-preservar { border-left-color: var(--verde); }
.home .prova .marca-preservar .marca { color: var(--verde); }
.home .prova .trecho { font-family: var(--voz-manuscrito); font-size: 1rem;
    line-height: 1.7; color: var(--tinta); margin: 0; max-width: none; }
.home .prova .nota { font-family: var(--voz-ferramenta); font-size: .82rem;
    color: var(--tinta-fraca); margin: .4rem 0 0; max-width: none; }
@media (max-width: 620px) {
    .home .prova .linha { grid-template-columns: minmax(0, 1fr); padding-left: .9rem; }
    .home .prova .linha > *, .home .prova .marca { grid-column: 1; }
    .home .prova .marca { grid-row: auto; text-align: left; padding-top: 0;
        margin-bottom: .3rem; }
}

/* ---------------------------------------------------- formulários e botões */

.pagina label, .auth label { display: block; margin: 1.5rem 0 .35rem;
    font-size: .85rem; font-weight: 600; }
.pagina input, .pagina textarea, .pagina select, .auth input {
    width: 100%; padding: .6rem .7rem;
    border: 1px solid var(--regua-campo); border-radius: var(--raio);
    background: var(--folha); color: var(--tinta);
    font: inherit; transition: border-color .12s ease, box-shadow .12s ease;
}
.pagina input:focus, .pagina textarea:focus, .pagina select:focus, .auth input:focus {
    outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-fundo);
}
/* Campos curtos não ganham nada em ficar largos; a caixa do texto, sim. */
.pagina input, .pagina select, .pagina fieldset.modo { max-width: 34rem; }
/* O texto colado é manuscrito, não formulário. */
.pagina textarea#texto { font-family: var(--voz-manuscrito); line-height: 1.65; }
::placeholder { color: var(--tinta-tenue); }

.pagina button, .auth button, .pagina .cta, .auth .cta, .home .cta {
    margin-top: 1.25rem; padding: .55rem 1.1rem;
    border: 1px solid var(--tinta); border-radius: var(--raio);
    background: var(--tinta); color: var(--folha);
    font: inherit; font-size: .9rem; font-weight: 500; cursor: pointer;
    text-decoration: none; display: inline-block;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.pagina button:hover, .auth button:hover, .pagina .cta:hover,
.auth .cta:hover, .home .cta:hover { background: var(--azul); border-color: var(--azul); }
.pagina button:disabled { background: var(--regua-forte); border-color: var(--regua-forte);
    color: var(--folha); cursor: not-allowed; }
.pagina button.secundario, .arquitetura button.secundario {
    background: transparent; color: var(--tinta); border-color: var(--regua-campo);
}
.pagina button.secundario:hover { background: var(--folha); border-color: var(--tinta);
    color: var(--tinta); }

/* Ações secundárias falam baixo — corpo pequeno é intencional, elas não disputam com o
   texto. Mas o que precisa ser pequeno é a letra, não o alvo: em .25rem de padding o
   botão fechava em 26px de altura, e no toque isso é uma mira, não um botão. O corpo
   fica; a área cresce. */
.conteudo .menu-bloco button, .conteudo .card .acoes button,
.arquitetura .acoes button, .lista-projetos .acoes button {
    min-height: 2.25rem;
    display: inline-flex; align-items: center; justify-content: center;
}

.pagina fieldset.modo { margin-top: 1.5rem; border: 1px solid var(--regua);
    border-radius: var(--raio); background: var(--folha); padding: .8rem 1.1rem 1rem; }
.pagina fieldset.modo legend { font-size: .85rem; font-weight: 600; padding: 0 .35rem; }
.pagina fieldset.modo .opcao { display: flex; align-items: baseline; gap: .55rem; }
.pagina fieldset.modo .opcao input { width: auto; accent-color: var(--azul); }
.pagina fieldset.modo .opcao label { margin: .35rem 0; font-weight: 400;
    font-size: .92rem; color: var(--tinta-fraca); }

.pagina .contador, .pagina .consumo, .auth .dica {
    font-family: var(--voz-dado); font-size: .74rem; color: var(--tinta-tenue); }
.pagina .contador.fora { color: var(--vermelho); font-weight: 600; }

/* ------------------------------------------------------------------- avisos */

/* Um aviso é uma faixa com tarja, não um cartão colorido. */
.erro, .auth .ok, .conteudo .sem-intervencao, .conteudo .confirmacao,
.projetos .confirmacao, .pagina .limite, .conteudo .chamada-arquitetura {
    border-left: 3px solid var(--regua-forte);
    border-radius: 0 var(--raio) var(--raio) 0;
}
.erro { color: var(--vermelho); border-left-color: var(--vermelho);
    background: var(--vermelho-fundo); padding: .7rem 1rem; }
.auth .ok { background: var(--verde-fundo); border-left-color: var(--verde);
    padding: .8rem 1rem; }
.auth .ou { font-family: var(--voz-dado); font-size: .7rem; text-transform: uppercase;
    letter-spacing: .09em; color: var(--tinta-tenue); margin: 1.75rem 0 0; }
.validation-message, .invalid { color: var(--vermelho); font-size: .85rem; }
.invalid { outline: 1px solid var(--vermelho); }
.valid.modified:not([type=checkbox]) { outline: none; }

.pagina .limite, .conteudo .confirmacao, .projetos .confirmacao {
    background: var(--ocre-fundo); border-left-color: var(--ocre);
    padding: 1rem 1.25rem; margin-top: 1.5rem;
}
.conteudo .confirmacao h2, .projetos .confirmacao h2, .pagina .limite h2 { margin-top: 0; }
.conteudo .confirmacao .acoes, .projetos .confirmacao .acoes { display: flex; gap: .5rem; }

.vazio, .conteudo .resolvidas { color: var(--tinta-tenue); font-style: italic; }

/* Nota de rodapé da coluna, não aviso: algo foi descartado e não há o que fazer a respeito.
   Fica no tom fraco e no corpo pequeno da ferramenta — se virasse tarja, competiria com as
   sugestões que de fato pedem decisão. */
.conteudo .descartadas { font-size: .82rem; color: var(--tinta-fraca); margin: 0 0 .8rem;
    padding-left: .7rem; border-left: 2px solid var(--regua-forte); }

/* ------------------------------------------------------- tela do conteúdo */

.conteudo .modo-etiqueta { color: var(--tinta-tenue); margin: 0 0 1.75rem; }

/* A folha larga é para as duas colunas; o diagnóstico é texto corrido e continua
   preso à medida de leitura, mais o respiro interno da caixa. */
.conteudo .diagnostico, .conteudo .sem-intervencao, .conteudo .chamada-arquitetura {
    max-width: calc(var(--medida) + 3rem);
}
.conteudo .diagnostico {
    background: var(--folha); border: 1px solid var(--regua);
    border-radius: var(--raio); padding: 1.25rem 1.5rem; margin-bottom: 2rem;
    box-shadow: var(--sombra);
}
.conteudo .diagnostico h2 { margin-top: 0; }
.conteudo .diagnostico .leitura { font-family: var(--voz-manuscrito); line-height: 1.65; }
.conteudo .justificativa { color: var(--tinta-fraca); }
.conteudo .formato-principal .justificativa { display: block; font-size: .9rem; }
.conteudo .complementares { padding-left: 1.1rem; color: var(--tinta-fraca);
    font-size: .95rem; }
.conteudo .alertas { list-style: none; padding: 0; margin: 1rem 0 0;
    color: var(--ocre); font-size: .92rem; }
.conteudo .alertas li { padding: .35rem 0 .35rem .9rem; border-left: 3px solid var(--ocre);
    background: var(--ocre-fundo); border-radius: 0 var(--raio) var(--raio) 0;
    margin-bottom: .35rem; }

/* --- Espera ---------------------------------------------------------------
   Dez a quarenta segundos é tempo de sobra para a pessoa concluir que o sistema
   morreu. Duas garantias contra isso: uma barra que atravessa a caixa inteira
   sem parar, e o esqueleto do diagnóstico pulsando onde ele vai aparecer. */
.conteudo .progresso { margin: 0; }
.conteudo .progresso-texto { margin: 0 0 .9rem; color: var(--tinta-fraca); }

.conteudo .progresso .barra {
    height: 3px; border-radius: 3px; background: var(--regua); overflow: hidden;
}
/* O trecho azul percorre a barra de ponta a ponta: é movimento de translação, não
   de brilho — se enxerga de canto de olho, que é como se olha para uma espera. */
.conteudo .progresso .barra::before {
    content: ""; display: block; height: 100%; width: 40%; border-radius: 3px;
    background: linear-gradient(90deg, var(--dc), var(--azul));
    animation: correndo 1.5s cubic-bezier(.65, .05, .35, .95) infinite;
}
@keyframes correndo {
    from { transform: translateX(-100%); }
    to   { transform: translateX(250%); }
}

/* Nem toda linha do esqueleto tem o mesmo tamanho: quatro barras iguais leem como
   tabela, e o que vem ali é um parágrafo. */
.conteudo .progresso .esqueleto { display: grid; gap: .55rem; margin-top: 1.4rem; }
.conteudo .progresso .linha {
    height: .7rem; border-radius: var(--raio); background: var(--regua);
    animation: respirando 1.8s ease-in-out infinite;
}
.conteudo .progresso .linha.titulo { height: 1rem; width: 30%; background: var(--regua-forte);
    margin-bottom: .35rem; }
.conteudo .progresso .linha.curta { width: 62%; }
/* Defasagem: as linhas pulsam em onda, não em bloco — em bloco pisca, em onda respira. */
.conteudo .progresso .linha:nth-child(2) { animation-delay: .15s; }
.conteudo .progresso .linha:nth-child(3) { animation-delay: .3s; }
.conteudo .progresso .linha:nth-child(4) { animation-delay: .45s; }
@keyframes respirando { 50% { opacity: .45; } }

/* Quem pediu menos movimento não pediu menos informação: a regra global congela as
   animações, então o esqueleto sozinho não diria nada. A barra fica parada, mas
   listrada e visível — um estado, já que não pode ser um gesto. */
@media (prefers-reduced-motion: reduce) {
    .conteudo .progresso .barra::before {
        /* `animation: none` explícito, e não só a regra global que encurta a duração:
           uma animação que corre em .01ms ainda é uma animação, e qualquer
           `fill-mode` futuro deixaria o trecho parado fora da barra. */
        animation: none; transform: none; width: 100%;
        background: repeating-linear-gradient(-45deg,
            var(--azul) 0 6px, var(--azul-fundo) 6px 12px); }
    .conteudo .progresso .linha { animation: none; }
}

.conteudo .sem-intervencao { background: var(--verde-fundo); border-left-color: var(--verde);
    padding: 1.25rem 1.5rem; margin-bottom: 2rem; }
.conteudo .sem-intervencao h2 { margin-top: 0; }

.conteudo .chamada-arquitetura { background: var(--azul-fundo); border-left-color: var(--azul);
    padding: 1.25rem 1.5rem; margin-bottom: 2rem; }
.conteudo .chamada-arquitetura h2 { margin-top: 0; }

/* Uma coluna quando não há sugestões — a medida de leitura manda, não a grade. */
.conteudo .revisar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem;
    align-items: start; }
/* A coluna de sugestões cresce um pouco com a mesa, mas nunca vira metade da tela:
   ela comenta o texto, não disputa com ele. */
.conteudo .revisar:has(.sugestoes) {
    grid-template-columns: minmax(0, 1fr) clamp(19rem, 26vw, 26rem);
}
.conteudo .revisar:focus-visible { outline: 2px solid var(--azul); outline-offset: 6px; }
@media (max-width: 900px) {
    .conteudo .revisar:has(.sugestoes) { grid-template-columns: minmax(0, 1fr); }
}
.conteudo .texto { max-width: var(--medida); }
.conteudo .revisar:has(.sugestoes) .texto { max-width: none; }

/* --- A margem do revisor -------------------------------------------------
   Assinatura da casa: a marcação vive na margem esquerda, em mono caixa alta,
   contra o traço de lápis. Barra + rótulo textual: a cor nunca decide sozinha. */
.conteudo .bloco {
    display: grid;
    /* Sem marcação, sem margem: a calha só se abre quando há o que escrever nela. */
    grid-template-columns: 0 minmax(0, 1fr);
    column-gap: 0;
    padding: .8rem 1rem .8rem 0;
    border-left: 3px solid transparent;
    border-radius: 0 var(--raio) var(--raio) 0;
    margin-bottom: .4rem;
    cursor: pointer;
    transition: background .12s ease;
}
.conteudo .bloco > * { grid-column: 2; }
.conteudo .bloco .marca {
    grid-column: 1; grid-row: 1 / -1;
    text-align: right; color: var(--tinta-tenue);
    padding-top: .2rem; line-height: 1.4; overflow-wrap: anywhere;
}
.conteudo .bloco .texto-bloco { font-family: var(--voz-manuscrito); line-height: 1.7;
    white-space: pre-wrap; }
.conteudo .bloco.selecionado { background: var(--folha); }
.conteudo .bloco.selecionado .marca { color: var(--tinta); }

/* A calha se abre quando há rótulo, e não quando há cor. Não é a mesma coisa: um bloco
   editado à mão não tem sugestão, logo não ganha classe `marca-*`, mas ainda escreve
   "alterado" na margem. Preso ao seletor de classe, esse rótulo caía numa coluna de
   largura zero e descia empilhado, uma letra por linha, por cima do texto. O que manda
   a margem existir é ter o que pôr nela. */
.conteudo .bloco:has(.marca:not(:empty)) {
    grid-template-columns: var(--margem) minmax(0, 1fr);
    column-gap: 1.1rem;
}

.conteudo .marca-formato { border-left-color: var(--azul); }
.conteudo .marca-formato .marca { color: var(--azul); }
.conteudo .marca-reorganizar { border-left-color: var(--violeta); }
.conteudo .marca-reorganizar .marca { color: var(--violeta); }
.conteudo .marca-alerta { border-left-color: var(--ocre); }
.conteudo .marca-alerta .marca { color: var(--ocre); }
.conteudo .marca-preservar { border-left-color: var(--verde); }
.conteudo .marca-preservar .marca { color: var(--verde); }

@media (max-width: 680px) {
    /* O seletor precisa repetir o `:has` da calha: sem ele a regra lá em cima é mais
       específica e vence mesmo dentro do media query — e o bloco marcado ficava com
       5,5rem de margem no celular, espremendo o texto a uma palavra por linha. Só os
       blocos sem marcação caíam para uma coluna, que era justamente o caso em que nada
       mudava. */
    .conteudo .bloco, .conteudo .bloco:has(.marca:not(:empty)) {
        grid-template-columns: minmax(0, 1fr); padding-left: .9rem; column-gap: 0; }
    .conteudo .bloco > *, .conteudo .bloco .marca { grid-column: 1; }
    .conteudo .bloco .marca { grid-row: auto; text-align: left; padding-top: 0;
        margin-bottom: .3rem; }
}

.conteudo .titulo-bloco { margin: .1rem 0 .5rem; }
.conteudo .editor-bloco {
    width: 100%; padding: .6rem .7rem;
    border: 1px solid var(--regua-campo); border-radius: var(--raio);
    background: var(--folha); color: var(--tinta);
    font-family: var(--voz-manuscrito); font-size: 1rem; line-height: 1.7;
    resize: vertical;
}
.conteudo .editor-bloco:focus { outline: none; border-color: var(--azul);
    box-shadow: 0 0 0 3px var(--azul-fundo); }
.conteudo .editor-bloco:disabled { background: var(--papel); color: var(--tinta-tenue); }

.conteudo .menu-bloco { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
    margin-top: .5rem; }
.conteudo .menu-bloco button { margin-top: 0; padding: .25rem .65rem; font-size: .78rem; }
.conteudo .menu-bloco .regenerando { font-size: .78rem; color: var(--azul); font-weight: 500; }
.conteudo .menu-bloco .editado { color: var(--ocre); }

/* Selo do bloco gerado: o método se ensina aqui, sempre à vista. */
.conteudo .bloco .selo { margin: .6rem 0 0; font-size: .82rem; color: var(--tinta-fraca);
    display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline;
    padding-top: .5rem; border-top: 1px dashed var(--regua); }
.conteudo .bloco .selo-formato { color: var(--azul); }

.conteudo .rodape-conteudo { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center;
    margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--regua); }
.conteudo .secundario-link, .arquitetura .secundario-link { color: var(--azul);
    font-size: .9rem; }

/* --- Cartões de sugestão (coluna lateral) ------------------------------- */

/* A nota do revisor fica à margem do trecho que comenta — não numa pilha que sobe
   embora quando a leitura desce. Num texto de vinte blocos as sugestões ficavam três
   telas acima do parágrafo em questão, e o gesto do produto (ler o trecho, decidir a
   sugestão) exigia rolar para cima e para baixo a cada decisão.
   Só quando há duas colunas de verdade: colapsada, a coluna volta a ser uma seção
   normal no fim da página, e grudá-la ali seria travar um pedaço da tela à toa. */
.conteudo .revisar:has(.sugestoes) .sugestoes {
    position: sticky; top: 1.5rem;
    max-height: calc(100vh - 3rem); overflow-y: auto;
    /* O anel de foco dos botões dentro dela não pode ser cortado pelo `overflow`. */
    padding-right: .25rem; margin-right: -.25rem;
}
@media (max-width: 900px) {
    .conteudo .revisar:has(.sugestoes) .sugestoes {
        position: static; max-height: none; overflow-y: visible; }
}
.conteudo .sugestoes h2 { font-size: 1.05rem; }
.conteudo .card {
    background: var(--folha); border: 1px solid var(--regua);
    border-left: 3px solid var(--regua-forte);
    border-radius: 0 var(--raio) var(--raio) 0;
    padding: .85rem 1rem; margin-bottom: .7rem; cursor: pointer;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.conteudo .card.selecionado { border-left-color: var(--azul); box-shadow: var(--sombra); }
.conteudo .card.status-Aplicada { border-left-color: var(--verde); background: var(--verde-fundo); }
.conteudo .card.status-Ignorada { opacity: .55; }
.conteudo .card header { display: flex; flex-wrap: wrap; gap: .5rem;
    color: var(--tinta-tenue); margin-bottom: .5rem; align-items: baseline; }
.conteudo .card .formato { color: var(--azul); }
.conteudo .card .bloco-ref { margin-left: auto; text-transform: none; letter-spacing: .02em; }
.conteudo .card .justificativa { font-size: .9rem; margin: 0; }
.conteudo .card .proposta { white-space: pre-wrap; background: var(--papel);
    padding: .6rem .7rem; border-radius: var(--raio); margin: .6rem 0;
    font-family: var(--voz-manuscrito); font-size: .9rem; line-height: 1.6; }
.conteudo .card .motivo { font-size: .82rem; color: var(--tinta-tenue); }
.conteudo .card .acoes { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.conteudo .card .acoes button { margin-top: .4rem; padding: .3rem .75rem; font-size: .82rem; }
.conteudo .card .estado { font-size: .82rem; font-weight: 500; color: var(--verde); }

.conteudo .motivo-form { margin-top: .6rem; padding: .7rem; background: var(--papel);
    border-radius: var(--raio); }
.conteudo .motivo-form label { display: block; font-size: .78rem; font-weight: 600;
    margin: 0 0 .3rem; }
.conteudo .motivo-form input { width: 100%; padding: .4rem .5rem;
    border: 1px solid var(--regua-campo); border-radius: var(--raio);
    font: inherit; font-size: .85rem; }
.conteudo .motivo-form .acoes { display: flex; gap: .4rem; margin-top: .5rem; }

/* Feedback (FR-16) */
.conteudo .feedback { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center;
    margin-top: 2rem; padding: .8rem 1.1rem; background: var(--folha);
    border: 1px solid var(--regua); border-radius: var(--raio); font-size: .9rem; }
.conteudo .feedback button { margin-top: 0; padding: .3rem .8rem; font-size: .82rem; }
.conteudo .feedback .votou { color: var(--verde); font-weight: 500; }

/* --------------------------------------------------------- tela Arquitetura */

.arquitetura .subtitulo, .projetos .subtitulo { color: var(--tinta-fraca);
    max-width: 46rem; }
.arquitetura .blocos { list-style: none; padding: 0; margin: 2rem 0; }
.arquitetura .bloco-proposto {
    background: var(--folha);
    border: 1px solid var(--regua); border-left: 3px solid var(--azul);
    border-radius: 0 var(--raio) var(--raio) 0;
    padding: .9rem 1.1rem; margin-bottom: .7rem;
}
/* Texto corrido é cidadão de primeira classe: outro peso, nunca menor. */
.arquitetura .bloco-proposto.corrido { border-left-color: var(--tinta-fraca); }
.arquitetura .cabecalho { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; }
.arquitetura .ordem { font-family: var(--voz-dado); font-size: .8rem; color: var(--tinta-tenue); }
.arquitetura .formato { margin-left: auto; color: var(--azul); }
.arquitetura .bloco-proposto.corrido .formato { color: var(--tinta-fraca); }
.arquitetura .conteudo { margin: .5rem 0 .25rem; font-family: var(--voz-manuscrito);
    line-height: 1.65; }
.arquitetura .justificativa { margin: 0; font-size: .85rem; color: var(--tinta-fraca); }
.arquitetura .acoes { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
    margin-top: .8rem; }
.arquitetura .acoes button { margin-top: 0; padding: .3rem .75rem; font-size: .82rem;
    border: 1px solid var(--regua-campo); border-radius: var(--raio);
    background: transparent; color: var(--tinta); font-family: inherit; cursor: pointer; }
.arquitetura .acoes button:hover:not(:disabled) { border-color: var(--tinta); }
/* Esta regra vinha depois de `.pagina button:disabled`, com a mesma especificidade, e
   apagava o estado desabilitado: "Subir" no primeiro bloco parecia clicável. */
.arquitetura .acoes button:disabled { color: var(--tinta-tenue);
    border-color: var(--regua); background: transparent; cursor: not-allowed; }

/* Remover apaga trabalho; não pode ler igual a "Subir". Discreto, mas nunca o mesmo. */
.pagina button.remover { color: var(--vermelho); border-color: var(--regua-campo); }
.pagina button.remover:hover:not(:disabled) { color: var(--vermelho);
    border-color: var(--vermelho); background: var(--vermelho-fundo); }
.pagina button.remover:disabled { color: var(--tinta-tenue); border-color: var(--regua); }
.arquitetura .acoes .trocar { display: flex; align-items: center; gap: .35rem; margin: 0; }
.arquitetura .acoes .rotulo-troca { font-size: .78rem; font-weight: 400; color: var(--tinta-fraca); }
.arquitetura .acoes select { width: auto; padding: .3rem; font-size: .82rem;
    border: 1px solid var(--regua-campo); border-radius: var(--raio); background: var(--folha); }
.arquitetura .rodape-acoes, .projetos .rodape-acoes {
    display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
    margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--regua); }

/* ------------------------------------------------------------------ Projetos */

.lista-projetos { list-style: none; padding: 0; margin: 1.5rem 0; }
.lista-projetos li { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start;
    background: var(--folha); border: 1px solid var(--regua); border-radius: var(--raio);
    padding: .9rem 1.1rem; margin-bottom: .7rem; }
.lista-projetos .info { flex: 1; min-width: 14rem; }
.lista-projetos .meta { display: block; font-family: var(--voz-dado); font-size: .72rem;
    color: var(--tinta-tenue); margin-top: .25rem; }
.lista-projetos .orientacao { font-family: var(--voz-manuscrito); font-size: .9rem;
    color: var(--tinta-fraca); margin: .6rem 0 0; padding-left: .8rem;
    border-left: 2px solid var(--regua); white-space: pre-wrap; }
.lista-projetos .acoes { display: flex; gap: .5rem; }
.lista-projetos .acoes button { margin-top: 0; padding: .3rem .75rem; font-size: .8rem; }

/* ----------------------------------------------------------------- Histórico */

.historico .filtros, .comparar .filtros {
    display: flex; flex-wrap: wrap; gap: .8rem; align-items: center;
    background: var(--folha); border: 1px solid var(--regua); border-radius: var(--raio);
    padding: .7rem 1rem; margin-bottom: 2rem;
}
.historico .filtros label, .comparar .filtros label { margin: 0; font-size: .82rem; }
.historico .filtros select, .comparar .filtros select { width: auto; }

.lista-historico { list-style: none; padding: 0; margin: 0;
    background: var(--folha); border: 1px solid var(--regua); border-radius: var(--raio); }
.lista-historico li + li { border-top: 1px solid var(--regua); }
.lista-historico a { display: block; padding: .85rem 1.1rem; text-decoration: none;
    color: inherit; border-left: 3px solid transparent; }
.lista-historico a:hover, .lista-historico a:focus-visible {
    background: var(--azul-fundo); border-left-color: var(--azul); }
.lista-historico .meta { display: block; font-family: var(--voz-dado); font-size: .72rem;
    color: var(--tinta-tenue); margin-top: .25rem; }

/* ------------------------------------------------------------------ Comparar */

.comparar .filtros .alternar { display: flex; align-items: center; gap: .4rem; margin: 0;
    font-weight: 400; font-size: .85rem; }
.comparar .filtros .alternar input { width: auto; accent-color: var(--azul); }
.comparar .resumo { font-family: var(--voz-dado); font-size: .78rem; color: var(--tinta-fraca); }
.comparar .diff { list-style: none; padding: 0; }
/* Barra + etiqueta textual: a mudança nunca é comunicada só por cor. */
.comparar .diff-bloco { background: var(--folha);
    border: 1px solid var(--regua); border-left: 3px solid var(--regua-forte);
    border-radius: 0 var(--raio) var(--raio) 0; padding: .8rem 1.1rem; margin-bottom: .7rem; }
.comparar .mudanca-Alterado { border-left-color: var(--ocre); }
.comparar .mudanca-Adicionado { border-left-color: var(--verde); }
.comparar .mudanca-Removido { border-left-color: var(--vermelho); }
.comparar .cabecalho { display: flex; gap: .7rem; align-items: baseline; }
.comparar .etiqueta { margin-left: auto; color: var(--tinta-fraca); }
.comparar .mudanca-Alterado .etiqueta { color: var(--ocre); }
.comparar .mudanca-Adicionado .etiqueta { color: var(--verde); }
.comparar .mudanca-Removido .etiqueta { color: var(--vermelho); }
.comparar .lados { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media (max-width: 700px) { .comparar .lados { grid-template-columns: 1fr; } }
.comparar .lado h3 { color: var(--tinta-tenue); margin: .6rem 0 .25rem; font-weight: 500; }
.comparar .texto { font-family: var(--voz-manuscrito); line-height: 1.65;
    white-space: pre-wrap; margin: 0; }
/* A versão anterior é texto de verdade, não legenda: recua um tom, não dois. Quem
   distingue os lados é o rótulo em `.lado h3`, não o esmaecimento. */
.comparar .lado.antes .texto { color: var(--tinta-fraca); }

/* -------------------------------------------------------------------- rodapé */

/* Estático, no fim do documento: fixo no canto, ele cobria o fim das listas longas.
   O corpo vira coluna para o rodapé assentar embaixo mesmo em página curta. */
body { display: flex; flex-direction: column; min-height: 100vh; }
body > .app-version { margin-top: auto; }
.app-version { padding: 1.25rem clamp(1rem, 4vw, 2rem);
    font-family: var(--voz-dado); font-size: .65rem; color: var(--tinta-tenue);
    text-align: right; border-top: 1px solid var(--regua); }

/* -------------------------------------------------------- erros do framework */

.blazor-error-boundary {
    background: var(--vermelho); color: #fff; padding: 1rem 1.25rem;
    font-family: var(--voz-ferramenta);
}
.blazor-error-boundary::after { content: "Algo quebrou nesta parte da tela. Recarregue a página."; }

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