/* PR #24: Accessibility & Inclusive Student Experience */
:root{--focus-ring:#0b57d0;--focus-offset:#fff}
html{scroll-behavior:smooth}
body{overflow-wrap:anywhere}
/* Data-table cells size to whole words so headings like "Earlier" do not split mid-word on phones. */
th,td{overflow-wrap:break-word}
.skip-link{position:fixed;left:12px;top:12px;z-index:1000000;background:#fff;color:#0f172a;border:3px solid #0f172a;border-radius:10px;padding:10px 14px;font-weight:900;transform:translateY(-180%)}
.skip-link:focus{transform:none}
:where(a,button,input,select,textarea,[tabindex]:not([tabindex="-1"])):focus-visible{outline:3px solid var(--focus-ring)!important;outline-offset:3px!important;box-shadow:0 0 0 2px var(--focus-offset)!important}
button,.btn,.choice-btn,.filter-btn,.unit-btn,.check-btn{min-height:44px}
input,select,textarea{min-height:44px}
button[disabled],.btn[aria-disabled="true"]{opacity:.68}
.a11y-status-prefix{font-weight:900;margin-right:.35em}
.a11y-live-region{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.a11y-dialog-panel{outline:none}
.a11y-section-note{max-width:72ch}
.quiz-question h3,.explain-box,.scenario-box,.rubric-row,.model-answer,.term-row,.box-info,.box-good,.box-warn,.box-yellow{max-width:78ch}
@media(max-width:640px){
  body{font-size:17px;line-height:1.65}
  main{padding-left:14px;padding-right:14px}
  .card{padding:18px}
  button,.btn,.choice-btn,.filter-btn,.unit-btn,.check-btn{min-height:48px;font-size:max(16px,1em)}
  .btn-sm{min-height:44px;font-size:15px}
  .choice-btn{padding:14px 16px;line-height:1.45}
  nav button{min-height:48px;padding:12px 16px}
  .filter-row{gap:10px}
  .flashcard-controls{gap:12px}
  .flashcard{min-height:220px;padding:22px}
  .flashcard .front{font-size:clamp(25px,8vw,32px)}
  .answer-textarea{min-height:170px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .flashcard:hover,.path-card:hover{transform:none!important}
}
@media(forced-colors:active){
  :where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:3px solid Highlight!important}
  .choice-btn.correct,.choice-btn.wrong,.box-good,.box-warn,.check-btn.done,.check-btn.notyet{border:2px solid CanvasText!important}
}