/* cockgit — nova.css
vista /nova — a CASCA das sete telas: o #nv, o cabeçalho com as abas, os rótulos e
os estados compartilhados, os 4 skins, a ESCALA DE 2 METROS (os cinco tokens --t-*
e o cabeçalho) e a sombra de rolagem. O que veste CADA tela ou componente mora na
folha dela, carregada DEPOIS desta, na ordem em que os blocos estavam aqui:
nova-drawer.css o drawer do item: a gaveta lateral + o rodapé de resolução
nova-lancador.css o overlay [+ Tarefa]: as duas portas e os recentes
nova-planta.css a tela EMPRESA, 1ª camada: o open space (as ilhas + o corredor)
nova-empresa.css a tela EMPRESA, 2ª camada: a Sala de Vidro (e a mesinha)
nova-board.css a tela BOARD: as 6 colunas, a swimlane, o card (que Radar e
Taskboard reusam), a barra de atalhos e a rolagem do monitor
nova-radar.css a tela RADAR: os 6 medidores e "só o que pede olho"
nova-taskboard.css a tela TASKBOARD: as linhas por papel
nova-votacao.css a tela VOTAÇÃO: o backlog numerado e a mesa do poker
nova-tempo.css a tela TIMESHEET: o reloginho e a planilha
nova-clientes.css a tela CLIENTES: o cadastro em cards
nova-ledger.css o CORPO do drawer: a linha do tempo do ledger
[02/09/2026 — A QUEBRA POR ÁREA] Ordem do dono, ao vivo: *"quebra o nova.css antes
de estourar"*. Este arquivo estava a 47,5KB de um teto POR ARQUIVO de 48KB que NÃO
sobe (test_frontend_esteira_por_repo_658.py, o que impede um arquivo virar monólito)
e a próxima mudança não cabia. A quebra seguiu o padrão que o repo já tinha — uma
folha por tela/componente — MOVENDO blocos, não reescrevendo: cada um foi VERBATIM
para a folha da área, na MESMA ordem relativa (a tela → o que a escala de 2 metros
muda nela → o bloco do celular), e a ordem das */
a.nv-lnk{display:inline-flex;align-items:center;border:1px solid var(--border);
color:var(--muted);padding:5px 10px;min-height:24px}
a.nv-lnk::before{content:"[";margin-right:1px}
a.nv-lnk::after{content:"]";margin-left:1px}
a.nv-lnk:hover{border-color:var(--accent);color:var(--accent)}
.nv-cap{font-size:var(--t-cap);letter-spacing:.12em;text-transform:uppercase;
color:var(--muted);margin:14px 16px 10px}
/* estado de vazio honesto, compartilhado pelas 5 telas */
.nv-vazia{color:var(--p3);padding:8px 0}
/* cores de linha do feed e do ledger — papel semântico, sempre token */
.nv-ok{color:var(--accent2)} .nv-run{color:var(--p2)} .nv-warn{color:var(--p1)}
.nv-err{color:var(--p0)} .nv-mut{color:var(--muted)} .nv-dim{color:var(--p3)}
.nv-acc{color:var(--accent)}
/* o piscar compartilhado: o ponto do drawer (.nv-dot), a mesa acesa da Empresa
(.nv-pt) e o [falar] do lançador (#nv-la-mic) — um @keyframes só, na casca.
(Estava junto do drawer; @keyframes resolve por NOME, a posição não muda nada.) */
@keyframes nv-blink{50%{opacity:.25}}
/* [02/09] o drawer, o lançador e as cinco telas de observação moram nas folhas
próprias (a lista está no cabeçalho deste arquivo) — na ordem em que os blocos
estavam aqui: drawer · lançador · Empresa · Board · Radar · Taskboard · Votação. */
/* ---- [PR 7] skins: 4 identidades por data-skin NO #nv (JS + localStorage
cockgit-nova-tema — app-nova.js aplica no load, antes de o #app aparecer).
Cada bloco só REDEFINE os tokens de base.css que a vista consome: nenhum
componente muda, só a tinta. Os hex daqui são DEFINIÇÃO de token (a exceção
prevista à regra "sem hex solto" do §7), medidos: todo papel de TEXTO dá
≥4.5:1 sobre bg/surface/surface2. isa/papel/voo são deliberadamente um look
só — cores fixas, sem light-dark(); o data-theme claro/escuro do painel
segue mandando apenas no skin Terminal (ausência de data-skin). Fontes 100%
de sistema: nada externo entra no painel. */
#nv[data-skin]{color:var(--text)} /* o color do body resolveu no root; o skin re-tinge aqui */
/* [30/08] o ciclador [tema: X ▾] é o ÚNICO controle de tema do cabeçalho da /nova
— é ele que o dono chamou de "o comutador de tema" ao pedir as 5 telas (na tela
dele estava "tema: aviônica ▾"). O [tema] claro/escuro saiu da vista; o
mecanismo não: applyTheme segue escrevendo o data-theme no , que é
exatamente o que faz o skin `terminal` (ausência de data-skin) herdar claro ou
escuro — no padrão `auto`, do prefers-color-scheme do dispositivo. O botão de
claro/escuro continua existindo no legado (#themeBtn) e no verbo `tema` da
barra de comando. A tecla t continua ciclando as identidades (boot.js). */
/* cinza ISA — claro industrial SCADA: quase sem cor; ok/nominal é TINTA
(accent2 cinza, não brilha) e só warn/err acendem. Tudo em sans do sistema. */
#nv[data-skin="isa"]{color-scheme:light;
--bg:#c9cfd6;--surface:#dde2e7;--surface2:#cfd5db;--border:#9aa4ae;--ruleS:#5f6b76;
--text:#232a31;--muted:#4d5761;--accent:#1a567d;--accent2:#3f4a52;
--p0:#a3241c;--p1:#884100;--p2:#4a5866;--p3:#49535c;
--mono:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
font-family:var(--mono)}
/* papel de despacho — papel claro quente + tinta: serifa nos títulos,
Courier no dado (o --mono do skin). */
#nv[data-skin="papel"]{color-scheme:light;
--bg:#ece4d2;--surface:#f6f1e3;--surface2:#e7dec7;--border:#b9ac90;--ruleS:#7d7157;
--text:#2b2620;--muted:#67604f;--accent:#1f4e79;--accent2:#2e6b3f;
--p0:#9c2b23;--p1:#95460a;--p2:#7c5a00;--p3:#665d4b;
--mono:"Courier New",Courier,monospace;
font-family:var(--mono)}
#nv[data-skin="papel"] .nv-brand,#nv[data-skin="papel"] .nv-cap,
#nv[data-skin="papel"] .nv-la-head,#nv[data-skin="papel"] .nv-dr-head .t{
font-family:Georgia,"Times New Roman",serif}
/* aviônica — cabine escura azulada: ciano de instrumento; mono padrão fica */
#nv[data-skin="voo"]{color-scheme:dark;
--bg:#06090d;--surface:#0b1117;--surface2:#121b25;--border:#274052;--ruleS:#4c7292;
--text:#d9e9f4;--muted:#8fa7b8;--accent:#35c4dc;--accent2:#27d17c;
--p0:#ff5057;--p1:#ffb02e;--p2:#e3c34c;--p3:#7d93a5}
/* ================= ESCALA DE 2 METROS (decisão do dono, 29/08/2026) =================
O protótipo aprovado (tres-prototipos-2metros.html) tinha `body{font-size:26px}`;
o que subiu ao ar herdou a escala do painel antigo — 13px de --t-dat, 13px de body.
O dono lê o painel de ~2 metros, num monitor grande: "corta sem dó, base 24-28px".
Este bloco paga essa diferença.
COMO, sem tocar no legado: mesma técnica dos skins do PR 7 — o #nv REDEFINE para si
os 5 degraus tipográficos de base.css. Nenhuma regra de componente muda de token;
`/legado-avancada` não tem #nv na cascata e segue em 11/13/15/21/34.
O `font-size` no próprio #nv é a peça que faltava: `body{font-size:var(--t-dat)}` mora
em :root, resolve 13px ANTES do #nv, e todo texto sem tamanho próprio (inclusive
`button{font:inherit}`) herdaria dali. Sem esta linha, redefinir os tokens deixaria
metade da vista pequena.
O que vem depois é a CONSEQUÊNCIA da letra maior: com fonte grande cabe menos, então
grade, altura mínima e largura de coluna são recalculadas tela a tela. O princípio é
o do dono — menos itens grandes, nunca muitos itens pequenos. Nada é cortado em
silêncio: o que não cabe sai como "[e mais N]" (Radar) ou como swimlane fechada que
DIZ quantas peças guarda (Board), e board/taskboard rolam no PRÓPRIO container.
── 30/08/2026: a folga do enxugamento virou LETRA MAIOR, não mais item ──────────
Reforço do dono ao pedir as 5 telas: "LETRAS GRANDES", e a escala do PR #44 é
REQUISITO DURO — nenhum degrau desce. Com metade das telas, sobrou espaço; a regra
de gasto é a dele: quem é protagonista cresce, e caps de 15px param de carregar
informação de leitura (viram só rótulo curto). O que mudou aqui:
· --t-dis 60 → 72px — o número do Radar em 3 colunas de ~450px pedia o mostrador
cheio; a 60px ele nadava na caixa.
· as ABAS e os botões da direita sobem de --t-cap para --t-dat — eram 10 abas +
2 links + 3 botões espremidos em 15px; com 5 abas e 2 botões ([+ Tarefa] e
[tema: X ▾]) o cabeçalho a 22px cabe numa fileira só. A marca volta a --t-bod
pelo mesmo motivo. O rótulo do ciclador varia com a identidade escolhida, e a
conta usa a mais longa ("tema: cinza ISA ▾"). Se um dia voltar um 3º botão
aqui, o cabeçalho quebra em duas fileiras a 1440 — o .nv-top é flex-wrap, ou
seja, ele DOBRA em vez de cortar ou encolher a letra. É a degradação certa,
mas custa ~60px do panorama: prefira tirar um botão a diminuir a fonte.
· onde o caps de 15px carregava FRASE (o "papel/estação" do card do Board, o
subtítulo do medidor do Radar, o que a mesa FAZ na Empresa), ele vira --t-dat
ou --t-bod. Caps 15px fica com idade, rodapé e rótulo de uma palavra. */
/* [02/09] as CONSEQUÊNCIAS por tela deste bloco (grade, altura mínima, largura de
coluna, a mesa da Empresa, o lançador e o drawer) moram na folha de cada área,
no fim dela — aqui ficam os TOKENS e o cabeçalho, que são de todas. */
#nv{
--t-cap:15px; /* rótulo caps, idade, rodapé — era 11px */
--t-dat:22px; /* o DADO: título de card, célula, chip — era 13px */
--t-bod:27px; /* protagonista: nº do PR, nome do repo, manchete — era 15px (protótipo: 26-27px) */
--t-sec:34px; /* rótulo de sala/papel/posição, em --display — era 21px */
--t-dis:72px; /* número de mostrador (Radar, voto da mesa) — era 34px, depois 60px */
font-size:var(--t-dat);
}
/* CHROME modesto, CONTEÚDO grande — mas com 5 abas o cabeçalho deixou de ser o
gargalo: as abas SÃO navegação que ele lê de 2 metros, então sobem para --t-dat.
Os rodapés e as dicas seguem em caps. */
#nv .nv-top{font-size:var(--t-cap);padding:10px 16px;gap:10px 14px}
.nv-brand{font-size:var(--t-bod)}
.nv-brand em{font-size:var(--t-dat)}
.nv-nav button,.nv-links button{font-size:var(--t-dat);padding:8px 14px}
a.nv-lnk{font-size:var(--t-dat);padding:8px 12px}
/* alvo de toque acompanha a escala: 44px em TODO controle da vista, em qualquer
ponteiro (base.css só dava isso no coarse/estreito) — a 2 metros o dedo e o
mouse pedem o mesmo alvo. */
#nv button,#nv a.nv-lnk{min-height:44px}
/* MEDIDO no harness headless: marca (326px, dos quais 168 são o "@iaiabrasil:~")
+ 5 abas (738) + [+ Tarefa] e [tema: X ▾] (431) + gaps e padding = 1555px. A
1920 sobra (1904 de área útil, 1 fileira); a 1440 falta (1424), e o .nv-top é
flex-wrap: ele DOBRA em duas fileiras e come ~60px do panorama que a vista
existe para dar. A saída NÃO é encolher a letra — é tirar item, e o item mais
dispensável do cabeçalho é a DECORAÇÃO da marca: "@iaiabrasil:~" não informa
nada que o resto da tela já não diga, enquanto "cockpit" fica. 1555−168 = 1387,
e o cabeçalho volta a uma fileira só. */
@media (max-width:1600px){ .nv-brand em{display:none} }
/* ---- indicação de que há MAIS conteúdo para o lado ---------------------------
Board e Taskboard rolam no PRÓPRIO container por desenho (as 6 colunas não
encolhem). Um container que rola sem dizer que rola é conteúdo escondido: a
barra some no toque, e no mouse ela só aparece no hover. As quatro camadas
abaixo são a técnica de "sombra de rolagem" — as duas primeiras (`local`)
andam JUNTO com o conteúdo e tapam as duas de baixo (`scroll`, presas à
caixa) enquanto o container está encostado naquela ponta. Resultado: a
sombra aparece SÓ do lado em que ainda há conteúdo, sem uma linha de JS. */
.nv-bd-scroll,.nv-tb-scroll,.nv-ts-scroll,.nv-nav,.nv-vt-repos{
--nv-fundo:var(--bg);
background:
linear-gradient(to right,var(--nv-fundo) 60%,transparent) 0 0/26px 100% no-repeat local,
linear-gradient(to left, var(--nv-fundo) 60%,transparent) 100% 0/26px 100% no-repeat local,
linear-gradient(to right,var(--ruleS),transparent) 0 0/12px 100% no-repeat scroll,
linear-gradient(to left, var(--ruleS),transparent) 100% 0/12px 100% no-repeat scroll;
}
/* a fileira de abas mora DENTRO do , que mostrador.css pinta de
--surface: a camada que tapa a sombra tem de ser a cor de trás dela, senão a
"tampa" vira uma mancha escura na ponta da fileira. */
.nv-nav{--nv-fundo:var(--surface)}
/* ============================ O CELULAR ======================================
[QUEIXA DO DONO, 30/08/2026] "tem que rolar mobile também — todas as telas".
O #46 tirou a prisão de 100vh e a página passou a ROLAR; faltava CABER. As
medidas do harness (emulação de dispositivo por CDP, 390×844 · 360×800 ·
412×915) mostraram três coisas, nesta ordem de gravidade:
1. SCROLL LATERAL DA PÁGINA a 390 e 360 — a mesa da Empresa nascia com 360px
fixos numa sala de 324 e empurrava o documento para 393px. Corrigido no
`min(360px,100%)` lá em cima; é a única falha que valia para TODA tela.
2. CABEÇALHO DE 361px — 43% de um iPhone gastos em chrome, porque as 5 abas
de 22px embrulhavam em quatro fileiras. Aqui elas viram UMA fileira que
rola de lado, com a sombra dizendo que há mais. A saída NUNCA é letra
menor: a escala do #44 é requisito duro do dono e nenhum degrau desce
neste bloco.
3. BOARD E TASKBOARD com 1780px e 1560px de grade dentro de uma janela de
358 — cinco telas de rolagem lateral por swimlane. No celular as colunas
viram SEÇÕES EMPILHADAS, cada uma com o nome que a grade dava; coluna
vazia some, e o cabeçalho vira legenda que continua declarando o total de
cada estação. Empilhar ganhou da fileira rolável porque a página já rola
na vertical: um gesto só, e o card sai com a largura inteira da tela em
vez de 288px.
O que NÃO se faz aqui: encolher letra, esconder informação para caber, ou
travar altura. O que não cabe empilha ou colapsa com contador honesto. */
/* [02/09] do bloco do celular ficou AQUI só o cabeçalho, que é de todas as telas;
o padding de 12px, o empilhamento do Board e do Taskboard, a coluna única do
Radar e da Votação, o drawer e o lançador em tela inteira moram no bloco
@media (max-width:820px) da folha de cada área. */
@media (max-width:820px){
/* --- cabeçalho em 3 fileiras: (marca + [+ Tarefa]) · abas · [tema] ---
`display:contents` dissolve o .nv-links: os dois botões viram filhos diretos
do .nv-top e ganham `order` próprio. Medido a 390: marca 142 + [+ Tarefa]
161 = 317 numa fileira de 358 — cabe; as abas somam 738 e por isso rolam;
o [tema: cinza isa ▾] tem 264 e fica na terceira. */
#nv .nv-top{padding:8px 12px;gap:8px 10px}
.nv-brand{order:1;flex:0 0 auto}
.nv-links{display:contents}
#nv-la-btn{order:2;margin-left:auto;flex:0 0 auto}
.nv-nav{order:3;flex:1 0 100%;flex-wrap:nowrap;overflow-x:auto;
overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding-bottom:6px}
.nv-nav button{flex:0 0 auto;scroll-snap-align:start}
#nv-skin-btn{order:4;flex:0 0 auto}
}
/* O [?] DO MANUAL (02/09) — "PAINEL É PARA OBSERVAR" (ordem do dono). Os rodapés
de "como ler isto" de BOARD, RADAR, EMPRESA, TASKBOARD, TIMESHEET e VOTAÇÃO
comiam até 601px no celular, todo render, para quem já sabe ler. O texto NÃO foi
apagado — foi para trás de um [?] fechado por padrão. É nativo, o MESMO
mecanismo dos chips da Sala de Vidro (.nv-sv-gr): teclado, foco e leitor de tela
de graça. Alvo 44x44; o rótulo vive no aria-label, porque "?" não diz o que abre;
sem transição, então prefers-reduced-motion não tem o que desligar. */
.nv-manual{margin:0;padding:0}
.nv-manual>summary{list-style:none;cursor:pointer;
display:inline-flex;align-items:center;justify-content:center;
min-width:44px;min-height:44px;
font-size:var(--t-cap);font-weight:700;color:var(--p2);
border:1px solid var(--border);border-radius:var(--r-xs,6px);
background:transparent;user-select:none}
.nv-manual>summary::-webkit-details-marker{display:none}
.nv-manual>summary::marker{content:""}
.nv-manual>summary:hover{color:var(--text);border-color:var(--accent)}
.nv-manual[open]>summary{color:var(--text);border-color:var(--accent)}
/* aberto, o texto entra logo abaixo do botão e mantém o mesmo tom de rodapé
que ele já tinha na folha da tela — a única mudança é quando ele aparece */
.nv-manual[open]>div{margin-top:2px}