/* Árvore da Vida, vista fractal. Tokens primeiro; componentes só leem token. */
@font-face { font-family: 'Urbanist'; font-style: normal; font-weight: 400; font-display: swap; src: url('/api/landing/fontes/urbanist-400.woff2') format('woff2'); }
@font-face { font-family: 'Urbanist'; font-style: normal; font-weight: 600; font-display: swap; src: url('/api/landing/fontes/urbanist-600.woff2') format('woff2'); }
@font-face { font-family: 'Urbanist'; font-style: normal; font-weight: 700; font-display: swap; src: url('/api/landing/fontes/urbanist-700.woff2') format('woff2'); }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/api/landing/fontes/geist-mono-400.woff2') format('woff2'); }

:root {
  color-scheme: light dark;
  --ground: #EDF0E8; --paper: #F7F8F4; --ink: #1B241E; --ink-2: #55605A; --hair: #C9D0C3; --hair-2: #DDE2D8;
  --conceito: #3F6B45; --observacao: #8C5F19; --pergunta: #3E6485; --experimento: #A34E33; --conexao: #6B5B95;
  /* papéis do enunciado: a conclusão puxa para o verde do conceito, porque
     conceito é a conclusão que ganhou nome; consideração fica neutra, que é
     o material da soma; ressalva e hipótese avisam. */
  /* consideração escurecida de #6E7A72 (2,7:1) para 4,6:1 no fundo claro: é o
     papel mais numeroso, e era justamente o menos legível. Hipótese separada
     da conexão, que eram a mesma cor nos dois temas. */
  --definicao: #476E5F; --consideracao: #515C55; --conclusao: #2F7A55; --ressalva: #8A5A2B; --hipotese: #7A5C2E;
  --conceito-soft: #3F6B4522; --foco: #1B241E; --arc: #B07A21; --erro: #A34E33;
  /* a trilha: a casca, a seiva dourada e o céu do amanhecer */
  --ouro: #9A6F17; --ouro-claro: #D4A645; --ouro-luz: #F0D27C; --casca: #6E5D3C; --casca-2: #4B6A3E;
  --folha-1: #8DBA6E; --folha-2: #3F6B45; --ceu: #EDF1E4; --ceu-2: #F6EED2; --brilho: rgba(226, 182, 84, .30); --polen: rgba(154, 111, 23, .32);
  --display: 'Urbanist', 'Segoe UI', system-ui, sans-serif;
  --ui: 'Urbanist', 'Segoe UI', system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground: #121814; --paper: #1A211C; --ink: #E4EAE0; --ink-2: #9AA69E; --hair: #2E3830; --hair-2: #253029;
    --conceito: #7DB584; --observacao: #D9A552; --pergunta: #7FA6C9; --experimento: #D48A6E; --conexao: #A997D6;
    --definicao: #86BCA9; --consideracao: #A8B3AB; --conclusao: #6FCB97; --ressalva: #D0A06A; --hipotese: #D9C27A;
    --conceito-soft: #7DB58426; --foco: #E4EAE0; --arc: #D9A552; --erro: #D48A6E;
    /* a trilha de noite: a floresta sob as estrelas, a seiva acesa */
    --ouro: #E2BB5C; --ouro-claro: #F1D78D; --ouro-luz: #FBEDBF; --casca: #4A4430; --casca-2: #2E4B31;
    --folha-1: #A9D68B; --folha-2: #4F7D45; --ceu: #08100B; --ceu-2: #132216; --brilho: rgba(226, 187, 92, .17); --polen: rgba(251, 237, 191, .6);
  }
}
/* tema escolhido nas preferências: `data-tema` no <html> vence o sistema.
   Os tokens são os mesmos dos dois blocos acima, só que sem a media query. */
:root[data-tema="escuro"] {
    --ground: #121814; --paper: #1A211C; --ink: #E4EAE0; --ink-2: #9AA69E; --hair: #2E3830; --hair-2: #253029;
    --conceito: #7DB584; --observacao: #D9A552; --pergunta: #7FA6C9; --experimento: #D48A6E; --conexao: #A997D6;
    --definicao: #86BCA9; --consideracao: #A8B3AB; --conclusao: #6FCB97; --ressalva: #D0A06A; --hipotese: #D9C27A;
    --conceito-soft: #7DB58426; --foco: #E4EAE0; --arc: #D9A552; --erro: #D48A6E;
    /* a trilha de noite: a floresta sob as estrelas, a seiva acesa */
    --ouro: #E2BB5C; --ouro-claro: #F1D78D; --ouro-luz: #FBEDBF; --casca: #4A4430; --casca-2: #2E4B31;
    --folha-1: #A9D68B; --folha-2: #4F7D45; --ceu: #08100B; --ceu-2: #132216; --brilho: rgba(226, 187, 92, .17); --polen: rgba(251, 237, 191, .6);
  }
@media (prefers-color-scheme: dark) {
  :root[data-tema="claro"] {
  --ground: #EDF0E8; --paper: #F7F8F4; --ink: #1B241E; --ink-2: #55605A; --hair: #C9D0C3; --hair-2: #DDE2D8;
  --conceito: #3F6B45; --observacao: #8C5F19; --pergunta: #3E6485; --experimento: #A34E33; --conexao: #6B5B95;
  --definicao: #476E5F; --consideracao: #515C55; --conclusao: #2F7A55; --ressalva: #8A5A2B; --hipotese: #7A5C2E;
  --conceito-soft: #3F6B4522; --foco: #1B241E; --arc: #B07A21; --erro: #A34E33;
  /* a trilha: a casca, a seiva dourada e o céu do amanhecer */
  --ouro: #9A6F17; --ouro-claro: #D4A645; --ouro-luz: #F0D27C; --casca: #6E5D3C; --casca-2: #4B6A3E;
  --folha-1: #8DBA6E; --folha-2: #3F6B45; --ceu: #EDF1E4; --ceu-2: #F6EED2; --brilho: rgba(226, 182, 84, .30); --polen: rgba(154, 111, 23, .32);
  --display: 'Urbanist', 'Segoe UI', system-ui, sans-serif;
  --ui: 'Urbanist', 'Segoe UI', system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  }
}


/* o zoom entre páginas: cada círculo leva o mesmo nome nas duas, e o navegador morfa */
@view-transition { navigation: auto; }
::view-transition-old(*), ::view-transition-new(*) { animation-duration: .45s; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(*), ::view-transition-new(*) { animation: none; } }

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--ui); font-size: 14px; line-height: 1.45; }
a { color: inherit; }
.app { display: grid; grid-template-rows: auto 1fr; min-height: 100vh; }
/* A VISTA DO MAPA NÃO ROLA. Com min-height, o painel lateral crescia (a "base
   deste conceito" de uma nota lida tem dezenas de linhas), esticava a grade e
   levava o mapa para fora da tela. Altura fixa aqui, e o overflow do painel —
   que já existia — finalmente vale. min-height: 0 é o que permite um item de
   grade encolher abaixo do próprio conteúdo. */
.app.mapa { height: 100dvh; overflow: hidden; }
header { display: flex; align-items: center; gap: 1.25rem; padding: .7rem 1.1rem; border-bottom: 1px solid var(--hair); background: var(--paper); flex-wrap: wrap; }
header h1 { font-family: var(--display); font-weight: 600; font-size: 1.2rem; margin: 0; letter-spacing: -.01em; }
header h1 a { text-decoration: none; }
header h1 small { font-family: var(--ui); font-weight: 400; font-size: .74rem; color: var(--ink-2); margin-left: .6rem; letter-spacing: .06em; text-transform: uppercase; }
.busca { flex: 1 1 220px; max-width: 380px; margin: 0; }
.busca input { width: 100%; padding: .45rem .7rem; border: 1px solid var(--hair); border-radius: 6px; background: var(--ground); color: var(--ink); font: inherit; }
.busca input:focus { outline: 2px solid var(--conceito); outline-offset: 1px; }
.legenda { display: flex; gap: .9rem; font-size: .78rem; color: var(--ink-2); flex-wrap: wrap; }
.legenda span::before { content: ""; display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; margin-right: .35rem; vertical-align: -1px; background: var(--c); }
.legenda span.escondidas::before { background: var(--hair); }
.legenda b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.sair { margin-left: auto; font-size: .78rem; color: var(--ink-2); }
main { display: grid; grid-template-columns: 1fr minmax(320px, 380px); min-height: 0; }
.palco { position: relative; min-height: 0; display: grid; }
svg { width: 100%; height: 100%; display: block; }
svg rect.fundo { fill: transparent; cursor: pointer; }
svg circle { transition: stroke-width .15s; cursor: pointer; }
svg circle.conceito { fill: var(--paper); fill-opacity: .55; stroke: var(--conceito); stroke-opacity: var(--o); stroke-width: 1; }
svg circle.observacao { fill: var(--observacao); fill-opacity: .9; }
svg circle.pergunta { fill: var(--pergunta); fill-opacity: .9; }
svg circle.experimento { fill: var(--experimento); fill-opacity: .9; }
svg circle.conexao { fill: var(--conexao); fill-opacity: .9; }
svg circle.definicao { fill: var(--definicao); fill-opacity: .9; }
svg circle.consideracao { fill: var(--consideracao); fill-opacity: .75; }
svg circle.conclusao { fill: var(--conclusao); fill-opacity: .9; }
svg circle.ressalva { fill: var(--ressalva); fill-opacity: .9; }
svg circle.hipotese { fill: var(--hipotese); fill-opacity: .9; }
svg circle.foco, svg circle.destacado { stroke-width: 2; stroke-opacity: 1; }
svg a:hover circle, svg a:focus-visible circle { stroke: var(--foco); stroke-width: 2; }
svg text { font-family: var(--display); fill: var(--ink); pointer-events: none; }
svg text.base { font-family: var(--ui); }
svg text.ocultas { font-family: var(--ui); fill: var(--ink-2); font-style: italic; }
/* DECORAÇÃO NÃO RECEBE CLIQUE. As curvas e o anel são desenhados por cima dos
   círculos e não são links: cada um deles era um ponto morto no meio do alvo.
   Medido em 08/09 na Autoridade — a 60% do raio o clique caía numa curva de
   menção, a 95% no anel, e a nota "não selecionava". */
svg .mencoes path, svg .raizes path, svg .composicao circle { pointer-events: none; }
svg .mencoes path { fill: none; stroke: var(--arc); stroke-width: 1.2; }
svg .mencoes path.saida { stroke-opacity: .55; }
svg .mencoes path.entrada { stroke-opacity: .28; stroke-dasharray: 3 4; }
/* o anel de composição: arcos por papel em volta da nota lida, na visão macro */
svg .composicao circle { fill: none; stroke-width: 4; stroke-linecap: butt; transform-box: fill-box; transform-origin: center; transform: rotate(-90deg); }
svg .composicao circle.conclusao { stroke: var(--conclusao); }
svg .composicao circle.consideracao { stroke: var(--consideracao); }
svg .composicao circle.pergunta { stroke: var(--pergunta); }
svg .composicao circle.definicao { stroke: var(--definicao); }
svg .composicao circle.observacao { stroke: var(--observacao); }
svg .composicao circle.ressalva { stroke: var(--ressalva); }
svg .composicao circle.hipotese { stroke: var(--hipotese); }
svg .composicao circle.experimento { stroke: var(--experimento); }
svg .composicao circle.conexao { stroke: var(--conexao); }
svg .raizes path { fill: none; stroke: var(--conceito); stroke-linecap: round; }
svg .raizes path.raiz { stroke-width: 2.2; stroke-opacity: .85; }
svg .raizes path.alimenta { stroke-width: 1.6; stroke-opacity: .5; stroke-dasharray: 7 5; }
/* a trilha FLUTUA sobre o palco: só os links dela recebem ponteiro. O nav, o
   separador › e a folga entre eles não são alvo de nada e engoliam o clique do
   fundo — mesmo ponto morto das curvas e do anel. */
.trilha { position: absolute; left: 1rem; top: .8rem; display: flex; gap: .3rem; align-items: center; flex-wrap: wrap; font-size: .82rem; color: var(--ink-2); pointer-events: none; }
.trilha a { pointer-events: auto; }
.trilha a { text-decoration: none; padding: .15rem .35rem; border-radius: 4px; color: var(--ink-2); }
.trilha a:hover, .trilha a:focus-visible { background: var(--conceito-soft); color: var(--ink); outline: none; }
.trilha a.atual { color: var(--ink); font-family: var(--display); font-weight: 600; font-size: 1rem; }
.dica { position: absolute; right: 1rem; bottom: .8rem; font-size: .72rem; color: var(--ink-2); pointer-events: none; text-align: right; }
aside { border-left: 1px solid var(--hair); background: var(--paper); overflow: auto; min-height: 0; padding: 1.1rem 1.2rem 2rem; }
.chip { display: inline-block; font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; padding: .15rem .5rem; border-radius: 999px; color: var(--ground); background: var(--c); font-weight: 700; }
.id { font-family: var(--mono); font-size: .76rem; color: var(--ink-2); }
.id b { color: var(--ink); font-weight: 400; }
aside h2, article h2 { font-family: var(--display); font-weight: 600; font-size: 1.5rem; line-height: 1.15; margin: .5rem 0 .35rem; text-wrap: balance; letter-spacing: -.01em; }
.meta { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-bottom: .6rem; }
.status { font-size: .74rem; color: var(--ink-2); }
.meta .revogado { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--erro); border: 1px solid var(--erro); border-radius: 999px; padding: .1rem .45rem; }
.lida { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--conclusao); border: 1px solid var(--conclusao); border-radius: 999px; padding: .1rem .45rem; }
.resumo { font-size: 1rem; line-height: 1.5; margin: 0 0 .6rem; max-width: 62ch; }
.vazio { color: var(--ink-2); font-style: italic; }
.ler { margin: 0 0 1rem; font-size: .9rem; }
.ler a { color: var(--conceito); font-weight: 600; text-decoration: none; }
.ler a:hover { text-decoration: underline; }
.bloco { margin-top: 1rem; }
.bloco h3, .base > h3, .achados h3 { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 .35rem; display: flex; justify-content: space-between; }
.bloco h3 b, .achados h3 b { font-variant-numeric: tabular-nums; font-weight: 400; }
.bloco ul, .achados ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.bloco li a, .achados li a { width: 100%; text-decoration: none; padding: .3rem .45rem; border-radius: 4px; color: var(--ink); display: flex; gap: .5rem; align-items: baseline; }
.bloco li a:hover, .bloco li a:focus-visible, .achados li a:hover { background: var(--conceito-soft); outline: none; }
.bloco li .id, .achados li .id { min-width: 6.4rem; }
.ponto { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: var(--c); flex: none; align-self: center; }
.base { border: 1px solid var(--hair); border-radius: 8px; padding: .7rem .8rem; background: var(--ground); margin-top: .4rem; }
.base .bloco { margin-top: .6rem; }
.base .vazio { margin: 0; font-size: .9rem; }
.achados { border: 1px solid var(--observacao); border-radius: 8px; padding: .7rem .8rem; margin-bottom: 1rem; }
.ciclo h3 { color: var(--erro); }
.ciclo p { margin: 0; font-size: .9rem; }
.perguntas li { padding: .25rem 0; color: var(--ink-2); font-size: .88rem; border-top: 1px dashed var(--hair-2); }
.perguntas li:first-child { border-top: 0; }
.irmaos { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.2rem; font-size: .82rem; }
.irmaos a { color: var(--ink-2); text-decoration: none; }
.irmaos a:hover { color: var(--ink); }
.rodape { margin-top: 1.4rem; padding-top: .8rem; border-top: 1px solid var(--hair); font-size: .74rem; color: var(--ink-2); }
.rodape code, .markdown code { font-family: var(--mono); font-size: .72rem; }
.sumario { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; margin: .6rem 0 1rem; }
/* filho direto: com `.sumario div` o número e o rótulo ganhavam borda própria
   dentro da caixa, e cada quadro saía com três molduras */
.sumario > div { border: 1px solid var(--hair); border-radius: 8px; padding: .55rem .7rem; }
.sumario .n { font-family: var(--display); font-weight: 600; font-size: 1.6rem; line-height: 1; font-variant-numeric: tabular-nums; }
.sumario .t { font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); margin-top: .2rem; }

/* a nota inteira */
.nota header .trilha { position: static; }
.leitura { grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); align-items: start; }
.leitura article { padding: 1.6rem 2rem 4rem; max-width: 74ch; }
.leitura aside { position: sticky; top: 0; max-height: 100vh; }
.markdown { font-size: 1.02rem; line-height: 1.6; }
.markdown h1 { font-family: var(--display); font-size: 1.6rem; margin: 1.6rem 0 .6rem; }
.markdown h2 { font-size: 1.3rem; margin: 1.6rem 0 .5rem; }
.markdown h3 { font-family: var(--display); font-size: 1.05rem; margin: 1.2rem 0 .4rem; }
.markdown p, .markdown li { max-width: 68ch; }
.markdown blockquote { margin: 1rem 0; padding: .2rem 1rem; border-left: 3px solid var(--hair); color: var(--ink-2); }
.markdown a { color: var(--conceito); text-decoration-thickness: 1px; }
.markdown a.pendente { color: var(--ink-2); text-decoration: underline dotted; }
.markdown table { border-collapse: collapse; margin: 1rem 0; display: block; overflow-x: auto; }
.markdown th, .markdown td { border: 1px solid var(--hair); padding: .35rem .6rem; text-align: left; vertical-align: top; }
.markdown pre { background: var(--paper); border: 1px solid var(--hair); padding: .8rem; overflow-x: auto; border-radius: 6px; }
.markdown hr { border: 0; border-top: 1px solid var(--hair); margin: 1.6rem 0; }

/* a nota gerada a partir dos enunciados. Ela se lê como TEXTO: uma seção por
   papel, e dentro dela parágrafos com o § rente à primeira palavra, do jeito
   que a lei numera o artigo. Em grade, com filete entre um e outro, a mesma
   informação lia-se como planilha. */
.definicao-da-nota { font-size: 1.2rem; line-height: 1.5; margin: 0 0 2.2rem; padding-left: 1rem; border-left: 3px solid var(--conclusao); }
.secao { margin: 0 0 2.4rem; }
.secao h3 { display: flex; align-items: center; gap: .5rem; margin: 0 0 1rem; font-size: .72rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--c); border-bottom: 1px solid var(--c); padding-bottom: .35rem; }
.secao h3 .quantas { font-family: var(--mono); font-weight: 400; letter-spacing: 0; color: var(--ink-2); font-variant-numeric: tabular-nums; }
ul.enunciados { list-style: none; margin: 0; padding: 0; }
ul.enunciados > li { margin: 0 0 1.1rem; }
ul.enunciados > li > p { margin: 0; font-size: 1.04rem; line-height: 1.65; }
.marcador { font-family: var(--mono); font-size: .82rem; color: var(--c); text-decoration: none; white-space: nowrap; }
.marcador:hover, .marcador:focus-visible { text-decoration: underline; }
.prova { font-family: var(--mono); font-size: .78rem; color: var(--ink-2); }
.prova a { white-space: nowrap; }
.prova::before { content: " — "; }
.prova a { color: var(--ink-2); }
.prova a:hover { color: var(--ink); }
.prova.falta { color: var(--erro); font-family: var(--ui); font-style: italic; }
.selo-revogado { font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--erro); border: 1px solid var(--erro); border-radius: 999px; padding: .02rem .35rem; }
ul.enunciados > li.revogado > p { opacity: .6; }
ul.enunciados > li.revogado > p .marcador { text-decoration: line-through; }

/* a revisão: a lista de trabalho do vault */
.revisao { grid-template-columns: minmax(0, 1fr); }
.revisao article { padding: 1.6rem 2rem 4rem; max-width: 82ch; margin: 0 auto; }
.revisar-link { font-size: .78rem; color: var(--ink-2); text-decoration: none; margin-left: auto; }
.revisar-link:hover { color: var(--ink); text-decoration: underline; }
.revisar-link + .sair { margin-left: 1rem; }
ul.revisar { list-style: none; margin: 1.4rem 0 0; padding: 0; }
ul.revisar > li { padding: .9rem 0; border-top: 1px solid var(--hair-2); }
ul.revisar > li:first-child { border-top: 0; }
.cabeca { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.cabeca .nome { font-family: var(--display); font-weight: 600; font-size: 1.1rem; text-decoration: none; }
.cabeca .nome:hover { text-decoration: underline; }
.cabeca .ler { font-size: .8rem; margin: 0 0 0 auto; }
.composicao-em-texto { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: .35rem; font-size: .78rem; color: var(--ink-2); }
.composicao-em-texto span::before { content: ""; display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: var(--c); margin-right: .3rem; }
.composicao-em-texto b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
ul.faltas { list-style: none; margin: .45rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; }
ul.faltas > li { font-size: .86rem; color: var(--ink-2); padding-left: .9rem; position: relative; }
ul.faltas > li::before { content: "·"; position: absolute; left: .2rem; color: var(--erro); font-weight: 700; }
ul.faltas b { color: var(--erro); font-variant-numeric: tabular-nums; }

/* entrar */
.entrar { display: grid; place-items: center; min-height: 100vh; padding: 2rem; }
.entrar form { width: min(380px, 100%); background: var(--paper); border: 1px solid var(--hair); border-radius: 10px; padding: 1.6rem; display: flex; flex-direction: column; gap: .9rem; }
.entrar h1 { font-family: var(--display); font-weight: 600; margin: 0; font-size: 1.4rem; }
.entrar p { margin: 0; color: var(--ink-2); }
.entrar label { display: flex; flex-direction: column; gap: .3rem; font-size: .82rem; color: var(--ink-2); }
.entrar input { padding: .55rem .7rem; border: 1px solid var(--hair); border-radius: 6px; background: var(--ground); color: var(--ink); font: inherit; font-size: 1rem; }
.entrar input:focus { outline: 2px solid var(--conceito); outline-offset: 1px; }
.entrar button { padding: .65rem; border: 0; border-radius: 6px; background: var(--conceito); color: var(--ground); font: inherit; font-weight: 700; cursor: pointer; }
.entrar .erro { color: var(--erro); font-weight: 600; }

@media (max-width: 860px) {
  main { grid-template-columns: 1fr; }
  /* empilhado, quem rola é a página: prender a casca cortaria o painel */
  .app.mapa { height: auto; overflow: visible; }
  svg { height: 62vh; }
  aside { border-left: 0; border-top: 1px solid var(--hair); }
  .leitura { grid-template-columns: 1fr; }
  .leitura aside { position: static; max-height: none; }
  .dica { display: none; }
}

/* ── pedidos: a conversa sobre a linha ────────────────────────────────────────
   Vem DEPOIS do parágrafo e em corpo menor de propósito: o pedido é sobre o
   texto, não é o texto. Uma nota com dez pedidos continua se lendo como nota. */
.pedidos { margin: .2rem 0 0 1.1rem; display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; }
.pedido { font-size: .68rem; letter-spacing: .04em; color: var(--arc); border: 1px solid var(--arc);
          border-radius: 999px; padding: .02rem .4rem; }
.pedir { font-size: .7rem; color: var(--ink-2); text-decoration: none; border-bottom: 1px dotted var(--hair-2); }
.pedir:hover, .pedir:focus-visible { color: var(--ink); border-bottom-color: var(--ink); }

/* o formulário do pedido */
.pedido-form { display: flex; flex-direction: column; gap: .9rem; max-width: 46rem; margin-top: 1rem; }
.pedido-form fieldset { border: 1px solid var(--hair); padding: .7rem .9rem; display: flex; gap: 1.2rem; flex-wrap: wrap; }
.pedido-form legend { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); }
.pedido-form label { font-size: .86rem; }
.pedido-form .campo { display: flex; flex-direction: column; gap: .3rem; }
.pedido-form .campo span { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); }
.pedido-form textarea { font: inherit; font-size: .9rem; padding: .5rem .6rem; background: var(--paper);
                        color: var(--ink); border: 1px solid var(--hair); border-radius: 2px; resize: vertical; }
.pedido-form textarea:focus-visible { outline: 2px solid var(--conceito); outline-offset: 1px; }
.pedido-form .aviso { font-size: .78rem; color: var(--ink-2); border-left: 2px solid var(--arc); padding-left: .7rem; margin: 0; }
.pedido-form .acoes { display: flex; gap: .9rem; align-items: center; }
.pedido-form button { font: inherit; font-size: .86rem; padding: .45rem 1.1rem; cursor: pointer;
                      background: var(--conceito); color: var(--paper); border: 0; border-radius: 2px; }
.pedido-form .voltar { font-size: .8rem; color: var(--ink-2); }
blockquote.atual { margin: .8rem 0; padding: .6rem .9rem; border-left: 2px solid var(--hair-2);
                   color: var(--ink-2); font-size: .92rem; }
.erro { color: var(--erro); font-size: .86rem; }

/* ── zoom contínuo ────────────────────────────────────────────────────────────
   O CANDIDATO é o círculo que assumiria o foco se a roda parasse agora. Ele
   pisca de leve enquanto se dá zoom e some quando o foco é assumido: é a
   resposta que diz "é este que vou abrir", antes de abrir. */
svg circle.candidato { stroke-opacity: 1; stroke-width: 2.2; }
@media (prefers-reduced-motion: no-preference) {
  svg circle.candidato { transition: stroke-opacity .18s ease, stroke-width .18s ease; }
}
/* durante o gesto o cursor diz o que a roda faz */
.palco svg { cursor: grab; }
.palco svg:active { cursor: grabbing; }

/* --- tramitação: o que vigora é traço cheio; o que está em proposta é tracejado --- */
svg circle.proposta { stroke-dasharray: 5 4; stroke-width: 1.6; }
svg circle.proposta-add { fill-opacity: .22; stroke: var(--ink-2); stroke-opacity: .9; }
svg circle.proposta-edit { stroke: var(--arc); stroke-opacity: .95; }
svg circle.proposta-delete { stroke: var(--erro); stroke-opacity: .9; fill-opacity: .35; }
.legenda .tramitacao { border: 1px dashed var(--ink-2); border-radius: 999px; padding: 0 .55rem; }
.prefs-link { font-size: .78rem; color: var(--ink-2); text-decoration: none; margin-left: .8rem; white-space: nowrap; }
.prefs-link:hover { color: var(--ink); text-decoration: underline; }
.prefs-link + .sair { margin-left: 1rem; }

/* --- preferências: uma página, grupos, uma linha por escolha (Obsidian) --- */
.prefs .apoio { color: var(--ink-2); max-width: 52ch; }
.prefs .salvo { color: var(--conclusao); font-weight: 600; }
.prefs-form { display: flex; flex-direction: column; gap: 1.6rem; max-width: 46rem; margin-top: 1.2rem; }
.prefs-form .grupo { display: flex; flex-direction: column; gap: .2rem; }
.prefs-form .grupo h3 { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-2); margin: 0 0 .4rem; padding-bottom: .35rem; border-bottom: 1px solid var(--hair); }
.prefs-form .linha { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: .75rem 0; border-bottom: 1px solid var(--hair-2); margin: 0; }
.prefs-form .linha .texto { display: flex; flex-direction: column; gap: .2rem; max-width: 40rem; }
.prefs-form .linha .texto small { color: var(--ink-2); font-size: .8rem; line-height: 1.45; }
.prefs-form .linha input[type=checkbox] { width: 1.15rem; height: 1.15rem; accent-color: var(--conclusao); flex: none; }
.prefs-form .opcoes { display: flex; gap: 1rem; flex: none; }
.prefs-form .opcoes label { font-size: .86rem; display: flex; gap: .35rem; align-items: center; }
.prefs-form .acoes { display: flex; gap: 1.2rem; align-items: center; }
.prefs-form button { font: inherit; padding: .55rem 1.1rem; background: var(--ink); color: var(--paper); border: 0; border-radius: 6px; cursor: pointer; }
.prefs-form .voltar { color: var(--ink-2); }

/* ── os modos de ver: a vista fractal e a trilha ───────────────────────────── */
.modos { display: inline-flex; padding: 2px; border: 1px solid var(--hair); border-radius: 999px; font-size: .78rem; margin-left: auto; }
.modos a { padding: .18rem .75rem; border-radius: 999px; color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.modos a:hover, .modos a:focus-visible { color: var(--ink); outline: none; }
.modos a[aria-current="page"] { background: var(--ink); color: var(--paper); }
.modos + .revisar-link { margin-left: 1rem; }

/* ── a trilha: a árvore como caminho ──────────────────────────────────────────
   Uma rede com a base na Vida: cada andar uma linha, cada conceito uma folha,
   cada derivação uma ligação. O galho (a origem que pôs o conceito no andar)
   é casca e engrossa com o que sobe por ele; as outras origens são fios
   dourados que cruzam de um galho para outro. A rede é o único filho de um
   column-reverse, e por isso a rolagem começa no chão. */
.subida {
  position: relative; min-height: 0; overflow: auto;
  display: flex; flex-direction: column-reverse;
  padding: 0 1.2rem;
  background:
    radial-gradient(1.4px 1.4px at 22px 34px, var(--polen), transparent),
    radial-gradient(1px 1px at 118px 92px, var(--polen), transparent),
    radial-gradient(1.6px 1.6px at 170px 18px, var(--polen), transparent),
    radial-gradient(1px 1px at 64px 150px, var(--polen), transparent),
    radial-gradient(1.2px 1.2px at 200px 196px, var(--polen), transparent),
    radial-gradient(ellipse 75% 45% at 50% 0%, var(--brilho), transparent 72%),
    radial-gradient(ellipse 70% 28% at 50% 100%, var(--conceito-soft), transparent 75%),
    linear-gradient(180deg, var(--ceu-2), var(--ceu) 60%);
  background-size: 230px 230px, 230px 230px, 230px 230px, 230px 230px, 230px 230px, auto, auto, auto;
  background-attachment: local, local, local, local, local, scroll, scroll, scroll;
  scrollbar-color: var(--hair) transparent;
}
.subida:focus-visible { outline: 2px solid var(--ouro); outline-offset: -2px; }
.rede { position: relative; flex: none; width: 100%; min-width: 860px; max-width: 1240px; margin-inline: auto; }

/* as ligações: o SVG estica na largura, e o traço fica em pixel */
.ligacoes { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ligacoes path { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; transition: opacity .2s, stroke .2s; }
.ligacao.galho { stroke: var(--casca-2); opacity: .9; }
.ligacao.fio { stroke: var(--ouro); opacity: .3; stroke-dasharray: 1 4; }
/* quase todo conceito também declara a Vida como raiz: esses fios são o
   leque do chão, e ficam mais tênues para não cobrir os outros */
.ligacao.fio.da-vida { opacity: .13; }
.ligacao.quieta { opacity: .07; }
.ligacao.galho.quieta { opacity: .22; }
.ligacao.abre { stroke: var(--folha-1); opacity: .95; stroke-dasharray: none; }
.ligacao.origem { stroke: var(--ouro); opacity: .95; stroke-dasharray: 4 4; }
.ligacao.caminho { stroke: var(--ouro); opacity: 1; filter: drop-shadow(0 0 4px var(--ouro)); }
.ligacoes .seiva { stroke: var(--ouro-luz); stroke-width: 2px; stroke-dasharray: 3 11; opacity: .95; }
/* passar por cima de uma folha: as ligações dela acendem (a regra de cada uma
   vem na página), e as outras apagam */
.rede:has(.degrau:hover, .degrau:focus-visible:not(:target), .semente:hover, .semente:focus-visible:not(:target)) .ligacoes path { opacity: .06; }
.rede:has(.degrau:hover, .degrau:focus-visible:not(:target), .semente:hover, .semente:focus-visible:not(:target)) .ligacoes .seiva { opacity: 0; }

/* os andares: uma linha tênue e o número à esquerda */
.andar-linha { stroke: var(--hair); stroke-width: 1px; stroke-dasharray: 2 6; vector-effect: non-scaling-stroke; opacity: .7; }
.andar-linha.aceso { stroke: var(--ouro); opacity: .35; }
.andar-rotulo {
  position: absolute; left: .2rem; transform: translateY(-50%);
  display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  font-family: var(--mono); font-size: .66rem; font-variant-numeric: tabular-nums;
  color: var(--ouro); background: var(--ceu); border: 1px solid var(--ouro);
}
.andar-rotulo.aceso { background: var(--ouro); color: var(--paper); }

/* a folha: o conceito no lugar dele na rede */
.degrau {
  position: absolute; z-index: 2; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: .3rem; width: calc(var(--vaga) - 8px);
  padding: .3rem .42rem .3rem .32rem; border: 1px solid var(--hair); border-radius: 10px;
  background: var(--paper); color: var(--ink); text-decoration: none;
  box-shadow: 0 1px 0 var(--hair-2), 0 4px 14px -10px var(--ceu); scroll-margin: 38vh 30vw;
  transition: border-color .15s, box-shadow .15s, opacity .2s;
}
.degrau:hover, .degrau:focus-visible { z-index: 3; border-color: var(--ouro); box-shadow: 0 0 0 1px var(--ouro), 0 8px 22px -12px var(--ouro); outline: none; }
.degrau .nome {
  min-width: 0; font-family: var(--display); font-weight: 600; font-size: .78rem; line-height: 1.15; hyphens: auto;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* a forma diz o status: broto, folha, fruto dourado */
.glifo { position: relative; flex: none; width: 1.2rem; height: 1.2rem; }
.folha .glifo::before { content: ""; position: absolute; inset: .12rem .22rem; border-radius: 0 85% 0 85%; background: linear-gradient(135deg, var(--folha-1), var(--folha-2)); transform: rotate(-6deg); }
.folha .glifo::after { content: ""; position: absolute; left: 50%; top: .25rem; bottom: .25rem; width: 1px; background: var(--paper); opacity: .55; transform: rotate(39deg); }
.broto .glifo::before { content: ""; position: absolute; left: 50%; bottom: .2rem; width: .62rem; height: .7rem; transform: translateX(-50%); border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%; background: var(--folha-1); border: 1.5px solid var(--folha-2); }
.broto .glifo::after { content: ""; position: absolute; left: 50%; top: .12rem; width: .42rem; height: .55rem; border-radius: 0 100% 0 100%; background: var(--folha-2); transform: rotate(-12deg); }
.fruto .glifo::before { content: ""; position: absolute; inset: .2rem; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--ouro-luz), var(--ouro-claro) 38%, var(--ouro) 80%); box-shadow: 0 0 12px 2px var(--brilho), 0 0 0 1px var(--ouro); }
.fruto .glifo::after { content: ""; position: absolute; top: 0; right: .2rem; width: .5rem; height: .34rem; border-radius: 0 100% 0 100%; background: var(--folha-2); }
.degrau.fruto { border-color: var(--ouro-claro); background: linear-gradient(135deg, var(--paper) 55%, color-mix(in srgb, var(--ouro-claro) 16%, var(--paper))); }

/* o que cada folha é para a escolhida */
.degrau.foco { border-color: var(--ouro); box-shadow: 0 0 0 2px var(--ouro), 0 0 30px -4px var(--ouro); }
.degrau.caminho { border-color: var(--ouro-claro); box-shadow: 0 0 0 1px var(--ouro-claro), 0 0 18px -8px var(--ouro); }
.degrau.origem { border-style: dashed; border-color: var(--ouro); }
.degrau.abre { border-color: var(--conceito); }
.degrau.longe { opacity: .52; }
.degrau.longe:hover, .degrau.longe:focus-visible { opacity: 1; }
.degrau .papel { position: absolute; top: -.6rem; right: .5rem; padding: 0 .4rem; white-space: nowrap; border: 1px solid currentColor; border-radius: 999px; background: var(--paper); font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; }
.degrau.origem .papel { color: var(--ouro); }
.degrau.abre .papel { color: var(--conceito); }
.degrau.proposta { border-style: dashed; }
.degrau.proposta-add { opacity: .78; }
.degrau.proposta-edit { border-color: var(--arc); }
.degrau.proposta-delete { border-color: var(--erro); }
.degrau.revogado .nome { text-decoration: line-through; }

/* o chão: a Vida, semente dourada, com as raízes; o centro da semente fica no
   ponto de onde as ligações saem */
.semente {
  position: absolute; z-index: 2; left: 50%; transform: translate(-50%, -1.7rem);
  display: flex; flex-direction: column; align-items: center; gap: .1rem; color: var(--ink); text-decoration: none;
  scroll-margin: 30vh 30vw;
}
.semente-luz {
  width: 3.4rem; height: 3.4rem; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, var(--ouro-luz), var(--ouro-claro) 34%, var(--ouro) 72%, var(--casca) 100%);
  box-shadow: 0 0 0 6px var(--brilho), 0 0 42px 10px var(--brilho);
}
.semente:hover .semente-luz, .semente:focus-visible .semente-luz, .semente.foco .semente-luz { outline: 1.5px solid var(--ouro); outline-offset: 6px; }
.semente:focus-visible { outline: none; }
/* o nome fica por cima das raízes, num fundo da cor do chão */
.semente-nome, .semente-sub { position: relative; padding: 0 .45rem; border-radius: 4px; background: var(--ceu); }
.semente-nome { margin-top: .45rem; font-family: var(--display); font-weight: 700; font-size: .95rem; letter-spacing: .32em; text-transform: uppercase; color: var(--ouro); }
.semente-sub { font-size: .72rem; color: var(--ink-2); }
.raizes-da-vida { position: absolute; left: 50%; width: 420px; height: auto; transform: translateX(-50%); overflow: visible; }
.raizes-da-vida path { fill: none; stroke: var(--ouro); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 3 6; opacity: .5; }

/* o painel da trilha */
.andar-chip { padding: .1rem .5rem; border: 1px solid var(--ouro); border-radius: 999px; color: var(--ouro); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; }
ol.passos { position: relative; display: flex; flex-direction: column; gap: 1px; margin: 0; padding: 0; list-style: none; }
ol.passos::before { content: ""; position: absolute; left: .95rem; top: .8rem; bottom: .8rem; width: 2px; background: linear-gradient(180deg, var(--ouro-claro), var(--ouro)); opacity: .7; }
ol.passos a { position: relative; display: flex; align-items: center; gap: .6rem; padding: .22rem .3rem; border-radius: 6px; color: var(--ink); text-decoration: none; }
ol.passos a:hover, ol.passos a:focus-visible { background: var(--conceito-soft); outline: none; }
.passo-andar { flex: none; display: grid; place-items: center; width: 1.3rem; height: 1.3rem; margin-left: .3rem; border: 1.5px solid var(--ouro); border-radius: 50%; background: var(--paper); color: var(--ouro); font-family: var(--mono); font-size: .6rem; font-variant-numeric: tabular-nums; }
ol.passos li.aqui .passo-andar { background: var(--ouro); color: var(--paper); }
ol.passos li.aqui a { font-weight: 600; }
.degrau-de-baixo { margin-left: auto; color: var(--ouro); font-size: .6rem; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.como-ler ul { gap: .4rem; margin-bottom: .6rem; }
.como-ler li { display: flex; align-items: center; gap: .55rem; font-size: .86rem; }
.mostra { display: inline-flex; flex: none; width: 1.5rem; justify-content: center; }
.mostra.seiva::before { content: ""; width: 1.2rem; height: 2px; background: var(--ouro); box-shadow: 0 0 6px 1px var(--ouro); }

@media (prefers-reduced-motion: no-preference) {
  .ligacoes .seiva { animation: seiva-sobe 1.6s linear infinite; }
  .semente-luz { animation: semente-respira 5s ease-in-out infinite; }
  .raizes-da-vida path { animation: raiz-corre 8s linear infinite; }
}
/* a seiva corre da origem para quem deriva dela: da Vida para cima */
@keyframes seiva-sobe { to { stroke-dashoffset: -28; } }
@keyframes semente-respira { 50% { box-shadow: 0 0 0 10px var(--brilho), 0 0 58px 16px var(--brilho); } }
@keyframes raiz-corre { to { stroke-dashoffset: -54; } }

/* no estreito, a rede rola para os lados dentro do quadro: encolher até a
   largura do celular deixaria a folha sem nome */
@media (max-width: 860px) {
  .trilha-app .subida { height: 74vh; padding: 0 .6rem; }
  /* o modo vai ao lado do título; o rótulo do título repetiria o modo */
  header h1 small { display: none; }
  header .modos { order: 1; }
  header .busca { order: 2; flex-basis: 100%; max-width: none; }
  header .revisar-link, header .prefs-link, header .sair { order: 3; }
  header .modos + .revisar-link { margin-left: auto; }
}