/* explicacoes.css – textos explicativos da Tábua e da página Conceitos (js/tabua-explicacoes.js) */

/* Info-Symbol „i“ (Kopf der Tafel-Hilfe „Como ler“, js/tabua-guia.js) */
.ex-i{display:inline-grid;place-items:center;width:22px;height:22px;flex:none;border-radius:50%;border:1px solid var(--gold);color:var(--gold);
  font:700 12px/1 var(--display)}

/* Linha “O que mostra esta matriz?” sob o título do painel */
.ex-painel{margin-top:10px;max-width:860px}
.ex-q{margin:0;color:var(--muted);font-size:14.5px;line-height:1.6}
.ex-q b{color:var(--gold);font-weight:600;margin-right:4px}

/* “Saiba mais” */
.ex-mais{margin-top:8px;font-size:14.5px;line-height:1.65;color:var(--muted)}
.ex-mais summary{cursor:pointer;display:inline-flex;align-items:center;gap:6px;color:var(--text);font-weight:600;font-size:13px;letter-spacing:.03em;
  border:1px solid var(--line);border-radius:999px;padding:6px 14px;background:rgba(255,255,255,.03);list-style:none}
.ex-mais summary::-webkit-details-marker{display:none}
.ex-mais summary::before{content:'▸';color:var(--gold);transition:transform .2s}
.ex-mais[open] summary::before{transform:rotate(90deg)}
.ex-mais summary:hover{border-color:var(--gold);color:var(--gold)}
.ex-mais summary:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.ex-mais-in{border-left:2px solid var(--line);margin:12px 0 4px 6px;padding:2px 0 2px 16px}
.ex-mais-in p{margin:0 0 10px}
.ex-fonte{display:block;color:var(--faint);font-size:12.5px;margin:6px 0 0}

/* Página Conceitos: bloco solto dentro do texto da seção */
.cx-text .ex-solo{margin:6px 0 18px}
.cx-text .ex-solo .ex-mais-in p{font-size:15px}
.cx-text .ex-solo .ex-mais-in p.ex-fonte{font-size:12.5px;color:var(--faint)}

@media (max-width:640px){
  .ex-q,.ex-mais{font-size:14px}
}
@media print{
  .ex-mais summary{display:none}
  .ex-q{color:#444}.ex-q b{color:#111}
}