/* ==========================================================================
   SGP — Design System · Camada 10: saneamento de grid (fatia F05)
   ==========================================================================

   A CAUSA DO "CORTADO".

   Item de grid e item de flex nascem com `min-width: auto`, não com zero. Isso
   quer dizer: a caixa se recusa a ficar menor do que o conteúdo dela. Um nome
   de lista sem espaço, um <select> com uma opção comprida ou uma tabela larga
   empurram a própria coluna para além do trilho que o grid prometeu — e a
   coluna vizinha é espremida para fora da tela. O usuário vê "cortado"; o
   navegador vê um item que não podia encolher.

   O conserto é sempre o mesmo: `min-width: 0` no ITEM (não no container), mais
   uma promessa de para onde o excesso vai (reticências, quebra de linha ou
   rolagem interna). Esta folha aplica a regra de uma vez nos esqueletos que o
   sistema inteiro compartilha, para que cada tela nova não precise redescobrir.

   O saneamento está todo em `:where(...)`, que tem especificidade ZERO de
   propósito: é um piso, não um teto. Qualquer regra de tela (ex.: o
   `min-width: 8rem` das condições do construtor em 07_listas.css) continua
   vencendo sem !important.

   A única classe de especificidade normal aqui é o modificador
   `.lista__titulo--recortado`, e ela é opt-in por decisão: mudar a forma de um
   componente do design system em todas as telas não é trabalho desta fatia.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Altura do cromo fixo — o quanto do alto da janela já está ocupado.
   Quem gruda (sticky) ou quem quer rolar por dentro mede a partir daqui, em vez
   de chutar 60px. Com faixa de aviso no ar (slot topo_avisos do chassi), o
   cromo cresce e todo mundo que usa o token desce junto.
   -------------------------------------------------------------------------- */
:root {
  --alt-cromo: var(--alt-barra-topo);
}

.aplicacao:has(.barra-topo__avisos) {
  --alt-cromo: calc(var(--alt-barra-topo) + var(--alt-faixa-aviso, 34px));
}

/* --------------------------------------------------------------------------
   1. Os itens dos esqueletos podem encolher.
   -------------------------------------------------------------------------- */
:where(
  .aplicacao,
  .conteudo,
  .conteudo__interno,
  .grade,
  .grade--painel,
  .lista-pagina,
  .tres-colunas
) > * {
  min-width: 0;
}

/* Linhas de conteúdo em flex: cabeçalho/rodapé de cartão, ações de formulário,
   item de lista e cabeçalho de página. Sem isto, um título longo no cabeçalho
   empurra o botão de ação para fora do cartão. */
:where(
  .cartao__cabecalho,
  .cartao__rodape,
  .formulario__acoes,
  .cabecalho-pagina,
  .lista__item
) > * {
  min-width: 0;
}

/* --------------------------------------------------------------------------
   2. Onde o excesso vai parar.
   -------------------------------------------------------------------------- */

/* O cabeçalho do cartão é uma linha só até deixar de caber; aí ele quebra em
   vez de estourar. Vale para "O registro precisa atender as condições de
   [todos os grupos]" do construtor de listas, que é texto + <select> na mesma
   frase. */
:where(.cartao__cabecalho) {
  flex-wrap: wrap;
}

/* Reticências só existem em caixa de bloco: `overflow: hidden` é ignorado numa
   caixa inline. `.lista__titulo` já traz overflow/text-overflow/nowrap lá em
   03_componentes.css, mas é um <span> — a promessa de reticências do design
   system nunca chegou a valer, e o nome comprido atravessava a coluna inteira.

   POR QUE ISTO É UM MODIFICADOR, E NÃO UMA REGRA PARA `.lista__titulo` INTEIRO.
   Trocar o display do título no sistema todo não é conserto de grid, é mudança
   de forma em 30 telas que esta fatia não mediu — e o que ele traria junto são
   as RETICÊNCIAS (overflow/nowrap), isto é, texto virando "..." em tela que
   ninguém abriu.

   ATUALIZADO (R2): o respiro entre título e descrição já não depende disto.
   O cliente filmou os dois colados na mesma linha, e o conserto foi tornar
   `.lista__descricao` um bloco em 03_componentes.css — separação estrutural,
   sem mexer no recorte do título. O que este modificador ainda faz, e só ele,
   é ligar as reticências onde a tela foi medida.

   Pior seria o guarda que a primeira versão usava, `:not(:has(*))`: ele decide
   a forma do componente pelo DADO de runtime. Em notificações o título é
   `link_to` quando a notificação tem url e texto puro quando não tem — duas
   notificações vizinhas no mesmo dropdown ficariam com alturas e truncamentos
   diferentes sem que ninguém tivesse escrito uma regra para isso. Componente
   com duas formas decididas pelo banco é defeito, não conserto.

   Então o recorte é OPT-IN, aplicado onde a fatia mediu: a barra de listas e a
   prévia de Listas, cujos títulos são texto puro sempre (app/views/listas/
   _linha_lista.html.erb e _previa.html.erb). Uma forma só, sem `:has`. Quem
   quiser reticências em outra tela põe a classe lá e mede aquela tela.

   Sem o modificador, o título comprido ainda não corta a página: quem contém o
   excesso é a coluna (`.lista-pagina__lateral` tem overflow-y:auto, e o eixo x
   `visible` computa para `auto` junto). O modificador troca rolagem interna por
   reticências — é acabamento, não é o conserto de geometria. */
.lista__titulo--recortado {
  display: block;
}

/* Palavra sem espaço (URL, e-mail, nome de lista digitado sem espaço, regra
   crua do sistema antigo) não pode definir a largura mínima de uma coluna: é
   ela que fixa o `min-content` do item e impede o grid de encolher. Título de
   página é o caso mais visível — vem em corpo 30px, então cada caractere pesa
   três vezes mais que no texto comum. */
:where(
  .cabecalho-pagina__titulo,
  .cabecalho-pagina__descricao,
  .cartao__titulo,
  .cartao__subtitulo,
  .estado-vazio__titulo,
  .estado-vazio__texto,
  .lista__descricao,
  code
) {
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   3. Piso das colunas de mestre-detalhe.
   O esqueleto de 4 colunas (F09) e a ficha de organização herdam daqui: coluna
   que rola por dentro nunca passa da altura útil da janela.
   -------------------------------------------------------------------------- */
:where(.tres-colunas__coluna) {
  min-width: 0;
  overscroll-behavior: contain;
}