/* GERADO por scripts/ui-sync.sh a partir de @jabutee/ui 0.2.0 (v0.2.0). Não edite aqui. */
/* Origem: os@b56335b1 packages/ui/src/secao.css */
/**
 * 📁 A SEÇÃO QUE DOBRA — o padrão da casa, fechado no Kula em 08/09/2026 e
 * trazido para o pacote em 09/09 a pedido dele ("deveria entrar no package
 * como fizemos no Kula").
 *
 * ⚖️ Três leis:
 * 1. **O título é o gesto.** Clicar no título abre e fecha. Não existe seta,
 *    triângulo nem "+/−": um marcador ao lado do título é ruído, porque o
 *    título já é o alvo e o conteúdo abaixo já diz se está aberto.
 *    ⚠️ Exceção pedida por ele em 10/09 ("têm que parecer que podemos
 *    clicar"): opt-in por classe (`details.secao.com-acao`) escreve a AÇÃO
 *    por extenso ("Mostrar"/"Ocultar", ou "Adicionar casa"/"Ocultar") na
 *    ponta direita da faixa do título, com fundo sutil no hover. Não é
 *    chevron nem pontinho piscando (cogitados e descartados: pulsar é sinal
 *    de "atenção", não de "expansível"); é a palavra, e só aparece em quem
 *    pede a classe, então o Kula e o resto do `.secao` continuam na lei 1 pura.
 * 2. **O estado se lê pela COR, não por um símbolo** (dele, 09/09: "pode só
 *    mostrar em cor diferente se está colapsado ou expandido"). Aberta, a
 *    seção tem o título na cor cheia; dobrada, o título recua para a cor de
 *    apoio, e a seção inteira vira uma linha de índice.
 * 3. **Sem `list-style`.** O marcador nativo do `<details>` (o triângulo do
 *    navegador) some nos dois motores; quem não o remove nos dois tem uma
 *    seta no Safari e nenhuma no Chrome.
 *
 * Serve tanto para `<details class="secao">` (server-side, sem JS, o Orbis)
 * quanto para o `<button class="dobra">` dentro do `h2` (com estado em React
 * e memória no `localStorage`, o Kula): as duas formas caem nas mesmas cores.
 */

/* o `<details class="secao">`: o summary é a linha do título, e só isso */
:where(details.secao) > summary {
  list-style: none;
  cursor: pointer;
}
:where(details.secao) > summary::-webkit-details-marker { display: none; }
:where(details.secao) > summary > h2 { margin: 0; }
:where(details.secao) > summary > h2,
:where(.secao) > h2 .dobra {
  transition: color var(--jb-dur-instant) var(--jb-ease);
}
/* ⚖️ Aberta, o título ADIANTA um degrau de cor; fechada, volta ao apoio. O título de seção da casa já nasce
   em `--jb-text-3`, então "dobrada = mais claro" não mudaria nada: quem se move é a aberta. */
/* ⚠️ SEM `:where()` nestas três: o app declara a cor do título de seção com uma classe (`.secao > summary > h2`),
   e `:where()` zera a especificidade do que está dentro. O estado precisa ganhar da cor de repouso do app. */
details.secao[open] > summary > h2 { color: var(--jb-text-2); }
details.secao:not([open]) > summary > h2,
.secao.dobrada > h2 .dobra { color: var(--jb-text-3); }
details.secao > summary:hover > h2,
.secao > h2 .dobra:hover { color: var(--jb-text); }
:where(details.secao) > summary:focus-visible { outline: none; box-shadow: var(--jb-focus-ring); border-radius: var(--jb-radius-xs); }

/* o botão que dobra (Kula): herda tudo do h2, sem cara de botão */
:where(.secao) > h2 .dobra {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit;
}

/* ── opt-in: a AÇÃO por extenso (`details.secao.com-acao`) ──────────────────
   A faixa do título vira um alvo de 44px de altura, inteiro clicável, com um
   `<span class="acao">` na ponta (dois, um por estado, alternados pelo
   `[open]` do `<details>`: `.acao-abrir` some quando abre, `.acao-fechar`
   aparece). O texto de cada span é do chamador (Moradias escreve "Mostrar"/
   "Adicionar casa"/"Ocultar"); este arquivo só decide QUANDO cada um aparece
   e a cara: corpo 400 12px, sublinhado só na forma "abrir" (a promessa de
   clique), fundo sutil no hover e o anel de foco (já existe na lei 3 acima,
   genérico para todo `details.secao`). */
details.secao.com-acao > summary {
  display: flex; align-items: center; min-height: 44px;
  padding: 0 var(--jb-space-sm); margin: 0 calc(var(--jb-space-sm) * -1) var(--jb-space-sm);
  border-radius: var(--jb-radius-xs);
  transition: background var(--jb-dur-instant) var(--jb-ease);
}
details.secao.com-acao > summary > h2 { flex: 1 1 auto; min-width: 0; margin: 0; }
details.secao.com-acao > summary:hover { background: var(--jb-surface-2); }
details.secao.com-acao > summary .acao {
  flex: none; margin-left: var(--jb-space-sm);
  font: var(--jb-weight-regular) 12px var(--jb-font-body); color: var(--jb-text-2);
}
details.secao.com-acao > summary .acao-abrir { text-decoration: underline; text-underline-offset: 2px; }
details.secao.com-acao > summary .acao-fechar { display: none; }
details.secao.com-acao[open] > summary .acao-abrir { display: none; }
details.secao.com-acao[open] > summary .acao-fechar { display: inline; }