/* =========================================================================
   ROBERIX STUDY — accessibility.css
   Modo acessível: fonte grande, alto contraste, espaçamento maior, áudio.
   ========================================================================= */

body.a11y-large {
  font-size: 19px;
}
body.a11y-large .alt { padding: 18px; font-size: 1.08rem; }
body.a11y-large .btn { min-height: 48px; padding: 12px 18px; }
body.a11y-large h1 { font-size: 2.1rem; }

body.a11y-contrast {
  --bg: #000000;
  --bg-2: #050505;
  --panel: #111111;
  --panel-2: #181818;
  --panel-hi: #222222;
  --line: #5a5a5a;
  --line-2: #7a7a7a;
  --text: #ffffff;
  --text-dim: #f0f0f0;
  --text-mute: #b8b8b8;
}
body.a11y-contrast .btn { border-width: 2px; }
body.a11y-contrast .alt { border-width: 2px; }

body.a11y-spaced {
  line-height: 1.85;
}
body.a11y-spaced p, body.a11y-spaced li { margin-bottom: 10px; }
body.a11y-spaced .alt { line-height: 1.7; }

/* Foco bem visível para teclado */
:focus-visible {
  outline: 3px solid #ffffff !important;
  outline-offset: 2px !important;
}

/* Dica para leitor de tela */
.sr-only {
  position: absolute;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Caixa de explicação simples (modo "explica como se eu tivesse 10 anos") */
.eli10 {
  background: #f4f4f4;
  color: #0a0a0a;
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-top: 10px;
  font-size: 1.02rem;
  line-height: 1.65;
}
.eli10 strong { color: #000; }
.eli10 .label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .2em;
  background: #0a0a0a;
  color: #f4f4f4;
  padding: 2px 8px;
  border-radius: 4px;
  display: inline-block;
  margin-bottom: 8px;
}