/* t88: ficha do projeto em duas colunas e as subtelas de trabalho. Prefixo `.ps-`.
   ⚠️ Tokens: o projeto define APENAS --accent --accent-ink --accent-soft
   --display --green --ink --line --muted --paper --radius --s1..--s6
   --surface. Token inventado vira currentColor e a propriedade some calada.
   ⚠️ Herda o conserto da t87: caixa com rolagem declara a própria altura, e
   quem divide o espaço usa `flex/grid` com base 0, nunca o conteúdo. */

.ps-colunas{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:16px;align-items:start}
.ps-principal,.ps-lateral{display:flex;flex-direction:column;gap:16px;min-inline-size:0}
.ps-colunas .panel{margin:0}

/* t88: faixa de indicadores do topo. Oito cartões que encolhem juntos, e que
   em 360px viram dois por linha em vez de uma tira que transborda. */
.ps-faixa{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:14px 0}
.ps-faixa-item{border:1px solid var(--line);border-radius:8px;background:var(--surface);padding:10px 12px;min-inline-size:0}
.ps-faixa-valor{margin:4px 0 2px;font-size:17px;font-weight:600;overflow-wrap:anywhere}
.ps-faixa-nota{margin:0;font-size:11px;color:var(--muted);line-height:1.4}
.ps-faixa .text-button{font-size:11px;margin-top:4px}
.ps-barra{display:block;block-size:4px;border-radius:3px;background:var(--line);margin-top:6px;overflow:hidden}
.ps-barra>span{display:block;block-size:100%;background:var(--accent)}

.ps-cartoes{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:12px 0}
.ps-cartao{border:1px solid var(--line);border-radius:8px;padding:12px;background:var(--surface);min-inline-size:0}
.ps-rotulo{margin:0;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.ps-valor{margin:6px 0 8px;font-size:20px;font-weight:600;overflow-wrap:anywhere}
.ps-cartao .text-button{font-size:12px}

.ps-selo-vazio{display:inline-block;margin:0 0 8px;padding:3px 10px;border-radius:20px;
 background:var(--accent-soft);color:var(--accent-ink);font-size:11px}
.ps-acoes ul{margin:0;padding:0}
.ps-acao{display:flex;justify-content:space-between;align-items:center;gap:10px;inline-size:100%;
 min-height:40px;border:1px solid var(--line);border-radius:8px;background:var(--surface);
 padding:9px 12px;font:inherit;font-size:13px;color:var(--ink);text-align:left;cursor:pointer}
.ps-acao:hover{border-color:var(--accent)}
.ps-linha-acoes{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}

/* A tabela dos últimos lançamentos e a memória por etapa rolam DENTRO da caixa:
   a página não pode crescer por causa de um projeto com muitos lançamentos. */
.ps-lancamentos .tabela-rolagem,.ps-etapas .tabela-rolagem{max-height:min(300px,calc(100vh - 420px));overflow:auto}

.ps-fonte{margin-top:12px;border-top:1px solid var(--line);padding-top:8px}
.ps-fonte summary{cursor:pointer;font-size:12px;color:var(--muted)}
.ps-fonte dl{display:grid;gap:6px;margin:8px 0 0;font-size:12px}
.ps-fonte dt{color:var(--muted);font-size:11px}
.ps-fonte dd{margin:0}

/* A gaveta cobre a lateral, não a tela inteira: o projeto continua à vista,
   que é o ponto de ser subtela DA ficha e não outra página. */
.ps-gaveta{position:fixed;inset-block:0;inset-inline-end:0;inline-size:min(460px,100%);
 background:var(--paper);border-inline-start:1px solid var(--line);box-shadow:-8px 0 24px rgba(0,0,0,.12);
 padding:18px;overflow-y:auto;z-index:40;display:flex;flex-direction:column;gap:12px}
.ps-gaveta-topo{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.ps-gaveta-topo h2{margin:0;font-size:18px}
.ps-gaveta-corpo{min-inline-size:0}
.ps-gaveta .drawer-dados{margin:0 0 12px}
.ps-form{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.ps-confirma{display:flex;gap:8px;align-items:flex-start;font-size:12px}
.ps-erro:empty{display:none}

@media (max-width:1100px){
 /* ⚠️ Em coluna única a lateral vai DEPOIS dos números: contrato e ações são
    contexto, e empurrá-los para cima esconderia o que a pessoa veio ver.
    ⚠️ O corte é 1100px, não 900: em 1024 a coluna principal ficava com ~640px
    e a tabela de lançamentos passava a rolar de lado 102px, medido em 22/09. */
 .ps-colunas{grid-template-columns:minmax(0,1fr)}
 .ps-gaveta{inline-size:100%;border-inline-start:0}
}

@media (max-width:600px){
 .ps-lancamentos .tabela-rolagem,.ps-etapas .tabela-rolagem{max-height:none;overflow:visible}
 .ps-lancamentos thead,.ps-etapas thead{display:none}
 .ps-lancamentos table,.ps-lancamentos tbody,.ps-lancamentos tr,.ps-lancamentos td,
 .ps-etapas table,.ps-etapas tbody,.ps-etapas tr,.ps-etapas td{display:block;inline-size:100%;box-sizing:border-box}
 .ps-lancamentos tr,.ps-etapas tr{border-bottom:1px solid var(--line);padding:10px 12px}
 .ps-lancamentos td,.ps-etapas td{border:0;padding:2px 0;text-align:left}
 .ps-lancamentos td::before,.ps-etapas td::before{content:attr(data-rotulo) ": ";color:var(--muted);font-size:11px}
 .ps-acao{min-height:44px}
}