/**
 * Accessibility panel.
 *
 * DELIBERATELY OUTSIDE THE THEME PALETTE. This widget must stay legible whatever the theme
 * knobs in main.css are set to, and it must not be re-coloured by the display filters it
 * applies to the rest of the page (hence `filter: none !important` on the toggle and
 * panel). Its colours are therefore scoped to the widget below, not to :root — do not
 * replace them with theme tokens.
 *
 * The same reasoning covers shape: every length here is a literal, including the corner
 * radii. This stylesheet must not read --radius-* and inherit the site's corner setting,
 * because the widget has to stay recognisable as itself at any setting.
 *
 * The derived values below are mixed from the widget's OWN three colours, never from a
 * theme token, so the whole palette still moves together from one place while staying
 * independent of the site.
 *
 * The contrast / underline rules further down use literal black, white and cyan on
 * purpose: forcing maximum contrast is the whole point, so those must not be derived from
 * anything.
 *
 * The keyboard focus ring is the exception that proves the rule — it is scoped to the
 * widget and drawn in the widget's own accent, because a global `*:focus-visible` override
 * would fight every other focus style on the site.
 */

.as-access-toggle,
.as-access-panel {
    --as-accent: #1e7ab9;
    --as-surface: #ffffff;
    --as-ink: #000000;

    /* Derived from the three above, so the widget keeps one source of truth without
       reaching outside itself. */
    --as-muted: color-mix(in srgb, var(--as-ink) 62%, var(--as-surface));
    --as-line: color-mix(in srgb, var(--as-ink) 16%, var(--as-surface));
    --as-wash: color-mix(in srgb, var(--as-ink) 4%, var(--as-surface));
    --as-accent-wash: color-mix(in srgb, var(--as-accent) 10%, var(--as-surface));
}

/* ---------------------------------------------------------------- the toggle */

/* A 48px circle, the same size as #topBtn on the other side of the viewport, so the two
   floating controls read as a pair. The literal 50% is deliberate: this stylesheet is
   scoped out of the theme's token system, so it must not reach for --radius-round.

   The blue is a convention rather than a brand colour — an accessibility control is
   looked for, and looked for in blue — which is a second reason this widget does not
   follow the site's palette. */
.as-access-toggle {
    position: fixed;
    bottom: 15px;
    left: 10px;
    z-index: 9999;
    background: var(--as-accent);
    color: var(--as-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 50%;
    cursor: pointer;
    border: 1px solid color-mix(in srgb, var(--as-surface) 55%, transparent);
    box-shadow: 0 2px 10px color-mix(in srgb, var(--as-ink) 45%, transparent);
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    filter: none !important;
}

.as-access-toggle:hover {
    background: color-mix(in srgb, var(--as-accent) 82%, var(--as-ink));
    box-shadow: 0 3px 14px color-mix(in srgb, var(--as-ink) 55%, transparent);
}

.as-access-toggle .as-icon {
    width: 26px;
    height: 26px;
}

/* ---------------------------------------------------------------- the panel */

.as-access-panel {
    position: fixed;
    bottom: 72px;
    left: 10px;
    /* Never wider than the viewport it floats over. */
    width: min(288px, calc(100vw - 20px));
    background: var(--as-surface);
    color: var(--as-ink);
    border: 1px solid var(--as-line);
    border-radius: 12px;
    z-index: 9999;
    padding: 14px;
    font-size: 15px;
    line-height: 1.4;
    direction: rtl;
    box-shadow: 0 8px 28px color-mix(in srgb, var(--as-ink) 38%, transparent);
    overflow-y: auto;
    max-height: -webkit-fill-available;
    filter: none !important;
}

.as-hidden {
    display: none;
}

/* ---------------------------------------------------------------- header */

.as-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--as-line);
    color: var(--as-ink);
}

.as-panel-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
}

.as-panel-header .as-icon {
    width: 20px;
    height: 20px;
    flex: none;
}

/* A real target, not a text link. 36px square with a hover fill, so closing the panel is
   as easy as opening it — which for this widget's audience is the point. */
.as-close-btn {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: none;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--as-muted);
    font-size: 17px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.as-close-btn:hover {
    background: var(--as-wash);
    color: var(--as-ink);
}

/* ---------------------------------------------------------------- sections */

.as-section {
    margin-top: 14px;
}

.as-section-label {
    display: block;
    margin-bottom: 7px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--as-muted);
}

/* 44px is the target size WCAG asks for at AAA, and this is the one widget on the site
   where that floor is not negotiable: a visitor here is already telling us the default
   presentation is not working for them. */
.as-section button {
    display: block;
    width: 100%;
    min-height: 44px;
    margin: 0 0 6px;
    padding: 10px 12px;
    border: 1px solid var(--as-line);
    border-radius: 8px;
    background: var(--as-wash);
    color: var(--as-ink);
    cursor: pointer;
    font-size: 15px;
    font-family: inherit;
    text-align: right;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.as-section button:last-child {
    margin-bottom: 0;
}

.as-section button:hover {
    background: var(--as-accent-wash);
    border-color: color-mix(in srgb, var(--as-accent) 45%, var(--as-surface));
}

/* The current setting in each group, including the "off" option — so the panel always
   shows which state is active rather than only marking the non-default ones. The script
   keeps aria-pressed in step with this class. */
.as-section button.as-active {
    background-color: var(--as-accent);
    border-color: var(--as-accent);
    color: var(--as-surface);
    font-weight: 700;
}

.as-section button.as-active:hover {
    background-color: color-mix(in srgb, var(--as-accent) 85%, var(--as-ink));
    border-color: color-mix(in srgb, var(--as-accent) 85%, var(--as-ink));
}

/* The one destructive control in the panel: outlined rather than filled, so it does not
   read as a fourth setting sitting alongside the three above it. */
.as-btn-reset {
    background: none !important;
    border-color: color-mix(in srgb, var(--as-ink) 30%, var(--as-surface)) !important;
    font-weight: 600;
}

/* Keyboard focus, scoped to the widget. This is the control a keyboard user reaches for,
   so its focus ring is defined here rather than left to the browser default — which on a
   white panel over a dark page is easy to lose. */
.as-access-toggle:focus-visible,
.as-access-panel button:focus-visible {
    outline: 3px solid var(--as-accent);
    outline-offset: 2px;
}

.as-access-toggle:focus-visible {
    outline-color: var(--as-surface);
}

@media (prefers-reduced-motion: reduce) {
    .as-access-toggle,
    .as-close-btn,
    .as-section button {
        transition: none;
    }
}

/* ======================================================================
   THE EFFECTS THEMSELVES
   ======================================================================
   Literal colours from here down, and that is the point: these rules exist to force
   maximum contrast, so nothing in them may be derived from a palette that could soften
   it. */

body.high-contrast {
    background: #000 !important;
    color: #fff !important;
}

body.high-contrast a,
body.regular-contrast a {
    color: #0ff !important;
}

body.regular-contrast {
    background: #fff !important;
    color: #000 !important;
}

body.font-large {
    font-size: 18px !important;
}

body.font-xlarge {
    font-size: 22px !important;
}

/* The display filters. Applied to body's children rather than to body itself, because a
   filter on an element containing `position: fixed` descendants makes that element the
   containing block for them — which would drag the toggle and the panel out of the
   viewport corner they are pinned to. */
body.contrast-light > *:not(#access-toggle):not(#access-panel) {
    filter: contrast(120%);
}

body.contrast-dark > *:not(#access-toggle):not(#access-panel) {
    filter: contrast(80%) grayscale(100%);
}

/* Belt and braces on the exemption above: the visitor must be able to see and use the
   control that turns the filter back off. */
body.contrast-dark #access-toggle,
body.contrast-light #access-toggle,
body.contrast-dark #access-panel,
body.contrast-light #access-panel {
    filter: none !important;
}

a.underline {
    text-decoration: underline !important;
}