/*
  Folha de estrutura da celula intermediario-2.
*/

/*
  SDD-builder-interativos F-INT-2 (ADR-5) — o ACABAMENTO do acordeao e das abas.

  Ele mora na CELULA, e nao no tema: a decisao de 13/09 e' que "os itens entram
  na familia que aquele tema pertence". Seis copias do mesmo desenho divergiriam
  no primeiro ajuste — e a divergencia apareceria como "o acordeao do Bussola e'
  diferente do acordeao do Serra", sem que ninguem tenha escolhido isso.

  O que entra: ritmo, grade, tamanho e raio — o vocabulario desta folha desde a
  emenda do ADR-6 da administracao da loja. A COR nao entra: as linhas usam
  `currentColor` diluido, que herda a tinta do tema sem nomea-la.

  A linha tem DUAS declaracoes de proposito: a primeira e' a reserva para quem
  nao entende `color-mix`, e a segunda e' a boa. Sem a primeira, um navegador
  antigo ficaria sem separador nenhum.
*/
/*
  Intermediario 2. Esta folha NASCE com o acordeao e as abas, e mais nada: ate'
  a F-INT-2 o tema desta celula carregava so' `base.css` e a folha propria. Pôr
  aqui o resto da estrutura dele e' trabalho de outro SDD — o que nao pode e'
  o desenho destes dois elementos nascer no tema, que e' de onde ele nunca mais
  sai.
*/

/* ── Acordeao ─────────────────────────────────────────────────────────── */

.mmc-acordeao > details { padding: 18px 16px; }
.mmc-acordeao > details + details { margin-top: 12px; }

.mmc-acordeao > details > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: 1.08rem;
  border-bottom: 1px solid;
  padding-bottom: 10px;
}

/*
  A seta e' desenhada aqui, e nao herdada do navegador: o marcador padrao muda
  de forma em cada um, e uma seta que gira diz "isto abre" antes de a pessoa
  clicar. `transition` so' na transformacao — o bloco de movimento reduzido do
  `base.css` ja' a neutraliza para quem pediu menos movimento.
*/
.mmc-acordeao > details > summary::after {
  content: ""; flex: none; width: .5em; height: .5em;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-.1em, -.1em); transition: transform .18s ease;
}
.mmc-acordeao > details[open] > summary::after { transform: rotate(-135deg) translate(-.15em, -.15em); }

.mmc-acordeao > details > summary + * { margin-top: 12px; }

/* ── Abas ─────────────────────────────────────────────────────────────── */

.mmc-abas > .mmc-abas-fitas {
  display: flex; flex-wrap: wrap; gap: 4px;
  border-bottom: 1px solid;
  margin-bottom: 26px;
}

.mmc-abas > .mmc-abas-fitas > [role="tab"] {
  padding: 12px 16px;
  border-radius: 12px 12px 0 0;
  border-bottom: 0 solid; margin-bottom: -1px;
  opacity: .55; transition: opacity .15s ease;
}

.mmc-abas > .mmc-abas-fitas > [role="tab"]:hover { opacity: .85; }

/*
  A aba aberta se marca por `aria-selected`, que e' o MESMO atributo que o
  leitor de tela anuncia. Uma classe a mais aqui seria uma segunda verdade sobre
  qual aba esta' aberta — e as duas divergiriam no primeiro ajuste do runtime.
*/
.mmc-abas > .mmc-abas-fitas > [role="tab"][aria-selected="true"] { opacity: 1; border-bottom-width: 2px; }

/* ── Divisor ──────────────────────────────────────────────────────────── */

/*
  O `<hr>` do divisor. Sem esta regra ele fica com a borda `inset` do navegador
  — cinza fixo, grossa e diferente em cada um —, que e' o mais perto de "sem
  desenho" que um elemento pode ficar.

  A linha nao declara COR: `border-top: 1px solid` sem cor usa `currentColor`, e
  a opacidade faz o resto. Cor e' do tema, nao da celula.
*/
hr {
  border: 0;
  border-top: 1px solid;
  opacity: .25;
  margin: 0;
}