/* cockgit — nova-pecas.css
   vista /nova · as PEÇAS do redesenho (30/09/2026): os tokens das opções A a E que o
   dono aprovou e os componentes que as telas novas montam (App.pc*, em
   js/app-nova-pecas.js). PR 0 do redesenho — a FUNDAÇÃO: cada PR de tela só
   consome, nenhum inventa o seu card.

   DE ONDE VEM. As cinco opções que o dono aprovou como estilo e a direção de UI que
   extrai delas o sistema (specs/redesenho-telas/direcao-ui.md). Decisões do dono
   (30/09, entrevista):
     · D2 — só claro e escuro, seguindo o dispositivo; os detalhes das opções (faixa
       de 3 px no card quente, botão limpo, sem colchete) valem sobre o DESIGN.md
       antigo, que foi reescrito neste mesmo PR;
     · D3 — o número importante fica NA face (custo, % da janela, etapa, tempo);
       o toque abre a prova.

   ESCOPO. Tudo aqui mora sob o prefixo `pc-` e os tokens são NOVOS nomes (--sf,
   --ink, --blue…): nada colide com base.css nem com os skins, e as telas antigas não
   mudam um pixel. A tela `.pc-tela` reescala os cinco degraus (--t-*) para a escala
   de mesa das opções (11 · 13 · 15 · 21 · 28) — a mesma técnica da escala de mesa do
   nova-card.css: nenhum sexto degrau nasce.

   CONTRASTE. Os valores são os das opções, MEDIDOS; dois deles não passavam e
   mudaram aqui (test_frontend_nova_pecas.py refaz a conta com os hex deste arquivo):
     · --idle claro #6b7785 → #5a6472: era 4,14:1 sobre --bg e 3,84:1 sobre --sf2;
     · --rule claro #84909e → #7a8593: era 2,94:1 sobre --bg (régua pede 3:1).
   Cor só por token; nenhum hex fora do bloco :root. */

  :root{
    --sf:      light-dark(#ffffff, #121821);   /* card */
    --sf2:     light-dark(#e7ecf3, #18202b);   /* célula interna (duo) */
    --bd:      light-dark(#dce3ec, #232d3a);   /* borda do card e trilho vazio */
    --rule:    light-dark(#7a8593, #5e6d82);   /* régua a 3:1 (quadrado de vaga) */
    --ink:     light-dark(#141a22, #dce6f0);   /* texto e número */
    --mut:     light-dark(#596473, #8fa0b3);   /* metadado, rótulo, rodapé */
    --blue:    light-dark(#0b5fb0, #63acee);   /* rodando, etapa atual, foco */
    --green:   light-dark(#177230, #4bbf6b);   /* ok, etapa feita, [Aprovar] */
    --orange:  light-dark(#a4540f, #e8924a);   /* espera você, card quente */
    --amber:   light-dark(#7a5f00, #cfa63c);   /* atenção fraca */
    --red:     light-dark(#b3261e, #ef6a5a);   /* erro, refez, [Reprovar] — um vermelho só */
    --idle:    light-dark(#5a6472, #8b9aaa);   /* na fila, parado, sem dado */
    --chip:    light-dark(#dbe4f1, #24334a);   /* chip de identidade */
    --chip-ink:light-dark(#2a3f6b, #b9cbe4);
  }

  /* ---- a MODAL (peça comum, 07/10/2026): nunca mais alta que a tela ----
     O dono abriu o Executor no celular (Android, 412×915) e o CABEÇALHO sumiu cortado
     em cima. Toda modal do painel (a folha da Planta, a ajuda, o visor de log) usa
     estes dois tokens: o respiro de cima (com a área segura do aparelho) e o de baixo
     (acima da barra fixa do [+ Nova demanda] no celular). O cabeçalho fica fixo e só o
     miolo rola por dentro; a página continua sem rolar. */
  :root{--pc-modal-cima:calc(8px + env(safe-area-inset-top,0px));
    --pc-modal-baixo:calc(16px + env(safe-area-inset-bottom,0px));
    --pc-modal-max:calc(100vh - var(--pc-modal-cima) - var(--pc-modal-baixo))}
  @supports (height:100dvh){:root{--pc-modal-max:calc(100dvh - var(--pc-modal-cima) - var(--pc-modal-baixo))}}
  @media (max-width:599.98px){:root{--pc-modal-baixo:calc(72px + env(safe-area-inset-bottom,0px))}}

  /* ---- a TELA e a GRADE ---- */
  .pc-tela{--t-cap:11px;--t-dat:13px;--t-bod:15px;--t-sec:21px;--t-dis:28px;
    max-width:1180px;margin:0 auto;padding:16px;min-width:0;
    font:var(--t-dat)/1.45 var(--mono);font-variant-numeric:tabular-nums;color:var(--ink)}
  .pc-grade{display:grid;gap:10px;align-items:start;min-width:0;
    grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr))}
  .pc-grupo{display:block;min-width:0}
  .pc-grupo+.pc-grupo{margin-top:18px}
  /* o topo de um grupo: título curto à esquerda, a linha de resumo à direita */
  .pc-topo{display:flex;justify-content:space-between;align-items:baseline;gap:4px 12px;
    flex-wrap:wrap;margin:0 0 10px;min-width:0}
  .pc-topo-t{font:600 var(--t-sec)/1.2 var(--display);margin:0;color:var(--ink)}
  .pc-resumo{font-size:var(--t-dat);color:var(--mut);min-width:0;overflow-wrap:anywhere}

  /* ---- o CARD ---- */
  .pc-card{display:block;min-width:0;margin:0;padding:10px 12px;text-align:left;
    font:inherit;color:var(--ink);background:var(--sf);border:1px solid var(--bd);border-radius:0}
  /* a faixa quente é box-shadow INSET, não sombra: 3 px dentro da borda */
  .pc-card[data-estado="hot"]{border-color:var(--orange);box-shadow:inset 3px 0 0 var(--orange)}
  .pc-card[data-estado="ok"]{box-shadow:inset 3px 0 0 var(--green)}
  .pc-card[data-estado="bad"]{box-shadow:inset 3px 0 0 var(--red)}
  /* na fila / parado: card NORMAL (fundo --sf) com o contorno na régua de 3:1. Até
     05/10 recuava por camada (fundo transparente) e sumia no fundo da página: o dono
     achou que a Planta só tinha Fila e Executor. Decisão dele (05/10): toda peça é um
     card visível; quem não trabalha recua pela COR (sem destaque), nunca some. */
  .pc-card[data-estado="idle"]{background:var(--sf);border-color:var(--rule)}
  .pc-l1{display:flex;justify-content:space-between;align-items:baseline;gap:4px 8px;flex-wrap:wrap}
  /* [07/10 · ordem do dono] o título QUEBRA a linha — sem line-clamp, sem "…". O longo
     mostra o começo (inteiro na palavra) e "ver tudo" (App.pcCurto · pcCard) */
  .pc-tit{display:block;font:600 var(--t-bod)/1.3 var(--mono);margin:2px 0 6px;color:var(--ink);
    overflow-wrap:anywhere;white-space:normal}
  .pc-tit-mais,.pc-tit-menos{font-weight:400;color:var(--blue);text-decoration:underline;
    text-underline-offset:2px;white-space:nowrap}
  /* o "ver tudo" que abre o detalhe: link na linha do título, sem os colchetes dos
     botões da /nova; o alvo de 44px vem do ::after (absoluto), a linha não cresce */
  #nv .pc-tit-bt,.pc-tit-bt{position:relative;display:inline;min-height:0;background:none;border:0;
    padding:0;margin:0;font:inherit;font-weight:400;color:var(--blue);cursor:pointer}
  #nv .pc-tit-bt::before{content:none}
  #nv .pc-tit-bt::after,.pc-tit-bt::after{content:"";position:absolute;left:-6px;right:-6px;top:50%;
    height:44px;transform:translateY(-50%)}
  #nv .pc-tit-bt:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
  .pc-tit-d>summary,.pc-longo>summary{list-style:none;cursor:pointer}
  .pc-tit-d>summary::-webkit-details-marker,.pc-longo>summary::-webkit-details-marker{display:none}
  .pc-tit-d>summary:focus-visible,.pc-longo>summary:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
  .pc-tit-d:not([open]) .pc-tit-menos,.pc-tit-d[open] .pc-tit-c,.pc-tit-d[open] .pc-tit-mais,
  .pc-longo:not([open]) .pc-tit-menos,.pc-longo[open] .pc-tit-c,.pc-longo[open] .pc-tit-mais{display:none}
  .pc-longo{display:inline;overflow-wrap:anywhere}
  .pc-longo>summary{display:inline}
  .pc-longo-t{overflow-wrap:anywhere}
  .pc-tit-d[open]>summary{margin-bottom:0}
  /* o card que DESDOBRA (<details>): aberto, o inteiro vem no detalhe e o "ver tudo" sai */
  .pc-card[open]>summary .pc-tit-mais{display:none}
  .pc-dados{display:block;font-size:var(--t-dat);line-height:1.45;color:var(--mut);overflow-wrap:anywhere}
  .pc-dados>span{display:block}
  /* [07/10] o ÚLTIMO fato do item: tinta cheia (é o que o dono lê primeiro depois do
     título), quebra a linha — nunca reticências; o filme mostra o mesmo texto */
  .pc-ult{display:block;margin-top:2px;font-size:var(--t-dat);line-height:1.45;color:var(--ink);
    overflow-wrap:anywhere;white-space:normal}
  .pc-rod{display:flex;justify-content:space-between;gap:4px 8px;flex-wrap:wrap;margin-top:6px;
    font-size:var(--t-dat);color:var(--mut)}
  .pc-rod>span:last-child{color:var(--ink)}

  /* o TOQUE: o card inteiro é o alvo (≥44 px) e não leva colchete */
  button.pc-card,.pc-card>summary{cursor:pointer}
  #nv button.pc-card{width:100%;min-height:44px;background:var(--sf);color:var(--ink);border-color:var(--bd)}
  #nv button.pc-card[data-estado="idle"]{background:var(--sf);border-color:var(--rule)}
  #nv button.pc-card[data-estado="hot"]{border-color:var(--orange)}
  #nv button.pc-card::before,#nv button.pc-card::after{content:none}
  #nv button.pc-card:hover,.pc-card:has(>summary:hover){border-color:var(--blue)}
  .pc-card>summary{display:block;list-style:none;min-height:24px}
  .pc-card>summary::-webkit-details-marker{display:none}
  .pc-card>summary::marker{content:""}
  .pc-card[open]{grid-column:1/-1;border-color:var(--blue)}
  .pc-det{display:block;margin-top:10px;padding-top:10px;border-top:1px solid var(--bd);
    font-size:var(--t-dat);color:var(--ink);overflow-wrap:anywhere}
  .pc-det>span{display:block;max-width:75ch}
  .pc-det>span+span{margin-top:4px}

  /* ---- CHIP de identidade (repo, projeto, cliente — nunca estado) ---- */
  .pc-chip{display:inline-block;padding:1px 7px;background:var(--chip);color:var(--chip-ink);
    font-size:var(--t-cap);line-height:1.6;white-space:nowrap;border-radius:0}

  /* ---- ESTADO: glifo + palavra + cor (nunca só cor) ---- */
  .pc-st{font-size:var(--t-dat);white-space:nowrap}
  .pc-st[data-t="run"]{color:var(--blue)}
  .pc-st[data-t="hot"]{color:var(--orange)}
  .pc-st[data-t="ok"]{color:var(--green)}
  .pc-st[data-t="bad"]{color:var(--red)}
  .pc-st[data-t="idle"]{color:var(--idle)}
  .pc-st[data-t="warn"]{color:var(--amber)}
  /* o ÚNICO movimento contínuo: o glifo de quem roda (só o glifo, nunca o texto) */
  @media (prefers-reduced-motion:no-preference){
    .pc-st[data-t="run"] .pc-gl{animation:pc-pulso 2.4s ease-in-out infinite}
    @keyframes pc-pulso{50%{opacity:.45}}
  }

  /* ---- PAR DE BOTÕES: Aprovar | Reprovar, nessa ordem, sem colchete ---- */
  .pc-btns{display:flex;gap:8px;margin-top:10px}
  #nv .pc-btn,.pc-btn{flex:1;min-width:0;min-height:40px;padding:9px 8px;border-radius:0;
    font:600 var(--t-dat)/1.2 var(--mono);background:transparent;border:1px solid var(--bd);color:var(--ink)}
  #nv .pc-btn::before,#nv .pc-btn::after{content:none}
  #nv .pc-btn[data-t="sim"]{border-color:var(--green);color:var(--green)}
  #nv .pc-btn[data-t="nao"]{border-color:var(--red);color:var(--red)}
  #nv .pc-btn[data-t="sim"]:hover{background:color-mix(in oklab,var(--green) 10%,transparent)}
  #nv .pc-btn[data-t="nao"]:hover,#nv .pc-btn[data-armado]{background:color-mix(in oklab,var(--red) 10%,transparent)}
  #nv .pc-btn:disabled{cursor:progress}
  #nv .pc-btn:focus-visible,#nv button.pc-card:focus-visible,.pc-card>summary:focus-visible{
    outline:2px solid var(--blue);outline-offset:2px}
  @media (pointer:coarse){ #nv .pc-btn{min-height:44px} }
  /* depois do clique: o par vira UMA linha de status */
  .pc-feito{display:block;margin-top:10px;font-size:var(--t-dat)}
  .pc-feito[data-t="ok"]{color:var(--green)}
  .pc-feito[data-t="bad"]{color:var(--red)}

  /* ---- o que a tela põe na face (maisHtml): o link da prova, sem colchete ---- */
  .pc-mais{display:block;margin-top:8px;min-width:0;overflow-wrap:anywhere}
  .pc-mais>.pc-btns:first-child{margin-top:0}
  .pc-lnks{display:flex;flex-wrap:wrap;gap:0 14px;min-width:0}
  #nv .pc-lnk,.pc-lnk{display:inline-flex;align-items:center;min-height:44px;padding:0;
    background:none;border:0;border-radius:0;font:var(--t-dat)/1.3 var(--mono);color:var(--blue);
    text-decoration:underline;text-underline-offset:3px;cursor:pointer}
  #nv .pc-lnk::before,#nv .pc-lnk::after{content:none}
  #nv .pc-lnk:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

  /* ---- FAIXA DE ETAPAS (opção A): N casas iguais, rótulo embaixo ---- */
  .pc-etapas-r{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:3px;
    font-size:var(--t-cap);color:var(--mut);line-height:1.3}
  .pc-etapas-r>span{min-width:0;overflow-wrap:anywhere}
  /* no celular o rótulo vira a INICIAL; o nome inteiro está no aria-label do card */
  @media (max-width:480px){
    .pc-etapas-r>span{font-size:0}
    .pc-etapas-r>span::before{content:attr(data-i);font-size:var(--t-cap)}
  }

  /* ---- MEDIDOR (opção D): um número CONTRA um limite ---- */
  .pc-med{display:block;height:10px;background:var(--bd);position:relative;margin:6px 0 2px}
  .pc-med>b{display:block;height:100%;background:var(--blue)}
  .pc-med[data-nivel="perto"]>b{background:var(--orange)}
  .pc-med[data-nivel="passou"]>b{background:var(--red)}
  .pc-med>.pc-teto{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--ink)}
  /* #583: o progresso do teste; estimativa = barra listrada (a palavra também diz) */
  .pc-pt{display:block}
  .pc-pt[data-est="1"] .pc-med>b{background:repeating-linear-gradient(45deg,var(--blue) 0 6px,var(--bd) 6px 12px)}
  /* [#610] o ANEL: todo .pc-med que o JS marca com --p/--n (App._pcAnel) vira um círculo
     — anel colorido (conic-gradient) em volta de um disco, número grande no centro. A cor
     é a do estado (azul · âmbar · vermelho, os mesmos tokens da barra: o estado também
     vai em palavra no rodapé/dica). Quem não tem --p (comparação de durações) segue barra.
     Os 2 temas saem dos tokens (--bd trilho, --sf disco, --ink número). O anel DESLIZA
     até o novo valor (--p registrado como número) só sem reduzir-movimento. */
  @property --p{syntax:"<number>";inherits:false;initial-value:0}
  .pc-med[style*="--p"]{--c:var(--blue);--d:48px;width:var(--d);height:var(--d);border-radius:50%;
    margin:6px 0 2px;box-sizing:border-box;flex:none;
    background:conic-gradient(var(--c) calc(var(--p)*1%),var(--bd) 0);
    display:flex;align-items:center;justify-content:center;counter-reset:n var(--n)}
  .pc-med[style*="--p"]::before{content:counter(n) "%";position:absolute;inset:calc(var(--d)*.14);
    border-radius:50%;background:var(--sf);color:var(--ink);display:flex;align-items:center;
    justify-content:center;font:600 calc(var(--d)*.26)/1 var(--display);font-variant-numeric:tabular-nums}
  .pc-med[style*="--p"]>b,.pc-med[style*="--p"]>.pc-teto{display:none}
  .pc-med[style*="--p"][data-nivel="perto"]{--c:var(--orange)}
  .pc-med[style*="--p"][data-nivel="passou"]{--c:var(--red)}
  /* [#621] o anel PEQUENO (etapas, fita, faixa, cards, operações): o texto do centro vem de
     data-x ("2/6", "✓", "42d"); a cor do estado vem de data-c. O traço é ≥3:1 e o texto
     (--ink no disco --sf) ≥4.5:1 nos 2 temas, pelos tokens. Sem animação com reduzir-movimento. */
  .pc-med[style*="--p"][data-x]::before{content:attr(data-x)}
  .pc-med.pc-anel-m[style*="--p"]{--d:36px;margin:2px}
  .pc-med.pc-anel-m[data-c="f"]{--c:var(--green)}
  .pc-med.pc-anel-m[data-c="d"]{--c:var(--amber)}
  .pc-med.pc-anel-m[data-c="n"]{--c:var(--blue)}
  .pc-med.pc-anel-m[data-c="w"],.pc-med.pc-anel-m[data-c="p"]{--c:var(--orange)}
  .pc-med.pc-anel-m[data-c="x"],.pc-med.pc-anel-m[data-c="b"]{--c:var(--red)}
  .pc-med.pc-anel-m[data-c="c"]{--c:var(--idle)}
  .pc-med.pc-anel-m[data-c="i"]{--c:var(--amber)}
  .pc-etapas{display:flex;align-items:center;gap:8px;min-width:0;margin:6px 0 4px}
  .pc-etapas-nome{min-width:0;overflow-wrap:anywhere;font-size:var(--t-dat);color:var(--ink)}
  .pc-pt[data-est="1"] .pc-med[style*="--p"]{border:2px dashed var(--blue)}
  .pc-pt[data-est="1"] .pc-med[style*="--p"]::before{content:"~" counter(n) "%"}
  @media (prefers-reduced-motion:no-preference){
    .pc-med[style*="--p"]{transition:--p .6s cubic-bezier(.2,.7,.3,1)}
  }
  .pc-med-r{display:flex;justify-content:space-between;gap:4px 8px;flex-wrap:wrap;
    font-size:var(--t-dat);color:var(--mut)}
  /* medidor por categoria: rótulo e valor em cima, barra embaixo */
  .pc-lin{display:flex;justify-content:space-between;gap:4px 8px;flex-wrap:wrap;margin-top:6px}
  .pc-lin>span:last-child{color:var(--mut)}

  /* ---- NÚMERO GRANDE (opções D e E): rótulo · número · comparação ---- */
  .pc-cap{display:block;font:var(--t-cap)/1.4 var(--display);letter-spacing:.06em;
    text-transform:uppercase;color:var(--mut)}
  .pc-num{display:block;font:600 var(--t-dis)/1.1 var(--display);font-variant-numeric:tabular-nums;
    color:var(--ink);overflow-wrap:anywhere}
  .pc-num small{font-size:var(--t-bod);font-weight:400;color:var(--mut);margin-left:3px}
  .pc-comp{display:block;font-size:var(--t-dat);color:var(--mut)}
  /* os três acompanhantes do número — um só por card */
  .pc-spark{display:flex;align-items:flex-end;gap:2px;height:22px;margin-top:6px}
  .pc-spark>i{flex:1;display:block;background:var(--green);min-height:1px}
  /* a hora: 12 barras, a INTENSIDADE é o dado (a opacidade aqui é valor, não esmaecer) */
  .pc-hora{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:2px;margin-top:8px}
  .pc-hora>i{display:block;height:18px;background:var(--blue)}
  .pc-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:6px}
  .pc-duo>span{display:block;background:var(--sf2);padding:6px 8px;min-width:0}
  .pc-duo .pc-num{font-size:var(--t-sec)}

  /* ---- VAGAS (opção A): a capacidade da frota ---- */
  .pc-vagas{display:inline-flex;gap:4px;align-items:center;color:var(--mut);font-size:var(--t-dat)}
  .pc-vagas>i{display:block;width:14px;height:14px;border:1px solid var(--rule)}
  .pc-vagas>i[data-on]{background:var(--blue);border-color:var(--blue)}

  /* ---- o celular: uma coluna, número um degrau menor ---- */
  @media (max-width:480px){
    .pc-tela{--t-dis:24px;padding:12px}
    .pc-grade{grid-template-columns:minmax(0,1fr)}
  }

  /* ---- O DADO DA BARRA (dono, 09/10/2026): passar o mouse, tocar ou focar uma barra
     abre a caixinha com o texto dela. UMA caixa no painel inteiro (#pc-dica, criada por
     app-nova-dica.js): `position:fixed` — fora do fluxo, a página não ganha rolagem — e
     presa às bordas da tela pelo JS. Tinta invertida (texto --sf sobre --ink: os dois
     temas passam de 12:1). Nada anima: não há o que desligar no reduced-motion. */
  .pc-dica{position:fixed;left:0;top:0;z-index:200;box-sizing:border-box;
    max-width:min(280px,calc(100vw - 16px));padding:6px 8px;background:var(--ink);color:var(--sf);
    border:1px solid var(--ink);font:var(--t-dat)/1.4 var(--mono);font-variant-numeric:tabular-nums;
    overflow-wrap:anywhere;pointer-events:none}
  .pc-dica[hidden]{display:none}
  [data-dica]{cursor:default}
  [data-dica]:focus{outline:none}
  [data-dica]:focus-visible,[data-dica][data-dica-on]{outline:2px solid var(--blue);outline-offset:1px}
  /* o ALVO do dedo: a barra fina (6–10px) ganha uma faixa invisível em cima e embaixo —
     o desenho não muda, só a área que responde ao toque e ao mouse */
  .pc-etapas>i[data-dica],.pc-med[data-dica],.pc-hora>i[data-dica],.pc-vagas>i[data-dica],
  .pc-spark>i[data-dica]{position:relative}
  .pc-etapas>i[data-dica]::after,.pc-med[data-dica]::after{content:"";position:absolute;inset:-7px 0}
  .pc-vagas>i[data-dica]::after{content:"";position:absolute;inset:-5px -2px}
  @media (pointer:coarse){.pc-etapas>i[data-dica]::after,.pc-med[data-dica]::after{inset:-12px 0}}
  /* o anel já é largo: a faixa de toque dele é um respiro de 4px (≥44px no total) */
  .pc-med[style*="--p"][data-dica]::after{inset:-4px}