/* aula-extra-10.css — estilos específicos da Aula Extra 10 (Tumores do Mediastino).
   Herda 100% dos tokens da plataforma (tokens.css) e os componentes (components.css).
   NÃO redefine token canônico.
   Os 9 SVGs interativos usam a engine CANÔNICA de hotspot (initInteractive →
   .figure-svg__stage[data-hs-stage] + .hs-shape + .hotspot-detail). Como o components.css
   já cobre .hs-shape (hover/foco/active/tone) e .hotspot-detail (tones), este arquivo só
   acrescenta: (a) garantia de responsividade do SVG dentro da coluna e (b) cursor pointer
   no shape-alvo. Sem comportamento bespoke — mediastino-interactive.js é um stub no-op.
   Paleta semântica da aula (mediastino): teal = baseline/benigno/ressecável/bom prognóstico ·
   coral = maligno/contiguidade/grau III · âmbar (--warn-amber) = pegadinha/linfoma onipresente ·
   verde (--ok-green) = bom prognóstico/só timectomia · vermelho (--err-red) = implante/perigo/
   carcinoma tímico/mau prognóstico. Cor nunca é único portador — rótulo textual sempre presente.
   ZERO hex novo: só var(--token) canônico. */

/* responsivo: SVGs grandes escalam sem estourar a coluna (defensivo; o chassi já põe
   width:100% no svg; isto cobre stage/frame em qualquer browser). */
.figure-svg__stage svg,
.figure-svg__frame svg { max-width: 100%; height: auto; }

/* o elemento desenhado é o alvo do clique (regra de luxo Bauer) — cursor coerente */
.figure-svg .hs-shape { cursor: pointer; }

/* foco visível padronizado em qualquer alvo interativo dentro do SVG (não remover outline) */
.figure-svg svg [tabindex]:focus-visible,
.figure-svg svg [role="button"]:focus-visible {
  outline: 2px solid var(--warn-amber);
  outline-offset: 2px;
}