/* ══════════════════════════════════════════════════════════════
   Accessibility baseline (WCAG 2.1/2.2 AA). Loaded LAST on every
   page so component styles can't undo it. See /accessibility and
   the Accessibility Conformance Report for what each rule is for.
   ══════════════════════════════════════════════════════════════ */

/* Visually hidden but read by screen readers. */
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 2.4.1 Bypass Blocks: "Skip to main content", shown when it gets focus. */
.skip-link {
  position: fixed; top: .5rem; left: .5rem; z-index: 100000;
  padding: .6rem 1rem; border-radius: 8px;
  background: #1d4ed8; color: #fff; font: 600 .9rem/1.2 Inter, system-ui, sans-serif;
  text-decoration: none; transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* 2.4.7 Focus Visible: one clear ring for keyboard users, everywhere.
   Blue-600 keeps 3:1 against both the dark and the light themes.
   Monaco draws its own focus indicator, so it is left alone. */
:focus-visible {
  outline: 3px solid #2563eb !important;
  outline-offset: 2px !important;
}
.monaco-editor :focus-visible, .monaco-editor:focus-visible { outline: none !important; }

/* 2.4.3 Focus Order / 2.4.11 Focus Not Obscured: the closed Quick Ref
   panel sat just off-screen but stayed in the tab order and the
   accessibility tree. Hide it while closed; keep the slide animation. */
.cheat-panel:not(.open) { visibility: hidden; transition: right .3s cubic-bezier(.4,0,.2,1), visibility 0s linear .3s; }
.cheat-panel.open { visibility: visible; transition: right .3s cubic-bezier(.4,0,.2,1), visibility 0s; }

/* 1.4.3 Contrast: section labels were muted AND faded to 60%. */
.nav-section-label { opacity: 1 !important; }
/* Light theme: the active sidebar item was amber-700 on its tint (3.95:1). */
[data-theme="light"] .nav-item.active, [data-theme="light"] .nav-item.active .nav-item-label { color: #92400e; }
/* Light theme: green text tuned for dark backgrounds was 2.2-2.4:1. */
[data-theme="light"] .std-qa-learn, [data-theme="light"] .std-qa-learn:hover { color: #047857; border-color: #047857; }
/* Light theme: amber-700 text on amber tints was 4.2-4.45:1. Use amber-800. */
[data-theme="light"] .stage-num, [data-theme="light"] .badge-new, [data-theme="light"] .std-prog-n,
[data-theme="light"] .stab.stab-active, [data-theme="light"] .settings-nav-item.active,
[data-theme="light"] .unit-card-sub, [data-theme="light"] .uln-active, [data-theme="light"] .uln-active span { color: #92400e; }
[data-theme="light"] .std-qa-done { color: #047857; }
/* Locked unit cards were faded to 55%, taking their text to 2.2-3.9:1.
   Mark them with a dashed border instead and keep the text readable. */
.unit-card.unit-locked { opacity: 1 !important; border-style: dashed; }
.unit-card.unit-locked .unit-card-title { color: var(--text-2); }
/* 1.4.11 Non-text Contrast: text-field borders were ~1.3:1. 3:1+ now. (App only.) */
body:has(#page-view) :is(.form-input, .search-input, .form-select, select, textarea):not(.inputarea):not(:focus) { border-color: #6b6e78; }
[data-theme="light"] body:has(#page-view) :is(.form-input, .search-input, .form-select, select, textarea):not(.inputarea):not(:focus) { border-color: #86817b; }
/* 1.4.12 Text Spacing: let full-width buttons (e.g. "Continue: <lesson>") wrap
   instead of cutting the lesson name off. */
.std-panel > .btn { white-space: normal; height: auto; }
/* Print button: white on amber was 1.66:1. Use the theme's ink-on-accent. */
.cheat-print-btn { color: var(--accent-ink, #1c1400) !important; }

/* 2.5.8 Target Size: testimonial dots were 9px. Keep the visual dot,
   grow the clickable area to 24px. */
.testimonial-dot { position: relative; }
.testimonial-dot::after { content: ''; position: absolute; inset: 50%; width: 24px; height: 24px; transform: translate(-50%, -50%); }

/* 1.4.1 Use of Color: links inside running text need more than colour. */
footer p a, footer > a, .legal-main p a, .page-sub a { text-decoration: underline; text-underline-offset: 2px; }

/* 1.4.10 Reflow: at 320px wide the lesson grid's single track kept its
   content's min width and the top bar ran ~30px past the screen edge. */
@media (max-width: 480px) {
  .lesson-layout { grid-template-columns: minmax(0, 1fr) !important; }
  .lesson-layout > * { min-width: 0; }
  .topbar { padding-left: 12px !important; padding-right: 12px !important; }
  .topbar-right { gap: .25rem; min-width: 0; }
  .topbar-right .topbar-btn { padding-left: .5rem; padding-right: .5rem; }
  .lesson-footer-nav { flex-wrap: wrap; gap: .5rem; }
  .lesson-footer-nav .btn { white-space: normal; max-width: 100%; }
  .units-grid { grid-template-columns: minmax(0, 1fr); }
  .std-main-grid { grid-template-columns: minmax(0, 1fr); }
  .std-main-grid > * { min-width: 0; }
  div:has(> .edu-subtab) { flex-wrap: wrap; }
  footer nav { flex-wrap: wrap; }
  .legal-main .data-table { display: block; max-width: 100%; overflow-x: auto; }
}

/* 2.3.3 / 2.2.2: honour the OS "reduce motion" setting everywhere. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* Skip-link targets take focus programmatically; don't ring the whole page. */
main[tabindex="-1"]:focus, main[tabindex="-1"]:focus-visible,
#page-view[tabindex="-1"]:focus, #page-view[tabindex="-1"]:focus-visible { outline: none !important; }