/* cockgit — nova-card.css
   vista /nova · o CARD ÚNICO (.nv-card, montado por App.nvCard em app-nova-card.js),
   a GRADE que o empilha (.nv-cards), a ESCALA DE MESA e os ÍCONES (.nv-ic).

   [22/09/2026] PR 1 da reforma cards-only (14 PRs aprovados pelo dono). A auditoria
   achou sete componentes com cara de card, cada um com a sua borda, o seu padding e o
   seu jeito de dizer estado. Esta folha é o card que os substitui, tela a tela.

   AS REGRAS DO CARD (decisões do dono, 22/09):
     · o card INTEIRO é o alvo do toque (≥44px) — e por isso não leva colchete: o
       colchete fica só em botão de AÇÃO (DESIGN §6);
     · título curto, UM número ou estado, cor + ícone de estado; o detalhe só ao
       tocar — expande no lugar (<details>) ou abre a folha que já existe (drawer);
     · estado pelo FUNDO TINGIDO e pelo ÍCONE, nunca por borda lateral (side-stripe);
       cor vem de --st-*-ink / --st-*-tint (base.css), nunca de --p0..p3, que ficam
       só para o chip de prioridade;
     · recuo por CAMADA, nunca por opacity (DESIGN §2): card sem sinal vira chão;
     · nada rola por dentro: o card aberto toma a linha inteira e a PÁGINA rola.

   Entra logo depois de nova.css (a ordem das <link> é a cascata — FRONTEND §3.1):
   nenhuma folha de tela deve precisar sobrescrever o card. Cor só por token. */

  /* ---- a GRADE: empilha sozinha e dá uma coluna no celular sem @media ---- */
  .nv-cards{--nv-card-min:190px;
    display:grid;grid-template-columns:repeat(auto-fit,minmax(min(var(--nv-card-min),100%),1fr));
    gap:10px;align-items:start;min-width:0;font-size:var(--t-dat)}
  .nv-cards.itens{--nv-card-min:300px}

  /* ---- DUAS DISTÂNCIAS (decisão D2 do dono, 22/09) ------------------------------
     A escala de 2 metros (15/22/27/34/72, bloco #nv de nova.css) vale a partir de
     1600px — o monitor grande que ele lê de longe, 6 a 8 cards por dobra. Abaixo
     disso é a ESCALA DE MESA: o notebook, lido de perto, 12 a 16 cards por dobra.
     Mesma técnica da escala de 2 metros e a regra da §9 do DESIGN: os cinco tokens
     são REESCALADOS dentro da grade, nenhum sexto degrau nasce. Só a grade muda —
     as telas que ainda não migraram seguem na escala de 2 metros até o PR delas. */
  @media (max-width:1599.98px){
    .nv-cards{--t-cap:13px;--t-dat:15px;--t-bod:18px;--t-sec:24px;--t-dis:48px}
  }
  @media (min-width:1600px){
    .nv-cards{--nv-card-min:300px;gap:14px}
    .nv-cards.itens{--nv-card-min:420px}
  }

  /* ---- o CARD ---- */
  .nv-card{--_ink:var(--muted);--_fundo:var(--surface);
    display:block;min-width:0;margin:0;padding:0;text-align:left;font:inherit;
    color:var(--text);background:var(--_fundo);
    /* régua estrutural a 3:1: a borda é o ÚNICO delimitador do card (DESIGN §2) */
    border:1px solid var(--ruleS);border-radius:0}
  /* o ESTADO: -ink pinta ícone e número; só o que pede olho tinge o fundo e a borda
     (Regra do Sinal — ok e rodando não são alarme, informam pelo ícone) */
  .nv-card[data-estado="ok"]{--_ink:var(--st-ok-ink)}
  .nv-card[data-estado="run"]{--_ink:var(--st-run-ink)}
  .nv-card[data-estado="info"]{--_ink:var(--st-info-ink);--_fundo:var(--st-info-tint)}
  .nv-card[data-estado="warn"]{--_ink:var(--st-warn-ink);--_fundo:var(--st-warn-tint);border-color:var(--_ink)}
  .nv-card[data-estado="err"]{--_ink:var(--st-err-ink);--_fundo:var(--st-err-tint);border-color:var(--_ink)}
  /* chão: parado, ou peso quieto — transparente, a régua segura a forma */
  .nv-card[data-estado="idle"]{--_ink:var(--st-idle-ink);--_fundo:var(--st-idle-tint)}
  .nv-card[data-peso="quieto"]:not([data-estado="warn"]):not([data-estado="err"]){--_fundo:transparent}

  /* o miolo: ícone · título · (seta) em cima; o número; a linha de contexto; a barra */
  .nv-card-c{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-areas:"ic ti fim" "v v v" "sub sub sub" "bar bar bar";
    align-items:center;gap:0 8px;padding:10px 12px;min-height:44px}
  /* sem row-gap: linha vazia (sem sub, sem barra) não pode deixar buraco embaixo */
  .nv-card .nv-card-ic{grid-area:ic;color:var(--_ink)}
  .nv-card-ti{grid-area:ti;min-width:0;font-family:var(--display);font-stretch:87.5%;
    font-size:var(--t-dat);line-height:1.25;color:var(--muted);overflow-wrap:anywhere}
  .nv-card .nv-card-mais{grid-area:fim;color:var(--muted)}
  .nv-card-v{grid-area:v;font-family:var(--display);font-stretch:87.5%;font-weight:600;
    font-size:var(--t-dis);line-height:1;font-variant-numeric:tabular-nums;
    color:var(--text);overflow-wrap:anywhere;margin-top:8px}
  .nv-card[data-estado]:not([data-estado="info"]) .nv-card-v{color:var(--_ink)}
  .nv-card-v small{font-size:var(--t-sec);font-weight:400;color:var(--muted);margin-left:2px}
  .nv-card-sub{overflow-wrap:anywhere;white-space:normal;grid-area:sub;min-width:0;font-size:var(--t-dat);line-height:1.3;color:var(--muted);margin-top:4px}
  .nv-card-bar{grid-area:bar;margin-top:8px;--c:var(--_ink)}
  .nv-card[data-peso="quieto"] .nv-card-v{font-size:var(--t-sec)}
  .nv-card[data-peso="quieto"] .nv-card-v small{font-size:var(--t-bod)}

  /* ITEM: uma linha — ícone · identificador · estado curto · seta; contexto embaixo */
  .nv-card[data-var="item"] .nv-card-c,.nv-card[data-var="alerta"] .nv-card-c{
    grid-template-columns:auto minmax(0,1fr) auto auto;
    grid-template-areas:"ic ti v fim" ". sub sub sub" "bar bar bar bar"}
  .nv-card[data-var="item"] .nv-card-ti{font-family:var(--mono);font-stretch:normal;
    font-weight:700;color:var(--text)}
  .nv-card[data-var="item"] .nv-card-v,.nv-card[data-var="alerta"] .nv-card-v{
    font-family:var(--mono);font-stretch:normal;font-size:var(--t-dat);font-weight:700;margin-top:0}
  .nv-card[data-var="item"] .nv-card-v small,.nv-card[data-var="alerta"] .nv-card-v small{font-size:var(--t-cap)}
  /* ALERTA: a frase É o título, maior; o fundo tinge mesmo sem estado declarado */
  .nv-card[data-var="alerta"]{--_fundo:var(--st-info-tint)}
  .nv-card[data-var="alerta"][data-estado="warn"]{--_fundo:var(--st-warn-tint)}
  .nv-card[data-var="alerta"][data-estado="err"]{--_fundo:var(--st-err-tint)}
  .nv-card[data-var="alerta"][data-estado="ok"]{--_fundo:var(--st-ok-tint)}
  .nv-card[data-var="alerta"][data-estado="run"]{--_fundo:var(--st-run-tint)}
  .nv-card[data-var="alerta"] .nv-card-ti{font-family:var(--mono);font-stretch:normal;
    font-size:var(--t-bod);font-weight:700;color:var(--text)}

  /* PROTAGONISTA: duas colunas quando há duas — nunca no celular, onde o span
     criaria uma coluna implícita e a página ganharia rolagem lateral */
  @media (min-width:821px){ .nv-card[data-peso="protagonista"]{grid-column:span 2} }

  /* ---- o TOQUE: o card inteiro é o alvo ---- */
  a.nv-card,button.nv-card,.nv-card>summary{cursor:pointer}
  #nv button.nv-card{display:block;width:100%;min-height:44px;padding:0;color:var(--text);
    background:var(--_fundo);border-color:var(--ruleS)}
  #nv button.nv-card[data-estado="warn"],#nv button.nv-card[data-estado="err"]{border-color:var(--_ink)}
  /* card não é verbo: sem os [colchetes] que base.css põe em todo <button> (o #nv
     vence a cadeia de :not() de lá por especificidade de id) */
  #nv button.nv-card::before,#nv button.nv-card::after{content:none}
  a.nv-card:hover,#nv button.nv-card:hover,.nv-card:has(>summary:hover){border-color:var(--accent)}
  .nv-card>summary{display:block;list-style:none}
  .nv-card>summary::-webkit-details-marker{display:none}
  .nv-card>summary::marker{content:""}
  .nv-card>summary:focus-visible,a.nv-card:focus-visible,#nv button.nv-card:focus-visible{
    outline:2px solid var(--accent2);outline-offset:-4px}
  /* aberto: toma a linha inteira da grade — o detalhe tem largura para ler, e a
     página (não o card) é que cresce */
  .nv-card[open]{grid-column:1/-1;border-color:var(--accent)}
  .nv-card[open] .nv-card-mais{transform:rotate(180deg)}
  .nv-card-mais{transition:transform .15s cubic-bezier(.25,1,.5,1)}
  @media (prefers-reduced-motion:reduce){ .nv-card-mais{transition:none} }
  .nv-card-det{padding:10px 12px 12px;border-top:1px solid var(--border);
    font-size:var(--t-dat);line-height:1.45;color:var(--text);
    display:flex;flex-direction:column;gap:10px;min-width:0;overflow-wrap:anywhere}
  .nv-card-det p{margin:0;max-width:75ch}
  .nv-card-det .nv-card-meta{color:var(--muted)}
  .nv-card-acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
  .nv-card-det .nv-card-acts button{min-height:44px;padding:6px 16px;font-size:var(--t-dat)}
  /* [23/09] "detalhes técnicos ▾" (App.nvTec): a gaveta FECHADA dos gestos de
     engenheiro. O rótulo, o alvo de 44px e a seta vêm de `.nv-ac-tec`
     (nova-dono.css) — a mesma gaveta do drawer de PR. Aqui só o conteúdo. */
  .nv-tec{min-width:0}
  .nv-tec>summary{list-style:none}
  .nv-tec>summary::-webkit-details-marker{display:none}
  .nv-tec-c{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center}

  /* ---- os ÍCONES (sprite de App.nvIcone): traço em currentColor, canto vivo ---- */
  .nv-ic{width:1.2em;height:1.2em;flex:none;display:inline-block;vertical-align:-.2em;
    fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:square;stroke-linejoin:miter}
  .nv-card .nv-card-ic{width:1.35em;height:1.35em}