/* cockgit — nova-nav.css
   vista /nova · a NAVEGAÇÃO COMPACTA (pedido do dono, 11/10/2026) — js/app-nova-nav.js.

   A QUEIXA. No computador, três faixas (~200 px) antes da Planta viva: as abas, a busca
   "filme de…" numa linha inteira e as sub-abas da Agentes; e mais três linhas de estado
   (força · saúde, vagas, limite, trava · a faixa das contas). "Isso vira MENU": a cena
   da fábrica ganha o espaço e o zoom.

   O QUE ESTE ARQUIVO SEGURA:
     · o cabeçalho é UMA linha que nunca quebra nem rola, em toda largura — e nada é
       cortado com "…" (ordem do dono, 07/10): no celular a sub-aba diz o nome CURTO
       ("Planta", "Mesa"; o inteiro fica no aria-label) e a marca vira só o ▪;
     · a letra segue a decisão D2 do dono, por media query (nova.css): 15 px abaixo de
       1600, 22 px dali para cima — nenhum degrau novo;
     · menu é NAVEGAÇÃO: moldura de 1 px, sem colchete (o colchete é o idioma de ação);
     · foco visível em tudo que clica (anel de 2 px no token de navegação);
     · cor só por token (base.css / nova-pecas.css): claro e escuro de graça;
     · nada pisca, nada anima;
     · vem DEPOIS de observa-planta3d.css e observa-pergunta.css de propósito: as regras
       da Planta viva aqui (o resumo em toda largura, o painel recolhível, a tela cheia)
       mexem o mínimo na cena e vencem pela cascata, sem tocar na folha do 3D. */

  /* ---- a LINHA do cabeçalho ---- */
  #nv .nv-top{position:relative;flex-wrap:nowrap;gap:8px;padding:8px 16px;min-width:0}
  #nv .nv-brand{flex:none;font-size:var(--t-dat);line-height:1.2}
  .nv-trilha{display:flex;align-items:center;gap:6px;flex:none}
  .nv-menu{position:relative;display:flex;flex:none}
  .nv-menu[hidden],.nv-sep[hidden],.nv-menu-lista[hidden]{display:none}
  #nv .nv-menu-bt{display:inline-flex;align-items:center;gap:8px;max-width:100%;min-width:0;
    white-space:nowrap;font-weight:600;color:var(--text);background:transparent}
  #nv .nv-menu-bt::before,#nv .nv-menu-bt::after,
  #nv .nv-menu-lista button::before,#nv .nv-menu-lista button::after,
  #nv .nv-lupa::before,#nv .nv-lupa::after{content:none}
  .nv-menu-n{white-space:nowrap}
  .nv-menu-s{flex:none;color:var(--muted);font-weight:400}
  #nv .nv-menu-bt:hover,#nv .nv-menu-bt[aria-expanded="true"]{border-color:var(--accent)}
  #nv .nv-menu-bt[aria-expanded="true"]{background:var(--surface)}
  .nv-sep{flex:none;color:var(--muted)}
  /* a LISTA: por cima de tudo, presa ao botão, nunca empurra a página */
  .nv-menu-lista{position:absolute;left:0;top:calc(100% + 4px);z-index:60;display:flex;
    flex-direction:column;gap:2px;min-width:max(100%,12rem);max-height:calc(100vh - 80px);
    padding:4px;box-sizing:border-box;background:var(--surface);border:1px solid var(--ruleS);
    box-shadow:0 8px 24px color-mix(in oklab,var(--text) 22%,transparent)}
  #nv .nv-menu-lista>button{display:flex;align-items:center;justify-content:flex-start;gap:8px;
    text-align:left;white-space:nowrap;border-color:transparent;background:transparent;
    color:var(--text);font-size:var(--t-cap);padding:8px 12px}
  @media (min-width:1600px){ #nv .nv-menu-lista>button{font-size:var(--t-dat)} }
  #nv .nv-menu-lista>button:hover{border-color:var(--accent)}
  #nv .nv-menu-lista>button[aria-checked="true"]{color:var(--accent);border-color:var(--accent);
    box-shadow:inset 3px 0 0 var(--accent)}
  #nv .nv-menu-bt:focus-visible,#nv .nv-menu-lista>button:focus-visible,#nv .nv-lupa:focus-visible,
  #nv #nv-ajuda-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  #nv .nv-menu-lista>button:focus-visible{outline-offset:-2px}

  /* ---- à direita: a lupa, "atualizado há X", [+ Nova demanda] e o [?] ---- */
  #nv .nv-links{flex:0 1 auto;min-width:0;flex-wrap:nowrap;gap:6px}
  /* "atualizado há X" é curto; o aviso longo ("sem resposta · último dado há 3 min ·
     tento de novo em ~15 s") quebra a linha DENTRO do canto — nunca corta, nunca empurra */
  #nv .nv-vivo{flex:0 1 auto;min-width:0;white-space:normal;line-height:1.25}
  #nv .nv-lupa{display:inline-flex;align-items:center;justify-content:center;flex:none;
    min-width:44px;padding:0 10px;color:var(--text);background:transparent}
  #nv .nv-lupa:hover,#nv .nv-lupa[aria-expanded="true"]{border-color:var(--accent)}

  /* ---- a BUSCA "filme de…": recolhida na lupa; aberta, cobre a linha inteira ---- */
  #nv .nv-top>#ag-busca{display:none}
  #nv .nv-top>#ag-busca[data-p3-aberta]{position:absolute;z-index:62;inset:0;display:flex;
    flex-wrap:nowrap;align-items:center;gap:8px;max-width:none;margin:0;padding:0 16px;
    background:var(--sf);border-bottom:1px solid var(--blue);
    box-shadow:0 8px 28px color-mix(in oklab,var(--ink) 22%,transparent)}
  #nv .nv-top>#ag-busca .ag-busca-res{top:100%;left:16px;right:16px}
  #nv .nv-top>#ag-busca>label{font-size:var(--t-dat)}

  /* ---- o CELULAR: a mesma linha, mais justa (o [+ Nova demanda] é a barra de baixo) ---- */
  @media (max-width:599.98px){
    #nv .nv-top{gap:4px;padding:6px 8px}
    #nv .nv-brand{font-size:var(--t-cap)}
    .nv-brand .nv-brand-n{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
    .nv-trilha{gap:2px}
    #nv .nv-menu-bt{gap:4px;padding:6px 8px}
    /* o nome CURTO da vista ("Planta", "Mesa"); o inteiro segue no aria-label do botão */
    .nv-menu-n[data-curto]{font-size:0}
    .nv-menu-n[data-curto]::after{content:attr(data-curto);font-size:var(--t-cap)}
    .nv-sep{display:none}
    #nv .nv-links{gap:4px}
    /* o canto do "atualizado": a forma CURTA ("há 12 s", "sem resposta" — App._nvVivoPinta) */
    #nv .nv-vivo[data-curto]{font-size:0;gap:6px}
    #nv .nv-vivo[data-curto]::after{content:attr(data-curto);font-size:var(--t-cap);line-height:1.15}
    #nv .nv-lupa,#nv #nv-ajuda-btn{min-width:40px;padding:0 8px}
    #nv .nv-top>#ag-busca[data-p3-aberta]{padding:0 8px;gap:6px}
    #nv .nv-top>#ag-busca>label{display:none}
    #nv .nv-top>#ag-busca .ag-busca-res{left:0;right:0}
  }
  /* abaixo de 390 px (os celulares pequenos) o canto é só o ponto: verde = em dia,
     âmbar = sem resposta; a frase segue no title e para o leitor de tela */
  @media (max-width:389.98px){
    #nv .nv-vivo[data-curto]::after{content:none}
  }
  /* o APP INSTALADO: a linha desce o que a barra do sistema ocupa (iPhone com notch) */
  @media (display-mode:standalone){
    #nv .nv-top{padding-top:calc(8px + env(safe-area-inset-top,0px))}
  }

  /* ---- AGENTES: as linhas de estado viram UMA linha de chips; o toque abre o detalhe ---- */
  .ag-estado{position:relative;margin:0 0 10px;min-width:0}
  /* os chips cabem numa linha do 1920 ao 390 (no celular o rótulo sai — abaixo); se um
     dia não couberem, QUEBRAM a linha: nada é cortado nem escondido */
  .ag-estado>summary{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-height:44px;
    min-width:0;list-style:none;cursor:pointer}
  .ag-estado>summary::-webkit-details-marker{display:none}
  .ag-estado>summary::marker{content:""}
  .ag-estado>summary:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
  .ag-ech{display:inline-block;flex:0 1 auto;min-width:0;padding:6px 10px;
    white-space:nowrap;background:var(--sf);color:var(--ink);
    border:1px solid var(--rule);font:var(--t-dat)/1.2 var(--mono)}
  .ag-ech b{font-weight:700}
  .ag-estado>summary:hover .ag-ech,.ag-estado[open]>summary .ag-ech{border-color:var(--blue)}
  .ag-ech[data-t="ok"]>.ag-ech-g{color:var(--green)}
  .ag-ech[data-t="warn"]{border-color:var(--amber)}
  .ag-ech[data-t="warn"]>.ag-ech-g{color:var(--amber)}
  .ag-ech[data-t="bad"]{border-color:var(--red)}
  .ag-ech[data-t="bad"]>.ag-ech-g{color:var(--red)}
  .ag-ech[data-t="run"]{box-shadow:inset 3px 0 0 var(--blue)}
  .ag-ech-s{flex:none;color:var(--mut)}
  @media (max-width:599.98px){
    .ag-estado>summary{gap:4px}
    .ag-ech{padding:6px 8px}
    .ag-ech-l{display:none}
  }
  /* o DETALHE: as linhas de antes, inteiras, por cima da tela */
  .ag-estado-c{position:absolute;z-index:30;left:0;top:calc(100% + 4px);display:flex;flex-direction:column;
    gap:8px;width:min(46rem,calc(100vw - 32px));padding:12px 14px;box-sizing:border-box;
    background:var(--sf);color:var(--ink);border:1px solid var(--blue);
    box-shadow:0 8px 28px color-mix(in oklab,var(--ink) 22%,transparent)}
  .ag-estado-c .ag-status{flex-wrap:wrap}
  /* na Planta viva em 3D o resumo é o do topo da cena (abaixo): este some */
  #nv-ag[data-vista="planta"]:has(>.p3)>.ag-estado{display:none}

  /* ---- PLANTA VIVA: o topo da cena é a linha única ---- */
  /* o resumo (saúde · vagas · limite, o toque abre força, vagas, limite, trava e
     publicação) vale em TODA largura; a vista mudou-se para o menu da sub-aba e a lupa
     para o cabeçalho — as duas do topo da cena saem */
  #nv .p3 .p3-topo>.p3-res{display:block}
  #nv .p3 .p3-topo>.p3-menu:not(.p3-res),#nv .p3 .p3-bts .p3-lupa{display:none}
  #nv .p3-topo{flex-wrap:nowrap}
  #nv .p3-conts{flex:1 1 auto;flex-wrap:nowrap;min-width:0}
  /* apertada, a frase da conta QUEBRA dentro do chip (nunca "…", ordem do dono 07/10) */
  #nv .p3-cont{flex:0 1 auto;min-width:0}
  /* abaixo de 1600 px a frase das vagas e do Codex fica para o leitor de tela (o resumo
     ao lado já diz "3/10"): sobra a linha para a DECISÃO, que nunca perde a frase */
  @media (min-width:600px) and (max-width:1599.98px){
    #nv .p3-cont:is([data-foco="vagas"],[data-foco="m_codex"]) .p3-lg{position:absolute;width:1px;height:1px;
      overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  }
  #nv .p3-cont[data-foco="decisao"]{flex-shrink:.3}
  @media (min-width:600px){
    .p3-res{flex:none}
    .p3-res>summary{width:auto;padding:0 12px;gap:6px;font:var(--t-dat)/1.2 var(--mono);white-space:nowrap}
    .p3-res>summary b{font-weight:700}
  }

  /* ---- o PAINEL da direita, recolhível: escondido, a cena fica em largura total. As
     peças continuam no DOM (a folha dos ajustes, pelo resumo, abre por cima de tudo),
     só fora da vista — a mesma técnica do celular ---- */
  .p3[data-lado="0"] .p3-corpo{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
  .p3[data-lado="0"] .p3-lado{position:absolute;left:0;top:0;width:1px;height:1px;overflow:hidden;pointer-events:none}
  .p3[data-lado="0"] .p3-lado details[open]>.pc-det{pointer-events:auto}
  /* os botões da cena: [painel] e [tela cheia], no canto, por cima do desenho */
  .nv-p3-bts{position:absolute;z-index:6;top:8px;right:8px;display:flex;gap:6px}
  #nv .nv-p3-bt{display:inline-flex;align-items:center;min-height:44px;padding:4px 12px;
    background:var(--sf);color:var(--ink);border:1px solid var(--rule);border-radius:0;
    font:var(--t-cap)/1.2 var(--mono);cursor:pointer;white-space:nowrap}
  #nv .nv-p3-bt::before,#nv .nv-p3-bt::after{content:none}
  #nv .nv-p3-bt:hover{border-color:var(--blue)}
  #nv .nv-p3-bt:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
  #nv .nv-p3-bt[hidden]{display:none}
  @media (max-width:599.98px){ #nv .nv-p3-bt[data-nv-p3="lado"]{display:none} }
  /* a TELA CHEIA (Fullscreen API; o Esc do navegador sai): a Planta viva inteira — o
     topo das contas, a cena e o painel — no fundo da tela, sem o resto do painel */
  .p3:fullscreen{box-sizing:border-box;padding:12px 16px;background:var(--bg);color:var(--ink)}
  .p3:fullscreen .p3-corpo{flex:1 1 auto}

/* [#629] Planta em TELA CHEIA: o filme (#nv-drawer) mora dentro dela e cobre a tela;
   `p3-sim` é a tela cheia simulada (celular). A folha rola por dentro só aqui: o elemento
   em tela cheia não tem página para rolar. */
#nv-ag .p3.p3-sim{position:fixed;inset:0;z-index:100;width:100%;height:100%;background:var(--bg)}
#nv-ag .p3:fullscreen #nv-drawer,#nv-ag .p3.p3-sim #nv-drawer{position:fixed;top:0 !important;right:0;
  min-height:100%;z-index:20}
#nv-ag .p3:fullscreen #nv-drawer.cheia,#nv-ag .p3.p3-sim #nv-drawer.cheia{left:0;width:100%}
@media (max-width:760px){
  #nv-ag .p3:fullscreen #nv-drawer,#nv-ag .p3.p3-sim #nv-drawer{left:0;width:100%}
}