/* Accessibility & readability pass (10 Nov 2026). Loaded last on main-site pages and rebuilt lessons.
   To undo: remove ml-a11y.1.css and ml-a11y.1.js from guideAssets in dist/server/typography-entry.mjs. */
@media screen{

/* 1. Answer feedback. A graded answer is shown as right or wrong, never as "selected".
      In Light, the lime "selected" rule came last and painted wrong answers lime. */
html[data-ml-theme=chalk] body #app :is(.choice.wrong,.idea-choices button.wrong,.em-choices button.em-incorrect,.eg-opt.no,.vp-options button.vp-incorrect):not(#ml-a11y){background:#FEE2E2!important;color:#7F1D1D!important;border-color:#B91C1C!important;box-shadow:inset 0 0 0 1px #B91C1C!important}
html[data-ml-theme=chalk] body #app :is(.choice.correct,.idea-choices button.correct,.em-choices button.em-correct,.eg-opt.ok,.vp-options button.vp-correct):not(#ml-a11y){background:#DCFCE7!important;color:#14532D!important;border-color:#15803D!important;box-shadow:inset 0 0 0 1px #15803D!important}
html:not([data-ml-theme=chalk]) body #app :is(.vp-options button.vp-incorrect):not(#ml-a11y){box-shadow:inset 0 0 0 1px #f69baa!important}
html:not([data-ml-theme=chalk]) body #app :is(.vp-options button.vp-correct):not(#ml-a11y){box-shadow:inset 0 0 0 1px #5fd3b2!important}

/* 2. Answer choices show their letter (the explanations refer to A–D) and, once graded,
      a word as well as a color. Screen readers already hear both from each button's label. */
#app .vp-options{counter-reset:vp-opt}
#app .vp-options button[data-vp-option]{counter-increment:vp-opt;display:flex!important;align-items:center;gap:12px}
#app .vp-options button[data-vp-option]::before{content:counter(vp-opt,upper-alpha);flex:none;display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;border:1.5px solid currentColor;font:700 13px/1 "DM Sans",system-ui,sans-serif;opacity:.85}
#app .vp-options button[data-vp-option]:is(.vp-correct,.vp-incorrect)::after{margin-left:auto;flex:none;font:700 13px/1.2 "DM Sans",system-ui,sans-serif;padding-left:8px;white-space:nowrap}
#app .vp-options button[data-vp-option].vp-correct::after{content:"✓ Correct"}
#app .vp-options button[data-vp-option].vp-incorrect::after{content:"✗ Your answer"}
/* Light: choice borders were 1.4:1 against white; now 3:1, so each choice reads as a button. */
html[data-ml-theme=chalk] body #app .vp-options button[data-vp-option]:not(.vp-correct):not(.vp-incorrect):not(.vp-selected):not(:hover){border-color:#7F8EA3!important}

/* 3. Teacher demo, Class accuracy by idea: status fills in Light (they were painted white),
      plus a strong left edge so the status does not rest on fill color alone. */
html[data-ml-theme=chalk] body .vp-table td.vp-green:not(#ml-a11y){background:#DCFCE7!important;color:#14532D!important;box-shadow:inset 5px 0 0 #15803D}
html[data-ml-theme=chalk] body .vp-table td.vp-amber:not(#ml-a11y){background:#FEF3C7!important;color:#713F12!important;box-shadow:inset 5px 0 0 #B45309}
html[data-ml-theme=chalk] body .vp-table td.vp-red:not(#ml-a11y){background:#FEE2E2!important;color:#7F1D1D!important;box-shadow:inset 5px 0 0 #B91C1C}
html:not([data-ml-theme=chalk]) body .vp-table td.vp-green{box-shadow:inset 5px 0 0 #5fd3b2}
html:not([data-ml-theme=chalk]) body .vp-table td.vp-amber{box-shadow:inset 5px 0 0 #f4c95d}
html:not([data-ml-theme=chalk]) body .vp-table td.vp-red{box-shadow:inset 5px 0 0 #f69baa}
.vp-table td:is(.vp-green,.vp-amber,.vp-red){font-weight:700;font-variant-numeric:tabular-nums}
.vp-table:focus-visible{outline:3px solid var(--green,#45DCCB);outline-offset:3px}

/* 4. Rebuilt lessons: focus ring inside the navy graph, keyboard and video cards (Light drew a dark ring on navy). */
:root[data-theme] :is(.fig,.kb,.video,.xpanel,.explore,.match-lab,.lab-modes) :focus-visible{outline:3px solid #2EC4B6!important;outline-offset:2px}

/* 5. Appearance button in the header (main site and lessons). */
.ml-theme-btn{all:unset;box-sizing:border-box;cursor:pointer;flex:none;display:inline-grid;place-items:center;width:44px;height:44px;border-radius:999px;border:1px solid rgba(234,240,248,.28);color:#EAF0F8;background:rgba(255,255,255,.04)}
.ml-theme-btn:hover{background:rgba(255,255,255,.12)}
.ml-theme-btn:focus-visible{outline:3px solid #8FD8FF!important;outline-offset:2px}
.ml-theme-btn svg{width:20px;height:20px}
html body header .ml-tools .ml-theme-btn:not(#ml-a11y){margin-left:8px;background:rgba(255,255,255,.04)!important;border:1px solid rgba(234,240,248,.28)!important;color:#EAF0F8!important;box-shadow:none!important}
html body header .ml-tools .ml-theme-btn:not(#ml-a11y):hover{background:rgba(255,255,255,.12)!important}
.topbar .ml-theme-btn:not(#ml-a11y){width:38px;height:38px;margin-left:auto;margin-right:8px;border:1px solid rgba(234,240,248,.28)!important;color:#EAF0F8!important;background:rgba(255,255,255,.04)!important}
.topbar .ml-theme-btn + .present{margin-left:0!important}
/* The header band is navy in both themes, so its focus ring is light in both (Light used a 3.1:1 blue). */
html body :is(header .ml-tools,header .ml-account-nav,.topbar) :is(button,a):focus-visible:not(#ml-a11y){outline:3px solid #8FD8FF!important;outline-offset:2px}
}
@media print{.ml-theme-btn{display:none!important}}

/* ---------- Readability (QA pass 2, Nov 2026, audit L2): no visible label below 12 px ---------- */
span.topic:not(#ml-a11y),.satp-step:not(#ml-a11y),.ml-pill:not(#ml-a11y),header .teacher:not(#ml-a11y),
.q-type:not(#ml-a11y),.ml-next-label:not(#ml-a11y),.routine > div > span:not(#ml-a11y),
span.lbl:not(#ml-a11y),span.tag:not(#ml-a11y),small.pick-value:not(#ml-a11y),.pro-card small:not(#ml-a11y),.pick-card small:not(#ml-a11y){font-size:12px!important}

/* Light theme: the "Practice this skill" next-step button drew teal text on its teal fill (QA pass 2). */
html[data-ml-theme=chalk] .ml-mk-btn:not(.alt):not(#ml-a11y){color:#FFFFFF!important;-webkit-text-fill-color:#FFFFFF}