/* t84 leva 2: o Gerenciador do site em abas. Prefixo `.sg-`.
   ⚠️ `.site-` é das folhas antigas desta mesma tela, que continuam valendo
   dentro das abas (acervo, editor e feed não foram reescritos).

   ⚠️ Tokens: o projeto define APENAS --accent --accent-ink --accent-soft
   --display --green --ink --line --muted --paper --radius --s1..--s6
   --surface. Token inventado sem fallback vira currentColor e a borda sai
   preta, sem a captura denunciar. As cores de estado abaixo são hex fixos
   porque não existe token de fundo verde nem vermelho. */

.sg-pagina{min-width:0;display:flex;flex-direction:column;gap:16px}
.sg-acoes-topo{display:flex;gap:10px;flex-wrap:wrap}

.sg-cartoes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.sg-cartao{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:18px;min-width:0}
.sg-cartao>span{display:block;color:var(--muted);font-size:11px}
.sg-cartao strong{display:block;font-size:30px;font-weight:500;margin:10px 0 6px;letter-spacing:-1px;overflow-wrap:anywhere}
/* ⚠️ Cartão sem número não recebe zero grande: recebe a frase do que é
   verdade. Zero enorme parece defeito de carga. */
.sg-cartao strong.sg-frase{font-size:15px;letter-spacing:0;line-height:1.35;margin:8px 0 6px}
.sg-cartao small{display:block;color:var(--muted);font-size:11px;line-height:1.5}
.sg-cartao a,.sg-cartao .text-button{display:inline-block;margin-top:8px;padding:0;font-size:12px}

.sg-abas{display:flex;gap:8px;flex-wrap:wrap;border-bottom:1px solid var(--line)}
.sg-aba{border:0;border-bottom:2px solid transparent;background:none;padding:10px 14px;font:inherit;
 font-size:13px;color:var(--muted);cursor:pointer;margin-bottom:-1px}
.sg-aba[aria-selected=true]{color:var(--ink);border-bottom-color:var(--accent);font-weight:600}
.sg-aba:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sg-aba span{color:var(--muted);font-weight:400}
/* O ponto de "não salvo" na aba: o rascunho fica guardado na aba escondida, e
   esta é a única pista de que ele existe. */
.sg-sujo{color:var(--accent);font-weight:700}

/* ⚠️ A região escondida some pelo atributo padrão de ocultar, e o nó NÃO é
   removido: é isso que preserva rascunho, upload em voo e as guardas
   `isConnected` dos módulos. `display:none` soma zero pixel, então a meta de
   altura continua de pé. Quem esconde é a regra GLOBAL de `style.css`,
   declarada uma vez só; redeclarar aqui por seletor é o remendo que o teste
   do shell impede, e o teste procura a string em QUALQUER folha, inclusive
   dentro de comentário. */
.sg-painel{min-width:0}

.sg-corpo{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start;min-width:0}
@media (min-width:1180px){
 .sg-corpo.sg-com-lado{grid-template-columns:minmax(0,1fr) minmax(360px,420px)}
}
.sg-bloco{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:18px 20px;min-width:0}
.sg-bloco>h2{margin:0 0 4px;font-size:16px}
.sg-bloco>p{margin:0 0 14px;font-size:13px;color:var(--muted);line-height:1.5}

/* ⚠️ ALTURA declarada NESTA caixa: `flex:1 1 0` sob um pai que só tem
   `max-height` nasce com ZERO pixels, o conteúdo fica no DOM, a asserção por
   texto passa e a tela aparece vazia. Aconteceu na t81 e na t83. */
.sg-rolagem{max-height:min(520px,calc(100vh - 380px));min-height:140px;overflow-y:auto;
 min-inline-size:0;contain:layout paint}
.sg-rolagem-curta{max-height:min(360px,calc(100vh - 460px))}
.sg-linha{border-bottom:1px solid var(--line);padding:12px 2px}
.sg-linha:last-child{border-bottom:0}
.sg-linha strong{font-size:13px;overflow-wrap:anywhere}
.sg-linha p{margin:4px 0 0;font-size:12px;color:var(--muted)}
.sg-linha small{display:block;margin-top:4px;font-size:11px;color:var(--muted)}
.sg-linha pre{max-height:240px;overflow:auto;font-size:11px}
.sg-vazio{color:var(--muted);font-size:13px;margin:0;padding:26px 0;text-align:center}
.sg-estado{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11px;font-weight:600;background:#f4f3ef;color:var(--muted)}
.sg-estado[data-state=succeeded]{background:#e3eee5;color:#214c2c}
.sg-estado[data-state=failed],.sg-estado[data-state=dead]{background:#f9e2de;color:#762d20}
.sg-estado[data-state=running],.sg-estado[data-state=queued]{background:var(--accent-soft);color:var(--accent-ink)}

/* Biblioteca de mídia: grade de miniaturas do que está EM USO. */
.sg-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.sg-midia{border:1px solid var(--line);border-radius:8px;overflow:hidden;min-width:0;background:var(--surface)}
.sg-midia img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--paper)}
.sg-midia figcaption{padding:8px 10px;font-size:11px;color:var(--muted);line-height:1.4;overflow-wrap:anywhere}
.sg-midia strong{display:block;font-size:12px;color:var(--ink);overflow-wrap:anywhere}

.sg-filtros{display:flex;flex-wrap:wrap;gap:12px;align-items:end;margin:0 0 12px;min-width:0}
.sg-filtros label{margin:0;flex:0 1 190px;min-width:0}
.sg-filtros .sg-busca{flex:1 1 260px}
.sg-filtros input,.sg-filtros select{margin-top:6px}
.sg-nota{font-size:12px;color:var(--muted);margin:0;line-height:1.5}

@media (max-width:900px){
 .sg-cartoes{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
 .sg-cartoes{gap:10px}
 .sg-cartao{padding:14px}
 .sg-cartao strong{font-size:24px}
 /* Ação de cartão é toque, não texto corrido: 16px de altura era alvo
    pequeno demais no celular. */
 .sg-cartao .text-button,.sg-cartao a{min-height:44px;display:inline-flex;align-items:center}
 .sg-abas{display:grid;grid-template-columns:1fr 1fr;gap:0;border-bottom:0}
 .sg-aba{border:1px solid var(--line);border-radius:8px;margin:0 0 8px}
 .sg-aba[aria-selected=true]{border-color:var(--accent);background:var(--accent-soft)}
 .sg-filtros{display:block}
 .sg-filtros label{margin-bottom:10px;flex:none}
 /* No celular a caixa solta a rolagem para a página: caixa rolável dentro de
    outra é o que faz o dedo prender. */
 .sg-rolagem,.sg-rolagem-curta{max-height:none;overflow-y:visible;contain:none}
 .sg-grade{grid-template-columns:repeat(2,minmax(0,1fr))}
 .sg-acoes-topo button{flex:1 1 140px;min-height:44px}
}

/* ⚠️ Medido na URL real em 21/09, com o acervo de verdade: a lista de 20
   projetos ocupava 1.913 px sozinha, e a aba Portfólio chegava a 2.983 px
   (5.727 no celular). Na fixture, com acervo vazio, ela media 1.072 px e o
   problema não aparecia: é o tipo de coisa que só o dado real mostra.
   A altura é declarada AQUI, e não no módulo, porque ele continua servindo a
   tela antiga sem abas. `contain` impede que a lista empurre a página. */
.sg-painel .site-project-list{max-height:min(560px,calc(100vh - 430px));min-height:200px;
 overflow-y:auto;min-inline-size:0;contain:layout paint}
@media (max-width:600px){
 /* No celular a lista rola com a página: caixa dentro de caixa prende o dedo. */
 .sg-painel .site-project-list{max-height:none;overflow-y:visible;contain:none}
}