Bellingham Heritage Centre - User contributions [en-gb]

Accessibility

2026-01-29T13:00:47Z

Steve: Comments about Lighouse score added.

= Accessibility =

The Bellingham Heritage Centre Wiki aims to be accessible to as wide an audience as possible, regardless of technology or ability. We recognise that users access the site in many different ways and may have different visual, motor, cognitive, or situational needs.

This page explains the accessibility features available on the site, how we test accessibility, and how to provide feedback.

----

== Accessibility statement ==

The Bellingham Heritage Centre Wiki **aims to conform to WCAG 2.2 AA accessibility standards**.

We are committed to improving accessibility and usability and strive to follow recognised best practice and relevant accessibility guidelines appropriate to a community-run heritage website.

On Lighthouse the site's currently accessibility score on both desktop and mobile is 94 on randomnly tested pages long and short. This is the 'Green Tier' (top tier) (90-100): meaning the website is highly accessible. Whilst this reflects only aitomated testing we have also undertaken a lot of manual testing to support this.
----

== Measures to support accessibility ==

To support accessibility, this site includes a built-in **Accessibility Toolbar**, available on every page.

Using this toolbar, users can:

* Enable a high-contrast display in two choices of colour scheme. Links are t he same colour as the text but underlined for visibility.
* Increase or decrease text size
* Adjust text spacing
* Underline links
* Enable a reading ruler
* Use a high-visibility cursor in two choices of colour

These tools are designed to work independently or in combination, depending on individual needs.

Accessibility preferences are saved locally in your browser so that chosen settings persist between visits on the same device.

The site also includes:

* Keyboard-accessible navigation throughout
* Visible focus indicators for keyboard users
* Skip links to allow users to bypass repeated navigation
* Screen-reader-friendly markup and ARIA attributes where appropriate

----

== Testing and evaluation ==

Accessibility has been evaluated using a combination of:

* '''Manual testing''', including:
** Keyboard-only navigation
** Visual inspection of focus visibility, contrast, and readability
** Screen-reader testing using macOS VoiceOver
* '''Automated testing''', including:
** Chrome Lighthouse accessibility audits

Recent Lighthouse audits score the site highly for accessibility, both with accessibility tools enabled and with the default presentation.

Testing has been carried out in current versions of major browsers, including Chrome, Safari, Firefox, and Opera.

----

== Known limitations and design choices ==

We are working with the base MediaWiki site build, which in itself may have some accessibility challenges. We have not worked to remedy these if they exist or are aware of them. Some automated accessibility tools may report warnings that do not represent barriers for users.

In particular:

* '''Navigation and tool lists are ordered logically rather than alphabetically.'''
Lists are structured to reflect editorial or task-based priorities rather than alphabetical order. WCAG does not require alphabetical ordering, only that content is presented in a logical and meaningful sequence.

* '''Link colour contrast warnings may appear in automated tests.'''
In high-contrast modes, links are underlined and use the same colour as surrounding text. This approach avoids reliance on colour perception alone and follows established high-contrast accessibility patterns used by operating systems and assistive technologies. Manual testing confirms that links are clear and usable for both sighted users and screen-reader users.

* '''Editor toolbar in high-contrast mode'''

When high-contrast mode is enabled, most of the site switches to a black background with yellow text for maximum readability or black background with white text depending on the user's choice. The page editor toolbar (for example, Bold, Italic, Link, Image and related controls) uses a mixture of icons and system styling provided by MediaWiki. To avoid disrupting the editor’s behaviour or hiding important controls, these toolbar icons are not recoloured in high-contrast mode. In this area, text labels and tabs may retain their original colours to preserve legibility and usability. This ensures: * editor controls remain visible and functional * keyboard and screen-reader access is unaffected * the editor behaves consistently across browsers

Screen readers announce all editor controls correctly, and full keyboard access is supported.

This approach prioritises reliability and accessibility over visual uniformity.
These design choices are intentional and are reviewed periodically.

The '''accessibility gadget''' is designed to work across skins, but the high-contrast mode requires skin-specific overrides for the site chrome. Since Timeless will be the default skin, we will prioritise full support for Timeless and ensure Vector remains functional as a fallback.

If you report any issues to us will will endeavour to fix them. Thank you.
----

== Browser and assistive technology support ==

The site is designed to work with modern web browsers and commonly used assistive technologies, including screen readers and keyboard navigation.

While the site should function in other environments, explicit testing has focused on current desktop browsers.

----

== Feedback and contact ==

If you encounter any accessibility barriers or have suggestions for improvement, please contact us via the site’s contact page or speak to a member of the Heritage Centre team.

Feedback is welcomed and helps guide future improvements to the site.

----

''This accessibility statement is reviewed periodically and updated as the site evolves.''

== Accessibility help ==

This wiki includes simple accessibility options from the menu screen.

Screen readers: The toolbar is keyboard navigable and labelled for screen readers.

== What’s remembered? ==

The following settings are 'remembered' on your device - these are stored in local storage and not cookies.

* High Contrast Yellow, High Contrast White and Contrast Reset
* Underline of links on/off
* Text spacing setting
* (Large) Cursor Yellow or Cursor White selected or Cursor reset
* Reading ruler on/off
* Text size

Settings are saved locally. Some browsers, e.g. Firefox, may cache interface styles aggressively; a refresh may be required after updates.

== Keyboard use: ==

* Esc closes the accessibility panel
* Tab / Shift+Tab to move between controls
* Enter to activate a button
* Reveal navigation: use on-screen arrows (or ←/→ if enabled)

Skip links: appear at the top when you Tab (Content / Navigation / Search / Accessibility).

== Accessibility options ==

* Text size and spacing controls change readability on the menu and overlays.
* Contrast provides options for standard and high-contrast modes. Links are shown in blue and underlined to ensure they are clearly distinguishable from body text.
* Two different large cursors options (white or yellow) can make the pointer easier to see.
* Horizontal reading ruler to guide the user on the screen.
* Underline links for clarity.

Selected controls are retained between pages and site visits for the individual user.
=== Reset ===
The reset button in the accessibility gadget clears all current settings back to their default states.
== Access Keys ==

The Timeless skin for MediaWiki uses the standard MediaWiki access key system, which allows for fast keyboard navigation across desktop, mobile, and tablet layouts

The modifier key (usually Alt+Shift on Windows/Linux or Ctrl+Option on macOS) must be used in combination with the characters listed below.
=== Page Action & View Shortcuts ===

* e - Edit the current page (or view source)
* t - View the talk/discussion page
* h - View page history
* c - View the main content page (if in a talk namespace)
* + - Add a new section/comment to a talk page
* m - Move (rename) the current page
* d - Delete the current page
* w - Watch or unwatch the current page
* p - View the printable version of the page
* k - View pages that link here ("What links here")
=== Navigation & Search Shortcuts ===

* f - Jump to the search box
* z - Go to the main page
* r - Go to Recent Changes
* x - Go to a random page
* q - Go to the special pages index
=== Personal & User Tools ===

* . - Go to your user page
* y - Go to your contributions
* l - Go to your watchlist
* o - Log in
* o - Log out
=== Editing Shortcuts ===

* s - Save/Publish the changes you are editing
* p - Preview your edit
* v - Show changes (diff)
* b - Jump to the edit summary box
* i - Toggle the "minor edit" checkmark
=== How to use them ===

* Windows/Linux (Firefox/Chrome/Edge): Alt + Shift + [Key]
* macOS (Safari/Chrome/Firefox): Ctrl + Option + [Key]

'''Note:''' Some browsers might require just the Alt key, or a combination of Alt and Shift.

MediaWiki:Gadget-bhc-accessibility.css

2026-01-29T12:54:06Z

Steve: Addes tocuh spacing for the table of contents and some focus help.

/*
⚠️ Do not reorder rules below this line — contrast overrides depend on cascade order.
*/

/* =========================================================
Accessibility Gadget CSS — quick navigation
(No rules reordered; section tags added for readability)
Search for: [A11Y-SECTION: ...]
========================================================= */
/* 01. BHC Accessibility Gadget – MediaWiki / Timeless → [A11Y-SECTION:bhc-accessibility-gadget-mediawiki-timeless] */
/* 02. Variables → [A11Y-SECTION:variables] */
/* 03. Skip links (appear when focused) → [A11Y-SECTION:skip-links-appear-when-focused] */
/* 04. Floating accessibility toggle → [A11Y-SECTION:floating-accessibility-toggle] */
/* 05. Panel → [A11Y-SECTION:panel] */
/* 06. Feature classes → [A11Y-SECTION:feature-classes] */
/* 07. High contrast (black/yellow/blue) → [A11Y-SECTION:high-contrast-black-yellow-blue] */
/* 08. High contrast presets → [A11Y-SECTION:high-contrast-presets] */
/* 09. HIGH CONTRAST: Links must be visually distinct → [A11Y-SECTION:high-contrast-links-must-be-visually-distinct] */
/* 10. Underline links → [A11Y-SECTION:underline-links] */
/* 11. Text spacing → [A11Y-SECTION:text-spacing] */
/* 12. Large cursors (wiki-hosted) → [A11Y-SECTION:large-cursors-wiki-hosted] */
/* 13. Reading ruler → [A11Y-SECTION:reading-ruler] */
/* 14. MediaWiki: extra HIGH CONTRAST coverage (Timeless + Vector) → [A11Y-SECTION:mediawiki-extra-high-contrast-coverage-timeless-vector] */
/* 15. HIGH CONTRAST: Footer (Vector + Timeless) → [A11Y-SECTION:high-contrast-footer-vector-timeless] */
/* 16. Underline links: ensure TOC wins → [A11Y-SECTION:underline-links-ensure-toc-wins] */
/* 17. HIGH CONTRAST: Header + search + user tools → [A11Y-SECTION:high-contrast-header-search-user-tools] */
/* 18. HIGH CONTRAST: Personal tools (reduce border clutter) → [A11Y-SECTION:high-contrast-personal-tools-reduce-border-clutter] */
/* ========================================================= */

/* [A11Y-SECTION:bhc-accessibility-gadget-mediawiki-timeless] */
/* =========================================================
BHC Accessibility Gadget – MediaWiki / Timeless
========================================================= */

/* [A11Y-SECTION:variables] */
/* ---------------------------------------------------------
Variables
--------------------------------------------------------- */
:root{
--a11y-bg: #111827;
--a11y-border: #374151;
--a11y-fg: #ffffff;
--a11y-focus: #FFBF47;
--a11y-link-underline: #3366CC; /* MediaWiki link blue */
--a11y-menu-width: 340px;
--a11y-contrast-fg: #FFD400;
}

/* Timeless: stop skin CSS shrinking the accessibility icon */
body.skin-timeless .a11y-toggle{
font-size: 16px !important;
line-height: 1 !important;
}
body.skin-timeless .a11y-toggle svg{
display: block !important;
width: 36px !important;
height: 36px !important;
min-width: 36px !important;
min-height: 36px !important;
max-width: none !important;
max-height: none !important;

/* If the glyph still looks small, keep this: */
transform: scale(1.15) !important;
transform-origin: 50% 50% !important;
}
/* Make sure fill isn’t being altered by skin rules */
body.skin-timeless .a11y-toggle svg path{
fill: currentColor !important;
}

/* [A11Y-SECTION:skip-links-appear-when-focused] */
/* ---------------------------------------------------------
Skip links (appear when focused)
--------------------------------------------------------- */
.skip-link{
position: absolute;
left: 12px;
top: 12px;
z-index: 11000;

padding: 10px 14px;
border-radius: 8px;

background: #111827;
color: #fff;
text-decoration: none;

top: -9999px; /* hidden off-screen by default */
transition: none; /* no animation needed when hidden */

border: 2px solid var(--a11y-focus);
}
.skip-link:focus,
.skip-link:focus-visible{
top: 12px; /* bring into view when focused */
outline: none;
z-index: 11001;
}

body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .skip-link{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-fg) !important;
}

/* Stack multiple skip links neatly when tabbing through them */
#a11y-skip-content:focus,
#a11y-skip-content:focus-visible{ top: 56px; }

#a11y-skip-nav:focus,
#a11y-skip-nav:focus-visible{ top: 100px; }

#a11y-skip-search:focus,
#a11y-skip-search:focus-visible{ top: 144px; }

/* [A11Y-SECTION:floating-accessibility-toggle] */
/* ---------------------------------------------------------
Floating accessibility toggle
--------------------------------------------------------- */
.a11y-toggle{
position: fixed;
right: 16px;
bottom: 16px;
z-index: 10001;

width: 56px;
height: 56px;
border-radius: 50%;

background: #005FCC;
border: 2px solid #ffffff;
color: #ffffff;

display: inline-flex;
align-items: center;
justify-content: center;

box-shadow: 0 10px 24px rgba(0,0,0,0.25);
cursor: pointer;
}
.a11y-toggle:hover{ background:#0047A6; }
.a11y-toggle:focus-visible{
outline: 3px solid var(--a11y-focus);
outline-offset: 3px;
}
.a11y-toggle svg{
width: 44px;
height: 44px;
fill: currentColor;
}

/* [A11Y-SECTION:panel] */
/* ---------------------------------------------------------
Panel
--------------------------------------------------------- */
/* Compact current-settings line (display-only) */
.a11y-status{
font-size: 13px;
line-height: 1.25;
margin: 6px 0 8px;
opacity: 0.95;
}

.a11y-panel{
position: fixed;
right: 14px;
bottom: 76px;
z-index: 10000;

width: var(--a11y-menu-width);
max-width: calc(100vw - 28px);

background: var(--a11y-bg);
border: 1px solid var(--a11y-border);
color: var(--a11y-fg);
border-radius: 16px;
padding: 12px;

box-shadow: 0 14px 40px rgba(0,0,0,0.28);
}
.a11y-panel[hidden]{ display:none !important; }

/* Header */
.a11y-head{
display:flex;
align-items:center;
justify-content: space-between;
margin-bottom: 10px;
}
.a11y-head h2{
font-size: 16px;
margin: 0;
}
.a11y-help{
width: 28px;
height: 28px;
border-radius: 50%;
background: #fff;
color: #111827;
font-weight: 900;
text-decoration: none;
display:flex;
align-items:center;
justify-content:center;
}
.a11y-help:focus-visible{
outline: 3px solid var(--a11y-focus);
outline-offset: 2px;
}

/* Buttons */
.a11y-row{
display:flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 10px;
}
.a11y-btn{
border: 1px solid #D1D5DB;
background:#fff;
color:#111827;
padding: 8px 10px;
border-radius: 999px;
font-size: 14px;
font-weight: 800;
cursor: pointer;
}
.a11y-btn[aria-pressed="true"]{
background:#111827;
color:#fff;
}
.a11y-btn:focus-visible{
outline: 3px solid var(--a11y-focus);
outline-offset: 2px;
}

.a11y-hint{
font-size: 13px;
color: var(--a11y-fg);
line-height: 1.4;
}

/* Screen reader only */
.a11y-sr{
position:absolute;
width:1px;
height:1px;
overflow:hidden;
clip:rect(0,0,0,0);
}

/* [A11Y-SECTION:feature-classes] */
/* =========================================================
Feature classes
========================================================= */

/* ===== Tap target improvements (WCAG 2.2 2.5.8 Target Size) ===== */

/* Make sidebar/portlet links easier to tap without changing font size */
body.skin-timeless .mw-portlet-body li,
body.skin-vector .mw-portlet-body li{
margin: 1.5px 0; /* keeps list tidy but adds breathing space */
}

body.skin-timeless .mw-portlet-body li > a,
body.skin-vector .mw-portlet-body li > a{
display: inline-block;
padding: 4px 6px; /* increases hit area */
line-height: 1.3;
border-radius: 6px; /* optional: helps focus visibility */
}

/* If portlets use <span> inside links, ensure span doesn't shrink hitbox */
body.skin-timeless .mw-portlet-body li > a > span,
body.skin-vector .mw-portlet-body li > a > span{
display: inline-block;
}

/* ---------------------------------------------------------
TOC: improve touch target spacing & readability
--------------------------------------------------------- */

body.skin-timeless #toc li,
body.skin-vector #toc li,
body.skin-timeless .toc li,
body.skin-vector .toc li{
margin: 1.5px 0; /* mirror sidebar list spacing */
}

body.skin-timeless #toc li > a,
body.skin-vector #toc li > a,
body.skin-timeless .toc li > a,
body.skin-vector .toc li > a{
display: inline-block;
padding: 4px 6px; /* matches sidebar hit area */
line-height: 1.3;
border-radius: 6px;
}

body.skin-timeless #toc a:focus-visible,
body.skin-vector #toc a:focus-visible{
outline: 2px solid currentColor;
outline-offset: 2px;
}

/* [A11Y-SECTION:high-contrast-black-yellow-blue] */
/* ------------------------------
High contrast (black/yellow/blue)
------------------------------ */

/* [A11Y-SECTION:high-contrast-presets] */
/* ------------------------------
High contrast presets
- Use ONE of these on <body>:
- a11y-contrast-yellow (yellow on black)
- a11y-contrast-white (white on black)
- Back-compat: a11y-contrast behaves as yellow on black
------------------------------ */
body.a11y-contrast,
body.a11y-contrast-yellow{
--a11y-contrast-fg: #FFD400;
--a11y-contrast-fg-hover: #FFE066;
--a11y-contrast-link: #36C; /* MediaWiki blue */
--a11y-contrast-border-70: rgba(255,212,0,.7);
--a11y-contrast-border-75: rgba(255,212,0,.75);
--a11y-contrast-border-85: rgba(255,212,0,.85);
}
body.a11y-contrast-white{
--a11y-contrast-fg: #FFFFFF;
--a11y-contrast-fg-hover: #E6E6E6;
--a11y-contrast-link: #9ECBFF; /* lighter link blue on black */
--a11y-contrast-border-70: rgba(255,255,255,.7);
--a11y-contrast-border-75: rgba(255,255,255,.75);
--a11y-contrast-border-85: rgba(255,255,255,.85);
}

body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white){
background:#000 !important;
color: var(--a11y-contrast-fg) !important;

/* Gadget UI variables in contrast mode */
--a11y-bg: #000;
--a11y-border: var(--a11y-contrast-border-70);
--a11y-fg: var(--a11y-contrast-fg);
--a11y-focus: var(--a11y-contrast-fg);
--a11y-link-underline: var(--a11y-contrast-link);
}

/* [A11Y-SECTION:high-contrast-links-must-be-visually-distinct] */
/* =========================================================
HIGH CONTRAST: Links must be visually distinct
Blue + underline to meet WCAG 1.4.1
========================================================= */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a:visited{
color: var(--a11y-contrast-link) !important;
text-decoration: underline !important;
text-decoration-thickness: 2px;
text-underline-offset: 0.15em;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a:hover,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a:focus-visible{
text-decoration-thickness: 3px;
}

/* Headings */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) h1,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) h2,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) h3,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) h4,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) h5,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) h6{
color:var(--a11y-contrast-fg) !important;
border-color:var(--a11y-contrast-fg) !important;
}

/* Main containers (Timeless needs explicit coverage) */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-wrapper,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-content-container,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-content,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-body,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-parser-output{
background:#000 !important;
color:var(--a11y-contrast-fg) !important;
}

/* Sidebars / tools */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #site-navigation,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #site-tools,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #page-tools,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-portlet,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-portlet-body{
background:#000 !important;
color:var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-70) !important;
}

/* FIX: portlet text stays yellow (titles, non-links) */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-portlet-body{
color:var(--a11y-contrast-fg) !important;
}

/* FIX: portlet links should be blue + underlined */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-portlet-body a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-portlet-body a:visited{
color: var(--a11y-contrast-link) !important;
text-decoration: underline !important;
text-decoration-thickness: 2px;
text-underline-offset: 0.15em;
}

/* CRITICAL FIX: many MW links are <a><span>text</span></a>
The span was inheriting/being forced yellow.
Make link contents inherit the link colour. */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-portlet-body a *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer a *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer-container a *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #footer-list a *{
color: inherit !important;
}

/* A11y UI in contrast */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .a11y-panel,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .a11y-toggle{
background:#000 !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .a11y-btn{
background:#000 !important;
color:var(--a11y-contrast-fg) !important;
border:2px solid var(--a11y-contrast-border-85) !important;
}

/* FIX: “?” help button in contrast */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .a11y-help{
background:#000 !important;
color:var(--a11y-contrast-fg) !important;
border:2px solid var(--a11y-contrast-border-85) !important;
}

/* [A11Y-SECTION:underline-links] */
/* ------------------------------
Underline links
------------------------------ */
body.a11y-underline-links a{
text-decoration: none !important;
border-bottom: 2px solid currentColor;
padding-bottom: 0.05em;
}
body.a11y-underline-links:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a{
border-bottom-color: var(--a11y-contrast-link) !important;
}

/* [A11Y-SECTION:text-spacing] */
/* ------------------------------
Text spacing
------------------------------ */
body.a11y-spacing-plus{
line-height: 1.8 !important;
letter-spacing: 0.06em !important;
word-spacing: 0.16em !important;
}
body.a11y-spacing-minus{
line-height: 1.45 !important;
letter-spacing: 0.01em !important;
word-spacing: 0.02em !important;
}

/* [A11Y-SECTION:large-cursors-wiki-hosted] */
/* ------------------------------
Large cursors (wiki-hosted)
------------------------------ */
body.a11y-cursor-white,
body.a11y-cursor-white *{
cursor: url("/index.php/Special:FilePath/large-arrow-white-64.png") 8 8, auto !important;
}
body.a11y-cursor-yellow,
body.a11y-cursor-yellow *{
cursor: url("/index.php/Special:FilePath/large-arrow-yellow-64.png") 8 8, auto !important;
}

/* [A11Y-SECTION:reading-ruler] */
/* ------------------------------
Reading ruler
------------------------------ */
#a11y-ruler{
position: fixed;
left: 0;
top: 0;
height: 22px;
width: 100vw;
z-index: 9999;
pointer-events: none;

background: linear-gradient(
to bottom,
var(--a11y-contrast-fg) 0%,
var(--a11y-contrast-fg) 40%,
#000000 40%,
#000000 60%,
var(--a11y-contrast-fg) 60%,
var(--a11y-contrast-fg) 100%
);
}
#a11y-ruler[hidden]{ display:none !important; }

/* [A11Y-SECTION:mediawiki-extra-high-contrast-coverage-timeless-vector] */
/* =========================================================
MediaWiki: extra HIGH CONTRAST coverage (Timeless + Vector)
Add at END of Gadget CSS so it wins.
========================================================= */

/* TOC */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #toc,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .toc,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #toc * ,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .toc *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-75) !important;
}

/* Category links area */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-normal-catlinks,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-normal-catlinks *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .catlinks,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .catlinks *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-75) !important;
}

/* Wikitables */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) table,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) table *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikitable,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikitable *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-datatable,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-datatable *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-75) !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikitable th,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) table th{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
}

/* Figures/captions */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) figure,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) figure *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-halign-center,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-halign-centre,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-halign-center *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-halign-centre *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
}

/* Thumb frames / image captions */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .thumb,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .thumb *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .thumbinner,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .thumbinner *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .thumbcaption,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .thumbcaption *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-75) !important;
}

/* Code-like blocks */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) pre,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) pre *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) code,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) code *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-75) !important;
}

/* [A11Y-SECTION:high-contrast-footer-vector-timeless] */
/* =========================================================
HIGH CONTRAST: Footer (Vector + Timeless)
========================================================= */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer-container{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
background-image: none !important;
border-top: 10px solid var(--a11y-contrast-fg) !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #footer-list,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #footer-list *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #footer-icons,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #footer-icons *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
}

/* FIX: footer links should be blue (not yellow) */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer a:visited{
color: var(--a11y-contrast-link) !important;
text-decoration: underline !important;
text-decoration-thickness: 2px;
text-underline-offset: 0.15em;
}

body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer .mw-portlet,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer .mw-portlet-body{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-75) !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer hr{
border-color: var(--a11y-contrast-fg) !important;
}

/* [A11Y-SECTION:underline-links-ensure-toc-wins] */
/* =========================================================
Underline links: ensure TOC wins
========================================================= */
body.a11y-underline-links #toc a,
body.a11y-underline-links .toc a{
border-bottom-color: currentColor !important;
}
body.a11y-underline-links:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #toc a,
body.a11y-underline-links:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .toc a{
border-bottom-color: var(--a11y-contrast-link) !important;
}

/* [A11Y-SECTION:high-contrast-header-search-user-tools] */
/* =========================================================
HIGH CONTRAST: Header + search + user tools
========================================================= */

/* Base header + content containers */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-header-container,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-content-container{
background: #000 !important;
background-image: none !important;
}

/* Timeless header containers */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-header,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-header-container .ts-inner,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-header-container .mw-body,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-header-container .mw-portlet,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-header-container .mw-portlet-body{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
background-image: none !important;
border-color: var(--a11y-contrast-fg) !important;
}

/* Title */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #p-logo-text #p-banner,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #p-banner.mw-wiki-title,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #p-logo-text .mw-wiki-title{
color: var(--a11y-contrast-fg) !important;
}

/* Strapline */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #bhc-strapline,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .bhc-strapline{
color: var(--a11y-contrast-fg) !important;
}

/* Search box wrappers */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #p-search,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #simpleSearch{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
}

/* Search input (generic) */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #searchInput,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #p-search #searchInput,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #p-search input[type="search"],
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #simpleSearch input[type="search"]{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
caret-color: var(--a11y-contrast-fg) !important;
border: 2px solid var(--a11y-contrast-fg) !important;
box-shadow: none !important;
-webkit-text-fill-color: var(--a11y-contrast-fg) !important; /* Safari/WebKit */
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #searchInput::placeholder,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #simpleSearch input[type="search"]::placeholder{
color: var(--a11y-contrast-border-75) !important;
}

/* Timeless-specific: beat background:#fff !important */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #p-search input[type="search"],
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #p-search #searchInput{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
caret-color: var(--a11y-contrast-fg) !important;
border: 2px solid var(--a11y-contrast-fg) !important;
-webkit-text-fill-color: var(--a11y-contrast-fg) !important;
}

/* Search submit button */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) input#mw-searchButton,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) input#searchButton,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-searchButton{
background-color: #000 !important;
border: 2px solid var(--a11y-contrast-border-85) !important;
filter: none !important;
}

/* Suggestions dropdown */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .suggestions,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .suggestions-results,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .suggestions-special,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .suggestions a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .suggestions-result,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-searchSuggest,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-searchSuggest *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-85) !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .suggestions a:visited{
color: var(--a11y-contrast-fg) !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .suggestions-result-current,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .suggestions a:hover{
background: #111 !important;
}

/* Vector search tabs area */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-search-profile-tabs,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-search-profile-tabs *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-85) !important;
}

/* [A11Y-SECTION:high-contrast-personal-tools-reduce-border-clutter] */
/* =========================================================
HIGH CONTRAST: Personal tools (reduce border clutter)
========================================================= */

/* Force yellow text to beat Timeless dark text */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal h2,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal h3,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal .mw-portlet,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal .mw-portlet *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless .mw-portlet-body,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless .mw-portlet-body *{
color: var(--a11y-contrast-fg) !important;
}

/* Force black background to beat Timeless white dropdown */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal .dropdown,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal .mw-portlet-body,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal-inner,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal-inner *{
background: #000 !important;
background-image: none !important;
}

/* Keep ONE border only (container), remove nested borders */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #personal .dropdown,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #personal-inner.dropdown,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #personal .mw-portlet-body{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border: 2px solid var(--a11y-contrast-border-85) !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #personal .mw-portlet-body *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #personal-inner.dropdown *{
background: transparent !important;
color: var(--a11y-contrast-fg) !important;
border: 0 !important;
outline-color: var(--a11y-contrast-fg) !important;
}
/* Leave links to global link rules */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #personal a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #personal a:visited{
background: transparent !important;
border-color: transparent !important;
}

/* =========================================================
HIGH CONTRAST: Timeless containers that fight back
========================================================= */

/* Timeless forces grey content container */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-content-container{
background: #000 !important;
background-image: none !important;
}

/* Timeless header container sometimes white at breakpoints */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-header-container{
background: #000 !important;
background-image: none !important;
}

/* Timeless related-navigation sidebar chunk at ≥1340px */
@media screen and (min-width: 1340px){
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless
#mw-related-navigation .sidebar-chunk{
background: #000 !important;
background-image: none !important;
border-color: var(--a11y-contrast-border-85) !important;
box-shadow: none !important;
}
}

/* mw-content border colour in high-contrast mode */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-content{
border-color: var(--a11y-contrast-fg) !important;
}

/* =========================================================
EDIT MODE: textarea and editOptions
========================================================= */

/* Edit textarea */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #wpTextbox1,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) textarea.mw-editfont-monospace{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
caret-color: var(--a11y-contrast-fg) !important;
border: 2px solid var(--a11y-contrast-fg) !important;
box-shadow: none !important;
-webkit-text-fill-color: var(--a11y-contrast-fg) !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #wpTextbox1::placeholder{
color: var(--a11y-contrast-border-75) !important;
}

/* editOptions bar */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-85) !important;
box-shadow: none !important;
}

/* Don’t override links here — let your global contrast link styling apply */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions a:visited{
background: transparent !important;
border-color: transparent !important;
}

/* Buttons + inputs inside editOptions */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions button,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions input,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions select,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions textarea,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions .mw-ui-button,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions .oo-ui-buttonElement-button{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border: 2px solid var(--a11y-contrast-border-85) !important;
box-shadow: none !important;
-webkit-text-fill-color: var(--a11y-contrast-fg) !important;
}

/* Focus visibility */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions button:focus-visible,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions input:focus-visible,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions select:focus-visible,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions .mw-ui-button:focus-visible,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions .oo-ui-buttonElement-button:focus-visible{
outline: 3px solid var(--a11y-contrast-fg) !important;
outline-offset: 2px !important;
}

/* =========================================================
EDIT MODE: Codex (CDX) message banners (e.g. interface warning)
========================================================= */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .cdx-message,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .cdx-message--block,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .cdx-message--error{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border: 2px solid var(--a11y-contrast-border-85) !important;
box-shadow: none !important;
}
/* Inner content */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .cdx-message__content,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .cdx-message__content *{
background: transparent !important;
color: var(--a11y-contrast-fg) !important;
}
/* Icon */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .cdx-message__icon,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .cdx-message__icon *{
color: var(--a11y-contrast-fg) !important;
fill: var(--a11y-contrast-fg) !important;
}
/* Emphasis */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .cdx-message strong{
color: var(--a11y-contrast-fg) !important;
}

/* FIX: Timeless sidebar chunks stay light at 1100–1339px.
Force black/yellow in high-contrast mode only. */
@media screen and (min-width: 1100px) and (max-width: 1339px){
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-site-navigation .sidebar-chunk,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-related-navigation .sidebar-chunk{
background: #000 !important;
background-image: none !important;
border-color: var(--a11y-contrast-border-85) !important;
box-shadow: none !important;
}

/* If any text inside is still dark, force it yellow */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-site-navigation .sidebar-chunk *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-related-navigation .sidebar-chunk *{
color: var(--a11y-contrast-fg) !important;
}

/* …but if it’s a LINK (or inside a link), keep it blue */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-site-navigation .sidebar-chunk a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-site-navigation .sidebar-chunk a:visited,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-related-navigation .sidebar-chunk a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-related-navigation .sidebar-chunk a:visited{
color: var(--a11y-contrast-link) !important;
text-decoration: underline !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-site-navigation .sidebar-chunk a *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-related-navigation .sidebar-chunk a *{
color: inherit !important;
}
}

/* FIX (stronger): Timeless sidebar chunks at 1100–1339px still light.
Must beat the skin rule in the same breakpoint. */
@media screen and (min-width: 1100px) and (max-width: 1339px){
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-site-navigation .sidebar-chunk,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-related-navigation .sidebar-chunk{
background: #000 !important;
background-image: none !important;
border-color: var(--a11y-contrast-border-85) !important;
box-shadow: none !important;
}

body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-site-navigation .sidebar-chunk *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-related-navigation .sidebar-chunk *{
color: var(--a11y-contrast-fg) !important;
}

/* …but links stay blue */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-site-navigation .sidebar-chunk a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-site-navigation .sidebar-chunk a:visited,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-related-navigation .sidebar-chunk a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-related-navigation .sidebar-chunk a:visited{
color: var(--a11y-contrast-link) !important;
text-decoration: underline !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-site-navigation .sidebar-chunk a *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-related-navigation .sidebar-chunk a *{
color: inherit !important;
}
}

/* =========================================================
EMERGENCY: ensure the accessibility toggle is visible
(keep at VERY END)
========================================================= */
#a11y-toggle.a11y-toggle{
position: fixed !important;
right: 16px !important;
bottom: 16px !important;

display: inline-flex !important;
visibility: visible !important;
opacity: 1 !important;

z-index: 2147483647 !important;
pointer-events: auto !important;

transform: none !important;
}
#a11y-toggle.a11y-toggle svg{
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}

/* =========================================================
HIGH CONTRAST: Scrollbars (page + editor)
Supports: Chrome/Safari/Opera (WebKit) + Firefox
Scope: ONLY when body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) is active
========================================================= */

/* ---------- Firefox (Gecko) ---------- */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white),
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) *{
scrollbar-color: var(--a11y-contrast-fg) #000; /* thumb / track */
scrollbar-width: auto; /* or 'thin' if you prefer */
}

/* ---------- Chrome / Safari / Opera (WebKit/Blink) ---------- */
/* Page scrollbars */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white)::-webkit-scrollbar{
width: 14px;
height: 14px; /* horizontal */
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white)::-webkit-scrollbar-track{
background: #000;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white)::-webkit-scrollbar-thumb{
background: var(--a11y-contrast-fg);
border: 3px solid #000; /* creates separation from track */
border-radius: 10px;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white)::-webkit-scrollbar-thumb:hover{
background: var(--a11y-contrast-fg-hover); /* slightly lighter yellow on hover */
}

/* Editor + common scrollable containers (safety net) */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) textarea,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #wpTextbox1,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui *{
scrollbar-color: var(--a11y-contrast-fg) #000; /* Firefox for these elements too */
}

/* FIX: WikiEditor tool-select dropdown text becomes unreadable
because it inherits yellow from body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white). */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui-toolbar .tool.tool-select,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui-toolbar .tool.tool-select *{
color: #222 !important; /* readable on the tool-select's light background */
}

/* FIX: WikiEditor toolbar tabs readability in high-contrast mode */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui-toolbar .tabs a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui-toolbar .tabs a:visited{
color: #0645ad !important; /* MediaWiki blue */
}

/* Active tab: keep it dark for readability on light background */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui-toolbar .tabs span.tab a.current,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui-toolbar .tabs span.tab a.current:visited{
color: #222 !important;
}

body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) textarea::-webkit-scrollbar,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #wpTextbox1::-webkit-scrollbar,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui::-webkit-scrollbar{
width: 14px;
height: 14px;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) textarea::-webkit-scrollbar-track,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #wpTextbox1::-webkit-scrollbar-track,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui::-webkit-scrollbar-track{
background: #000;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) textarea::-webkit-scrollbar-thumb,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #wpTextbox1::-webkit-scrollbar-thumb,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui::-webkit-scrollbar-thumb{
background: var(--a11y-contrast-fg);
border: 3px solid #000;
border-radius: 10px;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) textarea::-webkit-scrollbar-thumb:hover,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #wpTextbox1::-webkit-scrollbar-thumb:hover,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui::-webkit-scrollbar-thumb:hover{
background: var(--a11y-contrast-fg-hover);
}

/* Try to target root scrolling element where supported */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) html{
scrollbar-color: var(--a11y-contrast-fg) #000;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) html::-webkit-scrollbar{
width: 14px;
height: 14px;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) html::-webkit-scrollbar-track{
background: #000;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) html::-webkit-scrollbar-thumb{
background: var(--a11y-contrast-fg);
border: 3px solid #000;
border-radius: 10px;
}

/* =========================================================
FINAL OVERRIDE (brute force):
High-contrast links must be blue + underlined everywhere,
including link text wrapped in spans inside portlets/footer.
PUT THIS AT THE VERY END OF THE FILE.
========================================================= */

body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a:visited{
color: var(--a11y-contrast-link) !important;
text-decoration: underline !important;
text-decoration-thickness: 2px !important;
text-underline-offset: 0.15em !important;
}

/* Critical: if link text is wrapped (e.g. <a><span>Text</span></a>),
force ALL children inside links to inherit the link colour. */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a:visited *{
color: inherit !important;
}

/* Extra specificity for the problem zones (beats Timeless + portlet-body * rules) */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless .mw-portlet-body a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless .mw-portlet-body a:visited,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-footer a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-footer a:visited,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-footer-container a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-footer-container a:visited{
color: var(--a11y-contrast-link) !important;
text-decoration: underline !important;
}

body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless .mw-portlet-body a *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless .mw-portlet-body a:visited *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-footer a *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-footer a:visited *{
color: inherit !important;
}

/* =========================================================
FINAL FIX: #personal (user tools) links
The portlet-body * rule forces yellow.
Override ONLY for links and their contents.
========================================================= */

body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal a:visited{
color: var(--a11y-contrast-link) !important;
text-decoration: underline !important;
}

body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal a *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal a:visited *{
color: inherit !important;
}

/* =========================================================
FINAL OVERRIDE (authoritative)
In contrast modes, ALL links should match the contrast text colour.
This must win against Timeless/Vector skin link rules (logged in/out).
Keep at VERY END of the gadget CSS.
========================================================= */
body:is(.a11y-contrast, .a11y-contrast-yellow, .a11y-contrast-white) a,
body:is(.a11y-contrast, .a11y-contrast-yellow, .a11y-contrast-white) a:visited,
body:is(.a11y-contrast, .a11y-contrast-yellow, .a11y-contrast-white) a:active{
color: var(--a11y-contrast-fg) !important;
text-decoration-color: var(--a11y-contrast-fg) !important;
text-decoration: underline !important;
text-decoration-thickness: 2px;
text-underline-offset: 0.15em;
}

/* Hover/focus: slightly stronger underline (no colour change) */
body:is(.a11y-contrast, .a11y-contrast-yellow, .a11y-contrast-white) a:hover,
body:is(.a11y-contrast, .a11y-contrast-yellow, .a11y-contrast-white) a:focus-visible{
text-decoration-thickness: 3px;
}

/* Any wrapped spans inside links must inherit the link colour (Timeless uses <a><span>…) */
body:is(.a11y-contrast, .a11y-contrast-yellow, .a11y-contrast-white) a *,
body:is(.a11y-contrast, .a11y-contrast-yellow, .a11y-contrast-white).skin-timeless a *{
color: inherit !important;
}

/* Extra belt-and-braces for Timeless logged-in personal tools + portlets */
body:is(.a11y-contrast, .a11y-contrast-yellow, .a11y-contrast-white).skin-timeless #personal a,
body:is(.a11y-contrast, .a11y-contrast-yellow, .a11y-contrast-white).skin-timeless .mw-portlet-body a{
color: var(--a11y-contrast-fg) !important;
}

MediaWiki:Gadget-bhc-accessibility.css

2026-01-29T12:51:05Z

Steve: Addedd bettr links spacing for touch screen.

/*
⚠️ Do not reorder rules below this line — contrast overrides depend on cascade order.
*/

/* =========================================================
Accessibility Gadget CSS — quick navigation
(No rules reordered; section tags added for readability)
Search for: [A11Y-SECTION: ...]
========================================================= */
/* 01. BHC Accessibility Gadget – MediaWiki / Timeless → [A11Y-SECTION:bhc-accessibility-gadget-mediawiki-timeless] */
/* 02. Variables → [A11Y-SECTION:variables] */
/* 03. Skip links (appear when focused) → [A11Y-SECTION:skip-links-appear-when-focused] */
/* 04. Floating accessibility toggle → [A11Y-SECTION:floating-accessibility-toggle] */
/* 05. Panel → [A11Y-SECTION:panel] */
/* 06. Feature classes → [A11Y-SECTION:feature-classes] */
/* 07. High contrast (black/yellow/blue) → [A11Y-SECTION:high-contrast-black-yellow-blue] */
/* 08. High contrast presets → [A11Y-SECTION:high-contrast-presets] */
/* 09. HIGH CONTRAST: Links must be visually distinct → [A11Y-SECTION:high-contrast-links-must-be-visually-distinct] */
/* 10. Underline links → [A11Y-SECTION:underline-links] */
/* 11. Text spacing → [A11Y-SECTION:text-spacing] */
/* 12. Large cursors (wiki-hosted) → [A11Y-SECTION:large-cursors-wiki-hosted] */
/* 13. Reading ruler → [A11Y-SECTION:reading-ruler] */
/* 14. MediaWiki: extra HIGH CONTRAST coverage (Timeless + Vector) → [A11Y-SECTION:mediawiki-extra-high-contrast-coverage-timeless-vector] */
/* 15. HIGH CONTRAST: Footer (Vector + Timeless) → [A11Y-SECTION:high-contrast-footer-vector-timeless] */
/* 16. Underline links: ensure TOC wins → [A11Y-SECTION:underline-links-ensure-toc-wins] */
/* 17. HIGH CONTRAST: Header + search + user tools → [A11Y-SECTION:high-contrast-header-search-user-tools] */
/* 18. HIGH CONTRAST: Personal tools (reduce border clutter) → [A11Y-SECTION:high-contrast-personal-tools-reduce-border-clutter] */
/* ========================================================= */

/* [A11Y-SECTION:bhc-accessibility-gadget-mediawiki-timeless] */
/* =========================================================
BHC Accessibility Gadget – MediaWiki / Timeless
========================================================= */

/* [A11Y-SECTION:variables] */
/* ---------------------------------------------------------
Variables
--------------------------------------------------------- */
:root{
--a11y-bg: #111827;
--a11y-border: #374151;
--a11y-fg: #ffffff;
--a11y-focus: #FFBF47;
--a11y-link-underline: #3366CC; /* MediaWiki link blue */
--a11y-menu-width: 340px;
--a11y-contrast-fg: #FFD400;
}

/* Timeless: stop skin CSS shrinking the accessibility icon */
body.skin-timeless .a11y-toggle{
font-size: 16px !important;
line-height: 1 !important;
}
body.skin-timeless .a11y-toggle svg{
display: block !important;
width: 36px !important;
height: 36px !important;
min-width: 36px !important;
min-height: 36px !important;
max-width: none !important;
max-height: none !important;

/* If the glyph still looks small, keep this: */
transform: scale(1.15) !important;
transform-origin: 50% 50% !important;
}
/* Make sure fill isn’t being altered by skin rules */
body.skin-timeless .a11y-toggle svg path{
fill: currentColor !important;
}

/* [A11Y-SECTION:skip-links-appear-when-focused] */
/* ---------------------------------------------------------
Skip links (appear when focused)
--------------------------------------------------------- */
.skip-link{
position: absolute;
left: 12px;
top: 12px;
z-index: 11000;

padding: 10px 14px;
border-radius: 8px;

background: #111827;
color: #fff;
text-decoration: none;

top: -9999px; /* hidden off-screen by default */
transition: none; /* no animation needed when hidden */

border: 2px solid var(--a11y-focus);
}
.skip-link:focus,
.skip-link:focus-visible{
top: 12px; /* bring into view when focused */
outline: none;
z-index: 11001;
}

body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .skip-link{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-fg) !important;
}

/* Stack multiple skip links neatly when tabbing through them */
#a11y-skip-content:focus,
#a11y-skip-content:focus-visible{ top: 56px; }

#a11y-skip-nav:focus,
#a11y-skip-nav:focus-visible{ top: 100px; }

#a11y-skip-search:focus,
#a11y-skip-search:focus-visible{ top: 144px; }

/* [A11Y-SECTION:floating-accessibility-toggle] */
/* ---------------------------------------------------------
Floating accessibility toggle
--------------------------------------------------------- */
.a11y-toggle{
position: fixed;
right: 16px;
bottom: 16px;
z-index: 10001;

width: 56px;
height: 56px;
border-radius: 50%;

background: #005FCC;
border: 2px solid #ffffff;
color: #ffffff;

display: inline-flex;
align-items: center;
justify-content: center;

box-shadow: 0 10px 24px rgba(0,0,0,0.25);
cursor: pointer;
}
.a11y-toggle:hover{ background:#0047A6; }
.a11y-toggle:focus-visible{
outline: 3px solid var(--a11y-focus);
outline-offset: 3px;
}
.a11y-toggle svg{
width: 44px;
height: 44px;
fill: currentColor;
}

/* [A11Y-SECTION:panel] */
/* ---------------------------------------------------------
Panel
--------------------------------------------------------- */
/* Compact current-settings line (display-only) */
.a11y-status{
font-size: 13px;
line-height: 1.25;
margin: 6px 0 8px;
opacity: 0.95;
}

.a11y-panel{
position: fixed;
right: 14px;
bottom: 76px;
z-index: 10000;

width: var(--a11y-menu-width);
max-width: calc(100vw - 28px);

background: var(--a11y-bg);
border: 1px solid var(--a11y-border);
color: var(--a11y-fg);
border-radius: 16px;
padding: 12px;

box-shadow: 0 14px 40px rgba(0,0,0,0.28);
}
.a11y-panel[hidden]{ display:none !important; }

/* Header */
.a11y-head{
display:flex;
align-items:center;
justify-content: space-between;
margin-bottom: 10px;
}
.a11y-head h2{
font-size: 16px;
margin: 0;
}
.a11y-help{
width: 28px;
height: 28px;
border-radius: 50%;
background: #fff;
color: #111827;
font-weight: 900;
text-decoration: none;
display:flex;
align-items:center;
justify-content:center;
}
.a11y-help:focus-visible{
outline: 3px solid var(--a11y-focus);
outline-offset: 2px;
}

/* Buttons */
.a11y-row{
display:flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 10px;
}
.a11y-btn{
border: 1px solid #D1D5DB;
background:#fff;
color:#111827;
padding: 8px 10px;
border-radius: 999px;
font-size: 14px;
font-weight: 800;
cursor: pointer;
}
.a11y-btn[aria-pressed="true"]{
background:#111827;
color:#fff;
}
.a11y-btn:focus-visible{
outline: 3px solid var(--a11y-focus);
outline-offset: 2px;
}

.a11y-hint{
font-size: 13px;
color: var(--a11y-fg);
line-height: 1.4;
}

/* Screen reader only */
.a11y-sr{
position:absolute;
width:1px;
height:1px;
overflow:hidden;
clip:rect(0,0,0,0);
}

/* [A11Y-SECTION:feature-classes] */
/* =========================================================
Feature classes
========================================================= */

/* ===== Tap target improvements (WCAG 2.2 2.5.8 Target Size) ===== */

/* Make sidebar/portlet links easier to tap without changing font size */
body.skin-timeless .mw-portlet-body li,
body.skin-vector .mw-portlet-body li{
margin: 1.5px 0; /* keeps list tidy but adds breathing space */
}

body.skin-timeless .mw-portlet-body li > a,
body.skin-vector .mw-portlet-body li > a{
display: inline-block;
padding: 4px 6px; /* increases hit area */
line-height: 1.3;
border-radius: 6px; /* optional: helps focus visibility */
}

/* If portlets use <span> inside links, ensure span doesn't shrink hitbox */
body.skin-timeless .mw-portlet-body li > a > span,
body.skin-vector .mw-portlet-body li > a > span{
display: inline-block;
}

/* [A11Y-SECTION:high-contrast-black-yellow-blue] */
/* ------------------------------
High contrast (black/yellow/blue)
------------------------------ */

/* [A11Y-SECTION:high-contrast-presets] */
/* ------------------------------
High contrast presets
- Use ONE of these on <body>:
- a11y-contrast-yellow (yellow on black)
- a11y-contrast-white (white on black)
- Back-compat: a11y-contrast behaves as yellow on black
------------------------------ */
body.a11y-contrast,
body.a11y-contrast-yellow{
--a11y-contrast-fg: #FFD400;
--a11y-contrast-fg-hover: #FFE066;
--a11y-contrast-link: #36C; /* MediaWiki blue */
--a11y-contrast-border-70: rgba(255,212,0,.7);
--a11y-contrast-border-75: rgba(255,212,0,.75);
--a11y-contrast-border-85: rgba(255,212,0,.85);
}
body.a11y-contrast-white{
--a11y-contrast-fg: #FFFFFF;
--a11y-contrast-fg-hover: #E6E6E6;
--a11y-contrast-link: #9ECBFF; /* lighter link blue on black */
--a11y-contrast-border-70: rgba(255,255,255,.7);
--a11y-contrast-border-75: rgba(255,255,255,.75);
--a11y-contrast-border-85: rgba(255,255,255,.85);
}

body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white){
background:#000 !important;
color: var(--a11y-contrast-fg) !important;

/* Gadget UI variables in contrast mode */
--a11y-bg: #000;
--a11y-border: var(--a11y-contrast-border-70);
--a11y-fg: var(--a11y-contrast-fg);
--a11y-focus: var(--a11y-contrast-fg);
--a11y-link-underline: var(--a11y-contrast-link);
}

/* [A11Y-SECTION:high-contrast-links-must-be-visually-distinct] */
/* =========================================================
HIGH CONTRAST: Links must be visually distinct
Blue + underline to meet WCAG 1.4.1
========================================================= */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a:visited{
color: var(--a11y-contrast-link) !important;
text-decoration: underline !important;
text-decoration-thickness: 2px;
text-underline-offset: 0.15em;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a:hover,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a:focus-visible{
text-decoration-thickness: 3px;
}

/* Headings */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) h1,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) h2,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) h3,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) h4,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) h5,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) h6{
color:var(--a11y-contrast-fg) !important;
border-color:var(--a11y-contrast-fg) !important;
}

/* Main containers (Timeless needs explicit coverage) */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-wrapper,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-content-container,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-content,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-body,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-parser-output{
background:#000 !important;
color:var(--a11y-contrast-fg) !important;
}

/* Sidebars / tools */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #site-navigation,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #site-tools,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #page-tools,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-portlet,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-portlet-body{
background:#000 !important;
color:var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-70) !important;
}

/* FIX: portlet text stays yellow (titles, non-links) */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-portlet-body{
color:var(--a11y-contrast-fg) !important;
}

/* FIX: portlet links should be blue + underlined */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-portlet-body a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-portlet-body a:visited{
color: var(--a11y-contrast-link) !important;
text-decoration: underline !important;
text-decoration-thickness: 2px;
text-underline-offset: 0.15em;
}

/* CRITICAL FIX: many MW links are <a><span>text</span></a>
The span was inheriting/being forced yellow.
Make link contents inherit the link colour. */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-portlet-body a *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer a *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer-container a *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #footer-list a *{
color: inherit !important;
}

/* A11y UI in contrast */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .a11y-panel,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .a11y-toggle{
background:#000 !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .a11y-btn{
background:#000 !important;
color:var(--a11y-contrast-fg) !important;
border:2px solid var(--a11y-contrast-border-85) !important;
}

/* FIX: “?” help button in contrast */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .a11y-help{
background:#000 !important;
color:var(--a11y-contrast-fg) !important;
border:2px solid var(--a11y-contrast-border-85) !important;
}

/* [A11Y-SECTION:underline-links] */
/* ------------------------------
Underline links
------------------------------ */
body.a11y-underline-links a{
text-decoration: none !important;
border-bottom: 2px solid currentColor;
padding-bottom: 0.05em;
}
body.a11y-underline-links:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a{
border-bottom-color: var(--a11y-contrast-link) !important;
}

/* [A11Y-SECTION:text-spacing] */
/* ------------------------------
Text spacing
------------------------------ */
body.a11y-spacing-plus{
line-height: 1.8 !important;
letter-spacing: 0.06em !important;
word-spacing: 0.16em !important;
}
body.a11y-spacing-minus{
line-height: 1.45 !important;
letter-spacing: 0.01em !important;
word-spacing: 0.02em !important;
}

/* [A11Y-SECTION:large-cursors-wiki-hosted] */
/* ------------------------------
Large cursors (wiki-hosted)
------------------------------ */
body.a11y-cursor-white,
body.a11y-cursor-white *{
cursor: url("/index.php/Special:FilePath/large-arrow-white-64.png") 8 8, auto !important;
}
body.a11y-cursor-yellow,
body.a11y-cursor-yellow *{
cursor: url("/index.php/Special:FilePath/large-arrow-yellow-64.png") 8 8, auto !important;
}

/* [A11Y-SECTION:reading-ruler] */
/* ------------------------------
Reading ruler
------------------------------ */
#a11y-ruler{
position: fixed;
left: 0;
top: 0;
height: 22px;
width: 100vw;
z-index: 9999;
pointer-events: none;

background: linear-gradient(
to bottom,
var(--a11y-contrast-fg) 0%,
var(--a11y-contrast-fg) 40%,
#000000 40%,
#000000 60%,
var(--a11y-contrast-fg) 60%,
var(--a11y-contrast-fg) 100%
);
}
#a11y-ruler[hidden]{ display:none !important; }

/* [A11Y-SECTION:mediawiki-extra-high-contrast-coverage-timeless-vector] */
/* =========================================================
MediaWiki: extra HIGH CONTRAST coverage (Timeless + Vector)
Add at END of Gadget CSS so it wins.
========================================================= */

/* TOC */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #toc,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .toc,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #toc * ,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .toc *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-75) !important;
}

/* Category links area */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-normal-catlinks,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-normal-catlinks *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .catlinks,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .catlinks *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-75) !important;
}

/* Wikitables */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) table,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) table *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikitable,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikitable *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-datatable,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-datatable *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-75) !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikitable th,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) table th{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
}

/* Figures/captions */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) figure,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) figure *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-halign-center,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-halign-centre,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-halign-center *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-halign-centre *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
}

/* Thumb frames / image captions */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .thumb,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .thumb *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .thumbinner,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .thumbinner *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .thumbcaption,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .thumbcaption *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-75) !important;
}

/* Code-like blocks */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) pre,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) pre *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) code,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) code *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-75) !important;
}

/* [A11Y-SECTION:high-contrast-footer-vector-timeless] */
/* =========================================================
HIGH CONTRAST: Footer (Vector + Timeless)
========================================================= */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer-container{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
background-image: none !important;
border-top: 10px solid var(--a11y-contrast-fg) !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #footer-list,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #footer-list *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #footer-icons,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #footer-icons *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
}

/* FIX: footer links should be blue (not yellow) */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer a:visited{
color: var(--a11y-contrast-link) !important;
text-decoration: underline !important;
text-decoration-thickness: 2px;
text-underline-offset: 0.15em;
}

body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer .mw-portlet,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer .mw-portlet-body{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-75) !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer hr{
border-color: var(--a11y-contrast-fg) !important;
}

/* [A11Y-SECTION:underline-links-ensure-toc-wins] */
/* =========================================================
Underline links: ensure TOC wins
========================================================= */
body.a11y-underline-links #toc a,
body.a11y-underline-links .toc a{
border-bottom-color: currentColor !important;
}
body.a11y-underline-links:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #toc a,
body.a11y-underline-links:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .toc a{
border-bottom-color: var(--a11y-contrast-link) !important;
}

/* [A11Y-SECTION:high-contrast-header-search-user-tools] */
/* =========================================================
HIGH CONTRAST: Header + search + user tools
========================================================= */

/* Base header + content containers */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-header-container,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-content-container{
background: #000 !important;
background-image: none !important;
}

/* Timeless header containers */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-header,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-header-container .ts-inner,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-header-container .mw-body,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-header-container .mw-portlet,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-header-container .mw-portlet-body{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
background-image: none !important;
border-color: var(--a11y-contrast-fg) !important;
}

/* Title */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #p-logo-text #p-banner,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #p-banner.mw-wiki-title,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #p-logo-text .mw-wiki-title{
color: var(--a11y-contrast-fg) !important;
}

/* Strapline */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #bhc-strapline,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .bhc-strapline{
color: var(--a11y-contrast-fg) !important;
}

/* Search box wrappers */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #p-search,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #simpleSearch{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
}

/* Search input (generic) */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #searchInput,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #p-search #searchInput,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #p-search input[type="search"],
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #simpleSearch input[type="search"]{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
caret-color: var(--a11y-contrast-fg) !important;
border: 2px solid var(--a11y-contrast-fg) !important;
box-shadow: none !important;
-webkit-text-fill-color: var(--a11y-contrast-fg) !important; /* Safari/WebKit */
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #searchInput::placeholder,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #simpleSearch input[type="search"]::placeholder{
color: var(--a11y-contrast-border-75) !important;
}

/* Timeless-specific: beat background:#fff !important */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #p-search input[type="search"],
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #p-search #searchInput{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
caret-color: var(--a11y-contrast-fg) !important;
border: 2px solid var(--a11y-contrast-fg) !important;
-webkit-text-fill-color: var(--a11y-contrast-fg) !important;
}

/* Search submit button */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) input#mw-searchButton,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) input#searchButton,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-searchButton{
background-color: #000 !important;
border: 2px solid var(--a11y-contrast-border-85) !important;
filter: none !important;
}

/* Suggestions dropdown */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .suggestions,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .suggestions-results,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .suggestions-special,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .suggestions a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .suggestions-result,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-searchSuggest,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-searchSuggest *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-85) !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .suggestions a:visited{
color: var(--a11y-contrast-fg) !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .suggestions-result-current,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .suggestions a:hover{
background: #111 !important;
}

/* Vector search tabs area */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-search-profile-tabs,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-search-profile-tabs *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-85) !important;
}

/* [A11Y-SECTION:high-contrast-personal-tools-reduce-border-clutter] */
/* =========================================================
HIGH CONTRAST: Personal tools (reduce border clutter)
========================================================= */

/* Force yellow text to beat Timeless dark text */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal h2,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal h3,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal .mw-portlet,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal .mw-portlet *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless .mw-portlet-body,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless .mw-portlet-body *{
color: var(--a11y-contrast-fg) !important;
}

/* Force black background to beat Timeless white dropdown */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal .dropdown,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal .mw-portlet-body,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal-inner,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal-inner *{
background: #000 !important;
background-image: none !important;
}

/* Keep ONE border only (container), remove nested borders */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #personal .dropdown,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #personal-inner.dropdown,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #personal .mw-portlet-body{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border: 2px solid var(--a11y-contrast-border-85) !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #personal .mw-portlet-body *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #personal-inner.dropdown *{
background: transparent !important;
color: var(--a11y-contrast-fg) !important;
border: 0 !important;
outline-color: var(--a11y-contrast-fg) !important;
}
/* Leave links to global link rules */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #personal a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #personal a:visited{
background: transparent !important;
border-color: transparent !important;
}

/* =========================================================
HIGH CONTRAST: Timeless containers that fight back
========================================================= */

/* Timeless forces grey content container */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-content-container{
background: #000 !important;
background-image: none !important;
}

/* Timeless header container sometimes white at breakpoints */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-header-container{
background: #000 !important;
background-image: none !important;
}

/* Timeless related-navigation sidebar chunk at ≥1340px */
@media screen and (min-width: 1340px){
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless
#mw-related-navigation .sidebar-chunk{
background: #000 !important;
background-image: none !important;
border-color: var(--a11y-contrast-border-85) !important;
box-shadow: none !important;
}
}

/* mw-content border colour in high-contrast mode */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-content{
border-color: var(--a11y-contrast-fg) !important;
}

/* =========================================================
EDIT MODE: textarea and editOptions
========================================================= */

/* Edit textarea */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #wpTextbox1,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) textarea.mw-editfont-monospace{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
caret-color: var(--a11y-contrast-fg) !important;
border: 2px solid var(--a11y-contrast-fg) !important;
box-shadow: none !important;
-webkit-text-fill-color: var(--a11y-contrast-fg) !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #wpTextbox1::placeholder{
color: var(--a11y-contrast-border-75) !important;
}

/* editOptions bar */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-85) !important;
box-shadow: none !important;
}

/* Don’t override links here — let your global contrast link styling apply */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions a:visited{
background: transparent !important;
border-color: transparent !important;
}

/* Buttons + inputs inside editOptions */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions button,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions input,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions select,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions textarea,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions .mw-ui-button,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions .oo-ui-buttonElement-button{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border: 2px solid var(--a11y-contrast-border-85) !important;
box-shadow: none !important;
-webkit-text-fill-color: var(--a11y-contrast-fg) !important;
}

/* Focus visibility */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions button:focus-visible,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions input:focus-visible,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions select:focus-visible,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions .mw-ui-button:focus-visible,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions .oo-ui-buttonElement-button:focus-visible{
outline: 3px solid var(--a11y-contrast-fg) !important;
outline-offset: 2px !important;
}

/* =========================================================
EDIT MODE: Codex (CDX) message banners (e.g. interface warning)
========================================================= */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .cdx-message,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .cdx-message--block,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .cdx-message--error{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border: 2px solid var(--a11y-contrast-border-85) !important;
box-shadow: none !important;
}
/* Inner content */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .cdx-message__content,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .cdx-message__content *{
background: transparent !important;
color: var(--a11y-contrast-fg) !important;
}
/* Icon */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .cdx-message__icon,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .cdx-message__icon *{
color: var(--a11y-contrast-fg) !important;
fill: var(--a11y-contrast-fg) !important;
}
/* Emphasis */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .cdx-message strong{
color: var(--a11y-contrast-fg) !important;
}

/* FIX: Timeless sidebar chunks stay light at 1100–1339px.
Force black/yellow in high-contrast mode only. */
@media screen and (min-width: 1100px) and (max-width: 1339px){
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-site-navigation .sidebar-chunk,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-related-navigation .sidebar-chunk{
background: #000 !important;
background-image: none !important;
border-color: var(--a11y-contrast-border-85) !important;
box-shadow: none !important;
}

/* If any text inside is still dark, force it yellow */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-site-navigation .sidebar-chunk *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-related-navigation .sidebar-chunk *{
color: var(--a11y-contrast-fg) !important;
}

/* …but if it’s a LINK (or inside a link), keep it blue */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-site-navigation .sidebar-chunk a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-site-navigation .sidebar-chunk a:visited,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-related-navigation .sidebar-chunk a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-related-navigation .sidebar-chunk a:visited{
color: var(--a11y-contrast-link) !important;
text-decoration: underline !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-site-navigation .sidebar-chunk a *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-related-navigation .sidebar-chunk a *{
color: inherit !important;
}
}

/* FIX (stronger): Timeless sidebar chunks at 1100–1339px still light.
Must beat the skin rule in the same breakpoint. */
@media screen and (min-width: 1100px) and (max-width: 1339px){
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-site-navigation .sidebar-chunk,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-related-navigation .sidebar-chunk{
background: #000 !important;
background-image: none !important;
border-color: var(--a11y-contrast-border-85) !important;
box-shadow: none !important;
}

body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-site-navigation .sidebar-chunk *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-related-navigation .sidebar-chunk *{
color: var(--a11y-contrast-fg) !important;
}

/* …but links stay blue */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-site-navigation .sidebar-chunk a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-site-navigation .sidebar-chunk a:visited,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-related-navigation .sidebar-chunk a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-related-navigation .sidebar-chunk a:visited{
color: var(--a11y-contrast-link) !important;
text-decoration: underline !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-site-navigation .sidebar-chunk a *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-related-navigation .sidebar-chunk a *{
color: inherit !important;
}
}

/* =========================================================
EMERGENCY: ensure the accessibility toggle is visible
(keep at VERY END)
========================================================= */
#a11y-toggle.a11y-toggle{
position: fixed !important;
right: 16px !important;
bottom: 16px !important;

display: inline-flex !important;
visibility: visible !important;
opacity: 1 !important;

z-index: 2147483647 !important;
pointer-events: auto !important;

transform: none !important;
}
#a11y-toggle.a11y-toggle svg{
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}

/* =========================================================
HIGH CONTRAST: Scrollbars (page + editor)
Supports: Chrome/Safari/Opera (WebKit) + Firefox
Scope: ONLY when body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) is active
========================================================= */

/* ---------- Firefox (Gecko) ---------- */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white),
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) *{
scrollbar-color: var(--a11y-contrast-fg) #000; /* thumb / track */
scrollbar-width: auto; /* or 'thin' if you prefer */
}

/* ---------- Chrome / Safari / Opera (WebKit/Blink) ---------- */
/* Page scrollbars */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white)::-webkit-scrollbar{
width: 14px;
height: 14px; /* horizontal */
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white)::-webkit-scrollbar-track{
background: #000;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white)::-webkit-scrollbar-thumb{
background: var(--a11y-contrast-fg);
border: 3px solid #000; /* creates separation from track */
border-radius: 10px;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white)::-webkit-scrollbar-thumb:hover{
background: var(--a11y-contrast-fg-hover); /* slightly lighter yellow on hover */
}

/* Editor + common scrollable containers (safety net) */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) textarea,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #wpTextbox1,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui *{
scrollbar-color: var(--a11y-contrast-fg) #000; /* Firefox for these elements too */
}

/* FIX: WikiEditor tool-select dropdown text becomes unreadable
because it inherits yellow from body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white). */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui-toolbar .tool.tool-select,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui-toolbar .tool.tool-select *{
color: #222 !important; /* readable on the tool-select's light background */
}

/* FIX: WikiEditor toolbar tabs readability in high-contrast mode */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui-toolbar .tabs a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui-toolbar .tabs a:visited{
color: #0645ad !important; /* MediaWiki blue */
}

/* Active tab: keep it dark for readability on light background */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui-toolbar .tabs span.tab a.current,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui-toolbar .tabs span.tab a.current:visited{
color: #222 !important;
}

body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) textarea::-webkit-scrollbar,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #wpTextbox1::-webkit-scrollbar,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui::-webkit-scrollbar{
width: 14px;
height: 14px;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) textarea::-webkit-scrollbar-track,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #wpTextbox1::-webkit-scrollbar-track,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui::-webkit-scrollbar-track{
background: #000;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) textarea::-webkit-scrollbar-thumb,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #wpTextbox1::-webkit-scrollbar-thumb,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui::-webkit-scrollbar-thumb{
background: var(--a11y-contrast-fg);
border: 3px solid #000;
border-radius: 10px;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) textarea::-webkit-scrollbar-thumb:hover,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #wpTextbox1::-webkit-scrollbar-thumb:hover,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui::-webkit-scrollbar-thumb:hover{
background: var(--a11y-contrast-fg-hover);
}

/* Try to target root scrolling element where supported */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) html{
scrollbar-color: var(--a11y-contrast-fg) #000;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) html::-webkit-scrollbar{
width: 14px;
height: 14px;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) html::-webkit-scrollbar-track{
background: #000;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) html::-webkit-scrollbar-thumb{
background: var(--a11y-contrast-fg);
border: 3px solid #000;
border-radius: 10px;
}

/* =========================================================
FINAL OVERRIDE (brute force):
High-contrast links must be blue + underlined everywhere,
including link text wrapped in spans inside portlets/footer.
PUT THIS AT THE VERY END OF THE FILE.
========================================================= */

body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a:visited{
color: var(--a11y-contrast-link) !important;
text-decoration: underline !important;
text-decoration-thickness: 2px !important;
text-underline-offset: 0.15em !important;
}

/* Critical: if link text is wrapped (e.g. <a><span>Text</span></a>),
force ALL children inside links to inherit the link colour. */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a:visited *{
color: inherit !important;
}

/* Extra specificity for the problem zones (beats Timeless + portlet-body * rules) */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless .mw-portlet-body a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless .mw-portlet-body a:visited,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-footer a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-footer a:visited,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-footer-container a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-footer-container a:visited{
color: var(--a11y-contrast-link) !important;
text-decoration: underline !important;
}

body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless .mw-portlet-body a *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless .mw-portlet-body a:visited *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-footer a *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-footer a:visited *{
color: inherit !important;
}

/* =========================================================
FINAL FIX: #personal (user tools) links
The portlet-body * rule forces yellow.
Override ONLY for links and their contents.
========================================================= */

body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal a:visited{
color: var(--a11y-contrast-link) !important;
text-decoration: underline !important;
}

body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal a *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal a:visited *{
color: inherit !important;
}

/* =========================================================
FINAL OVERRIDE (authoritative)
In contrast modes, ALL links should match the contrast text colour.
This must win against Timeless/Vector skin link rules (logged in/out).
Keep at VERY END of the gadget CSS.
========================================================= */
body:is(.a11y-contrast, .a11y-contrast-yellow, .a11y-contrast-white) a,
body:is(.a11y-contrast, .a11y-contrast-yellow, .a11y-contrast-white) a:visited,
body:is(.a11y-contrast, .a11y-contrast-yellow, .a11y-contrast-white) a:active{
color: var(--a11y-contrast-fg) !important;
text-decoration-color: var(--a11y-contrast-fg) !important;
text-decoration: underline !important;
text-decoration-thickness: 2px;
text-underline-offset: 0.15em;
}

/* Hover/focus: slightly stronger underline (no colour change) */
body:is(.a11y-contrast, .a11y-contrast-yellow, .a11y-contrast-white) a:hover,
body:is(.a11y-contrast, .a11y-contrast-yellow, .a11y-contrast-white) a:focus-visible{
text-decoration-thickness: 3px;
}

/* Any wrapped spans inside links must inherit the link colour (Timeless uses <a><span>…) */
body:is(.a11y-contrast, .a11y-contrast-yellow, .a11y-contrast-white) a *,
body:is(.a11y-contrast, .a11y-contrast-yellow, .a11y-contrast-white).skin-timeless a *{
color: inherit !important;
}

/* Extra belt-and-braces for Timeless logged-in personal tools + portlets */
body:is(.a11y-contrast, .a11y-contrast-yellow, .a11y-contrast-white).skin-timeless #personal a,
body:is(.a11y-contrast, .a11y-contrast-yellow, .a11y-contrast-white).skin-timeless .mw-portlet-body a{
color: var(--a11y-contrast-fg) !important;
}

MediaWiki:Gadget-bhc-accessibility.css

2026-01-29T12:46:02Z

Steve:

/*
⚠️ Do not reorder rules below this line — contrast overrides depend on cascade order.
*/

/* =========================================================
Accessibility Gadget CSS — quick navigation
(No rules reordered; section tags added for readability)
Search for: [A11Y-SECTION: ...]
========================================================= */
/* 01. BHC Accessibility Gadget – MediaWiki / Timeless → [A11Y-SECTION:bhc-accessibility-gadget-mediawiki-timeless] */
/* 02. Variables → [A11Y-SECTION:variables] */
/* 03. Skip links (appear when focused) → [A11Y-SECTION:skip-links-appear-when-focused] */
/* 04. Floating accessibility toggle → [A11Y-SECTION:floating-accessibility-toggle] */
/* 05. Panel → [A11Y-SECTION:panel] */
/* 06. Feature classes → [A11Y-SECTION:feature-classes] */
/* 07. High contrast (black/yellow/blue) → [A11Y-SECTION:high-contrast-black-yellow-blue] */
/* 08. High contrast presets → [A11Y-SECTION:high-contrast-presets] */
/* 09. HIGH CONTRAST: Links must be visually distinct → [A11Y-SECTION:high-contrast-links-must-be-visually-distinct] */
/* 10. Underline links → [A11Y-SECTION:underline-links] */
/* 11. Text spacing → [A11Y-SECTION:text-spacing] */
/* 12. Large cursors (wiki-hosted) → [A11Y-SECTION:large-cursors-wiki-hosted] */
/* 13. Reading ruler → [A11Y-SECTION:reading-ruler] */
/* 14. MediaWiki: extra HIGH CONTRAST coverage (Timeless + Vector) → [A11Y-SECTION:mediawiki-extra-high-contrast-coverage-timeless-vector] */
/* 15. HIGH CONTRAST: Footer (Vector + Timeless) → [A11Y-SECTION:high-contrast-footer-vector-timeless] */
/* 16. Underline links: ensure TOC wins → [A11Y-SECTION:underline-links-ensure-toc-wins] */
/* 17. HIGH CONTRAST: Header + search + user tools → [A11Y-SECTION:high-contrast-header-search-user-tools] */
/* 18. HIGH CONTRAST: Personal tools (reduce border clutter) → [A11Y-SECTION:high-contrast-personal-tools-reduce-border-clutter] */
/* ========================================================= */

/* [A11Y-SECTION:bhc-accessibility-gadget-mediawiki-timeless] */
/* =========================================================
BHC Accessibility Gadget – MediaWiki / Timeless
========================================================= */

/* [A11Y-SECTION:variables] */
/* ---------------------------------------------------------
Variables
--------------------------------------------------------- */
:root{
--a11y-bg: #111827;
--a11y-border: #374151;
--a11y-fg: #ffffff;
--a11y-focus: #FFBF47;
--a11y-link-underline: #3366CC; /* MediaWiki link blue */
--a11y-menu-width: 340px;
--a11y-contrast-fg: #FFD400;
}

/* Timeless: stop skin CSS shrinking the accessibility icon */
body.skin-timeless .a11y-toggle{
font-size: 16px !important;
line-height: 1 !important;
}
body.skin-timeless .a11y-toggle svg{
display: block !important;
width: 36px !important;
height: 36px !important;
min-width: 36px !important;
min-height: 36px !important;
max-width: none !important;
max-height: none !important;

/* If the glyph still looks small, keep this: */
transform: scale(1.15) !important;
transform-origin: 50% 50% !important;
}
/* Make sure fill isn’t being altered by skin rules */
body.skin-timeless .a11y-toggle svg path{
fill: currentColor !important;
}

/* [A11Y-SECTION:skip-links-appear-when-focused] */
/* ---------------------------------------------------------
Skip links (appear when focused)
--------------------------------------------------------- */
.skip-link{
position: absolute;
left: 12px;
top: 12px;
z-index: 11000;

padding: 10px 14px;
border-radius: 8px;

background: #111827;
color: #fff;
text-decoration: none;

top: -9999px; /* hidden off-screen by default */
transition: none; /* no animation needed when hidden */

border: 2px solid var(--a11y-focus);
}
.skip-link:focus,
.skip-link:focus-visible{
top: 12px; /* bring into view when focused */
outline: none;
z-index: 11001;
}

body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .skip-link{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-fg) !important;
}

/* Stack multiple skip links neatly when tabbing through them */
#a11y-skip-content:focus,
#a11y-skip-content:focus-visible{ top: 56px; }

#a11y-skip-nav:focus,
#a11y-skip-nav:focus-visible{ top: 100px; }

#a11y-skip-search:focus,
#a11y-skip-search:focus-visible{ top: 144px; }

/* [A11Y-SECTION:floating-accessibility-toggle] */
/* ---------------------------------------------------------
Floating accessibility toggle
--------------------------------------------------------- */
.a11y-toggle{
position: fixed;
right: 16px;
bottom: 16px;
z-index: 10001;

width: 56px;
height: 56px;
border-radius: 50%;

background: #005FCC;
border: 2px solid #ffffff;
color: #ffffff;

display: inline-flex;
align-items: center;
justify-content: center;

box-shadow: 0 10px 24px rgba(0,0,0,0.25);
cursor: pointer;
}
.a11y-toggle:hover{ background:#0047A6; }
.a11y-toggle:focus-visible{
outline: 3px solid var(--a11y-focus);
outline-offset: 3px;
}
.a11y-toggle svg{
width: 44px;
height: 44px;
fill: currentColor;
}

/* [A11Y-SECTION:panel] */
/* ---------------------------------------------------------
Panel
--------------------------------------------------------- */
/* Compact current-settings line (display-only) */
.a11y-status{
font-size: 13px;
line-height: 1.25;
margin: 6px 0 8px;
opacity: 0.95;
}

.a11y-panel{
position: fixed;
right: 14px;
bottom: 76px;
z-index: 10000;

width: var(--a11y-menu-width);
max-width: calc(100vw - 28px);

background: var(--a11y-bg);
border: 1px solid var(--a11y-border);
color: var(--a11y-fg);
border-radius: 16px;
padding: 12px;

box-shadow: 0 14px 40px rgba(0,0,0,0.28);
}
.a11y-panel[hidden]{ display:none !important; }

/* Header */
.a11y-head{
display:flex;
align-items:center;
justify-content: space-between;
margin-bottom: 10px;
}
.a11y-head h2{
font-size: 16px;
margin: 0;
}
.a11y-help{
width: 28px;
height: 28px;
border-radius: 50%;
background: #fff;
color: #111827;
font-weight: 900;
text-decoration: none;
display:flex;
align-items:center;
justify-content:center;
}
.a11y-help:focus-visible{
outline: 3px solid var(--a11y-focus);
outline-offset: 2px;
}

/* Buttons */
.a11y-row{
display:flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 10px;
}
.a11y-btn{
border: 1px solid #D1D5DB;
background:#fff;
color:#111827;
padding: 8px 10px;
border-radius: 999px;
font-size: 14px;
font-weight: 800;
cursor: pointer;
}
.a11y-btn[aria-pressed="true"]{
background:#111827;
color:#fff;
}
.a11y-btn:focus-visible{
outline: 3px solid var(--a11y-focus);
outline-offset: 2px;
}

.a11y-hint{
font-size: 13px;
color: var(--a11y-fg);
line-height: 1.4;
}

/* Screen reader only */
.a11y-sr{
position:absolute;
width:1px;
height:1px;
overflow:hidden;
clip:rect(0,0,0,0);
}

/* [A11Y-SECTION:feature-classes] */
/* =========================================================
Feature classes
========================================================= */

/* ===== Tap target improvements (WCAG 2.2 2.5.8 Target Size) ===== */

/* Make sidebar/portlet links easier to tap without changing font size */
body.skin-timeless .mw-portlet-body li,
body.skin-vector .mw-portlet-body li{
margin: 2px 0; /* keeps list tidy but adds breathing space */
}

body.skin-timeless .mw-portlet-body li > a,
body.skin-vector .mw-portlet-body li > a{
display: inline-block;
padding: 6px 8px; /* increases hit area */
line-height: 1.3;
border-radius: 6px; /* optional: helps focus visibility */
}

/* If portlets use <span> inside links, ensure span doesn't shrink hitbox */
body.skin-timeless .mw-portlet-body li > a > span,
body.skin-vector .mw-portlet-body li > a > span{
display: inline-block;
}

/* [A11Y-SECTION:high-contrast-black-yellow-blue] */
/* ------------------------------
High contrast (black/yellow/blue)
------------------------------ */

/* [A11Y-SECTION:high-contrast-presets] */
/* ------------------------------
High contrast presets
- Use ONE of these on <body>:
- a11y-contrast-yellow (yellow on black)
- a11y-contrast-white (white on black)
- Back-compat: a11y-contrast behaves as yellow on black
------------------------------ */
body.a11y-contrast,
body.a11y-contrast-yellow{
--a11y-contrast-fg: #FFD400;
--a11y-contrast-fg-hover: #FFE066;
--a11y-contrast-link: #36C; /* MediaWiki blue */
--a11y-contrast-border-70: rgba(255,212,0,.7);
--a11y-contrast-border-75: rgba(255,212,0,.75);
--a11y-contrast-border-85: rgba(255,212,0,.85);
}
body.a11y-contrast-white{
--a11y-contrast-fg: #FFFFFF;
--a11y-contrast-fg-hover: #E6E6E6;
--a11y-contrast-link: #9ECBFF; /* lighter link blue on black */
--a11y-contrast-border-70: rgba(255,255,255,.7);
--a11y-contrast-border-75: rgba(255,255,255,.75);
--a11y-contrast-border-85: rgba(255,255,255,.85);
}

body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white){
background:#000 !important;
color: var(--a11y-contrast-fg) !important;

/* Gadget UI variables in contrast mode */
--a11y-bg: #000;
--a11y-border: var(--a11y-contrast-border-70);
--a11y-fg: var(--a11y-contrast-fg);
--a11y-focus: var(--a11y-contrast-fg);
--a11y-link-underline: var(--a11y-contrast-link);
}

/* [A11Y-SECTION:high-contrast-links-must-be-visually-distinct] */
/* =========================================================
HIGH CONTRAST: Links must be visually distinct
Blue + underline to meet WCAG 1.4.1
========================================================= */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a:visited{
color: var(--a11y-contrast-link) !important;
text-decoration: underline !important;
text-decoration-thickness: 2px;
text-underline-offset: 0.15em;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a:hover,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a:focus-visible{
text-decoration-thickness: 3px;
}

/* Headings */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) h1,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) h2,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) h3,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) h4,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) h5,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) h6{
color:var(--a11y-contrast-fg) !important;
border-color:var(--a11y-contrast-fg) !important;
}

/* Main containers (Timeless needs explicit coverage) */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-wrapper,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-content-container,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-content,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-body,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-parser-output{
background:#000 !important;
color:var(--a11y-contrast-fg) !important;
}

/* Sidebars / tools */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #site-navigation,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #site-tools,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #page-tools,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-portlet,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-portlet-body{
background:#000 !important;
color:var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-70) !important;
}

/* FIX: portlet text stays yellow (titles, non-links) */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-portlet-body{
color:var(--a11y-contrast-fg) !important;
}

/* FIX: portlet links should be blue + underlined */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-portlet-body a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-portlet-body a:visited{
color: var(--a11y-contrast-link) !important;
text-decoration: underline !important;
text-decoration-thickness: 2px;
text-underline-offset: 0.15em;
}

/* CRITICAL FIX: many MW links are <a><span>text</span></a>
The span was inheriting/being forced yellow.
Make link contents inherit the link colour. */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-portlet-body a *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer a *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer-container a *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #footer-list a *{
color: inherit !important;
}

/* A11y UI in contrast */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .a11y-panel,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .a11y-toggle{
background:#000 !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .a11y-btn{
background:#000 !important;
color:var(--a11y-contrast-fg) !important;
border:2px solid var(--a11y-contrast-border-85) !important;
}

/* FIX: “?” help button in contrast */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .a11y-help{
background:#000 !important;
color:var(--a11y-contrast-fg) !important;
border:2px solid var(--a11y-contrast-border-85) !important;
}

/* [A11Y-SECTION:underline-links] */
/* ------------------------------
Underline links
------------------------------ */
body.a11y-underline-links a{
text-decoration: none !important;
border-bottom: 2px solid currentColor;
padding-bottom: 0.05em;
}
body.a11y-underline-links:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a{
border-bottom-color: var(--a11y-contrast-link) !important;
}

/* [A11Y-SECTION:text-spacing] */
/* ------------------------------
Text spacing
------------------------------ */
body.a11y-spacing-plus{
line-height: 1.8 !important;
letter-spacing: 0.06em !important;
word-spacing: 0.16em !important;
}
body.a11y-spacing-minus{
line-height: 1.45 !important;
letter-spacing: 0.01em !important;
word-spacing: 0.02em !important;
}

/* [A11Y-SECTION:large-cursors-wiki-hosted] */
/* ------------------------------
Large cursors (wiki-hosted)
------------------------------ */
body.a11y-cursor-white,
body.a11y-cursor-white *{
cursor: url("/index.php/Special:FilePath/large-arrow-white-64.png") 8 8, auto !important;
}
body.a11y-cursor-yellow,
body.a11y-cursor-yellow *{
cursor: url("/index.php/Special:FilePath/large-arrow-yellow-64.png") 8 8, auto !important;
}

/* [A11Y-SECTION:reading-ruler] */
/* ------------------------------
Reading ruler
------------------------------ */
#a11y-ruler{
position: fixed;
left: 0;
top: 0;
height: 22px;
width: 100vw;
z-index: 9999;
pointer-events: none;

background: linear-gradient(
to bottom,
var(--a11y-contrast-fg) 0%,
var(--a11y-contrast-fg) 40%,
#000000 40%,
#000000 60%,
var(--a11y-contrast-fg) 60%,
var(--a11y-contrast-fg) 100%
);
}
#a11y-ruler[hidden]{ display:none !important; }

/* [A11Y-SECTION:mediawiki-extra-high-contrast-coverage-timeless-vector] */
/* =========================================================
MediaWiki: extra HIGH CONTRAST coverage (Timeless + Vector)
Add at END of Gadget CSS so it wins.
========================================================= */

/* TOC */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #toc,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .toc,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #toc * ,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .toc *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-75) !important;
}

/* Category links area */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-normal-catlinks,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-normal-catlinks *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .catlinks,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .catlinks *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-75) !important;
}

/* Wikitables */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) table,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) table *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikitable,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikitable *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-datatable,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-datatable *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-75) !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikitable th,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) table th{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
}

/* Figures/captions */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) figure,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) figure *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-halign-center,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-halign-centre,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-halign-center *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-halign-centre *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
}

/* Thumb frames / image captions */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .thumb,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .thumb *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .thumbinner,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .thumbinner *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .thumbcaption,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .thumbcaption *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-75) !important;
}

/* Code-like blocks */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) pre,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) pre *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) code,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) code *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-75) !important;
}

/* [A11Y-SECTION:high-contrast-footer-vector-timeless] */
/* =========================================================
HIGH CONTRAST: Footer (Vector + Timeless)
========================================================= */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer-container{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
background-image: none !important;
border-top: 10px solid var(--a11y-contrast-fg) !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #footer-list,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #footer-list *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #footer-icons,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #footer-icons *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
}

/* FIX: footer links should be blue (not yellow) */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer a:visited{
color: var(--a11y-contrast-link) !important;
text-decoration: underline !important;
text-decoration-thickness: 2px;
text-underline-offset: 0.15em;
}

body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer .mw-portlet,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer .mw-portlet-body{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-75) !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer hr{
border-color: var(--a11y-contrast-fg) !important;
}

/* [A11Y-SECTION:underline-links-ensure-toc-wins] */
/* =========================================================
Underline links: ensure TOC wins
========================================================= */
body.a11y-underline-links #toc a,
body.a11y-underline-links .toc a{
border-bottom-color: currentColor !important;
}
body.a11y-underline-links:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #toc a,
body.a11y-underline-links:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .toc a{
border-bottom-color: var(--a11y-contrast-link) !important;
}

/* [A11Y-SECTION:high-contrast-header-search-user-tools] */
/* =========================================================
HIGH CONTRAST: Header + search + user tools
========================================================= */

/* Base header + content containers */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-header-container,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-content-container{
background: #000 !important;
background-image: none !important;
}

/* Timeless header containers */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-header,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-header-container .ts-inner,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-header-container .mw-body,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-header-container .mw-portlet,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-header-container .mw-portlet-body{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
background-image: none !important;
border-color: var(--a11y-contrast-fg) !important;
}

/* Title */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #p-logo-text #p-banner,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #p-banner.mw-wiki-title,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #p-logo-text .mw-wiki-title{
color: var(--a11y-contrast-fg) !important;
}

/* Strapline */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #bhc-strapline,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .bhc-strapline{
color: var(--a11y-contrast-fg) !important;
}

/* Search box wrappers */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #p-search,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #simpleSearch{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
}

/* Search input (generic) */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #searchInput,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #p-search #searchInput,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #p-search input[type="search"],
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #simpleSearch input[type="search"]{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
caret-color: var(--a11y-contrast-fg) !important;
border: 2px solid var(--a11y-contrast-fg) !important;
box-shadow: none !important;
-webkit-text-fill-color: var(--a11y-contrast-fg) !important; /* Safari/WebKit */
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #searchInput::placeholder,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #simpleSearch input[type="search"]::placeholder{
color: var(--a11y-contrast-border-75) !important;
}

/* Timeless-specific: beat background:#fff !important */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #p-search input[type="search"],
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #p-search #searchInput{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
caret-color: var(--a11y-contrast-fg) !important;
border: 2px solid var(--a11y-contrast-fg) !important;
-webkit-text-fill-color: var(--a11y-contrast-fg) !important;
}

/* Search submit button */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) input#mw-searchButton,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) input#searchButton,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-searchButton{
background-color: #000 !important;
border: 2px solid var(--a11y-contrast-border-85) !important;
filter: none !important;
}

/* Suggestions dropdown */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .suggestions,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .suggestions-results,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .suggestions-special,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .suggestions a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .suggestions-result,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-searchSuggest,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-searchSuggest *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-85) !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .suggestions a:visited{
color: var(--a11y-contrast-fg) !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .suggestions-result-current,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .suggestions a:hover{
background: #111 !important;
}

/* Vector search tabs area */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-search-profile-tabs,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-search-profile-tabs *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-85) !important;
}

/* [A11Y-SECTION:high-contrast-personal-tools-reduce-border-clutter] */
/* =========================================================
HIGH CONTRAST: Personal tools (reduce border clutter)
========================================================= */

/* Force yellow text to beat Timeless dark text */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal h2,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal h3,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal .mw-portlet,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal .mw-portlet *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless .mw-portlet-body,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless .mw-portlet-body *{
color: var(--a11y-contrast-fg) !important;
}

/* Force black background to beat Timeless white dropdown */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal .dropdown,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal .mw-portlet-body,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal-inner,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal-inner *{
background: #000 !important;
background-image: none !important;
}

/* Keep ONE border only (container), remove nested borders */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #personal .dropdown,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #personal-inner.dropdown,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #personal .mw-portlet-body{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border: 2px solid var(--a11y-contrast-border-85) !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #personal .mw-portlet-body *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #personal-inner.dropdown *{
background: transparent !important;
color: var(--a11y-contrast-fg) !important;
border: 0 !important;
outline-color: var(--a11y-contrast-fg) !important;
}
/* Leave links to global link rules */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #personal a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #personal a:visited{
background: transparent !important;
border-color: transparent !important;
}

/* =========================================================
HIGH CONTRAST: Timeless containers that fight back
========================================================= */

/* Timeless forces grey content container */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-content-container{
background: #000 !important;
background-image: none !important;
}

/* Timeless header container sometimes white at breakpoints */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-header-container{
background: #000 !important;
background-image: none !important;
}

/* Timeless related-navigation sidebar chunk at ≥1340px */
@media screen and (min-width: 1340px){
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless
#mw-related-navigation .sidebar-chunk{
background: #000 !important;
background-image: none !important;
border-color: var(--a11y-contrast-border-85) !important;
box-shadow: none !important;
}
}

/* mw-content border colour in high-contrast mode */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-content{
border-color: var(--a11y-contrast-fg) !important;
}

/* =========================================================
EDIT MODE: textarea and editOptions
========================================================= */

/* Edit textarea */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #wpTextbox1,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) textarea.mw-editfont-monospace{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
caret-color: var(--a11y-contrast-fg) !important;
border: 2px solid var(--a11y-contrast-fg) !important;
box-shadow: none !important;
-webkit-text-fill-color: var(--a11y-contrast-fg) !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #wpTextbox1::placeholder{
color: var(--a11y-contrast-border-75) !important;
}

/* editOptions bar */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-85) !important;
box-shadow: none !important;
}

/* Don’t override links here — let your global contrast link styling apply */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions a:visited{
background: transparent !important;
border-color: transparent !important;
}

/* Buttons + inputs inside editOptions */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions button,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions input,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions select,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions textarea,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions .mw-ui-button,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions .oo-ui-buttonElement-button{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border: 2px solid var(--a11y-contrast-border-85) !important;
box-shadow: none !important;
-webkit-text-fill-color: var(--a11y-contrast-fg) !important;
}

/* Focus visibility */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions button:focus-visible,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions input:focus-visible,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions select:focus-visible,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions .mw-ui-button:focus-visible,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions .oo-ui-buttonElement-button:focus-visible{
outline: 3px solid var(--a11y-contrast-fg) !important;
outline-offset: 2px !important;
}

/* =========================================================
EDIT MODE: Codex (CDX) message banners (e.g. interface warning)
========================================================= */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .cdx-message,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .cdx-message--block,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .cdx-message--error{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border: 2px solid var(--a11y-contrast-border-85) !important;
box-shadow: none !important;
}
/* Inner content */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .cdx-message__content,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .cdx-message__content *{
background: transparent !important;
color: var(--a11y-contrast-fg) !important;
}
/* Icon */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .cdx-message__icon,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .cdx-message__icon *{
color: var(--a11y-contrast-fg) !important;
fill: var(--a11y-contrast-fg) !important;
}
/* Emphasis */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .cdx-message strong{
color: var(--a11y-contrast-fg) !important;
}

/* FIX: Timeless sidebar chunks stay light at 1100–1339px.
Force black/yellow in high-contrast mode only. */
@media screen and (min-width: 1100px) and (max-width: 1339px){
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-site-navigation .sidebar-chunk,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-related-navigation .sidebar-chunk{
background: #000 !important;
background-image: none !important;
border-color: var(--a11y-contrast-border-85) !important;
box-shadow: none !important;
}

/* If any text inside is still dark, force it yellow */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-site-navigation .sidebar-chunk *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-related-navigation .sidebar-chunk *{
color: var(--a11y-contrast-fg) !important;
}

/* …but if it’s a LINK (or inside a link), keep it blue */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-site-navigation .sidebar-chunk a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-site-navigation .sidebar-chunk a:visited,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-related-navigation .sidebar-chunk a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-related-navigation .sidebar-chunk a:visited{
color: var(--a11y-contrast-link) !important;
text-decoration: underline !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-site-navigation .sidebar-chunk a *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-related-navigation .sidebar-chunk a *{
color: inherit !important;
}
}

/* FIX (stronger): Timeless sidebar chunks at 1100–1339px still light.
Must beat the skin rule in the same breakpoint. */
@media screen and (min-width: 1100px) and (max-width: 1339px){
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-site-navigation .sidebar-chunk,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-related-navigation .sidebar-chunk{
background: #000 !important;
background-image: none !important;
border-color: var(--a11y-contrast-border-85) !important;
box-shadow: none !important;
}

body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-site-navigation .sidebar-chunk *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-related-navigation .sidebar-chunk *{
color: var(--a11y-contrast-fg) !important;
}

/* …but links stay blue */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-site-navigation .sidebar-chunk a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-site-navigation .sidebar-chunk a:visited,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-related-navigation .sidebar-chunk a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-related-navigation .sidebar-chunk a:visited{
color: var(--a11y-contrast-link) !important;
text-decoration: underline !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-site-navigation .sidebar-chunk a *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-related-navigation .sidebar-chunk a *{
color: inherit !important;
}
}

/* =========================================================
EMERGENCY: ensure the accessibility toggle is visible
(keep at VERY END)
========================================================= */
#a11y-toggle.a11y-toggle{
position: fixed !important;
right: 16px !important;
bottom: 16px !important;

display: inline-flex !important;
visibility: visible !important;
opacity: 1 !important;

z-index: 2147483647 !important;
pointer-events: auto !important;

transform: none !important;
}
#a11y-toggle.a11y-toggle svg{
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}

/* =========================================================
HIGH CONTRAST: Scrollbars (page + editor)
Supports: Chrome/Safari/Opera (WebKit) + Firefox
Scope: ONLY when body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) is active
========================================================= */

/* ---------- Firefox (Gecko) ---------- */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white),
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) *{
scrollbar-color: var(--a11y-contrast-fg) #000; /* thumb / track */
scrollbar-width: auto; /* or 'thin' if you prefer */
}

/* ---------- Chrome / Safari / Opera (WebKit/Blink) ---------- */
/* Page scrollbars */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white)::-webkit-scrollbar{
width: 14px;
height: 14px; /* horizontal */
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white)::-webkit-scrollbar-track{
background: #000;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white)::-webkit-scrollbar-thumb{
background: var(--a11y-contrast-fg);
border: 3px solid #000; /* creates separation from track */
border-radius: 10px;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white)::-webkit-scrollbar-thumb:hover{
background: var(--a11y-contrast-fg-hover); /* slightly lighter yellow on hover */
}

/* Editor + common scrollable containers (safety net) */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) textarea,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #wpTextbox1,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui *{
scrollbar-color: var(--a11y-contrast-fg) #000; /* Firefox for these elements too */
}

/* FIX: WikiEditor tool-select dropdown text becomes unreadable
because it inherits yellow from body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white). */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui-toolbar .tool.tool-select,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui-toolbar .tool.tool-select *{
color: #222 !important; /* readable on the tool-select's light background */
}

/* FIX: WikiEditor toolbar tabs readability in high-contrast mode */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui-toolbar .tabs a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui-toolbar .tabs a:visited{
color: #0645ad !important; /* MediaWiki blue */
}

/* Active tab: keep it dark for readability on light background */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui-toolbar .tabs span.tab a.current,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui-toolbar .tabs span.tab a.current:visited{
color: #222 !important;
}

body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) textarea::-webkit-scrollbar,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #wpTextbox1::-webkit-scrollbar,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui::-webkit-scrollbar{
width: 14px;
height: 14px;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) textarea::-webkit-scrollbar-track,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #wpTextbox1::-webkit-scrollbar-track,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui::-webkit-scrollbar-track{
background: #000;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) textarea::-webkit-scrollbar-thumb,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #wpTextbox1::-webkit-scrollbar-thumb,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui::-webkit-scrollbar-thumb{
background: var(--a11y-contrast-fg);
border: 3px solid #000;
border-radius: 10px;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) textarea::-webkit-scrollbar-thumb:hover,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #wpTextbox1::-webkit-scrollbar-thumb:hover,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui::-webkit-scrollbar-thumb:hover{
background: var(--a11y-contrast-fg-hover);
}

/* Try to target root scrolling element where supported */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) html{
scrollbar-color: var(--a11y-contrast-fg) #000;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) html::-webkit-scrollbar{
width: 14px;
height: 14px;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) html::-webkit-scrollbar-track{
background: #000;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) html::-webkit-scrollbar-thumb{
background: var(--a11y-contrast-fg);
border: 3px solid #000;
border-radius: 10px;
}

/* =========================================================
FINAL OVERRIDE (brute force):
High-contrast links must be blue + underlined everywhere,
including link text wrapped in spans inside portlets/footer.
PUT THIS AT THE VERY END OF THE FILE.
========================================================= */

body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a:visited{
color: var(--a11y-contrast-link) !important;
text-decoration: underline !important;
text-decoration-thickness: 2px !important;
text-underline-offset: 0.15em !important;
}

/* Critical: if link text is wrapped (e.g. <a><span>Text</span></a>),
force ALL children inside links to inherit the link colour. */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a:visited *{
color: inherit !important;
}

/* Extra specificity for the problem zones (beats Timeless + portlet-body * rules) */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless .mw-portlet-body a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless .mw-portlet-body a:visited,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-footer a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-footer a:visited,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-footer-container a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-footer-container a:visited{
color: var(--a11y-contrast-link) !important;
text-decoration: underline !important;
}

body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless .mw-portlet-body a *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless .mw-portlet-body a:visited *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-footer a *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-footer a:visited *{
color: inherit !important;
}

/* =========================================================
FINAL FIX: #personal (user tools) links
The portlet-body * rule forces yellow.
Override ONLY for links and their contents.
========================================================= */

body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal a:visited{
color: var(--a11y-contrast-link) !important;
text-decoration: underline !important;
}

body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal a *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal a:visited *{
color: inherit !important;
}

/* =========================================================
FINAL OVERRIDE (authoritative)
In contrast modes, ALL links should match the contrast text colour.
This must win against Timeless/Vector skin link rules (logged in/out).
Keep at VERY END of the gadget CSS.
========================================================= */
body:is(.a11y-contrast, .a11y-contrast-yellow, .a11y-contrast-white) a,
body:is(.a11y-contrast, .a11y-contrast-yellow, .a11y-contrast-white) a:visited,
body:is(.a11y-contrast, .a11y-contrast-yellow, .a11y-contrast-white) a:active{
color: var(--a11y-contrast-fg) !important;
text-decoration-color: var(--a11y-contrast-fg) !important;
text-decoration: underline !important;
text-decoration-thickness: 2px;
text-underline-offset: 0.15em;
}

/* Hover/focus: slightly stronger underline (no colour change) */
body:is(.a11y-contrast, .a11y-contrast-yellow, .a11y-contrast-white) a:hover,
body:is(.a11y-contrast, .a11y-contrast-yellow, .a11y-contrast-white) a:focus-visible{
text-decoration-thickness: 3px;
}

/* Any wrapped spans inside links must inherit the link colour (Timeless uses <a><span>…) */
body:is(.a11y-contrast, .a11y-contrast-yellow, .a11y-contrast-white) a *,
body:is(.a11y-contrast, .a11y-contrast-yellow, .a11y-contrast-white).skin-timeless a *{
color: inherit !important;
}

/* Extra belt-and-braces for Timeless logged-in personal tools + portlets */
body:is(.a11y-contrast, .a11y-contrast-yellow, .a11y-contrast-white).skin-timeless #personal a,
body:is(.a11y-contrast, .a11y-contrast-yellow, .a11y-contrast-white).skin-timeless .mw-portlet-body a{
color: var(--a11y-contrast-fg) !important;
}

MediaWiki:Gadget-bhc-accessibility.css

2026-01-29T12:02:52Z

Steve: Re-organised structure with no rule loss. For the benefit of clarity and later edits.

/*
⚠️ Do not reorder rules below this line — contrast overrides depend on cascade order.
*/

/* =========================================================
Accessibility Gadget CSS — quick navigation
(No rules reordered; section tags added for readability)
Search for: [A11Y-SECTION: ...]
========================================================= */
/* 01. BHC Accessibility Gadget – MediaWiki / Timeless → [A11Y-SECTION:bhc-accessibility-gadget-mediawiki-timeless] */
/* 02. Variables → [A11Y-SECTION:variables] */
/* 03. Skip links (appear when focused) → [A11Y-SECTION:skip-links-appear-when-focused] */
/* 04. Floating accessibility toggle → [A11Y-SECTION:floating-accessibility-toggle] */
/* 05. Panel → [A11Y-SECTION:panel] */
/* 06. Feature classes → [A11Y-SECTION:feature-classes] */
/* 07. High contrast (black/yellow/blue) → [A11Y-SECTION:high-contrast-black-yellow-blue] */
/* 08. High contrast presets → [A11Y-SECTION:high-contrast-presets] */
/* 09. HIGH CONTRAST: Links must be visually distinct → [A11Y-SECTION:high-contrast-links-must-be-visually-distinct] */
/* 10. Underline links → [A11Y-SECTION:underline-links] */
/* 11. Text spacing → [A11Y-SECTION:text-spacing] */
/* 12. Large cursors (wiki-hosted) → [A11Y-SECTION:large-cursors-wiki-hosted] */
/* 13. Reading ruler → [A11Y-SECTION:reading-ruler] */
/* 14. MediaWiki: extra HIGH CONTRAST coverage (Timeless + Vector) → [A11Y-SECTION:mediawiki-extra-high-contrast-coverage-timeless-vector] */
/* 15. HIGH CONTRAST: Footer (Vector + Timeless) → [A11Y-SECTION:high-contrast-footer-vector-timeless] */
/* 16. Underline links: ensure TOC wins → [A11Y-SECTION:underline-links-ensure-toc-wins] */
/* 17. HIGH CONTRAST: Header + search + user tools → [A11Y-SECTION:high-contrast-header-search-user-tools] */
/* 18. HIGH CONTRAST: Personal tools (reduce border clutter) → [A11Y-SECTION:high-contrast-personal-tools-reduce-border-clutter] */
/* ========================================================= */

/* [A11Y-SECTION:bhc-accessibility-gadget-mediawiki-timeless] */
/* =========================================================
BHC Accessibility Gadget – MediaWiki / Timeless
========================================================= */

/* [A11Y-SECTION:variables] */
/* ---------------------------------------------------------
Variables
--------------------------------------------------------- */
:root{
--a11y-bg: #111827;
--a11y-border: #374151;
--a11y-fg: #ffffff;
--a11y-focus: #FFBF47;
--a11y-link-underline: #3366CC; /* MediaWiki link blue */
--a11y-menu-width: 340px;
--a11y-contrast-fg: #FFD400;
}

/* Timeless: stop skin CSS shrinking the accessibility icon */
body.skin-timeless .a11y-toggle{
font-size: 16px !important;
line-height: 1 !important;
}
body.skin-timeless .a11y-toggle svg{
display: block !important;
width: 36px !important;
height: 36px !important;
min-width: 36px !important;
min-height: 36px !important;
max-width: none !important;
max-height: none !important;

/* If the glyph still looks small, keep this: */
transform: scale(1.15) !important;
transform-origin: 50% 50% !important;
}
/* Make sure fill isn’t being altered by skin rules */
body.skin-timeless .a11y-toggle svg path{
fill: currentColor !important;
}

/* [A11Y-SECTION:skip-links-appear-when-focused] */
/* ---------------------------------------------------------
Skip links (appear when focused)
--------------------------------------------------------- */
.skip-link{
position: absolute;
left: 12px;
top: 12px;
z-index: 11000;

padding: 10px 14px;
border-radius: 8px;

background: #111827;
color: #fff;
text-decoration: none;

top: -9999px; /* hidden off-screen by default */
transition: none; /* no animation needed when hidden */

border: 2px solid var(--a11y-focus);
}
.skip-link:focus,
.skip-link:focus-visible{
top: 12px; /* bring into view when focused */
outline: none;
z-index: 11001;
}

body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .skip-link{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-fg) !important;
}

/* Stack multiple skip links neatly when tabbing through them */
#a11y-skip-content:focus,
#a11y-skip-content:focus-visible{ top: 56px; }

#a11y-skip-nav:focus,
#a11y-skip-nav:focus-visible{ top: 100px; }

#a11y-skip-search:focus,
#a11y-skip-search:focus-visible{ top: 144px; }

/* [A11Y-SECTION:floating-accessibility-toggle] */
/* ---------------------------------------------------------
Floating accessibility toggle
--------------------------------------------------------- */
.a11y-toggle{
position: fixed;
right: 16px;
bottom: 16px;
z-index: 10001;

width: 56px;
height: 56px;
border-radius: 50%;

background: #005FCC;
border: 2px solid #ffffff;
color: #ffffff;

display: inline-flex;
align-items: center;
justify-content: center;

box-shadow: 0 10px 24px rgba(0,0,0,0.25);
cursor: pointer;
}
.a11y-toggle:hover{ background:#0047A6; }
.a11y-toggle:focus-visible{
outline: 3px solid var(--a11y-focus);
outline-offset: 3px;
}
.a11y-toggle svg{
width: 44px;
height: 44px;
fill: currentColor;
}

/* [A11Y-SECTION:panel] */
/* ---------------------------------------------------------
Panel
--------------------------------------------------------- */
/* Compact current-settings line (display-only) */
.a11y-status{
font-size: 13px;
line-height: 1.25;
margin: 6px 0 8px;
opacity: 0.95;
}

.a11y-panel{
position: fixed;
right: 14px;
bottom: 76px;
z-index: 10000;

width: var(--a11y-menu-width);
max-width: calc(100vw - 28px);

background: var(--a11y-bg);
border: 1px solid var(--a11y-border);
color: var(--a11y-fg);
border-radius: 16px;
padding: 12px;

box-shadow: 0 14px 40px rgba(0,0,0,0.28);
}
.a11y-panel[hidden]{ display:none !important; }

/* Header */
.a11y-head{
display:flex;
align-items:center;
justify-content: space-between;
margin-bottom: 10px;
}
.a11y-head h2{
font-size: 16px;
margin: 0;
}
.a11y-help{
width: 28px;
height: 28px;
border-radius: 50%;
background: #fff;
color: #111827;
font-weight: 900;
text-decoration: none;
display:flex;
align-items:center;
justify-content:center;
}
.a11y-help:focus-visible{
outline: 3px solid var(--a11y-focus);
outline-offset: 2px;
}

/* Buttons */
.a11y-row{
display:flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 10px;
}
.a11y-btn{
border: 1px solid #D1D5DB;
background:#fff;
color:#111827;
padding: 8px 10px;
border-radius: 999px;
font-size: 14px;
font-weight: 800;
cursor: pointer;
}
.a11y-btn[aria-pressed="true"]{
background:#111827;
color:#fff;
}
.a11y-btn:focus-visible{
outline: 3px solid var(--a11y-focus);
outline-offset: 2px;
}

.a11y-hint{
font-size: 13px;
color: var(--a11y-fg);
line-height: 1.4;
}

/* Screen reader only */
.a11y-sr{
position:absolute;
width:1px;
height:1px;
overflow:hidden;
clip:rect(0,0,0,0);
}

/* [A11Y-SECTION:feature-classes] */
/* =========================================================
Feature classes
========================================================= */

/* [A11Y-SECTION:high-contrast-black-yellow-blue] */
/* ------------------------------
High contrast (black/yellow/blue)
------------------------------ */

/* [A11Y-SECTION:high-contrast-presets] */
/* ------------------------------
High contrast presets
- Use ONE of these on <body>:
- a11y-contrast-yellow (yellow on black)
- a11y-contrast-white (white on black)
- Back-compat: a11y-contrast behaves as yellow on black
------------------------------ */
body.a11y-contrast,
body.a11y-contrast-yellow{
--a11y-contrast-fg: #FFD400;
--a11y-contrast-fg-hover: #FFE066;
--a11y-contrast-link: #36C; /* MediaWiki blue */
--a11y-contrast-border-70: rgba(255,212,0,.7);
--a11y-contrast-border-75: rgba(255,212,0,.75);
--a11y-contrast-border-85: rgba(255,212,0,.85);
}
body.a11y-contrast-white{
--a11y-contrast-fg: #FFFFFF;
--a11y-contrast-fg-hover: #E6E6E6;
--a11y-contrast-link: #9ECBFF; /* lighter link blue on black */
--a11y-contrast-border-70: rgba(255,255,255,.7);
--a11y-contrast-border-75: rgba(255,255,255,.75);
--a11y-contrast-border-85: rgba(255,255,255,.85);
}

body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white){
background:#000 !important;
color: var(--a11y-contrast-fg) !important;

/* Gadget UI variables in contrast mode */
--a11y-bg: #000;
--a11y-border: var(--a11y-contrast-border-70);
--a11y-fg: var(--a11y-contrast-fg);
--a11y-focus: var(--a11y-contrast-fg);
--a11y-link-underline: var(--a11y-contrast-link);
}

/* [A11Y-SECTION:high-contrast-links-must-be-visually-distinct] */
/* =========================================================
HIGH CONTRAST: Links must be visually distinct
Blue + underline to meet WCAG 1.4.1
========================================================= */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a:visited{
color: var(--a11y-contrast-link) !important;
text-decoration: underline !important;
text-decoration-thickness: 2px;
text-underline-offset: 0.15em;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a:hover,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a:focus-visible{
text-decoration-thickness: 3px;
}

/* Headings */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) h1,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) h2,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) h3,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) h4,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) h5,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) h6{
color:var(--a11y-contrast-fg) !important;
border-color:var(--a11y-contrast-fg) !important;
}

/* Main containers (Timeless needs explicit coverage) */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-wrapper,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-content-container,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-content,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-body,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-parser-output{
background:#000 !important;
color:var(--a11y-contrast-fg) !important;
}

/* Sidebars / tools */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #site-navigation,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #site-tools,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #page-tools,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-portlet,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-portlet-body{
background:#000 !important;
color:var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-70) !important;
}

/* FIX: portlet text stays yellow (titles, non-links) */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-portlet-body{
color:var(--a11y-contrast-fg) !important;
}

/* FIX: portlet links should be blue + underlined */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-portlet-body a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-portlet-body a:visited{
color: var(--a11y-contrast-link) !important;
text-decoration: underline !important;
text-decoration-thickness: 2px;
text-underline-offset: 0.15em;
}

/* CRITICAL FIX: many MW links are <a><span>text</span></a>
The span was inheriting/being forced yellow.
Make link contents inherit the link colour. */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-portlet-body a *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer a *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer-container a *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #footer-list a *{
color: inherit !important;
}

/* A11y UI in contrast */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .a11y-panel,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .a11y-toggle{
background:#000 !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .a11y-btn{
background:#000 !important;
color:var(--a11y-contrast-fg) !important;
border:2px solid var(--a11y-contrast-border-85) !important;
}

/* FIX: “?” help button in contrast */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .a11y-help{
background:#000 !important;
color:var(--a11y-contrast-fg) !important;
border:2px solid var(--a11y-contrast-border-85) !important;
}

/* [A11Y-SECTION:underline-links] */
/* ------------------------------
Underline links
------------------------------ */
body.a11y-underline-links a{
text-decoration: none !important;
border-bottom: 2px solid currentColor;
padding-bottom: 0.05em;
}
body.a11y-underline-links:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a{
border-bottom-color: var(--a11y-contrast-link) !important;
}

/* [A11Y-SECTION:text-spacing] */
/* ------------------------------
Text spacing
------------------------------ */
body.a11y-spacing-plus{
line-height: 1.8 !important;
letter-spacing: 0.06em !important;
word-spacing: 0.16em !important;
}
body.a11y-spacing-minus{
line-height: 1.45 !important;
letter-spacing: 0.01em !important;
word-spacing: 0.02em !important;
}

/* [A11Y-SECTION:large-cursors-wiki-hosted] */
/* ------------------------------
Large cursors (wiki-hosted)
------------------------------ */
body.a11y-cursor-white,
body.a11y-cursor-white *{
cursor: url("/index.php/Special:FilePath/large-arrow-white-64.png") 8 8, auto !important;
}
body.a11y-cursor-yellow,
body.a11y-cursor-yellow *{
cursor: url("/index.php/Special:FilePath/large-arrow-yellow-64.png") 8 8, auto !important;
}

/* [A11Y-SECTION:reading-ruler] */
/* ------------------------------
Reading ruler
------------------------------ */
#a11y-ruler{
position: fixed;
left: 0;
top: 0;
height: 22px;
width: 100vw;
z-index: 9999;
pointer-events: none;

background: linear-gradient(
to bottom,
var(--a11y-contrast-fg) 0%,
var(--a11y-contrast-fg) 40%,
#000000 40%,
#000000 60%,
var(--a11y-contrast-fg) 60%,
var(--a11y-contrast-fg) 100%
);
}
#a11y-ruler[hidden]{ display:none !important; }

/* [A11Y-SECTION:mediawiki-extra-high-contrast-coverage-timeless-vector] */
/* =========================================================
MediaWiki: extra HIGH CONTRAST coverage (Timeless + Vector)
Add at END of Gadget CSS so it wins.
========================================================= */

/* TOC */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #toc,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .toc,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #toc * ,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .toc *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-75) !important;
}

/* Category links area */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-normal-catlinks,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-normal-catlinks *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .catlinks,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .catlinks *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-75) !important;
}

/* Wikitables */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) table,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) table *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikitable,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikitable *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-datatable,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-datatable *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-75) !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikitable th,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) table th{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
}

/* Figures/captions */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) figure,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) figure *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-halign-center,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-halign-centre,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-halign-center *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-halign-centre *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
}

/* Thumb frames / image captions */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .thumb,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .thumb *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .thumbinner,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .thumbinner *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .thumbcaption,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .thumbcaption *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-75) !important;
}

/* Code-like blocks */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) pre,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) pre *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) code,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) code *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-75) !important;
}

/* [A11Y-SECTION:high-contrast-footer-vector-timeless] */
/* =========================================================
HIGH CONTRAST: Footer (Vector + Timeless)
========================================================= */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer-container{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
background-image: none !important;
border-top: 10px solid var(--a11y-contrast-fg) !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #footer-list,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #footer-list *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #footer-icons,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #footer-icons *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
}

/* FIX: footer links should be blue (not yellow) */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer a:visited{
color: var(--a11y-contrast-link) !important;
text-decoration: underline !important;
text-decoration-thickness: 2px;
text-underline-offset: 0.15em;
}

body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer .mw-portlet,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer .mw-portlet-body{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-75) !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer hr{
border-color: var(--a11y-contrast-fg) !important;
}

/* [A11Y-SECTION:underline-links-ensure-toc-wins] */
/* =========================================================
Underline links: ensure TOC wins
========================================================= */
body.a11y-underline-links #toc a,
body.a11y-underline-links .toc a{
border-bottom-color: currentColor !important;
}
body.a11y-underline-links:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #toc a,
body.a11y-underline-links:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .toc a{
border-bottom-color: var(--a11y-contrast-link) !important;
}

/* [A11Y-SECTION:high-contrast-header-search-user-tools] */
/* =========================================================
HIGH CONTRAST: Header + search + user tools
========================================================= */

/* Base header + content containers */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-header-container,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-content-container{
background: #000 !important;
background-image: none !important;
}

/* Timeless header containers */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-header,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-header-container .ts-inner,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-header-container .mw-body,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-header-container .mw-portlet,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-header-container .mw-portlet-body{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
background-image: none !important;
border-color: var(--a11y-contrast-fg) !important;
}

/* Title */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #p-logo-text #p-banner,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #p-banner.mw-wiki-title,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #p-logo-text .mw-wiki-title{
color: var(--a11y-contrast-fg) !important;
}

/* Strapline */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #bhc-strapline,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .bhc-strapline{
color: var(--a11y-contrast-fg) !important;
}

/* Search box wrappers */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #p-search,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #simpleSearch{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
}

/* Search input (generic) */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #searchInput,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #p-search #searchInput,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #p-search input[type="search"],
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #simpleSearch input[type="search"]{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
caret-color: var(--a11y-contrast-fg) !important;
border: 2px solid var(--a11y-contrast-fg) !important;
box-shadow: none !important;
-webkit-text-fill-color: var(--a11y-contrast-fg) !important; /* Safari/WebKit */
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #searchInput::placeholder,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #simpleSearch input[type="search"]::placeholder{
color: var(--a11y-contrast-border-75) !important;
}

/* Timeless-specific: beat background:#fff !important */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #p-search input[type="search"],
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #p-search #searchInput{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
caret-color: var(--a11y-contrast-fg) !important;
border: 2px solid var(--a11y-contrast-fg) !important;
-webkit-text-fill-color: var(--a11y-contrast-fg) !important;
}

/* Search submit button */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) input#mw-searchButton,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) input#searchButton,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-searchButton{
background-color: #000 !important;
border: 2px solid var(--a11y-contrast-border-85) !important;
filter: none !important;
}

/* Suggestions dropdown */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .suggestions,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .suggestions-results,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .suggestions-special,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .suggestions a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .suggestions-result,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-searchSuggest,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-searchSuggest *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-85) !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .suggestions a:visited{
color: var(--a11y-contrast-fg) !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .suggestions-result-current,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .suggestions a:hover{
background: #111 !important;
}

/* Vector search tabs area */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-search-profile-tabs,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-search-profile-tabs *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-85) !important;
}

/* [A11Y-SECTION:high-contrast-personal-tools-reduce-border-clutter] */
/* =========================================================
HIGH CONTRAST: Personal tools (reduce border clutter)
========================================================= */

/* Force yellow text to beat Timeless dark text */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal h2,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal h3,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal .mw-portlet,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal .mw-portlet *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless .mw-portlet-body,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless .mw-portlet-body *{
color: var(--a11y-contrast-fg) !important;
}

/* Force black background to beat Timeless white dropdown */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal .dropdown,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal .mw-portlet-body,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal-inner,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal-inner *{
background: #000 !important;
background-image: none !important;
}

/* Keep ONE border only (container), remove nested borders */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #personal .dropdown,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #personal-inner.dropdown,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #personal .mw-portlet-body{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border: 2px solid var(--a11y-contrast-border-85) !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #personal .mw-portlet-body *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #personal-inner.dropdown *{
background: transparent !important;
color: var(--a11y-contrast-fg) !important;
border: 0 !important;
outline-color: var(--a11y-contrast-fg) !important;
}
/* Leave links to global link rules */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #personal a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #personal a:visited{
background: transparent !important;
border-color: transparent !important;
}

/* =========================================================
HIGH CONTRAST: Timeless containers that fight back
========================================================= */

/* Timeless forces grey content container */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-content-container{
background: #000 !important;
background-image: none !important;
}

/* Timeless header container sometimes white at breakpoints */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-header-container{
background: #000 !important;
background-image: none !important;
}

/* Timeless related-navigation sidebar chunk at ≥1340px */
@media screen and (min-width: 1340px){
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless
#mw-related-navigation .sidebar-chunk{
background: #000 !important;
background-image: none !important;
border-color: var(--a11y-contrast-border-85) !important;
box-shadow: none !important;
}
}

/* mw-content border colour in high-contrast mode */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-content{
border-color: var(--a11y-contrast-fg) !important;
}

/* =========================================================
EDIT MODE: textarea and editOptions
========================================================= */

/* Edit textarea */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #wpTextbox1,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) textarea.mw-editfont-monospace{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
caret-color: var(--a11y-contrast-fg) !important;
border: 2px solid var(--a11y-contrast-fg) !important;
box-shadow: none !important;
-webkit-text-fill-color: var(--a11y-contrast-fg) !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #wpTextbox1::placeholder{
color: var(--a11y-contrast-border-75) !important;
}

/* editOptions bar */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-85) !important;
box-shadow: none !important;
}

/* Don’t override links here — let your global contrast link styling apply */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions a:visited{
background: transparent !important;
border-color: transparent !important;
}

/* Buttons + inputs inside editOptions */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions button,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions input,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions select,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions textarea,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions .mw-ui-button,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions .oo-ui-buttonElement-button{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border: 2px solid var(--a11y-contrast-border-85) !important;
box-shadow: none !important;
-webkit-text-fill-color: var(--a11y-contrast-fg) !important;
}

/* Focus visibility */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions button:focus-visible,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions input:focus-visible,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions select:focus-visible,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions .mw-ui-button:focus-visible,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions .oo-ui-buttonElement-button:focus-visible{
outline: 3px solid var(--a11y-contrast-fg) !important;
outline-offset: 2px !important;
}

/* =========================================================
EDIT MODE: Codex (CDX) message banners (e.g. interface warning)
========================================================= */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .cdx-message,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .cdx-message--block,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .cdx-message--error{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border: 2px solid var(--a11y-contrast-border-85) !important;
box-shadow: none !important;
}
/* Inner content */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .cdx-message__content,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .cdx-message__content *{
background: transparent !important;
color: var(--a11y-contrast-fg) !important;
}
/* Icon */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .cdx-message__icon,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .cdx-message__icon *{
color: var(--a11y-contrast-fg) !important;
fill: var(--a11y-contrast-fg) !important;
}
/* Emphasis */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .cdx-message strong{
color: var(--a11y-contrast-fg) !important;
}

/* FIX: Timeless sidebar chunks stay light at 1100–1339px.
Force black/yellow in high-contrast mode only. */
@media screen and (min-width: 1100px) and (max-width: 1339px){
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-site-navigation .sidebar-chunk,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-related-navigation .sidebar-chunk{
background: #000 !important;
background-image: none !important;
border-color: var(--a11y-contrast-border-85) !important;
box-shadow: none !important;
}

/* If any text inside is still dark, force it yellow */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-site-navigation .sidebar-chunk *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-related-navigation .sidebar-chunk *{
color: var(--a11y-contrast-fg) !important;
}

/* …but if it’s a LINK (or inside a link), keep it blue */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-site-navigation .sidebar-chunk a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-site-navigation .sidebar-chunk a:visited,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-related-navigation .sidebar-chunk a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-related-navigation .sidebar-chunk a:visited{
color: var(--a11y-contrast-link) !important;
text-decoration: underline !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-site-navigation .sidebar-chunk a *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-related-navigation .sidebar-chunk a *{
color: inherit !important;
}
}

/* FIX (stronger): Timeless sidebar chunks at 1100–1339px still light.
Must beat the skin rule in the same breakpoint. */
@media screen and (min-width: 1100px) and (max-width: 1339px){
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-site-navigation .sidebar-chunk,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-related-navigation .sidebar-chunk{
background: #000 !important;
background-image: none !important;
border-color: var(--a11y-contrast-border-85) !important;
box-shadow: none !important;
}

body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-site-navigation .sidebar-chunk *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-related-navigation .sidebar-chunk *{
color: var(--a11y-contrast-fg) !important;
}

/* …but links stay blue */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-site-navigation .sidebar-chunk a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-site-navigation .sidebar-chunk a:visited,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-related-navigation .sidebar-chunk a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-related-navigation .sidebar-chunk a:visited{
color: var(--a11y-contrast-link) !important;
text-decoration: underline !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-site-navigation .sidebar-chunk a *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-related-navigation .sidebar-chunk a *{
color: inherit !important;
}
}

/* =========================================================
EMERGENCY: ensure the accessibility toggle is visible
(keep at VERY END)
========================================================= */
#a11y-toggle.a11y-toggle{
position: fixed !important;
right: 16px !important;
bottom: 16px !important;

display: inline-flex !important;
visibility: visible !important;
opacity: 1 !important;

z-index: 2147483647 !important;
pointer-events: auto !important;

transform: none !important;
}
#a11y-toggle.a11y-toggle svg{
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}

/* =========================================================
HIGH CONTRAST: Scrollbars (page + editor)
Supports: Chrome/Safari/Opera (WebKit) + Firefox
Scope: ONLY when body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) is active
========================================================= */

/* ---------- Firefox (Gecko) ---------- */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white),
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) *{
scrollbar-color: var(--a11y-contrast-fg) #000; /* thumb / track */
scrollbar-width: auto; /* or 'thin' if you prefer */
}

/* ---------- Chrome / Safari / Opera (WebKit/Blink) ---------- */
/* Page scrollbars */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white)::-webkit-scrollbar{
width: 14px;
height: 14px; /* horizontal */
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white)::-webkit-scrollbar-track{
background: #000;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white)::-webkit-scrollbar-thumb{
background: var(--a11y-contrast-fg);
border: 3px solid #000; /* creates separation from track */
border-radius: 10px;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white)::-webkit-scrollbar-thumb:hover{
background: var(--a11y-contrast-fg-hover); /* slightly lighter yellow on hover */
}

/* Editor + common scrollable containers (safety net) */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) textarea,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #wpTextbox1,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui *{
scrollbar-color: var(--a11y-contrast-fg) #000; /* Firefox for these elements too */
}

/* FIX: WikiEditor tool-select dropdown text becomes unreadable
because it inherits yellow from body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white). */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui-toolbar .tool.tool-select,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui-toolbar .tool.tool-select *{
color: #222 !important; /* readable on the tool-select's light background */
}

/* FIX: WikiEditor toolbar tabs readability in high-contrast mode */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui-toolbar .tabs a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui-toolbar .tabs a:visited{
color: #0645ad !important; /* MediaWiki blue */
}

/* Active tab: keep it dark for readability on light background */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui-toolbar .tabs span.tab a.current,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui-toolbar .tabs span.tab a.current:visited{
color: #222 !important;
}

body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) textarea::-webkit-scrollbar,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #wpTextbox1::-webkit-scrollbar,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui::-webkit-scrollbar{
width: 14px;
height: 14px;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) textarea::-webkit-scrollbar-track,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #wpTextbox1::-webkit-scrollbar-track,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui::-webkit-scrollbar-track{
background: #000;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) textarea::-webkit-scrollbar-thumb,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #wpTextbox1::-webkit-scrollbar-thumb,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui::-webkit-scrollbar-thumb{
background: var(--a11y-contrast-fg);
border: 3px solid #000;
border-radius: 10px;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) textarea::-webkit-scrollbar-thumb:hover,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #wpTextbox1::-webkit-scrollbar-thumb:hover,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui::-webkit-scrollbar-thumb:hover{
background: var(--a11y-contrast-fg-hover);
}

/* Try to target root scrolling element where supported */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) html{
scrollbar-color: var(--a11y-contrast-fg) #000;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) html::-webkit-scrollbar{
width: 14px;
height: 14px;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) html::-webkit-scrollbar-track{
background: #000;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) html::-webkit-scrollbar-thumb{
background: var(--a11y-contrast-fg);
border: 3px solid #000;
border-radius: 10px;
}

/* =========================================================
FINAL OVERRIDE (brute force):
High-contrast links must be blue + underlined everywhere,
including link text wrapped in spans inside portlets/footer.
PUT THIS AT THE VERY END OF THE FILE.
========================================================= */

body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a:visited{
color: var(--a11y-contrast-link) !important;
text-decoration: underline !important;
text-decoration-thickness: 2px !important;
text-underline-offset: 0.15em !important;
}

/* Critical: if link text is wrapped (e.g. <a><span>Text</span></a>),
force ALL children inside links to inherit the link colour. */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a:visited *{
color: inherit !important;
}

/* Extra specificity for the problem zones (beats Timeless + portlet-body * rules) */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless .mw-portlet-body a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless .mw-portlet-body a:visited,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-footer a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-footer a:visited,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-footer-container a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-footer-container a:visited{
color: var(--a11y-contrast-link) !important;
text-decoration: underline !important;
}

body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless .mw-portlet-body a *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless .mw-portlet-body a:visited *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-footer a *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-footer a:visited *{
color: inherit !important;
}

/* =========================================================
FINAL FIX: #personal (user tools) links
The portlet-body * rule forces yellow.
Override ONLY for links and their contents.
========================================================= */

body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal a:visited{
color: var(--a11y-contrast-link) !important;
text-decoration: underline !important;
}

body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal a *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal a:visited *{
color: inherit !important;
}

/* =========================================================
FINAL OVERRIDE (authoritative)
In contrast modes, ALL links should match the contrast text colour.
This must win against Timeless/Vector skin link rules (logged in/out).
Keep at VERY END of the gadget CSS.
========================================================= */
body:is(.a11y-contrast, .a11y-contrast-yellow, .a11y-contrast-white) a,
body:is(.a11y-contrast, .a11y-contrast-yellow, .a11y-contrast-white) a:visited,
body:is(.a11y-contrast, .a11y-contrast-yellow, .a11y-contrast-white) a:active{
color: var(--a11y-contrast-fg) !important;
text-decoration-color: var(--a11y-contrast-fg) !important;
text-decoration: underline !important;
text-decoration-thickness: 2px;
text-underline-offset: 0.15em;
}

/* Hover/focus: slightly stronger underline (no colour change) */
body:is(.a11y-contrast, .a11y-contrast-yellow, .a11y-contrast-white) a:hover,
body:is(.a11y-contrast, .a11y-contrast-yellow, .a11y-contrast-white) a:focus-visible{
text-decoration-thickness: 3px;
}

/* Any wrapped spans inside links must inherit the link colour (Timeless uses <a><span>…) */
body:is(.a11y-contrast, .a11y-contrast-yellow, .a11y-contrast-white) a *,
body:is(.a11y-contrast, .a11y-contrast-yellow, .a11y-contrast-white).skin-timeless a *{
color: inherit !important;
}

/* Extra belt-and-braces for Timeless logged-in personal tools + portlets */
body:is(.a11y-contrast, .a11y-contrast-yellow, .a11y-contrast-white).skin-timeless #personal a,
body:is(.a11y-contrast, .a11y-contrast-yellow, .a11y-contrast-white).skin-timeless .mw-portlet-body a{
color: var(--a11y-contrast-fg) !important;
}

Accessibility

2026-01-29T11:54:25Z

Steve:

= Accessibility =

The Bellingham Heritage Centre Wiki aims to be accessible to as wide an audience as possible, regardless of technology or ability. We recognise that users access the site in many different ways and may have different visual, motor, cognitive, or situational needs.

This page explains the accessibility features available on the site, how we test accessibility, and how to provide feedback.

----

== Accessibility statement ==

The Bellingham Heritage Centre Wiki **aims to conform to WCAG 2.2 AA accessibility standards**.

We are committed to improving accessibility and usability and strive to follow recognised best practice and relevant accessibility guidelines appropriate to a community-run heritage website.

----

== Measures to support accessibility ==

To support accessibility, this site includes a built-in **Accessibility Toolbar**, available on every page.

Using this toolbar, users can:

* Enable a high-contrast display in two choices of colour scheme. Links are t he same colour as the text but underlined for visibility.
* Increase or decrease text size
* Adjust text spacing
* Underline links
* Enable a reading ruler
* Use a high-visibility cursor in two choices of colour

These tools are designed to work independently or in combination, depending on individual needs.

Accessibility preferences are saved locally in your browser so that chosen settings persist between visits on the same device.

The site also includes:

* Keyboard-accessible navigation throughout
* Visible focus indicators for keyboard users
* Skip links to allow users to bypass repeated navigation
* Screen-reader-friendly markup and ARIA attributes where appropriate

----

== Testing and evaluation ==

Accessibility has been evaluated using a combination of:

* '''Manual testing''', including:
** Keyboard-only navigation
** Visual inspection of focus visibility, contrast, and readability
** Screen-reader testing using macOS VoiceOver
* '''Automated testing''', including:
** Chrome Lighthouse accessibility audits

Recent Lighthouse audits score the site highly for accessibility, both with accessibility tools enabled and with the default presentation.

Testing has been carried out in current versions of major browsers, including Chrome, Safari, Firefox, and Opera.

----

== Known limitations and design choices ==

We are working with the base MediaWiki site build, which in itself may have some accessibility challenges. We have not worked to remedy these if they exist or are aware of them. Some automated accessibility tools may report warnings that do not represent barriers for users.

In particular:

* '''Navigation and tool lists are ordered logically rather than alphabetically.'''
Lists are structured to reflect editorial or task-based priorities rather than alphabetical order. WCAG does not require alphabetical ordering, only that content is presented in a logical and meaningful sequence.

* '''Link colour contrast warnings may appear in automated tests.'''
In high-contrast modes, links are underlined and use the same colour as surrounding text. This approach avoids reliance on colour perception alone and follows established high-contrast accessibility patterns used by operating systems and assistive technologies. Manual testing confirms that links are clear and usable for both sighted users and screen-reader users.

* '''Editor toolbar in high-contrast mode'''

When high-contrast mode is enabled, most of the site switches to a black background with yellow text for maximum readability or black background with white text depending on the user's choice. The page editor toolbar (for example, Bold, Italic, Link, Image and related controls) uses a mixture of icons and system styling provided by MediaWiki. To avoid disrupting the editor’s behaviour or hiding important controls, these toolbar icons are not recoloured in high-contrast mode. In this area, text labels and tabs may retain their original colours to preserve legibility and usability. This ensures: * editor controls remain visible and functional * keyboard and screen-reader access is unaffected * the editor behaves consistently across browsers

Screen readers announce all editor controls correctly, and full keyboard access is supported.

This approach prioritises reliability and accessibility over visual uniformity.
These design choices are intentional and are reviewed periodically.

The '''accessibility gadget''' is designed to work across skins, but the high-contrast mode requires skin-specific overrides for the site chrome. Since Timeless will be the default skin, we will prioritise full support for Timeless and ensure Vector remains functional as a fallback.

If you report any issues to us will will endeavour to fix them. Thank you.
----

== Browser and assistive technology support ==

The site is designed to work with modern web browsers and commonly used assistive technologies, including screen readers and keyboard navigation.

While the site should function in other environments, explicit testing has focused on current desktop browsers.

----

== Feedback and contact ==

If you encounter any accessibility barriers or have suggestions for improvement, please contact us via the site’s contact page or speak to a member of the Heritage Centre team.

Feedback is welcomed and helps guide future improvements to the site.

----

''This accessibility statement is reviewed periodically and updated as the site evolves.''

== Accessibility help ==

This wiki includes simple accessibility options from the menu screen.

Screen readers: The toolbar is keyboard navigable and labelled for screen readers.

== What’s remembered? ==

The following settings are 'remembered' on your device - these are stored in local storage and not cookies.

* High Contrast Yellow, High Contrast White and Contrast Reset
* Underline of links on/off
* Text spacing setting
* (Large) Cursor Yellow or Cursor White selected or Cursor reset
* Reading ruler on/off
* Text size

Settings are saved locally. Some browsers, e.g. Firefox, may cache interface styles aggressively; a refresh may be required after updates.

== Keyboard use: ==

* Esc closes the accessibility panel
* Tab / Shift+Tab to move between controls
* Enter to activate a button
* Reveal navigation: use on-screen arrows (or ←/→ if enabled)

Skip links: appear at the top when you Tab (Content / Navigation / Search / Accessibility).

== Accessibility options ==

* Text size and spacing controls change readability on the menu and overlays.
* Contrast provides options for standard and high-contrast modes. Links are shown in blue and underlined to ensure they are clearly distinguishable from body text.
* Two different large cursors options (white or yellow) can make the pointer easier to see.
* Horizontal reading ruler to guide the user on the screen.
* Underline links for clarity.

Selected controls are retained between pages and site visits for the individual user.
=== Reset ===
The reset button in the accessibility gadget clears all current settings back to their default states.
== Access Keys ==

The Timeless skin for MediaWiki uses the standard MediaWiki access key system, which allows for fast keyboard navigation across desktop, mobile, and tablet layouts

The modifier key (usually Alt+Shift on Windows/Linux or Ctrl+Option on macOS) must be used in combination with the characters listed below.
=== Page Action & View Shortcuts ===

* e - Edit the current page (or view source)
* t - View the talk/discussion page
* h - View page history
* c - View the main content page (if in a talk namespace)
* + - Add a new section/comment to a talk page
* m - Move (rename) the current page
* d - Delete the current page
* w - Watch or unwatch the current page
* p - View the printable version of the page
* k - View pages that link here ("What links here")
=== Navigation & Search Shortcuts ===

* f - Jump to the search box
* z - Go to the main page
* r - Go to Recent Changes
* x - Go to a random page
* q - Go to the special pages index
=== Personal & User Tools ===

* . - Go to your user page
* y - Go to your contributions
* l - Go to your watchlist
* o - Log in
* o - Log out
=== Editing Shortcuts ===

* s - Save/Publish the changes you are editing
* p - Preview your edit
* v - Show changes (diff)
* b - Jump to the edit summary box
* i - Toggle the "minor edit" checkmark
=== How to use them ===

* Windows/Linux (Firefox/Chrome/Edge): Alt + Shift + [Key]
* macOS (Safari/Chrome/Firefox): Ctrl + Option + [Key]

'''Note:''' Some browsers might require just the Alt key, or a combination of Alt and Shift.

Accessibility

2026-01-29T11:52:01Z

Steve:

= Accessibility =

The Bellingham Heritage Centre Wiki aims to be accessible to as wide an audience as possible, regardless of technology or ability. We recognise that users access the site in many different ways and may have different visual, motor, cognitive, or situational needs.

This page explains the accessibility features available on the site, how we test accessibility, and how to provide feedback.

----

== Accessibility statement ==

The Bellingham Heritage Centre Wiki **aims to conform to WCAG 2.2 AA accessibility standards**.

We are committed to improving accessibility and usability and strive to follow recognised best practice and relevant accessibility guidelines appropriate to a community-run heritage website.

----

== Measures to support accessibility ==

To support accessibility, this site includes a built-in **Accessibility Toolbar**, available on every page.

Using this toolbar, users can:

* Enable a high-contrast display in two choices of colour scheme. Links are t he same colour as the text but underlined for visibility.
* Increase or decrease text size
* Adjust text spacing
* Underline links
* Enable a reading ruler
* Use a high-visibility cursor in two choices of colour

These tools are designed to work independently or in combination, depending on individual needs.

Accessibility preferences are saved locally in your browser so that chosen settings persist between visits on the same device.

The site also includes:

* Keyboard-accessible navigation throughout
* Visible focus indicators for keyboard users
* Skip links to allow users to bypass repeated navigation
* Screen-reader-friendly markup and ARIA attributes where appropriate

----

== Testing and evaluation ==

Accessibility has been evaluated using a combination of:

* '''Manual testing''', including:
** Keyboard-only navigation
** Visual inspection of focus visibility, contrast, and readability
** Screen-reader testing using macOS VoiceOver
* '''Automated testing''', including:
** Chrome Lighthouse accessibility audits

Recent Lighthouse audits score the site highly for accessibility, both with accessibility tools enabled and with the default presentation.

Testing has been carried out in current versions of major browsers, including Chrome, Safari, Firefox, and Opera.

----

== Known limitations and design choices ==

We are working with the base MediaWiki site build, which in itself may have some accessibility challenges. We have not worked to remedy these if they exist or are aware of them. Some automated accessibility tools may report warnings that do not represent barriers for users.

In particular:

* '''Navigation and tool lists are ordered logically rather than alphabetically.'''
Lists are structured to reflect editorial or task-based priorities rather than alphabetical order. WCAG does not require alphabetical ordering, only that content is presented in a logical and meaningful sequence.

* '''Link colour contrast warnings may appear in automated tests.'''
In high-contrast modes, links are underlined and use the same colour as surrounding text. This approach avoids reliance on colour perception alone and follows established high-contrast accessibility patterns used by operating systems and assistive technologies. Manual testing confirms that links are clear and usable for both sighted users and screen-reader users.

* '''Editor toolbar in high-contrast mode'''

When high-contrast mode is enabled, most of the site switches to a black background with yellow text for maximum readability or black background with white text depending on the user's choice. The page editor toolbar (for example, Bold, Italic, Link, Image and related controls) uses a mixture of icons and system styling provided by MediaWiki. To avoid disrupting the editor’s behaviour or hiding important controls, these toolbar icons are not recoloured in high-contrast mode. In this area, text labels and tabs may retain their original colours to preserve legibility and usability. This ensures: * editor controls remain visible and functional * keyboard and screen-reader access is unaffected * the editor behaves consistently across browsers

Screen readers announce all editor controls correctly, and full keyboard access is supported.

This approach prioritises reliability and accessibility over visual uniformity.
These design choices are intentional and are reviewed periodically.

----

== Browser and assistive technology support ==

The site is designed to work with modern web browsers and commonly used assistive technologies, including screen readers and keyboard navigation.

While the site should function in other environments, explicit testing has focused on current desktop browsers.

----

== Feedback and contact ==

If you encounter any accessibility barriers or have suggestions for improvement, please contact us via the site’s contact page or speak to a member of the Heritage Centre team.

Feedback is welcomed and helps guide future improvements to the site.

----

''This accessibility statement is reviewed periodically and updated as the site evolves.''

== Accessibility help ==

This wiki includes simple accessibility options from the menu screen.

Screen readers: The toolbar is keyboard navigable and labelled for screen readers.

== What’s remembered? ==

The following settings are 'remembered' on your device - these are stored in local storage and not cookies.

* High Contrast Yellow, High Contrast White and Contrast Reset
* Underline of links on/off
* Text spacing setting
* (Large) Cursor Yellow or Cursor White selected or Cursor reset
* Reading ruler on/off
* Text size

Settings are saved locally. Some browsers, e.g. Firefox, may cache interface styles aggressively; a refresh may be required after updates.

== Keyboard use: ==

* Esc closes the accessibility panel
* Tab / Shift+Tab to move between controls
* Enter to activate a button
* Reveal navigation: use on-screen arrows (or ←/→ if enabled)

Skip links: appear at the top when you Tab (Content / Navigation / Search / Accessibility).
== Known limits ==

The accessibility gadget is designed to work across skins, but the high-contrast mode requires skin-specific overrides for the site chrome. Since Timeless will be the default skin, we will prioritise full support for Timeless and ensure Vector remains functional as a fallback.

If you report any issues to us will will endeavour to fix them. Thank you.
== Accessibility options ==

* Text size and spacing controls change readability on the menu and overlays.
* Contrast provides options for standard and high-contrast modes. Links are shown in blue and underlined to ensure they are clearly distinguishable from body text.
* Two different large cursors options (white or yellow) can make the pointer easier to see.
* Horizontal reading ruler to guide the user on the screen.
* Underline links for clarity.

Selected controls are retained between pages and site visits for the individual user.
=== Reset ===
The reset button in the accessibility gadget clears all current settings back to their default states.
== Access Keys ==

The Timeless skin for MediaWiki uses the standard MediaWiki access key system, which allows for fast keyboard navigation across desktop, mobile, and tablet layouts

The modifier key (usually Alt+Shift on Windows/Linux or Ctrl+Option on macOS) must be used in combination with the characters listed below.
=== Page Action & View Shortcuts ===

* e - Edit the current page (or view source)
* t - View the talk/discussion page
* h - View page history
* c - View the main content page (if in a talk namespace)
* + - Add a new section/comment to a talk page
* m - Move (rename) the current page
* d - Delete the current page
* w - Watch or unwatch the current page
* p - View the printable version of the page
* k - View pages that link here ("What links here")
=== Navigation & Search Shortcuts ===

* f - Jump to the search box
* z - Go to the main page
* r - Go to Recent Changes
* x - Go to a random page
* q - Go to the special pages index
=== Personal & User Tools ===

* . - Go to your user page
* y - Go to your contributions
* l - Go to your watchlist
* o - Log in
* o - Log out
=== Editing Shortcuts ===

* s - Save/Publish the changes you are editing
* p - Preview your edit
* v - Show changes (diff)
* b - Jump to the edit summary box
* i - Toggle the "minor edit" checkmark
=== How to use them ===

* Windows/Linux (Firefox/Chrome/Edge): Alt + Shift + [Key]
* macOS (Safari/Chrome/Firefox): Ctrl + Option + [Key]

'''Note:''' Some browsers might require just the Alt key, or a combination of Alt and Shift.

Accessibility

2026-01-29T11:38:06Z

Steve:

= Accessibility =

The Bellingham Heritage Centre Wiki aims to be accessible to as wide an audience as possible, regardless of technology or ability. We recognise that users access the site in many different ways and may have different visual, motor, cognitive, or situational needs.

This page explains the accessibility features available on the site, how we test accessibility, and how to provide feedback.

----

== Accessibility statement ==

The Bellingham Heritage Centre Wiki **aims to conform to WCAG 2.2 AA accessibility standards**.

We are committed to improving accessibility and usability and strive to follow recognised best practice and relevant accessibility guidelines appropriate to a community-run heritage website.

----

== Measures to support accessibility ==

To support accessibility, this site includes a built-in **Accessibility Toolbar**, available on every page.

Using this toolbar, users can:

* Enable a high-contrast display in two choices of colour scheme. Links are t he same colour as the text but underlined for visibility.
* Increase or decrease text size
* Adjust text spacing
* Underline links
* Enable a reading ruler
* Use a high-visibility cursor in two choices of colour

These tools are designed to work independently or in combination, depending on individual needs.

Accessibility preferences are saved locally in your browser so that chosen settings persist between visits on the same device.

The site also includes:

* Keyboard-accessible navigation throughout
* Visible focus indicators for keyboard users
* Skip links to allow users to bypass repeated navigation
* Screen-reader-friendly markup and ARIA attributes where appropriate

----

== Testing and evaluation ==

Accessibility has been evaluated using a combination of:

* '''Manual testing''', including:
** Keyboard-only navigation
** Visual inspection of focus visibility, contrast, and readability
** Screen-reader testing using macOS VoiceOver
* '''Automated testing''', including:
** Chrome Lighthouse accessibility audits

Recent Lighthouse audits score the site highly for accessibility, both with accessibility tools enabled and with the default presentation.

Testing has been carried out in current versions of major browsers, including Chrome, Safari, Firefox, and Opera.

----

== Known limitations and design choices ==

We are working with the base MediaWiki site build, which in itself may have some accessibility challenges. We have not worked to remedy these if they exist or are aware of them. Some automated accessibility tools may report warnings that do not represent barriers for users.

In particular:

* '''Navigation and tool lists are ordered logically rather than alphabetically.'''
Lists are structured to reflect editorial or task-based priorities rather than alphabetical order. WCAG does not require alphabetical ordering, only that content is presented in a logical and meaningful sequence.

* '''Link colour contrast warnings may appear in automated tests.'''
In high-contrast modes, links are underlined and use the same colour as surrounding text. This approach avoids reliance on colour perception alone and follows established high-contrast accessibility patterns used by operating systems and assistive technologies. Manual testing confirms that links are clear and usable for both sighted users and screen-reader users.

* '''Editor toolbar in high-contrast mode'''

When high-contrast mode is enabled, most of the site switches to a black background with yellow text for maximum readability or black background with white text depending on the user's choice. The page editor toolbar (for example, Bold, Italic, Link, Image and related controls) uses a mixture of icons and system styling provided by MediaWiki. To avoid disrupting the editor’s behaviour or hiding important controls, these toolbar icons are not recoloured in high-contrast mode. In this area, text labels and tabs may retain their original colours to preserve legibility and usability. This ensures: * editor controls remain visible and functional * keyboard and screen-reader access is unaffected * the editor behaves consistently across browsers

Screen readers announce all editor controls correctly, and full keyboard access is supported.

This approach prioritises reliability and accessibility over visual uniformity.
These design choices are intentional and are reviewed periodically.

----

== Browser and assistive technology support ==

The site is designed to work with modern web browsers and commonly used assistive technologies, including screen readers and keyboard navigation.

While the site should function in other environments, explicit testing has focused on current desktop browsers.

----

== Feedback and contact ==

If you encounter any accessibility barriers or have suggestions for improvement, please contact us via the site’s contact page or speak to a member of the Heritage Centre team.

Feedback is welcomed and helps guide future improvements to the site.

----

''This accessibility statement is reviewed periodically and updated as the site evolves.''

== Accessibility help ==

This wiki includes simple accessibility options from the menu screen.

Screen readers: The toolbar is keyboard navigable and labelled for screen readers.

== What’s remembered? ==

The following settings are 'remembered' on your device - these are stored in local storage and not cookies.

* High Contrast Yellow, High Contrast White and Contrast Reset
* Underline of links on/off
* Text spacing setting
* (Large) Cursor Yellow or Cursor White selected or Cursor reset
* Reading ruler on/off
* Text size

Settings are saved locally. Some browsers, e.g. Firefox, may cache interface styles aggressively; a refresh may be required after updates.

== Keyboard use: ==

* Esc closes the accessibility panel
* Tab / Shift+Tab to move between controls
* Enter to activate a button
* Reveal navigation: use on-screen arrows (or ←/→ if enabled)

Skip links: appear at the top when you Tab (Content / Navigation / Search / Accessibility).
== Known limits ==
Some pages/skins may have rare elements not fully themed. If you report them to us will will endeavour to fix them. Thank you.
== Accessibility options ==

* Text size and spacing controls change readability on the menu and overlays.
* Contrast provides options for standard and high-contrast modes. Links are shown in blue and underlined to ensure they are clearly distinguishable from body text.
* Two different large cursors options (white or yellow) can make the pointer easier to see.
* Horizontal reading ruler to guide the user on the screen.
* Underline links for clarity.

Selected controls are retained between pages and site visits for the individual user.
=== Reset ===
The reset button in the accessibility gadget clears all current settings back to their default states.
== Access Keys ==

The Timeless skin for MediaWiki uses the standard MediaWiki access key system, which allows for fast keyboard navigation across desktop, mobile, and tablet layouts

The modifier key (usually Alt+Shift on Windows/Linux or Ctrl+Option on macOS) must be used in combination with the characters listed below.
=== Page Action & View Shortcuts ===

* e - Edit the current page (or view source)
* t - View the talk/discussion page
* h - View page history
* c - View the main content page (if in a talk namespace)
* + - Add a new section/comment to a talk page
* m - Move (rename) the current page
* d - Delete the current page
* w - Watch or unwatch the current page
* p - View the printable version of the page
* k - View pages that link here ("What links here")
=== Navigation & Search Shortcuts ===

* f - Jump to the search box
* z - Go to the main page
* r - Go to Recent Changes
* x - Go to a random page
* q - Go to the special pages index
=== Personal & User Tools ===

* . - Go to your user page
* y - Go to your contributions
* l - Go to your watchlist
* o - Log in
* o - Log out
=== Editing Shortcuts ===

* s - Save/Publish the changes you are editing
* p - Preview your edit
* v - Show changes (diff)
* b - Jump to the edit summary box
* i - Toggle the "minor edit" checkmark
=== How to use them ===

* Windows/Linux (Firefox/Chrome/Edge): Alt + Shift + [Key]
* macOS (Safari/Chrome/Firefox): Ctrl + Option + [Key]

'''Note:''' Some browsers might require just the Alt key, or a combination of Alt and Shift.

MediaWiki:Timeless.css

2026-01-29T11:22:50Z

Steve:

/*
⚠️ Do not reorder rules below this line — contrast overrides depend on cascade order.
*/

/* =========================================================
Bellingham Heritage Centre – Timeless skin branding (CSS-only)
Applies ONLY when the Timeless skin is in use.
========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Roboto+Condensed:wght@400;700&family=Satisfy&display=swap');

body.skin-timeless{
/* Palette */
--bhc-teal: rgb(130,156,149);
--bhc-olive: rgb(165,174,121);
--bhc-sand: rgb(228,186,149);

/* Site colours */
--bhc-maroon: rgb(93, 8, 58); /* main burgundy */
--bhc-gold: rgb(228, 186, 123); /* site gold/yellow */

--bhc-link: #005DB3;
--bhc-text: #202020;

/* Header is WHITE */
--bhc-header-bg: #ffffff;
--bhc-header-text: #202020;

/* Bars */
--bhc-topbar-olive: rgb(165, 174, 121);
--bhc-topbar-teal: rgb(130, 156, 149);
--bhc-bottombar-sand: rgb(228, 186, 123);
--bhc-bottombar-maroon: rgb(95, 8, 58);

/* Fonts */
--bhc-body-font: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
--bhc-heading-font: "Roboto Condensed", "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
--bhc-accent-font: "Satisfy", cursive;

/* Readability */
font-size: 112.5%;
line-height: 1.65;

overflow-x: hidden;
background: #eaecf0; /* page background */
}

@media (max-width: 720px){
body.skin-timeless{ font-size: 16.5px; }
}

/* ---------------------------------------------------------
Global typography (content)
--------------------------------------------------------- */

body.skin-timeless,
body.skin-timeless .mw-body,
body.skin-timeless .mw-parser-output{
font-family: var(--bhc-body-font);
color: var(--bhc-text);
}

body.skin-timeless a,
body.skin-timeless a:visited{
color: var(--bhc-link);
}

body.skin-timeless a:hover{
text-decoration: underline;
}

body.skin-timeless .mw-parser-output h1,
body.skin-timeless .mw-parser-output h2,
body.skin-timeless .mw-parser-output h3{
font-family: var(--bhc-heading-font);
letter-spacing: .02em;
color: var(--bhc-maroon);
}

body.skin-timeless .mw-parser-output h1{
font-size: 2.05rem;
line-height: 1.15;
margin: 0.25rem 0 0.75rem;
font-weight: 700;
}

body.skin-timeless .mw-parser-output h2{
font-size: 1.55rem;
line-height: 1.2;
margin: 1.6rem 0 0.6rem;
border-bottom: 3px solid var(--bhc-sand);
padding-bottom: .25rem;
}

body.skin-timeless .mw-parser-output h3{
font-size: 1.25rem;
line-height: 1.25;
margin: 1.2rem 0 0.45rem;
}

body.skin-timeless .mw-parser-output h4{
font-size: 1.1rem;
line-height: 1.3;
}

body.skin-timeless .mw-parser-output p{ margin: 0.75rem 0; }

body.skin-timeless .mw-parser-output ul,
body.skin-timeless .mw-parser-output ol{ margin: 0.6rem 0 0.9rem 1.25rem; }

body.skin-timeless .mw-parser-output li{ margin: 0.2rem 0; }

body.skin-timeless #toc,
body.skin-timeless .toc,
body.skin-timeless .mw-normal-catlinks,
body.skin-timeless .catlinks,
body.skin-timeless .mw-editsection,
body.skin-timeless .mw-editsection a,
body.skin-timeless .mw-changeslist,
body.skin-timeless .mw-footer{
font-size: 0.95rem;
}

/* Optional accent class you can use in wiki content */
body.skin-timeless .bhc-script{ font-family: var(--bhc-accent-font); }

/* =========================================================
HEADER: white background + top/bottom bars (20px each)
========================================================= */

/* Hide Timeless fixed decorative bars that can “float” during scroll */
body.skin-timeless #mw-header-hack,
body.skin-timeless #mw-header-nav-hack,
body.skin-timeless .color-bar{
display: none !important;
}

/* Header container – ensure no clipping */
body.skin-timeless #mw-header-container{
position: relative !important;
background: var(--bhc-header-bg) !important; /* white */
border: 0 !important;
overflow: visible !important;
}

/* Top bar (olive then teal) */
body.skin-timeless #mw-header-container::before{
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 20px;
z-index: 5;
pointer-events: none;
background: linear-gradient(
to bottom,
var(--bhc-topbar-olive) 0 25%,
var(--bhc-topbar-teal) 25% 100%
);
}

/* Bottom bar (gold then maroon) */
body.skin-timeless #mw-header-container::after{
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 20px;
z-index: 5;
pointer-events: none;
background: linear-gradient(
to bottom,
var(--bhc-bottombar-sand) 0 33%,
var(--bhc-bottombar-maroon) 33% 100%
);
}

/* Make header text dark by default */
body.skin-timeless #mw-header,
body.skin-timeless #mw-header a{
color: var(--bhc-header-text) !important;
}

/* =========================================================
HEADER LAYOUT: stack title/strapline, then search, then user-tools
(prevents large-screen collisions)
========================================================= */

body.skin-timeless #mw-header{
position: relative;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 1.25rem;

/* leave room for the bars */
padding-top: calc(14px + 20px);
padding-bottom: calc(12px + 20px);
}

/* Row 1: Title block is always full width */
body.skin-timeless #mw-header #p-logo-text{
min-width: 0;
flex: 1 1 100%;
width: 100%;
order: 1;
}

/* Row 2: Search sits on its own row, right aligned, constrained */
body.skin-timeless #mw-header #p-search{
flex: 1 1 100%;
width: 100%;
max-width: none;
margin-left: 0;
order: 2;
}

/* Constrain the inner search box and right-align it */
body.skin-timeless #mw-header #p-search form#searchform,
body.skin-timeless #mw-header #p-search #simpleSearch{
max-width: 520px;
margin-left: auto; /* right align */
}

/* Row 3: User tools on its own row, right aligned */
body.skin-timeless #mw-header #user-tools{
flex: 1 1 100%;
width: 100%;
max-width: none;
margin-left: 0;
order: 3;
text-align: right;
}

body.skin-timeless #mw-header #user-tools #personal{
display: inline-block;
}

/* Optional: open dropdown from right edge */
body.skin-timeless #mw-header #user-tools #personal-inner.dropdown{
right: 0 !important;
left: auto !important;
}

/* Small widths: keep things simple */
@media (max-width: 720px){
body.skin-timeless #mw-header #p-search form#searchform,
body.skin-timeless #mw-header #p-search #simpleSearch{
max-width: none;
margin-left: 0;
}
}

/* =========================================================
SITE TITLE + LOGO (left)
Timeless uses: #p-logo-text a#p-banner
========================================================= */

/* KEY FIX:
Put the logo + reserved height on #p-logo-text, not on #p-banner,
so strapline can sit close under the title without “dead air”. */
body.skin-timeless #p-logo-text{
position: relative;

background-image: url(/resources/assets/BHClogo.jpg);
background-repeat: no-repeat;
background-position: left top;
background-size: 96px 96px;

min-height: 96px; /* reserves logo height */
padding-left: 118px; /* reserves logo width + gap */
}

/* Title link should not carry logo spacing */
body.skin-timeless #p-logo-text #p-banner{
display: block;
text-decoration: none;

font-family: var(--bhc-heading-font) !important;
font-weight: 700;
font-size: 40px;
letter-spacing: .01em;
color: var(--bhc-maroon) !important;

background: none !important;
min-height: 0 !important;
padding-left: 0 !important;

line-height: 1.05;
white-space: normal;
margin: 0;
}

/* Strapline injected (LocalSettings-driven). Expect element id="bhc-strapline" or class="bhc-strapline".
We style BOTH for safety. */
body.skin-timeless #bhc-strapline,
body.skin-timeless .bhc-strapline{
margin-top: 0.15rem;
font-family: var(--bhc-accent-font);
color: var(--bhc-teal);
font-size: 20px;
line-height: 1.12;
font-weight: 400;
white-space: normal;
max-width: 52rem;
}

@media (max-width: 1024px){
body.skin-timeless #bhc-strapline,
body.skin-timeless .bhc-strapline{
font-size: 18px;
max-width: 100%;
}
}

@media (max-width: 720px){
body.skin-timeless #bhc-strapline,
body.skin-timeless .bhc-strapline{
font-size: 16px;
}
}

/* Remove any old pseudo-element strapline rules (belt & braces) */
body.skin-timeless #p-logo-text #p-banner::after{
content: none !important;
}

/* Small widths: reduce left indent + logo size (logo is on #p-logo-text now) */
@media (max-width: 768px){
body.skin-timeless #p-logo-text{
background-size: 72px 72px !important;
padding-left: 92px !important; /* 72 + ~20 gap */
min-height: 72px !important;
}

body.skin-timeless #p-logo-text #p-banner{
line-height: 1.05 !important;
}
}

/* Hide Timeless sidebar logo to avoid double branding */
body.skin-timeless #mw-site-navigation #p-logo{
display: none !important;
}

/* =========================================================
SEARCH: icon OUTSIDE input (right side)
========================================================= */

body.skin-timeless #p-search #simpleSearch{
position: relative;
}

/* Input */
body.skin-timeless #p-search input[type="search"],
body.skin-timeless #p-search #searchInput{
width: 100%;
box-sizing: border-box;

padding: .45rem .8rem;
border-radius: 10px;

background: #fff !important;
color: #202020 !important;
caret-color: #202020 !important;

border: 1px solid rgba(0,0,0,.18) !important;
box-shadow: none !important;

-webkit-appearance: none;
appearance: none;

/* room for icon */
padding-right: 3.1rem !important;
}

body.skin-timeless #p-search input[type="search"]::placeholder,
body.skin-timeless #p-search #searchInput::placeholder{
color: rgba(0,0,0,.55) !important;
}

/* Hide WebKit search decorations */
body.skin-timeless #p-search input[type="search"]::-webkit-search-decoration,
body.skin-timeless #p-search input[type="search"]::-webkit-search-cancel-button,
body.skin-timeless #p-search input[type="search"]::-webkit-search-results-button,
body.skin-timeless #p-search input[type="search"]::-webkit-search-results-decoration{
-webkit-appearance: none;
display: none;
}

/* Keep ONE icon button (Search), hide Go */
body.skin-timeless #p-search input#mw-searchButton,
body.skin-timeless #p-search input#searchButton{
position: absolute;
top: 50%;
right: 6px;
transform: translateY(-50%);

width: 38px;
height: 38px;

padding: 0;
margin: 0;

border-radius: 10px;
border: 1px solid rgba(0,0,0,.18);
background: #fff;

cursor: pointer;

text-indent: -9999px;
overflow: hidden;

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath fill='%23666' d='M10 18a8 8 0 1 1 5.293-14.293A8 8 0 0 1 10 18m0-2a6 6 0 1 0-6-6a6 6 0 0 0 6 6m9.707 6.293l-5.1-5.1l1.414-1.414l5.1 5.1z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
}

body.skin-timeless #p-search input#searchButton{
display: none !important;
}

/* Label styling */
body.skin-timeless #p-search label{
color: rgba(32,32,32,.75) !important;
}

/* =========================================================
Personal dropdown: ensure text is dark (header is white)
========================================================= */

body.skin-timeless #personal,
body.skin-timeless #personal a,
body.skin-timeless #personal h2,
body.skin-timeless #personal h3,
body.skin-timeless #personal .mw-portlet,
body.skin-timeless #personal .mw-portlet *{
color: #202020 !important;
}

body.skin-timeless #personal .dropdown,
body.skin-timeless #personal .mw-portlet-body{
background: #fff !important;
}

/* =========================================================
CONTENT WRAPPER FIXES
========================================================= */

body.skin-timeless #mw-content-container{
background: #eaecf0 !important;
background-image: none !important;
border-bottom: 0 !important;
padding-top: 1rem !important; /* breathing space under header bar */
}

/* Reduce Timeless default top gap below header */
@media screen and (min-width: 851px) {
body.skin-timeless #mw-content-container{
margin-top: 0.5rem !important;
padding-bottom: 1em !important;
}
}

/* =========================================================
FOOTER: match site (burgundy, white text, gold links) + top border
========================================================= */

body.skin-timeless #mw-footer-container{
background: var(--bhc-maroon) !important;
border-top: 10px solid var(--bhc-gold) !important;
}

/* Full-bleed footer: remove Timeless .ts-inner side padding ONLY in footer */
body.skin-timeless #mw-footer-container .ts-inner{
max-width: none !important;
padding-left: 0 !important;
padding-right: 0 !important;
}

body.skin-timeless #mw-footer{
font-family: var(--bhc-body-font);
color: #fff !important;
}

/* Footer links */
body.skin-timeless #mw-footer a,
body.skin-timeless #mw-footer a:visited{
color: var(--bhc-gold) !important;
}

/* Footer padding */
body.skin-timeless #footer-list {padding-left:20px; padding-bottom: 20px;}
body.skin-timeless #footer-icons {padding-right: 20px;}

/* =========================================================
Hide empty "Wiki Tools" (site-tools) portlet on smaller screens
========================================================= */
@media (max-width: 1100px){
body.skin-timeless #site-tools{
display: none !important;
height: 0 !important;
overflow: hidden !important;
}
}

/* =========================================================
Remove Timeless default borders on MediaWiki heading wrappers and TOC title
========================================================= */
body.skin-timeless .toctitle,
body.skin-timeless .mw-heading2,
body.skin-timeless .mw-heading3,
body.skin-timeless .mw-heading4,
body.skin-timeless .mw-heading5 {
border-bottom: none !important;
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}

/* =========================================================
Header: use available width on large screens (reduce height)
- Keep wrap on smaller screens
========================================================= */

/* Make sure the logo/title portlet is not shrink-wrapped by skin rules */
body.skin-timeless #p-logo-text{
display: block !important;
float: none !important;
width: 100% !important;
max-width: none !important;
}

/* Wide screens: keep title + strapline on single lines */
@media (min-width: 1100px){
body.skin-timeless #p-logo-text #p-banner{
white-space: nowrap !important;
font-size: 52px !important; /* tweak 48–56 if you want */
line-height: 1.02 !important;
}

body.skin-timeless #bhc-strapline,
body.skin-timeless .bhc-strapline{
white-space: nowrap !important;
max-width: none !important;
margin-top: 0.05rem !important;
}
}

/* Medium screens: allow title to wrap but keep it tighter */
@media (max-width: 1099px){
body.skin-timeless #p-logo-text #p-banner{
line-height: 1.05 !important;
}
body.skin-timeless #bhc-strapline,
body.skin-timeless .bhc-strapline{
margin-top: 0.12rem !important;
}
}

MediaWiki:Timeless.css

2026-01-29T11:08:44Z

Steve:

/*
⚠️ Do not reorder rules below this line — contrast overrides depend on cascade order.
*/

/* =========================================================
Bellingham Heritage Centre – Timeless skin branding (CSS-only)
Applies ONLY when the Timeless skin is in use.
========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Roboto+Condensed:wght@400;700&family=Satisfy&display=swap');

body.skin-timeless{
/* Palette */
--bhc-teal: rgb(130,156,149);
--bhc-olive: rgb(165,174,121);
--bhc-sand: rgb(228,186,149);

/* Site colours */
--bhc-maroon: rgb(93, 8, 58); /* main burgundy */
--bhc-gold: rgb(228, 186, 123); /* site gold/yellow */

--bhc-link: #005DB3;
--bhc-text: #202020;

/* Header is WHITE */
--bhc-header-bg: #ffffff;
--bhc-header-text: #202020;

/* Bars */
--bhc-topbar-olive: rgb(165, 174, 121);
--bhc-topbar-teal: rgb(130, 156, 149);
--bhc-bottombar-sand: rgb(228, 186, 123);
--bhc-bottombar-maroon: rgb(95, 8, 58);

/* Fonts */
--bhc-body-font: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
--bhc-heading-font: "Roboto Condensed", "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
--bhc-accent-font: "Satisfy", cursive;

/* Readability */
font-size: 112.5%;
line-height: 1.65;

overflow-x: hidden;
background: #eaecf0; /* page background */
}

@media (max-width: 720px){
body.skin-timeless{ font-size: 16.5px; }
}

/* ---------------------------------------------------------
Global typography (content)
--------------------------------------------------------- */

body.skin-timeless,
body.skin-timeless .mw-body,
body.skin-timeless .mw-parser-output{
font-family: var(--bhc-body-font);
color: var(--bhc-text);
}

body.skin-timeless a{ color: var(--bhc-link); }
body.skin-timeless a:hover{ text-decoration: underline; }

body.skin-timeless .mw-parser-output h1,
body.skin-timeless .mw-parser-output h2,
body.skin-timeless .mw-parser-output h3{
font-family: var(--bhc-heading-font);
letter-spacing: .02em;
color: var(--bhc-maroon);
}

body.skin-timeless .mw-parser-output h1{
font-size: 2.05rem;
line-height: 1.15;
margin: 0.25rem 0 0.75rem;
font-weight: 700;
}

body.skin-timeless .mw-parser-output h2{
font-size: 1.55rem;
line-height: 1.2;
margin: 1.6rem 0 0.6rem;
border-bottom: 3px solid var(--bhc-sand);
padding-bottom: .25rem;
}

body.skin-timeless .mw-parser-output h3{
font-size: 1.25rem;
line-height: 1.25;
margin: 1.2rem 0 0.45rem;
}

body.skin-timeless .mw-parser-output h4{
font-size: 1.1rem;
line-height: 1.3;
}

body.skin-timeless .mw-parser-output p{ margin: 0.75rem 0; }

body.skin-timeless .mw-parser-output ul,
body.skin-timeless .mw-parser-output ol{ margin: 0.6rem 0 0.9rem 1.25rem; }

body.skin-timeless .mw-parser-output li{ margin: 0.2rem 0; }

body.skin-timeless #toc,
body.skin-timeless .toc,
body.skin-timeless .mw-normal-catlinks,
body.skin-timeless .catlinks,
body.skin-timeless .mw-editsection,
body.skin-timeless .mw-editsection a,
body.skin-timeless .mw-changeslist,
body.skin-timeless .mw-footer{
font-size: 0.95rem;
}

/* Optional accent class you can use in wiki content */
body.skin-timeless .bhc-script{ font-family: var(--bhc-accent-font); }

/* =========================================================
HEADER: white background + top/bottom bars (20px each)
========================================================= */

/* Hide Timeless fixed decorative bars that can “float” during scroll */
body.skin-timeless #mw-header-hack,
body.skin-timeless #mw-header-nav-hack,
body.skin-timeless .color-bar{
display: none !important;
}

/* Header container – ensure no clipping */
body.skin-timeless #mw-header-container{
position: relative !important;
background: var(--bhc-header-bg) !important; /* white */
border: 0 !important;
overflow: visible !important;
}

/* Top bar (olive then teal) */
body.skin-timeless #mw-header-container::before{
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 20px;
z-index: 5;
pointer-events: none;
background: linear-gradient(
to bottom,
var(--bhc-topbar-olive) 0 25%,
var(--bhc-topbar-teal) 25% 100%
);
}

/* Bottom bar (gold then maroon) */
body.skin-timeless #mw-header-container::after{
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 20px;
z-index: 5;
pointer-events: none;
background: linear-gradient(
to bottom,
var(--bhc-bottombar-sand) 0 33%,
var(--bhc-bottombar-maroon) 33% 100%
);
}

/* Make header text dark by default */
body.skin-timeless #mw-header,
body.skin-timeless #mw-header a{
color: var(--bhc-header-text) !important;
}

/* =========================================================
HEADER LAYOUT: stack title/strapline, then search, then user-tools
(prevents large-screen collisions)
========================================================= */

body.skin-timeless #mw-header{
position: relative;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 1.25rem;

/* leave room for the bars */
padding-top: calc(14px + 20px);
padding-bottom: calc(12px + 20px);
}

/* Row 1: Title block is always full width */
body.skin-timeless #mw-header #p-logo-text{
min-width: 0;
flex: 1 1 100%;
width: 100%;
order: 1;
}

/* Row 2: Search sits on its own row, right aligned, constrained */
body.skin-timeless #mw-header #p-search{
flex: 1 1 100%;
width: 100%;
max-width: none;
margin-left: 0;
order: 2;
}

/* Constrain the inner search box and right-align it */
body.skin-timeless #mw-header #p-search form#searchform,
body.skin-timeless #mw-header #p-search #simpleSearch{
max-width: 520px;
margin-left: auto; /* right align */
}

/* Row 3: User tools on its own row, right aligned */
body.skin-timeless #mw-header #user-tools{
flex: 1 1 100%;
width: 100%;
max-width: none;
margin-left: 0;
order: 3;
text-align: right;
}

body.skin-timeless #mw-header #user-tools #personal{
display: inline-block;
}

/* Optional: open dropdown from right edge */
body.skin-timeless #mw-header #user-tools #personal-inner.dropdown{
right: 0 !important;
left: auto !important;
}

/* Small widths: keep things simple */
@media (max-width: 720px){
body.skin-timeless #mw-header #p-search form#searchform,
body.skin-timeless #mw-header #p-search #simpleSearch{
max-width: none;
margin-left: 0;
}
}

/* =========================================================
SITE TITLE + LOGO (left)
Timeless uses: #p-logo-text a#p-banner
========================================================= */

/* KEY FIX:
Put the logo + reserved height on #p-logo-text, not on #p-banner,
so strapline can sit close under the title without “dead air”. */
body.skin-timeless #p-logo-text{
position: relative;

background-image: url(/resources/assets/BHClogo.jpg);
background-repeat: no-repeat;
background-position: left top;
background-size: 96px 96px;

min-height: 96px; /* reserves logo height */
padding-left: 118px; /* reserves logo width + gap */
}

/* Title link should not carry logo spacing */
body.skin-timeless #p-logo-text #p-banner{
display: block;
text-decoration: none;

font-family: var(--bhc-heading-font) !important;
font-weight: 700;
font-size: 40px;
letter-spacing: .01em;
color: var(--bhc-maroon) !important;

background: none !important;
min-height: 0 !important;
padding-left: 0 !important;

line-height: 1.05;
white-space: normal;
margin: 0;
}

/* Strapline injected (LocalSettings-driven). Expect element id="bhc-strapline" or class="bhc-strapline".
We style BOTH for safety. */
body.skin-timeless #bhc-strapline,
body.skin-timeless .bhc-strapline{
margin-top: 0.15rem;
font-family: var(--bhc-accent-font);
color: var(--bhc-teal);
font-size: 20px;
line-height: 1.12;
font-weight: 400;
white-space: normal;
max-width: 52rem;
}

@media (max-width: 1024px){
body.skin-timeless #bhc-strapline,
body.skin-timeless .bhc-strapline{
font-size: 18px;
max-width: 100%;
}
}

@media (max-width: 720px){
body.skin-timeless #bhc-strapline,
body.skin-timeless .bhc-strapline{
font-size: 16px;
}
}

/* Remove any old pseudo-element strapline rules (belt & braces) */
body.skin-timeless #p-logo-text #p-banner::after{
content: none !important;
}

/* Small widths: reduce left indent + logo size (logo is on #p-logo-text now) */
@media (max-width: 768px){
body.skin-timeless #p-logo-text{
background-size: 72px 72px !important;
padding-left: 92px !important; /* 72 + ~20 gap */
min-height: 72px !important;
}

body.skin-timeless #p-logo-text #p-banner{
line-height: 1.05 !important;
}
}

/* Hide Timeless sidebar logo to avoid double branding */
body.skin-timeless #mw-site-navigation #p-logo{
display: none !important;
}

/* =========================================================
SEARCH: icon OUTSIDE input (right side)
========================================================= */

body.skin-timeless #p-search #simpleSearch{
position: relative;
}

/* Input */
body.skin-timeless #p-search input[type="search"],
body.skin-timeless #p-search #searchInput{
width: 100%;
box-sizing: border-box;

padding: .45rem .8rem;
border-radius: 10px;

background: #fff !important;
color: #202020 !important;
caret-color: #202020 !important;

border: 1px solid rgba(0,0,0,.18) !important;
box-shadow: none !important;

-webkit-appearance: none;
appearance: none;

/* room for icon */
padding-right: 3.1rem !important;
}

body.skin-timeless #p-search input[type="search"]::placeholder,
body.skin-timeless #p-search #searchInput::placeholder{
color: rgba(0,0,0,.55) !important;
}

/* Hide WebKit search decorations */
body.skin-timeless #p-search input[type="search"]::-webkit-search-decoration,
body.skin-timeless #p-search input[type="search"]::-webkit-search-cancel-button,
body.skin-timeless #p-search input[type="search"]::-webkit-search-results-button,
body.skin-timeless #p-search input[type="search"]::-webkit-search-results-decoration{
-webkit-appearance: none;
display: none;
}

/* Keep ONE icon button (Search), hide Go */
body.skin-timeless #p-search input#mw-searchButton,
body.skin-timeless #p-search input#searchButton{
position: absolute;
top: 50%;
right: 6px;
transform: translateY(-50%);

width: 38px;
height: 38px;

padding: 0;
margin: 0;

border-radius: 10px;
border: 1px solid rgba(0,0,0,.18);
background: #fff;

cursor: pointer;

text-indent: -9999px;
overflow: hidden;

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath fill='%23666' d='M10 18a8 8 0 1 1 5.293-14.293A8 8 0 0 1 10 18m0-2a6 6 0 1 0-6-6a6 6 0 0 0 6 6m9.707 6.293l-5.1-5.1l1.414-1.414l5.1 5.1z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
}

body.skin-timeless #p-search input#searchButton{
display: none !important;
}

/* Label styling */
body.skin-timeless #p-search label{
color: rgba(32,32,32,.75) !important;
}

/* =========================================================
Personal dropdown: ensure text is dark (header is white)
========================================================= */

body.skin-timeless #personal,
body.skin-timeless #personal a,
body.skin-timeless #personal h2,
body.skin-timeless #personal h3,
body.skin-timeless #personal .mw-portlet,
body.skin-timeless #personal .mw-portlet *{
color: #202020 !important;
}

body.skin-timeless #personal .dropdown,
body.skin-timeless #personal .mw-portlet-body{
background: #fff !important;
}

/* =========================================================
CONTENT WRAPPER FIXES
========================================================= */

body.skin-timeless #mw-content-container{
background: #eaecf0 !important;
background-image: none !important;
border-bottom: 0 !important;
padding-top: 1rem !important; /* breathing space under header bar */
}

/* Reduce Timeless default top gap below header */
@media screen and (min-width: 851px) {
body.skin-timeless #mw-content-container{
margin-top: 0.5rem !important;
padding-bottom: 1em !important;
}
}

/* =========================================================
FOOTER: match site (burgundy, white text, gold links) + top border
========================================================= */

body.skin-timeless #mw-footer-container{
background: var(--bhc-maroon) !important;
border-top: 10px solid var(--bhc-gold) !important;
}

/* Full-bleed footer: remove Timeless .ts-inner side padding ONLY in footer */
body.skin-timeless #mw-footer-container .ts-inner{
max-width: none !important;
padding-left: 0 !important;
padding-right: 0 !important;
}

body.skin-timeless #mw-footer{
font-family: var(--bhc-body-font);
color: #fff !important;
}

/* Footer links */
body.skin-timeless #mw-footer a,
body.skin-timeless #mw-footer a:visited{
color: var(--bhc-gold) !important;
}

/* Footer padding */
body.skin-timeless #footer-list {padding-left:20px; padding-bottom: 20px;}
body.skin-timeless #footer-icons {padding-right: 20px;}

/* =========================================================
Hide empty "Wiki Tools" (site-tools) portlet on smaller screens
========================================================= */
@media (max-width: 1100px){
body.skin-timeless #site-tools{
display: none !important;
height: 0 !important;
overflow: hidden !important;
}
}

/* =========================================================
Remove Timeless default borders on MediaWiki heading wrappers and TOC title
========================================================= */
body.skin-timeless .toctitle,
body.skin-timeless .mw-heading2,
body.skin-timeless .mw-heading3,
body.skin-timeless .mw-heading4,
body.skin-timeless .mw-heading5 {
border-bottom: none !important;
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}

/* =========================================================
Header: use available width on large screens (reduce height)
- Keep wrap on smaller screens
========================================================= */

/* Make sure the logo/title portlet is not shrink-wrapped by skin rules */
body.skin-timeless #p-logo-text{
display: block !important;
float: none !important;
width: 100% !important;
max-width: none !important;
}

/* Wide screens: keep title + strapline on single lines */
@media (min-width: 1100px){
body.skin-timeless #p-logo-text #p-banner{
white-space: nowrap !important;
font-size: 52px !important; /* tweak 48–56 if you want */
line-height: 1.02 !important;
}

body.skin-timeless #bhc-strapline,
body.skin-timeless .bhc-strapline{
white-space: nowrap !important;
max-width: none !important;
margin-top: 0.05rem !important;
}
}

/* Medium screens: allow title to wrap but keep it tighter */
@media (max-width: 1099px){
body.skin-timeless #p-logo-text #p-banner{
line-height: 1.05 !important;
}
body.skin-timeless #bhc-strapline,
body.skin-timeless .bhc-strapline{
margin-top: 0.12rem !important;
}
}

MediaWiki:Timeless.css

2026-01-29T10:55:14Z

Steve: Replaced content with "/* ========================================================= Timeless (BHC) — site skin customisations ONLY --------------------------------------------------------- This file intentionally contains: - Branding / layout / readability tweaks for Timeless - NO accessibility gadget rules - NO high-contrast / a11y feature classes (those live in the gadget CSS) If you previously pasted the Accessibility Gadget CSS into a Timeless page, move it t..."

/* =========================================================
Timeless (BHC) — site skin customisations ONLY
---------------------------------------------------------
This file intentionally contains:
- Branding / layout / readability tweaks for Timeless
- NO accessibility gadget rules
- NO high-contrast / a11y feature classes (those live in the gadget CSS)

If you previously pasted the Accessibility Gadget CSS into a Timeless page,
move it to the gadget stylesheet (e.g. MediaWiki:Gadget-accessibility.css)
and keep this file as the clean Timeless baseline.
========================================================= */

/* Optional: if you use BHC design tokens, keep them here */
:root{
/* Example placeholders — keep / adjust only if you really use them elsewhere */
/* --bhc-text: #111827; */
/* --bhc-link: #005DB3; */
/* --bhc-header-text: #111827; */
/* --bhc-gold: #E4BA7B; */
}

/* -----------------------------------------------------------------
Timeless baseline tweaks (safe, non-a11y)
----------------------------------------------------------------- */

/* Keep images responsive (if not already handled elsewhere) */
.res-img, .res-img img, img{
max-width: 100%;
height: auto;
}

/* -----------------------------------------------------------------
Add any Timeless-only cosmetic tweaks BELOW
(typography, spacing, portlet headings, etc.)
----------------------------------------------------------------- */

/* Example (optional):
body.skin-timeless .mw-portlet h3{
letter-spacing: 0.01em;
}
*/

/* End of Timeless baseline */

MediaWiki:Gadget-bhc-accessibility.css

2026-01-29T10:02:00Z

Steve:

/*
⚠️ Do not reorder rules below this line — contrast overrides depend on cascade order.
*/

/* =========================================================
BHC Accessibility Gadget – MediaWiki / Timeless
========================================================= */

/* ---------------------------------------------------------
Variables
--------------------------------------------------------- */
:root{
--a11y-bg: #111827;
--a11y-border: #374151;
--a11y-fg: #ffffff;
--a11y-focus: #FFBF47;
--a11y-link-underline: #3366CC; /* MediaWiki link blue */
--a11y-menu-width: 340px;
--a11y-contrast-fg: #FFD400;
}

/* Timeless: stop skin CSS shrinking the accessibility icon */
body.skin-timeless .a11y-toggle{
font-size: 16px !important;
line-height: 1 !important;
}
body.skin-timeless .a11y-toggle svg{
display: block !important;
width: 36px !important;
height: 36px !important;
min-width: 36px !important;
min-height: 36px !important;
max-width: none !important;
max-height: none !important;

/* If the glyph still looks small, keep this: */
transform: scale(1.15) !important;
transform-origin: 50% 50% !important;
}
/* Make sure fill isn’t being altered by skin rules */
body.skin-timeless .a11y-toggle svg path{
fill: currentColor !important;
}

/* ---------------------------------------------------------
Skip links (appear when focused)
--------------------------------------------------------- */
.skip-link{
position: absolute;
left: 12px;
top: 12px;
z-index: 11000;

padding: 10px 14px;
border-radius: 8px;

background: #111827;
color: #fff;
text-decoration: none;

top: -9999px; /* hidden off-screen by default */
transition: none; /* no animation needed when hidden */

border: 2px solid var(--a11y-focus);
}
.skip-link:focus,
.skip-link:focus-visible{
top: 12px; /* bring into view when focused */
outline: none;
z-index: 11001;
}

body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .skip-link{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-fg) !important;
}

/* Stack multiple skip links neatly when tabbing through them */
#a11y-skip-content:focus,
#a11y-skip-content:focus-visible{ top: 56px; }

#a11y-skip-nav:focus,
#a11y-skip-nav:focus-visible{ top: 100px; }

#a11y-skip-search:focus,
#a11y-skip-search:focus-visible{ top: 144px; }

/* ---------------------------------------------------------
Floating accessibility toggle
--------------------------------------------------------- */
.a11y-toggle{
position: fixed;
right: 16px;
bottom: 16px;
z-index: 10001;

width: 56px;
height: 56px;
border-radius: 50%;

background: #005FCC;
border: 2px solid #ffffff;
color: #ffffff;

display: inline-flex;
align-items: center;
justify-content: center;

box-shadow: 0 10px 24px rgba(0,0,0,0.25);
cursor: pointer;
}
.a11y-toggle:hover{ background:#0047A6; }
.a11y-toggle:focus-visible{
outline: 3px solid var(--a11y-focus);
outline-offset: 3px;
}
.a11y-toggle svg{
width: 44px;
height: 44px;
fill: currentColor;
}

/* ---------------------------------------------------------
Panel
--------------------------------------------------------- */
/* Compact current-settings line (display-only) */
.a11y-status{
font-size: 13px;
line-height: 1.25;
margin: 6px 0 8px;
opacity: 0.95;
}

.a11y-panel{
position: fixed;
right: 14px;
bottom: 76px;
z-index: 10000;

width: var(--a11y-menu-width);
max-width: calc(100vw - 28px);

background: var(--a11y-bg);
border: 1px solid var(--a11y-border);
color: var(--a11y-fg);
border-radius: 16px;
padding: 12px;

box-shadow: 0 14px 40px rgba(0,0,0,0.28);
}
.a11y-panel[hidden]{ display:none !important; }

/* Header */
.a11y-head{
display:flex;
align-items:center;
justify-content: space-between;
margin-bottom: 10px;
}
.a11y-head h2{
font-size: 16px;
margin: 0;
}
.a11y-help{
width: 28px;
height: 28px;
border-radius: 50%;
background: #fff;
color: #111827;
font-weight: 900;
text-decoration: none;
display:flex;
align-items:center;
justify-content:center;
}
.a11y-help:focus-visible{
outline: 3px solid var(--a11y-focus);
outline-offset: 2px;
}

/* Buttons */
.a11y-row{
display:flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 10px;
}
.a11y-btn{
border: 1px solid #D1D5DB;
background:#fff;
color:#111827;
padding: 8px 10px;
border-radius: 999px;
font-size: 14px;
font-weight: 800;
cursor: pointer;
}
.a11y-btn[aria-pressed="true"]{
background:#111827;
color:#fff;
}
.a11y-btn:focus-visible{
outline: 3px solid var(--a11y-focus);
outline-offset: 2px;
}

.a11y-hint{
font-size: 13px;
color: var(--a11y-fg);
line-height: 1.4;
}

/* Screen reader only */
.a11y-sr{
position:absolute;
width:1px;
height:1px;
overflow:hidden;
clip:rect(0,0,0,0);
}

/* =========================================================
Feature classes
========================================================= */

/* ------------------------------
High contrast (black/yellow/blue)
------------------------------ */

/* ------------------------------
High contrast presets
- Use ONE of these on <body>:
- a11y-contrast-yellow (yellow on black)
- a11y-contrast-white (white on black)
- Back-compat: a11y-contrast behaves as yellow on black
------------------------------ */
body.a11y-contrast,
body.a11y-contrast-yellow{
--a11y-contrast-fg: #FFD400;
--a11y-contrast-fg-hover: #FFE066;
--a11y-contrast-link: #36C; /* MediaWiki blue */
--a11y-contrast-border-70: rgba(255,212,0,.7);
--a11y-contrast-border-75: rgba(255,212,0,.75);
--a11y-contrast-border-85: rgba(255,212,0,.85);
}
body.a11y-contrast-white{
--a11y-contrast-fg: #FFFFFF;
--a11y-contrast-fg-hover: #E6E6E6;
--a11y-contrast-link: #9ECBFF; /* lighter link blue on black */
--a11y-contrast-border-70: rgba(255,255,255,.7);
--a11y-contrast-border-75: rgba(255,255,255,.75);
--a11y-contrast-border-85: rgba(255,255,255,.85);
}

body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white){
background:#000 !important;
color: var(--a11y-contrast-fg) !important;

/* Gadget UI variables in contrast mode */
--a11y-bg: #000;
--a11y-border: var(--a11y-contrast-border-70);
--a11y-fg: var(--a11y-contrast-fg);
--a11y-focus: var(--a11y-contrast-fg);
--a11y-link-underline: var(--a11y-contrast-link);
}

/* =========================================================
HIGH CONTRAST: Links must be visually distinct
Blue + underline to meet WCAG 1.4.1
========================================================= */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a:visited{
color: var(--a11y-contrast-link) !important;
text-decoration: underline !important;
text-decoration-thickness: 2px;
text-underline-offset: 0.15em;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a:hover,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a:focus-visible{
text-decoration-thickness: 3px;
}

/* Headings */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) h1,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) h2,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) h3,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) h4,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) h5,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) h6{
color:var(--a11y-contrast-fg) !important;
border-color:var(--a11y-contrast-fg) !important;
}

/* Main containers (Timeless needs explicit coverage) */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-wrapper,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-content-container,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-content,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-body,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-parser-output{
background:#000 !important;
color:var(--a11y-contrast-fg) !important;
}

/* Sidebars / tools */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #site-navigation,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #site-tools,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #page-tools,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-portlet,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-portlet-body{
background:#000 !important;
color:var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-70) !important;
}

/* FIX: portlet text stays yellow (titles, non-links) */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-portlet-body{
color:var(--a11y-contrast-fg) !important;
}

/* FIX: portlet links should be blue + underlined */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-portlet-body a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-portlet-body a:visited{
color: var(--a11y-contrast-link) !important;
text-decoration: underline !important;
text-decoration-thickness: 2px;
text-underline-offset: 0.15em;
}

/* CRITICAL FIX: many MW links are <a><span>text</span></a>
The span was inheriting/being forced yellow.
Make link contents inherit the link colour. */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-portlet-body a *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer a *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer-container a *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #footer-list a *{
color: inherit !important;
}

/* A11y UI in contrast */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .a11y-panel,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .a11y-toggle{
background:#000 !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .a11y-btn{
background:#000 !important;
color:var(--a11y-contrast-fg) !important;
border:2px solid var(--a11y-contrast-border-85) !important;
}

/* FIX: “?” help button in contrast */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .a11y-help{
background:#000 !important;
color:var(--a11y-contrast-fg) !important;
border:2px solid var(--a11y-contrast-border-85) !important;
}

/* ------------------------------
Underline links
------------------------------ */
body.a11y-underline-links a{
text-decoration: none !important;
border-bottom: 2px solid currentColor;
padding-bottom: 0.05em;
}
body.a11y-underline-links:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a{
border-bottom-color: var(--a11y-contrast-link) !important;
}

/* ------------------------------
Text spacing
------------------------------ */
body.a11y-spacing-plus{
line-height: 1.8 !important;
letter-spacing: 0.06em !important;
word-spacing: 0.16em !important;
}
body.a11y-spacing-minus{
line-height: 1.45 !important;
letter-spacing: 0.01em !important;
word-spacing: 0.02em !important;
}

/* ------------------------------
Large cursors (wiki-hosted)
------------------------------ */
body.a11y-cursor-white,
body.a11y-cursor-white *{
cursor: url("/index.php/Special:FilePath/large-arrow-white-64.png") 8 8, auto !important;
}
body.a11y-cursor-yellow,
body.a11y-cursor-yellow *{
cursor: url("/index.php/Special:FilePath/large-arrow-yellow-64.png") 8 8, auto !important;
}

/* ------------------------------
Reading ruler
------------------------------ */
#a11y-ruler{
position: fixed;
left: 0;
top: 0;
height: 22px;
width: 100vw;
z-index: 9999;
pointer-events: none;

background: linear-gradient(
to bottom,
var(--a11y-contrast-fg) 0%,
var(--a11y-contrast-fg) 40%,
#000000 40%,
#000000 60%,
var(--a11y-contrast-fg) 60%,
var(--a11y-contrast-fg) 100%
);
}
#a11y-ruler[hidden]{ display:none !important; }

/* =========================================================
MediaWiki: extra HIGH CONTRAST coverage (Timeless + Vector)
Add at END of Gadget CSS so it wins.
========================================================= */

/* TOC */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #toc,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .toc,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #toc * ,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .toc *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-75) !important;
}

/* Category links area */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-normal-catlinks,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-normal-catlinks *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .catlinks,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .catlinks *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-75) !important;
}

/* Wikitables */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) table,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) table *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikitable,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikitable *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-datatable,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-datatable *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-75) !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikitable th,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) table th{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
}

/* Figures/captions */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) figure,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) figure *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-halign-center,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-halign-centre,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-halign-center *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-halign-centre *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
}

/* Thumb frames / image captions */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .thumb,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .thumb *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .thumbinner,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .thumbinner *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .thumbcaption,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .thumbcaption *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-75) !important;
}

/* Code-like blocks */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) pre,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) pre *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) code,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) code *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-75) !important;
}

/* =========================================================
HIGH CONTRAST: Footer (Vector + Timeless)
========================================================= */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer-container{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
background-image: none !important;
border-top: 10px solid var(--a11y-contrast-fg) !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #footer-list,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #footer-list *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #footer-icons,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #footer-icons *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
}

/* FIX: footer links should be blue (not yellow) */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer a:visited{
color: var(--a11y-contrast-link) !important;
text-decoration: underline !important;
text-decoration-thickness: 2px;
text-underline-offset: 0.15em;
}

body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer .mw-portlet,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer .mw-portlet-body{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-75) !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer hr{
border-color: var(--a11y-contrast-fg) !important;
}

/* =========================================================
Underline links: ensure TOC wins
========================================================= */
body.a11y-underline-links #toc a,
body.a11y-underline-links .toc a{
border-bottom-color: currentColor !important;
}
body.a11y-underline-links:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #toc a,
body.a11y-underline-links:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .toc a{
border-bottom-color: var(--a11y-contrast-link) !important;
}

/* =========================================================
HIGH CONTRAST: Header + search + user tools
========================================================= */

/* Base header + content containers */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-header-container,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-content-container{
background: #000 !important;
background-image: none !important;
}

/* Timeless header containers */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-header,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-header-container .ts-inner,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-header-container .mw-body,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-header-container .mw-portlet,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-header-container .mw-portlet-body{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
background-image: none !important;
border-color: var(--a11y-contrast-fg) !important;
}

/* Title */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #p-logo-text #p-banner,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #p-banner.mw-wiki-title,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #p-logo-text .mw-wiki-title{
color: var(--a11y-contrast-fg) !important;
}

/* Strapline */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #bhc-strapline,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .bhc-strapline{
color: var(--a11y-contrast-fg) !important;
}

/* Search box wrappers */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #p-search,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #simpleSearch{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
}

/* Search input (generic) */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #searchInput,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #p-search #searchInput,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #p-search input[type="search"],
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #simpleSearch input[type="search"]{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
caret-color: var(--a11y-contrast-fg) !important;
border: 2px solid var(--a11y-contrast-fg) !important;
box-shadow: none !important;
-webkit-text-fill-color: var(--a11y-contrast-fg) !important; /* Safari/WebKit */
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #searchInput::placeholder,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #simpleSearch input[type="search"]::placeholder{
color: var(--a11y-contrast-border-75) !important;
}

/* Timeless-specific: beat background:#fff !important */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #p-search input[type="search"],
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #p-search #searchInput{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
caret-color: var(--a11y-contrast-fg) !important;
border: 2px solid var(--a11y-contrast-fg) !important;
-webkit-text-fill-color: var(--a11y-contrast-fg) !important;
}

/* Search submit button */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) input#mw-searchButton,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) input#searchButton,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-searchButton{
background-color: #000 !important;
border: 2px solid var(--a11y-contrast-border-85) !important;
filter: none !important;
}

/* Suggestions dropdown */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .suggestions,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .suggestions-results,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .suggestions-special,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .suggestions a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .suggestions-result,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-searchSuggest,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-searchSuggest *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-85) !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .suggestions a:visited{
color: var(--a11y-contrast-fg) !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .suggestions-result-current,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .suggestions a:hover{
background: #111 !important;
}

/* Vector search tabs area */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-search-profile-tabs,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-search-profile-tabs *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-85) !important;
}

/* =========================================================
HIGH CONTRAST: Personal tools (reduce border clutter)
========================================================= */

/* Force yellow text to beat Timeless dark text */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal h2,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal h3,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal .mw-portlet,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal .mw-portlet *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless .mw-portlet-body,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless .mw-portlet-body *{
color: var(--a11y-contrast-fg) !important;
}

/* Force black background to beat Timeless white dropdown */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal .dropdown,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal .mw-portlet-body,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal-inner,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal-inner *{
background: #000 !important;
background-image: none !important;
}

/* Keep ONE border only (container), remove nested borders */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #personal .dropdown,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #personal-inner.dropdown,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #personal .mw-portlet-body{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border: 2px solid var(--a11y-contrast-border-85) !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #personal .mw-portlet-body *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #personal-inner.dropdown *{
background: transparent !important;
color: var(--a11y-contrast-fg) !important;
border: 0 !important;
outline-color: var(--a11y-contrast-fg) !important;
}
/* Leave links to global link rules */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #personal a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #personal a:visited{
background: transparent !important;
border-color: transparent !important;
}

/* =========================================================
HIGH CONTRAST: Timeless containers that fight back
========================================================= */

/* Timeless forces grey content container */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-content-container{
background: #000 !important;
background-image: none !important;
}

/* Timeless header container sometimes white at breakpoints */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-header-container{
background: #000 !important;
background-image: none !important;
}

/* Timeless related-navigation sidebar chunk at ≥1340px */
@media screen and (min-width: 1340px){
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless
#mw-related-navigation .sidebar-chunk{
background: #000 !important;
background-image: none !important;
border-color: var(--a11y-contrast-border-85) !important;
box-shadow: none !important;
}
}

/* mw-content border colour in high-contrast mode */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-content{
border-color: var(--a11y-contrast-fg) !important;
}

/* =========================================================
EDIT MODE: textarea and editOptions
========================================================= */

/* Edit textarea */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #wpTextbox1,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) textarea.mw-editfont-monospace{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
caret-color: var(--a11y-contrast-fg) !important;
border: 2px solid var(--a11y-contrast-fg) !important;
box-shadow: none !important;
-webkit-text-fill-color: var(--a11y-contrast-fg) !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #wpTextbox1::placeholder{
color: var(--a11y-contrast-border-75) !important;
}

/* editOptions bar */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-85) !important;
box-shadow: none !important;
}

/* Don’t override links here — let your global contrast link styling apply */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions a:visited{
background: transparent !important;
border-color: transparent !important;
}

/* Buttons + inputs inside editOptions */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions button,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions input,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions select,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions textarea,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions .mw-ui-button,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions .oo-ui-buttonElement-button{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border: 2px solid var(--a11y-contrast-border-85) !important;
box-shadow: none !important;
-webkit-text-fill-color: var(--a11y-contrast-fg) !important;
}

/* Focus visibility */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions button:focus-visible,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions input:focus-visible,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions select:focus-visible,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions .mw-ui-button:focus-visible,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions .oo-ui-buttonElement-button:focus-visible{
outline: 3px solid var(--a11y-contrast-fg) !important;
outline-offset: 2px !important;
}

/* =========================================================
EDIT MODE: Codex (CDX) message banners (e.g. interface warning)
========================================================= */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .cdx-message,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .cdx-message--block,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .cdx-message--error{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border: 2px solid var(--a11y-contrast-border-85) !important;
box-shadow: none !important;
}
/* Inner content */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .cdx-message__content,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .cdx-message__content *{
background: transparent !important;
color: var(--a11y-contrast-fg) !important;
}
/* Icon */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .cdx-message__icon,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .cdx-message__icon *{
color: var(--a11y-contrast-fg) !important;
fill: var(--a11y-contrast-fg) !important;
}
/* Emphasis */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .cdx-message strong{
color: var(--a11y-contrast-fg) !important;
}

/* FIX: Timeless sidebar chunks stay light at 1100–1339px.
Force black/yellow in high-contrast mode only. */
@media screen and (min-width: 1100px) and (max-width: 1339px){
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-site-navigation .sidebar-chunk,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-related-navigation .sidebar-chunk{
background: #000 !important;
background-image: none !important;
border-color: var(--a11y-contrast-border-85) !important;
box-shadow: none !important;
}

/* If any text inside is still dark, force it yellow */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-site-navigation .sidebar-chunk *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-related-navigation .sidebar-chunk *{
color: var(--a11y-contrast-fg) !important;
}

/* …but if it’s a LINK (or inside a link), keep it blue */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-site-navigation .sidebar-chunk a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-site-navigation .sidebar-chunk a:visited,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-related-navigation .sidebar-chunk a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-related-navigation .sidebar-chunk a:visited{
color: var(--a11y-contrast-link) !important;
text-decoration: underline !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-site-navigation .sidebar-chunk a *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-related-navigation .sidebar-chunk a *{
color: inherit !important;
}
}

/* FIX (stronger): Timeless sidebar chunks at 1100–1339px still light.
Must beat the skin rule in the same breakpoint. */
@media screen and (min-width: 1100px) and (max-width: 1339px){
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-site-navigation .sidebar-chunk,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-related-navigation .sidebar-chunk{
background: #000 !important;
background-image: none !important;
border-color: var(--a11y-contrast-border-85) !important;
box-shadow: none !important;
}

body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-site-navigation .sidebar-chunk *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-related-navigation .sidebar-chunk *{
color: var(--a11y-contrast-fg) !important;
}

/* …but links stay blue */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-site-navigation .sidebar-chunk a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-site-navigation .sidebar-chunk a:visited,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-related-navigation .sidebar-chunk a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-related-navigation .sidebar-chunk a:visited{
color: var(--a11y-contrast-link) !important;
text-decoration: underline !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-site-navigation .sidebar-chunk a *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-related-navigation .sidebar-chunk a *{
color: inherit !important;
}
}

/* =========================================================
EMERGENCY: ensure the accessibility toggle is visible
(keep at VERY END)
========================================================= */
#a11y-toggle.a11y-toggle{
position: fixed !important;
right: 16px !important;
bottom: 16px !important;

display: inline-flex !important;
visibility: visible !important;
opacity: 1 !important;

z-index: 2147483647 !important;
pointer-events: auto !important;

transform: none !important;
}
#a11y-toggle.a11y-toggle svg{
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}

/* =========================================================
HIGH CONTRAST: Scrollbars (page + editor)
Supports: Chrome/Safari/Opera (WebKit) + Firefox
Scope: ONLY when body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) is active
========================================================= */

/* ---------- Firefox (Gecko) ---------- */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white),
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) *{
scrollbar-color: var(--a11y-contrast-fg) #000; /* thumb / track */
scrollbar-width: auto; /* or 'thin' if you prefer */
}

/* ---------- Chrome / Safari / Opera (WebKit/Blink) ---------- */
/* Page scrollbars */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white)::-webkit-scrollbar{
width: 14px;
height: 14px; /* horizontal */
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white)::-webkit-scrollbar-track{
background: #000;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white)::-webkit-scrollbar-thumb{
background: var(--a11y-contrast-fg);
border: 3px solid #000; /* creates separation from track */
border-radius: 10px;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white)::-webkit-scrollbar-thumb:hover{
background: var(--a11y-contrast-fg-hover); /* slightly lighter yellow on hover */
}

/* Editor + common scrollable containers (safety net) */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) textarea,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #wpTextbox1,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui *{
scrollbar-color: var(--a11y-contrast-fg) #000; /* Firefox for these elements too */
}

/* FIX: WikiEditor tool-select dropdown text becomes unreadable
because it inherits yellow from body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white). */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui-toolbar .tool.tool-select,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui-toolbar .tool.tool-select *{
color: #222 !important; /* readable on the tool-select's light background */
}

/* FIX: WikiEditor toolbar tabs readability in high-contrast mode */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui-toolbar .tabs a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui-toolbar .tabs a:visited{
color: #0645ad !important; /* MediaWiki blue */
}

/* Active tab: keep it dark for readability on light background */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui-toolbar .tabs span.tab a.current,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui-toolbar .tabs span.tab a.current:visited{
color: #222 !important;
}

body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) textarea::-webkit-scrollbar,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #wpTextbox1::-webkit-scrollbar,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui::-webkit-scrollbar{
width: 14px;
height: 14px;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) textarea::-webkit-scrollbar-track,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #wpTextbox1::-webkit-scrollbar-track,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui::-webkit-scrollbar-track{
background: #000;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) textarea::-webkit-scrollbar-thumb,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #wpTextbox1::-webkit-scrollbar-thumb,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui::-webkit-scrollbar-thumb{
background: var(--a11y-contrast-fg);
border: 3px solid #000;
border-radius: 10px;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) textarea::-webkit-scrollbar-thumb:hover,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #wpTextbox1::-webkit-scrollbar-thumb:hover,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui::-webkit-scrollbar-thumb:hover{
background: var(--a11y-contrast-fg-hover);
}

/* Try to target root scrolling element where supported */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) html{
scrollbar-color: var(--a11y-contrast-fg) #000;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) html::-webkit-scrollbar{
width: 14px;
height: 14px;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) html::-webkit-scrollbar-track{
background: #000;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) html::-webkit-scrollbar-thumb{
background: var(--a11y-contrast-fg);
border: 3px solid #000;
border-radius: 10px;
}

/* =========================================================
FINAL OVERRIDE (brute force):
High-contrast links must be blue + underlined everywhere,
including link text wrapped in spans inside portlets/footer.
PUT THIS AT THE VERY END OF THE FILE.
========================================================= */

body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a:visited{
color: var(--a11y-contrast-link) !important;
text-decoration: underline !important;
text-decoration-thickness: 2px !important;
text-underline-offset: 0.15em !important;
}

/* Critical: if link text is wrapped (e.g. <a><span>Text</span></a>),
force ALL children inside links to inherit the link colour. */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a:visited *{
color: inherit !important;
}

/* Extra specificity for the problem zones (beats Timeless + portlet-body * rules) */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless .mw-portlet-body a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless .mw-portlet-body a:visited,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-footer a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-footer a:visited,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-footer-container a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-footer-container a:visited{
color: var(--a11y-contrast-link) !important;
text-decoration: underline !important;
}

body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless .mw-portlet-body a *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless .mw-portlet-body a:visited *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-footer a *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-footer a:visited *{
color: inherit !important;
}

/* =========================================================
FINAL FIX: #personal (user tools) links
The portlet-body * rule forces yellow.
Override ONLY for links and their contents.
========================================================= */

body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal a:visited{
color: var(--a11y-contrast-link) !important;
text-decoration: underline !important;
}

body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal a *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal a:visited *{
color: inherit !important;
}

/* =========================================================
FINAL OVERRIDE (authoritative)
In contrast modes, ALL links should match the contrast text colour.
This must win against Timeless/Vector skin link rules (logged in/out).
Keep at VERY END of the gadget CSS.
========================================================= */
body:is(.a11y-contrast, .a11y-contrast-yellow, .a11y-contrast-white) a,
body:is(.a11y-contrast, .a11y-contrast-yellow, .a11y-contrast-white) a:visited,
body:is(.a11y-contrast, .a11y-contrast-yellow, .a11y-contrast-white) a:active{
color: var(--a11y-contrast-fg) !important;
text-decoration-color: var(--a11y-contrast-fg) !important;
text-decoration: underline !important;
text-decoration-thickness: 2px;
text-underline-offset: 0.15em;
}

/* Hover/focus: slightly stronger underline (no colour change) */
body:is(.a11y-contrast, .a11y-contrast-yellow, .a11y-contrast-white) a:hover,
body:is(.a11y-contrast, .a11y-contrast-yellow, .a11y-contrast-white) a:focus-visible{
text-decoration-thickness: 3px;
}

/* Any wrapped spans inside links must inherit the link colour (Timeless uses <a><span>…) */
body:is(.a11y-contrast, .a11y-contrast-yellow, .a11y-contrast-white) a *,
body:is(.a11y-contrast, .a11y-contrast-yellow, .a11y-contrast-white).skin-timeless a *{
color: inherit !important;
}

/* Extra belt-and-braces for Timeless logged-in personal tools + portlets */
body:is(.a11y-contrast, .a11y-contrast-yellow, .a11y-contrast-white).skin-timeless #personal a,
body:is(.a11y-contrast, .a11y-contrast-yellow, .a11y-contrast-white).skin-timeless .mw-portlet-body a{
color: var(--a11y-contrast-fg) !important;
}

MediaWiki:Timeless.css

2026-01-29T09:33:24Z

Steve:

MediaWiki:Gadget-bhc-accessibility.css

2026-01-29T09:17:14Z

Steve:

/*
⚠️ Do not reorder rules below this line — contrast overrides depend on cascade order.
*/

/* =========================================================
BHC Accessibility Gadget – MediaWiki / Timeless
========================================================= */

/* ---------------------------------------------------------
Variables
--------------------------------------------------------- */
:root{
--a11y-bg: #111827;
--a11y-border: #374151;
--a11y-fg: #ffffff;
--a11y-focus: #FFBF47;
--a11y-link-underline: #3366CC; /* MediaWiki link blue */
--a11y-menu-width: 340px;
}

/* Timeless: stop skin CSS shrinking the accessibility icon */
body.skin-timeless .a11y-toggle{
font-size: 16px !important;
line-height: 1 !important;
}
body.skin-timeless .a11y-toggle svg{
display: block !important;
width: 36px !important;
height: 36px !important;
min-width: 36px !important;
min-height: 36px !important;
max-width: none !important;
max-height: none !important;

/* If the glyph still looks small, keep this: */
transform: scale(1.15) !important;
transform-origin: 50% 50% !important;
}
/* Make sure fill isn’t being altered by skin rules */
body.skin-timeless .a11y-toggle svg path{
fill: currentColor !important;
}

/* ---------------------------------------------------------
Skip links (appear when focused)
--------------------------------------------------------- */
.skip-link{
position: absolute;
left: 12px;
top: 12px;
z-index: 11000;

padding: 10px 14px;
border-radius: 8px;

background: #111827;
color: #fff;
text-decoration: none;

top: -9999px; /* hidden off-screen by default */
transition: none; /* no animation needed when hidden */

border: 2px solid var(--a11y-focus);
}
.skip-link:focus,
.skip-link:focus-visible{
top: 12px; /* bring into view when focused */
outline: none;
z-index: 11001;
}

body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .skip-link{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-fg) !important;
}

/* Stack multiple skip links neatly when tabbing through them */
#a11y-skip-content:focus,
#a11y-skip-content:focus-visible{ top: 56px; }

#a11y-skip-nav:focus,
#a11y-skip-nav:focus-visible{ top: 100px; }

#a11y-skip-search:focus,
#a11y-skip-search:focus-visible{ top: 144px; }

/* ---------------------------------------------------------
Floating accessibility toggle
--------------------------------------------------------- */
.a11y-toggle{
position: fixed;
right: 16px;
bottom: 16px;
z-index: 10001;

width: 56px;
height: 56px;
border-radius: 50%;

background: #005FCC;
border: 2px solid #ffffff;
color: #ffffff;

display: inline-flex;
align-items: center;
justify-content: center;

box-shadow: 0 10px 24px rgba(0,0,0,0.25);
cursor: pointer;
}
.a11y-toggle:hover{ background:#0047A6; }
.a11y-toggle:focus-visible{
outline: 3px solid var(--a11y-focus);
outline-offset: 3px;
}
.a11y-toggle svg{
width: 44px;
height: 44px;
fill: currentColor;
}

/* ---------------------------------------------------------
Panel
--------------------------------------------------------- */
/* Compact current-settings line (display-only) */
.a11y-status{
font-size: 13px;
line-height: 1.25;
margin: 6px 0 8px;
opacity: 0.95;
}

.a11y-panel{
position: fixed;
right: 14px;
bottom: 76px;
z-index: 10000;

width: var(--a11y-menu-width);
max-width: calc(100vw - 28px);

background: var(--a11y-bg);
border: 1px solid var(--a11y-border);
color: var(--a11y-fg);
border-radius: 16px;
padding: 12px;

box-shadow: 0 14px 40px rgba(0,0,0,0.28);
}
.a11y-panel[hidden]{ display:none !important; }

/* Header */
.a11y-head{
display:flex;
align-items:center;
justify-content: space-between;
margin-bottom: 10px;
}
.a11y-head h2{
font-size: 16px;
margin: 0;
}
.a11y-help{
width: 28px;
height: 28px;
border-radius: 50%;
background: #fff;
color: #111827;
font-weight: 900;
text-decoration: none;
display:flex;
align-items:center;
justify-content:center;
}
.a11y-help:focus-visible{
outline: 3px solid var(--a11y-focus);
outline-offset: 2px;
}

/* Buttons */
.a11y-row{
display:flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 10px;
}
.a11y-btn{
border: 1px solid #D1D5DB;
background:#fff;
color:#111827;
padding: 8px 10px;
border-radius: 999px;
font-size: 14px;
font-weight: 800;
cursor: pointer;
}
.a11y-btn[aria-pressed="true"]{
background:#111827;
color:#fff;
}
.a11y-btn:focus-visible{
outline: 3px solid var(--a11y-focus);
outline-offset: 2px;
}

.a11y-hint{
font-size: 13px;
color: var(--a11y-fg);
line-height: 1.4;
}

/* Screen reader only */
.a11y-sr{
position:absolute;
width:1px;
height:1px;
overflow:hidden;
clip:rect(0,0,0,0);
}

/* =========================================================
Feature classes
========================================================= */

/* ------------------------------
High contrast (black/yellow/blue)
------------------------------ */

/* ------------------------------
High contrast presets
- Use ONE of these on <body>:
- a11y-contrast-yellow (yellow on black)
- a11y-contrast-white (white on black)
- Back-compat: a11y-contrast behaves as yellow on black
------------------------------ */
body.a11y-contrast,
body.a11y-contrast-yellow{
--a11y-contrast-fg: #FFD400;
--a11y-contrast-fg-hover: #FFE066;
--a11y-contrast-link: var(--a11y-contrast-fg); /* same as text */
--a11y-contrast-border-70: rgba(255,212,0,.7);
--a11y-contrast-border-75: rgba(255,212,0,.75);
--a11y-contrast-border-85: rgba(255,212,0,.85);
}
body.a11y-contrast-white{
--a11y-contrast-fg: #FFFFFF;
--a11y-contrast-fg-hover: #E6E6E6;
--a11y-contrast-link: #9ECBFF; /* lighter link blue on black */
--a11y-contrast-border-70: rgba(255,255,255,.7);
--a11y-contrast-border-75: rgba(255,255,255,.75);
--a11y-contrast-border-85: rgba(255,255,255,.85);
}

body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white){
background:#000 !important;
color: var(--a11y-contrast-fg) !important;

/* Gadget UI variables in contrast mode */
--a11y-bg: #000;
--a11y-border: var(--a11y-contrast-border-70);
--a11y-fg: var(--a11y-contrast-fg);
--a11y-focus: var(--a11y-contrast-fg);
--a11y-link-underline: var(--a11y-contrast-link);
}

/* =========================================================
HIGH CONTRAST: Links must be visually distinct
Blue + underline to meet WCAG 1.4.1
========================================================= */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a:visited{
color: var(--bhc-link, #005DB3) !important;
text-decoration: underline !important;
text-decoration-thickness: 2px;
text-underline-offset: 0.15em;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a:hover,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a:focus-visible{
text-decoration-thickness: 3px;
}

/* Headings */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) h1,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) h2,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) h3,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) h4,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) h5,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) h6{
color:var(--a11y-contrast-fg) !important;
border-color:var(--a11y-contrast-fg) !important;
}

/* Main containers (Timeless needs explicit coverage) */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-wrapper,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-content-container,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-content,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-body,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-parser-output{
background:#000 !important;
color:var(--a11y-contrast-fg) !important;
}

/* Sidebars / tools */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #site-navigation,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #site-tools,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #page-tools,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-portlet,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-portlet-body{
background:#000 !important;
color:var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-70) !important;
}

/* FIX: portlet text stays yellow (titles, non-links) */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-portlet-body{
color:var(--a11y-contrast-fg) !important;
}

/* FIX: portlet links should be blue + underlined */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-portlet-body a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-portlet-body a:visited{
color: #3366CC !important;
text-decoration: underline !important;
text-decoration-thickness: 2px;
text-underline-offset: 0.15em;
}

/* CRITICAL FIX: many MW links are <a><span>text</span></a>
The span was inheriting/being forced yellow.
Make link contents inherit the link colour. */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-portlet-body a *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer a *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer-container a *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #footer-list a *{
color: inherit !important;
}

/* A11y UI in contrast */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .a11y-panel,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .a11y-toggle{
background:#000 !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .a11y-btn{
background:#000 !important;
color:var(--a11y-contrast-fg) !important;
border:2px solid var(--a11y-contrast-border-85) !important;
}

/* FIX: “?” help button in contrast */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .a11y-help{
background:#000 !important;
color:var(--a11y-contrast-fg) !important;
border:2px solid var(--a11y-contrast-border-85) !important;
}

/* ------------------------------
Underline links
------------------------------ */
body.a11y-underline-links a{
text-decoration: none !important;
border-bottom: 2px solid var(--a11y-link-underline);
padding-bottom: 0.05em;
}
body.a11y-underline-links:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a{
border-bottom-color: #3366CC !important;
}

/* ------------------------------
Text spacing
------------------------------ */
body.a11y-spacing-plus{
line-height: 1.8 !important;
letter-spacing: 0.06em !important;
word-spacing: 0.16em !important;
}
body.a11y-spacing-minus{
line-height: 1.45 !important;
letter-spacing: 0.01em !important;
word-spacing: 0.02em !important;
}

/* ------------------------------
Large cursors (wiki-hosted)
------------------------------ */
body.a11y-cursor-white,
body.a11y-cursor-white *{
cursor: url("/index.php/Special:FilePath/large-arrow-white-64.png") 8 8, auto !important;
}
body.a11y-cursor-yellow,
body.a11y-cursor-yellow *{
cursor: url("/index.php/Special:FilePath/large-arrow-yellow-64.png") 8 8, auto !important;
}

/* ------------------------------
Reading ruler
------------------------------ */
#a11y-ruler{
position: fixed;
left: 0;
top: 0;
height: 22px;
width: 100vw;
z-index: 9999;
pointer-events: none;

background: linear-gradient(
to bottom,
var(--a11y-contrast-fg) 0%,
var(--a11y-contrast-fg) 40%,
#000000 40%,
#000000 60%,
var(--a11y-contrast-fg) 60%,
var(--a11y-contrast-fg) 100%
);
}
#a11y-ruler[hidden]{ display:none !important; }

/* =========================================================
MediaWiki: extra HIGH CONTRAST coverage (Timeless + Vector)
Add at END of Gadget CSS so it wins.
========================================================= */

/* TOC */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #toc,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .toc,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #toc * ,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .toc *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-75) !important;
}

/* Category links area */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-normal-catlinks,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-normal-catlinks *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .catlinks,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .catlinks *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-75) !important;
}

/* Wikitables */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) table,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) table *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikitable,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikitable *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-datatable,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-datatable *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-75) !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikitable th,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) table th{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
}

/* Figures/captions */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) figure,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) figure *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-halign-center,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-halign-centre,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-halign-center *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-halign-centre *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
}

/* Thumb frames / image captions */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .thumb,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .thumb *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .thumbinner,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .thumbinner *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .thumbcaption,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .thumbcaption *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-75) !important;
}

/* Code-like blocks */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) pre,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) pre *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) code,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) code *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-75) !important;
}

/* =========================================================
HIGH CONTRAST: Footer (Vector + Timeless)
========================================================= */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer-container{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
background-image: none !important;
border-top: 10px solid var(--a11y-contrast-fg) !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #footer-list,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #footer-list *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #footer-icons,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #footer-icons *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
}

/* FIX: footer links should be blue (not yellow) */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer a:visited{
color: #3366CC !important;
text-decoration: underline !important;
text-decoration-thickness: 2px;
text-underline-offset: 0.15em;
}

body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer .mw-portlet,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer .mw-portlet-body{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-75) !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer hr{
border-color: var(--a11y-contrast-fg) !important;
}

/* =========================================================
Underline links: ensure TOC wins
========================================================= */
body.a11y-underline-links #toc a,
body.a11y-underline-links .toc a{
border-bottom-color: var(--a11y-link-underline) !important;
}
body.a11y-underline-links:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #toc a,
body.a11y-underline-links:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .toc a{
border-bottom-color: #3366CC !important;
}

/* =========================================================
HIGH CONTRAST: Header + search + user tools
========================================================= */

/* Base header + content containers */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-header-container,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-content-container{
background: #000 !important;
background-image: none !important;
}

/* Timeless header containers */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-header,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-header-container .ts-inner,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-header-container .mw-body,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-header-container .mw-portlet,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-header-container .mw-portlet-body{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
background-image: none !important;
border-color: var(--a11y-contrast-fg) !important;
}

/* Title */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #p-logo-text #p-banner,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #p-banner.mw-wiki-title,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #p-logo-text .mw-wiki-title{
color: var(--a11y-contrast-fg) !important;
}

/* Strapline */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #bhc-strapline,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .bhc-strapline{
color: var(--a11y-contrast-fg) !important;
}

/* Search box wrappers */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #p-search,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #simpleSearch{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
}

/* Search input (generic) */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #searchInput,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #p-search #searchInput,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #p-search input[type="search"],
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #simpleSearch input[type="search"]{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
caret-color: var(--a11y-contrast-fg) !important;
border: 2px solid var(--a11y-contrast-fg) !important;
box-shadow: none !important;
-webkit-text-fill-color: var(--a11y-contrast-fg) !important; /* Safari/WebKit */
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #searchInput::placeholder,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #simpleSearch input[type="search"]::placeholder{
color: var(--a11y-contrast-border-75) !important;
}

/* Timeless-specific: beat background:#fff !important */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #p-search input[type="search"],
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #p-search #searchInput{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
caret-color: var(--a11y-contrast-fg) !important;
border: 2px solid var(--a11y-contrast-fg) !important;
-webkit-text-fill-color: var(--a11y-contrast-fg) !important;
}

/* Search submit button */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) input#mw-searchButton,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) input#searchButton,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-searchButton{
background-color: #000 !important;
border: 2px solid var(--a11y-contrast-border-85) !important;
filter: none !important;
}

/* Suggestions dropdown */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .suggestions,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .suggestions-results,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .suggestions-special,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .suggestions a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .suggestions-result,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-searchSuggest,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-searchSuggest *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-85) !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .suggestions a:visited{
color: var(--a11y-contrast-fg) !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .suggestions-result-current,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .suggestions a:hover{
background: #111 !important;
}

/* Vector search tabs area */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-search-profile-tabs,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-search-profile-tabs *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-85) !important;
}

/* =========================================================
HIGH CONTRAST: Personal tools (reduce border clutter)
========================================================= */

/* Force yellow text to beat Timeless dark text */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal h2,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal h3,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal .mw-portlet,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal .mw-portlet *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless .mw-portlet-body,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless .mw-portlet-body *{
color: var(--a11y-contrast-fg) !important;
}

/* Force black background to beat Timeless white dropdown */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal .dropdown,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal .mw-portlet-body,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal-inner,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal-inner *{
background: #000 !important;
background-image: none !important;
}

/* Keep ONE border only (container), remove nested borders */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #personal .dropdown,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #personal-inner.dropdown,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #personal .mw-portlet-body{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border: 2px solid var(--a11y-contrast-border-85) !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #personal .mw-portlet-body *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #personal-inner.dropdown *{
background: transparent !important;
color: var(--a11y-contrast-fg) !important;
border: 0 !important;
outline-color: var(--a11y-contrast-fg) !important;
}
/* Leave links to global link rules */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #personal a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #personal a:visited{
background: transparent !important;
border-color: transparent !important;
}

/* =========================================================
HIGH CONTRAST: Timeless containers that fight back
========================================================= */

/* Timeless forces grey content container */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-content-container{
background: #000 !important;
background-image: none !important;
}

/* Timeless header container sometimes white at breakpoints */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-header-container{
background: #000 !important;
background-image: none !important;
}

/* Timeless related-navigation sidebar chunk at ≥1340px */
@media screen and (min-width: 1340px){
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless
#mw-related-navigation .sidebar-chunk{
background: #000 !important;
background-image: none !important;
border-color: var(--a11y-contrast-border-85) !important;
box-shadow: none !important;
}
}

/* mw-content border colour in high-contrast mode */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-content{
border-color: var(--a11y-contrast-fg) !important;
}

/* =========================================================
EDIT MODE: textarea and editOptions
========================================================= */

/* Edit textarea */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #wpTextbox1,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) textarea.mw-editfont-monospace{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
caret-color: var(--a11y-contrast-fg) !important;
border: 2px solid var(--a11y-contrast-fg) !important;
box-shadow: none !important;
-webkit-text-fill-color: var(--a11y-contrast-fg) !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #wpTextbox1::placeholder{
color: var(--a11y-contrast-border-75) !important;
}

/* editOptions bar */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-85) !important;
box-shadow: none !important;
}

/* Don’t override links here — let your global contrast link styling apply */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions a:visited{
background: transparent !important;
border-color: transparent !important;
}

/* Buttons + inputs inside editOptions */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions button,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions input,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions select,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions textarea,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions .mw-ui-button,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions .oo-ui-buttonElement-button{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border: 2px solid var(--a11y-contrast-border-85) !important;
box-shadow: none !important;
-webkit-text-fill-color: var(--a11y-contrast-fg) !important;
}

/* Focus visibility */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions button:focus-visible,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions input:focus-visible,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions select:focus-visible,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions .mw-ui-button:focus-visible,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions .oo-ui-buttonElement-button:focus-visible{
outline: 3px solid var(--a11y-contrast-fg) !important;
outline-offset: 2px !important;
}

/* =========================================================
EDIT MODE: Codex (CDX) message banners (e.g. interface warning)
========================================================= */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .cdx-message,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .cdx-message--block,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .cdx-message--error{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border: 2px solid var(--a11y-contrast-border-85) !important;
box-shadow: none !important;
}
/* Inner content */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .cdx-message__content,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .cdx-message__content *{
background: transparent !important;
color: var(--a11y-contrast-fg) !important;
}
/* Icon */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .cdx-message__icon,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .cdx-message__icon *{
color: var(--a11y-contrast-fg) !important;
fill: var(--a11y-contrast-fg) !important;
}
/* Emphasis */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .cdx-message strong{
color: var(--a11y-contrast-fg) !important;
}

/* FIX: Timeless sidebar chunks stay light at 1100–1339px.
Force black/yellow in high-contrast mode only. */
@media screen and (min-width: 1100px) and (max-width: 1339px){
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-site-navigation .sidebar-chunk,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-related-navigation .sidebar-chunk{
background: #000 !important;
background-image: none !important;
border-color: var(--a11y-contrast-border-85) !important;
box-shadow: none !important;
}

/* If any text inside is still dark, force it yellow */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-site-navigation .sidebar-chunk *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-related-navigation .sidebar-chunk *{
color: var(--a11y-contrast-fg) !important;
}

/* …but if it’s a LINK (or inside a link), keep it blue */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-site-navigation .sidebar-chunk a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-site-navigation .sidebar-chunk a:visited,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-related-navigation .sidebar-chunk a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-related-navigation .sidebar-chunk a:visited{
color: #3366CC !important;
text-decoration: underline !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-site-navigation .sidebar-chunk a *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-related-navigation .sidebar-chunk a *{
color: inherit !important;
}
}

/* FIX (stronger): Timeless sidebar chunks at 1100–1339px still light.
Must beat the skin rule in the same breakpoint. */
@media screen and (min-width: 1100px) and (max-width: 1339px){
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-site-navigation .sidebar-chunk,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-related-navigation .sidebar-chunk{
background: #000 !important;
background-image: none !important;
border-color: var(--a11y-contrast-border-85) !important;
box-shadow: none !important;
}

body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-site-navigation .sidebar-chunk *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-related-navigation .sidebar-chunk *{
color: var(--a11y-contrast-fg) !important;
}

/* …but links stay blue */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-site-navigation .sidebar-chunk a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-site-navigation .sidebar-chunk a:visited,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-related-navigation .sidebar-chunk a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-related-navigation .sidebar-chunk a:visited{
color: #3366CC !important;
text-decoration: underline !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-site-navigation .sidebar-chunk a *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-related-navigation .sidebar-chunk a *{
color: inherit !important;
}
}

/* =========================================================
EMERGENCY: ensure the accessibility toggle is visible
(keep at VERY END)
========================================================= */
#a11y-toggle.a11y-toggle{
position: fixed !important;
right: 16px !important;
bottom: 16px !important;

display: inline-flex !important;
visibility: visible !important;
opacity: 1 !important;

z-index: 2147483647 !important;
pointer-events: auto !important;

transform: none !important;
}
#a11y-toggle.a11y-toggle svg{
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}

/* =========================================================
HIGH CONTRAST: Scrollbars (page + editor)
Supports: Chrome/Safari/Opera (WebKit) + Firefox
Scope: ONLY when body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) is active
========================================================= */

/* ---------- Firefox (Gecko) ---------- */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white),
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) *{
scrollbar-color: var(--a11y-contrast-fg) #000; /* thumb / track */
scrollbar-width: auto; /* or 'thin' if you prefer */
}

/* ---------- Chrome / Safari / Opera (WebKit/Blink) ---------- */
/* Page scrollbars */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white)::-webkit-scrollbar{
width: 14px;
height: 14px; /* horizontal */
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white)::-webkit-scrollbar-track{
background: #000;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white)::-webkit-scrollbar-thumb{
background: var(--a11y-contrast-fg);
border: 3px solid #000; /* creates separation from track */
border-radius: 10px;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white)::-webkit-scrollbar-thumb:hover{
background: var(--a11y-contrast-fg-hover); /* slightly lighter yellow on hover */
}

/* Editor + common scrollable containers (safety net) */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) textarea,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #wpTextbox1,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui *{
scrollbar-color: var(--a11y-contrast-fg) #000; /* Firefox for these elements too */
}

/* FIX: WikiEditor tool-select dropdown text becomes unreadable
because it inherits yellow from body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white). */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui-toolbar .tool.tool-select,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui-toolbar .tool.tool-select *{
color: #222 !important; /* readable on the tool-select's light background */
}

/* FIX: WikiEditor toolbar tabs readability in high-contrast mode */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui-toolbar .tabs a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui-toolbar .tabs a:visited{
color: #0645ad !important; /* MediaWiki blue */
}

/* Active tab: keep it dark for readability on light background */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui-toolbar .tabs span.tab a.current,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui-toolbar .tabs span.tab a.current:visited{
color: #222 !important;
}

body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) textarea::-webkit-scrollbar,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #wpTextbox1::-webkit-scrollbar,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui::-webkit-scrollbar{
width: 14px;
height: 14px;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) textarea::-webkit-scrollbar-track,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #wpTextbox1::-webkit-scrollbar-track,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui::-webkit-scrollbar-track{
background: #000;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) textarea::-webkit-scrollbar-thumb,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #wpTextbox1::-webkit-scrollbar-thumb,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui::-webkit-scrollbar-thumb{
background: var(--a11y-contrast-fg);
border: 3px solid #000;
border-radius: 10px;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) textarea::-webkit-scrollbar-thumb:hover,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #wpTextbox1::-webkit-scrollbar-thumb:hover,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui::-webkit-scrollbar-thumb:hover{
background: var(--a11y-contrast-fg-hover);
}

/* Try to target root scrolling element where supported */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) html{
scrollbar-color: var(--a11y-contrast-fg) #000;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) html::-webkit-scrollbar{
width: 14px;
height: 14px;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) html::-webkit-scrollbar-track{
background: #000;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) html::-webkit-scrollbar-thumb{
background: var(--a11y-contrast-fg);
border: 3px solid #000;
border-radius: 10px;
}

/* =========================================================
FINAL OVERRIDE (brute force):
High-contrast links must be blue + underlined everywhere,
including link text wrapped in spans inside portlets/footer.
PUT THIS AT THE VERY END OF THE FILE.
========================================================= */

body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a:visited{
color: #3366CC !important;
text-decoration: underline !important;
text-decoration-thickness: 2px !important;
text-underline-offset: 0.15em !important;
}

/* Critical: if link text is wrapped (e.g. <a><span>Text</span></a>),
force ALL children inside links to inherit the link colour. */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a:visited *{
color: inherit !important;
}

/* Extra specificity for the problem zones (beats Timeless + portlet-body * rules) */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless .mw-portlet-body a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless .mw-portlet-body a:visited,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-footer a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-footer a:visited,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-footer-container a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-footer-container a:visited{
color: #3366CC !important;
text-decoration: underline !important;
}

body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless .mw-portlet-body a *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless .mw-portlet-body a:visited *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-footer a *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-footer a:visited *{
color: inherit !important;
}

/* =========================================================
FINAL FIX: #personal (user tools) links
The portlet-body * rule forces yellow.
Override ONLY for links and their contents.
========================================================= */

body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal a:visited{
color: #3366CC !important;
text-decoration: underline !important;
}

body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal a *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal a:visited *{
color: inherit !important;
}

/* =========================================================
HIGH CONTRAST: Link colour = text colour everywhere
Rationale: avoids blue-on-yellow/white concerns; underline carries affordance.
This block is intentionally near the end to beat skin rules.
========================================================= */
body.a11y-contrast a,
body.a11y-contrast a:visited{
color: var(--a11y-contrast-fg) !important;
text-decoration: underline !important;
text-decoration-thickness: 2px;
text-underline-offset: 0.15em;
}
body.a11y-contrast a:hover,
body.a11y-contrast a:focus-visible{
text-decoration-thickness: 3px;
}

/* Ensure link text wrapped in spans inherits */
body.a11y-contrast a *{
color: inherit !important;
}

/* Explicitly beat Timeless footer + portlet colours */
body.a11y-contrast #mw-footer a,
body.a11y-contrast #mw-footer a:visited,
body.a11y-contrast .mw-portlet-body a,
body.a11y-contrast .mw-portlet-body a:visited{
color: var(--a11y-contrast-fg) !important;
}

/* =========================================================
FINAL OVERRIDE: Links inherit text colour everywhere
(beats Timeless sidebars, portlets, footer, toolbars)
========================================================= */

body.a11y-contrast a,
body.a11y-contrast a:visited{
color: var(--a11y-fg) !important;
text-decoration: underline !important;
text-decoration-thickness: 2px;
text-underline-offset: 0.15em;
}

/* Kill span-level overrides inside links */
body.a11y-contrast a *,
body.a11y-contrast a:visited *{
color: inherit !important;
}

/* =========================================================
FINAL OVERRIDE (LOGGED IN + TIMELESS):
Force links to inherit the current contrast text colour.
Put this at the VERY END of the gadget CSS.
========================================================= */

body.a11y-contrast.skin-timeless a,
body.a11y-contrast.skin-timeless a:visited,
body.a11y-contrast.mw-userloggedin a,
body.a11y-contrast.mw-userloggedin a:visited{
color: var(--a11y-fg) !important;
text-decoration: underline !important;
text-decoration-thickness: 2px;
text-underline-offset: 0.15em;
}

/* Timeless often wraps link labels in <span> etc. */
body.a11y-contrast.skin-timeless a *,
body.a11y-contrast.skin-timeless a:visited *,
body.a11y-contrast.mw-userloggedin a *,
body.a11y-contrast.mw-userloggedin a:visited *{
color: inherit !important;
}

MediaWiki:Gadget-bhc-accessibility.css

2026-01-29T09:05:02Z

Steve: Final change to using variables.

/*
⚠️ Do not reorder rules below this line — contrast overrides depend on cascade order.
*/

/* =========================================================
BHC Accessibility Gadget – MediaWiki / Timeless
========================================================= */

/* ---------------------------------------------------------
Variables
--------------------------------------------------------- */
:root{
--a11y-bg: #111827;
--a11y-border: #374151;
--a11y-fg: #ffffff;
--a11y-focus: #FFBF47;
--a11y-link-underline: #3366CC; /* MediaWiki link blue */
--a11y-menu-width: 340px;
}

/* Timeless: stop skin CSS shrinking the accessibility icon */
body.skin-timeless .a11y-toggle{
font-size: 16px !important;
line-height: 1 !important;
}
body.skin-timeless .a11y-toggle svg{
display: block !important;
width: 36px !important;
height: 36px !important;
min-width: 36px !important;
min-height: 36px !important;
max-width: none !important;
max-height: none !important;

/* If the glyph still looks small, keep this: */
transform: scale(1.15) !important;
transform-origin: 50% 50% !important;
}
/* Make sure fill isn’t being altered by skin rules */
body.skin-timeless .a11y-toggle svg path{
fill: currentColor !important;
}

/* ---------------------------------------------------------
Skip links (appear when focused)
--------------------------------------------------------- */
.skip-link{
position: absolute;
left: 12px;
top: 12px;
z-index: 11000;

padding: 10px 14px;
border-radius: 8px;

background: #111827;
color: #fff;
text-decoration: none;

top: -9999px; /* hidden off-screen by default */
transition: none; /* no animation needed when hidden */

border: 2px solid var(--a11y-focus);
}
.skip-link:focus,
.skip-link:focus-visible{
top: 12px; /* bring into view when focused */
outline: none;
z-index: 11001;
}

body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .skip-link{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-fg) !important;
}

/* Stack multiple skip links neatly when tabbing through them */
#a11y-skip-content:focus,
#a11y-skip-content:focus-visible{ top: 56px; }

#a11y-skip-nav:focus,
#a11y-skip-nav:focus-visible{ top: 100px; }

#a11y-skip-search:focus,
#a11y-skip-search:focus-visible{ top: 144px; }

/* ---------------------------------------------------------
Floating accessibility toggle
--------------------------------------------------------- */
.a11y-toggle{
position: fixed;
right: 16px;
bottom: 16px;
z-index: 10001;

width: 56px;
height: 56px;
border-radius: 50%;

background: #005FCC;
border: 2px solid #ffffff;
color: #ffffff;

display: inline-flex;
align-items: center;
justify-content: center;

box-shadow: 0 10px 24px rgba(0,0,0,0.25);
cursor: pointer;
}
.a11y-toggle:hover{ background:#0047A6; }
.a11y-toggle:focus-visible{
outline: 3px solid var(--a11y-focus);
outline-offset: 3px;
}
.a11y-toggle svg{
width: 44px;
height: 44px;
fill: currentColor;
}

/* ---------------------------------------------------------
Panel
--------------------------------------------------------- */
/* Compact current-settings line (display-only) */
.a11y-status{
font-size: 13px;
line-height: 1.25;
margin: 6px 0 8px;
opacity: 0.95;
}

.a11y-panel{
position: fixed;
right: 14px;
bottom: 76px;
z-index: 10000;

width: var(--a11y-menu-width);
max-width: calc(100vw - 28px);

background: var(--a11y-bg);
border: 1px solid var(--a11y-border);
color: var(--a11y-fg);
border-radius: 16px;
padding: 12px;

box-shadow: 0 14px 40px rgba(0,0,0,0.28);
}
.a11y-panel[hidden]{ display:none !important; }

/* Header */
.a11y-head{
display:flex;
align-items:center;
justify-content: space-between;
margin-bottom: 10px;
}
.a11y-head h2{
font-size: 16px;
margin: 0;
}
.a11y-help{
width: 28px;
height: 28px;
border-radius: 50%;
background: #fff;
color: #111827;
font-weight: 900;
text-decoration: none;
display:flex;
align-items:center;
justify-content:center;
}
.a11y-help:focus-visible{
outline: 3px solid var(--a11y-focus);
outline-offset: 2px;
}

/* Buttons */
.a11y-row{
display:flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 10px;
}
.a11y-btn{
border: 1px solid #D1D5DB;
background:#fff;
color:#111827;
padding: 8px 10px;
border-radius: 999px;
font-size: 14px;
font-weight: 800;
cursor: pointer;
}
.a11y-btn[aria-pressed="true"]{
background:#111827;
color:#fff;
}
.a11y-btn:focus-visible{
outline: 3px solid var(--a11y-focus);
outline-offset: 2px;
}

.a11y-hint{
font-size: 13px;
color: var(--a11y-fg);
line-height: 1.4;
}

/* Screen reader only */
.a11y-sr{
position:absolute;
width:1px;
height:1px;
overflow:hidden;
clip:rect(0,0,0,0);
}

/* =========================================================
Feature classes
========================================================= */

/* ------------------------------
High contrast (black/yellow/blue)
------------------------------ */

/* ------------------------------
High contrast presets
- Use ONE of these on <body>:
- a11y-contrast-yellow (yellow on black)
- a11y-contrast-white (white on black)
- Back-compat: a11y-contrast behaves as yellow on black
------------------------------ */
body.a11y-contrast,
body.a11y-contrast-yellow{
--a11y-contrast-fg: #FFD400;
--a11y-contrast-fg-hover: #FFE066;
--a11y-contrast-link: var(--a11y-contrast-fg); /* same as text */
--a11y-contrast-border-70: rgba(255,212,0,.7);
--a11y-contrast-border-75: rgba(255,212,0,.75);
--a11y-contrast-border-85: rgba(255,212,0,.85);
}
body.a11y-contrast-white{
--a11y-contrast-fg: #FFFFFF;
--a11y-contrast-fg-hover: #E6E6E6;
--a11y-contrast-link: #9ECBFF; /* lighter link blue on black */
--a11y-contrast-border-70: rgba(255,255,255,.7);
--a11y-contrast-border-75: rgba(255,255,255,.75);
--a11y-contrast-border-85: rgba(255,255,255,.85);
}

body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white){
background:#000 !important;
color: var(--a11y-contrast-fg) !important;

/* Gadget UI variables in contrast mode */
--a11y-bg: #000;
--a11y-border: var(--a11y-contrast-border-70);
--a11y-fg: var(--a11y-contrast-fg);
--a11y-focus: var(--a11y-contrast-fg);
--a11y-link-underline: var(--a11y-contrast-link);
}

/* =========================================================
HIGH CONTRAST: Links must be visually distinct
Blue + underline to meet WCAG 1.4.1
========================================================= */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a:visited{
color: var(--bhc-link, #005DB3) !important;
text-decoration: underline !important;
text-decoration-thickness: 2px;
text-underline-offset: 0.15em;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a:hover,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a:focus-visible{
text-decoration-thickness: 3px;
}

/* Headings */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) h1,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) h2,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) h3,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) h4,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) h5,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) h6{
color:var(--a11y-contrast-fg) !important;
border-color:var(--a11y-contrast-fg) !important;
}

/* Main containers (Timeless needs explicit coverage) */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-wrapper,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-content-container,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-content,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-body,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-parser-output{
background:#000 !important;
color:var(--a11y-contrast-fg) !important;
}

/* Sidebars / tools */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #site-navigation,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #site-tools,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #page-tools,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-portlet,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-portlet-body{
background:#000 !important;
color:var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-70) !important;
}

/* FIX: portlet text stays yellow (titles, non-links) */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-portlet-body{
color:var(--a11y-contrast-fg) !important;
}

/* FIX: portlet links should be blue + underlined */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-portlet-body a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-portlet-body a:visited{
color: #3366CC !important;
text-decoration: underline !important;
text-decoration-thickness: 2px;
text-underline-offset: 0.15em;
}

/* CRITICAL FIX: many MW links are <a><span>text</span></a>
The span was inheriting/being forced yellow.
Make link contents inherit the link colour. */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-portlet-body a *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer a *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer-container a *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #footer-list a *{
color: inherit !important;
}

/* A11y UI in contrast */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .a11y-panel,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .a11y-toggle{
background:#000 !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .a11y-btn{
background:#000 !important;
color:var(--a11y-contrast-fg) !important;
border:2px solid var(--a11y-contrast-border-85) !important;
}

/* FIX: “?” help button in contrast */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .a11y-help{
background:#000 !important;
color:var(--a11y-contrast-fg) !important;
border:2px solid var(--a11y-contrast-border-85) !important;
}

/* ------------------------------
Underline links
------------------------------ */
body.a11y-underline-links a{
text-decoration: none !important;
border-bottom: 2px solid var(--a11y-link-underline);
padding-bottom: 0.05em;
}
body.a11y-underline-links:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a{
border-bottom-color: #3366CC !important;
}

/* ------------------------------
Text spacing
------------------------------ */
body.a11y-spacing-plus{
line-height: 1.8 !important;
letter-spacing: 0.06em !important;
word-spacing: 0.16em !important;
}
body.a11y-spacing-minus{
line-height: 1.45 !important;
letter-spacing: 0.01em !important;
word-spacing: 0.02em !important;
}

/* ------------------------------
Large cursors (wiki-hosted)
------------------------------ */
body.a11y-cursor-white,
body.a11y-cursor-white *{
cursor: url("/index.php/Special:FilePath/large-arrow-white-64.png") 8 8, auto !important;
}
body.a11y-cursor-yellow,
body.a11y-cursor-yellow *{
cursor: url("/index.php/Special:FilePath/large-arrow-yellow-64.png") 8 8, auto !important;
}

/* ------------------------------
Reading ruler
------------------------------ */
#a11y-ruler{
position: fixed;
left: 0;
top: 0;
height: 22px;
width: 100vw;
z-index: 9999;
pointer-events: none;

background: linear-gradient(
to bottom,
var(--a11y-contrast-fg) 0%,
var(--a11y-contrast-fg) 40%,
#000000 40%,
#000000 60%,
var(--a11y-contrast-fg) 60%,
var(--a11y-contrast-fg) 100%
);
}
#a11y-ruler[hidden]{ display:none !important; }

/* =========================================================
MediaWiki: extra HIGH CONTRAST coverage (Timeless + Vector)
Add at END of Gadget CSS so it wins.
========================================================= */

/* TOC */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #toc,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .toc,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #toc * ,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .toc *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-75) !important;
}

/* Category links area */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-normal-catlinks,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-normal-catlinks *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .catlinks,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .catlinks *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-75) !important;
}

/* Wikitables */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) table,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) table *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikitable,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikitable *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-datatable,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-datatable *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-75) !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikitable th,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) table th{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
}

/* Figures/captions */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) figure,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) figure *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-halign-center,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-halign-centre,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-halign-center *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-halign-centre *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
}

/* Thumb frames / image captions */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .thumb,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .thumb *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .thumbinner,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .thumbinner *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .thumbcaption,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .thumbcaption *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-75) !important;
}

/* Code-like blocks */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) pre,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) pre *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) code,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) code *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-75) !important;
}

/* =========================================================
HIGH CONTRAST: Footer (Vector + Timeless)
========================================================= */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer-container{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
background-image: none !important;
border-top: 10px solid var(--a11y-contrast-fg) !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #footer-list,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #footer-list *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #footer-icons,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #footer-icons *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
}

/* FIX: footer links should be blue (not yellow) */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer a:visited{
color: #3366CC !important;
text-decoration: underline !important;
text-decoration-thickness: 2px;
text-underline-offset: 0.15em;
}

body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer .mw-portlet,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer .mw-portlet-body{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-75) !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer hr{
border-color: var(--a11y-contrast-fg) !important;
}

/* =========================================================
Underline links: ensure TOC wins
========================================================= */
body.a11y-underline-links #toc a,
body.a11y-underline-links .toc a{
border-bottom-color: var(--a11y-link-underline) !important;
}
body.a11y-underline-links:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #toc a,
body.a11y-underline-links:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .toc a{
border-bottom-color: #3366CC !important;
}

/* =========================================================
HIGH CONTRAST: Header + search + user tools
========================================================= */

/* Base header + content containers */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-header-container,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-content-container{
background: #000 !important;
background-image: none !important;
}

/* Timeless header containers */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-header,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-header-container .ts-inner,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-header-container .mw-body,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-header-container .mw-portlet,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-header-container .mw-portlet-body{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
background-image: none !important;
border-color: var(--a11y-contrast-fg) !important;
}

/* Title */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #p-logo-text #p-banner,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #p-banner.mw-wiki-title,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #p-logo-text .mw-wiki-title{
color: var(--a11y-contrast-fg) !important;
}

/* Strapline */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #bhc-strapline,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .bhc-strapline{
color: var(--a11y-contrast-fg) !important;
}

/* Search box wrappers */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #p-search,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #simpleSearch{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
}

/* Search input (generic) */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #searchInput,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #p-search #searchInput,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #p-search input[type="search"],
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #simpleSearch input[type="search"]{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
caret-color: var(--a11y-contrast-fg) !important;
border: 2px solid var(--a11y-contrast-fg) !important;
box-shadow: none !important;
-webkit-text-fill-color: var(--a11y-contrast-fg) !important; /* Safari/WebKit */
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #searchInput::placeholder,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #simpleSearch input[type="search"]::placeholder{
color: var(--a11y-contrast-border-75) !important;
}

/* Timeless-specific: beat background:#fff !important */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #p-search input[type="search"],
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #p-search #searchInput{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
caret-color: var(--a11y-contrast-fg) !important;
border: 2px solid var(--a11y-contrast-fg) !important;
-webkit-text-fill-color: var(--a11y-contrast-fg) !important;
}

/* Search submit button */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) input#mw-searchButton,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) input#searchButton,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-searchButton{
background-color: #000 !important;
border: 2px solid var(--a11y-contrast-border-85) !important;
filter: none !important;
}

/* Suggestions dropdown */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .suggestions,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .suggestions-results,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .suggestions-special,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .suggestions a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .suggestions-result,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-searchSuggest,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-searchSuggest *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-85) !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .suggestions a:visited{
color: var(--a11y-contrast-fg) !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .suggestions-result-current,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .suggestions a:hover{
background: #111 !important;
}

/* Vector search tabs area */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-search-profile-tabs,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-search-profile-tabs *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-85) !important;
}

/* =========================================================
HIGH CONTRAST: Personal tools (reduce border clutter)
========================================================= */

/* Force yellow text to beat Timeless dark text */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal h2,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal h3,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal .mw-portlet,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal .mw-portlet *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless .mw-portlet-body,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless .mw-portlet-body *{
color: var(--a11y-contrast-fg) !important;
}

/* Force black background to beat Timeless white dropdown */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal .dropdown,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal .mw-portlet-body,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal-inner,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal-inner *{
background: #000 !important;
background-image: none !important;
}

/* Keep ONE border only (container), remove nested borders */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #personal .dropdown,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #personal-inner.dropdown,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #personal .mw-portlet-body{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border: 2px solid var(--a11y-contrast-border-85) !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #personal .mw-portlet-body *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #personal-inner.dropdown *{
background: transparent !important;
color: var(--a11y-contrast-fg) !important;
border: 0 !important;
outline-color: var(--a11y-contrast-fg) !important;
}
/* Leave links to global link rules */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #personal a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #personal a:visited{
background: transparent !important;
border-color: transparent !important;
}

/* =========================================================
HIGH CONTRAST: Timeless containers that fight back
========================================================= */

/* Timeless forces grey content container */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-content-container{
background: #000 !important;
background-image: none !important;
}

/* Timeless header container sometimes white at breakpoints */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-header-container{
background: #000 !important;
background-image: none !important;
}

/* Timeless related-navigation sidebar chunk at ≥1340px */
@media screen and (min-width: 1340px){
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless
#mw-related-navigation .sidebar-chunk{
background: #000 !important;
background-image: none !important;
border-color: var(--a11y-contrast-border-85) !important;
box-shadow: none !important;
}
}

/* mw-content border colour in high-contrast mode */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-content{
border-color: var(--a11y-contrast-fg) !important;
}

/* =========================================================
EDIT MODE: textarea and editOptions
========================================================= */

/* Edit textarea */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #wpTextbox1,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) textarea.mw-editfont-monospace{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
caret-color: var(--a11y-contrast-fg) !important;
border: 2px solid var(--a11y-contrast-fg) !important;
box-shadow: none !important;
-webkit-text-fill-color: var(--a11y-contrast-fg) !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #wpTextbox1::placeholder{
color: var(--a11y-contrast-border-75) !important;
}

/* editOptions bar */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-85) !important;
box-shadow: none !important;
}

/* Don’t override links here — let your global contrast link styling apply */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions a:visited{
background: transparent !important;
border-color: transparent !important;
}

/* Buttons + inputs inside editOptions */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions button,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions input,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions select,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions textarea,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions .mw-ui-button,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions .oo-ui-buttonElement-button{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border: 2px solid var(--a11y-contrast-border-85) !important;
box-shadow: none !important;
-webkit-text-fill-color: var(--a11y-contrast-fg) !important;
}

/* Focus visibility */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions button:focus-visible,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions input:focus-visible,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions select:focus-visible,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions .mw-ui-button:focus-visible,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions .oo-ui-buttonElement-button:focus-visible{
outline: 3px solid var(--a11y-contrast-fg) !important;
outline-offset: 2px !important;
}

/* =========================================================
EDIT MODE: Codex (CDX) message banners (e.g. interface warning)
========================================================= */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .cdx-message,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .cdx-message--block,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .cdx-message--error{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border: 2px solid var(--a11y-contrast-border-85) !important;
box-shadow: none !important;
}
/* Inner content */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .cdx-message__content,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .cdx-message__content *{
background: transparent !important;
color: var(--a11y-contrast-fg) !important;
}
/* Icon */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .cdx-message__icon,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .cdx-message__icon *{
color: var(--a11y-contrast-fg) !important;
fill: var(--a11y-contrast-fg) !important;
}
/* Emphasis */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .cdx-message strong{
color: var(--a11y-contrast-fg) !important;
}

/* FIX: Timeless sidebar chunks stay light at 1100–1339px.
Force black/yellow in high-contrast mode only. */
@media screen and (min-width: 1100px) and (max-width: 1339px){
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-site-navigation .sidebar-chunk,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-related-navigation .sidebar-chunk{
background: #000 !important;
background-image: none !important;
border-color: var(--a11y-contrast-border-85) !important;
box-shadow: none !important;
}

/* If any text inside is still dark, force it yellow */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-site-navigation .sidebar-chunk *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-related-navigation .sidebar-chunk *{
color: var(--a11y-contrast-fg) !important;
}

/* …but if it’s a LINK (or inside a link), keep it blue */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-site-navigation .sidebar-chunk a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-site-navigation .sidebar-chunk a:visited,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-related-navigation .sidebar-chunk a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-related-navigation .sidebar-chunk a:visited{
color: #3366CC !important;
text-decoration: underline !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-site-navigation .sidebar-chunk a *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-related-navigation .sidebar-chunk a *{
color: inherit !important;
}
}

/* FIX (stronger): Timeless sidebar chunks at 1100–1339px still light.
Must beat the skin rule in the same breakpoint. */
@media screen and (min-width: 1100px) and (max-width: 1339px){
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-site-navigation .sidebar-chunk,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-related-navigation .sidebar-chunk{
background: #000 !important;
background-image: none !important;
border-color: var(--a11y-contrast-border-85) !important;
box-shadow: none !important;
}

body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-site-navigation .sidebar-chunk *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-related-navigation .sidebar-chunk *{
color: var(--a11y-contrast-fg) !important;
}

/* …but links stay blue */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-site-navigation .sidebar-chunk a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-site-navigation .sidebar-chunk a:visited,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-related-navigation .sidebar-chunk a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-related-navigation .sidebar-chunk a:visited{
color: #3366CC !important;
text-decoration: underline !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-site-navigation .sidebar-chunk a *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-related-navigation .sidebar-chunk a *{
color: inherit !important;
}
}

/* =========================================================
EMERGENCY: ensure the accessibility toggle is visible
(keep at VERY END)
========================================================= */
#a11y-toggle.a11y-toggle{
position: fixed !important;
right: 16px !important;
bottom: 16px !important;

display: inline-flex !important;
visibility: visible !important;
opacity: 1 !important;

z-index: 2147483647 !important;
pointer-events: auto !important;

transform: none !important;
}
#a11y-toggle.a11y-toggle svg{
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}

/* =========================================================
HIGH CONTRAST: Scrollbars (page + editor)
Supports: Chrome/Safari/Opera (WebKit) + Firefox
Scope: ONLY when body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) is active
========================================================= */

/* ---------- Firefox (Gecko) ---------- */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white),
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) *{
scrollbar-color: var(--a11y-contrast-fg) #000; /* thumb / track */
scrollbar-width: auto; /* or 'thin' if you prefer */
}

/* ---------- Chrome / Safari / Opera (WebKit/Blink) ---------- */
/* Page scrollbars */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white)::-webkit-scrollbar{
width: 14px;
height: 14px; /* horizontal */
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white)::-webkit-scrollbar-track{
background: #000;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white)::-webkit-scrollbar-thumb{
background: var(--a11y-contrast-fg);
border: 3px solid #000; /* creates separation from track */
border-radius: 10px;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white)::-webkit-scrollbar-thumb:hover{
background: var(--a11y-contrast-fg-hover); /* slightly lighter yellow on hover */
}

/* Editor + common scrollable containers (safety net) */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) textarea,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #wpTextbox1,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui *{
scrollbar-color: var(--a11y-contrast-fg) #000; /* Firefox for these elements too */
}

/* FIX: WikiEditor tool-select dropdown text becomes unreadable
because it inherits yellow from body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white). */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui-toolbar .tool.tool-select,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui-toolbar .tool.tool-select *{
color: #222 !important; /* readable on the tool-select's light background */
}

/* FIX: WikiEditor toolbar tabs readability in high-contrast mode */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui-toolbar .tabs a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui-toolbar .tabs a:visited{
color: #0645ad !important; /* MediaWiki blue */
}

/* Active tab: keep it dark for readability on light background */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui-toolbar .tabs span.tab a.current,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui-toolbar .tabs span.tab a.current:visited{
color: #222 !important;
}

body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) textarea::-webkit-scrollbar,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #wpTextbox1::-webkit-scrollbar,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui::-webkit-scrollbar{
width: 14px;
height: 14px;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) textarea::-webkit-scrollbar-track,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #wpTextbox1::-webkit-scrollbar-track,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui::-webkit-scrollbar-track{
background: #000;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) textarea::-webkit-scrollbar-thumb,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #wpTextbox1::-webkit-scrollbar-thumb,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui::-webkit-scrollbar-thumb{
background: var(--a11y-contrast-fg);
border: 3px solid #000;
border-radius: 10px;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) textarea::-webkit-scrollbar-thumb:hover,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #wpTextbox1::-webkit-scrollbar-thumb:hover,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui::-webkit-scrollbar-thumb:hover{
background: var(--a11y-contrast-fg-hover);
}

/* Try to target root scrolling element where supported */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) html{
scrollbar-color: var(--a11y-contrast-fg) #000;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) html::-webkit-scrollbar{
width: 14px;
height: 14px;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) html::-webkit-scrollbar-track{
background: #000;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) html::-webkit-scrollbar-thumb{
background: var(--a11y-contrast-fg);
border: 3px solid #000;
border-radius: 10px;
}

/* =========================================================
FINAL OVERRIDE (brute force):
High-contrast links must be blue + underlined everywhere,
including link text wrapped in spans inside portlets/footer.
PUT THIS AT THE VERY END OF THE FILE.
========================================================= */

body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a:visited{
color: #3366CC !important;
text-decoration: underline !important;
text-decoration-thickness: 2px !important;
text-underline-offset: 0.15em !important;
}

/* Critical: if link text is wrapped (e.g. <a><span>Text</span></a>),
force ALL children inside links to inherit the link colour. */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a:visited *{
color: inherit !important;
}

/* Extra specificity for the problem zones (beats Timeless + portlet-body * rules) */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless .mw-portlet-body a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless .mw-portlet-body a:visited,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-footer a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-footer a:visited,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-footer-container a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-footer-container a:visited{
color: #3366CC !important;
text-decoration: underline !important;
}

body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless .mw-portlet-body a *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless .mw-portlet-body a:visited *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-footer a *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-footer a:visited *{
color: inherit !important;
}

/* =========================================================
FINAL FIX: #personal (user tools) links
The portlet-body * rule forces yellow.
Override ONLY for links and their contents.
========================================================= */

body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal a:visited{
color: #3366CC !important;
text-decoration: underline !important;
}

body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal a *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal a:visited *{
color: inherit !important;
}

/* =========================================================
HIGH CONTRAST: Link colour = text colour everywhere
Rationale: avoids blue-on-yellow/white concerns; underline carries affordance.
This block is intentionally near the end to beat skin rules.
========================================================= */
body.a11y-contrast a,
body.a11y-contrast a:visited{
color: var(--a11y-contrast-fg) !important;
text-decoration: underline !important;
text-decoration-thickness: 2px;
text-underline-offset: 0.15em;
}
body.a11y-contrast a:hover,
body.a11y-contrast a:focus-visible{
text-decoration-thickness: 3px;
}

/* Ensure link text wrapped in spans inherits */
body.a11y-contrast a *{
color: inherit !important;
}

/* Explicitly beat Timeless footer + portlet colours */
body.a11y-contrast #mw-footer a,
body.a11y-contrast #mw-footer a:visited,
body.a11y-contrast .mw-portlet-body a,
body.a11y-contrast .mw-portlet-body a:visited{
color: var(--a11y-contrast-fg) !important;
}

/* =========================================================
FINAL OVERRIDE: Links inherit text colour everywhere
(beats Timeless sidebars, portlets, footer, toolbars)
========================================================= */

body.a11y-contrast a,
body.a11y-contrast a:visited{
color: var(--a11y-fg) !important;
text-decoration: underline !important;
text-decoration-thickness: 2px;
text-underline-offset: 0.15em;
}

/* Kill span-level overrides inside links */
body.a11y-contrast a *,
body.a11y-contrast a:visited *{
color: inherit !important;
}

MediaWiki:Gadget-bhc-accessibility.css

2026-01-29T09:02:14Z

Steve: Full css for both contrast colour schemes plus the css is variable driven.

/*
⚠️ Do not reorder rules below this line — contrast overrides depend on cascade order.
*/

/* =========================================================
BHC Accessibility Gadget – MediaWiki / Timeless
========================================================= */

/* ---------------------------------------------------------
Variables
--------------------------------------------------------- */
:root{
--a11y-bg: #111827;
--a11y-border: #374151;
--a11y-fg: #ffffff;
--a11y-focus: #FFBF47;
--a11y-link-underline: #3366CC; /* MediaWiki link blue */
--a11y-menu-width: 340px;
}

/* Timeless: stop skin CSS shrinking the accessibility icon */
body.skin-timeless .a11y-toggle{
font-size: 16px !important;
line-height: 1 !important;
}
body.skin-timeless .a11y-toggle svg{
display: block !important;
width: 36px !important;
height: 36px !important;
min-width: 36px !important;
min-height: 36px !important;
max-width: none !important;
max-height: none !important;

/* If the glyph still looks small, keep this: */
transform: scale(1.15) !important;
transform-origin: 50% 50% !important;
}
/* Make sure fill isn’t being altered by skin rules */
body.skin-timeless .a11y-toggle svg path{
fill: currentColor !important;
}

/* ---------------------------------------------------------
Skip links (appear when focused)
--------------------------------------------------------- */
.skip-link{
position: absolute;
left: 12px;
top: 12px;
z-index: 11000;

padding: 10px 14px;
border-radius: 8px;

background: #111827;
color: #fff;
text-decoration: none;

top: -9999px; /* hidden off-screen by default */
transition: none; /* no animation needed when hidden */

border: 2px solid var(--a11y-focus);
}
.skip-link:focus,
.skip-link:focus-visible{
top: 12px; /* bring into view when focused */
outline: none;
z-index: 11001;
}

body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .skip-link{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-fg) !important;
}

/* Stack multiple skip links neatly when tabbing through them */
#a11y-skip-content:focus,
#a11y-skip-content:focus-visible{ top: 56px; }

#a11y-skip-nav:focus,
#a11y-skip-nav:focus-visible{ top: 100px; }

#a11y-skip-search:focus,
#a11y-skip-search:focus-visible{ top: 144px; }

/* ---------------------------------------------------------
Floating accessibility toggle
--------------------------------------------------------- */
.a11y-toggle{
position: fixed;
right: 16px;
bottom: 16px;
z-index: 10001;

width: 56px;
height: 56px;
border-radius: 50%;

background: #005FCC;
border: 2px solid #ffffff;
color: #ffffff;

display: inline-flex;
align-items: center;
justify-content: center;

box-shadow: 0 10px 24px rgba(0,0,0,0.25);
cursor: pointer;
}
.a11y-toggle:hover{ background:#0047A6; }
.a11y-toggle:focus-visible{
outline: 3px solid var(--a11y-focus);
outline-offset: 3px;
}
.a11y-toggle svg{
width: 44px;
height: 44px;
fill: currentColor;
}

/* ---------------------------------------------------------
Panel
--------------------------------------------------------- */
/* Compact current-settings line (display-only) */
.a11y-status{
font-size: 13px;
line-height: 1.25;
margin: 6px 0 8px;
opacity: 0.95;
}

.a11y-panel{
position: fixed;
right: 14px;
bottom: 76px;
z-index: 10000;

width: var(--a11y-menu-width);
max-width: calc(100vw - 28px);

background: var(--a11y-bg);
border: 1px solid var(--a11y-border);
color: var(--a11y-fg);
border-radius: 16px;
padding: 12px;

box-shadow: 0 14px 40px rgba(0,0,0,0.28);
}
.a11y-panel[hidden]{ display:none !important; }

/* Header */
.a11y-head{
display:flex;
align-items:center;
justify-content: space-between;
margin-bottom: 10px;
}
.a11y-head h2{
font-size: 16px;
margin: 0;
}
.a11y-help{
width: 28px;
height: 28px;
border-radius: 50%;
background: #fff;
color: #111827;
font-weight: 900;
text-decoration: none;
display:flex;
align-items:center;
justify-content:center;
}
.a11y-help:focus-visible{
outline: 3px solid var(--a11y-focus);
outline-offset: 2px;
}

/* Buttons */
.a11y-row{
display:flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 10px;
}
.a11y-btn{
border: 1px solid #D1D5DB;
background:#fff;
color:#111827;
padding: 8px 10px;
border-radius: 999px;
font-size: 14px;
font-weight: 800;
cursor: pointer;
}
.a11y-btn[aria-pressed="true"]{
background:#111827;
color:#fff;
}
.a11y-btn:focus-visible{
outline: 3px solid var(--a11y-focus);
outline-offset: 2px;
}

.a11y-hint{
font-size: 13px;
color: var(--a11y-fg);
line-height: 1.4;
}

/* Screen reader only */
.a11y-sr{
position:absolute;
width:1px;
height:1px;
overflow:hidden;
clip:rect(0,0,0,0);
}

/* =========================================================
Feature classes
========================================================= */

/* ------------------------------
High contrast (black/yellow/blue)
------------------------------ */

/* ------------------------------
High contrast presets
- Use ONE of these on <body>:
- a11y-contrast-yellow (yellow on black)
- a11y-contrast-white (white on black)
- Back-compat: a11y-contrast behaves as yellow on black
------------------------------ */
body.a11y-contrast,
body.a11y-contrast-yellow{
--a11y-contrast-fg: #FFD400;
--a11y-contrast-fg-hover: #FFE066;
--a11y-contrast-link: var(--a11y-contrast-fg); /* same as text */
--a11y-contrast-border-70: rgba(255,212,0,.7);
--a11y-contrast-border-75: rgba(255,212,0,.75);
--a11y-contrast-border-85: rgba(255,212,0,.85);
}
body.a11y-contrast-white{
--a11y-contrast-fg: #FFFFFF;
--a11y-contrast-fg-hover: #E6E6E6;
--a11y-contrast-link: #9ECBFF; /* lighter link blue on black */
--a11y-contrast-border-70: rgba(255,255,255,.7);
--a11y-contrast-border-75: rgba(255,255,255,.75);
--a11y-contrast-border-85: rgba(255,255,255,.85);
}

body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white){
background:#000 !important;
color: var(--a11y-contrast-fg) !important;

/* Gadget UI variables in contrast mode */
--a11y-bg: #000;
--a11y-border: var(--a11y-contrast-border-70);
--a11y-fg: var(--a11y-contrast-fg);
--a11y-focus: var(--a11y-contrast-fg);
--a11y-link-underline: var(--a11y-contrast-link);
}

/* =========================================================
HIGH CONTRAST: Links must be visually distinct
Blue + underline to meet WCAG 1.4.1
========================================================= */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a:visited{
color: var(--bhc-link, #005DB3) !important;
text-decoration: underline !important;
text-decoration-thickness: 2px;
text-underline-offset: 0.15em;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a:hover,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a:focus-visible{
text-decoration-thickness: 3px;
}

/* Headings */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) h1,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) h2,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) h3,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) h4,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) h5,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) h6{
color:var(--a11y-contrast-fg) !important;
border-color:var(--a11y-contrast-fg) !important;
}

/* Main containers (Timeless needs explicit coverage) */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-wrapper,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-content-container,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-content,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-body,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-parser-output{
background:#000 !important;
color:var(--a11y-contrast-fg) !important;
}

/* Sidebars / tools */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #site-navigation,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #site-tools,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #page-tools,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-portlet,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-portlet-body{
background:#000 !important;
color:var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-70) !important;
}

/* FIX: portlet text stays yellow (titles, non-links) */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-portlet-body{
color:var(--a11y-contrast-fg) !important;
}

/* FIX: portlet links should be blue + underlined */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-portlet-body a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-portlet-body a:visited{
color: #3366CC !important;
text-decoration: underline !important;
text-decoration-thickness: 2px;
text-underline-offset: 0.15em;
}

/* CRITICAL FIX: many MW links are <a><span>text</span></a>
The span was inheriting/being forced yellow.
Make link contents inherit the link colour. */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-portlet-body a *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer a *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer-container a *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #footer-list a *{
color: inherit !important;
}

/* A11y UI in contrast */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .a11y-panel,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .a11y-toggle{
background:#000 !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .a11y-btn{
background:#000 !important;
color:var(--a11y-contrast-fg) !important;
border:2px solid var(--a11y-contrast-border-85) !important;
}

/* FIX: “?” help button in contrast */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .a11y-help{
background:#000 !important;
color:var(--a11y-contrast-fg) !important;
border:2px solid var(--a11y-contrast-border-85) !important;
}

/* ------------------------------
Underline links
------------------------------ */
body.a11y-underline-links a{
text-decoration: none !important;
border-bottom: 2px solid var(--a11y-link-underline);
padding-bottom: 0.05em;
}
body.a11y-underline-links:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a{
border-bottom-color: #3366CC !important;
}

/* ------------------------------
Text spacing
------------------------------ */
body.a11y-spacing-plus{
line-height: 1.8 !important;
letter-spacing: 0.06em !important;
word-spacing: 0.16em !important;
}
body.a11y-spacing-minus{
line-height: 1.45 !important;
letter-spacing: 0.01em !important;
word-spacing: 0.02em !important;
}

/* ------------------------------
Large cursors (wiki-hosted)
------------------------------ */
body.a11y-cursor-white,
body.a11y-cursor-white *{
cursor: url("/index.php/Special:FilePath/large-arrow-white-64.png") 8 8, auto !important;
}
body.a11y-cursor-yellow,
body.a11y-cursor-yellow *{
cursor: url("/index.php/Special:FilePath/large-arrow-yellow-64.png") 8 8, auto !important;
}

/* ------------------------------
Reading ruler
------------------------------ */
#a11y-ruler{
position: fixed;
left: 0;
top: 0;
height: 22px;
width: 100vw;
z-index: 9999;
pointer-events: none;

background: linear-gradient(
to bottom,
var(--a11y-contrast-fg) 0%,
var(--a11y-contrast-fg) 40%,
#000000 40%,
#000000 60%,
var(--a11y-contrast-fg) 60%,
var(--a11y-contrast-fg) 100%
);
}
#a11y-ruler[hidden]{ display:none !important; }

/* =========================================================
MediaWiki: extra HIGH CONTRAST coverage (Timeless + Vector)
Add at END of Gadget CSS so it wins.
========================================================= */

/* TOC */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #toc,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .toc,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #toc * ,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .toc *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-75) !important;
}

/* Category links area */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-normal-catlinks,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-normal-catlinks *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .catlinks,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .catlinks *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-75) !important;
}

/* Wikitables */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) table,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) table *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikitable,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikitable *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-datatable,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-datatable *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-75) !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikitable th,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) table th{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
}

/* Figures/captions */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) figure,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) figure *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-halign-center,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-halign-centre,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-halign-center *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-halign-centre *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
}

/* Thumb frames / image captions */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .thumb,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .thumb *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .thumbinner,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .thumbinner *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .thumbcaption,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .thumbcaption *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-75) !important;
}

/* Code-like blocks */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) pre,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) pre *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) code,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) code *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-75) !important;
}

/* =========================================================
HIGH CONTRAST: Footer (Vector + Timeless)
========================================================= */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer-container{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
background-image: none !important;
border-top: 10px solid var(--a11y-contrast-fg) !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #footer-list,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #footer-list *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #footer-icons,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #footer-icons *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
}

/* FIX: footer links should be blue (not yellow) */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer a:visited{
color: #3366CC !important;
text-decoration: underline !important;
text-decoration-thickness: 2px;
text-underline-offset: 0.15em;
}

body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer .mw-portlet,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer .mw-portlet-body{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-75) !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer hr{
border-color: var(--a11y-contrast-fg) !important;
}

/* =========================================================
Underline links: ensure TOC wins
========================================================= */
body.a11y-underline-links #toc a,
body.a11y-underline-links .toc a{
border-bottom-color: var(--a11y-link-underline) !important;
}
body.a11y-underline-links:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #toc a,
body.a11y-underline-links:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .toc a{
border-bottom-color: #3366CC !important;
}

/* =========================================================
HIGH CONTRAST: Header + search + user tools
========================================================= */

/* Base header + content containers */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-header-container,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-content-container{
background: #000 !important;
background-image: none !important;
}

/* Timeless header containers */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-header,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-header-container .ts-inner,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-header-container .mw-body,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-header-container .mw-portlet,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-header-container .mw-portlet-body{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
background-image: none !important;
border-color: var(--a11y-contrast-fg) !important;
}

/* Title */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #p-logo-text #p-banner,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #p-banner.mw-wiki-title,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #p-logo-text .mw-wiki-title{
color: var(--a11y-contrast-fg) !important;
}

/* Strapline */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #bhc-strapline,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .bhc-strapline{
color: var(--a11y-contrast-fg) !important;
}

/* Search box wrappers */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #p-search,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #simpleSearch{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
}

/* Search input (generic) */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #searchInput,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #p-search #searchInput,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #p-search input[type="search"],
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #simpleSearch input[type="search"]{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
caret-color: var(--a11y-contrast-fg) !important;
border: 2px solid var(--a11y-contrast-fg) !important;
box-shadow: none !important;
-webkit-text-fill-color: var(--a11y-contrast-fg) !important; /* Safari/WebKit */
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #searchInput::placeholder,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #simpleSearch input[type="search"]::placeholder{
color: var(--a11y-contrast-border-75) !important;
}

/* Timeless-specific: beat background:#fff !important */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #p-search input[type="search"],
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #p-search #searchInput{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
caret-color: var(--a11y-contrast-fg) !important;
border: 2px solid var(--a11y-contrast-fg) !important;
-webkit-text-fill-color: var(--a11y-contrast-fg) !important;
}

/* Search submit button */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) input#mw-searchButton,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) input#searchButton,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-searchButton{
background-color: #000 !important;
border: 2px solid var(--a11y-contrast-border-85) !important;
filter: none !important;
}

/* Suggestions dropdown */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .suggestions,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .suggestions-results,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .suggestions-special,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .suggestions a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .suggestions-result,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-searchSuggest,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-searchSuggest *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-85) !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .suggestions a:visited{
color: var(--a11y-contrast-fg) !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .suggestions-result-current,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .suggestions a:hover{
background: #111 !important;
}

/* Vector search tabs area */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-search-profile-tabs,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-search-profile-tabs *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-85) !important;
}

/* =========================================================
HIGH CONTRAST: Personal tools (reduce border clutter)
========================================================= */

/* Force yellow text to beat Timeless dark text */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal h2,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal h3,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal .mw-portlet,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal .mw-portlet *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless .mw-portlet-body,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless .mw-portlet-body *{
color: var(--a11y-contrast-fg) !important;
}

/* Force black background to beat Timeless white dropdown */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal .dropdown,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal .mw-portlet-body,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal-inner,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal-inner *{
background: #000 !important;
background-image: none !important;
}

/* Keep ONE border only (container), remove nested borders */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #personal .dropdown,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #personal-inner.dropdown,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #personal .mw-portlet-body{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border: 2px solid var(--a11y-contrast-border-85) !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #personal .mw-portlet-body *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #personal-inner.dropdown *{
background: transparent !important;
color: var(--a11y-contrast-fg) !important;
border: 0 !important;
outline-color: var(--a11y-contrast-fg) !important;
}
/* Leave links to global link rules */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #personal a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #personal a:visited{
background: transparent !important;
border-color: transparent !important;
}

/* =========================================================
HIGH CONTRAST: Timeless containers that fight back
========================================================= */

/* Timeless forces grey content container */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-content-container{
background: #000 !important;
background-image: none !important;
}

/* Timeless header container sometimes white at breakpoints */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-header-container{
background: #000 !important;
background-image: none !important;
}

/* Timeless related-navigation sidebar chunk at ≥1340px */
@media screen and (min-width: 1340px){
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless
#mw-related-navigation .sidebar-chunk{
background: #000 !important;
background-image: none !important;
border-color: var(--a11y-contrast-border-85) !important;
box-shadow: none !important;
}
}

/* mw-content border colour in high-contrast mode */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-content{
border-color: var(--a11y-contrast-fg) !important;
}

/* =========================================================
EDIT MODE: textarea and editOptions
========================================================= */

/* Edit textarea */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #wpTextbox1,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) textarea.mw-editfont-monospace{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
caret-color: var(--a11y-contrast-fg) !important;
border: 2px solid var(--a11y-contrast-fg) !important;
box-shadow: none !important;
-webkit-text-fill-color: var(--a11y-contrast-fg) !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #wpTextbox1::placeholder{
color: var(--a11y-contrast-border-75) !important;
}

/* editOptions bar */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-85) !important;
box-shadow: none !important;
}

/* Don’t override links here — let your global contrast link styling apply */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions a:visited{
background: transparent !important;
border-color: transparent !important;
}

/* Buttons + inputs inside editOptions */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions button,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions input,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions select,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions textarea,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions .mw-ui-button,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions .oo-ui-buttonElement-button{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border: 2px solid var(--a11y-contrast-border-85) !important;
box-shadow: none !important;
-webkit-text-fill-color: var(--a11y-contrast-fg) !important;
}

/* Focus visibility */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions button:focus-visible,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions input:focus-visible,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions select:focus-visible,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions .mw-ui-button:focus-visible,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions .oo-ui-buttonElement-button:focus-visible{
outline: 3px solid var(--a11y-contrast-fg) !important;
outline-offset: 2px !important;
}

/* =========================================================
EDIT MODE: Codex (CDX) message banners (e.g. interface warning)
========================================================= */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .cdx-message,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .cdx-message--block,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .cdx-message--error{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border: 2px solid var(--a11y-contrast-border-85) !important;
box-shadow: none !important;
}
/* Inner content */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .cdx-message__content,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .cdx-message__content *{
background: transparent !important;
color: var(--a11y-contrast-fg) !important;
}
/* Icon */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .cdx-message__icon,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .cdx-message__icon *{
color: var(--a11y-contrast-fg) !important;
fill: var(--a11y-contrast-fg) !important;
}
/* Emphasis */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .cdx-message strong{
color: var(--a11y-contrast-fg) !important;
}

/* FIX: Timeless sidebar chunks stay light at 1100–1339px.
Force black/yellow in high-contrast mode only. */
@media screen and (min-width: 1100px) and (max-width: 1339px){
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-site-navigation .sidebar-chunk,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-related-navigation .sidebar-chunk{
background: #000 !important;
background-image: none !important;
border-color: var(--a11y-contrast-border-85) !important;
box-shadow: none !important;
}

/* If any text inside is still dark, force it yellow */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-site-navigation .sidebar-chunk *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-related-navigation .sidebar-chunk *{
color: var(--a11y-contrast-fg) !important;
}

/* …but if it’s a LINK (or inside a link), keep it blue */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-site-navigation .sidebar-chunk a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-site-navigation .sidebar-chunk a:visited,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-related-navigation .sidebar-chunk a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-related-navigation .sidebar-chunk a:visited{
color: #3366CC !important;
text-decoration: underline !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-site-navigation .sidebar-chunk a *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-related-navigation .sidebar-chunk a *{
color: inherit !important;
}
}

/* FIX (stronger): Timeless sidebar chunks at 1100–1339px still light.
Must beat the skin rule in the same breakpoint. */
@media screen and (min-width: 1100px) and (max-width: 1339px){
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-site-navigation .sidebar-chunk,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-related-navigation .sidebar-chunk{
background: #000 !important;
background-image: none !important;
border-color: var(--a11y-contrast-border-85) !important;
box-shadow: none !important;
}

body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-site-navigation .sidebar-chunk *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-related-navigation .sidebar-chunk *{
color: var(--a11y-contrast-fg) !important;
}

/* …but links stay blue */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-site-navigation .sidebar-chunk a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-site-navigation .sidebar-chunk a:visited,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-related-navigation .sidebar-chunk a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-related-navigation .sidebar-chunk a:visited{
color: #3366CC !important;
text-decoration: underline !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-site-navigation .sidebar-chunk a *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-related-navigation .sidebar-chunk a *{
color: inherit !important;
}
}

/* =========================================================
EMERGENCY: ensure the accessibility toggle is visible
(keep at VERY END)
========================================================= */
#a11y-toggle.a11y-toggle{
position: fixed !important;
right: 16px !important;
bottom: 16px !important;

display: inline-flex !important;
visibility: visible !important;
opacity: 1 !important;

z-index: 2147483647 !important;
pointer-events: auto !important;

transform: none !important;
}
#a11y-toggle.a11y-toggle svg{
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}

/* =========================================================
HIGH CONTRAST: Scrollbars (page + editor)
Supports: Chrome/Safari/Opera (WebKit) + Firefox
Scope: ONLY when body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) is active
========================================================= */

/* ---------- Firefox (Gecko) ---------- */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white),
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) *{
scrollbar-color: var(--a11y-contrast-fg) #000; /* thumb / track */
scrollbar-width: auto; /* or 'thin' if you prefer */
}

/* ---------- Chrome / Safari / Opera (WebKit/Blink) ---------- */
/* Page scrollbars */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white)::-webkit-scrollbar{
width: 14px;
height: 14px; /* horizontal */
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white)::-webkit-scrollbar-track{
background: #000;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white)::-webkit-scrollbar-thumb{
background: var(--a11y-contrast-fg);
border: 3px solid #000; /* creates separation from track */
border-radius: 10px;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white)::-webkit-scrollbar-thumb:hover{
background: var(--a11y-contrast-fg-hover); /* slightly lighter yellow on hover */
}

/* Editor + common scrollable containers (safety net) */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) textarea,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #wpTextbox1,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui *{
scrollbar-color: var(--a11y-contrast-fg) #000; /* Firefox for these elements too */
}

/* FIX: WikiEditor tool-select dropdown text becomes unreadable
because it inherits yellow from body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white). */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui-toolbar .tool.tool-select,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui-toolbar .tool.tool-select *{
color: #222 !important; /* readable on the tool-select's light background */
}

/* FIX: WikiEditor toolbar tabs readability in high-contrast mode */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui-toolbar .tabs a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui-toolbar .tabs a:visited{
color: #0645ad !important; /* MediaWiki blue */
}

/* Active tab: keep it dark for readability on light background */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui-toolbar .tabs span.tab a.current,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui-toolbar .tabs span.tab a.current:visited{
color: #222 !important;
}

body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) textarea::-webkit-scrollbar,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #wpTextbox1::-webkit-scrollbar,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui::-webkit-scrollbar{
width: 14px;
height: 14px;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) textarea::-webkit-scrollbar-track,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #wpTextbox1::-webkit-scrollbar-track,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui::-webkit-scrollbar-track{
background: #000;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) textarea::-webkit-scrollbar-thumb,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #wpTextbox1::-webkit-scrollbar-thumb,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui::-webkit-scrollbar-thumb{
background: var(--a11y-contrast-fg);
border: 3px solid #000;
border-radius: 10px;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) textarea::-webkit-scrollbar-thumb:hover,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #wpTextbox1::-webkit-scrollbar-thumb:hover,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui::-webkit-scrollbar-thumb:hover{
background: var(--a11y-contrast-fg-hover);
}

/* Try to target root scrolling element where supported */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) html{
scrollbar-color: var(--a11y-contrast-fg) #000;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) html::-webkit-scrollbar{
width: 14px;
height: 14px;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) html::-webkit-scrollbar-track{
background: #000;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) html::-webkit-scrollbar-thumb{
background: var(--a11y-contrast-fg);
border: 3px solid #000;
border-radius: 10px;
}

/* =========================================================
FINAL OVERRIDE (brute force):
High-contrast links must be blue + underlined everywhere,
including link text wrapped in spans inside portlets/footer.
PUT THIS AT THE VERY END OF THE FILE.
========================================================= */

body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a:visited{
color: #3366CC !important;
text-decoration: underline !important;
text-decoration-thickness: 2px !important;
text-underline-offset: 0.15em !important;
}

/* Critical: if link text is wrapped (e.g. <a><span>Text</span></a>),
force ALL children inside links to inherit the link colour. */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a:visited *{
color: inherit !important;
}

/* Extra specificity for the problem zones (beats Timeless + portlet-body * rules) */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless .mw-portlet-body a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless .mw-portlet-body a:visited,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-footer a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-footer a:visited,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-footer-container a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-footer-container a:visited{
color: #3366CC !important;
text-decoration: underline !important;
}

body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless .mw-portlet-body a *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless .mw-portlet-body a:visited *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-footer a *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-footer a:visited *{
color: inherit !important;
}

/* =========================================================
FINAL FIX: #personal (user tools) links
The portlet-body * rule forces yellow.
Override ONLY for links and their contents.
========================================================= */

body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal a:visited{
color: #3366CC !important;
text-decoration: underline !important;
}

body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal a *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal a:visited *{
color: inherit !important;
}

/* =========================================================
HIGH CONTRAST: Link colour = text colour everywhere
Rationale: avoids blue-on-yellow/white concerns; underline carries affordance.
This block is intentionally near the end to beat skin rules.
========================================================= */
body.a11y-contrast a,
body.a11y-contrast a:visited{
color: var(--a11y-contrast-fg) !important;
text-decoration: underline !important;
text-decoration-thickness: 2px;
text-underline-offset: 0.15em;
}
body.a11y-contrast a:hover,
body.a11y-contrast a:focus-visible{
text-decoration-thickness: 3px;
}

/* Ensure link text wrapped in spans inherits */
body.a11y-contrast a *{
color: inherit !important;
}

/* Explicitly beat Timeless footer + portlet colours */
body.a11y-contrast #mw-footer a,
body.a11y-contrast #mw-footer a:visited,
body.a11y-contrast .mw-portlet-body a,
body.a11y-contrast .mw-portlet-body a:visited{
color: var(--a11y-contrast-fg) !important;
}

Accessibility

2026-01-29T09:00:30Z

Steve: Incorporates all recent changes to colour schems and tools plus a clear accessibility statement and reference to WAG guidance and testing.

= Accessibility =

The Bellingham Heritage Centre Wiki aims to be accessible to as wide an audience as possible, regardless of technology or ability. We recognise that users access the site in many different ways and may have different visual, motor, cognitive, or situational needs.

This page explains the accessibility features available on the site, how we test accessibility, and how to provide feedback.

----

== Accessibility statement ==

The Bellingham Heritage Centre Wiki **aims to conform to WCAG 2.2 AA accessibility standards**.

We are committed to improving accessibility and usability and strive to follow recognised best practice and relevant accessibility guidelines appropriate to a community-run heritage website.

----

== Measures to support accessibility ==

To support accessibility, this site includes a built-in **Accessibility Toolbar**, available on every page.

Using this toolbar, users can:

* Enable a high-contrast display in two choices of colour scheme. Links are t he same colour as the text but underlined for visibility.
* Increase or decrease text size
* Adjust text spacing
* Underline links
* Enable a reading ruler
* Use a high-visibility cursor in two choices of colour

These tools are designed to work independently or in combination, depending on individual needs.

Accessibility preferences are saved locally in your browser so that chosen settings persist between visits on the same device.

The site also includes:

* Keyboard-accessible navigation throughout
* Visible focus indicators for keyboard users
* Skip links to allow users to bypass repeated navigation
* Screen-reader-friendly markup and ARIA attributes where appropriate

----

== Testing and evaluation ==

Accessibility has been evaluated using a combination of:

* '''Manual testing''', including:
** Keyboard-only navigation
** Visual inspection of focus visibility, contrast, and readability
** Screen-reader testing using macOS VoiceOver
* '''Automated testing''', including:
** Chrome Lighthouse accessibility audits

Recent Lighthouse audits score the site highly for accessibility, both with accessibility tools enabled and with the default presentation.

Testing has been carried out in current versions of major browsers, including Chrome, Safari, Firefox, and Opera.

----

== Known limitations and design choices ==

We are working with the base MediaWiki site build, which in itself may have some accessibility challenges. We have not worked to remedy these if they exist or are aware of them. Some automated accessibility tools may report warnings that do not represent barriers for users.

In particular:

* '''Navigation and tool lists are ordered logically rather than alphabetically.'''
Lists are structured to reflect editorial or task-based priorities rather than alphabetical order. WCAG does not require alphabetical ordering, only that content is presented in a logical and meaningful sequence.

* '''Link colour contrast warnings may appear in automated tests.'''
In high-contrast modes, links are underlined and use the same colour as surrounding text. This approach avoids reliance on colour perception alone and follows established high-contrast accessibility patterns used by operating systems and assistive technologies. Manual testing confirms that links are clear and usable for both sighted users and screen-reader users.

* '''Editor toolbar in high-contrast mode'''

When high-contrast mode is enabled, most of the site switches to a black background with yellow text for maximum readability or black background with white text depending on the user's choice. The page editor toolbar (for example, Bold, Italic, Link, Image and related controls) uses a mixture of icons and system styling provided by MediaWiki. To avoid disrupting the editor’s behaviour or hiding important controls, these toolbar icons are not recoloured in high-contrast mode. In this area, text labels and tabs may retain their original colours to preserve legibility and usability. This ensures: * editor controls remain visible and functional * keyboard and screen-reader access is unaffected * the editor behaves consistently across browsers

Screen readers announce all editor controls correctly, and full keyboard access is supported.

This approach prioritises reliability and accessibility over visual uniformity.
These design choices are intentional and are reviewed periodically.

----

== Browser and assistive technology support ==

The site is designed to work with modern web browsers and commonly used assistive technologies, including screen readers and keyboard navigation.

While the site should function in other environments, explicit testing has focused on current desktop browsers.

----

== Feedback and contact ==

If you encounter any accessibility barriers or have suggestions for improvement, please contact us via the site’s contact page or speak to a member of the Heritage Centre team.

Feedback is welcomed and helps guide future improvements to the site.

----

''This accessibility statement is reviewed periodically and updated as the site evolves.''

== Accessibility help ==

This wiki includes simple accessibility options from the menu screen.

Screen readers: The toolbar is keyboard navigable and labelled for screen readers.

== What’s remembered? ==

The following settings are 'remembered' on your device - these are stored in local storage and not cookies.

* High Contrast Yellow, High Contrast White and Contrast Reset
* Underline of links on/off
* Text spacing setting
* (Large) Cursor Yellow or Cursor White selected or Cursor reset
* Reading ruler on/off
* Text size
== Keyboard use: ==

* Esc closes the accessibility panel
* Tab / Shift+Tab to move between controls
* Enter to activate a button
* Reveal navigation: use on-screen arrows (or ←/→ if enabled)

Skip links: appear at the top when you Tab (Content / Navigation / Search / Accessibility).
== Known limits ==
Some pages/skins may have rare elements not fully themed. If you report them to us will will endeavour to fix them. Thank you.
== Accessibility options ==

* Text size and spacing controls change readability on the menu and overlays.
* Contrast provides options for standard and high-contrast modes. Links are shown in blue and underlined to ensure they are clearly distinguishable from body text.
* Two different large cursors options (white or yellow) can make the pointer easier to see.
* Horizontal reading ruler to guide the user on the screen.
* Underline links for clarity.

Selected controls are retained between pages and site visits for the individual user.
=== Reset ===
The reset button in the accessibility gadget clears all current settings back to their default states.
== Access Keys ==

The Timeless skin for MediaWiki uses the standard MediaWiki access key system, which allows for fast keyboard navigation across desktop, mobile, and tablet layouts

The modifier key (usually Alt+Shift on Windows/Linux or Ctrl+Option on macOS) must be used in combination with the characters listed below.
=== Page Action & View Shortcuts ===

* e - Edit the current page (or view source)
* t - View the talk/discussion page
* h - View page history
* c - View the main content page (if in a talk namespace)
* + - Add a new section/comment to a talk page
* m - Move (rename) the current page
* d - Delete the current page
* w - Watch or unwatch the current page
* p - View the printable version of the page
* k - View pages that link here ("What links here")
=== Navigation & Search Shortcuts ===

* f - Jump to the search box
* z - Go to the main page
* r - Go to Recent Changes
* x - Go to a random page
* q - Go to the special pages index
=== Personal & User Tools ===

* . - Go to your user page
* y - Go to your contributions
* l - Go to your watchlist
* o - Log in
* o - Log out
=== Editing Shortcuts ===

* s - Save/Publish the changes you are editing
* p - Preview your edit
* v - Show changes (diff)
* b - Jump to the edit summary box
* i - Toggle the "minor edit" checkmark
=== How to use them ===

* Windows/Linux (Firefox/Chrome/Edge): Alt + Shift + [Key]
* macOS (Safari/Chrome/Firefox): Ctrl + Option + [Key]

'''Note:''' Some browsers might require just the Alt key, or a combination of Alt and Shift.

MediaWiki:Gadget-bhc-accessibility.css

2026-01-29T08:41:34Z

Steve:

/*
⚠️ Do not reorder rules below this line — contrast overrides depend on cascade order.
*/

/* =========================================================
BHC Accessibility Gadget – MediaWiki / Timeless
========================================================= */

/* ---------------------------------------------------------
Variables
--------------------------------------------------------- */
:root{
--a11y-bg: #111827;
--a11y-border: #374151;
--a11y-fg: #ffffff;
--a11y-focus: #FFBF47;
--a11y-link-underline: #3366CC; /* MediaWiki link blue */
--a11y-menu-width: 340px;
--a11y-contrast-fg: #FFD400;
}

/* Timeless: stop skin CSS shrinking the accessibility icon */
body.skin-timeless .a11y-toggle{
font-size: 16px !important;
line-height: 1 !important;
}
body.skin-timeless .a11y-toggle svg{
display: block !important;
width: 36px !important;
height: 36px !important;
min-width: 36px !important;
min-height: 36px !important;
max-width: none !important;
max-height: none !important;

/* If the glyph still looks small, keep this: */
transform: scale(1.15) !important;
transform-origin: 50% 50% !important;
}
/* Make sure fill isn’t being altered by skin rules */
body.skin-timeless .a11y-toggle svg path{
fill: currentColor !important;
}

/* ---------------------------------------------------------
Skip links (appear when focused)
--------------------------------------------------------- */
.skip-link{
position: absolute;
left: 12px;
top: 12px;
z-index: 11000;

padding: 10px 14px;
border-radius: 8px;

background: #111827;
color: #fff;
text-decoration: none;

top: -9999px; /* hidden off-screen by default */
transition: none; /* no animation needed when hidden */

border: 2px solid var(--a11y-focus);
}
.skip-link:focus,
.skip-link:focus-visible{
top: 12px; /* bring into view when focused */
outline: none;
z-index: 11001;
}

body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .skip-link{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-fg) !important;
}

/* Stack multiple skip links neatly when tabbing through them */
#a11y-skip-content:focus,
#a11y-skip-content:focus-visible{ top: 56px; }

#a11y-skip-nav:focus,
#a11y-skip-nav:focus-visible{ top: 100px; }

#a11y-skip-search:focus,
#a11y-skip-search:focus-visible{ top: 144px; }

/* ---------------------------------------------------------
Floating accessibility toggle
--------------------------------------------------------- */
.a11y-toggle{
position: fixed;
right: 16px;
bottom: 16px;
z-index: 10001;

width: 56px;
height: 56px;
border-radius: 50%;

background: #005FCC;
border: 2px solid #ffffff;
color: #ffffff;

display: inline-flex;
align-items: center;
justify-content: center;

box-shadow: 0 10px 24px rgba(0,0,0,0.25);
cursor: pointer;
}
.a11y-toggle:hover{ background:#0047A6; }
.a11y-toggle:focus-visible{
outline: 3px solid var(--a11y-focus);
outline-offset: 3px;
}
.a11y-toggle svg{
width: 44px;
height: 44px;
fill: currentColor;
}

/* ---------------------------------------------------------
Panel
--------------------------------------------------------- */
/* Compact current-settings line (display-only) */
.a11y-status{
font-size: 13px;
line-height: 1.25;
margin: 6px 0 8px;
opacity: 0.95;
}

.a11y-panel{
position: fixed;
right: 14px;
bottom: 76px;
z-index: 10000;

width: var(--a11y-menu-width);
max-width: calc(100vw - 28px);

background: var(--a11y-bg);
border: 1px solid var(--a11y-border);
color: var(--a11y-fg);
border-radius: 16px;
padding: 12px;

box-shadow: 0 14px 40px rgba(0,0,0,0.28);
}
.a11y-panel[hidden]{ display:none !important; }

/* Header */
.a11y-head{
display:flex;
align-items:center;
justify-content: space-between;
margin-bottom: 10px;
}
.a11y-head h2{
font-size: 16px;
margin: 0;
}
.a11y-help{
width: 28px;
height: 28px;
border-radius: 50%;
background: #fff;
color: #111827;
font-weight: 900;
text-decoration: none;
display:flex;
align-items:center;
justify-content:center;
}
.a11y-help:focus-visible{
outline: 3px solid var(--a11y-focus);
outline-offset: 2px;
}

/* Buttons */
.a11y-row{
display:flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 10px;
}
.a11y-btn{
border: 1px solid #D1D5DB;
background:#fff;
color:#111827;
padding: 8px 10px;
border-radius: 999px;
font-size: 14px;
font-weight: 800;
cursor: pointer;
}
.a11y-btn[aria-pressed="true"]{
background:#111827;
color:#fff;
}
.a11y-btn:focus-visible{
outline: 3px solid var(--a11y-focus);
outline-offset: 2px;
}

.a11y-hint{
font-size: 13px;
color: var(--a11y-fg);
line-height: 1.4;
}

/* Screen reader only */
.a11y-sr{
position:absolute;
width:1px;
height:1px;
overflow:hidden;
clip:rect(0,0,0,0);
}

/* =========================================================
Feature classes
========================================================= */

/* ------------------------------
High contrast (black/yellow/blue)
------------------------------ */

/* ------------------------------
High contrast presets
- Use ONE of these on <body>:
- a11y-contrast-yellow (yellow on black)
- a11y-contrast-white (white on black)
- Back-compat: a11y-contrast behaves as yellow on black
------------------------------ */
body.a11y-contrast,
body.a11y-contrast-yellow{
--a11y-contrast-fg: #FFD400;
--a11y-contrast-fg-hover: #FFE066;
--a11y-contrast-link: #36C; /* MediaWiki blue */
--a11y-contrast-border-70: rgba(255,212,0,.7);
--a11y-contrast-border-75: rgba(255,212,0,.75);
--a11y-contrast-border-85: rgba(255,212,0,.85);
}
body.a11y-contrast-white{
--a11y-contrast-fg: #FFFFFF;
--a11y-contrast-fg-hover: #E6E6E6;
--a11y-contrast-link: #9ECBFF; /* lighter link blue on black */
--a11y-contrast-border-70: rgba(255,255,255,.7);
--a11y-contrast-border-75: rgba(255,255,255,.75);
--a11y-contrast-border-85: rgba(255,255,255,.85);
}

body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white){
background:#000 !important;
color: var(--a11y-contrast-fg) !important;

/* Gadget UI variables in contrast mode */
--a11y-bg: #000;
--a11y-border: var(--a11y-contrast-border-70);
--a11y-fg: var(--a11y-contrast-fg);
--a11y-focus: var(--a11y-contrast-fg);
--a11y-link-underline: var(--a11y-contrast-link);
}

/* =========================================================
HIGH CONTRAST: Links must be visually distinct
Blue + underline to meet WCAG 1.4.1
========================================================= */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a:visited{
color: var(--bhc-link, #005DB3) !important;
text-decoration: underline !important;
text-decoration-thickness: 2px;
text-underline-offset: 0.15em;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a:hover,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a:focus-visible{
text-decoration-thickness: 3px;
}

/* Headings */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) h1,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) h2,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) h3,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) h4,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) h5,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) h6{
color:var(--a11y-contrast-fg) !important;
border-color:var(--a11y-contrast-fg) !important;
}

/* Main containers (Timeless needs explicit coverage) */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-wrapper,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-content-container,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-content,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-body,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-parser-output{
background:#000 !important;
color:var(--a11y-contrast-fg) !important;
}

/* Sidebars / tools */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #site-navigation,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #site-tools,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #page-tools,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-portlet,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-portlet-body{
background:#000 !important;
color:var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-70) !important;
}

/* FIX: portlet text stays yellow (titles, non-links) */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-portlet-body{
color:var(--a11y-contrast-fg) !important;
}

/* FIX: portlet links should be blue + underlined */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-portlet-body a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-portlet-body a:visited{
color: #3366CC !important;
text-decoration: underline !important;
text-decoration-thickness: 2px;
text-underline-offset: 0.15em;
}

/* CRITICAL FIX: many MW links are <a><span>text</span></a>
The span was inheriting/being forced yellow.
Make link contents inherit the link colour. */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-portlet-body a *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer a *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer-container a *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #footer-list a *{
color: inherit !important;
}

/* A11y UI in contrast */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .a11y-panel,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .a11y-toggle{
background:#000 !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .a11y-btn{
background:#000 !important;
color:var(--a11y-contrast-fg) !important;
border:2px solid var(--a11y-contrast-border-85) !important;
}

/* FIX: “?” help button in contrast */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .a11y-help{
background:#000 !important;
color:var(--a11y-contrast-fg) !important;
border:2px solid var(--a11y-contrast-border-85) !important;
}

/* ------------------------------
Underline links
------------------------------ */
body.a11y-underline-links a{
text-decoration: none !important;
border-bottom: 2px solid var(--a11y-link-underline);
padding-bottom: 0.05em;
}
body.a11y-underline-links:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a{
border-bottom-color: #3366CC !important;
}

/* ------------------------------
Text spacing
------------------------------ */
body.a11y-spacing-plus{
line-height: 1.8 !important;
letter-spacing: 0.06em !important;
word-spacing: 0.16em !important;
}
body.a11y-spacing-minus{
line-height: 1.45 !important;
letter-spacing: 0.01em !important;
word-spacing: 0.02em !important;
}

/* ------------------------------
Large cursors (wiki-hosted)
------------------------------ */
body.a11y-cursor-white,
body.a11y-cursor-white *{
cursor: url("/index.php/Special:FilePath/large-arrow-white-64.png") 8 8, auto !important;
}
body.a11y-cursor-yellow,
body.a11y-cursor-yellow *{
cursor: url("/index.php/Special:FilePath/large-arrow-yellow-64.png") 8 8, auto !important;
}

/* ------------------------------
Reading ruler
------------------------------ */
#a11y-ruler{
position: fixed;
left: 0;
top: 0;
height: 22px;
width: 100vw;
z-index: 9999;
pointer-events: none;

background: linear-gradient(
to bottom,
var(--a11y-contrast-fg) 0%,
var(--a11y-contrast-fg) 40%,
#000000 40%,
#000000 60%,
var(--a11y-contrast-fg) 60%,
var(--a11y-contrast-fg) 100%
);
}
#a11y-ruler[hidden]{ display:none !important; }

/* =========================================================
MediaWiki: extra HIGH CONTRAST coverage (Timeless + Vector)
Add at END of Gadget CSS so it wins.
========================================================= */

/* TOC */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #toc,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .toc,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #toc * ,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .toc *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-75) !important;
}

/* Category links area */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-normal-catlinks,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-normal-catlinks *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .catlinks,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .catlinks *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-75) !important;
}

/* Wikitables */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) table,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) table *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikitable,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikitable *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-datatable,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-datatable *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-75) !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikitable th,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) table th{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
}

/* Figures/captions */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) figure,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) figure *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-halign-center,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-halign-centre,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-halign-center *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-halign-centre *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
}

/* Thumb frames / image captions */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .thumb,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .thumb *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .thumbinner,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .thumbinner *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .thumbcaption,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .thumbcaption *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-75) !important;
}

/* Code-like blocks */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) pre,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) pre *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) code,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) code *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-75) !important;
}

/* =========================================================
HIGH CONTRAST: Footer (Vector + Timeless)
========================================================= */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer-container{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
background-image: none !important;
border-top: 10px solid var(--a11y-contrast-fg) !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #footer-list,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #footer-list *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #footer-icons,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #footer-icons *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
}

/* FIX: footer links should be blue (not yellow) */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer a:visited{
color: #3366CC !important;
text-decoration: underline !important;
text-decoration-thickness: 2px;
text-underline-offset: 0.15em;
}

body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer .mw-portlet,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer .mw-portlet-body{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-75) !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer hr{
border-color: var(--a11y-contrast-fg) !important;
}

/* =========================================================
Underline links: ensure TOC wins
========================================================= */
body.a11y-underline-links #toc a,
body.a11y-underline-links .toc a{
border-bottom-color: var(--a11y-link-underline) !important;
}
body.a11y-underline-links:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #toc a,
body.a11y-underline-links:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .toc a{
border-bottom-color: #3366CC !important;
}

/* =========================================================
HIGH CONTRAST: Header + search + user tools
========================================================= */

/* Base header + content containers */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-header-container,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-content-container{
background: #000 !important;
background-image: none !important;
}

/* Timeless header containers */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-header,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-header-container .ts-inner,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-header-container .mw-body,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-header-container .mw-portlet,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-header-container .mw-portlet-body{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
background-image: none !important;
border-color: var(--a11y-contrast-fg) !important;
}

/* Title */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #p-logo-text #p-banner,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #p-banner.mw-wiki-title,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #p-logo-text .mw-wiki-title{
color: var(--a11y-contrast-fg) !important;
}

/* Strapline */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #bhc-strapline,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .bhc-strapline{
color: var(--a11y-contrast-fg) !important;
}

/* Search box wrappers */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #p-search,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #simpleSearch{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
}

/* Search input (generic) */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #searchInput,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #p-search #searchInput,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #p-search input[type="search"],
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #simpleSearch input[type="search"]{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
caret-color: var(--a11y-contrast-fg) !important;
border: 2px solid var(--a11y-contrast-fg) !important;
box-shadow: none !important;
-webkit-text-fill-color: var(--a11y-contrast-fg) !important; /* Safari/WebKit */
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #searchInput::placeholder,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #simpleSearch input[type="search"]::placeholder{
color: var(--a11y-contrast-border-75) !important;
}

/* Timeless-specific: beat background:#fff !important */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #p-search input[type="search"],
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #p-search #searchInput{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
caret-color: var(--a11y-contrast-fg) !important;
border: 2px solid var(--a11y-contrast-fg) !important;
-webkit-text-fill-color: var(--a11y-contrast-fg) !important;
}

/* Search submit button */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) input#mw-searchButton,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) input#searchButton,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-searchButton{
background-color: #000 !important;
border: 2px solid var(--a11y-contrast-border-85) !important;
filter: none !important;
}

/* Suggestions dropdown */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .suggestions,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .suggestions-results,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .suggestions-special,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .suggestions a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .suggestions-result,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-searchSuggest,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-searchSuggest *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-85) !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .suggestions a:visited{
color: var(--a11y-contrast-fg) !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .suggestions-result-current,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .suggestions a:hover{
background: #111 !important;
}

/* Vector search tabs area */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-search-profile-tabs,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-search-profile-tabs *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-85) !important;
}

/* =========================================================
HIGH CONTRAST: Personal tools (reduce border clutter)
========================================================= */

/* Force yellow text to beat Timeless dark text */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal h2,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal h3,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal .mw-portlet,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal .mw-portlet *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless .mw-portlet-body,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless .mw-portlet-body *{
color: var(--a11y-contrast-fg) !important;
}

/* Force black background to beat Timeless white dropdown */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal .dropdown,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal .mw-portlet-body,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal-inner,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal-inner *{
background: #000 !important;
background-image: none !important;
}

/* Keep ONE border only (container), remove nested borders */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #personal .dropdown,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #personal-inner.dropdown,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #personal .mw-portlet-body{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border: 2px solid var(--a11y-contrast-border-85) !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #personal .mw-portlet-body *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #personal-inner.dropdown *{
background: transparent !important;
color: var(--a11y-contrast-fg) !important;
border: 0 !important;
outline-color: var(--a11y-contrast-fg) !important;
}
/* Leave links to global link rules */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #personal a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #personal a:visited{
background: transparent !important;
border-color: transparent !important;
}

/* =========================================================
HIGH CONTRAST: Timeless containers that fight back
========================================================= */

/* Timeless forces grey content container */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-content-container{
background: #000 !important;
background-image: none !important;
}

/* Timeless header container sometimes white at breakpoints */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-header-container{
background: #000 !important;
background-image: none !important;
}

/* Timeless related-navigation sidebar chunk at ≥1340px */
@media screen and (min-width: 1340px){
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless
#mw-related-navigation .sidebar-chunk{
background: #000 !important;
background-image: none !important;
border-color: var(--a11y-contrast-border-85) !important;
box-shadow: none !important;
}
}

/* mw-content border colour in high-contrast mode */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-content{
border-color: var(--a11y-contrast-fg) !important;
}

/* =========================================================
EDIT MODE: textarea and editOptions
========================================================= */

/* Edit textarea */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #wpTextbox1,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) textarea.mw-editfont-monospace{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
caret-color: var(--a11y-contrast-fg) !important;
border: 2px solid var(--a11y-contrast-fg) !important;
box-shadow: none !important;
-webkit-text-fill-color: var(--a11y-contrast-fg) !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #wpTextbox1::placeholder{
color: var(--a11y-contrast-border-75) !important;
}

/* editOptions bar */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-85) !important;
box-shadow: none !important;
}

/* Don’t override links here — let your global contrast link styling apply */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions a:visited{
background: transparent !important;
border-color: transparent !important;
}

/* Buttons + inputs inside editOptions */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions button,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions input,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions select,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions textarea,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions .mw-ui-button,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions .oo-ui-buttonElement-button{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border: 2px solid var(--a11y-contrast-border-85) !important;
box-shadow: none !important;
-webkit-text-fill-color: var(--a11y-contrast-fg) !important;
}

/* Focus visibility */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions button:focus-visible,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions input:focus-visible,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions select:focus-visible,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions .mw-ui-button:focus-visible,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions .oo-ui-buttonElement-button:focus-visible{
outline: 3px solid var(--a11y-contrast-fg) !important;
outline-offset: 2px !important;
}

/* =========================================================
EDIT MODE: Codex (CDX) message banners (e.g. interface warning)
========================================================= */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .cdx-message,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .cdx-message--block,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .cdx-message--error{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border: 2px solid var(--a11y-contrast-border-85) !important;
box-shadow: none !important;
}
/* Inner content */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .cdx-message__content,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .cdx-message__content *{
background: transparent !important;
color: var(--a11y-contrast-fg) !important;
}
/* Icon */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .cdx-message__icon,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .cdx-message__icon *{
color: var(--a11y-contrast-fg) !important;
fill: var(--a11y-contrast-fg) !important;
}
/* Emphasis */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .cdx-message strong{
color: var(--a11y-contrast-fg) !important;
}

/* FIX: Timeless sidebar chunks stay light at 1100–1339px.
Force black/yellow in high-contrast mode only. */
@media screen and (min-width: 1100px) and (max-width: 1339px){
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-site-navigation .sidebar-chunk,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-related-navigation .sidebar-chunk{
background: #000 !important;
background-image: none !important;
border-color: var(--a11y-contrast-border-85) !important;
box-shadow: none !important;
}

/* If any text inside is still dark, force it yellow */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-site-navigation .sidebar-chunk *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-related-navigation .sidebar-chunk *{
color: var(--a11y-contrast-fg) !important;
}

/* …but if it’s a LINK (or inside a link), keep it blue */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-site-navigation .sidebar-chunk a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-site-navigation .sidebar-chunk a:visited,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-related-navigation .sidebar-chunk a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-related-navigation .sidebar-chunk a:visited{
color: #3366CC !important;
text-decoration: underline !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-site-navigation .sidebar-chunk a *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-related-navigation .sidebar-chunk a *{
color: inherit !important;
}
}

/* FIX (stronger): Timeless sidebar chunks at 1100–1339px still light.
Must beat the skin rule in the same breakpoint. */
@media screen and (min-width: 1100px) and (max-width: 1339px){
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-site-navigation .sidebar-chunk,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-related-navigation .sidebar-chunk{
background: #000 !important;
background-image: none !important;
border-color: var(--a11y-contrast-border-85) !important;
box-shadow: none !important;
}

body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-site-navigation .sidebar-chunk *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-related-navigation .sidebar-chunk *{
color: var(--a11y-contrast-fg) !important;
}

/* …but links stay blue */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-site-navigation .sidebar-chunk a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-site-navigation .sidebar-chunk a:visited,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-related-navigation .sidebar-chunk a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-related-navigation .sidebar-chunk a:visited{
color: #3366CC !important;
text-decoration: underline !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-site-navigation .sidebar-chunk a *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-related-navigation .sidebar-chunk a *{
color: inherit !important;
}
}

/* =========================================================
EMERGENCY: ensure the accessibility toggle is visible
(keep at VERY END)
========================================================= */
#a11y-toggle.a11y-toggle{
position: fixed !important;
right: 16px !important;
bottom: 16px !important;

display: inline-flex !important;
visibility: visible !important;
opacity: 1 !important;

z-index: 2147483647 !important;
pointer-events: auto !important;

transform: none !important;
}
#a11y-toggle.a11y-toggle svg{
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}

/* =========================================================
HIGH CONTRAST: Scrollbars (page + editor)
Supports: Chrome/Safari/Opera (WebKit) + Firefox
Scope: ONLY when body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) is active
========================================================= */

/* ---------- Firefox (Gecko) ---------- */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white),
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) *{
scrollbar-color: var(--a11y-contrast-fg) #000; /* thumb / track */
scrollbar-width: auto; /* or 'thin' if you prefer */
}

/* ---------- Chrome / Safari / Opera (WebKit/Blink) ---------- */
/* Page scrollbars */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white)::-webkit-scrollbar{
width: 14px;
height: 14px; /* horizontal */
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white)::-webkit-scrollbar-track{
background: #000;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white)::-webkit-scrollbar-thumb{
background: var(--a11y-contrast-fg);
border: 3px solid #000; /* creates separation from track */
border-radius: 10px;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white)::-webkit-scrollbar-thumb:hover{
background: var(--a11y-contrast-fg-hover); /* slightly lighter yellow on hover */
}

/* Editor + common scrollable containers (safety net) */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) textarea,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #wpTextbox1,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui *{
scrollbar-color: var(--a11y-contrast-fg) #000; /* Firefox for these elements too */
}

/* FIX: WikiEditor tool-select dropdown text becomes unreadable
because it inherits yellow from body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white). */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui-toolbar .tool.tool-select,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui-toolbar .tool.tool-select *{
color: #222 !important; /* readable on the tool-select's light background */
}

/* FIX: WikiEditor toolbar tabs readability in high-contrast mode */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui-toolbar .tabs a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui-toolbar .tabs a:visited{
color: #0645ad !important; /* MediaWiki blue */
}

/* Active tab: keep it dark for readability on light background */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui-toolbar .tabs span.tab a.current,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui-toolbar .tabs span.tab a.current:visited{
color: #222 !important;
}

body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) textarea::-webkit-scrollbar,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #wpTextbox1::-webkit-scrollbar,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui::-webkit-scrollbar{
width: 14px;
height: 14px;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) textarea::-webkit-scrollbar-track,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #wpTextbox1::-webkit-scrollbar-track,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui::-webkit-scrollbar-track{
background: #000;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) textarea::-webkit-scrollbar-thumb,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #wpTextbox1::-webkit-scrollbar-thumb,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui::-webkit-scrollbar-thumb{
background: var(--a11y-contrast-fg);
border: 3px solid #000;
border-radius: 10px;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) textarea::-webkit-scrollbar-thumb:hover,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #wpTextbox1::-webkit-scrollbar-thumb:hover,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui::-webkit-scrollbar-thumb:hover{
background: var(--a11y-contrast-fg-hover);
}

/* Try to target root scrolling element where supported */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) html{
scrollbar-color: var(--a11y-contrast-fg) #000;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) html::-webkit-scrollbar{
width: 14px;
height: 14px;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) html::-webkit-scrollbar-track{
background: #000;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) html::-webkit-scrollbar-thumb{
background: var(--a11y-contrast-fg);
border: 3px solid #000;
border-radius: 10px;
}

/* =========================================================
FINAL OVERRIDE (brute force):
High-contrast links must be blue + underlined everywhere,
including link text wrapped in spans inside portlets/footer.
PUT THIS AT THE VERY END OF THE FILE.
========================================================= */

body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a:visited{
color: #3366CC !important;
text-decoration: underline !important;
text-decoration-thickness: 2px !important;
text-underline-offset: 0.15em !important;
}

/* Critical: if link text is wrapped (e.g. <a><span>Text</span></a>),
force ALL children inside links to inherit the link colour. */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a:visited *{
color: inherit !important;
}

/* Extra specificity for the problem zones (beats Timeless + portlet-body * rules) */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless .mw-portlet-body a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless .mw-portlet-body a:visited,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-footer a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-footer a:visited,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-footer-container a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-footer-container a:visited{
color: #3366CC !important;
text-decoration: underline !important;
}

body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless .mw-portlet-body a *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless .mw-portlet-body a:visited *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-footer a *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-footer a:visited *{
color: inherit !important;
}

/* =========================================================
FINAL FIX: #personal (user tools) links
The portlet-body * rule forces yellow.
Override ONLY for links and their contents.
========================================================= */

body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal a:visited{
color: #3366CC !important;
text-decoration: underline !important;
}

body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal a *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal a:visited *{
color: inherit !important;
}

Accessibility

2026-01-29T08:40:24Z

Steve:

= Accessibility =

The Bellingham Heritage Centre Wiki aims to be accessible to as wide an audience as possible, regardless of technology or ability. We recognise that users access the site in many different ways and may have different visual, motor, cognitive, or situational needs.

This page explains the accessibility features available on the site, how we test accessibility, and how to provide feedback.

----

== Accessibility statement ==

The Bellingham Heritage Centre Wiki **aims to conform to WCAG 2.2 AA accessibility standards**.

We are committed to improving accessibility and usability and strive to follow recognised best practice and relevant accessibility guidelines appropriate to a community-run heritage website.

----

== Measures to support accessibility ==

To support accessibility, this site includes a built-in **Accessibility Toolbar**, available on every page.

Using this toolbar, users can:

* Enable a high-contrast display in two choices of colour scheme
* Increase or decrease text size
* Adjust text spacing
* Underline links
* Enable a reading ruler
* Use a high-visibility cursor in two choices of colour

These tools are designed to work independently or in combination, depending on individual needs.

Accessibility preferences are saved locally in your browser so that chosen settings persist between visits on the same device.

The site also includes:

* Keyboard-accessible navigation throughout
* Visible focus indicators for keyboard users
* Skip links to allow users to bypass repeated navigation
* Screen-reader-friendly markup and ARIA attributes where appropriate

----

== Testing and evaluation ==

Accessibility has been evaluated using a combination of:

* '''Manual testing''', including:
** Keyboard-only navigation
** Visual inspection of focus visibility, contrast, and readability
** Screen-reader testing using macOS VoiceOver
* '''Automated testing''', including:
** Chrome Lighthouse accessibility audits

Recent Lighthouse audits score the site highly for accessibility, both with accessibility tools enabled and with the default presentation.

Testing has been carried out in current versions of major browsers, including Chrome, Safari, Firefox, and Opera.

----

== Known limitations and design choices ==

We are working with the base MediaWiki site build, which in itself may have some accessibility challenges. We have not worked to remedy these if they exist or are aware of them. Some automated accessibility tools may report warnings that do not represent barriers for users.

In particular:

* '''Navigation and tool lists are ordered logically rather than alphabetically.'''
Lists are structured to reflect editorial or task-based priorities rather than alphabetical order. WCAG does not require alphabetical ordering, only that content is presented in a logical and meaningful sequence.

* '''Link colour contrast warnings may appear in automated tests.'''
In high-contrast mode, links are distinguished using both colour and underlining, ensuring that links are visually identifiable without relying on colour alone. Manual testing confirms that links are clear and usable for both sighted users and screen-reader users.

* '''Editor toolbar in high-contrast mode'''

When high-contrast mode is enabled, most of the site switches to a black background with yellow text for maximum readability or black background with white text depending on the user's choice. The page editor toolbar (for example, Bold, Italic, Link, Image and related controls) uses a mixture of icons and system styling provided by MediaWiki. To avoid disrupting the editor’s behaviour or hiding important controls, these toolbar icons are not recoloured in high-contrast mode. In this area, text labels and tabs may retain their original colours to preserve legibility and usability. This ensures: * editor controls remain visible and functional * keyboard and screen-reader access is unaffected * the editor behaves consistently across browsers

Screen readers announce all editor controls correctly, and full keyboard access is supported.

This approach prioritises reliability and accessibility over visual uniformity.
These design choices are intentional and are reviewed periodically.

----

== Browser and assistive technology support ==

The site is designed to work with modern web browsers and commonly used assistive technologies, including screen readers and keyboard navigation.

While the site should function in other environments, explicit testing has focused on current desktop browsers.

----

== Feedback and contact ==

If you encounter any accessibility barriers or have suggestions for improvement, please contact us via the site’s contact page or speak to a member of the Heritage Centre team.

Feedback is welcomed and helps guide future improvements to the site.

----

''This accessibility statement is reviewed periodically and updated as the site evolves.''

== Accessibility help ==

This wiki includes simple accessibility options from the menu screen.

Screen readers: The toolbar is keyboard navigable and labelled for screen readers.

== What’s remembered? ==

The following settings are 'remembered' on your device - these are stored in local storage and not cookies.

* High Contrast Yellow, High Contrast White and Contrast Reset
* Underline of links on/off
* Text spacing setting
* (Large) Cursor Yellow or Cursor White selected or Cursor reset
* Reading ruler on/off
* Text size
== Keyboard use: ==

* Esc closes the accessibility panel
* Tab / Shift+Tab to move between controls
* Enter to activate a button
* Reveal navigation: use on-screen arrows (or ←/→ if enabled)

Skip links: appear at the top when you Tab (Content / Navigation / Search / Accessibility).
== Known limits ==
Some pages/skins may have rare elements not fully themed. If you report them to us will will endeavour to fix them. Thank you.
== Accessibility options ==

* Text size and spacing controls change readability on the menu and overlays.
* Contrast provides options for standard and high-contrast modes. Links are shown in blue and underlined to ensure they are clearly distinguishable from body text.
* Two different large cursors options (white or yellow) can make the pointer easier to see.
* Horizontal reading ruler to guide the user on the screen.
* Underline links for clarity.

Selected controls are retained between pages and site visits for the individual user.
=== Reset ===
The reset button in the accessibility gadget clears all current settings back to their default states.
== Access Keys ==

The Timeless skin for MediaWiki uses the standard MediaWiki access key system, which allows for fast keyboard navigation across desktop, mobile, and tablet layouts

The modifier key (usually Alt+Shift on Windows/Linux or Ctrl+Option on macOS) must be used in combination with the characters listed below.
=== Page Action & View Shortcuts ===

* e - Edit the current page (or view source)
* t - View the talk/discussion page
* h - View page history
* c - View the main content page (if in a talk namespace)
* + - Add a new section/comment to a talk page
* m - Move (rename) the current page
* d - Delete the current page
* w - Watch or unwatch the current page
* p - View the printable version of the page
* k - View pages that link here ("What links here")
=== Navigation & Search Shortcuts ===

* f - Jump to the search box
* z - Go to the main page
* r - Go to Recent Changes
* x - Go to a random page
* q - Go to the special pages index
=== Personal & User Tools ===

* . - Go to your user page
* y - Go to your contributions
* l - Go to your watchlist
* o - Log in
* o - Log out
=== Editing Shortcuts ===

* s - Save/Publish the changes you are editing
* p - Preview your edit
* v - Show changes (diff)
* b - Jump to the edit summary box
* i - Toggle the "minor edit" checkmark
=== How to use them ===

* Windows/Linux (Firefox/Chrome/Edge): Alt + Shift + [Key]
* macOS (Safari/Chrome/Firefox): Ctrl + Option + [Key]

'''Note:''' Some browsers might require just the Alt key, or a combination of Alt and Shift.

MediaWiki:Gadget-bhc-accessibility.js

2026-01-29T08:33:23Z

Steve:

/*
⚠️ Do not reorder rules below this line — contrast overrides depend on cascade order.
*/

(() => {
"use strict";

// =========================================================
// Storage policy:
// - localStorage first
// - cookie fallback only if localStorage unavailable
// =========================================================
const LS_KEY = "bhc_a11y_state_v2"; // bumped because state model changed
const COOKIE_PREFIX = "a11y_";

function canUseLocalStorage() {
try {
const k = "__a11y_test__";
window.localStorage.setItem(k, "1");
window.localStorage.removeItem(k);
return true;
} catch (e) {
return false;
}
}
const HAS_LS = canUseLocalStorage();

// Cookie helpers (fallback)
function setCookie(name, value, days = 365) {
const exp = new Date();
exp.setTime(exp.getTime() + days * 24 * 60 * 60 * 1000);
document.cookie =
`${encodeURIComponent(COOKIE_PREFIX + name)}=${encodeURIComponent(String(value))}; ` +
`expires=${exp.toUTCString()}; path=/; SameSite=Lax`;
}
function getCookie(name, fallback = "") {
const key = encodeURIComponent(COOKIE_PREFIX + name) + "=";
const parts = document.cookie.split(";").map(s => s.trim());
for (const p of parts) {
if (p.startsWith(key)) return decodeURIComponent(p.substring(key.length));
}
return fallback;
}
function delCookie(name) {
document.cookie =
`${encodeURIComponent(COOKIE_PREFIX + name)}=; ` +
`expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/; SameSite=Lax`;
}

// Unified read/write
function saveStateToStorage(stateObj) {
if (HAS_LS) {
try {
window.localStorage.setItem(LS_KEY, JSON.stringify(stateObj));
return;
} catch (e) {
// fall through to cookies
}
}
// cookie fallback (per-key)
setCookie("contrastMode", stateObj.contrastMode); // off|yellow|white
setCookie("underline", stateObj.underline ? "1" : "0");
setCookie("spacing", stateObj.spacing);
setCookie("cursor", stateObj.cursor); // off|white|yellow
setCookie("ruler", stateObj.ruler ? "1" : "0");
setCookie("fontPct", String(stateObj.fontPct));
}

function loadStateFromStorage() {
if (HAS_LS) {
try {
const raw = window.localStorage.getItem(LS_KEY);
if (!raw) return null;
const obj = JSON.parse(raw);
return (obj && typeof obj === "object") ? obj : null;
} catch (e) {
// fall through to cookies
}
}
// cookie fallback (legacy / no-LS)
return {
contrastMode: getCookie("contrastMode", "off"),
underline: getCookie("underline", "0") === "1",
spacing: getCookie("spacing", "off"),
cursor: getCookie("cursor", "off"),
ruler: getCookie("ruler", "0") === "1",
fontPct: parseInt(getCookie("fontPct", "100"), 10)
};
}

function clearStoredState() {
if (HAS_LS) {
try { window.localStorage.removeItem(LS_KEY); } catch (e) {}
return;
}
["contrastMode","underline","spacing","cursor","ruler","fontPct"].forEach(delCookie);
}

// =========================================================
// State + announcements
// =========================================================
const STATE = {
contrastMode: "off", // off | yellow | white
underline: false,
spacing: "off", // off | plus | minus
cursor: "off", // off | white | yellow
ruler: false,
fontPct: 100 // 90..175
};

const FONT_STEPS = [90, 102, 114, 126, 138, 150, 162, 175];

let liveEl = null;
let statusEl = null;
let rulerEl = null;
let rulerY = 0;

function announce(msg) {
if (!liveEl) return;
liveEl.textContent = "";
setTimeout(() => { liveEl.textContent = msg; }, 10);
}

function clamp(n, min, max) { return Math.max(min, Math.min(max, n)); }

function nextFontPct(current, dir) {
const cur = clamp(current, FONT_STEPS[0], FONT_STEPS[FONT_STEPS.length - 1]);
let idx = 0;
for (let i = 0; i < FONT_STEPS.length; i++) {
if (FONT_STEPS[i] >= cur) { idx = i; break; }
}
if (dir > 0) return FONT_STEPS[Math.min(FONT_STEPS.length - 1, idx + 1)];
if (FONT_STEPS[idx] === cur) return FONT_STEPS[Math.max(0, idx - 1)];
return FONT_STEPS[Math.max(0, idx - 1)];
}

// =========================================================
// Status line (display-only)
// =========================================================
function updateStatusLine() {
if (!statusEl) return;

const contrast =
STATE.contrastMode === "yellow" ? "Contrast: Yellow/Black" :
STATE.contrastMode === "white" ? "Contrast: White/Black" :
"Contrast: Off";

const text = `Text ${STATE.fontPct}%`;
const underline = STATE.underline ? "Links: Underlined" : "Links: Normal";
const spacing =
STATE.spacing === "plus" ? "Spacing +" :
STATE.spacing === "minus" ? "Spacing −" :
"Spacing: Normal";
const cursor =
STATE.cursor === "yellow" ? "Cursor: Yellow" :
STATE.cursor === "white" ? "Cursor: White" :
"Cursor: Off";
const ruler = STATE.ruler ? "Ruler: On" : "Ruler: Off";

statusEl.textContent = `Status: ${contrast} · ${text} · ${underline} · ${spacing} · ${cursor} · ${ruler}`;
}

// =========================================================
// Apply state to DOM
// =========================================================
function applyState() {
// Contrast scheme classes
const contrastOn = STATE.contrastMode !== "off";
document.body.classList.toggle("a11y-contrast", contrastOn);
document.body.classList.toggle("a11y-contrast-yellow", STATE.contrastMode === "yellow");
document.body.classList.toggle("a11y-contrast-white", STATE.contrastMode === "white");

// Other features
document.body.classList.toggle("a11y-underline-links", !!STATE.underline);

document.body.classList.toggle("a11y-spacing-plus", STATE.spacing === "plus");
document.body.classList.toggle("a11y-spacing-minus", STATE.spacing === "minus");

document.body.classList.toggle("a11y-cursor-white", STATE.cursor === "white");
document.body.classList.toggle("a11y-cursor-yellow", STATE.cursor === "yellow");

document.documentElement.style.fontSize = `${STATE.fontPct}%`;

ensureRuler();
if (STATE.ruler) {
rulerEl.hidden = false;
setRulerY(rulerY || Math.floor(window.innerHeight / 2));
enableRulerListeners();
} else {
if (rulerEl) rulerEl.hidden = true;
disableRulerListeners();
}

updateUiButtons();
updateStatusLine();
saveStateToStorage(STATE);
}

// =========================================================
// Ruler support
// =========================================================
function ensureRuler() {
if (rulerEl) return;
rulerEl = document.getElementById("a11y-ruler");
if (!rulerEl) {
rulerEl = document.createElement("div");
rulerEl.id = "a11y-ruler";
rulerEl.hidden = true;
document.body.appendChild(rulerEl);
}
}

function setRulerY(y) {
rulerY = clamp(y, 0, Math.max(0, window.innerHeight - 1));
if (rulerEl) rulerEl.style.transform = `translateY(${rulerY}px)`;
}

function onMouseMove(e) {
if (!STATE.ruler) return;
setRulerY(e.clientY - 11);
}

function onKeyDown(e) {
if (!STATE.ruler) return;

if (e.key === "ArrowDown") {
e.preventDefault();
setRulerY(rulerY + 10);
announce("Reading ruler moved down");
} else if (e.key === "ArrowUp") {
e.preventDefault();
setRulerY(rulerY - 10);
announce("Reading ruler moved up");
} else if (e.key === "Escape") {
e.preventDefault();
STATE.ruler = false;
applyState();
announce("Reading ruler off");
}
}

// Named resize handler so we can remove it cleanly (prevents handler buildup)
function onResize() {
setRulerY(rulerY);
}

let rulerListenersOn = false;
function enableRulerListeners() {
if (rulerListenersOn) return;
rulerListenersOn = true;
window.addEventListener("mousemove", onMouseMove, { passive: true });
window.addEventListener("keydown", onKeyDown);
window.addEventListener("resize", onResize, { passive: true });
}
function disableRulerListeners() {
if (!rulerListenersOn) return;
rulerListenersOn = false;
window.removeEventListener("mousemove", onMouseMove);
window.removeEventListener("keydown", onKeyDown);
window.removeEventListener("resize", onResize);
}

function getFocusableInside(container) {
if (!container) return [];
const selectors = [
'a[href]',
'button:not([disabled])',
'input:not([disabled])',
'select:not([disabled])',
'textarea:not([disabled])',
'[tabindex]:not([tabindex="-1"])'
].join(',');

return Array.from(container.querySelectorAll(selectors)).filter(el => {
if (el.hidden) return false;
const style = window.getComputedStyle(el);
return style.display !== "none" && style.visibility !== "hidden";
});
}

// =========================================================
// UI creation
// =========================================================
function ensureUi() {
if (document.getElementById("a11y-toggle")) return;

const helpHref = (window.mw && mw.util && mw.util.getUrl)
? mw.util.getUrl("Accessibility")
: "/index.php/Accessibility";

const toggle = document.createElement("button");
toggle.type = "button";
toggle.id = "a11y-toggle";
toggle.className = "a11y-toggle";
toggle.setAttribute("aria-label", "Accessibility options");
toggle.setAttribute("aria-haspopup", "dialog");
toggle.setAttribute("aria-expanded", "false");

toggle.innerHTML = `
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M12 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 12 2zm9 7h-6.5c-.7 0-1.3.4-1.6 1L12 12l-.9-2c-.3-.6-.9-1-1.6-1H3a1 1 0 0 0 0 2h5.3l1.3 2.9-1.7 6.2a1 1 0 0 0 1.9.6l1.2-4.3 1.2 4.3a1 1 0 0 0 1.9-.6l-1.7-6.2 1.3-2.9H21a1 1 0 0 0 0-2z"/>
</svg>
`;
document.body.appendChild(toggle);

const panel = document.createElement("div");
panel.id = "a11y-panel";
panel.className = "a11y-panel";
panel.setAttribute("role", "dialog");
panel.setAttribute("aria-label", "Accessibility options");
panel.hidden = true;

// Layout per your request
panel.innerHTML = `
<div class="a11y-head">
<h2>Accessibility</h2>
<a class="a11y-help" href="${helpHref}" aria-label="Accessibility help">?</a>
</div>

<div class="a11y-row" role="group" aria-label="Text size">
<button type="button" class="a11y-btn" data-action="font-minus" aria-label="Decrease text size">A−</button>
<button type="button" class="a11y-btn" data-action="font-plus" aria-label="Increase text size">A+</button>
<button type="button" class="a11y-btn" data-action="font-reset" aria-label="Reset text size">Reset</button>
</div>

<div class="a11y-row" role="group" aria-label="Text spacing">
<button type="button" class="a11y-btn" data-action="spacing-minus">Spacing−</button>
<button type="button" class="a11y-btn" data-action="spacing-plus">Spacing+</button>
<button type="button" class="a11y-btn" data-action="spacing-reset">Spacing reset</button>
</div>

<div class="a11y-row" role="group" aria-label="High contrast">
<button type="button" class="a11y-btn" data-action="contrast-yellow">High contrast (yellow)</button>
<button type="button" class="a11y-btn" data-action="contrast-white">High contrast (white)</button>
<button type="button" class="a11y-btn" data-action="contrast-reset">Contrast reset</button>
</div>

<div class="a11y-row" role="group" aria-label="Large cursor">
<button type="button" class="a11y-btn" data-action="cursor-yellow">Cursor yellow</button>
<button type="button" class="a11y-btn" data-action="cursor-white">Cursor white</button>
<button type="button" class="a11y-btn" data-action="cursor-reset">Cursor reset</button>
</div>

<div class="a11y-row" role="group" aria-label="Links and reading aid">
<button type="button" class="a11y-btn" data-action="underline">Underline links</button>
<button type="button" class="a11y-btn" data-action="ruler">Reading ruler</button>
</div>

<div class="a11y-row" role="group" aria-label="Reset all">
<button type="button" class="a11y-btn" data-action="reset">Reset all</button>
</div>

<div id="a11y-status" class="a11y-status" aria-live="off"></div>

<div class="a11y-hint">
Settings are saved on this device. When Reading ruler is on, use <strong>↑/↓</strong> to move it and <strong>Esc</strong> to turn it off.
</div>

<div id="a11y-live" class="a11y-sr" aria-live="polite" aria-atomic="true"></div>
`;
document.body.appendChild(panel);

liveEl = panel.querySelector("#a11y-live");
statusEl = panel.querySelector("#a11y-status");
updateStatusLine();

function openPanel() {
panel.hidden = false;
toggle.setAttribute("aria-expanded", "true");
const firstBtn = panel.querySelector("button.a11y-btn");
if (firstBtn) firstBtn.focus();
}

function closePanel(opts = {}) {
const { returnFocusToToggle = true } = opts;
panel.hidden = true;
toggle.setAttribute("aria-expanded", "false");
if (returnFocusToToggle) toggle.focus();
}

toggle.addEventListener("click", () => {
if (panel.hidden) openPanel();
else closePanel({ returnFocusToToggle: false });
});

document.addEventListener("click", (e) => {
if (panel.hidden) return;
if (panel.contains(e.target) || toggle.contains(e.target)) return;
closePanel({ returnFocusToToggle: false });
});

document.addEventListener("keydown", (e) => {
if (panel.hidden) return;
if (e.key === "Escape") {
e.preventDefault();
closePanel({ returnFocusToToggle: false });
}
});

// STRICT 1A (keyboard): close immediately when tabbing out of the panel
panel.addEventListener("keydown", (e) => {
if (panel.hidden) return;
if (e.key !== "Tab") return;

const focusables = getFocusableInside(panel);
if (!focusables.length) return;

const first = focusables[0];
const last = focusables[focusables.length - 1];
const active = document.activeElement;

if (e.shiftKey && active === first) {
e.preventDefault();
closePanel({ returnFocusToToggle: true });
return;
}

if (!e.shiftKey && active === last) {
e.preventDefault();
closePanel({ returnFocusToToggle: false });

const all = Array.from(document.querySelectorAll(
'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])'
)).filter(el => {
const style = window.getComputedStyle(el);
return style.display !== "none" && style.visibility !== "hidden";
});

let next = null;
for (const el of all) {
if (panel.contains(el) || toggle.contains(el)) continue;
if (panel.compareDocumentPosition(el) & Node.DOCUMENT_POSITION_FOLLOWING) {
next = el;
break;
}
}
if (next) next.focus();
return;
}
});

// Close if focus moves outside (screen reader / keyboard)
document.addEventListener("focusin", (e) => {
if (panel.hidden) return;
const target = e.target;
if (!target) return;
if (panel.contains(target) || toggle.contains(target)) return;
closePanel({ returnFocusToToggle: false });
}, true);

panel.addEventListener("click", (e) => {
const btn = e.target.closest("button[data-action]");
if (!btn) return;
const action = btn.getAttribute("data-action") || "";
handleAction(action);
});
}

function updateUiButtons() {
const panel = document.getElementById("a11y-panel");
if (!panel) return;

const setPressed = (action, pressed) => {
const b = panel.querySelector(`button[data-action="${action}"]`);
if (b) b.setAttribute("aria-pressed", pressed ? "true" : "false");
};

// Font
setPressed("font-reset", STATE.fontPct !== 100);
setPressed("font-plus", false);
setPressed("font-minus", false);

// Spacing
setPressed("spacing-plus", STATE.spacing === "plus");
setPressed("spacing-minus", STATE.spacing === "minus");
setPressed("spacing-reset", STATE.spacing === "off");

// Contrast scheme
setPressed("contrast-yellow", STATE.contrastMode === "yellow");
setPressed("contrast-white", STATE.contrastMode === "white");
setPressed("contrast-reset", STATE.contrastMode === "off");

// Cursor scheme
setPressed("cursor-yellow", STATE.cursor === "yellow");
setPressed("cursor-white", STATE.cursor === "white");
setPressed("cursor-reset", STATE.cursor === "off");

// Toggles
setPressed("underline", STATE.underline);
setPressed("ruler", STATE.ruler);

setPressed("reset", false);
}

// =========================================================
// Actions
// =========================================================
function handleAction(action) {
switch (action) {
// Contrast schemes
case "contrast-yellow":
STATE.contrastMode = (STATE.contrastMode === "yellow") ? "off" : "yellow";
applyState();
announce(STATE.contrastMode === "yellow" ? "High contrast yellow on" : "High contrast off");
return;

case "contrast-white":
STATE.contrastMode = (STATE.contrastMode === "white") ? "off" : "white";
applyState();
announce(STATE.contrastMode === "white" ? "High contrast white on" : "High contrast off");
return;

case "contrast-reset":
STATE.contrastMode = "off";
applyState();
announce("High contrast off");
return;

// Underline + Ruler toggles
case "underline":
STATE.underline = !STATE.underline;
applyState();
announce(`Underline links ${STATE.underline ? "on" : "off"}`);
return;

case "ruler":
STATE.ruler = !STATE.ruler;
if (STATE.ruler && !rulerY) rulerY = Math.floor(window.innerHeight / 2);
applyState();
announce(`Reading ruler ${STATE.ruler ? "on" : "off"}`);
return;

// Spacing
case "spacing-plus":
STATE.spacing = (STATE.spacing === "plus") ? "off" : "plus";
applyState();
announce(STATE.spacing === "plus" ? "Text spacing increased" : "Text spacing normal");
return;

case "spacing-minus":
STATE.spacing = (STATE.spacing === "minus") ? "off" : "minus";
applyState();
announce(STATE.spacing === "minus" ? "Text spacing decreased" : "Text spacing normal");
return;

case "spacing-reset":
STATE.spacing = "off";
applyState();
announce("Text spacing reset");
return;

// Cursor schemes
case "cursor-yellow":
STATE.cursor = (STATE.cursor === "yellow") ? "off" : "yellow";
applyState();
announce(STATE.cursor === "yellow" ? "Large cursor yellow" : "Large cursor off");
return;

case "cursor-white":
STATE.cursor = (STATE.cursor === "white") ? "off" : "white";
applyState();
announce(STATE.cursor === "white" ? "Large cursor white" : "Large cursor off");
return;

case "cursor-reset":
STATE.cursor = "off";
applyState();
announce("Large cursor off");
return;

// Text size
case "font-plus":
STATE.fontPct = nextFontPct(STATE.fontPct, +1);
applyState();
announce(`Text size ${STATE.fontPct}%`);
return;

case "font-minus":
STATE.fontPct = nextFontPct(STATE.fontPct, -1);
applyState();
announce(`Text size ${STATE.fontPct}%`);
return;

case "font-reset":
STATE.fontPct = 100;
applyState();
announce("Text size reset");
return;

// Reset all
case "reset":
clearStoredState();
STATE.contrastMode = "off";
STATE.underline = false;
STATE.spacing = "off";
STATE.cursor = "off";
STATE.ruler = false;
STATE.fontPct = 100;
rulerY = 0;
applyState();
announce("Accessibility settings reset");
return;
}
}

// =========================================================
// Load saved settings
// =========================================================
function loadState() {
const saved = loadStateFromStorage();
if (!saved) return;

const cm = saved.contrastMode;
STATE.contrastMode = (cm === "yellow" || cm === "white") ? cm : "off";

STATE.underline = !!saved.underline;

const spacing = saved.spacing;
STATE.spacing = (spacing === "plus" || spacing === "minus") ? spacing : "off";

const cursor = saved.cursor;
STATE.cursor = (cursor === "white" || cursor === "yellow") ? cursor : "off";

STATE.ruler = !!saved.ruler;

const fp = parseInt(saved.fontPct, 10);
STATE.fontPct = isNaN(fp) ? 100 : clamp(fp, FONT_STEPS[0], FONT_STEPS[FONT_STEPS.length - 1]);
}

// =========================================================
// Init
// =========================================================
function init() {
ensureUi();
loadState();
applyState();
}

if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", init);
} else {
init();
}
})();

MediaWiki:Gadget-bhc-accessibility.css

2026-01-29T08:26:15Z

Steve:

/*
⚠️ Do not reorder rules below this line — contrast overrides depend on cascade order.
*/

/* =========================================================
BHC Accessibility Gadget – MediaWiki / Timeless
========================================================= */

/* ---------------------------------------------------------
Variables
--------------------------------------------------------- */
:root{
--a11y-bg: #111827;
--a11y-border: #374151;
--a11y-fg: #ffffff;
--a11y-focus: #FFBF47;
--a11y-link-underline: #3366CC; /* MediaWiki link blue */
--a11y-menu-width: 340px;
}

/* Timeless: stop skin CSS shrinking the accessibility icon */
body.skin-timeless .a11y-toggle{
font-size: 16px !important;
line-height: 1 !important;
}
body.skin-timeless .a11y-toggle svg{
display: block !important;
width: 36px !important;
height: 36px !important;
min-width: 36px !important;
min-height: 36px !important;
max-width: none !important;
max-height: none !important;

/* If the glyph still looks small, keep this: */
transform: scale(1.15) !important;
transform-origin: 50% 50% !important;
}
/* Make sure fill isn’t being altered by skin rules */
body.skin-timeless .a11y-toggle svg path{
fill: currentColor !important;
}

/* ---------------------------------------------------------
Skip links (appear when focused)
--------------------------------------------------------- */
.skip-link{
position: absolute;
left: 12px;
top: 12px;
z-index: 11000;

padding: 10px 14px;
border-radius: 8px;

background: #111827;
color: #fff;
text-decoration: none;

top: -9999px; /* hidden off-screen by default */
transition: none; /* no animation needed when hidden */

border: 2px solid var(--a11y-focus);
}
.skip-link:focus,
.skip-link:focus-visible{
top: 12px; /* bring into view when focused */
outline: none;
z-index: 11001;
}

body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .skip-link{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-fg) !important;
}

/* Stack multiple skip links neatly when tabbing through them */
#a11y-skip-content:focus,
#a11y-skip-content:focus-visible{ top: 56px; }

#a11y-skip-nav:focus,
#a11y-skip-nav:focus-visible{ top: 100px; }

#a11y-skip-search:focus,
#a11y-skip-search:focus-visible{ top: 144px; }

/* ---------------------------------------------------------
Floating accessibility toggle
--------------------------------------------------------- */
.a11y-toggle{
position: fixed;
right: 16px;
bottom: 16px;
z-index: 10001;

width: 56px;
height: 56px;
border-radius: 50%;

background: #005FCC;
border: 2px solid #ffffff;
color: #ffffff;

display: inline-flex;
align-items: center;
justify-content: center;

box-shadow: 0 10px 24px rgba(0,0,0,0.25);
cursor: pointer;
}
.a11y-toggle:hover{ background:#0047A6; }
.a11y-toggle:focus-visible{
outline: 3px solid var(--a11y-focus);
outline-offset: 3px;
}
.a11y-toggle svg{
width: 44px;
height: 44px;
fill: currentColor;
}

/* ---------------------------------------------------------
Panel
--------------------------------------------------------- */
/* Compact current-settings line (display-only) */
.a11y-status{
font-size: 13px;
line-height: 1.25;
margin: 6px 0 8px;
opacity: 0.95;
}

.a11y-panel{
position: fixed;
right: 14px;
bottom: 76px;
z-index: 10000;

width: var(--a11y-menu-width);
max-width: calc(100vw - 28px);

background: var(--a11y-bg);
border: 1px solid var(--a11y-border);
color: var(--a11y-fg);
border-radius: 16px;
padding: 12px;

box-shadow: 0 14px 40px rgba(0,0,0,0.28);
}
.a11y-panel[hidden]{ display:none !important; }

/* Header */
.a11y-head{
display:flex;
align-items:center;
justify-content: space-between;
margin-bottom: 10px;
}
.a11y-head h2{
font-size: 16px;
margin: 0;
}
.a11y-help{
width: 28px;
height: 28px;
border-radius: 50%;
background: #fff;
color: #111827;
font-weight: 900;
text-decoration: none;
display:flex;
align-items:center;
justify-content:center;
}
.a11y-help:focus-visible{
outline: 3px solid var(--a11y-focus);
outline-offset: 2px;
}

/* Buttons */
.a11y-row{
display:flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 10px;
}
.a11y-btn{
border: 1px solid #D1D5DB;
background:#fff;
color:#111827;
padding: 8px 10px;
border-radius: 999px;
font-size: 14px;
font-weight: 800;
cursor: pointer;
}
.a11y-btn[aria-pressed="true"]{
background:#111827;
color:#fff;
}
.a11y-btn:focus-visible{
outline: 3px solid var(--a11y-focus);
outline-offset: 2px;
}

.a11y-hint{
font-size: 13px;
color: var(--a11y-fg);
line-height: 1.4;
}

/* Screen reader only */
.a11y-sr{
position:absolute;
width:1px;
height:1px;
overflow:hidden;
clip:rect(0,0,0,0);
}

/* =========================================================
Feature classes
========================================================= */

/* ------------------------------
High contrast (black/yellow/blue)
------------------------------ */

/* ------------------------------
High contrast presets
- Use ONE of these on <body>:
- a11y-contrast-yellow (yellow on black)
- a11y-contrast-white (white on black)
- Back-compat: a11y-contrast behaves as yellow on black
------------------------------ */
body.a11y-contrast,
body.a11y-contrast-yellow{
--a11y-contrast-fg: #FFD400;
--a11y-contrast-fg-hover: #FFE066;
--a11y-contrast-link: #36C; /* MediaWiki blue */
--a11y-contrast-border-70: rgba(255,212,0,.7);
--a11y-contrast-border-75: rgba(255,212,0,.75);
--a11y-contrast-border-85: rgba(255,212,0,.85);
}
body.a11y-contrast-white{
--a11y-contrast-fg: #FFFFFF;
--a11y-contrast-fg-hover: #E6E6E6;
--a11y-contrast-link: #9ECBFF; /* lighter link blue on black */
--a11y-contrast-border-70: rgba(255,255,255,.7);
--a11y-contrast-border-75: rgba(255,255,255,.75);
--a11y-contrast-border-85: rgba(255,255,255,.85);
}

body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white){
background:#000 !important;
color: var(--a11y-contrast-fg) !important;

/* Gadget UI variables in contrast mode */
--a11y-bg: #000;
--a11y-border: var(--a11y-contrast-border-70);
--a11y-fg: var(--a11y-contrast-fg);
--a11y-focus: var(--a11y-contrast-fg);
--a11y-link-underline: var(--a11y-contrast-link);
}

/* =========================================================
HIGH CONTRAST: Links must be visually distinct
Blue + underline to meet WCAG 1.4.1
========================================================= */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a:visited{
color: var(--bhc-link, #005DB3) !important;
text-decoration: underline !important;
text-decoration-thickness: 2px;
text-underline-offset: 0.15em;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a:hover,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a:focus-visible{
text-decoration-thickness: 3px;
}

/* Headings */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) h1,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) h2,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) h3,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) h4,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) h5,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) h6{
color:var(--a11y-contrast-fg) !important;
border-color:var(--a11y-contrast-fg) !important;
}

/* Main containers (Timeless needs explicit coverage) */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-wrapper,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-content-container,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-content,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-body,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-parser-output{
background:#000 !important;
color:var(--a11y-contrast-fg) !important;
}

/* Sidebars / tools */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #site-navigation,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #site-tools,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #page-tools,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-portlet,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-portlet-body{
background:#000 !important;
color:var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-70) !important;
}

/* FIX: portlet text stays yellow (titles, non-links) */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-portlet-body{
color:var(--a11y-contrast-fg) !important;
}

/* FIX: portlet links should be blue + underlined */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-portlet-body a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-portlet-body a:visited{
color: #3366CC !important;
text-decoration: underline !important;
text-decoration-thickness: 2px;
text-underline-offset: 0.15em;
}

/* CRITICAL FIX: many MW links are <a><span>text</span></a>
The span was inheriting/being forced yellow.
Make link contents inherit the link colour. */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-portlet-body a *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer a *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer-container a *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #footer-list a *{
color: inherit !important;
}

/* A11y UI in contrast */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .a11y-panel,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .a11y-toggle{
background:#000 !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .a11y-btn{
background:#000 !important;
color:var(--a11y-contrast-fg) !important;
border:2px solid var(--a11y-contrast-border-85) !important;
}

/* FIX: “?” help button in contrast */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .a11y-help{
background:#000 !important;
color:var(--a11y-contrast-fg) !important;
border:2px solid var(--a11y-contrast-border-85) !important;
}

/* ------------------------------
Underline links
------------------------------ */
body.a11y-underline-links a{
text-decoration: none !important;
border-bottom: 2px solid var(--a11y-link-underline);
padding-bottom: 0.05em;
}
body.a11y-underline-links:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a{
border-bottom-color: #3366CC !important;
}

/* ------------------------------
Text spacing
------------------------------ */
body.a11y-spacing-plus{
line-height: 1.8 !important;
letter-spacing: 0.06em !important;
word-spacing: 0.16em !important;
}
body.a11y-spacing-minus{
line-height: 1.45 !important;
letter-spacing: 0.01em !important;
word-spacing: 0.02em !important;
}

/* ------------------------------
Large cursors (wiki-hosted)
------------------------------ */
body.a11y-cursor-white,
body.a11y-cursor-white *{
cursor: url("/index.php/Special:FilePath/large-arrow-white-64.png") 8 8, auto !important;
}
body.a11y-cursor-yellow,
body.a11y-cursor-yellow *{
cursor: url("/index.php/Special:FilePath/large-arrow-yellow-64.png") 8 8, auto !important;
}

/* ------------------------------
Reading ruler
------------------------------ */
#a11y-ruler{
position: fixed;
left: 0;
top: 0;
height: 22px;
width: 100vw;
z-index: 9999;
pointer-events: none;

background: linear-gradient(
to bottom,
var(--a11y-contrast-fg) 0%,
var(--a11y-contrast-fg) 40%,
#000000 40%,
#000000 60%,
var(--a11y-contrast-fg) 60%,
var(--a11y-contrast-fg) 100%
);
}
#a11y-ruler[hidden]{ display:none !important; }

/* =========================================================
MediaWiki: extra HIGH CONTRAST coverage (Timeless + Vector)
Add at END of Gadget CSS so it wins.
========================================================= */

/* TOC */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #toc,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .toc,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #toc * ,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .toc *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-75) !important;
}

/* Category links area */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-normal-catlinks,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-normal-catlinks *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .catlinks,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .catlinks *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-75) !important;
}

/* Wikitables */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) table,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) table *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikitable,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikitable *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-datatable,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-datatable *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-75) !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikitable th,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) table th{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
}

/* Figures/captions */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) figure,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) figure *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-halign-center,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-halign-centre,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-halign-center *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-halign-centre *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
}

/* Thumb frames / image captions */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .thumb,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .thumb *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .thumbinner,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .thumbinner *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .thumbcaption,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .thumbcaption *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-75) !important;
}

/* Code-like blocks */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) pre,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) pre *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) code,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) code *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-75) !important;
}

/* =========================================================
HIGH CONTRAST: Footer (Vector + Timeless)
========================================================= */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer-container{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
background-image: none !important;
border-top: 10px solid var(--a11y-contrast-fg) !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #footer-list,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #footer-list *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #footer-icons,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #footer-icons *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
}

/* FIX: footer links should be blue (not yellow) */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer a:visited{
color: #3366CC !important;
text-decoration: underline !important;
text-decoration-thickness: 2px;
text-underline-offset: 0.15em;
}

body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer .mw-portlet,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer .mw-portlet-body{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-75) !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer hr{
border-color: var(--a11y-contrast-fg) !important;
}

/* =========================================================
Underline links: ensure TOC wins
========================================================= */
body.a11y-underline-links #toc a,
body.a11y-underline-links .toc a{
border-bottom-color: var(--a11y-link-underline) !important;
}
body.a11y-underline-links:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #toc a,
body.a11y-underline-links:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .toc a{
border-bottom-color: #3366CC !important;
}

/* =========================================================
HIGH CONTRAST: Header + search + user tools
========================================================= */

/* Base header + content containers */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-header-container,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-content-container{
background: #000 !important;
background-image: none !important;
}

/* Timeless header containers */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-header,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-header-container .ts-inner,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-header-container .mw-body,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-header-container .mw-portlet,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-header-container .mw-portlet-body{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
background-image: none !important;
border-color: var(--a11y-contrast-fg) !important;
}

/* Title */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #p-logo-text #p-banner,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #p-banner.mw-wiki-title,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #p-logo-text .mw-wiki-title{
color: var(--a11y-contrast-fg) !important;
}

/* Strapline */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #bhc-strapline,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .bhc-strapline{
color: var(--a11y-contrast-fg) !important;
}

/* Search box wrappers */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #p-search,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #simpleSearch{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
}

/* Search input (generic) */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #searchInput,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #p-search #searchInput,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #p-search input[type="search"],
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #simpleSearch input[type="search"]{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
caret-color: var(--a11y-contrast-fg) !important;
border: 2px solid var(--a11y-contrast-fg) !important;
box-shadow: none !important;
-webkit-text-fill-color: var(--a11y-contrast-fg) !important; /* Safari/WebKit */
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #searchInput::placeholder,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #simpleSearch input[type="search"]::placeholder{
color: var(--a11y-contrast-border-75) !important;
}

/* Timeless-specific: beat background:#fff !important */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #p-search input[type="search"],
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #p-search #searchInput{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
caret-color: var(--a11y-contrast-fg) !important;
border: 2px solid var(--a11y-contrast-fg) !important;
-webkit-text-fill-color: var(--a11y-contrast-fg) !important;
}

/* Search submit button */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) input#mw-searchButton,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) input#searchButton,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-searchButton{
background-color: #000 !important;
border: 2px solid var(--a11y-contrast-border-85) !important;
filter: none !important;
}

/* Suggestions dropdown */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .suggestions,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .suggestions-results,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .suggestions-special,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .suggestions a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .suggestions-result,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-searchSuggest,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-searchSuggest *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-85) !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .suggestions a:visited{
color: var(--a11y-contrast-fg) !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .suggestions-result-current,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .suggestions a:hover{
background: #111 !important;
}

/* Vector search tabs area */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-search-profile-tabs,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-search-profile-tabs *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-85) !important;
}

/* =========================================================
HIGH CONTRAST: Personal tools (reduce border clutter)
========================================================= */

/* Force yellow text to beat Timeless dark text */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal h2,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal h3,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal .mw-portlet,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal .mw-portlet *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless .mw-portlet-body,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless .mw-portlet-body *{
color: var(--a11y-contrast-fg) !important;
}

/* Force black background to beat Timeless white dropdown */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal .dropdown,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal .mw-portlet-body,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal-inner,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal-inner *{
background: #000 !important;
background-image: none !important;
}

/* Keep ONE border only (container), remove nested borders */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #personal .dropdown,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #personal-inner.dropdown,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #personal .mw-portlet-body{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border: 2px solid var(--a11y-contrast-border-85) !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #personal .mw-portlet-body *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #personal-inner.dropdown *{
background: transparent !important;
color: var(--a11y-contrast-fg) !important;
border: 0 !important;
outline-color: var(--a11y-contrast-fg) !important;
}
/* Leave links to global link rules */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #personal a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #personal a:visited{
background: transparent !important;
border-color: transparent !important;
}

/* =========================================================
HIGH CONTRAST: Timeless containers that fight back
========================================================= */

/* Timeless forces grey content container */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-content-container{
background: #000 !important;
background-image: none !important;
}

/* Timeless header container sometimes white at breakpoints */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-header-container{
background: #000 !important;
background-image: none !important;
}

/* Timeless related-navigation sidebar chunk at ≥1340px */
@media screen and (min-width: 1340px){
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless
#mw-related-navigation .sidebar-chunk{
background: #000 !important;
background-image: none !important;
border-color: var(--a11y-contrast-border-85) !important;
box-shadow: none !important;
}
}

/* mw-content border colour in high-contrast mode */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-content{
border-color: var(--a11y-contrast-fg) !important;
}

/* =========================================================
EDIT MODE: textarea and editOptions
========================================================= */

/* Edit textarea */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #wpTextbox1,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) textarea.mw-editfont-monospace{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
caret-color: var(--a11y-contrast-fg) !important;
border: 2px solid var(--a11y-contrast-fg) !important;
box-shadow: none !important;
-webkit-text-fill-color: var(--a11y-contrast-fg) !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #wpTextbox1::placeholder{
color: var(--a11y-contrast-border-75) !important;
}

/* editOptions bar */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions *{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border-color: var(--a11y-contrast-border-85) !important;
box-shadow: none !important;
}

/* Don’t override links here — let your global contrast link styling apply */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions a:visited{
background: transparent !important;
border-color: transparent !important;
}

/* Buttons + inputs inside editOptions */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions button,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions input,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions select,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions textarea,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions .mw-ui-button,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions .oo-ui-buttonElement-button{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border: 2px solid var(--a11y-contrast-border-85) !important;
box-shadow: none !important;
-webkit-text-fill-color: var(--a11y-contrast-fg) !important;
}

/* Focus visibility */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions button:focus-visible,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions input:focus-visible,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions select:focus-visible,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions .mw-ui-button:focus-visible,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions .oo-ui-buttonElement-button:focus-visible{
outline: 3px solid var(--a11y-contrast-fg) !important;
outline-offset: 2px !important;
}

/* =========================================================
EDIT MODE: Codex (CDX) message banners (e.g. interface warning)
========================================================= */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .cdx-message,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .cdx-message--block,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .cdx-message--error{
background: #000 !important;
color: var(--a11y-contrast-fg) !important;
border: 2px solid var(--a11y-contrast-border-85) !important;
box-shadow: none !important;
}
/* Inner content */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .cdx-message__content,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .cdx-message__content *{
background: transparent !important;
color: var(--a11y-contrast-fg) !important;
}
/* Icon */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .cdx-message__icon,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .cdx-message__icon *{
color: var(--a11y-contrast-fg) !important;
fill: var(--a11y-contrast-fg) !important;
}
/* Emphasis */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .cdx-message strong{
color: var(--a11y-contrast-fg) !important;
}

/* FIX: Timeless sidebar chunks stay light at 1100–1339px.
Force black/yellow in high-contrast mode only. */
@media screen and (min-width: 1100px) and (max-width: 1339px){
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-site-navigation .sidebar-chunk,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-related-navigation .sidebar-chunk{
background: #000 !important;
background-image: none !important;
border-color: var(--a11y-contrast-border-85) !important;
box-shadow: none !important;
}

/* If any text inside is still dark, force it yellow */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-site-navigation .sidebar-chunk *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-related-navigation .sidebar-chunk *{
color: var(--a11y-contrast-fg) !important;
}

/* …but if it’s a LINK (or inside a link), keep it blue */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-site-navigation .sidebar-chunk a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-site-navigation .sidebar-chunk a:visited,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-related-navigation .sidebar-chunk a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-related-navigation .sidebar-chunk a:visited{
color: #3366CC !important;
text-decoration: underline !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-site-navigation .sidebar-chunk a *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-related-navigation .sidebar-chunk a *{
color: inherit !important;
}
}

/* FIX (stronger): Timeless sidebar chunks at 1100–1339px still light.
Must beat the skin rule in the same breakpoint. */
@media screen and (min-width: 1100px) and (max-width: 1339px){
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-site-navigation .sidebar-chunk,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-related-navigation .sidebar-chunk{
background: #000 !important;
background-image: none !important;
border-color: var(--a11y-contrast-border-85) !important;
box-shadow: none !important;
}

body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-site-navigation .sidebar-chunk *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-related-navigation .sidebar-chunk *{
color: var(--a11y-contrast-fg) !important;
}

/* …but links stay blue */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-site-navigation .sidebar-chunk a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-site-navigation .sidebar-chunk a:visited,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-related-navigation .sidebar-chunk a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-related-navigation .sidebar-chunk a:visited{
color: #3366CC !important;
text-decoration: underline !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-site-navigation .sidebar-chunk a *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-related-navigation .sidebar-chunk a *{
color: inherit !important;
}
}

/* =========================================================
EMERGENCY: ensure the accessibility toggle is visible
(keep at VERY END)
========================================================= */
#a11y-toggle.a11y-toggle{
position: fixed !important;
right: 16px !important;
bottom: 16px !important;

display: inline-flex !important;
visibility: visible !important;
opacity: 1 !important;

z-index: 2147483647 !important;
pointer-events: auto !important;

transform: none !important;
}
#a11y-toggle.a11y-toggle svg{
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}

/* =========================================================
HIGH CONTRAST: Scrollbars (page + editor)
Supports: Chrome/Safari/Opera (WebKit) + Firefox
Scope: ONLY when body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) is active
========================================================= */

/* ---------- Firefox (Gecko) ---------- */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white),
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) *{
scrollbar-color: var(--a11y-contrast-fg) #000; /* thumb / track */
scrollbar-width: auto; /* or 'thin' if you prefer */
}

/* ---------- Chrome / Safari / Opera (WebKit/Blink) ---------- */
/* Page scrollbars */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white)::-webkit-scrollbar{
width: 14px;
height: 14px; /* horizontal */
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white)::-webkit-scrollbar-track{
background: #000;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white)::-webkit-scrollbar-thumb{
background: var(--a11y-contrast-fg);
border: 3px solid #000; /* creates separation from track */
border-radius: 10px;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white)::-webkit-scrollbar-thumb:hover{
background: var(--a11y-contrast-fg-hover); /* slightly lighter yellow on hover */
}

/* Editor + common scrollable containers (safety net) */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) textarea,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #wpTextbox1,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui *{
scrollbar-color: var(--a11y-contrast-fg) #000; /* Firefox for these elements too */
}

/* FIX: WikiEditor tool-select dropdown text becomes unreadable
because it inherits yellow from body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white). */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui-toolbar .tool.tool-select,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui-toolbar .tool.tool-select *{
color: #222 !important; /* readable on the tool-select's light background */
}

/* FIX: WikiEditor toolbar tabs readability in high-contrast mode */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui-toolbar .tabs a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui-toolbar .tabs a:visited{
color: #0645ad !important; /* MediaWiki blue */
}

/* Active tab: keep it dark for readability on light background */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui-toolbar .tabs span.tab a.current,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui-toolbar .tabs span.tab a.current:visited{
color: #222 !important;
}

body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) textarea::-webkit-scrollbar,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #wpTextbox1::-webkit-scrollbar,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui::-webkit-scrollbar{
width: 14px;
height: 14px;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) textarea::-webkit-scrollbar-track,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #wpTextbox1::-webkit-scrollbar-track,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui::-webkit-scrollbar-track{
background: #000;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) textarea::-webkit-scrollbar-thumb,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #wpTextbox1::-webkit-scrollbar-thumb,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui::-webkit-scrollbar-thumb{
background: var(--a11y-contrast-fg);
border: 3px solid #000;
border-radius: 10px;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) textarea::-webkit-scrollbar-thumb:hover,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #wpTextbox1::-webkit-scrollbar-thumb:hover,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui::-webkit-scrollbar-thumb:hover{
background: var(--a11y-contrast-fg-hover);
}

/* Try to target root scrolling element where supported */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) html{
scrollbar-color: var(--a11y-contrast-fg) #000;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) html::-webkit-scrollbar{
width: 14px;
height: 14px;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) html::-webkit-scrollbar-track{
background: #000;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) html::-webkit-scrollbar-thumb{
background: var(--a11y-contrast-fg);
border: 3px solid #000;
border-radius: 10px;
}

/* =========================================================
FINAL OVERRIDE (brute force):
High-contrast links must be blue + underlined everywhere,
including link text wrapped in spans inside portlets/footer.
PUT THIS AT THE VERY END OF THE FILE.
========================================================= */

body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a:visited{
color: #3366CC !important;
text-decoration: underline !important;
text-decoration-thickness: 2px !important;
text-underline-offset: 0.15em !important;
}

/* Critical: if link text is wrapped (e.g. <a><span>Text</span></a>),
force ALL children inside links to inherit the link colour. */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a:visited *{
color: inherit !important;
}

/* Extra specificity for the problem zones (beats Timeless + portlet-body * rules) */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless .mw-portlet-body a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless .mw-portlet-body a:visited,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-footer a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-footer a:visited,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-footer-container a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-footer-container a:visited{
color: #3366CC !important;
text-decoration: underline !important;
}

body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless .mw-portlet-body a *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless .mw-portlet-body a:visited *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-footer a *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-footer a:visited *{
color: inherit !important;
}

/* =========================================================
FINAL FIX: #personal (user tools) links
The portlet-body * rule forces yellow.
Override ONLY for links and their contents.
========================================================= */

body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal a:visited{
color: #3366CC !important;
text-decoration: underline !important;
}

body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal a *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal a:visited *{
color: inherit !important;
}

MediaWiki:Gadget-bhc-accessibility.js

2026-01-29T08:14:01Z

Steve: Move to both a contrast yellow and contrast white scheme.

/*
⚠️ Do not reorder rules below this line — contrast overrides depend on cascade order.
*/

(() => {
"use strict";

// =========================================================
// Storage policy:
// - localStorage first
// - cookie fallback only if localStorage unavailable
// =========================================================
const LS_KEY = "bhc_a11y_state_v2"; // bumped because state model changed
const COOKIE_PREFIX = "a11y_";

function canUseLocalStorage() {
try {
const k = "__a11y_test__";
window.localStorage.setItem(k, "1");
window.localStorage.removeItem(k);
return true;
} catch (e) {
return false;
}
}
const HAS_LS = canUseLocalStorage();

// Cookie helpers (fallback)
function setCookie(name, value, days = 365) {
const exp = new Date();
exp.setTime(exp.getTime() + days * 24 * 60 * 60 * 1000);
document.cookie =
`${encodeURIComponent(COOKIE_PREFIX + name)}=${encodeURIComponent(String(value))}; ` +
`expires=${exp.toUTCString()}; path=/; SameSite=Lax`;
}
function getCookie(name, fallback = "") {
const key = encodeURIComponent(COOKIE_PREFIX + name) + "=";
const parts = document.cookie.split(";").map(s => s.trim());
for (const p of parts) {
if (p.startsWith(key)) return decodeURIComponent(p.substring(key.length));
}
return fallback;
}
function delCookie(name) {
document.cookie =
`${encodeURIComponent(COOKIE_PREFIX + name)}=; ` +
`expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/; SameSite=Lax`;
}

// Unified read/write
function saveStateToStorage(stateObj) {
if (HAS_LS) {
try {
window.localStorage.setItem(LS_KEY, JSON.stringify(stateObj));
return;
} catch (e) {
// fall through to cookies
}
}
// cookie fallback (per-key)
setCookie("contrastMode", stateObj.contrastMode); // off|yellow|white
setCookie("underline", stateObj.underline ? "1" : "0");
setCookie("spacing", stateObj.spacing);
setCookie("cursor", stateObj.cursor); // off|white|yellow
setCookie("ruler", stateObj.ruler ? "1" : "0");
setCookie("fontPct", String(stateObj.fontPct));
}

function loadStateFromStorage() {
if (HAS_LS) {
try {
const raw = window.localStorage.getItem(LS_KEY);
if (!raw) return null;
const obj = JSON.parse(raw);
return (obj && typeof obj === "object") ? obj : null;
} catch (e) {
// fall through to cookies
}
}
// cookie fallback (legacy / no-LS)
return {
contrastMode: getCookie("contrastMode", "off"),
underline: getCookie("underline", "0") === "1",
spacing: getCookie("spacing", "off"),
cursor: getCookie("cursor", "off"),
ruler: getCookie("ruler", "0") === "1",
fontPct: parseInt(getCookie("fontPct", "100"), 10)
};
}

function clearStoredState() {
if (HAS_LS) {
try { window.localStorage.removeItem(LS_KEY); } catch (e) {}
return;
}
["contrastMode","underline","spacing","cursor","ruler","fontPct"].forEach(delCookie);
}

// =========================================================
// State + announcements
// =========================================================
const STATE = {
contrastMode: "off", // off | yellow | white
underline: false,
spacing: "off", // off | plus | minus
cursor: "off", // off | white | yellow
ruler: false,
fontPct: 100 // 90..175
};

const FONT_STEPS = [90, 102, 114, 126, 138, 150, 162, 175];

let liveEl = null;
let statusEl = null;
let rulerEl = null;
let rulerY = 0;

function announce(msg) {
if (!liveEl) return;
liveEl.textContent = "";
setTimeout(() => { liveEl.textContent = msg; }, 10);
}

function clamp(n, min, max) { return Math.max(min, Math.min(max, n)); }

function nextFontPct(current, dir) {
const cur = clamp(current, FONT_STEPS[0], FONT_STEPS[FONT_STEPS.length - 1]);
let idx = 0;
for (let i = 0; i < FONT_STEPS.length; i++) {
if (FONT_STEPS[i] >= cur) { idx = i; break; }
}
if (dir > 0) return FONT_STEPS[Math.min(FONT_STEPS.length - 1, idx + 1)];
if (FONT_STEPS[idx] === cur) return FONT_STEPS[Math.max(0, idx - 1)];
return FONT_STEPS[Math.max(0, idx - 1)];
}

// =========================================================
// Status line (display-only)
// =========================================================
function updateStatusLine() {
if (!statusEl) return;

const contrast =
STATE.contrastMode === "yellow" ? "Contrast: Yellow/Black" :
STATE.contrastMode === "white" ? "Contrast: White/Black" :
"Contrast: Off";

const text = `Text ${STATE.fontPct}%`;
const underline = STATE.underline ? "Links: Underlined" : "Links: Normal";
const spacing =
STATE.spacing === "plus" ? "Spacing +" :
STATE.spacing === "minus" ? "Spacing −" :
"Spacing: Normal";
const cursor =
STATE.cursor === "yellow" ? "Cursor: Yellow" :
STATE.cursor === "white" ? "Cursor: White" :
"Cursor: Off";
const ruler = STATE.ruler ? "Ruler: On" : "Ruler: Off";

statusEl.textContent = `Status: ${contrast} · ${text} · ${underline} · ${spacing} · ${cursor} · ${ruler}`;
}

// =========================================================
// Apply state to DOM
// =========================================================
function applyState() {
// Contrast scheme classes
const contrastOn = STATE.contrastMode !== "off";
document.body.classList.toggle("a11y-contrast", contrastOn);
document.body.classList.toggle("a11y-contrast-yellow", STATE.contrastMode === "yellow");
document.body.classList.toggle("a11y-contrast-white", STATE.contrastMode === "white");

// Other features
document.body.classList.toggle("a11y-underline-links", !!STATE.underline);

document.body.classList.toggle("a11y-spacing-plus", STATE.spacing === "plus");
document.body.classList.toggle("a11y-spacing-minus", STATE.spacing === "minus");

document.body.classList.toggle("a11y-cursor-white", STATE.cursor === "white");
document.body.classList.toggle("a11y-cursor-yellow", STATE.cursor === "yellow");

document.documentElement.style.fontSize = `${STATE.fontPct}%`;

ensureRuler();
if (STATE.ruler) {
rulerEl.hidden = false;
setRulerY(rulerY || Math.floor(window.innerHeight / 2));
enableRulerListeners();
} else {
if (rulerEl) rulerEl.hidden = true;
disableRulerListeners();
}

updateUiButtons();
updateStatusLine();
saveStateToStorage(STATE);
}

// =========================================================
// Ruler support
// =========================================================
function ensureRuler() {
if (rulerEl) return;
rulerEl = document.getElementById("a11y-ruler");
if (!rulerEl) {
rulerEl = document.createElement("div");
rulerEl.id = "a11y-ruler";
rulerEl.hidden = true;
document.body.appendChild(rulerEl);
}
}

function setRulerY(y) {
rulerY = clamp(y, 0, Math.max(0, window.innerHeight - 1));
if (rulerEl) rulerEl.style.transform = `translateY(${rulerY}px)`;
}

function onMouseMove(e) {
if (!STATE.ruler) return;
setRulerY(e.clientY - 11);
}

function onKeyDown(e) {
if (!STATE.ruler) return;

if (e.key === "ArrowDown") {
e.preventDefault();
setRulerY(rulerY + 10);
announce("Reading ruler moved down");
} else if (e.key === "ArrowUp") {
e.preventDefault();
setRulerY(rulerY - 10);
announce("Reading ruler moved up");
} else if (e.key === "Escape") {
e.preventDefault();
STATE.ruler = false;
applyState();
announce("Reading ruler off");
}
}

let rulerListenersOn = false;
function enableRulerListeners() {
if (rulerListenersOn) return;
rulerListenersOn = true;
window.addEventListener("mousemove", onMouseMove, { passive: true });
window.addEventListener("keydown", onKeyDown);
window.addEventListener("resize", () => setRulerY(rulerY), { passive: true });
}
function disableRulerListeners() {
if (!rulerListenersOn) return;
rulerListenersOn = false;
window.removeEventListener("mousemove", onMouseMove);
window.removeEventListener("keydown", onKeyDown);
}

function getFocusableInside(container) {
if (!container) return [];
const selectors = [
'a[href]',
'button:not([disabled])',
'input:not([disabled])',
'select:not([disabled])',
'textarea:not([disabled])',
'[tabindex]:not([tabindex="-1"])'
].join(',');

return Array.from(container.querySelectorAll(selectors)).filter(el => {
if (el.hidden) return false;
const style = window.getComputedStyle(el);
return style.display !== "none" && style.visibility !== "hidden";
});
}

// =========================================================
// UI creation
// =========================================================
function ensureUi() {
if (document.getElementById("a11y-toggle")) return;

const helpHref = (window.mw && mw.util && mw.util.getUrl)
? mw.util.getUrl("Accessibility")
: "/index.php/Accessibility";

const toggle = document.createElement("button");
toggle.type = "button";
toggle.id = "a11y-toggle";
toggle.className = "a11y-toggle";
toggle.setAttribute("aria-label", "Accessibility options");
toggle.setAttribute("aria-haspopup", "dialog");
toggle.setAttribute("aria-expanded", "false");

toggle.innerHTML = `
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M12 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 12 2zm9 7h-6.5c-.7 0-1.3.4-1.6 1L12 12l-.9-2c-.3-.6-.9-1-1.6-1H3a1 1 0 0 0 0 2h5.3l1.3 2.9-1.7 6.2a1 1 0 0 0 1.9.6l1.2-4.3 1.2 4.3a1 1 0 0 0 1.9-.6l-1.7-6.2 1.3-2.9H21a1 1 0 0 0 0-2z"/>
</svg>
`;
document.body.appendChild(toggle);

const panel = document.createElement("div");
panel.id = "a11y-panel";
panel.className = "a11y-panel";
panel.setAttribute("role", "dialog");
panel.setAttribute("aria-label", "Accessibility options");
panel.hidden = true;

// Layout per your request
panel.innerHTML = `
<div class="a11y-head">
<h2>Accessibility</h2>
<a class="a11y-help" href="${helpHref}" aria-label="Accessibility help">?</a>
</div>

<div class="a11y-row" role="group" aria-label="Text size">
<button type="button" class="a11y-btn" data-action="font-minus" aria-label="Decrease text size">A−</button>
<button type="button" class="a11y-btn" data-action="font-plus" aria-label="Increase text size">A+</button>
<button type="button" class="a11y-btn" data-action="font-reset" aria-label="Reset text size">Reset</button>
</div>

<div class="a11y-row" role="group" aria-label="Text spacing">
<button type="button" class="a11y-btn" data-action="spacing-minus">Spacing−</button>
<button type="button" class="a11y-btn" data-action="spacing-plus">Spacing+</button>
<button type="button" class="a11y-btn" data-action="spacing-reset">Spacing reset</button>
</div>

<div class="a11y-row" role="group" aria-label="High contrast">
<button type="button" class="a11y-btn" data-action="contrast-yellow">High contrast (yellow)</button>
<button type="button" class="a11y-btn" data-action="contrast-white">High contrast (white)</button>
<button type="button" class="a11y-btn" data-action="contrast-reset">Contrast reset</button>
</div>

<div class="a11y-row" role="group" aria-label="Large cursor">
<button type="button" class="a11y-btn" data-action="cursor-yellow">Cursor yellow</button>
<button type="button" class="a11y-btn" data-action="cursor-white">Cursor white</button>
<button type="button" class="a11y-btn" data-action="cursor-reset">Cursor reset</button>
</div>

<div class="a11y-row" role="group" aria-label="Links and reading aid">
<button type="button" class="a11y-btn" data-action="underline">Underline links</button>
<button type="button" class="a11y-btn" data-action="ruler">Reading ruler</button>
</div>

<div class="a11y-row" role="group" aria-label="Reset all">
<button type="button" class="a11y-btn" data-action="reset">Reset all</button>
</div>

<div id="a11y-status" class="a11y-status" aria-live="off"></div>

<div class="a11y-hint">
Settings are saved on this device. When Reading ruler is on, use <strong>↑/↓</strong> to move it and <strong>Esc</strong> to turn it off.
</div>

<div id="a11y-live" class="a11y-sr" aria-live="polite" aria-atomic="true"></div>
`;
document.body.appendChild(panel);

liveEl = panel.querySelector("#a11y-live");
statusEl = panel.querySelector("#a11y-status");
updateStatusLine();

function openPanel() {
panel.hidden = false;
toggle.setAttribute("aria-expanded", "true");
const firstBtn = panel.querySelector("button.a11y-btn");
if (firstBtn) firstBtn.focus();
}

function closePanel(opts = {}) {
const { returnFocusToToggle = true } = opts;
panel.hidden = true;
toggle.setAttribute("aria-expanded", "false");
if (returnFocusToToggle) toggle.focus();
}

toggle.addEventListener("click", () => {
if (panel.hidden) openPanel();
else closePanel({ returnFocusToToggle: false });
});

document.addEventListener("click", (e) => {
if (panel.hidden) return;
if (panel.contains(e.target) || toggle.contains(e.target)) return;
closePanel({ returnFocusToToggle: false });
});

document.addEventListener("keydown", (e) => {
if (panel.hidden) return;
if (e.key === "Escape") {
e.preventDefault();
closePanel({ returnFocusToToggle: false });
}
});

// STRICT 1A (keyboard): close immediately when tabbing out of the panel
panel.addEventListener("keydown", (e) => {
if (panel.hidden) return;
if (e.key !== "Tab") return;

const focusables = getFocusableInside(panel);
if (!focusables.length) return;

const first = focusables[0];
const last = focusables[focusables.length - 1];
const active = document.activeElement;

if (e.shiftKey && active === first) {
e.preventDefault();
closePanel({ returnFocusToToggle: true });
return;
}

if (!e.shiftKey && active === last) {
e.preventDefault();
closePanel({ returnFocusToToggle: false });

const all = Array.from(document.querySelectorAll(
'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])'
)).filter(el => {
const style = window.getComputedStyle(el);
return style.display !== "none" && style.visibility !== "hidden";
});

let next = null;
for (const el of all) {
if (panel.contains(el) || toggle.contains(el)) continue;
if (panel.compareDocumentPosition(el) & Node.DOCUMENT_POSITION_FOLLOWING) {
next = el;
break;
}
}
if (next) next.focus();
return;
}
});

// Close if focus moves outside (screen reader / keyboard)
document.addEventListener("focusin", (e) => {
if (panel.hidden) return;
const target = e.target;
if (!target) return;
if (panel.contains(target) || toggle.contains(target)) return;
closePanel({ returnFocusToToggle: false });
}, true);

panel.addEventListener("click", (e) => {
const btn = e.target.closest("button[data-action]");
if (!btn) return;
const action = btn.getAttribute("data-action") || "";
handleAction(action);
});
}

function updateUiButtons() {
const panel = document.getElementById("a11y-panel");
if (!panel) return;

const setPressed = (action, pressed) => {
const b = panel.querySelector(`button[data-action="${action}"]`);
if (b) b.setAttribute("aria-pressed", pressed ? "true" : "false");
};

// Font
setPressed("font-reset", STATE.fontPct !== 100);
setPressed("font-plus", false);
setPressed("font-minus", false);

// Spacing
setPressed("spacing-plus", STATE.spacing === "plus");
setPressed("spacing-minus", STATE.spacing === "minus");
setPressed("spacing-reset", STATE.spacing === "off");

// Contrast scheme
setPressed("contrast-yellow", STATE.contrastMode === "yellow");
setPressed("contrast-white", STATE.contrastMode === "white");
setPressed("contrast-reset", STATE.contrastMode === "off");

// Cursor scheme
setPressed("cursor-yellow", STATE.cursor === "yellow");
setPressed("cursor-white", STATE.cursor === "white");
setPressed("cursor-reset", STATE.cursor === "off");

// Toggles
setPressed("underline", STATE.underline);
setPressed("ruler", STATE.ruler);

setPressed("reset", false);
}

// =========================================================
// Actions
// =========================================================
function handleAction(action) {
switch (action) {
// Contrast schemes
case "contrast-yellow":
STATE.contrastMode = (STATE.contrastMode === "yellow") ? "off" : "yellow";
applyState();
announce(STATE.contrastMode === "yellow" ? "High contrast yellow on" : "High contrast off");
return;

case "contrast-white":
STATE.contrastMode = (STATE.contrastMode === "white") ? "off" : "white";
applyState();
announce(STATE.contrastMode === "white" ? "High contrast white on" : "High contrast off");
return;

case "contrast-reset":
STATE.contrastMode = "off";
applyState();
announce("High contrast off");
return;

// Underline + Ruler toggles
case "underline":
STATE.underline = !STATE.underline;
applyState();
announce(`Underline links ${STATE.underline ? "on" : "off"}`);
return;

case "ruler":
STATE.ruler = !STATE.ruler;
if (STATE.ruler && !rulerY) rulerY = Math.floor(window.innerHeight / 2);
applyState();
announce(`Reading ruler ${STATE.ruler ? "on" : "off"}`);
return;

// Spacing
case "spacing-plus":
STATE.spacing = (STATE.spacing === "plus") ? "off" : "plus";
applyState();
announce(STATE.spacing === "plus" ? "Text spacing increased" : "Text spacing normal");
return;

case "spacing-minus":
STATE.spacing = (STATE.spacing === "minus") ? "off" : "minus";
applyState();
announce(STATE.spacing === "minus" ? "Text spacing decreased" : "Text spacing normal");
return;

case "spacing-reset":
STATE.spacing = "off";
applyState();
announce("Text spacing reset");
return;

// Cursor schemes
case "cursor-yellow":
STATE.cursor = (STATE.cursor === "yellow") ? "off" : "yellow";
applyState();
announce(STATE.cursor === "yellow" ? "Large cursor yellow" : "Large cursor off");
return;

case "cursor-white":
STATE.cursor = (STATE.cursor === "white") ? "off" : "white";
applyState();
announce(STATE.cursor === "white" ? "Large cursor white" : "Large cursor off");
return;

case "cursor-reset":
STATE.cursor = "off";
applyState();
announce("Large cursor off");
return;

// Text size
case "font-plus":
STATE.fontPct = nextFontPct(STATE.fontPct, +1);
applyState();
announce(`Text size ${STATE.fontPct}%`);
return;

case "font-minus":
STATE.fontPct = nextFontPct(STATE.fontPct, -1);
applyState();
announce(`Text size ${STATE.fontPct}%`);
return;

case "font-reset":
STATE.fontPct = 100;
applyState();
announce("Text size reset");
return;

// Reset all
case "reset":
clearStoredState();
STATE.contrastMode = "off";
STATE.underline = false;
STATE.spacing = "off";
STATE.cursor = "off";
STATE.ruler = false;
STATE.fontPct = 100;
rulerY = 0;
applyState();
announce("Accessibility settings reset");
return;
}
}

// =========================================================
// Load saved settings
// =========================================================
function loadState() {
const saved = loadStateFromStorage();
if (!saved) return;

const cm = saved.contrastMode;
STATE.contrastMode = (cm === "yellow" || cm === "white") ? cm : "off";

STATE.underline = !!saved.underline;

const spacing = saved.spacing;
STATE.spacing = (spacing === "plus" || spacing === "minus") ? spacing : "off";

const cursor = saved.cursor;
STATE.cursor = (cursor === "white" || cursor === "yellow") ? cursor : "off";

STATE.ruler = !!saved.ruler;

const fp = parseInt(saved.fontPct, 10);
STATE.fontPct = isNaN(fp) ? 100 : clamp(fp, FONT_STEPS[0], FONT_STEPS[FONT_STEPS.length - 1]);
}

// =========================================================
// Init
// =========================================================
function init() {
ensureUi();
loadState();
applyState();
}

if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", init);
} else {
init();
}
})();

MediaWiki:Gadget-bhc-accessibility.css

2026-01-28T20:03:56Z

Steve: change of dark to lighter blue fo links for better contrast

Accessibility

2026-01-28T19:53:18Z

Steve: Incorporating the accessibility statements.

= Accessibility =

The Bellingham Heritage Centre Wiki aims to be accessible to as wide an audience as possible, regardless of technology or ability. We recognise that users access the site in many different ways and may have different visual, motor, cognitive, or situational needs.

This page explains the accessibility features available on the site, how we test accessibility, and how to provide feedback.

----

== Accessibility statement ==

The Bellingham Heritage Centre Wiki **aims to conform to WCAG 2.2 AA accessibility standards**.

We are committed to improving accessibility and usability and strive to follow recognised best practice and relevant accessibility guidelines appropriate to a community-run heritage website.

----

== Measures to support accessibility ==

To support accessibility, this site includes a built-in **Accessibility Toolbar**, available on every page.

Using this toolbar, users can:

* Enable a high-contrast display
* Increase or decrease text size
* Adjust text spacing
* Underline links
* Enable a reading ruler
* Use a high-visibility cursor

These tools are designed to work independently or in combination, depending on individual needs.

Accessibility preferences are saved locally in your browser so that chosen settings persist between visits on the same device.

The site also includes:

* Keyboard-accessible navigation throughout
* Visible focus indicators for keyboard users
* Skip links to allow users to bypass repeated navigation
* Screen-reader-friendly markup and ARIA attributes where appropriate

----

== Testing and evaluation ==

Accessibility has been evaluated using a combination of:

* '''Manual testing''', including:
** Keyboard-only navigation
** Visual inspection of focus visibility, contrast, and readability
** Screen-reader testing using macOS VoiceOver
* '''Automated testing''', including:
** Chrome Lighthouse accessibility audits

Recent Lighthouse audits score the site highly for accessibility, both with accessibility tools enabled and with the default presentation.

Testing has been carried out in current versions of major browsers, including Chrome, Safari, Firefox, and Opera.

----

== Known limitations and design choices ==

Some automated accessibility tools may report warnings that do not represent barriers for users.

In particular:

* '''Navigation and tool lists are ordered logically rather than alphabetically.'''
Lists are structured to reflect editorial or task-based priorities rather than alphabetical order. WCAG does not require alphabetical ordering, only that content is presented in a logical and meaningful sequence.

* '''Link colour contrast warnings may appear in automated tests.'''
In high-contrast mode, links are distinguished using both colour and underlining, ensuring that links are visually identifiable without relying on colour alone. Manual testing confirms that links are clear and usable for both sighted users and screen-reader users.

* '''Editor toolbar in high-contrast mode'''

When high-contrast mode is enabled, most of the site switches to a black background with yellow text for maximum readability. The page editor toolbar (for example, Bold, Italic, Link, Image and related controls) uses a mixture of icons and system styling provided by MediaWiki. To avoid disrupting the editor’s behaviour or hiding important controls, these toolbar icons are not recoloured in high-contrast mode. In this area, text labels and tabs may retain their original colours to preserve legibility and usability. This ensures: * editor controls remain visible and functional * keyboard and screen-reader access is unaffected * the editor behaves consistently across browsers

Screen readers announce all editor controls correctly, and full keyboard access is supported.

This approach prioritises reliability and accessibility over visual uniformity.
These design choices are intentional and are reviewed periodically.

----

== Browser and assistive technology support ==

The site is designed to work with modern web browsers and commonly used assistive technologies, including screen readers and keyboard navigation.

While the site should function in other environments, explicit testing has focused on current desktop browsers.

----

== Feedback and contact ==

If you encounter any accessibility barriers or have suggestions for improvement, please contact us via the site’s contact page or speak to a member of the Heritage Centre team.

Feedback is welcomed and helps guide future improvements to the site.

----

''This accessibility statement is reviewed periodically and updated as the site evolves.''

== Accessibility help ==

This wiki includes simple accessibility options from the menu screen.

Screen readers: The toolbar is keyboard navigable and labelled for screen readers.

== What’s remembered? ==

The following settings are 'remembered' on your device - these are stored in local storage and not cookies.

* Contrast on/off
* Underline of links on/off
* Text spacing setting
* Cursor type selected
* Reading ruler on/off
* Text size
== Keyboard use: ==

* Esc closes the accessibility panel
* Tab / Shift+Tab to move between controls
* Enter to activate a button
* Reveal navigation: use on-screen arrows (or ←/→ if enabled)

Skip links: appear at the top when you Tab (Content / Navigation / Search / Accessibility).
== Known limits ==
Some pages/skins may have rare elements not fully themed. If you report them to us will will endeavour to fix them. Thank you.
== Accessibility options ==

* Text size and spacing controls change readability on the menu and overlays.
* Contrast toggles between standard and high-contrast (black/yellow). Links are shown in blue and underlined to ensure they are clearly distinguishable from body text.
* Two different large cursors options (white or yellow) can make the pointer easier to see.
* Horizontal reading ruler to guide the user on the screen.
* Underline links for clarity.

Selected controls are retained between pages and site visits for the individual user.
=== Reset ===
The reset button in the accessibility gadget clears all current settings back to their default states.
== Access Keys ==

The Timeless skin for MediaWiki uses the standard MediaWiki access key system, which allows for fast keyboard navigation across desktop, mobile, and tablet layouts

The modifier key (usually Alt+Shift on Windows/Linux or Ctrl+Option on macOS) must be used in combination with the characters listed below.
=== Page Action & View Shortcuts ===

* e - Edit the current page (or view source)
* t - View the talk/discussion page
* h - View page history
* c - View the main content page (if in a talk namespace)
* + - Add a new section/comment to a talk page
* m - Move (rename) the current page
* d - Delete the current page
* w - Watch or unwatch the current page
* p - View the printable version of the page
* k - View pages that link here ("What links here")
=== Navigation & Search Shortcuts ===

* f - Jump to the search box
* z - Go to the main page
* r - Go to Recent Changes
* x - Go to a random page
* q - Go to the special pages index
=== Personal & User Tools ===

* . - Go to your user page
* y - Go to your contributions
* l - Go to your watchlist
* o - Log in
* o - Log out
=== Editing Shortcuts ===

* s - Save/Publish the changes you are editing
* p - Preview your edit
* v - Show changes (diff)
* b - Jump to the edit summary box
* i - Toggle the "minor edit" checkmark
=== How to use them ===

* Windows/Linux (Firefox/Chrome/Edge): Alt + Shift + [Key]
* macOS (Safari/Chrome/Firefox): Ctrl + Option + [Key]

'''Note:''' Some browsers might require just the Alt key, or a combination of Alt and Shift.

MediaWiki:Gadget-bhc-accessibility.css

2026-01-28T19:11:20Z

Steve:

MediaWiki:Gadget-bhc-accessibility.css

2026-01-28T19:06:01Z

Steve:

MediaWiki:Gadget-bhc-accessibility.css

2026-01-28T18:13:58Z

Steve:

MediaWiki:Gadget-bhc-accessibility.css

2026-01-28T17:55:16Z

Steve:

MediaWiki:Gadget-bhc-accessibility.css

2026-01-28T17:49:11Z

Steve:

MediaWiki:Gadget-bhc-accessibility.css

2026-01-28T17:38:37Z

Steve:

MediaWiki:Gadget-bhc-accessibility.css

2026-01-28T17:37:53Z

Steve:

MediaWiki:Gadget-bhc-accessibility.css

2026-01-28T17:23:30Z

Steve:

MediaWiki:Gadget-bhc-accessibility.css

2026-01-28T17:22:04Z

Steve:

MediaWiki:Gadget-bhc-accessibility.css

2026-01-28T17:16:30Z

Steve:

MediaWiki:Gadget-bhc-accessibility.css

2026-01-28T17:13:22Z

Steve:

Accessibility

2026-01-28T17:12:38Z

Steve:

== Accessibility help ==

This wiki includes simple accessibility options from the menu screen.

Screen readers: The toolbar is keyboard navigable and labelled for screen readers.

== What’s remembered? ==

The following settings are 'remembered' on your device - these are stored in local storage and not cookies.

* Contrast on/off
* Underline of links on/off
* Text spacing setting
* Cursor type selected
* Reading ruler on/off
* Text size
== Keyboard use: ==

* Esc closes the accessibility panel
* Tab / Shift+Tab to move between controls
* Enter to activate a button
* Reveal navigation: use on-screen arrows (or ←/→ if enabled)

Skip links: appear at the top when you Tab (Content / Navigation / Search / Accessibility).
== Known limits ==
Some pages/skins may have rare elements not fully themed. If you report them to us will will endeavour to fix them. Thank you.
== Accessibility options ==

* Text size and spacing controls change readability on the menu and overlays.
* Contrast toggles between standard and high-contrast (black/yellow). Links are shown in blue and underlined to ensure they are clearly distinguishable from body text.
* Two different large cursors options (white or yellow) can make the pointer easier to see.
* Horizontal reading ruler to guide the user on the screen.
* Underline links for clarity.

Selected controls are retained between pages and site visits for the individual user.
=== Reset ===
The reset button in the accessibility gadget clears all current settings back to their default states.
== Access Keys ==

The Timeless skin for MediaWiki uses the standard MediaWiki access key system, which allows for fast keyboard navigation across desktop, mobile, and tablet layouts

The modifier key (usually Alt+Shift on Windows/Linux or Ctrl+Option on macOS) must be used in combination with the characters listed below.
=== Page Action & View Shortcuts ===

* e - Edit the current page (or view source)
* t - View the talk/discussion page
* h - View page history
* c - View the main content page (if in a talk namespace)
* + - Add a new section/comment to a talk page
* m - Move (rename) the current page
* d - Delete the current page
* w - Watch or unwatch the current page
* p - View the printable version of the page
* k - View pages that link here ("What links here")
=== Navigation & Search Shortcuts ===

* f - Jump to the search box
* z - Go to the main page
* r - Go to Recent Changes
* x - Go to a random page
* q - Go to the special pages index
=== Personal & User Tools ===

* . - Go to your user page
* y - Go to your contributions
* l - Go to your watchlist
* o - Log in
* o - Log out
=== Editing Shortcuts ===

* s - Save/Publish the changes you are editing
* p - Preview your edit
* v - Show changes (diff)
* b - Jump to the edit summary box
* i - Toggle the "minor edit" checkmark
=== How to use them ===

* Windows/Linux (Firefox/Chrome/Edge): Alt + Shift + [Key]
* macOS (Safari/Chrome/Firefox): Ctrl + Option + [Key]

'''Note:''' Some browsers might require just the Alt key, or a combination of Alt and Shift.

==Note on limitations: Editor toolbar in high-contrast mode==

When high-contrast mode is enabled, most of the site switches to a black background with yellow text for maximum readability.

The page editor toolbar (for example, Bold, Italic, Link, Image and related controls) uses a mixture of icons and system styling provided by MediaWiki. To avoid disrupting the editor’s behaviour or hiding important controls, these toolbar icons are not recoloured in high-contrast mode.

In this area, text labels and tabs may retain their original colours to preserve legibility and usability. This ensures:

editor controls remain visible and functional

keyboard and screen-reader access is unaffected

the editor behaves consistently across browsers

Screen readers announce all editor controls correctly, and full keyboard access is supported.

This approach prioritises reliability and accessibility over visual uniformity.

MediaWiki:Gadget-bhc-accessibility.css

2026-01-28T17:09:33Z

Steve:

MediaWiki:Gadget-bhc-accessibility.css

2026-01-28T17:08:18Z

Steve:

MediaWiki:Gadget-bhc-accessibility.css

2026-01-28T16:57:04Z

Steve:

MediaWiki:Gadget-bhc-accessibility.css

2026-01-28T16:51:52Z

Steve:

MediaWiki:Gadget-bhc-accessibility.css

2026-01-28T15:42:18Z

Steve:

MediaWiki:Gadget-bhc-accessibility.css

2026-01-28T15:34:18Z

Steve: CSS Rebuild prior to editor toolbar issues

/*
⚠️ Do not reorder rules below this line — contrast overrides depend on cascade order.
*/

/* =========================================================
BHC Accessibility Gadget – MediaWiki / Timeless (STABLE BASELINE)
- Includes: gadget UI, skip links, site-wide contrast coverage
- Excludes: editor toolbar / WikiEditor / OOUI / Codex / editOptions / scrollbars
========================================================= */

/* ---------------------------------------------------------
Variables
--------------------------------------------------------- */
:root{
--a11y-bg: #111827;
--a11y-border: #374151;
--a11y-fg: #ffffff;
--a11y-focus: #FFBF47;
--a11y-link-underline: #36C; /* MediaWiki link blue */
--a11y-menu-width: 340px;
}

/* ---------------------------------------------------------
Timeless: stop skin CSS shrinking the accessibility icon
--------------------------------------------------------- */
body.skin-timeless .a11y-toggle{
font-size: 16px !important;
line-height: 1 !important;
}
body.skin-timeless .a11y-toggle svg{
display: block !important;
width: 36px !important;
height: 36px !important;
min-width: 36px !important;
min-height: 36px !important;
max-width: none !important;
max-height: none !important;
transform: scale(1.15) !important;
transform-origin: 50% 50% !important;
}
body.skin-timeless .a11y-toggle svg path{
fill: currentColor !important;
}

/* ---------------------------------------------------------
Skip links (focus-only)
--------------------------------------------------------- */
.skip-link{
position: absolute;
left: 12px;
top: -9999px; /* hidden until focus */
z-index: 11000;

padding: 10px 14px;
border-radius: 8px;

background: #111827;
color: #fff;
text-decoration: none;

border: 2px solid var(--a11y-focus);
}

.skip-link:focus,
.skip-link:focus-visible{
top: 12px;
outline: none;
z-index: 11001;
}

body.a11y-contrast .skip-link{
background: #000 !important;
color: #FFD400 !important;
border-color: #FFD400 !important;
}

/* Stack skip links only while focused */
#a11y-skip-content:focus,
#a11y-skip-content:focus-visible{ top: 56px; }

#a11y-skip-nav:focus,
#a11y-skip-nav:focus-visible{ top: 100px; }

#a11y-skip-search:focus,
#a11y-skip-search:focus-visible{ top: 144px; }

/* ---------------------------------------------------------
Floating accessibility toggle
--------------------------------------------------------- */
.a11y-toggle{
position: fixed;
right: 16px;
bottom: 16px;
z-index: 10001;

width: 56px;
height: 56px;
border-radius: 50%;

background: #005FCC;
border: 2px solid #ffffff;
color: #ffffff;

display: inline-flex;
align-items: center;
justify-content: center;

box-shadow: 0 10px 24px rgba(0,0,0,0.25);
cursor: pointer;
}
.a11y-toggle:hover{ background:#0047A6; }
.a11y-toggle:focus-visible{
outline: 3px solid var(--a11y-focus);
outline-offset: 3px;
}
.a11y-toggle svg{
width: 44px;
height: 44px;
fill: currentColor;
}

/* ---------------------------------------------------------
Panel
--------------------------------------------------------- */
.a11y-status{
font-size: 13px;
line-height: 1.25;
margin: 6px 0 8px;
opacity: 0.95;
}

.a11y-panel{
position: fixed;
right: 14px;
bottom: 76px;
z-index: 10000;

width: var(--a11y-menu-width);
max-width: calc(100vw - 28px);

background: var(--a11y-bg);
border: 1px solid var(--a11y-border);
color: var(--a11y-fg);
border-radius: 16px;
padding: 12px;

box-shadow: 0 14px 40px rgba(0,0,0,0.28);
}
.a11y-panel[hidden]{ display:none !important; }

.a11y-head{
display:flex;
align-items:center;
justify-content: space-between;
margin-bottom: 10px;
}
.a11y-head h2{
font-size: 16px;
margin: 0;
}

.a11y-help{
width: 28px;
height: 28px;
border-radius: 50%;
background: #fff;
color: #111827;
font-weight: 900;
text-decoration: none;
display:flex;
align-items:center;
justify-content:center;
}
.a11y-help:focus-visible{
outline: 3px solid var(--a11y-focus);
outline-offset: 2px;
}

.a11y-row{
display:flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 10px;
}
.a11y-btn{
border: 1px solid #D1D5DB;
background:#fff;
color:#111827;
padding: 8px 10px;
border-radius: 999px;
font-size: 14px;
font-weight: 800;
cursor: pointer;
}
.a11y-btn[aria-pressed="true"]{
background:#111827;
color:#fff;
}
.a11y-btn:focus-visible{
outline: 3px solid var(--a11y-focus);
outline-offset: 2px;
}

.a11y-hint{
font-size: 13px;
color: var(--a11y-fg);
line-height: 1.4;
}

.a11y-sr{
position:absolute;
width:1px;
height:1px;
overflow:hidden;
clip:rect(0,0,0,0);
}

/* =========================================================
Feature classes
========================================================= */

/* ------------------------------
High contrast (site-wide)
------------------------------ */
body.a11y-contrast{
background:#000 !important;
color:#FFD400 !important;

--a11y-bg: #000;
--a11y-border: rgba(255,212,0,.7);
--a11y-fg: #FFD400;
--a11y-focus: #FFD400;
--a11y-link-underline: #36C;
}

/* Global link colour in contrast mode */
body.a11y-contrast a,
body.a11y-contrast a:visited{
color:#FFD400 !important;
}

/* Headings */
body.a11y-contrast h1,
body.a11y-contrast h2,
body.a11y-contrast h3,
body.a11y-contrast h4,
body.a11y-contrast h5,
body.a11y-contrast h6{
color:#FFD400 !important;
border-color:#FFD400 !important;
}

/* Main containers */
body.a11y-contrast #mw-wrapper,
body.a11y-contrast #mw-content-container,
body.a11y-contrast #mw-content,
body.a11y-contrast .mw-body,
body.a11y-contrast .mw-parser-output{
background:#000 !important;
color:#FFD400 !important;
}

/* Timeless header container */
body.a11y-contrast.skin-timeless #mw-header-container{
background: #000 !important;
background-image: none !important;
}

/* Search input (Timeless is forceful, so be explicit) */
body.a11y-contrast #searchInput,
body.a11y-contrast #p-search #searchInput,
body.a11y-contrast #p-search input[type="search"]{
background: #000 !important;
color: #FFD400 !important;
caret-color: #FFD400 !important;
border: 2px solid #FFD400 !important;
box-shadow: none !important;
-webkit-text-fill-color: #FFD400 !important;
}
body.a11y-contrast #searchInput::placeholder{
color: rgba(255,212,0,0.75) !important;
}

/* Sidebars / portlets */
body.a11y-contrast #site-navigation,
body.a11y-contrast #site-tools,
body.a11y-contrast #page-tools,
body.a11y-contrast .mw-portlet,
body.a11y-contrast .mw-portlet-body{
background:#000 !important;
color:#FFD400 !important;
border-color: rgba(255,212,0,.7) !important;
}
body.a11y-contrast .mw-portlet-body *{
color:#FFD400 !important;
}

/* Timeless sidebar chunks (1100–1339px) */
@media screen and (min-width: 1100px) and (max-width: 1339px){
body.a11y-contrast.skin-timeless #mw-site-navigation .sidebar-chunk,
body.a11y-contrast.skin-timeless #mw-related-navigation .sidebar-chunk{
background: #000 !important;
background-image: none !important;
border-color: rgba(255,212,0,.85) !important;
box-shadow: none !important;
}
body.a11y-contrast.skin-timeless #mw-site-navigation .sidebar-chunk *,
body.a11y-contrast.skin-timeless #mw-related-navigation .sidebar-chunk *{
color: #FFD400 !important;
}
}

/* Timeless related-navigation sidebar chunk at ≥1340px */
@media screen and (min-width: 1340px){
body.a11y-contrast.skin-timeless #mw-related-navigation .sidebar-chunk{
background: #000 !important;
background-image: none !important;
border-color: rgba(255,212,0,.85) !important;
box-shadow: none !important;
}
}

/* mw-content border colour in high-contrast mode */
body.a11y-contrast #mw-content{
border-color: #FFD400 !important;
}

/* TOC */
body.a11y-contrast #toc,
body.a11y-contrast .toc,
body.a11y-contrast #toc *,
body.a11y-contrast .toc *{
background: #000 !important;
color: #FFD400 !important;
border-color: rgba(255, 212, 0, 0.75) !important;
}

/* Category links area */
body.a11y-contrast .mw-normal-catlinks,
body.a11y-contrast .mw-normal-catlinks *,
body.a11y-contrast .catlinks,
body.a11y-contrast .catlinks *{
background: #000 !important;
color: #FFD400 !important;
border-color: rgba(255, 212, 0, 0.75) !important;
}

/* Tables */
body.a11y-contrast table,
body.a11y-contrast table *,
body.a11y-contrast .wikitable,
body.a11y-contrast .wikitable *,
body.a11y-contrast .mw-datatable,
body.a11y-contrast .mw-datatable *{
background: #000 !important;
color: #FFD400 !important;
border-color: rgba(255, 212, 0, 0.75) !important;
}
body.a11y-contrast .wikitable th,
body.a11y-contrast table th{
background: #000 !important;
color: #FFD400 !important;
}

/* Figures/captions */
body.a11y-contrast figure,
body.a11y-contrast figure *,
body.a11y-contrast .thumb,
body.a11y-contrast .thumb *,
body.a11y-contrast .thumbinner,
body.a11y-contrast .thumbinner *,
body.a11y-contrast .thumbcaption,
body.a11y-contrast .thumbcaption *{
background: #000 !important;
color: #FFD400 !important;
border-color: rgba(255, 212, 0, 0.75) !important;
}

/* Code-like blocks */
body.a11y-contrast pre,
body.a11y-contrast pre *,
body.a11y-contrast code,
body.a11y-contrast code *{
background: #000 !important;
color: #FFD400 !important;
border-color: rgba(255, 212, 0, 0.75) !important;
}

/* Footer */
body.a11y-contrast #mw-footer,
body.a11y-contrast #mw-footer-container{
background: #000 !important;
color: #FFD400 !important;
background-image: none !important;
border-top: 10px solid #FFD400 !important;
}
body.a11y-contrast #mw-footer a,
body.a11y-contrast #mw-footer a:visited{
color: #FFD400 !important;
text-decoration-color: #FFD400 !important;
}

/* ------------------------------
Underline links
------------------------------ */
body.a11y-underline-links a{
text-decoration: none !important;
border-bottom: 2px solid var(--a11y-link-underline);
padding-bottom: 0.05em;
}
body.a11y-underline-links.a11y-contrast a{
border-bottom-color: #36C !important;
}

/* ------------------------------
Text spacing
------------------------------ */
body.a11y-spacing-plus{
line-height: 1.8 !important;
letter-spacing: 0.06em !important;
word-spacing: 0.16em !important;
}
body.a11y-spacing-minus{
line-height: 1.45 !important;
letter-spacing: 0.01em !important;
word-spacing: 0.02em !important;
}

/* ------------------------------
Large cursors (wiki-hosted)
------------------------------ */
body.a11y-cursor-white,
body.a11y-cursor-white *{
cursor: url("/index.php/Special:FilePath/large-arrow-white-64.png") 8 8, auto !important;
}
body.a11y-cursor-yellow,
body.a11y-cursor-yellow *{
cursor: url("/index.php/Special:FilePath/large-arrow-yellow-64.png") 8 8, auto !important;
}

/* ------------------------------
Reading ruler
------------------------------ */
#a11y-ruler{
position: fixed;
left: 0;
top: 0;
height: 22px;
width: 100vw;
z-index: 9999;
pointer-events: none;

background: linear-gradient(
to bottom,
#FFD400 0%,
#FFD400 40%,
#000000 40%,
#000000 60%,
#FFD400 60%,
#FFD400 100%
);
}
#a11y-ruler[hidden]{ display:none !important; }

/* =========================================================
EMERGENCY: ensure the accessibility toggle is visible
(keep at VERY END)
========================================================= */
#a11y-toggle.a11y-toggle{
position: fixed !important;
right: 16px !important;
bottom: 16px !important;

display: inline-flex !important;
visibility: visible !important;
opacity: 1 !important;

z-index: 2147483647 !important;
pointer-events: auto !important;

transform: none !important;
}
#a11y-toggle.a11y-toggle svg{
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}

MediaWiki:Gadget-bhc-accessibility.css

2026-01-28T15:30:08Z

Steve: Undo revision 1590 by Steve (talk)

MediaWiki:Gadget-bhc-accessibility.css

2026-01-28T15:27:17Z

Steve: Undo revision 1589 by Steve (talk)

MediaWiki:Gadget-bhc-accessibility.css

2026-01-28T15:14:52Z

Steve:

MediaWiki:Gadget-bhc-accessibility.css

2026-01-28T15:04:19Z

Steve:

MediaWiki:Gadget-bhc-accessibility.css

2026-01-28T15:03:31Z

Steve:

Accessibility

2026-01-28T15:00:06Z

Steve:

== Accessibility help ==

This wiki includes simple accessibility options from the menu screen.

Screen readers: The toolbar is keyboard navigable and labelled for screen readers.

== What’s remembered? ==

The following settings are 'remembered' on your device - these are stored in local storage and not cookies.

* Contrast on/off
* Underline of links on/off
* Text spacing setting
* Cursor type selected
* Reading ruler on/off
* Text size
== Keyboard use: ==

* Esc closes the accessibility panel
* Tab / Shift+Tab to move between controls
* Enter to activate a button
* Reveal navigation: use on-screen arrows (or ←/→ if enabled)

Skip links: appear at the top when you Tab (Content / Navigation / Search / Accessibility).
== Known limits ==
Some pages/skins may have rare elements not fully themed. If you report them to us will will endeavour to fix them. Thank you.
== Accessibility options ==

* Text size and spacing controls change readability on the menu and overlays.
* Contrast toggles between standard and high-contrast (black/yellow).
* Two different large cursors options (white or yellow) can make the pointer easier to see.
* Horizontal reading ruler to guide the user on the screen.
* Underline links for clarity.

Selected controls are retained between pages and site visits for the individual user.
=== Reset ===
The reset button in the accessibility gadget clears all current settings back to their default states.
== Access Keys ==

The Timeless skin for MediaWiki uses the standard MediaWiki access key system, which allows for fast keyboard navigation across desktop, mobile, and tablet layouts

The modifier key (usually Alt+Shift on Windows/Linux or Ctrl+Option on macOS) must be used in combination with the characters listed below.
=== Page Action & View Shortcuts ===

* e - Edit the current page (or view source)
* t - View the talk/discussion page
* h - View page history
* c - View the main content page (if in a talk namespace)
* + - Add a new section/comment to a talk page
* m - Move (rename) the current page
* d - Delete the current page
* w - Watch or unwatch the current page
* p - View the printable version of the page
* k - View pages that link here ("What links here")
=== Navigation & Search Shortcuts ===

* f - Jump to the search box
* z - Go to the main page
* r - Go to Recent Changes
* x - Go to a random page
* q - Go to the special pages index
=== Personal & User Tools ===

* . - Go to your user page
* y - Go to your contributions
* l - Go to your watchlist
* o - Log in
* o - Log out
=== Editing Shortcuts ===

* s - Save/Publish the changes you are editing
* p - Preview your edit
* v - Show changes (diff)
* b - Jump to the edit summary box
* i - Toggle the "minor edit" checkmark
=== How to use them ===

* Windows/Linux (Firefox/Chrome/Edge): Alt + Shift + [Key]
* macOS (Safari/Chrome/Firefox): Ctrl + Option + [Key]

'''Note:''' Some browsers might require just the Alt key, or a combination of Alt and Shift.

==Note on limitations: Editor toolbar in high-contrast mode==

When high-contrast mode is enabled, most of the site switches to a black background with yellow text for maximum readability.

The page editor toolbar (for example, Bold, Italic, Link, Image and related controls) uses a mixture of icons and system styling provided by MediaWiki. To avoid disrupting the editor’s behaviour or hiding important controls, these toolbar icons are not recoloured in high-contrast mode.

In this area, text labels and tabs may retain their original colours to preserve legibility and usability. This ensures:

editor controls remain visible and functional

keyboard and screen-reader access is unaffected

the editor behaves consistently across browsers

Screen readers announce all editor controls correctly, and full keyboard access is supported.

This approach prioritises reliability and accessibility over visual uniformity.

MediaWiki:Gadget-bhc-accessibility.css

2026-01-28T14:39:43Z

Steve:

MediaWiki:Gadget-bhc-accessibility.css

2026-01-28T14:08:20Z

Steve: