/* ════════════════════════════════════════════════════════════
   ACCORDION — linha que abre e fecha (disclosure) · FONTE ÚNICA
   Uso: FAQ, detalhes de empreendimento, seções longas de
   formulário — conteúdo secundário que a pessoa abre quando quer.
   MOLÉCULA. Compõe: Title Component (instância, corpo Label/Large
   200) + chevron do DS + corpo de texto. Um por vez ou vários: o
   desenho não decide — FAQ deixa vários abertos; formulário longo
   fecha o anterior (orquestração de quem compõe).

   Fonte: Figma página "Accordion" (10497:241 · set 10497:254,
   eixo State Closed/Open), lido node a node em 2026-08-26.
   Item: fill Surface/Page + fio 1px Border/Default SÓ embaixo
   (border-b confirmado no node — NÃO é caixa de 4 lados); o fio
   separa os itens empilhados. Header H gap 16, pad 20/0 (sem
   padding horizontal); corpo pad-bottom 20, 600 14/20 muted.

   Motion aprovado: o corpo abre pela DOBRA de grade (0fr→1fr) —
   260ms abre / 180ms fecha, curva de superfície. Mesma receita da
   Sub Nav (cells/sub-nav.css) e dos grupos do Side Nav
   (cells/nav-item.css); o chevron gira 180° em 220ms junto.
   Nada de medir altura em JS.

   Acessibilidade: o cabeçalho é um BOTÃO (nunca div com clique)
   com aria-expanded + aria-controls; o corpo fechado sai do
   alcance do teclado (aria-hidden na dobra + inert no corpo).

   Primo: o Price Card Accordion (cells/card-price.css) é o mesmo
   comportamento especializado dentro do Card Price — este master
   é o genérico.

   Candidata registrada (não inventada aqui): hover de item no
   header (véu --hm-hover) — o master não desenha estado Hover,
   então nenhum é pintado; a affordance fica com cursor, chevron
   e foco.
   ════════════════════════════════════════════════════════════ */

/* Pilha — o master (520) é largura de demonstração: a molécula
   preenche o contêiner (mesma doutrina da Sub Nav). */
.hm-acc { display: flex; flex-direction: column; width: 100%; font-family: var(--hm-font-sans); }

/* Item — Surface/Page + fio Border/Default embaixo (border-b do
   Figma; empilhados, o fio separa as linhas). Surface/Page é o
   CHÃO da página (--hm-bg-page); no espelho do ui o papel
   surface.page atende por --hm-bg-soft — nomes divergem entre
   célula e pacote, valores batem nos 3 temas (conferido
   2026-08-26, incl. dark paper-500 opaco). */
.hm-acc__item {
  box-sizing: border-box;
  background: var(--hm-bg-page);
  border-bottom: var(--hm-stroke-1) solid var(--hm-border);
}

/* ── header — BOTÃO nativo: H, gap 16, pad 20/0 (sem horizontal) ── */
.hm-acc__header {
  -webkit-user-select: none; user-select: none;   /* B15: rótulo de controle é comando, não texto pra selecionar */
  box-sizing: border-box;
  display: flex; align-items: center; gap: var(--hm-space-16);
  width: 100%;
  padding: var(--hm-space-20) 0;
  background: none; border: 0;
  cursor: pointer; text-align: left;
  font-family: var(--hm-font-sans);
}
/* foco por teclado — anel ink por DENTRO (linha full-width, idiom do List Item) */
.hm-acc__header:focus-visible { outline: 2px solid var(--hm-fg); outline-offset: calc(var(--hm-space-2) * -1); }
/* indisponível — eixo SEM desenho no master (flag): herda o esmaecido
   base do Button (.30, cells/button.css); aria-disabled mantém o botão
   focável/descobrível (APG) — quem compõe trava o clique. */
.hm-acc__header[aria-disabled="true"] { opacity: .30; cursor: not-allowed; }

/* ── Title Component (instância) — anatomia da cells/title.css no
   corpo Label/Large 200 (700 16/18). A célula Title só cobre o corpo
   18/20; o eixo de tamanho é candidato a variante lá — aqui a recipe
   entra embutida, sem fork de comportamento. ── */
.hm-acc__head { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hm-acc__titlerow { display: flex; align-items: center; gap: var(--hm-space-8); min-height: var(--hm-scale-24); }
.hm-acc__title { font: 700 16px/18px var(--hm-font-sans); color: var(--hm-fg); }   /* Label/Large 200 · Text/Primary */
/* ⓘ tooltip 16 (opcional) — o slot do Title Component */
.hm-acc__tip { flex: none; width: var(--hm-scale-16); height: var(--hm-scale-16); display: inline-grid; place-items: center; color: var(--hm-fg-muted); cursor: help; }
.hm-acc__tip .hm-ico { width: var(--hm-scale-16); height: var(--hm-scale-16); }
/* descrição (opcional) — slot desc do Title Component (600 12/14 muted,
   respiro 4/0); não aparece no master do Accordion, vem da instância */
.hm-acc__desc { font: 600 12px/14px var(--hm-font-sans); color: var(--hm-fg-muted); padding: var(--hm-space-4) 0; }

/* chevron do DS — 24, Text/Primary; gira 180° em 220ms junto da dobra
   (mesma linha do chevron dos grupos do Side Nav, cells/nav-item.css) */
.hm-acc__chev { flex: none; width: var(--hm-scale-24); height: var(--hm-scale-24); display: grid; place-items: center; color: var(--hm-fg); transition: transform var(--hm-dur-confirm) var(--hm-ease); }
.hm-acc__chev .hm-ico { width: var(--hm-scale-24); height: var(--hm-scale-24); }
.hm-acc__item.is-open .hm-acc__chev { transform: rotate(180deg); }

/* ── corpo — revelado pela DOBRA de grade (0fr→1fr), nunca altura em JS.
   Receita idêntica à Sub Nav/grupos do Side Nav: 260ms abre (surface),
   180ms fecha (exit), curva de superfície. Fechado: aria-hidden no
   wrap + inert no body (fora do teclado e do leitor). ── */
.hm-acc__wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--hm-dur-exit) var(--hm-ease-out); }
.hm-acc__item.is-open .hm-acc__wrap { grid-template-rows: 1fr; transition-duration: var(--hm-dur-surface); }
.hm-acc__clip { overflow: hidden; min-height: 0; }
/* Body Tex/Medium 100 · Text/Muted (Figma). KAN-725 (gap conhecido do DS,
   mesmo idiom do Option Card/Choice): muted 14px reprova AA — a célula
   fica fiel ao desenho, a decisão de cor é do DS, NÃO aproximada aqui. */
.hm-acc__body { padding-bottom: var(--hm-space-20); font: 600 14px/20px var(--hm-font-sans); color: var(--hm-fg-muted); }

/* Válvula do reduce (A5, 2026-08-06): a dobra abre seca (altura é
   layout) e o chevron salta pro estado final — idiom dos grupos do
   Side Nav (cells/nav-item.css). */
@media (prefers-reduced-motion: reduce) {
  .hm-acc__wrap { transition: none !important; }
  .hm-acc__chev { transition: none; }
}