/* Accessibility settings (a11y.js): the button that opens them, their dialog, and what
   the settings change on every page, including over a seasonal theme. The page's own
   styles handle its own content under the same data- attributes on <html>.

   The button and dialog are made from the same wood as the sign: a plank of dark wood
   with gilded lettering, and a cream panel set into a wooden frame. Every colour pair
   meets WCAG AAA: text 7:1 or more (the lightest gilded text on the lightest wood is
   7.8:1, and the grain only darkens the wood), and controls 3:1 or more against what is
   around them. High contrast flattens it all to black and white. */

:root {
    --a11y-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='320'%3E%3Cfilter id='g' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.006 0.11' numOctaves='4' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 0.24 0 0 0 0 0.13 0 0 0 0 0.05 0 0 0 2 -0.6'/%3E%3C/filter%3E%3Crect width='640' height='320' filter='url(%23g)'/%3E%3C/svg%3E");
    --a11y-gilt: #f6dd8f;
    --a11y-ink: #2a1708;
    --a11y-ink-soft: #4a3420;
    --a11y-paper: #fbf4e4;
    --a11y-edge: #6b4423;
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* A focus ring that shows on any background: white, black, white */
.a11y-open:focus-visible,
.a11y-dialog :focus-visible,
:root[data-contrast="high"] :focus-visible {
    outline: 3px solid #000;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px #fff, 0 0 0 7px #fff;
}

/* The button: a small wooden plank with gilded lettering. It scrolls with the page
   rather than staying fixed, so it never covers what has focus. */
.a11y-open {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 50;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    font: 400 1.05rem/1 'Oswald', 'Arial Narrow', sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--a11y-gilt);
    text-shadow: -1px -1px 0 rgba(40, 18, 0, 0.75);
    background: var(--a11y-grain) 0 0 / 640px 320px, linear-gradient(#5c3719, #48290f);
    border: 2px solid #2a1405;
    border-radius: 6px;
    box-shadow:
        inset 2px 2px 0 rgba(255, 222, 175, 0.2),
        inset -2px -2px 0 rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(255, 236, 190, 0.45),
        0 4px 10px rgba(0, 0, 0, 0.35);
    cursor: pointer;
}

.a11y-open:hover {
    background: var(--a11y-grain) 0 0 / 640px 320px, linear-gradient(#4a2c14, #3a200c);
}

.a11y-open svg {
    width: 26px;
    height: 26px;
    flex: none;
}

/* The button shows only the accessibility symbol. Its name, "Accessibility", is in the
   markup for screen readers and speech control, and appears as a tooltip under the
   button on hover and keyboard focus. The tooltip is part of the button, so the pointer
   can move onto it without losing it, and Escape hides it (a11y.js), as WCAG 1.4.13 asks. */
.a11y-open span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.a11y-open:is(:hover, :focus-visible):not(.quiet) span {
    top: 100%;
    right: -2px;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    margin-top: 6px;
    padding: 5px 10px;
    font: 400 0.95rem/1.2 'Oswald', 'Arial Narrow', sans-serif;
    letter-spacing: 0.5px;
    text-transform: none;
    text-shadow: none;
    color: var(--a11y-ink);
    background: var(--a11y-paper);
    border: 2px solid var(--a11y-edge);
    border-radius: 4px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
}

/* Bridges the gap between button and tooltip, so the pointer can cross it */
.a11y-open:is(:hover, :focus-visible):not(.quiet) span::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 8px;
}

/* The dialog: a cream panel set into a frame of the sign's wood */
.a11y-dialog {
    width: min(34rem, calc(100vw - 32px));
    max-height: calc(100dvh - 32px);
    margin: auto;
    padding: 12px;
    overflow: auto;
    color: var(--a11y-ink);
    background:
        var(--a11y-grain) 0 0 / 640px 320px,
        linear-gradient(#a06c3c, #8c5a2e 55%, #774a24);
    border: 0;
    border-radius: 8px;
    box-shadow:
        inset 3px 3px 0 rgba(255, 222, 175, 0.28),
        inset -3px -3px 0 rgba(0, 0, 0, 0.35),
        0 0 0 4px #4a2c14,
        0 14px 34px rgba(0, 0, 0, 0.5);
    font: 1rem/1.5 Arial, sans-serif;
    text-align: left;
}

.a11y-dialog::backdrop {
    background: rgba(20, 10, 4, 0.7);
}

.a11y-body {
    padding: 18px 22px 20px;
    background: var(--a11y-paper);
    border-radius: 4px;
    box-shadow: inset 0 0 0 1px rgba(58, 32, 12, 0.6), inset 0 3px 6px rgba(58, 32, 12, 0.22);
}

/* Lettering like the sign's: Anton, carved in dark brown */
.a11y-dialog h2 {
    margin: 0 0 4px;
    font: 400 1.75rem/1.15 'Anton', Impact, 'Arial Narrow', sans-serif;
    letter-spacing: 1px;
    color: #3a200c;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.7);
}

.a11y-intro,
.a11y-hint {
    margin: 0;
    color: var(--a11y-ink-soft);
}

.a11y-options {
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

/* Each row: the name, the word On or Off, and the switch; the hint underneath */
.a11y-options li {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    column-gap: 10px;
    padding: 4px 0 10px;
    border-top: 1px dashed #c9b48c;
}

/* The label is the larger target: the whole name, at least 44px tall */
.a11y-options label {
    display: flex;
    align-items: center;
    min-height: 44px;
    font: 400 1.15rem/1.25 'Oswald', 'Arial Narrow', sans-serif;
    letter-spacing: 0.3px;
    color: var(--a11y-ink);
    cursor: pointer;
}

/* The state in words, so it never depends on colour or the knob's position alone.
   Hidden from screen readers, which hear the switch's own state. */
.a11y-state {
    min-width: 2.2em;
    text-align: right;
    font: 400 0.9rem/1 'Oswald', 'Arial Narrow', sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--a11y-ink);
}

.a11y-state::after {
    content: 'Off';
}

.a11y-options li:has(.a11y-switch:checked) .a11y-state::after {
    content: 'On';
}

.a11y-hint {
    grid-column: 1 / -1;
    font-size: 0.95rem;
}

/* A brass knob in a groove: off, it sits left in a pale groove; on, it slides right
   into dark wood. Still a real checkbox (role="switch"), so keyboards and screen
   readers treat it as one. */
.a11y-switch {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    flex: none;
    width: 56px;
    height: 32px;
    margin: 0;
    background: #efe4cc;
    border: 2px solid var(--a11y-edge);
    border-radius: 16px;
    box-shadow: inset 0 2px 3px rgba(58, 32, 12, 0.35);
    cursor: pointer;
}

.a11y-switch::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    box-sizing: border-box;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff3c0, #d4a640 55%, #8a6a12);
    border: 2px solid #3a200c;
    transition: transform 0.15s ease-out;
}

.a11y-switch:checked {
    background: var(--a11y-grain) 0 0 / 640px 320px, #4a2c14;
    border-color: #2a1405;
}

.a11y-switch:checked::before {
    transform: translateX(24px);
    border-color: var(--a11y-gilt);
}

:root[data-motion="reduce"] .a11y-switch::before {
    transition: none;
}

.a11y-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.a11y-actions button {
    min-height: 44px;
    padding: 0 16px;
    font: 400 1.05rem/1.2 'Oswald', 'Arial Narrow', sans-serif;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--a11y-ink);
    background: #f3e6c8;
    border: 2px solid var(--a11y-edge);
    border-radius: 6px;
    cursor: pointer;
}

.a11y-actions button:hover {
    background: #eadbb5;
}

/* The preset is the one to look for: a dark plank with gilded lettering */
.a11y-actions [data-action="strict"] {
    color: var(--a11y-gilt);
    text-shadow: -1px -1px 0 rgba(40, 18, 0, 0.75);
    background: var(--a11y-grain) 0 0 / 640px 320px, linear-gradient(#4a2c14, #3a200c);
    border-color: #2a1405;
}

.a11y-actions [data-action="strict"]:hover {
    background: var(--a11y-grain) 0 0 / 640px 320px, #2a1405;
}

.a11y-status:empty {
    display: none;
}

.a11y-status {
    margin: 12px 0 0;
    font: 400 1.05rem/1.4 'Oswald', 'Arial Narrow', sans-serif;
    color: var(--a11y-ink);
}

/* High contrast: the wood and gilding give way to plain black and white */
:root[data-contrast="high"] .a11y-open {
    color: #fff;
    text-shadow: none;
    background: #000;
    border-color: #fff;
    box-shadow: 0 0 0 2px #000;
}

:root[data-contrast="high"] .a11y-open:is(:hover, :focus-visible):not(.quiet) span {
    color: #000;
    background: #fff;
    border-color: #000;
}

:root[data-contrast="high"] .a11y-dialog {
    background: #000;
    box-shadow: 0 0 0 3px #fff;
}

:root[data-contrast="high"] .a11y-body {
    background: #fff;
    box-shadow: none;
}

:root[data-contrast="high"] :is(.a11y-dialog h2, .a11y-intro, .a11y-hint, .a11y-options label, .a11y-state, .a11y-status) {
    color: #000;
    text-shadow: none;
}

:root[data-contrast="high"] .a11y-options li {
    border-top: 1px solid #000;
}

:root[data-contrast="high"] .a11y-switch {
    background: #fff;
    border-color: #000;
    box-shadow: none;
}

:root[data-contrast="high"] .a11y-switch::before {
    background: #000;
    border-color: #000;
}

:root[data-contrast="high"] .a11y-switch:checked {
    background: #000;
}

:root[data-contrast="high"] .a11y-switch:checked::before {
    background: #fff;
    border-color: #fff;
}

:root[data-contrast="high"] .a11y-actions button {
    color: #000;
    text-shadow: none;
    background: #fff;
    border-color: #000;
}

:root[data-contrast="high"] .a11y-actions [data-action="strict"] {
    color: #fff;
    background: #000;
}

/* High contrast over a theme: its text badges and speech bubbles become black on white */
:root[data-contrast="high"] :is(.kit-says, .tally, .hunt-score, .countdown, .egg-bubble, .knob-sign) {
    color: #000 !important;
    background: #fff !important;
    border: 2px solid #000 !important;
    text-shadow: none !important;
}

:root[data-contrast="high"] .kit-says::after {
    border-top-color: #000 !important;
}

/* Windows High Contrast and other forced colours: system colours throughout, with the
   switch drawn by hand because its own appearance is turned off */
@media (forced-colors: active) {
    .a11y-open,
    .a11y-actions button,
    .a11y-dialog {
        border: 2px solid ButtonText;
    }

    .a11y-switch {
        forced-color-adjust: none;
        background: Canvas;
        border-color: ButtonText;
    }

    .a11y-switch::before {
        background: ButtonText;
        border-color: ButtonText;
    }

    .a11y-switch:checked {
        background: Highlight;
        border-color: Highlight;
    }

    .a11y-switch:checked::before {
        background: HighlightText;
        border-color: HighlightText;
    }

    .a11y-open:focus-visible,
    .a11y-dialog :focus-visible {
        outline-color: Highlight;
    }
}