/* cockgit — nova-demanda.css
   vista /nova · a ENTRADA DA DEMANDA (30/09/2026): o botão fixo [Nova demanda], a
   folha de uma frase, os chips que se trocam num toque, o progresso com previsão e
   a TRILHA (opção B do protótipo `entrada/opcoes.html`). Cor só por token (base.css),
   então claro/escuro e as identidades vêm de graça.

   REGRAS DO DONO QUE ESTE ARQUIVO SEGURA:
   - cards-only, nada rola por dentro (a folha é `position:absolute` no documento,
     como o #nv-la; quem rola é a PÁGINA) e nada estoura a largura (min-width:0 e
     overflow-wrap em todo texto que vem do servidor);
   - SEMPRE com progresso: a barra anda sozinha até o prazo (animação CSS, sem
     setInterval) e para em 95%; atrasado, a cor muda para aviso — nada pisca;
   - `prefers-reduced-motion`: a barra fica parada no ponto medido;
   - o botão é um só e fica no mesmo lugar: no cabeçalho do desktop e numa barra
     de baixo no celular (≤ 600 px). */

/* ---- o botão fixo: no celular vira a barra de baixo ---- */
@media (max-width:600px){
  #nv-la-btn{position:fixed;left:0;right:0;bottom:0;z-index:35;width:100%;margin:0;
    min-height:48px;border-radius:0;border-width:2px 0 0;border-color:var(--accent);
    background:var(--surface);box-shadow:0 -6px 12px rgba(0,0,0,.12)}
  #nv{padding-bottom:56px}
}

/* ---- a folha ---- */
#nv-nd{position:absolute;left:0;right:0;top:0;min-height:100vh;min-height:100dvh;
  background:rgba(0,0,0,.55);z-index:40;padding:48px 16px;
  /* a MESMA escala das telas da /nova (nova-card.css .nv-cards, #nv-board…) */
  --t-cap:13px;--t-dat:15px;--t-bod:18px;--t-sec:24px;--t-dis:48px;font-size:var(--t-dat)}
#nv-nd[hidden]{display:none}
.nv-nd{width:min(560px,100%);margin:0 auto;background:var(--surface);
  border:1px solid var(--accent);min-width:0}
.nv-nd-head{display:flex;align-items:center;gap:10px;padding:10px 14px;
  border-bottom:1px solid var(--border);font-weight:700}
.nv-nd-passo{margin-left:auto;font:var(--t-cap) var(--mono);color:var(--accent)}
.nv-nd-x{min-width:40px;min-height:40px}
.nv-nd-corpo{display:flex;flex-direction:column;gap:10px;padding:14px;min-width:0;
  font-size:var(--t-dat)}
/* dentro do card da faixa, a mesma escala da folha (o card herda a do título) */
.nv-nd-mont,.nv-nd-chips,.nv-nd-trilha,.nv-nd-total,.nv-nd-cam,.nv-nd-prd{font-size:var(--t-dat)}
.nv-nd-corpo textarea{width:100%;min-height:72px;resize:vertical}
.nv-nd-acoes{display:flex;flex-wrap:wrap;gap:8px}
.nv-nd-acoes button{min-height:40px}
.nv-nd-acoes .primary{flex:1 1 auto}
.nv-nd-dica{margin:0;font-size:var(--t-cap);color:var(--muted);overflow-wrap:anywhere}
.nv-nd-mais{align-self:flex-start}
.nv-nd-mic[aria-pressed="true"] span{color:var(--st-err-ink)}

/* ---- os chips ---- */
.nv-nd-chips{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.nv-nd-chip{display:inline-flex;gap:5px;align-items:center;min-height:36px;padding:4px 8px;
  background:var(--surface2);border:1px solid var(--border);color:var(--text);
  font:var(--t-dat) var(--mono);max-width:100%;overflow-wrap:anywhere}
#nv .nv-nd-chip::before,#nv .nv-nd-chip::after,#nv-nd .nv-nd-chip::before,
#nv-nd .nv-nd-chip::after{content:none}
.nv-nd-chip small{color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.05em}
.nv-nd-chip[aria-expanded="true"]{border-color:var(--accent)}
.nv-nd-chip.fixa{cursor:default}
.nv-nd-troca{display:flex;flex-wrap:wrap;gap:6px;padding:6px;border:1px dashed var(--ruleS)}
.nv-nd-troca button{min-height:36px}

/* ---- montando: progresso com previsão ---- */
.nv-nd-mont{display:flex;flex-direction:column;gap:4px;padding:8px 10px;
  border:1px solid var(--border);box-shadow:inset 3px 0 0 var(--st-run-ink);min-width:0}
.nv-nd-mont.atrasou{box-shadow:inset 3px 0 0 var(--st-warn-ink)}
.nv-nd-lin{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;
  font-size:var(--t-dat);min-width:0}
.nv-nd-lin span{overflow-wrap:anywhere;min-width:0}
.nv-nd-mut{color:var(--muted);font-size:var(--t-cap)}
.nv-nd-bar{--c:var(--st-run-ink)}
.nv-nd-mont.atrasou .nv-nd-bar{--c:var(--st-warn-ink)}

/* ---- a trilha (opção B) ---- */
.nv-nd-cam{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:var(--t-dat)}
.nv-nd-tam{font:700 var(--t-dat) var(--display);padding:1px 7px;border:1px solid var(--accent);
  color:var(--accent)}
.nv-nd-prd{margin:0;padding:6px 8px;background:var(--surface2);font-size:var(--t-dat);
  overflow-wrap:anywhere}
.nv-nd-trilha{list-style:none;margin:0;padding:0 0 0 14px;border-left:2px solid var(--ruleS);
  min-width:0}
.nv-nd-trilha li{position:relative;padding:0 0 9px 10px;min-width:0}
.nv-nd-trilha li::before{content:"";position:absolute;left:-21px;top:4px;width:10px;height:10px;
  background:var(--surface);border:2px solid var(--ruleS)}
.nv-nd-trilha li.v::before{border-color:var(--st-warn-ink)}
.nv-nd-trilha li.f::before{background:var(--st-ok-ink);border-color:var(--st-ok-ink)}
.nv-nd-trilha li.n::before{background:var(--st-run-ink);border-color:var(--st-run-ink)}
.nv-nd-trilha li.antes .t{color:var(--muted)}
.nv-nd-trilha .t{font-size:var(--t-dat);overflow-wrap:anywhere}
.nv-nd-trilha .m{font-size:var(--t-cap);color:var(--muted);overflow-wrap:anywhere}
.nv-nd-trilha .m b{color:var(--text);font-weight:600}
.nv-nd-voce{font-size:var(--t-cap);color:var(--st-warn-ink);white-space:nowrap}
.nv-nd-total{border-top:2px solid var(--text);padding-top:6px;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;font-size:var(--t-cap);color:var(--muted)}
.nv-nd-total b{display:block;font:600 var(--t-dat) var(--display);color:var(--text);
  overflow-wrap:anywhere}
.nv-nd-fim{margin:0;font-size:var(--t-bod)}
/* no card da mesa e do "agora" (a linha de ações é flex), cada peça ocupa a largura toda */
.nv-card-acts>[class^="nv-nd-"],.nv-card-acts>ol.nv-nd-trilha{flex:1 1 100%;min-width:0}