/* cockgit — nova-ledger.css
   vista /nova · o CORPO do drawer: o ledger do job como linha do tempo.

   ARQUIVO PRÓPRIO pelo mesmo motivo do nova-empresa.css e do nova-tempo.css: o
   nova.css já está encostado no teto de 48KB por arquivo. A cascata segue sendo
   contrato — este entra DEPOIS do nova.css no index.html, porque reusa os tokens
   e a casca dele (#nv-drawer, .nv-dr-live, .nv-dim, os botões em [colchete]).

   [DECISÃO DO DONO, 01/09/2026] O drawer despejava o ledger cru. A ordem foi
   "lista com ícone de progressão (durante) e check de feito ou erro", "colorir as
   palavras que são importantes" e, no complemento, "agrupamentos e pequenos cards
   pra visualização suave". O JS que deriva etapa, estado e frase vive em
   js/app-nova-ledger.js — aqui está só o desenho.

   SUAVE, e o que isso quer dizer em regra de CSS:
     · respiro ENTRE cards (gap de 10px), não dentro de cada um;
     · hierarquia por TAMANHO e PESO, não por moldura: rótulo da etapa em caps
       pequeno, resumo no degrau do dado, meta (hora/ator/id) apagada embaixo;
     · borda discreta (--border, 1px) e ZERO sombra — a sombra pesada do
       #nv-drawer já separa o painel da tela; repeti-la card a card viraria ruído;
     · a cor NUNCA pinta o card inteiro. Ela entra em três lugares e só: o glifo
       de estado, o realce das palavras que decidem, e uma marca FINA de 3px na
       borda esquerda. Card colorido inteiro transforma um ledger com um erro numa
       tela vermelha — e aí o erro deixa de saltar, porque tudo salta.

   ACESSIBILIDADE: estado nunca sai só na cor. Cada linha tem GLIFO + COR +
   PALAVRA ("feito", "erro", "em andamento" — no aria-label do glifo e, no
   cabeçalho do card, também visível no resumo). O marcador do "durante" pulsa,
   e o pulso morre em prefers-reduced-motion. Recolher/abrir é <button> de
   verdade: teclado e leitor de tela de graça, com aria-expanded dizendo o estado.

   Nenhum hex solto: claro/escuro vem inteiro de base.css. */

  /* ---- a pilha de cards -------------------------------------------------------
     O .nv-dr-live continua sendo QUEM ROLA (nova.css: flex:1;overflow-y:auto). Os
     cards não podem criar largura própria: `min-width:0` + `overflow-wrap:anywhere`
     em tudo que recebe texto do ledger — um sha de 40 caracteres ou um motivo sem
     espaço empurraria a página para o lado no celular. */
  .nv-lg{display:flex;flex-direction:column;gap:10px;min-width:0}
  .nv-lg-c{border:1px solid var(--border);border-left:3px solid var(--lg-c,var(--ruleS));
    background:var(--surface);min-width:0}

  /* cabeçalho do card: [glifo] ETAPA · resumo de uma linha · caret.
     `flex-wrap` + `row-gap` porque no celular o resumo desce para a segunda
     fileira em vez de encolher de letra — a régua da vista é empilhar. */
  button.nv-lg-h{display:flex;align-items:center;gap:10px;row-gap:2px;flex-wrap:wrap;
    width:100%;text-align:left;border:0;background:transparent;color:var(--text);
    padding:8px 12px;min-height:44px}
  button.nv-lg-h:hover{background:var(--surface2);border:0;color:var(--text)}
  /* o [colchete] de base.css é o idioma de AÇÃO do painel, e o cabeçalho do card
     não é uma ação — é um disclosure de largura inteira. Com o resumo ocupando a
     faixa toda, o "]" fica a meia tela do "[" e deixa de ler como par: vira
     colchete órfão em vez de sinal de "isto clica". Quem carrega a affordance
     aqui é o caret ▸/▾ (o padrão de recolher/abrir), o `aria-expanded` para quem
     não o enxerga, e o hover que acende a faixa inteira. O [+ N campos] da linha
     CONTINUA com colchete: aquele é ação, e o idioma vale.
     COMO se opta por fora: a classe `lnk`, que é a saída que o próprio base.css
     prevê (`button:not(.theme-btn)…:not(.lnk)…`) e não carrega estilo nenhum
     fora de `.pu-routines`. A alternativa era brigar por especificidade — aquele
     seletor tem sete `:not(.classe)`, ou seja (0,7,1), e um `button.nv-lg-h`
     (0,1,1) perde CALADO: o colchete voltaria e ninguém saberia por quê. */
  .nv-lg-tt{flex:none;font-size:var(--t-cap);letter-spacing:.12em;
    text-transform:uppercase;color:var(--muted)}
  /* `flex-basis:0`, não `auto`: com wrap ligado, um item de base `auto` QUEBRA
     para a fileira de baixo antes de encolher — e o resumo levava o caret junto,
     deixando o "▾" perdido no fim do texto em vez de na borda do card. */
  .nv-lg-rs{flex:1 1 0;min-width:0;font-size:var(--t-dat);line-height:1.45;
    overflow-wrap:anywhere}
  .nv-lg-k{flex:none;margin-left:auto;color:var(--p3)}

  /* ---- as linhas dentro do card ---------------------------------------------- */
  .nv-lg-b{display:flex;flex-direction:column;gap:10px;min-width:0;
    padding:10px 12px;border-top:1px solid var(--border)}
  .nv-lg-l{display:flex;gap:10px;align-items:flex-start;min-width:0}
  .nv-lg-x{flex:1 1 auto;min-width:0}
  .nv-lg-p{font-size:var(--t-dat);line-height:1.45;color:var(--text);
    overflow-wrap:anywhere}
  .nv-lg-x2{color:var(--muted);margin-left:8px;font-size:var(--t-cap)}
  /* a meta é SECUNDÁRIA de propósito: id do evento, hora e worker existem para
     conferência, não para leitura de panorama. Apagada, pequena, embaixo. */
  .nv-lg-m{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0;
    font-size:var(--t-cap);color:var(--p3);overflow-wrap:anywhere}
  /* o dump que ANTES era a tela inteira: agora é o que abre sob demanda. Nada foi
     apagado — só deixou de ser a primeira coisa que o olho encontra. */
  .nv-lg-d{margin-top:8px;padding:8px 10px;background:var(--bg);
    border:1px solid var(--border);font-size:var(--t-cap);color:var(--muted);
    line-height:1.65;overflow-wrap:anywhere}
  button.nv-lg-mais{font-size:var(--t-cap);color:var(--muted);padding:0 10px}

  /* ---- o glifo de estado ------------------------------------------------------
     Largura fixa em `em` para as linhas alinharem o texto mesmo com glifos de
     larguras diferentes (● ✓ ✗ ! ◌). */
  .nv-lg-i{flex:none;width:1.3em;text-align:center;font-weight:700;
    color:var(--lg-c,var(--muted));line-height:1.45}

  /* estado → cor. O "em andamento" é --accent porque base.css define essa tinta
     como "azul-navegação (links, run em andamento)"; o ledger antigo usava --p2,
     o mesmo âmbar da faixa de atenção, e assim rodar e avisar tinham a mesma cor.
     `--lg-c` é herdada pelos filhos, então o card define a sua e
     cada linha REDEFINE a dela: a marca da borda esquerda fala do grupo, o glifo
     de cada linha fala da linha. Um card "erro" com linhas verdes dentro continua
     dizendo as duas verdades ao mesmo tempo. */
  .nv-lg-c[data-e="ok"],.nv-lg-l[data-e="ok"]{--lg-c:var(--accent2)}
  .nv-lg-c[data-e="run"],.nv-lg-l[data-e="run"]{--lg-c:var(--accent)}
  .nv-lg-c[data-e="warn"],.nv-lg-l[data-e="warn"]{--lg-c:var(--p1)}
  .nv-lg-c[data-e="err"],.nv-lg-l[data-e="err"]{--lg-c:var(--p0)}
  .nv-lg-c[data-e="wait"],.nv-lg-l[data-e="wait"]{--lg-c:var(--muted)}
  .nv-lg-c[data-e="dim"],.nv-lg-l[data-e="dim"]{--lg-c:var(--p3)}

  /* o marcador do "durante": pulso lento, só no que está acontecendo agora.
     1.4s é o dobro do .nv-dot do cabeçalho — ali é um pisca de vida, aqui é um
     respiro que não pode disputar atenção com a leitura do texto ao lado. */
  .nv-lg-c[data-e="run"]>button.nv-lg-h>.nv-lg-i,
  .nv-lg-l[data-e="run"]>.nv-lg-i{animation:nv-lg-pulso 1.4s ease-in-out infinite}
  @keyframes nv-lg-pulso{50%{opacity:.3}}
  @media (prefers-reduced-motion:reduce){
    .nv-lg-c[data-e="run"]>button.nv-lg-h>.nv-lg-i,
    .nv-lg-l[data-e="run"]>.nv-lg-i{animation:none}
  }

  /* ---- o realce das palavras que decidem --------------------------------------
     Quatro papéis. Verde e vermelho são SEMÂNTICOS (deu certo / deu errado) e por
     isso usam a mesma tinta que a vista inteira já usa para isso. O neutro apagado
     é para ausência de dado (null, skipped) — ela precisa parecer ausência, não
     valor. E o número/sha ganha destaque por PESO, não por matiz: --accent é a cor
     de navegação do painel, e um "63.3" azul dentro de uma frase pareceria link
     clicável num drawer onde quase tudo o é. */
  .nv-lg b.lg-t{color:var(--accent2);font-weight:700}
  .nv-lg b.lg-f{color:var(--p0);font-weight:700}
  .nv-lg b.lg-n{color:var(--p3);font-weight:400}
  .nv-lg b.lg-q{color:var(--text);font-weight:700}

  /* ---- celular: mesmo desenho, bordas mais estreitas --------------------------
     O drawer já vira tela inteira em nova.css. Aqui só se paga a margem: com
     390px de largura, 12px de padding lateral em cada card comem 24 de 358. O
     alvo de 44px NÃO muda — ele é o piso, não o ideal. */
  @media (max-width:820px){
    .nv-lg{gap:8px}
    button.nv-lg-h{padding:8px 10px}
    .nv-lg-b{padding:10px}
    .nv-lg-l{gap:8px}
    /* a 390px o resumo em 22px não convive com o rótulo caps na mesma fileira:
       ele desce para a linha inteira, e o caret sobe para o canto ao lado do
       rótulo. Empilhar, nunca encolher a letra — a régua da vista. */
    .nv-lg-rs{flex:1 1 100%;order:3}
    .nv-lg-k{order:2}
  }