/* Gerado por scripts/gerar-site.js a partir de tokens.json — não editar à mão.
   Os mesmos valores alimentam o app nativo (Sources/DesignSystem/Tokens.swift)
   e o ícone (scripts/gerar-icone.py). O corpo do CSS vive em
   scripts/estilo/*.css; aqui só entram as variáveis resolvidas. */

:root {
  --fundo: #F4F5F7;
  --superficie: #FFFFFF;
  --superficieSutil: #F4F5F7;
  --borda: #E6E7EA;
  --texto: #141518;
  --textoSutil: #6B6F76;
  --cromo: #F4F5F7;
  --folha: #FFFFFF;
  --dado: #F4F5F7;
  --acento: #2F5BD8;
  --foco: #2F5BD8;
  --perigo: #C0362B;
  --divisor: #D3D6DB;
  --aviso: #8A6410;
  --status-a-fazer: #6B6F76;
  --status-em-andamento: #2F5BD8;
  --status-revisao: #8A6410;
  --status-concluida: #1E7A4C;
  --fato-commit: #0F7A83;
  --fato-pages: #8A6410;
  --fato-sessao: #6B6F76;
  --fato-teste: #6B4FA8;
  --fato-ui: #1E7A4C;
  --espaco-xs: 4px;
  --espaco-sm: 8px;
  --espaco-md: 12px;
  --espaco-lg: 20px;
  --espaco-xl: 32px;
  --raio-xs: 3px;
  --raio-sm: 6px;
  --raio-md: 10px;
  --raio-lg: 16px;
  --raio-pilula: 9999px;
  --raio: 10px;
  --traco-fio: 1px;
  --traco-foco: 2px;
  --traco-selecao: 2px;
  --veu-sutil: 0.08;
  --veu-medio: 0.14;
  --veu-forte: 0.22;
  --mov-rapido: 0.12s;
  --mov-padrao: 0.2s;
  --tipo-titulo: 22px;
  --galeria-card: 180px;
  --galeria-thumb: 128px;
  --sans: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --serif: "IBM Plex Serif", ui-serif, Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  color-scheme: light;
}

/* O site acompanha a aparência do sistema, igual ao app. O atributo
   data-theme só existe para o botão da página única sobrepor essa escolha. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --fundo: #0C0D0F;
  --superficie: #141518;
  --superficieSutil: #1B1D21;
  --borda: #26282D;
  --texto: #F4F5F7;
  --textoSutil: #8A8F98;
  --cromo: #1B1D21;
  --folha: #141518;
  --dado: #1B1D21;
  --acento: #7C95F0;
  --foco: #7C95F0;
  --perigo: #F0837A;
  --divisor: #33363C;
  --aviso: #D9A84E;
  --status-a-fazer: #8A8F98;
  --status-em-andamento: #7C95F0;
  --status-revisao: #D9A84E;
  --status-concluida: #4FC98A;
  --fato-commit: #4FC3CE;
  --fato-pages: #D9A84E;
  --fato-sessao: #8A8F98;
  --fato-teste: #A98FE0;
  --fato-ui: #4FC98A;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --fundo: #0C0D0F;
  --superficie: #141518;
  --superficieSutil: #1B1D21;
  --borda: #26282D;
  --texto: #F4F5F7;
  --textoSutil: #8A8F98;
  --cromo: #1B1D21;
  --folha: #141518;
  --dado: #1B1D21;
  --acento: #7C95F0;
  --foco: #7C95F0;
  --perigo: #F0837A;
  --divisor: #33363C;
  --aviso: #D9A84E;
  --status-a-fazer: #8A8F98;
  --status-em-andamento: #7C95F0;
  --status-revisao: #D9A84E;
  --status-concluida: #4FC98A;
  --fato-commit: #4FC3CE;
  --fato-pages: #D9A84E;
  --fato-sessao: #8A8F98;
  --fato-teste: #A98FE0;
  --fato-ui: #4FC98A;
  color-scheme: dark;
}

.status-a-fazer { color: var(--status-a-fazer);
  background: color-mix(in srgb, var(--status-a-fazer) calc(var(--veu-medio) * 100%), transparent); }
.status-em-andamento { color: var(--status-em-andamento);
  background: color-mix(in srgb, var(--status-em-andamento) calc(var(--veu-medio) * 100%), transparent); }
.status-revisao { color: var(--status-revisao);
  background: color-mix(in srgb, var(--status-revisao) calc(var(--veu-medio) * 100%), transparent); }
.status-concluida { color: var(--status-concluida);
  background: color-mix(in srgb, var(--status-concluida) calc(var(--veu-medio) * 100%), transparent); }

details[data-tipo="commit"] > summary .dito,
details[data-tipo="commit"] > summary .rotulo { color: var(--fato-commit); }
details[data-tipo="pages"] > summary .dito,
details[data-tipo="pages"] > summary .rotulo { color: var(--fato-pages); }
details[data-tipo="sessao"] > summary .dito,
details[data-tipo="sessao"] > summary .rotulo { color: var(--fato-sessao); }
details[data-tipo="teste"] > summary .dito,
details[data-tipo="teste"] > summary .rotulo { color: var(--fato-teste); }
details[data-tipo="ui"] > summary .dito,
details[data-tipo="ui"] > summary .rotulo { color: var(--fato-ui); }

/* Base compartilhada pelas duas saídas do site.
   Gerado dentro de estilo.css / bordo.html por scripts/gerar-site.js — as
   variáveis :root vêm de tokens.json e são emitidas antes deste arquivo.

   Aqui moram o reset, as três vozes e tudo que não é layout. Os dois modos de
   saída (multi-página e página única) divergem só em layout: antes divergiam
   também em tipografia, e um mentor que abrisse os dois via dois produtos. */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

/* As três vozes ------------------------------------------------------
   Uma superfamília, três registros: interface, narrativa e fato. A Plex foi
   desenhada para documentação técnica, e usar serif/sans/mono da mesma
   família faz a distinção entre narrativa e fato ler como mudança de
   registro, não de tipografia. É a regra de ouro do vault virada forma.

   `.narrativa` é o que alguém escreveu. `.mono`, `code`, carimbo de hora,
   tipo de fato e caminho de arquivo é o que saiu de um hook. Nenhum dos dois
   empresta a voz do outro. */

code, .mono { font-family: var(--mono); font-size: 0.88em; }

.narrativa { font-family: var(--serif); max-width: 66ch; }

/* Rótulo de grupo em micro-caps: hierarquia sem borda nem peso extra. */
.rotulo {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--textoSutil);
}

/* O nó de tipo na árvore de registros é o `MarcadorDeTipo` do app: voz mono,
   cor da categoria. A cor de cada tipo é emitida a partir de tokens.json. */
details[data-tipo] > summary .dito,
details[data-tipo] > summary .rotulo {
  font-family: var(--mono);
  font-weight: 500;
}

/* Foco e movimento --------------------------------------------------- */

:focus-visible {
  outline: var(--traco-foco) solid var(--foco);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Movimento.
   O site não declarava uma única `transition` — e declarava, logo abaixo,
   `transition: none` para quem pede menos movimento: suprimia um movimento que
   nunca teve. Todo `:hover` cortava seco e não havia `:active` em lugar nenhum.
   Os dois valores são os mesmos do app (`movimento.rapido` e `.padrao`). */
a, button, summary, .dia, .caixa {
  transition: background-color var(--mov-rapido) ease-out,
              color var(--mov-rapido) ease-out,
              border-color var(--mov-rapido) ease-out,
              opacity var(--mov-rapido) ease-out;
}
a:active, button:active, summary:active { opacity: 0.7; }

/* Pular para o conteúdo: só aparece no foco de teclado, que é quando serve. */
.pular {
  position: absolute;
  left: -9999px;
  top: var(--espaco-sm);
  padding: var(--espaco-sm) var(--espaco-md);
  background: var(--superficie);
  color: var(--acento);
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  z-index: 10;
}
.pular:focus { left: var(--espaco-sm); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Layout do modo multi-página: cabeçalho fixo, sumário lateral, uma página
   por nota. A base (reset, vozes, foco) vem de base.css. */

header {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: var(--espaco-lg);
  padding: var(--espaco-md) var(--espaco-lg);
  background: var(--cromo);
  border-bottom: var(--traco-fio) solid var(--divisor);
}
.marca { font-weight: 650; color: var(--texto); text-decoration: none; }
header nav { display: flex; gap: var(--espaco-md); flex-wrap: wrap; }
header nav a { color: var(--textoSutil); text-decoration: none; font-size: 0.92em; }
header nav a.ativo, header nav a:hover { color: var(--acento); }

.colunas { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--espaco-lg);
  max-width: 1180px; margin: 0 auto; padding: var(--espaco-lg); align-items: start; }

aside { position: sticky; top: 68px; font-size: 0.9em; }
aside .grupo { margin-bottom: var(--espaco-lg); }
aside h3 { margin: 0 0 var(--espaco-sm); font-size: 0.78em; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--textoSutil); }
aside ul { list-style: none; margin: 0; padding: 0; }
aside li { margin: 2px 0; }
aside a { color: var(--texto); text-decoration: none; display: block; padding: 3px 8px;
  border-radius: 6px; }
aside a:hover { background: var(--cromo); }
aside a.ativo { background: var(--cromo); color: var(--acento); font-weight: 600; }

main { min-width: 0; }
/* Títulos e corpo de nota falam na voz de narrativa — a mesma escolha da
   página única, para as duas saídas não parecerem dois produtos. */
main h1, main h2, main h3 { font-family: var(--serif); font-weight: 600;
  letter-spacing: -0.015em; text-wrap: balance; }
main h1 { font-size: var(--tipo-titulo); margin: 0 0 var(--espaco-sm); }
main p, main li, main blockquote { font-family: var(--serif); }
/* Fato continua monoespaçado: tabela, árvore de registros e etiquetas. */
main table, main .arvore, .etiqueta, .campos { font-family: var(--sans); }
main h2 { font-size: 1.15em; margin: var(--espaco-lg) 0 var(--espaco-sm); }
main h3 { font-size: 1em; margin: var(--espaco-lg) 0 var(--espaco-sm); }
.subtitulo { color: var(--textoSutil); margin: 0 0 var(--espaco-lg); }

a { color: var(--acento); }
.link-ausente { color: var(--textoSutil); border-bottom: 1px dotted var(--borda); }

.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--espaco-md); margin-bottom: var(--espaco-lg); }
.numero { background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: var(--espaco-md); }
.numero strong { display: block; font-size: 1.7em; line-height: 1.2; }
.numero span { color: var(--textoSutil); font-size: 0.82em; }

.destaque { background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: var(--espaco-lg); margin-bottom: var(--espaco-lg); }
.destaque h2 { margin-top: 0; }

.campos { display: flex; flex-wrap: wrap; gap: var(--espaco-md); font-size: 0.85em;
  color: var(--textoSutil); margin-bottom: var(--espaco-lg);
  padding-bottom: var(--espaco-md); border-bottom: 1px solid var(--borda); }
.campos b { color: var(--texto); font-weight: 600; }

.aviso { background: var(--dado); border-radius: var(--raio);
  padding: var(--espaco-md); font-size: 0.88em; color: var(--textoSutil); }

blockquote { margin: var(--espaco-md) 0; padding: var(--espaco-sm) var(--espaco-md);
  border-left: 3px solid var(--borda); color: var(--textoSutil); }

/* Callouts do Obsidian (> [!info] …).
   O tipo do callout é dito pelo rótulo, não por uma barra colorida na
   lateral — mesmo tratamento da página única, para as duas superfícies não
   divergirem no visual. */
.callout { margin: var(--espaco-md) 0; padding: var(--espaco-md);
  border-radius: var(--raio); background: var(--dado); font-size: 0.94em; }
.callout > b { display: block; margin-bottom: 5px; color: var(--acento);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8em;
  text-transform: uppercase; letter-spacing: 0.07em; }
.callout > p:first-of-type { margin-top: 0; }
.callout > p:last-child { margin-bottom: 0; }
.callout-warning > b, .callout-aviso > b { color: var(--status-revisao); }

/* Item de lista ainda não preenchido no vault: ocupa a linha sem fingir
   conteúdo que não existe. */
.vazio-item { list-style: none; min-height: 1.2em; }
.vazio-item::before { content: "—"; color: var(--borda); }

pre { background: var(--dado); padding: var(--espaco-md);
  border-radius: var(--raio); overflow-x: auto; }
pre code { font-size: 0.86em; }
:not(pre) > code { background: var(--dado); padding: 1px 5px; border-radius: 4px; }

hr { border: 0; border-top: 1px solid var(--borda); margin: var(--espaco-lg) 0; }

.rolagem { overflow-x: auto; margin: var(--espaco-md) 0; }
table { border-collapse: collapse; width: 100%; font-size: 0.92em; }
th, td { text-align: left; padding: var(--espaco-sm) var(--espaco-md);
  border-bottom: 1px solid var(--borda); }
th { font-size: 0.78em; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--textoSutil); font-weight: 600; }

.etiqueta { display: inline-block; padding: 2px 10px;
  border-radius: var(--raio-pilula); font-size: 0.82em; white-space: nowrap; }
/* O ID da tarefa é identificador, não frase: quebrar no hífen o transforma
   em duas coisas que não existem. */
td:first-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
/* As regras .status-* são emitidas a partir de tokens.json, junto do :root. */

.lista-tarefas { list-style: none; padding-left: 0; }
.lista-tarefas .caixa { display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; margin-right: 8px; border: 1px solid var(--borda);
  border-radius: 4px; font-size: 10px; vertical-align: -2px; }
.lista-tarefas .caixa.feita { background: var(--status-concluida); border-color: var(--status-concluida); color: var(--superficie); }

.arvore, .arvore ul { list-style: none; padding-left: 0; margin: 0; }
.arvore ul { padding-left: var(--espaco-lg); border-left: 1px solid var(--borda);
  margin-left: 6px; }
.arvore li { margin: 3px 0; }
.arvore summary { cursor: pointer; padding: 3px 0; display: flex; gap: var(--espaco-md);
  justify-content: space-between; align-items: baseline; }
.arvore summary::marker { color: var(--textoSutil); }
.arvore .rotulo { min-width: 0; }
.arvore .apoio { color: var(--textoSutil); font-size: 0.82em; white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.arvore .fato { display: flex; gap: var(--espaco-md); justify-content: space-between;
  align-items: baseline; padding: 3px 0; }
.grupo-repetido > summary .rotulo { font-weight: 600; }

.lista-dias { list-style: none; padding: 0; }
.lista-dias li { display: flex; justify-content: space-between; padding: var(--espaco-sm) 0;
  border-bottom: 1px solid var(--borda); }

.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--galeria-card), 1fr));
  gap: var(--espaco-md); }
.cartao { margin: 0; background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); overflow: hidden; }
.cartao img, .cartao video { width: 100%; height: var(--galeria-thumb);
  object-fit: cover; display: block; background: var(--superficieSutil); }
.sem-previa { height: var(--galeria-thumb); display: flex; align-items: center;
  justify-content: center; background: var(--superficieSutil); color: var(--textoSutil);
  font-size: 0.82em; }
.cartao figcaption { padding: var(--espaco-md); display: flex; flex-direction: column; gap: 3px; }
.cartao .apoio { color: var(--textoSutil); font-size: 0.78em; word-break: break-all; }
.cartao .acao { font-size: 0.85em; margin-top: 4px; }

.vazio { color: var(--textoSutil); }

footer { max-width: 1180px; margin: 0 auto; padding: var(--espaco-lg);
  border-top: 1px solid var(--borda); color: var(--textoSutil); font-size: 0.82em; }

/* O aviso de conteúdo novo.
   Ancorado no rodapé da janela e não no topo: o vault muda enquanto alguém
   está lendo, e empurrar o conteúdo para baixo no meio de um parágrafo é pior
   que a notícia que o aviso traz. */
#atualizacao {
  position: fixed; inset-block-end: var(--espaco-lg); inset-inline-start: 50%;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: var(--espaco-md);
  padding: var(--espaco-sm) var(--espaco-md);
  background: var(--cromo); color: var(--texto);
  border: 1px solid var(--borda); border-radius: var(--raio);
  box-shadow: 0 6px 24px rgb(0 0 0 / 0.18);
  font-family: var(--sans); font-size: 0.85em;
  z-index: 10;
}
#atualizacao[hidden] { display: none; }
#atualizacao button {
  font: inherit; font-weight: 600; cursor: pointer;
  padding: 4px 10px; border-radius: calc(var(--raio) - 2px);
  border: 1px solid var(--acento); background: var(--acento); color: var(--superficie);
}
#atualizacao button:hover { opacity: 0.9; }

@media (prefers-reduced-motion: no-preference) {
  #atualizacao { animation: surgir 160ms ease-out; }
  @keyframes surgir {
    from { opacity: 0; transform: translate(-50%, 8px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
  }
}

@media (max-width: 800px) {
  .colunas { grid-template-columns: 1fr; }
  aside { position: static; }
}