/* Shared infrastructure. buttons.css remains the source of button geometry.
   Legacy px typography is measured by accessibility.js at its original scale. */
:root { --font-scale: 1; }
html { font-size: calc(100% * var(--font-scale)); }
@layer awx-accessibility {
html body [data-awx-a11y-font], html body[data-awx-a11y-font] {
    font-size: calc(var(--awx-a11y-font) * var(--font-scale)) !important;
}
}
html body :focus-visible {
    outline: 3px solid #005fcc !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 5px #fff !important;
}
.awx-a11y {
    display: none !important;
    position: fixed;
    inset-inline-end: max(1rem, env(safe-area-inset-right));
    bottom: max(1rem, env(safe-area-inset-bottom));
    z-index: 1040;
    font-family: system-ui, sans-serif;
    font-size: 1rem;
}
.awx-a11y[hidden], .awx-a11y-panel[hidden] { display: none !important; }
.awx-a11y-panel {
    position: absolute;
    inset-inline-end: 0;
    bottom: calc(100% + .75rem);
    width: min(20rem, calc(100vw - 3rem));
    max-height: calc(100dvh - 7rem);
    overflow-y: auto;
    padding: 1rem;
    border: 2px solid #334155;
    border-radius: .75rem;
    background: #fff;
    color: #111827;
    box-shadow: 0 .25rem 1.5rem #0003;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    overflow-wrap: anywhere;
}
.awx-a11y-panel h2 { font: 700 1.125rem/1.4 system-ui, sans-serif; margin: 0; }
.awx-a11y-panel p { font: inherit; margin: 0; color: inherit; }
.awx-a11y-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.awx-a11y .awx-button { min-height: 44px; white-space: normal; }
.awx-a11y [aria-pressed="true"] { outline: 3px double currentColor; outline-offset: -5px; }
/* Scope the overlay to the preference, leaving --awx-* theme values intact.
   Turning contrast off reveals the current theme, even if changed at runtime.
   Exclude media so course images/video retain their educational information.
   Layered important declarations outrank unlayered theme/button important
   rules, including hover and styles injected later by the theme loader. */
@layer awx-accessibility {
html.awx-a11y-contrast { color-scheme: dark; background: #000 !important; }
html.awx-a11y-contrast body,
html.awx-a11y-contrast body *:not(img):not(video):not(canvas):not(svg):not(svg *):not(iframe) {
    color: #fff !important;
    background-color: #000 !important;
    background-image: none !important;
    border-color: #fff !important;
    text-shadow: none !important;
    box-shadow: none !important;
    --bs-table-color: #fff;
    --bs-table-bg: #000;
    --bs-table-striped-color: #fff;
    --bs-table-striped-bg: #000;
    --bs-table-hover-color: #fff;
    --bs-table-hover-bg: #000;
}
html.awx-a11y-contrast body a { text-decoration: underline !important; text-underline-offset: .2em; }
html.awx-a11y-contrast body :is(button, .btn, input, select, textarea, .badge, [role="button"], .alert) {
    border: 2px solid #fff !important;
}
html.awx-a11y-contrast body ::placeholder { color: #ddd !important; opacity: 1; }
html.awx-a11y-contrast body :is(:disabled, [aria-disabled="true"], .disabled) { opacity: .65 !important; border-style: dashed !important; }
html.awx-a11y-contrast body :is(.selected, .active, .mm-active > a, [aria-selected="true"], [aria-pressed="true"], [aria-current="page"], input:checked) {
    outline: 3px double #fff;
    outline-offset: -3px;
    font-weight: 700;
}
/* Existing answer states already contain labels/icons; preserve them and add
   different border patterns. These hooks do not change the quiz's JS/classes. */
html.awx-a11y-contrast body :is(.ok, .correct, .is-valid, .alert-success, .badge.success, .inst-nav-badge.success, .lv-btn-nx-ready) { border: 3px double #fff !important; }
html.awx-a11y-contrast body :is(.err, .incorrect, .is-invalid, .alert-danger, .badge.danger, .inst-nav-badge.danger) { border: 2px dashed #fff !important; }
html.awx-a11y-contrast body :is(.pend, .alert-warning, .inst-nav-badge.warn) { border: 2px dotted #fff !important; }
html.awx-a11y-contrast body :is(button, a):hover { outline: 2px solid #fff; outline-offset: 2px; }
html.awx-a11y-contrast body :focus-visible { outline: 3px solid #ffeb00 !important; outline-offset: 4px !important; }
/* Bootstrap paints ticks and close icons using background images. Keep their
   shape visible when other decorative backgrounds are removed. */
html.awx-a11y-contrast body input:is([type="checkbox"], [type="radio"]) { appearance: auto !important; accent-color: #fff; }
html.awx-a11y-contrast body select { appearance: auto !important; }
html.awx-a11y-contrast body .btn-close { background-image: var(--bs-btn-close-bg) !important; filter: invert(1); }
}
@media (max-width: 575px) {
    .awx-a11y { inset-inline-end: .75rem; bottom: max(.75rem, env(safe-area-inset-bottom)); }
    .awx-a11y-panel { width: min(20rem, calc(100vw - 2rem)); max-height: calc(100dvh - 6rem); }
}
@media (prefers-reduced-motion: reduce) {
    .awx-a11y *, .awx-a11y *::before, .awx-a11y *::after { transition: none !important; animation: none !important; }
}
@media print { .awx-a11y { display: none !important; } }