/* ===============================================================
   Accessibility preferences.

   Two controls, both set on <html> and both remembered per browser:

     data-text-scale="lg" | "xl"     larger type
     data-contrast="high"            stronger contrast

   WHY THESE TWO. They are the settings people actually reach for and
   that a website can honestly provide. Voice navigation is not here:
   it belongs to the operating system, every platform ships a better
   one than a web page could, and a half-working imitation would be
   worse than none. The forms are simplified in the markup that
   generates them, not by hiding fields at runtime.

   HOW THE TYPE SCALE WORKS. It moves the root font-size, and the rest
   of the site follows because its sizing is in `rem` throughout. That
   is the whole mechanism — no per-component overrides to maintain, and
   anything added later inherits it for free. Layout keeps up because
   the containers are fluid (`min()`, `clamp()`, `auto-fit`), which the
   responsive pass already verified down to 320px.

   Sizes are chosen to stay useful: 112.5% and 125% are noticeably
   bigger without pushing the two-column grids into overlap. Someone
   who needs more than that is served better by the browser's own page
   zoom, which this deliberately does not fight.

   HOW HIGH CONTRAST WORKS. The site runs two themes — app.css is
   dark-first and unityhub.css repaints the public pages light — so
   this cannot simply force one palette. Instead it does the same job
   to each: push text to its extreme against the surface it sits on,
   make borders real lines rather than hints, and switch off the
   decorative light (glows, gradient text, painted scenery) that
   carries no information and costs contrast. Both themes are handled
   below, each on its own terms.

   Everything here is additive and last-loaded, so with the file absent
   or the preferences unset not one rule applies.
   =============================================================== */

/* --- Type scale --------------------------------------------------- */
html[data-text-scale="lg"] { font-size: 112.5%; }
html[data-text-scale="xl"] { font-size: 125%; }

/* --- High contrast, shared ---------------------------------------- */
/* Gradient-filled text is transparent text with a picture behind it.
   It is the single biggest contrast loss on the site, and it appears in
   the wordmark, section headings and stat figures. Reverted to solid
   ink wherever it is used.

   Note what this rule does NOT do: set `color`. An earlier version used
   `color: currentColor`, which resolves against the INHERITED colour —
   and `.brand` is white for the dark topbar, so on the light public
   theme the wordmark turned white-on-white and vanished. The fill is
   unlocked here and the actual colour is stated per theme below, where
   the surface underneath is known. */
html[data-contrast="high"] .brand span,
html[data-contrast="high"] .brand span:last-child,
html[data-contrast="high"] .site-footer-brand strong,
html[data-contrast="high"] .page > h1 {
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: currentColor !important;
}

/* Decorative light: glow shadows behind text, and the painted scenery.
   None of it carries meaning, and all of it sits between the reader and
   the words. `text-shadow: none` is safe to apply broadly because the
   site uses shadows only for glow effects. */
html[data-contrast="high"] * {
    text-shadow: none !important;
}
html[data-contrast="high"] .kn-ambient,
html[data-contrast="high"] .nuh-hero .nuh-scene,
html[data-contrast="high"] .nuh-mid__sky,
html[data-contrast="high"] .nuh-reach__scene,
html[data-contrast="high"] .nuh-cta__sky,
html[data-contrast="high"] .nuh-hero__blooms,
html[data-contrast="high"] .blob-field,
html[data-contrast="high"] .landing-orbs { display: none !important; }

/* Focus has to be unmissable in this mode: it is how a keyboard user
   knows where they are, and the default 2-3px ring is easy to lose. */
html[data-contrast="high"] :focus-visible {
    outline: 3px solid currentColor !important;
    outline-offset: 2px !important;
}

/* --- High contrast on the LIGHT theme (public pages) -------------- */
/* Muted greys go to near-black; hairline borders become visible lines.
   The brand orange is kept only where it already passes on white — the
   AA-safe --nuh-orange-ink — and the lighter fill orange is dropped for
   text entirely. */
html[data-contrast="high"] body.nuh-page {
    --nuh-ink: #000000;
    --nuh-ink-muted: #2b3d4f;
    --nuh-line: rgba(20, 57, 110, 0.55);
    --nuh-blue: #10407e;
    --nuh-blue-deep: #071c38;
}
html[data-contrast="high"] body.nuh-page .nuh-path,
html[data-contrast="high"] body.nuh-page .nuh-tool,
html[data-contrast="high"] body.nuh-page .nuh-step,
html[data-contrast="high"] body.nuh-page .nuh-live__col,
html[data-contrast="high"] body.nuh-page .card,
html[data-contrast="high"] body.nuh-page .hub-card {
    background: #ffffff !important;
    border: 2px solid #14396e !important;
    box-shadow: none !important;
}
/* The hero copy sits on a painted sky that is now hidden, so it needs
   its own ground rather than the page gradient showing through. */
html[data-contrast="high"] body.nuh-page .nuh-hero { background: #ffffff !important; }
/* The wordmark, on the light theme's white bar. */
html[data-contrast="high"] body.nuh-page .brand span { color: #071c38 !important; }
html[data-contrast="high"] body.nuh-page .brand .brand-accent { color: #a3430a !important; }
html[data-contrast="high"] body.nuh-page .nuh-hero__title .nuh-mark-a { color: #a3430a !important; }
html[data-contrast="high"] body.nuh-page .nuh-hero__title .nuh-mark-b { color: #10407e !important; }
/* Buttons: flat fills at full strength instead of gradients, which lose
   contrast at their light end. */
html[data-contrast="high"] body.nuh-page .nuh-btn--orange,
html[data-contrast="high"] body.nuh-page .btn {
    background: #a3430a !important;
    color: #ffffff !important;
    box-shadow: none !important;
}
html[data-contrast="high"] body.nuh-page .nuh-btn--blue {
    background: #10407e !important;
    color: #ffffff !important;
    box-shadow: none !important;
}
html[data-contrast="high"] body.nuh-page .nuh-btn--ghost,
html[data-contrast="high"] body.nuh-page .btn-secondary {
    background: #ffffff !important;
    color: #071c38 !important;
    border: 2px solid #071c38 !important;
}
html[data-contrast="high"] body.nuh-page .form-group input,
html[data-contrast="high"] body.nuh-page .form-group select,
html[data-contrast="high"] body.nuh-page .form-group textarea,
html[data-contrast="high"] body.nuh-page .nuh-finder__input {
    border: 2px solid #14396e !important;
    color: #000000 !important;
}

/* --- High contrast on the DARK theme (member + admin) ------------- */
/* Same job, opposite direction: text to pure white, surfaces pushed
   away from the text rather than toward it, borders made visible. */
html[data-contrast="high"] body:not(.nuh-page) {
    --knms-text: #ffffff;
    --knms-muted: #d6dbe8;
    --knms-border: rgba(255, 255, 255, 0.62);
    --glow-purple: transparent;
    --glow-cyan: transparent;
    --glow-gold: transparent;
}
html[data-contrast="high"] body:not(.nuh-page) .card,
html[data-contrast="high"] body:not(.nuh-page) .auth-card {
    border: 2px solid rgba(255, 255, 255, 0.62) !important;
    box-shadow: none !important;
}
html[data-contrast="high"] body:not(.nuh-page) a { color: #9fd0ff; }
/* The wordmark, on the dark theme's dark bar — the mirror of the light
   rule above, and the reason neither can be left to currentColor. */
html[data-contrast="high"] body:not(.nuh-page) .brand span { color: #ffffff !important; }
html[data-contrast="high"] body:not(.nuh-page) .brand .brand-accent { color: #ffd98a !important; }
html[data-contrast="high"] body:not(.nuh-page) .cell-sub,
html[data-contrast="high"] body:not(.nuh-page) .muted,
html[data-contrast="high"] body:not(.nuh-page) .field-hint { color: #d6dbe8 !important; }

/* --- The control itself ------------------------------------------- */
/* .sr-only is restated here rather than borrowed. It is defined in
   unityhub.css, which loads only on the public pages — so on a member or
   admin screen the live region a11y.js creates would have had no rule at
   all and announced itself as visible text in the footer. This sheet
   loads everywhere and must not depend on a theme it may not have. */
.a11y-bar .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Lives in the footer base row. Deliberately plain: it must be legible
   before any preference is applied, in either theme. */
.a11y-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
}
.a11y-bar__label {
    margin-right: 0.15rem;
    opacity: 0.85;
}
.a11y-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    min-height: 2.25rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    border: 1px solid currentColor;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 0.82rem;
    cursor: pointer;
    opacity: 0.85;
}
.a11y-btn:hover,
.a11y-btn:focus-visible { opacity: 1; }
/* aria-pressed is the state, so it is what the style keys on — the
   button cannot look active while reading as inactive. */
.a11y-btn[aria-pressed="true"] {
    background: currentColor;
    opacity: 1;
}
.a11y-btn[aria-pressed="true"] span { color: #10233f; }
body.nuh-page .a11y-btn[aria-pressed="true"] span { color: #ffffff; }

@media (pointer: coarse) {
    .a11y-btn { min-height: 2.75rem; padding: 0.55rem 0.9rem; }
}

/* The bar is a preference control, not content — it has no place in a
   printout, and its buttons do nothing on paper. */
@media print {
    .a11y-bar { display: none !important; }
}