/* cockgit — base.css
tokens de tema (claro/escuro), reset, tipografia e controles
Recortado de frontend/index.html no refactor B3. A ORDEM dos no index.html
É a cascata: mover regra entre arquivos, ou reordenar os , muda o resultado
na tela. Contrato visual em DESIGN.md. */
:root{
/* auto: segue o dispositivo. light-dark(claro, escuro) — os dois temas num lugar só. */
color-scheme: light dark;
/* Direção "Mostrador": preto-vidro de cabine noturna; claro = o mesmo instrumento sob luz do dia.
Todo par texto/fundo abaixo foi medido: nenhum abaixo de 4.5:1 nos dois temas. */
--bg: light-dark(#f1f4f8, #0b0f14);
--surface: light-dark(#ffffff, #121821);
--surface2:light-dark(#e7ecf3, #18202b);
--border: light-dark(#dce3ec, #232d3a);
/* régua estrutural: quando a borda é o ÚNICO delimitador, ela precisa de 3:1 de componente.
A --border de 1px fica em ~1.4:1 e serve só como textura interna. */
--ruleS: light-dark(#84909e, #5e6d82);
--text: light-dark(#141a22, #dce6f0);
--muted: light-dark(#596473, #8fa0b3);
/* azul-navegação (links, run em andamento) e verde-presença (ação primária, vivo) */
--accent: light-dark(#0b5fb0, #63acee);
--accent2: light-dark(#177230, #4bbf6b);
/* [31/08] roxo-plantão: a Sala de Descompressão (o Psicólogo dos Agentes) na tela
Empresa. Ele não é prioridade nem estado de peça — usar --p1/--p2 ali faria a
sala de descanso parecer alerta. Medido nos 2 temas sobre --bg e --surface:
ambos acima de 4.5:1 como texto. */
--roxo: light-dark(#6b3fa0, #b39dfb);
/* crachá de repositório: chip próprio, themeável */
--repo-bg: light-dark(#dbe4f1, #24334a);
--repo-ink:light-dark(#2a3f6b, #b9cbe4);
/* rampa de prioridade: mesma semântica nos 2 temas; valores por tema pra manter AA como texto.
P3 subiu de #7c7f6e/#71816f, que falhava AA (3.47:1 / 3.97:1) sobre surface2. */
--p0:light-dark(#b3261e, #ef6a5a); --p1:light-dark(#8f4400, #e8924a);
--p2:light-dark(#775c00, #cfa63c); --p3:light-dark(#5a6472, #8b9aaa);
/* terminal: canto vivo em tudo — os papéis de raio continuam, zerados */
--r-xs:0; --r-ctl:0; --radius:0; --r-float:0; --r-chip:0;
--mono:ui-monospace,"Cascadia Code","SF Mono",Consolas,"Liberation Mono",monospace;
/* grotesca condensada de sinalização técnica: rótulo de painel, postura e leitura de gauge.
Só em rótulo — todo DADO continua em mono. */
--display:"Bahnschrift","DIN Alternate","Roboto Condensed",var(--mono);
/* escala tipográfica: 5 degraus. Eram 17 tamanhos, nove deles abaixo de 12px. */
--t-cap:11px; --t-dat:13px; --t-bod:15px; --t-sec:21px; --t-dis:34px;
}
/* override manual: força um tema e ignora o dispositivo */
:root[data-theme="light"]{ color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
*{box-sizing:border-box}
body{margin:0;font-family:var(--mono);font-variant-numeric:tabular-nums;
background:var(--bg);color:var(--text);line-height:1.55;font-size:var(--t-dat)}
a{color:var(--accent);text-decoration:none}
button{font:inherit;cursor:pointer;border:1px solid var(--border);background:transparent;
color:var(--muted);border-radius:var(--r-ctl);padding:5px 10px;min-height:24px;min-width:24px}
button:hover{border-color:var(--accent2);color:var(--text)}
/* idioma do terminal: ação = [colchetes]. Exceções: ícones, tiles-contador e links discretos.
O colchete é o ÚNICO sinal de "isto clica" — então herda a cor do rótulo. Antes ele saía
em muted a 60%, ou seja 2.75:1 no escuro e 2.24:1 no claro: o sinal de affordance era a
coisa mais apagada da tela. */
button:not(.theme-btn):not(.tr-count):not(.pu-x):not(.stepstoggle):not(.susp):not(.lnk):not(.seg-btn)::before{
content:"[";margin-right:1px}
button:not(.theme-btn):not(.tr-count):not(.pu-x):not(.stepstoggle):not(.susp):not(.lnk):not(.seg-btn)::after{
content:"]";margin-left:1px}
/* [F] a11y: anel de foco visível (2px verde-prompt) em TODO controle interativo, nos 2 temas —
botões, links, inputs, strips, chips clicáveis e células de anunciador acesas. */
:focus-visible{outline:2px solid var(--accent2);outline-offset:2px}
.pu-strip:focus-visible{outline-offset:-2px} /* o rack tem overflow:hidden — anel pra dentro */
/* ===== Direção "Mostrador" (B) · camada de rótulo, tecla e toque =====
Rótulo em grotesca condensada de sinalização; todo DADO segue em mono. */
.mfd-tile-h,.cmd-zone,.pu-post .pl,.pu-post .pv{font-family:var(--display)}
.pu-post .pv{font-stretch:87.5%}
/* [1]..[9] nunca foram decoração: são a tecla que expande o painel (MFD.toggle).
Então param de usar o colchete de ação e viram tecla, com forma própria. */
.mfd-tile-h .mfd-k{margin-left:auto;flex:none;font-weight:700;font-family:var(--mono);
color:var(--muted);border:1px solid var(--border);padding:0 5px;line-height:1.6}
/* alvo confortável no toque. O mínimo de 24px passa raspando a WCAG 2.2 e erra o
confortável; no dedo, 44px. O header já é flex-wrap, então ele cresce sem quebrar. */
@media (pointer:coarse),(max-width:820px){
button{min-height:44px}
.pu-fchip,.pu-strip,.tr-count{min-height:44px}
}
button.primary{background:transparent;border-color:var(--accent2);color:var(--accent2);font-weight:700}
button.primary:hover{background:color-mix(in oklab,var(--accent2) 12%,transparent)}
/* deploy com drift (issue #104): destaca o botão quando há mergeado-não-publicado */
#deployBtn.drift{background:transparent;border-color:var(--p1);color:var(--p1)}
#deployBtn .count{background:rgba(0,0,0,.22);border-radius:var(--r-chip);padding:0 6px;margin-left:4px;font-weight:600}
.drift-list{margin:6px 0 0;padding:0;list-style:none;max-height:190px;overflow:auto}
.drift-list li{font-size:var(--t-dat);padding:3px 0;border-top:1px solid var(--border)}
.drift-list .pr{color:var(--muted)}
/* seletor de projeto no modal de deploy (multi-projeto) */
.deploy-targets{display:flex;gap:6px;flex-wrap:wrap}
.deploy-targets button{padding:4px 12px}
button.ghost{background:transparent}
.theme-btn{display:inline-flex;align-items:center;justify-content:center;padding:6px 9px;line-height:0}
.theme-btn svg{display:block}
input,textarea,select{font:inherit;background:var(--bg);color:var(--text);
border:1px solid var(--border);border-radius:var(--r-ctl);padding:8px 10px;width:100%}
.hidden{display:none!important}
.row{display:flex;gap:10px;align-items:center}
.muted{color:var(--muted)}
/* [F] família única de chip: uma métrica pra todo rótulo compacto — raio pill,
10.5px/600, padding 1px 8px. As variantes mudam SÓ cor/fundo (Regra do Sinal). */
.pill,.prio,.repo-badge,.cyc-badge,.tr-disp,.tr-flag,.cmd-zone .n,.pu-bay-h .bc{
display:inline-block;padding:1px 8px;border-radius:var(--r-chip);
font-size:var(--t-cap);font-weight:600;line-height:1.7;white-space:nowrap;
border:1px solid transparent}
.pill{border-color:var(--border)}
.pill.model-badge{background:var(--surface2);color:var(--muted)}
/* [#325] pill discreta de lane (area:*): tinta de acento sutil, legível nos 2 temas */
.pill.area{background:color-mix(in oklab,var(--accent) 12%,var(--surface2));color:var(--muted);
border-color:color-mix(in oklab,var(--accent) 28%,var(--border))}
/* ---- login ---- */
#login{min-height:100vh;display:flex;align-items:center;justify-content:center}
#login .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-float);
padding:32px;width:340px;text-align:center}
#login .brand{font-size:var(--t-sec);justify-content:center;margin:0 0 4px}
#login p{margin:0 0 18px}
/* ---- casca COMPARTILHADA (01/09/2026) ----
Estas regras vieram de mostrador.css quando a vista de legado passou a carregar
sob demanda (docs/FRONTEND.md §9). Elas NÃO são do legado: o cartão de login usa
o cursor da marca; o `modal()`/`closeModal()` de helpers.js desenha `.overlay >
.modal` e a /nova o abre no Timesheet (custo e valor por hora, nota da linha); o
`.toast` é a resposta das AÇÕES do drawer (app-nova-acoes.js). Deixá-las no
mostrador faria a /nova abrir modal sem moldura e toast sem borda — falha muda,
que só aparece no gesto.
O `.toast` já vem com a cor final que o painel mostra hoje: o mostrador o
desenhava com --accent e o unifilar sobrepunha --accent2 no fim da cascata. Com
os dois fora da /nova, a sobreposição virou o valor. */
/* a marca é o cursor: bloco verde piscando, como um prompt esperando comando */
header .brand .bd,#login .brand .bd{width:8px;height:15px;border-radius:0;background:var(--accent2);flex:none;
animation:bd-blink 1.2s steps(1) infinite}
@keyframes bd-blink{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){header .brand .bd,#login .brand .bd{animation:none;opacity:.8}}
/* modal */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;
align-items:center;justify-content:center;z-index:50;padding:16px}
.modal{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-float);
padding:20px;width:640px;max-width:100%;max-height:90vh;overflow:auto}
.modal h2{margin:0 0 14px;font-size:var(--t-bod)}
.field{margin-bottom:12px}
.field label{display:block;font-size:var(--t-dat);color:var(--muted);margin-bottom:4px}
.field label .req{color:var(--p1);font-weight:700}
.hint{font-size:var(--t-cap);color:var(--muted);margin-top:5px;line-height:1.4}
.hint b{color:var(--text);font-weight:600}
/* alternador Estruturado/Texto na descrição da issue (#197) */
.seg{display:inline-flex;gap:0;margin-bottom:10px;border:1px solid var(--border);border-radius:var(--r-ctl);overflow:hidden}
.seg-btn{border:none;border-radius:0;padding:4px 12px;min-height:22px;color:var(--muted);background:transparent}
.seg-btn+.seg-btn{border-left:1px solid var(--border)}
.seg-btn.on{background:color-mix(in oklab,var(--accent2) 14%,transparent);color:var(--accent2);font-weight:700}
.modal .foot{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}
pre.brief{white-space:pre-wrap;background:var(--bg);border:1px solid var(--border);
border-radius:var(--r-ctl);padding:12px;font-size:var(--t-dat);max-height:50vh;overflow:auto}
.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);
background:var(--surface2);border:1px solid var(--accent2);border-radius:var(--radius);
padding:10px 16px;z-index:80;box-shadow:0 6px 24px rgba(0,0,0,.3)}
@media(max-width:820px){
.row{flex-wrap:wrap} /* campos do modal empilham */
.modal{padding:16px}
.overlay{padding:8px}
}