/* cockgit — nova-iris.css
   vista /nova · tela ÍRIS AO VIVO (06/10/2026). O porquê está em js/app-nova-iris.js.
   Os cards são as PEÇAS (nova-pecas.css); aqui o gating da tela e, desde 07/10/2026,
   o CARD CLICÁVEL e a FOLHA do detalhe (js/app-nova-iris-det.js).

   SEM BARRA DE ROLAGEM (dono, 22/09): a folha é FIXA, por cima, e nunca empurra a
   página (o mesmo desenho da folha da Planta, observa-planta.css); a grade cabe na
   janela porque o JS esconde o que não cabe (`.ir-fora`) e põe o card "+N". Nada
   rola por dentro: a folha pagina por botão.

   O TEXTO INTEIRO (dono, 07/10: "os textos estão truncados hoje"). Nenhum campo de
   conteúdo desta tela corta com reticências nem prende em N linhas: título, frase,
   chip e estado QUEBRAM linha. O resumo de texto longo é feito no JS (corte na
   palavra + "continua no detalhe"), e a folha mostra o texto completo.
   test_frontend_iris_cards.py barra o corte com reticências e o prende-linhas aqui.

   O MOVIMENTO (o dono tem TAG): a folha entra e sai em 260 ms (opacidade + deslize
   de 8 px), a barra enche em 600 ms e o estado que mudou entra com fade de 320 ms.
   Toda transição mora DENTRO de prefers-reduced-motion: no-preference; com reduce,
   nada anda. Nada pisca, nada repete. Cor só por token das peças (DESIGN §10.1). */
#nv:not([data-tela="iris"]) #nv-iris{display:none}

/* ---- o texto inteiro: a peça comum prende o título em 2 linhas; aqui não ---- */
#nv-iris .pc-tit{display:block;overflow:visible;-webkit-line-clamp:none}
#nv-iris .pc-st,#nv-iris .pc-chip{white-space:normal;overflow-wrap:anywhere}
#nv-iris .pc-dados,#nv-iris .pc-comp,#nv-iris .pc-med-r{overflow-wrap:anywhere}
.ir-cont{font-weight:400;font-size:var(--t-dat);color:var(--blue)}

/* ---- o CARD clicável: a face é um botão; o que não cabe sai da grade ---- */
#nv-iris .ir-card{padding:0}
#nv-iris .ir-fora{display:none}
#nv .ir-face{display:block;width:100%;min-height:44px;margin:0;padding:10px 12px;text-align:left;
  font:inherit;color:inherit;background:none;border:0;border-radius:0;cursor:pointer}
#nv .ir-face::before,#nv .ir-face::after{content:none}
#nv .ir-face:hover{color:inherit}
#nv .ir-face:focus-visible{outline:2px solid var(--blue);outline-offset:-3px}
#nv-iris .ir-card:has(>.ir-face:hover),#nv-iris .ir-card:has(>.ir-face[aria-expanded="true"]){border-color:var(--blue)}
.ir-mais{display:block;margin-top:6px;text-align:right;font-size:var(--t-cap);color:var(--blue)}
.ir-mais::after{content:" ›"}
/* o "+N": o que não coube na janela, numa lista na folha */
#nv button.ir-mais-n{cursor:pointer}
#nv button.ir-mais-n:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* ---- a FOLHA: fixa, por cima, nunca empurra a página. Fica acima da barra fixa do
   [+ Nova demanda] do celular (z 35): aberta, ela é o assunto da tela ---- */
.ir-veu{position:fixed;inset:0;z-index:38;background:color-mix(in oklab,var(--ink) 28%,transparent);
  opacity:0;visibility:hidden}
.ir-veu[data-aberto]{opacity:1;visibility:visible}
.ir-folha{position:fixed;z-index:39;left:50%;bottom:12px;transform:translate(-50%,8px);
  width:min(44rem,calc(100vw - 24px));box-sizing:border-box;
  padding:12px 14px;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);
  opacity:0;visibility:hidden}
.ir-folha[data-aberto]{opacity:1;visibility:visible;transform:translate(-50%,0)}
.ir-folha-cab{display:block;padding-bottom:8px;border-bottom:1px solid var(--bd)}
.ir-folha-l1{display:flex;flex-wrap:wrap;gap:6px;align-items:baseline}
.ir-folha-t{margin:6px 0 0;font:600 var(--t-bod)/1.35 var(--mono);color:var(--ink);overflow-wrap:anywhere}
#nv .ir-fecha{display:block;margin:10px 0 0 auto;min-height:44px;padding:6px 16px;
  font:var(--t-dat)/1.2 var(--mono);background:var(--sf);color:var(--ink);border:1px solid var(--bd);
  border-radius:0;cursor:pointer}
#nv .ir-fecha::before,#nv .ir-fecha::after{content:none}
#nv .ir-fecha:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.ir-folha-pag{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px;
  border-top:1px solid var(--bd)}
.ir-folha-pag[hidden]{display:none}
.ir-folha-n{color:var(--mut)}
#nv .ir-folha-pag .pc-lnk:disabled{color:var(--mut);text-decoration:none;cursor:default}
#nv .ir-volta{min-height:32px}
.ir-folha .ir-fora{display:none}
/* na mesa a folha é larga e o detalhe corre em duas colunas: cabe numa página só */
@media (min-width:900px){
  .ir-folha{width:min(62rem,calc(100vw - 48px))}
  .ir-folha-corpo{columns:2;column-gap:32px}
  .ir-folha-corpo .ir-u{break-inside:avoid}
  .ir-folha-corpo .ir-sec-t,.ir-folha-corpo .ir-sub{break-after:avoid}
}
.ir-conv,.ir-tempo{display:contents}

/* ---- as unidades do detalhe ---- */
.ir-sec-t{margin:12px 0 4px;font:var(--t-cap)/1.4 var(--display);letter-spacing:.06em;
  text-transform:uppercase;color:var(--mut)}
.ir-sub{margin-top:6px}
.ir-txt{margin:0;max-width:75ch;color:var(--ink);overflow-wrap:anywhere}
.ir-prazo{margin:4px 0 6px;color:var(--ink);overflow-wrap:anywhere}

/* o CHIP de estado: glifo + palavra + cor, com o fundo tingido do próprio estado */
.ir-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;min-width:0}
.ir-chip{display:inline-flex;align-items:baseline;gap:4px;min-width:0;padding:2px 8px;
  font-size:var(--t-dat);line-height:1.4;border:1px solid currentColor;overflow-wrap:anywhere;
  color:var(--idle);background:color-mix(in oklab,var(--idle) 10%,var(--sf))}
.ir-chip[data-t="ok"]{color:var(--green);background:color-mix(in oklab,var(--green) 10%,var(--sf))}
.ir-chip[data-t="run"]{color:var(--blue);background:color-mix(in oklab,var(--blue) 10%,var(--sf))}
.ir-chip[data-t="hot"]{color:var(--orange);background:color-mix(in oklab,var(--orange) 10%,var(--sf))}
.ir-chip[data-t="bad"]{color:var(--red);background:color-mix(in oklab,var(--red) 10%,var(--sf))}
.ir-chip[data-t="warn"]{color:var(--amber);background:color-mix(in oklab,var(--amber) 10%,var(--sf))}

/* a LINHA DO TEMPO: trilho à esquerda, um ponto na cor do estado por fato */
.ir-ev{position:relative;margin-left:6px;padding:3px 0 6px 18px;border-left:2px solid var(--bd);
  min-width:0;overflow-wrap:anywhere}
.ir-ev::before{content:"";position:absolute;left:-6px;top:7px;width:10px;height:10px;
  border-radius:50%;background:var(--idle);box-shadow:0 0 0 2px var(--sf)}
.ir-ev[data-t="ok"]::before{background:var(--green)}
.ir-ev[data-t="run"]::before{background:var(--blue)}
.ir-ev[data-t="hot"]::before{background:var(--orange)}
.ir-ev[data-t="bad"]::before{background:var(--red)}
.ir-ev[data-t="warn"]::before{background:var(--amber)}
.ir-ev .ir-chip{margin-top:2px}
.ir-hora{display:block;font-size:var(--t-cap);color:var(--mut)}
.ir-o-que{color:var(--ink);margin-right:4px}

/* o que ela fez (verde) e o que falta (na fila) */
.ir-li{padding:2px 0;overflow-wrap:anywhere}
.ir-li>span:first-child{display:inline-block;width:1.2em;color:var(--idle)}
.ir-li[data-t="ok"]>span:first-child{color:var(--green)}
.ir-li[data-t="run"]>span:first-child{color:var(--blue)}

.ir-pagina{padding:6px 0;border-bottom:1px solid var(--bd);overflow-wrap:anywhere}
.ir-pagina a{color:var(--blue);text-underline-offset:3px}
.ir-lnks{margin-top:4px}
/* uma linha da lista "+N": o estado e o título inteiro, o toque abre o detalhe */
#nv .ir-linha{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline;width:100%;min-height:44px;
  margin:0;padding:6px 0;text-align:left;font:inherit;color:var(--ink);background:none;border:0;
  border-bottom:1px solid var(--bd);border-radius:0;cursor:pointer}
#nv .ir-linha::before,#nv .ir-linha::after{content:none}
#nv .ir-linha:hover .ir-linha-t{color:var(--blue)}
#nv .ir-linha:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.ir-linha-t{overflow-wrap:anywhere;min-width:0}

/* ---- o MOVIMENTO, só para quem não pediu menos movimento ---- */
@media (prefers-reduced-motion:no-preference){
  /* a visibilidade vira NA HORA ao abrir (o foco entra no [fechar]) e só no fim ao fechar */
  .ir-folha{transition:opacity 260ms ease,transform 260ms ease,visibility 0s linear 260ms}
  .ir-veu{transition:opacity 260ms ease,visibility 0s linear 260ms}
  .ir-folha[data-aberto],.ir-veu[data-aberto]{transition-delay:0s}
  .ir-card .pc-med>b,.ir-folha .pc-med>b{transition:width 600ms cubic-bezier(.2,.7,.3,1)}
  .ir-card [data-mudou]{animation:ir-fade 320ms ease-out}
  @keyframes ir-fade{from{opacity:0}}
}
@media (prefers-reduced-motion:reduce){
  .ir-folha,.ir-veu,.ir-card .pc-med>b,.ir-folha .pc-med>b{transition:none}
  .ir-card [data-mudou]{animation:none}
}