/* cockgit — observa-planta3d.css
   vista /nova · aba Agentes · a PLANTA VIVA em 3D (decisão do dono, 10/10/2026):
   app-observa-planta3d.js (o mapa e a casca). [13/10/2026] A cena do protótipo A (os cartões,
   as pílulas, os números) tem a folha própria: observa-planta3d-a.css.

   Regras que moram aqui:
     · a cena OCUPA A TELA INTEIRA, sem rolagem: a altura livre da janela (`--ag-livre`,
       medida em app-observa.js) vira a altura da aba; a cena estica no que sobra;
     · o canvas é só desenho (aria-hidden). Todo TEXTO é HTML por cima (observa-planta3d-a.css).
       Tudo que clica é <button> com foco visível;
     · destaque só para quem trabalha (azul) e para a ÚNICA decisão (laranja); quem está
       parado recua pela borda tracejada e pela cor do estado — nunca pela opacidade do
       TEXTO, que fica em AA;
     · nada pisca, nada pulsa: zero animação de CSS aqui;
     · cor só pelos tokens das peças (nova-pecas.css): claro e escuro do mesmo :root;
     · sem rolagem lateral: tudo quebra linha e cabe, do 1920 ao celular 375. */

  #nv-ag[data-vista="planta"]:has(>.p3){height:var(--ag-livre,auto);min-height:0}
  .p3{position:relative;display:flex;flex-direction:column;gap:8px;flex:1 1 auto;min-height:0;min-width:0}

  /* ---- a barra do topo: os 4 contadores e os botões ---- */
  .p3-topo{display:flex;align-items:center;justify-content:space-between;gap:6px 12px;flex-wrap:wrap;min-width:0}
  .p3-conts{display:flex;flex-wrap:wrap;gap:6px;min-width:0;flex:1 1 30em}
  .p3-bts{display:flex;gap:6px;align-items:center;flex:none}
  #nv .p3-cont,#nv .p3-bt{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:4px 10px;min-width:0;
    background:var(--sf);color:var(--ink);border:1px solid var(--rule);border-radius:0;
    font:var(--t-dat)/1.2 var(--mono);cursor:pointer;text-align:left}
  #nv .p3-cont::before,#nv .p3-cont::after,#nv .p3-bt::before,#nv .p3-bt::after,
  #nv .p3-lnk::before,#nv .p3-lnk::after{content:none}
  #nv .p3-cont:hover,#nv .p3-bt:hover{border-color:var(--blue)}
  #nv .p3-cont:focus-visible,#nv .p3-bt:focus-visible,#nv .p3-lnk:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
  .p3-cont b{font:700 var(--t-bod)/1 var(--display)}
  .p3-g{font-weight:700}
  .p3-lg{min-width:0;overflow-wrap:anywhere}
  #nv .p3-cont[data-t="run"]{box-shadow:inset 3px 0 0 var(--blue)}
  #nv .p3-cont[data-t="hot"]{border-color:var(--orange);box-shadow:inset 3px 0 0 var(--orange)}
  .p3-cont[data-t="hot"] .p3-g{color:var(--orange)}
  .p3-cont[data-t="ok"] .p3-g{color:var(--green)}
  .p3-cont[data-t="idle"] .p3-g{color:var(--idle)}
  .p3-vg{display:inline-flex;gap:3px}
  .p3-vg i{width:10px;height:10px;border:1px solid var(--rule)}
  .p3-vg i[data-on]{background:var(--blue);border-color:var(--blue)}
  .p3-ajuda .p3-leg{grid-template-columns:minmax(0,1fr)}
  .p3-ajuda .p3-leg i{display:inline-block;flex:none;width:12px;height:12px;border:2px solid var(--rule)}
  .p3-leg i[data-k="run"]{background:var(--blue);border-color:var(--blue)}
  .p3-leg i[data-k="hot"]{background:var(--orange);border-color:var(--orange)}
  .p3-leg i[data-k="idle"]{border-style:dashed}
  .p3-leg i[data-k="dem"]{background:var(--chip);border-color:var(--chip-ink)}
  .p3-leg i[data-k="bad"]{border-color:var(--red)}
  .p3-custo{color:var(--mut);font-size:var(--t-cap);overflow-wrap:anywhere}

  /* ---- o CORPO: a cena e, ao lado, as peças da 2D que o 3D não pode perder (os
     ajustes da fábrica e "Últimos acontecimentos"); a faixa das travas fica em cima.
     Tela larga: coluna à direita. Média e celular: embaixo da cena, só o que cabe ---- */
  .p3-corpo{flex:1 1 auto;min-height:0;min-width:0;display:grid;gap:8px;
    grid-template-columns:minmax(0,1fr) minmax(16rem,19rem);grid-template-rows:minmax(0,1fr)}
  .p3-lado{display:flex;flex-direction:column;gap:8px;min-height:0;min-width:0;overflow:hidden}
  .p3>.pv-alerta{flex:none}
  .p3-lado>.pv-ajustes{margin:0;flex:none}
  .p3-lado>.pv-faixa{flex:1 1 auto;min-height:0;overflow:hidden}
  .p3-lado .pv-log li{grid-template-columns:4.6em 14px minmax(0,1fr)}
  .p3-lado .pv-log .f{grid-column:3/-1}
  /* a FOLHA do toque das peças da 2D (travas, ajustes), igual à da Planta plana
     (observa-planta.css): fixa, por cima, nunca empurra a página; só o miolo rola */
  .p3 details>.pc-det{position:fixed;z-index:30;left:50%;bottom:var(--pc-modal-baixo,16px);transform:translateX(-50%);
    width:min(34rem,calc(100vw - 32px));margin:0;padding:12px 14px;box-sizing:border-box;
    max-height:var(--pc-modal-max,calc(100vh - 32px));overflow:hidden;display:flex;flex-direction:column;gap:2px;
    background:var(--sf);color:var(--ink);border:1px solid var(--blue);font-size:var(--t-dat);
    box-shadow:0 8px 28px color-mix(in oklab,var(--ink) 22%,transparent)}
  .p3 .pc-det>*{flex:none}
  .p3 .pc-det>.pv-pg{flex:0 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
  .p3 .pv-df{font-weight:600}
  .p3 .pc-det>.aj-corpo,.p3 .pc-det>.aj-hist{display:flex;flex-direction:column;gap:6px}
  .p3 .pc-det>.aj-hist{margin-top:8px;padding-top:6px;border-top:1px solid var(--bd);gap:2px}
  .p3 .pc-card{background:var(--sf);border-color:var(--rule);padding:6px 10px}
  .p3-mais{font-weight:700}
  @media (max-width:1099.98px){
    .p3-corpo{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(220px,1fr) auto}
    .p3-lado{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);align-items:stretch}
    .p3-lado .pv-log li:nth-child(n+3){display:none}
  }

  /* ---- a CENA: o canvas e a camada das placas por cima ---- */
  .p3-cena{position:relative;flex:1 1 auto;min-height:300px;min-width:0;overflow:hidden;background:var(--bg);
    border:1px solid var(--bd);touch-action:none}
  .p3-gl{position:absolute;left:0;top:0;display:block;outline:none;cursor:grab}
  .p3-sonda{position:absolute;width:0;height:0;overflow:hidden}
  .p3-carrega{position:absolute;inset:0;z-index:4;display:grid;place-content:center;gap:10px;text-align:center;background:var(--bg)}
  .p3-carrega[hidden]{display:none}
  .p3-carrega b{font:700 var(--t-bod)/1.2 var(--display);letter-spacing:.08em;text-transform:uppercase}
  .p3-carrega small{color:var(--mut)}
  .p3-etp{display:flex;gap:3px;justify-content:center}
  .p3-etp i{width:56px;height:6px;background:var(--bd)}
  .p3-etp i[data-e="n"]{background:var(--blue)}

  /* a LISTA do que está no ar (o toque na Produção): a folha do toque (.pv-ajuda-c, fixa, por cima) */
  .p3-det[hidden]{display:none}
  .p3-det:focus{outline:none}
  .p3-dst{display:block;color:var(--mut)}
  .p3-det .p3-dl{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:8px;min-width:0}
  .p3-det .p3-dl>li{display:grid;align-items:start;gap:2px;padding:6px 0 0 10px;border-left:3px solid var(--rule);min-width:0}
  .p3-dt{font-weight:600;overflow-wrap:anywhere}
  .p3-dl small{color:var(--mut);overflow-wrap:anywhere}
  .p3-dl .pv-bt{justify-self:start;margin-top:4px}

  /* o CELULAR: o topo numa linha só (`.p3-so-cel`) — em tela larga nada disto aparece */
  #nv .p3 .p3-so-cel{display:none}

  .p3-res .p3-g[data-t="ok"]{color:var(--green)} .p3-res .p3-g[data-t="warn"]{color:var(--amber)} .p3-res .p3-g[data-t="bad"]{color:var(--red)}
  .p3-res-c{display:flex;flex-direction:column;gap:6px;min-width:0}
  .p3-res-c .ag-status{gap:4px 12px}
  .p3-pub{margin:0;color:var(--mut);overflow-wrap:anywhere}
  .p3-res-bts{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}

  /* o AVISO discreto da Planta plana (o 3D caiu, ou o dono escolheu a plana) */
  .p3-aviso{margin:0;font-size:var(--t-cap);color:var(--mut);overflow-wrap:anywhere}
  #nv .p3-lnk{min-height:32px;padding:2px 8px;margin-left:4px;background:transparent;color:var(--ink);
    border:1px solid var(--rule);border-radius:0;font:var(--t-cap)/1.2 var(--mono);cursor:pointer}

  @media (max-width:599.98px){
    /* a barra fixa do [+ Nova demanda] mora embaixo: a aba para acima dela. A conta
       fecha com a página: `--ag-livre` (altura da janela − topo da aba − 20) − 72 + 34
       + o respiro de 56 px do #nv (nova-demanda.css) = a altura da janela − 2 px de folga */
    #nv-ag[data-vista="planta"]:has(>.p3){height:calc(var(--ag-livre,600px) - var(--pc-modal-baixo,72px) + 34px)}
    /* [10/10 · print do dono] o cabeçalho da aba vira UMA linha, a do topo da cena: as
       vistas, a força, as vagas, o limite e a trava moram nas folhas dos chips, e a busca
       "filme de…" na lupa (abre por cima do topo). A decisão: o chip "! N" e o balão */
    #nv-ag[data-vista="planta"]:has(>.p3)>.ag-vistas,#nv-ag[data-vista="planta"]:has(>.p3)>.ag-forca-l,
    #nv-ag[data-vista="planta"]:has(>.p3)>.ag-status{display:none}
    #nv-agentes:has(>#nv-ag[data-vista="planta"]>.p3){position:relative}
    #nv-agentes:has(>#nv-ag[data-vista="planta"]>.p3)>#ag-busca:not([data-p3-aberta]){display:none}
    #nv-agentes:has(>#nv-ag[data-vista="planta"]>.p3)>#ag-busca[data-p3-aberta]{position:absolute;z-index:32;left:0;right:0;top:0;
      margin:0;padding:8px 16px;background:var(--sf);border-bottom:1px solid var(--blue);
      box-shadow:0 8px 28px color-mix(in oklab,var(--ink) 22%,transparent)}
    .p3-topo{flex-wrap:nowrap;gap:4px}
    .p3-conts{flex:none;gap:4px}
    .p3-bts{gap:4px}
    #nv .p3 .p3-so-desk{display:none}
    #nv .p3-topo>.p3-so-cel{display:block}
    #nv .p3-bts .p3-so-cel{display:inline-flex}
    /* das contas fica SÓ a decisão ("! 2"); a frase dela segue para o leitor de tela */
    #nv .p3-cont:not([data-foco="decisao"]){display:none}
    #nv .p3-cont{padding:4px 10px;gap:4px;font-size:var(--t-cap)}
    .p3-cont .p3-lg{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
    #nv .p3-lupa{width:44px;padding:0;justify-content:center}
    .p3-menu>summary{width:auto;padding:0 10px;gap:6px;font:600 var(--t-cap)/1.2 var(--mono);white-space:nowrap;overflow:hidden}
    .p3-res{flex:1 1 auto;min-width:0}
    .p3-res>summary{justify-content:flex-start;font-weight:400}
    .p3-res>summary b{font-weight:700}
    /* a cena estica no que sobra; as peças do lado ficam fora da vista (a folha dos
       ajustes é `position:fixed` e abre por cima de tudo, pelo detalhe do resumo) */
    .p3-cena{min-height:0}
    .p3-corpo{position:relative;grid-template-rows:minmax(0,1fr)}
    .p3-lado{position:absolute;left:0;top:0;width:1px;height:1px;overflow:hidden;pointer-events:none}
    .p3-lado details[open]>.pc-det{pointer-events:auto}
    .p3 details>.pc-det{bottom:var(--pc-modal-baixo,72px)}
  }
  @media (prefers-reduced-motion:reduce){
    .p3 *{transition:none !important}
  }

  .p3-dl a{color:var(--blue)}
  /* [11/10] a LISTA do que está no ar (o toque na Produção): um item por publicação —
     repo #número, título curto, quando e o link. Quebra a linha, nunca rola de lado */
  .p3-det .p3-noar-l{list-style:none;margin:4px 0 0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:8px;min-width:0}
  .p3-det .p3-noar-l>li{display:grid;grid-template-columns:minmax(0,1fr);align-items:start;gap:1px;min-width:0;
    padding:6px 0 0;border-top:1px solid var(--bd)}
  .p3-det .p3-noar-l b{font:600 var(--t-dat)/1.35 var(--mono);overflow-wrap:anywhere}
  .p3-det .p3-noar-l span{overflow-wrap:anywhere}
  .p3-det .p3-noar-l a{justify-self:start;min-height:32px;display:inline-flex;align-items:center}
  /* a folha do detalhe nunca cobre a cena inteira: sobra a faixa de cima para o toque
     FORA fechar (no celular também); a lista rola por dentro, nunca de lado */
  .pv-ajuda-c.p3-det{max-height:min(72vh,calc(100vh - 32px))}