/* cockgit — nova-board.css
   A tela BOARD da /nova, segunda camada: o que a rolagem da PÁGINA cobrava dela.

   [QUEIXA DO DONO, 01/09/2026, ao vivo] "o menu BOARD está pouco usável pois a
   barra de rolagem fica gigante e para chegar em algum item ativo tem que descer
   tudo. ajustar". No mesmo dia o painel passou de 5 para 10 repos acompanhados —
   o desenho de 30/08 (uma swimlane colapsável por repo) continuou certo, mas
   virou uma coluna de dez blocos empilhados numa página que rolava inteira.

   As quatro trocas, e o motivo de cada uma:

     1. A ROLAGEM É DO CONTAINER, não da página (só no monitor: bloco
        `min-width:821px` no fim). `#nv` já tem `min-height:100vh`; com ele em
        flex-column, a tela ativa recebe a sobra exata da viewport e é o
        `.nv-bd-scroll` que rola por dentro. Consequência direta da queixa: a
        barra volta a ter tamanho de barra, e o cabeçalho de colunas fica na tela.
        NÃO vale para o celular — lá a página já rola num gesto só e um container
        rolável dentro de outro é hostil no toque (o `@media` do celular da
        primeira camada, acima, empilha as 6 colunas, e é ele que manda abaixo de 821px).
     2. O CABEÇALHO DE COLUNAS GRUDA (`position:sticky`) no topo desse container:
        rolar 30 lanes sem saber qual estação é qual coluna é o mesmo tipo de
        perda que o colapso resolveu na vertical.
     3. A BARRA DE ATALHOS (`.nv-bd-bar`), com o clique único de "o que precisa de
        mim" — click-and-go, sem digitar nada.
     4. O RETRATO POR ESTADO no cabeçalho da swimlane (`.ct` e os `.c`): o dono
        decide se abre sem precisar abrir.

   Arquivo próprio, e não mais CSS em nova.css, por uma razão medida: nova.css
   está a ~47,3KB e o teto por arquivo do painel é 48KB
   (backend/tests/test_frontend_esteira_por_repo_658.py). Mesmo precedente de
   nova-empresa.css e nova-tempo.css. Carregado DEPOIS de nova.css: mesma
   especificidade, a cascata resolve a favor daqui.
   [02/09/2026] Na QUEBRA POR ÁREA do nova.css, a PRIMEIRA camada do Board (as 6
   colunas, a swimlane, o card, a escala e o celular) veio para o TOPO deste
   arquivo, verbatim — o Board inteiro passa a morar aqui.

   Cor só por token de base.css — nenhum hex solto, como no resto da vista. */

  /* ================= a PRIMEIRA camada do Board (de nova.css, 02/09/2026) ============
     O gating, as 6 colunas, a swimlane, o CARD (`.nv-bd-card`, que Radar e Taskboard
     reusam), a escala de 2 metros e o celular — verbatim, ANTES da segunda camada,
     como o navegador já os lia. A mensagem do card (`.nv-ac-msg-it`) foi para
     nova-drawer.css, junto da família `.nv-ac-*`. ================================ */
  /* ---- [PR 9] tela Board: a engrenagem em 6 colunas (Backlog → … → No ar),
     uma swimlane COLAPSÁVEL por repo com peça. A grade rola no PRÓPRIO container
     (.nv-bd-scroll) — a página nunca ganha scroll horizontal. Card quente
     espera o dono; feito é registro riscado. Cores só por token de base.css.
     [30/08, pedido do dono] o cabeçalho da lane virou BOTÃO: caret + repo +
     "N peças" + "N esperam você". Fechada não esconde informação, DECLARA a que
     guarda — e a escolha por repo fica salva (cockgit-nova-board-lanes). ---- */
  #nv:not([data-tela="board"]) #nv-board{display:none}
  #nv-board{padding:0 16px 20px}
  #nv-board .nv-cap{margin:14px 0 10px}
  .nv-bd-scroll{overflow-x:auto}
  .nv-bd{min-width:1140px}
  .nv-bd-head{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
  .nv-bd-head span{font-size:var(--t-dat);letter-spacing:.06em;text-transform:uppercase;
    color:var(--muted);border-bottom:2px solid var(--border);padding-bottom:7px;
    display:flex;gap:8px;align-items:baseline}
  .nv-bd-head span small{margin-left:auto;color:var(--p3);font-size:var(--t-cap)}
  .nv-bd-head span.portao{border-bottom-color:var(--p1);color:var(--p1)}
  /* o cabeçalho da swimlane: botão de largura cheia, sem os [colchetes] de ação
     (é uma dobradiça, não um verbo) — o caret já diz aberto/fechado */
  button.nv-bd-lane-cap{display:flex;width:100%;gap:12px;align-items:baseline;
    text-align:left;border:0;border-bottom:1px solid var(--surface2);background:none;
    color:var(--muted);padding:12px 2px 8px;margin:16px 0 10px;cursor:pointer}
  button.nv-bd-lane-cap::before,button.nv-bd-lane-cap::after{content:none}
  button.nv-bd-lane-cap:hover{border-bottom-color:var(--accent);color:var(--accent)}
  .nv-bd-lane-cap .ca{flex:none;color:var(--p3);width:1em}
  .nv-bd-lane-cap .nm{font-weight:700;color:var(--text)}
  .nv-bd-lane-cap .n{color:var(--p3)}
  .nv-bd-lane-cap .q{margin-left:auto;flex:none;color:var(--p1);font-weight:700}
  .nv-bd-lane-cap.quente{border-bottom-color:var(--p1)}
  .nv-bd-cols{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
  .nv-bd-cols[hidden]{display:none}
  .nv-bd-col{display:flex;flex-direction:column;gap:8px;min-height:44px;min-width:0}
  .nv-bd-card{border:1px solid var(--border);background:var(--surface);padding:8px 10px;
    display:flex;flex-direction:column;gap:5px;color:var(--text);min-height:44px;
    min-width:0;text-align:left;font-size:var(--t-dat)}
  .nv-bd-card[role="button"],a.nv-bd-card,button.nv-bd-card{cursor:pointer}
  .nv-bd-card[role="button"]:hover,a.nv-bd-card:hover,button.nv-bd-card:hover,
  .nv-bd-card.sel{border-color:var(--accent)}
  .nv-bd-card.quente{border-color:var(--p1)}
  .nv-bd-card.bad{border-color:var(--p0)}
  .nv-bd-card.feito{opacity:.55}
  .nv-bd-card.feito .ti{text-decoration:line-through;text-decoration-color:var(--p3)}
  .nv-bd-card.mudo{opacity:.5;color:var(--muted);justify-content:center}
  .nv-bd-card .top{display:flex;gap:6px;align-items:baseline;min-width:0}
  .nv-bd-card .id{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .nv-bd-card .sz{margin-left:auto;flex:none;font-size:var(--t-cap);
    border:1px solid var(--border);padding:0 6px;color:var(--muted)}
  .nv-bd-card .sz.q{border-color:var(--p2);color:var(--p2)}
  .nv-bd-card .ti{font-size:var(--t-dat);line-height:1.35;overflow-wrap:anywhere}
  .nv-bd-card .foot{display:flex;gap:6px;align-items:baseline;font-size:var(--t-cap);
    color:var(--p3);flex-wrap:wrap;min-width:0}
  .nv-bd-card .papel{border:1px solid var(--border);padding:0 6px;color:var(--muted);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
  .nv-bd-card .papel.on{border-color:var(--accent2);color:var(--accent2)}
  .nv-bd-card .papel.voce{border-color:var(--p1);color:var(--p1);font-weight:700}
  .nv-bd-card .age{margin-left:auto;flex:none}
  /* [30/08] as AÇÕES no card ("os de ação não estão servindo"): o card abre o item,
     esta linha o resolve. Os botões saem do mesmo _nvAcBtn do rodapé do drawer. */
  .nv-bd-card .acts{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:2px}
  .nv-bd-foot{color:var(--p3);font-size:var(--t-cap);padding:8px 2px}

  /* ---- Board: as 6 colunas não encolhem, o container é que rola (já rolava). O piso
     fica em 1780 — 6 colunas de ~288px, que é o mínimo em que um card de 22px ainda é
     card e não uma tira de texto quebrado; e é o maior número que ainda cabe INTEIRO
     num monitor de 1920 (1904 − 32 de padding = 1872). A 1440 o container rola.
     [30/08] o que cresce dentro do card é o IDENTIFICADOR (#123 / PR #45) e a linha de
     papel/estação — ela dizia "orçamento · espera você" em caps de 15px, que é
     informação, não rótulo. O cabeçalho da swimlane vira leitura de 2 metros: nome do
     repo em --t-bod, contadores em --t-dat. ---- */
  .nv-bd{min-width:1780px}
  .nv-bd-head span{font-size:var(--t-cap)}
  button.nv-bd-lane-cap{font-size:var(--t-dat)}
  .nv-bd-lane-cap .nm{font-size:var(--t-bod)}
  .nv-bd-card{padding:12px 14px;gap:7px}
  .nv-bd-card .id{font-size:var(--t-bod)}
  .nv-bd-card .ti{line-height:1.3}
  .nv-bd-card .foot{font-size:var(--t-dat)}
  .nv-bd-card .sz{font-size:var(--t-cap)}

  /* ---- O CELULAR (preâmbulo em nova.css) ---- */
  @media (max-width:820px){
    #nv-board{padding:0 12px 20px}   /* bordas de volta: 12px em vez de 16 (era regra única das 5 telas) */

    /* --- BOARD: as 6 colunas viram seções empilhadas ---
       O `.nv-bd-scroll` continua sendo um container de rolagem (rede de segurança:
       se algo largo sobrar, ele rola AQUI DENTRO, com a sombra, em vez de empurrar
       a página) — mas com as colunas empilhadas nada mais precisa dele. */
    .nv-bd{min-width:0}
    /* o cabeçalho da swimlane era o último a furar a tela: `.nm` + "N peças" +
       "N esperam você" numa fileira que não quebrava davam 515px de mínimo, e o
       Board saía com 527px de largura num aparelho de 390. Ele passa a EMBRULHAR:
       nenhum dos três pedaços encolhe de letra, eles é que mudam de linha. */
    button.nv-bd-lane-cap{flex-wrap:wrap;row-gap:2px}
    .nv-bd-lane-cap .nm{min-width:0;overflow-wrap:anywhere}
    /* o cabeçalho de colunas vira LEGENDA que embrulha — os totais por estação
       continuam na tela, é o que impede o empilhamento de esconder o panorama */
    .nv-bd-head{display:flex;flex-wrap:wrap;gap:4px 16px}
    .nv-bd-head span{flex:0 0 auto;border-bottom:0;padding-bottom:0}
    .nv-bd-head span small{margin-left:4px}
    .nv-bd-cols{grid-template-columns:1fr;gap:0}
    .nv-bd-col{margin-top:16px}
    /* estação sem peça naquele repo não vira cabeçalho oco: some, e o total dela
       continua dito na legenda de cima */
    .nv-bd-col:empty{display:none}
    .nv-bd-col::before{content:attr(data-col);display:block;
      font-size:var(--t-cap);letter-spacing:.08em;text-transform:uppercase;
      color:var(--muted);border-bottom:1px solid var(--border);padding-bottom:6px}
    .nv-bd-col[data-col="Portão"]::before{color:var(--p1);border-bottom-color:var(--p1)}
  }

  /* ---- a barra de atalhos do Board -------------------------------------------
     Vive entre a legenda da tela e a grade; no bloco do monitor ela é a última
     peça FIXA antes do container que rola. O texto vivo (quantos rodando, quantos
     repos com peça) fica à direita, apagado: é panorama, não verbo. */
  .nv-bd-bar{display:flex;gap:8px 10px;align-items:center;flex-wrap:wrap;
    margin:0 0 10px}
  /* `max-width` + quebra: medido no harness, o [o que precisa de mim - N] saia
     com 385px num aparelho de 390 e empurrava a PAGINA para 397 de largura. A
     saida nunca e letra menor (escala de 2 metros, #44): o texto quebra. */
  .nv-bd-bar button{flex:0 1 auto;max-width:100%;white-space:normal;text-align:left}
  /* o atalho quente: mesmo vermelho de parada dos cards que ele vai buscar */
  button.nv-bd-vc.quente,button.nv-bd-vc.quente:hover{border-color:var(--p1);
    color:var(--p1);font-weight:700}
  /* sem item quente o botão não some — ele DIZ que não há para onde saltar.
     Botão que não resolve nada foi queixa do dono em 30/08; sumir sem explicar
     seria a outra metade do mesmo erro. */
  button.nv-bd-vc:disabled,button.nv-bd-vc:disabled:hover{color:var(--p3);
    border-color:var(--border);cursor:default;font-weight:400}
  .nv-bd-viv{margin-left:auto;color:var(--p3);font-size:var(--t-cap);
    letter-spacing:.06em;text-transform:uppercase}
  @media (max-width:820px){
    .nv-bd-viv{margin-left:0;flex:1 1 100%}
    /* EMPILHADO, o Backlog vai para o FIM. No celular as 6 colunas viram seções
       na ordem da esteira (nova.css), e a primeira delas é justamente a pilha do
       que NÃO está acontecendo: medido no harness, o card quente da primeira
       swimlane nascia a 1.682px do topo porque havia um Backlog inteiro na
       frente. A esteira continua legível — só a pilha parada muda de lugar, e o
       rótulo de cada seção continua dizendo qual estação é qual. */
    .nv-bd-col[data-col="Backlog"]{order:9}
  }

  /* ---- o retrato por estado no cabeçalho da swimlane -------------------------
     `.q` já existia (nova.css) com `margin-left:auto` para colar na direita;
     agora quem cola é o grupo `.ct`, e o chip volta a ser um chip. Cada estado
     tem a cor que já significa aquilo no resto da vista: --accent2 = andando,
     --p1 = espera você, --p3 = parado, --muted = registro. */
  .nv-bd-lane-cap .ct{margin-left:auto;display:flex;gap:4px 14px;
    flex-wrap:wrap;align-items:baseline;justify-content:flex-end}
  .nv-bd-lane-cap .ct .c{flex:0 0 auto;color:var(--p3);white-space:nowrap}
  .nv-bd-lane-cap .ct .c.rv{color:var(--accent2);font-weight:700}
  .nv-bd-lane-cap .ct .c.q{margin-left:0;color:var(--p1);font-weight:700}
  .nv-bd-lane-cap .ct .c.ft{color:var(--muted)}
  /* a lane que ANDA (sem nada esperando o dono) ganha um traço próprio: o olho
     precisa distinguir "vivo" de "quente" antes de ler o número */
  .nv-bd-lane-cap.viva{border-bottom-color:var(--accent2)}

  /* ---- o corte por estação: [+ N não mostradas] ------------------------------
     Tracejado de propósito: não é uma peça da fábrica, é a declaração de que há
     peça fora da vista. Corte silencioso é o que o handbook manda gritar. */
  .nv-bd-col>button.nv-bd-card.resto{border-style:dashed;min-height:44px}

  /* ============================ O MONITOR =====================================
     Só daqui para cima o Board rola dentro de si. Abaixo de 821px vale o bloco do
     celular da primeira camada (acima): as 6 colunas empilham e quem rola é a página. */
  @media (min-width:821px){
    /* `#nv` tem `min-height:100vh`; como flex-column ele distribui a sobra da
       viewport, e a tela do Board recebe exatamente "100vh menos o cabeçalho".
       Escopado por `data-tela="board"` de propósito: as outras cinco telas
       continuam em fluxo de bloco, sem risco de mudança de espaçamento (três
       sessões mexem no painel hoje). */
    /* o prefixo `html[data-vista="nova"]` nao e enfeite: e ele que a regra de
       nova.css usa para dizer `#nv{display:block}` — sem o mesmo prefixo aqui, a
       especificidade dela (1,1,1) ganha da minha (1,1,0) e o flex nunca vale. */
    /* E A ALTURA É DEFINIDA, não só um piso. `min-height:100vh` sozinho não
       segura nada: sem altura definida o `#nv` CRESCE com o conteúdo, o
       `flex:1 1 auto` do miolo nunca tem sobra negativa para encolher, e a página
       volta a rolar inteira — medido no harness antes desta linha (4.647px de
       rolagem de página com o flex já no lugar).
       Isto NÃO é a prisão de 30/08 (test_frontend_nova_scroll.py), por três
       motivos: (a) vale só na tela do Board e só no monitor; (b) não há
       `overflow:hidden` em lugar nenhum — nada é CORTADO, o que passa da conta
       rola no `.nv-bd-scroll`; (c) se a janela for baixa demais, o piso de 240px
       do container ganha e a página volta a rolar, que é a saída honesta em vez
       de espremer a grade numa fresta. */
    html[data-vista="nova"] #nv[data-tela="board"]{display:flex;flex-direction:column;
      height:100vh;height:100dvh}
    html[data-vista="nova"] #nv[data-tela="board"] .nv-top{flex:0 0 auto}
    #nv-board{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
    /* o container ganha o eixo vertical (o horizontal já era dele, nova.css).
       `min-height` é piso de segurança: numa janela baixa a grade encolhe até
       aqui e o resto volta a rolar na página, em vez de virar uma fresta. */
    .nv-bd-scroll{flex:1 1 auto;min-height:240px;overflow-y:auto;
      overscroll-behavior-y:contain}
    /* o cabeçalho de colunas gruda no topo do container. Fundo opaco porque as
       lanes passam por baixo — e porque as sombras de rolagem de nova.css são
       pintadas no próprio container. */
    .nv-bd-head{position:sticky;top:0;z-index:2;background:var(--bg);
      padding-top:2px}
    /* o rodapé explica a derivação inteira e por isso é comprido; num monitor de
       900px de altura ele estava comendo 86px dos ~490 que sobram para a grade.
       Clampado em ~2 linhas COM rolagem própria: nada é escondido — o texto
       continua inteiro, um gesto abaixo, e a grade recupera a altura. */
    .nv-bd-foot{flex:0 0 auto;max-height:3em;overflow-y:auto}
  }