:root { color-scheme: light dark; --fg:#1a1a1a; --bg:#fbfbfa; --mut:#6b6b6b;
        --line:#e3e3e0; --acc:#2f5d50; }
@media (prefers-color-scheme: dark) {
  :root { --fg:#e8e8e6; --bg:#17181a; --mut:#9a9a97; --line:#2e3033; --acc:#7fb7a5; } }
* { box-sizing:border-box; }
body { margin:0; font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
       color:var(--fg); background:var(--bg); }
header { display:flex; align-items:center; justify-content:space-between; gap:1rem;
         padding:1rem 1.25rem; border-bottom:1px solid var(--line); flex-wrap:wrap; }
header h1 { font-size:1.15rem; margin:0; letter-spacing:.01em; }
.who { display:flex; align-items:center; gap:.75rem; color:var(--mut); font-size:.9rem; }
/* PONT-331: sem teto e sem centralizar. Esta regra alcança as telas que NÃO
   usam `.shell` (conflitos, usuários, destinatários, auditoria) — eram elas
   que continuavam presas a 60rem com faixa morta dos dois lados, mesmo depois
   de a moldura do `.shell` soltar. A medida de leitura desceu para a prosa,
   logo abaixo. */
main { margin:0; padding:1.5rem 1.25rem 4rem; }
/* A medida de leitura, onde ela de fato importa — em CARACTERES, que é como a
   tipografia a mede. Tabela e formulário ficam livres de propósito. */
main p, main li, main .sub, main dd { max-width:68ch; }
section { margin-bottom:2.25rem; }
h2 { font-size:.8rem; text-transform:uppercase; letter-spacing:.08em;
     color:var(--mut); font-weight:600; margin:0 0 .75rem; }
ul.clients { list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:.5rem; }
ul.clients li { border:1px solid var(--line); border-radius:6px; padding:.35rem .7rem;
                font-size:.92rem; }
dl { margin:0; display:grid; grid-template-columns:auto 1fr; gap:.35rem 1rem; font-size:.92rem; }
dt { color:var(--mut); } dd { margin:0; }
code { font:.88rem/1.4 ui-monospace,SFMono-Regular,Menlo,monospace; }
.empty,.soon p { color:var(--mut); font-size:.92rem; }
button { font:inherit; font-size:.9rem; padding:.4rem .9rem; border:1px solid var(--line);
         border-radius:6px; background:transparent; color:var(--fg); cursor:pointer; }
button:hover { border-color:var(--acc); color:var(--acc); }
/* PONT-343: a aba de conflitos como alerta. Vermelho é do ESTADO; o badge é
   contagem, ou "?" quando a leitura falhou — "não sei" não é "zero". */
.tabs a.alerta { color:#b23b3b; }
.badge { display:inline-block; min-width:1.2em; padding:0 .35em; margin-left:.25em;
         border-radius:1em; background:#b23b3b; color:#fff; font-size:.72rem;
         text-align:center; line-height:1.5; }

/* PONT-344: o botão de operação DESTRUTIVA tem forma própria — antes só a
   caixa vermelha acima o distinguia de "Listar sessões". */
button.perigo { border-color:#b23b3b; color:#b23b3b; font-weight:600; }
button.perigo:hover { background:#b23b3b; color:#fff; }
body.login { display:grid; place-items:center; min-height:100vh; }
body.login main { width:min(22rem,90vw); text-align:center; }
body.login h1 { margin:0 0 .15rem; font-size:1.5rem; }
/* PONT-331: sem caixa-alta. `.sub` é usada nas cinco telas como FRASE
   explicativa — "arquivo alterado dos dois lados desde a última passada…" —, e
   um parágrafo inteiro em maiúsculas com `letter-spacing:.1em` é um grito que
   ninguém lê. Sobrancelha em maiúsculas continua existindo: é o `h2` e o
   `.side-label`, que são RÓTULOS de uma ou duas palavras. */
.sub { margin:0 0 1.5rem; color:var(--mut); font-size:.88rem; line-height:1.5; }
body.login input { width:100%; font:inherit; padding:.55rem .7rem; border:1px solid var(--line);
                   border-radius:6px; background:transparent; color:var(--fg); }
body.login button { width:100%; margin-top:.25rem; }
.error { color:#b3261e; font-size:.9rem; margin-top:1rem; }
/* PONT-284: degradacao anunciada (narrativa por LLM indisponivel). Nao e
   erro — o relatorio sai —, entao nao usa a cor de erro. */
.aviso { color:var(--mut); font-size:.85rem; margin:.15rem 0 0; }
/* PONT-350: a nota de escopo é contexto, não erro — cor de texto secundário,
   com uma barra à esquerda para ser achada de relance. */
.aviso.escopo { border-left:3px solid var(--bd); padding:.25rem .6rem; margin:.4rem 0 1rem; }
@media (prefers-color-scheme: dark) { .error { color:#f2b8b5; } }
.grid { display:grid; gap:.85rem; max-width:32rem; }
.grid label { display:grid; gap:.3rem; font-size:.85rem; color:var(--mut); }
.grid label.chk { display:flex; align-items:center; gap:.5rem; }
.grid select,.grid input[type=date] { font:inherit; font-size:.95rem; padding:.4rem .55rem;
  border:1px solid var(--line); border-radius:6px; background:transparent; color:var(--fg); }
.grid button { justify-self:start; padding:.5rem 1.4rem; }
#status { margin-top:1rem; font-size:.92rem; }
.ok { color:#2f7d5f; font-weight:600; } .err { color:#b3261e; font-weight:600; }
.run { color:var(--mut); }
@media (prefers-color-scheme: dark) { .ok { color:#7fd0ab; } .err { color:#f2b8b5; } }
.perigo { border:1px solid #b3261e; border-radius:6px; padding:.6rem .85rem; color:#b3261e; }
@media (prefers-color-scheme: dark) { .perigo { border-color:#f2b8b5; color:#f2b8b5; } }
ul.jobs { list-style:none; padding:0; margin:0; display:grid; gap:.45rem; font-size:.9rem; }
ul.jobs li { border:1px solid var(--line); border-radius:6px; padding:.45rem .7rem; }
/* Auto-acao na trilha (PONT-249, spec 6.2): destaque E o que substitui o
   bloqueio de auto-promocao. Borda + fundo, nao so cor de texto -- a linha
   precisa saltar numa lista longa lida em diagonal. */
ul.jobs li.auto { border-color:#b3261e; background:#b3261e14; }
.auto-marca { color:#b3261e; }
@media (prefers-color-scheme: dark) {
  ul.jobs li.auto { border-color:#f2b8b5; background:#f2b8b520; }
  .auto-marca { color:#f2b8b5; } }
small { color:var(--mut); }
.grid textarea { font:.9rem/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;
  padding:.5rem .6rem; border:1px solid var(--line); border-radius:6px;
  background:transparent; color:var(--fg); resize:vertical; }
/* `[type=password]` entra junto (PONT-279): o olhinho troca o `type` para
   `text` no clique, e sem isto o campo MUDAVA de fonte e de moldura ao mostrar
   a senha — o campo pulando de tamanho no meio da digitação. */
.grid input[type=text],.grid input[type=password],.grid input:not([type]) {
  font:inherit; font-size:.95rem;
  padding:.4rem .55rem; border:1px solid var(--line); border-radius:6px;
  background:transparent; color:var(--fg); }
.note { font-size:.82rem; color:var(--mut); margin:.2rem 0 0; }
#statusp { margin-top:1rem; font-size:.92rem; }
.who a { color:var(--acc); text-decoration:none; }
.who a:hover { text-decoration:underline; }
#statusc { margin-top:1rem; font-size:.92rem; }
.wzmeta { font-size:.82rem; color:var(--mut); margin:0 0 .8rem; }
#wzlabel { white-space:pre-line; color:var(--fg); font-size:.95rem; }
#wzinput textarea,#wzinput select { width:100%; font:inherit; font-size:.95rem;
  padding:.45rem .6rem; border:1px solid var(--line); border-radius:6px;
  background:transparent; color:var(--fg); }
#statusw { margin-top:1rem; font-size:.92rem; }
#fwr { margin-top:1.25rem; padding-top:1rem; border-top:1px solid var(--line); }

/* ---------------------------------------------------- PONT-227: menu lateral
   Reusa a gramatica que a pagina ja tem — sobrancelha em maiusculas espacadas
   (mesma regra do h2), borda de 1px em --line, raio 6px. O menu nao introduz
   vocabulario visual novo: ele e a mesma etiqueta de secao, movida para a
   margem e tornada clicavel. */
.env { display:flex; gap:1rem; flex:1 1 auto; min-width:0; justify-content:center;
       font:.78rem/1.3 ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--mut); }
.env span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* PONT-362: o seletor mora DENTRO da seção «Projeto» do menu, não mais no
   cabeçalho. Largura total da coluna e um recuo igual ao dos itens, para ler
   como parte da seção — era global, e parecia mandar na tela inteira. */
.side form.projeto { margin:.15rem .55rem .35rem; }
.op-page form.projeto { margin:.2rem 0 1rem; max-width:22rem; }
.op-page form.projeto select { width:100%; font:inherit; padding:.25rem .35rem;
                               border:1px solid var(--bd); border-radius:6px; }
.side form.projeto[hidden] { display:none; }
.side form.projeto select { width:100%; font:inherit; color:var(--fg); background:var(--bg);
                            border:1px solid var(--bd); border-radius:6px; padding:.2rem .35rem;
                            cursor:pointer; }
.side form.projeto select:focus-visible { outline:2px solid var(--acc); outline-offset:1px; }
/* A seção que o seletor governa ganha corpo, para se ler como um bloco. */
.side .side-label.secao[data-secao="projeto"] { margin-bottom:.1rem; }
.env b { font-weight:600; color:var(--mut); opacity:.72; margin-right:.35rem;
         font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
         font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; }
/* A grade ocupa a largura toda: com `max-width` + `margin:auto` o menu ficava
   flutuando dentro da coluna central em vez de encostar na borda (PONT-231).
   Quem limita a medida de leitura e o CONTEUDO, nao a moldura. */
.shell { display:grid; grid-template-columns:13rem minmax(0,1fr); align-items:start; }
.side { position:sticky; top:0; display:grid; gap:.15rem; align-content:start;
        padding:1.5rem 1rem; min-height:calc(100vh - 7.5rem);
        /* PONT-331: a coluna não deixa nada transbordar por cima do conteúdo.
           `min-width:0` porque item de grade tem `min-width:auto` por padrão,
           e é ele que deixava o filho largo esticar a coluna inteira. */
        min-width:0; overflow-x:hidden;
        /* Divisor: 1px em --line, a mesma regra do cabecalho e das abas.
           Nenhum vocabulario visual novo — a pagina ja separa regioes assim. */
        border-right:1px solid var(--line); }
/* PONT-331: sem caixa-alta e sem `letter-spacing` largo. Os dois somados
   alargavam cada item o bastante para ele atravessar o divisor, e deixavam o
   menu gritado. A SOBRANCELHA da área (`.side-label`) fica com o tratamento
   em maiúsculas — é ela que marca seção; o item é para ler.
   `overflow-wrap:anywhere` é o que garante que NADA cruza a borda: rótulo
   comprido quebra dentro da coluna em vez de vazar por cima do conteúdo. */
.side a { display:block; padding:.35rem .55rem; border-radius:6px; text-decoration:none;
          color:var(--mut); font-size:.82rem; line-height:1.35;
          font-weight:500; border-left:2px solid transparent;
          overflow-wrap:anywhere; }
/* PONT-333: célula alinhada ao TOPO. Com linhas de alturas diferentes (a
   coluna do Mac tem data, tamanho e link; a do arquivo, uma linha só), o
   alinhamento por baseline jogava o nome do arquivo para o pé da linha, longe
   do dado que ele descreve. */
td { vertical-align:top; }

/* PONT-341: a home. Cartões em grade; a cor é do ESTADO (semântica), não do
   tema — e `erro` é um terceiro tom, nunca o de `atenção`: leitura que falhou
   não é problema encontrado. */
.saude { display:grid; grid-template-columns:repeat(auto-fit, minmax(15rem, 1fr)); gap:.9rem; }
.cartao { display:flex; flex-direction:column; gap:.25rem; padding:.9rem 1rem;
          border:1px solid var(--line); border-left:4px solid var(--line); border-radius:6px;
          text-decoration:none; color:var(--fg); }
.cartao:hover { border-color:var(--acc); }
.cartao .titulo { font-size:.72rem; text-transform:uppercase; letter-spacing:.08em;
                  color:var(--mut); font-weight:600; }
.cartao .valor { font-size:1.15rem; font-weight:600; }
.cartao small { color:var(--mut); font-size:.8rem; }
.saude-ok { border-left-color:#3a9a5c; }
.saude-atencao { border-left-color:#d08a1d; }
.saude-erro { border-left-color:#b23b3b; }
.saude-erro .valor { color:#b23b3b; }
.job-error { color:#b23b3b; }

/* PONT-340: presets de período — botões pequenos, em linha, antes de/até. */
.presets { display:flex; flex-wrap:wrap; gap:.4rem; margin:0; }
.presets button { font-size:.8rem; padding:.25rem .6rem; }
.presets button[aria-pressed="true"] { border-color:var(--acc); color:var(--acc); }

/* PONT-333/A: grupos recolhíveis e filtro do menu. */
.filtro { font:inherit; font-size:.8rem; width:100%; box-sizing:border-box;
          margin:0 0 .6rem; padding:.35rem .5rem; border:1px solid var(--line);
          border-radius:6px; background:transparent; color:var(--fg); }
.filtro:focus-visible { outline:2px solid var(--acc); outline-offset:1px; }
.grupo > summary { cursor:pointer; list-style:none; }
/* O triângulo nativo do Safari/Chrome some, e a seta própria entra pelo `::after`
   — assim ela herda a cor da sobrancelha em vez de destoar dela. */
.grupo > summary::-webkit-details-marker { display:none; }
.grupo > summary::after { content:"›"; float:right; transition:transform .12s;
                          display:inline-block; opacity:.7; }
.grupo[open] > summary::after { transform:rotate(90deg); }
.grupo > summary:focus-visible { outline:2px solid var(--acc); outline-offset:2px;
                                 border-radius:4px; }
.grupo[hidden] { display:none; }
/* `[hidden]` PRECISA vencer aqui, e esta linha não é higiene: `.side a` declara
   `display:block`, e regra de autor com classe ganha do `[hidden]{display:none}`
   do navegador. Sem isto o filtro marcava `a.hidden = true` e o item continuava
   na tela — foi o que o primeiro render mostrou, com "Estado da sincronização"
   aparecendo numa busca por "conflito". O JS estava certo; o CSS o desfazia. */
.side a[hidden], .side .side-label[hidden] { display:none; }
/* PONT-351: título de SEÇÃO (Projeto / Sigil) acima das sobrancelhas de
   área: um degrau de contraste, e um fio entre as duas seções. */
.side-label.secao { color:var(--fg); opacity:1; font-size:.74rem; letter-spacing:.1em;
                    margin-top:1.1rem; padding-top:.7rem; border-top:1px solid var(--bd); }
.side .side-label.secao:first-of-type { border-top:0; padding-top:0; margin-top:.5rem; }

/* PONT-333: a barra de ações da listagem. Discreta de propósito — é atalho
   para o que a página já contextualiza, não chamada principal. */
.acoes { font-size:.85rem; color:var(--mut); margin:0 0 1rem; }
.acoes a { margin-left:.15rem; }

/* PONT-331: valor de data/tamanho não quebra no meio. Sem isto
   "2026-09-08 12:27 · mais recente" saía em três linhas e a coluna ficava
   ilegível justamente onde a decisão é tomada. */
td .quando { white-space:nowrap; }
td .medida { white-space:nowrap; font-size:.8rem; color:var(--mut); }

/* A sobrancelha de área. Ela NÃO tinha regra nenhuma antes do PONT-331 —
   renderizava como texto solto, indistinguível de um item clicável. Agora é
   ela que carrega o tratamento em maiúsculas que saiu dos itens: seção se
   anuncia, item se lê. */
.side-label { display:block; margin:.9rem 0 .15rem; padding:0 .55rem;
              font-size:.68rem; text-transform:uppercase; letter-spacing:.09em;
              font-weight:700; color:var(--mut); opacity:.62; }
.side-label:first-child { margin-top:0; }
.side a:hover { color:var(--fg); }
.side a[aria-current="page"] { color:var(--acc); border-left-color:var(--acc);
                               background:color-mix(in srgb, var(--acc) 8%, transparent); }
.side a:focus-visible { outline:2px solid var(--acc); outline-offset:2px; }
/* O painel oculto continua NO DOM: o polling de jobs escreve nele mesmo fora da
   tela, e remove-lo faria um job terminar sem ninguem ver. */
.panel[hidden] { display:none; }
.panel > section:last-child { margin-bottom:0; }
/* PONT-331: a MOLDURA estica com a janela. O teto de 58rem aqui deixava faixa
   morta à direita numa tela larga, e prendia tabela e formulário a uma medida
   que eles não precisam.
   A razão tipográfica do teto continua valendo — linha de texto larga demais
   piora a leitura —, mas ela é sobre PROSA, não sobre o container. Por isso a
   medida desceu um nível: `.shell main > * > p` e afins abaixo. Tabela larga
   agora usa a tela toda, que é o ponto. */
.shell main { padding:1.5rem 1.5rem 4rem; margin:0; }
/* Tabela e bloco de código continuam livres, e ganham rolagem PRÓPRIA: sem
   isto uma tabela larga empurra a página inteira para o lado. */
.shell main .rolagem { overflow-x:auto; }
@media (max-width:44rem) {
  .shell { grid-template-columns:1fr; }
  /* Empilhado, o divisor deixa de ser vertical: vira a linha de baixo. */
  .side { position:static; grid-auto-flow:column; grid-auto-columns:max-content;
          overflow-x:auto; gap:.25rem; min-height:0;
          padding:.5rem 1rem; border-right:0;
          border-bottom:1px solid var(--line); }
  .shell main { padding:1.25rem 1rem 3rem; }
  .side a { border-left:0; border-bottom:2px solid transparent; }
  .side a[aria-current="page"] { border-left-color:transparent; border-bottom-color:var(--acc); }
  .env { justify-content:flex-start; flex-basis:100%; order:3; }
}

/* Abas de área (PONT-227). São LINKS de verdade para `/` e `/admin`, não abas
   simuladas em JS: as duas páginas já são rotas separadas com menus laterais
   próprios, as URLs continuam significando algo, e funciona sem JavaScript.
   A aba ativa usa `aria-current="page"` — mesma semântica do menu lateral. */
.tabs { display:flex; gap:.25rem; padding:0 1.25rem;
        border-bottom:1px solid var(--line); }
.tabs a { padding:.6rem .9rem; text-decoration:none; color:var(--mut);
          font-size:.85rem; font-weight:600; letter-spacing:.02em;
          border-bottom:2px solid transparent; margin-bottom:-1px; }
.tabs a:hover { color:var(--fg); }
.tabs a[aria-current="page"] { color:var(--fg); border-bottom-color:var(--acc); }
.tabs a:focus-visible { outline:2px solid var(--acc); outline-offset:-2px; }