/* cockgit — observa-etapa.css
   A FICHA de cada etapa do filme e o PLANO em tarefas (08/10/2026) — app-observa-etapa.js.

   Regras do dono que moram aqui:
     · a ficha é uma folha FIXA por cima (como a da Planta e o visor de log): a página
       nunca rola; o cabeçalho e o rodapé ficam, e só o miolo rola por dentro quando a
       tela é baixa (--pc-modal-max, nova-pecas.css);
     · cor E forma para o estado (o glifo da peça pc-st), alvo de toque de 44 px, nada
       pisca, cor só por token das peças (claro e escuro pelo light-dark). */

  /* as 6 etapas do filme viram botões (a casa inteira é o alvo) */
  .ag-etapas-bt li{padding:0}
  .ag-etapas li.p{border-top-color:var(--amber)}
  /* [10/10] devolveu para refazer (âmbar) e incompleto (âmbar tracejado) */
  .ag-etapas li.d{border-top-color:var(--amber)}
  .ag-etapas li.i{border-top-color:var(--amber);border-top-style:dashed}
  .ag-et-bt{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;min-height:44px;
    padding:6px 8px;margin:0;background:none;border:0;color:var(--mut);font:inherit;text-align:left;cursor:pointer;
    min-width:0;overflow-wrap:anywhere}
  .ag-et-bt b{color:var(--ink);font-weight:600}
  .ag-et-bt small{color:var(--mut)}
  .ag-et-bt:hover b{color:var(--blue)}
  #nv .ag-et-bt::before,#nv .ag-et-bt::after,.ag-et-bt::before,.ag-et-bt::after{content:none}
  .ag-et-bt:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}

  /* o PLANO: o x de N e as tarefas */
  .ag-plano-x{min-width:0}
  .ag-tarefas{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;min-width:0}
  .ag-tarefas li{--c:var(--idle);display:grid;grid-template-columns:18px minmax(0,1fr);gap:6px;
    padding:6px 0 6px 8px;border-top:1px solid var(--bd);box-shadow:inset 3px 0 0 var(--c);min-width:0}
  .ag-tarefas li[data-e="feito"]{--c:var(--green)}
  .ag-tarefas li[data-e="agora"]{--c:var(--blue)}
  .ag-tf-g{color:var(--c);font-weight:700}
  .ag-tf-c{display:flex;flex-direction:column;gap:1px;min-width:0;overflow-wrap:anywhere}
  .ag-tf-c b{color:var(--ink);font-weight:600}
  .ag-tf-c small{color:var(--mut);font-size:var(--t-cap,11px)}
  .ag-tf-c small.ag-tf-nova{color:var(--amber)}
  .ag-tf-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .ag-plano-fora{margin:0;color:var(--mut);font-size:var(--t-cap,11px);overflow-wrap:anywhere}

  /* a FICHA: folha fixa por cima do filme (acima do drawer, abaixo do visor de log) */
  .ag-et{position:fixed;z-index:50;left:50%;bottom:var(--pc-modal-baixo,16px);transform:translateX(-50%);
    width:min(38rem,calc(100vw - 32px));box-sizing:border-box;display:flex;flex-direction:column;gap:8px;
    max-height:var(--pc-modal-max,calc(100vh - 32px));overflow:hidden;padding:12px 14px;
    background:var(--sf);color:var(--ink);border:1px solid var(--blue);
    --t-cap:11px;--t-dat:13px;font:13px/1.45 var(--mono,ui-monospace,monospace);font-variant-numeric:tabular-nums;
    box-shadow:0 10px 32px color-mix(in oklab,var(--ink) 24%,transparent)}
  .ag-et>*{flex:none;min-width:0}
  .ag-et>.ag-et-corpo{flex:0 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
    display:flex;flex-direction:column;gap:8px}
  .ag-et-corpo:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
  .ag-et-cab{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
  .ag-et-cab>b{font-size:21px;line-height:1.2;font-weight:600}
  .ag-et-pos{flex-basis:100%;color:var(--mut);font-size:var(--t-cap);text-transform:uppercase;letter-spacing:.06em}
  .ag-et-res{margin:0;color:var(--ink);overflow-wrap:anywhere}
  .ag-et-vivo{margin:0;color:var(--blue);font-size:var(--t-cap)}
  .ag-et-pulou{margin:0;padding:6px 8px;border-left:3px solid var(--amber);background:var(--sf2);overflow-wrap:anywhere}
  .ag-et-aviso{margin:0;padding:6px 8px;border-left:3px solid var(--orange);background:var(--sf2);overflow-wrap:anywhere}
  .ag-et-cs{margin:0;display:flex;flex-direction:column;min-width:0}
  .ag-et-cs>div{display:grid;grid-template-columns:minmax(8em,11em) minmax(0,1fr);gap:2px 10px;
    padding:4px 0;border-top:1px solid var(--bd)}
  .ag-et-cs dt{color:var(--mut)}
  .ag-et-cs dd{margin:0;color:var(--ink);overflow-wrap:anywhere}
  .ag-et-sub{margin:0;color:var(--mut)}
  .ag-et-mot{margin:0;padding-left:18px;overflow-wrap:anywhere}
  .ag-et-rod{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:6px}
  .ag-et-lks{display:flex;flex-wrap:wrap;gap:0 14px;margin-right:auto;min-width:0}
  .ag-et-lk{display:inline-flex;align-items:center;min-height:44px;padding:0;background:none;border:0;
    color:var(--blue);font:inherit;text-decoration:underline;cursor:pointer}
  .ag-et-b{min-height:44px;padding:6px 12px;font:inherit;background:var(--sf);color:var(--ink);
    border:1px solid var(--bd);border-radius:0;cursor:pointer}
  .ag-et-b:hover{border-color:var(--blue)}
  .ag-et-b[disabled]{color:var(--idle);cursor:default}
  #ag-et .ag-et-b::before,#ag-et .ag-et-b::after,#ag-et .ag-et-lk::before,#ag-et .ag-et-lk::after{content:none}
  .ag-et-b:focus-visible,.ag-et-lk:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
  @media (max-width:599.98px){
    .ag-et-cs>div{grid-template-columns:minmax(0,1fr)}
    .ag-et-rod .ag-et-b{flex:1 1 auto}
  }
  @media (prefers-reduced-motion:reduce){ .ag-et *{transition:none !important;animation:none !important} }