MediaWiki:Gadget-bhc-accessibility.css: Difference between revisions

← Older edit
Steve (talk | contribs)
Bureaucrats, Interface administrators, Suppressors, Administrators
1,526 edits
No edit summary
Addes tocuh spacing for the table of contents and some focus help.
 
(65 intermediate revisions by the same user not shown)
Line 3: Line 3:
*/
*/


(() => {
  "use strict";


  // -------------------------------------------------------------------
/* =========================================================
  // Cookie helpers
  Accessibility Gadget CSS — quick navigation
  // -------------------------------------------------------------------
  (No rules reordered; section tags added for readability)
  const COOKIE_PREFIX = "a11y_";
  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] */
/* ========================================================= */


   function setCookie(name, value, days = 365) {
/* [A11Y-SECTION:bhc-accessibility-gadget-mediawiki-timeless] */
    const exp = new Date();
/* =========================================================
    exp.setTime(exp.getTime() + days * 24 * 60 * 60 * 1000);
  BHC Accessibility Gadget – MediaWiki / Timeless
    document.cookie =
  ========================================================= */
      `${encodeURIComponent(COOKIE_PREFIX + name)}=${encodeURIComponent(String(value))}; ` +
 
      `expires=${exp.toUTCString()}; path=/; SameSite=Lax`;
/* [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;
}


  function getCookie(name, fallback = "") {
/* ---------------------------------------------------------
    const key = encodeURIComponent(COOKIE_PREFIX + name) + "=";
  TOC: improve touch target spacing & readability
    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) {
body.skin-timeless #toc li,
    document.cookie =
body.skin-vector #toc li,
      `${encodeURIComponent(COOKIE_PREFIX + name)}=; ` +
body.skin-timeless .toc li,
      `expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/; SameSite=Lax`;
body.skin-vector .toc li{
  }
  margin: 1.5px 0;   /* mirror sidebar list spacing */
}


  // -------------------------------------------------------------------
body.skin-timeless #toc li > a,
   // State + announcements
body.skin-vector #toc li > a,
  // -------------------------------------------------------------------
body.skin-timeless .toc li > a,
   const STATE = {
body.skin-vector .toc li > a{
    contrast: false,
   display: inline-block;
    underline: false,
   padding: 4px 6px;  /* matches sidebar hit area */
    spacing: "off",          // off | plus | minus
  line-height: 1.3;
    cursor: "off",          // off | white | yellow
  border-radius: 6px;
    ruler: false,
}
    fontPct: 100            // 90..140 in steps of 10
  };


   let liveEl = null;
body.skin-timeless #toc a:focus-visible,
   let rulerEl = null;
body.skin-vector #toc a:focus-visible{
  let rulerY = 0;
   outline: 2px solid currentColor;
   outline-offset: 2px;
}


  function announce(msg) {
/* [A11Y-SECTION:high-contrast-black-yellow-blue] */
    if (!liveEl) return;
/* ------------------------------
    liveEl.textContent = "";
  High contrast (black/yellow/blue)
    setTimeout(() => { liveEl.textContent = msg; }, 10);
  ------------------------------ */
  }


   function clamp(n, min, max) { return Math.max(min, Math.min(max, n)); }
/* [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){
  // Apply state to DOM
  background:#000 !important;
  // -------------------------------------------------------------------
  color: var(--a11y-contrast-fg) !important;
  function applyState() {
    document.body.classList.toggle("a11y-contrast", !!STATE.contrast);
    document.body.classList.toggle("a11y-underline-links", !!STATE.underline);


    document.body.classList.toggle("a11y-spacing-plus", STATE.spacing === "plus");
  /* Gadget UI variables in contrast mode */
    document.body.classList.toggle("a11y-spacing-minus", STATE.spacing === "minus");
  --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);
}


    document.body.classList.toggle("a11y-cursor-white", STATE.cursor === "white");
/* [A11Y-SECTION:high-contrast-links-must-be-visually-distinct] */
    document.body.classList.toggle("a11y-cursor-yellow", STATE.cursor === "yellow");
/* =========================================================
  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;
}


    document.documentElement.style.fontSize = `${STATE.fontPct}%`;
/* 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;
}


    ensureRuler();
/* Main containers (Timeless needs explicit coverage) */
    if (STATE.ruler) {
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-wrapper,
      rulerEl.hidden = false;
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-content-container,
      setRulerY(rulerY || Math.floor(window.innerHeight / 2));
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-content,
      enableRulerListeners();
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-body,
    } else {
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-parser-output{
      if (rulerEl) rulerEl.hidden = true;
  background:#000 !important;
      disableRulerListeners();
  color:var(--a11y-contrast-fg) !important;
    }
}


    updateUiButtons();
/* 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) */
  // Ruler support
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-portlet-body{
  // -------------------------------------------------------------------
   color:var(--a11y-contrast-fg) !important;
   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) {
/* FIX: portlet links should be blue + underlined */
    rulerY = clamp(y, 0, Math.max(0, window.innerHeight - 1));
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-portlet-body a,
    if (rulerEl) rulerEl.style.transform = `translateY(${rulerY}px)`;
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;
}


  function onMouseMove(e) {
/* CRITICAL FIX: many MW links are <a><span>text</span></a>
    if (!STATE.ruler) return;
  The span was inheriting/being forced yellow.
    setRulerY(e.clientY - 11);
  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;
}


   function onKeyDown(e) {
/* A11y UI in contrast */
    if (!STATE.ruler) return;
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;
}


    if (e.key === "ArrowDown") {
/* FIX: “?” help button in contrast */
      e.preventDefault();
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .a11y-help{
      setRulerY(rulerY + 10);
  background:#000 !important;
      announce("Reading ruler moved down");
  color:var(--a11y-contrast-fg) !important;
    } else if (e.key === "ArrowUp") {
  border:2px solid var(--a11y-contrast-border-85) !important;
      e.preventDefault();
}
      setRulerY(rulerY - 10);
      announce("Reading ruler moved up");
    } else if (e.key === "Escape") {
      e.preventDefault();
      STATE.ruler = false;
      setCookie("ruler", "0");
      applyState();
      announce("Reading ruler off");
    }
  }


  let rulerListenersOn = false;
/* [A11Y-SECTION:underline-links] */
  function enableRulerListeners() {
/* ------------------------------
    if (rulerListenersOn) return;
  Underline links
    rulerListenersOn = true;
  ------------------------------ */
    window.addEventListener("mousemove", onMouseMove, { passive: true });
body.a11y-underline-links a{
    window.addEventListener("keydown", onKeyDown);
  text-decoration: none !important;
    window.addEventListener("resize", () => setRulerY(rulerY), { passive: true });
  border-bottom: 2px solid currentColor;
  }
  padding-bottom: 0.05em;
  function disableRulerListeners() {
}
    if (!rulerListenersOn) return;
body.a11y-underline-links:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a{
    rulerListenersOn = false;
  border-bottom-color: var(--a11y-contrast-link) !important;
    window.removeEventListener("mousemove", onMouseMove);
}
    window.removeEventListener("keydown", onKeyDown);
  }


  // -------------------------------------------------------------------
/* [A11Y-SECTION:text-spacing] */
   // UI creation
/* ------------------------------
   // -------------------------------------------------------------------
  Text spacing
   function ensureUi() {
  ------------------------------ */
    if (document.getElementById("a11y-toggle")) return;
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;
}


    // Help link goes to the wiki page (you said: index.php/Accessibility)
/* [A11Y-SECTION:large-cursors-wiki-hosted] */
    const helpHref = (window.mw && mw.util && mw.util.getUrl)
/* ------------------------------
      ? mw.util.getUrl("Accessibility")
  Large cursors (wiki-hosted)
      : "/index.php/Accessibility";
  ------------------------------ */
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;
}


    const toggle = document.createElement("button");
/* [A11Y-SECTION:reading-ruler] */
    toggle.type = "button";
/* ------------------------------
    toggle.id = "a11y-toggle";
  Reading ruler
    toggle.className = "a11y-toggle";
  ------------------------------ */
    toggle.setAttribute("aria-label", "Accessibility options");
#a11y-ruler{
    toggle.setAttribute("aria-haspopup", "dialog");
  position: fixed;
    toggle.setAttribute("aria-expanded", "false");
  left: 0;
  top: 0;
  height: 22px;
  width: 100vw;
  z-index: 9999;
  pointer-events: none;


     toggle.innerHTML = `
  background: linear-gradient(
      <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
     to bottom,
        <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"/>
    var(--a11y-contrast-fg) 0%,
      </svg>
    var(--a11y-contrast-fg) 40%,
    `;
    #000000 40%,
    document.body.appendChild(toggle);
    #000000 60%,
    var(--a11y-contrast-fg) 60%,
    var(--a11y-contrast-fg) 100%
  );
}
#a11y-ruler[hidden]{ display:none !important; }


    const panel = document.createElement("div");
/* [A11Y-SECTION:mediawiki-extra-high-contrast-coverage-timeless-vector] */
    panel.id = "a11y-panel";
/* =========================================================
    panel.className = "a11y-panel";
  MediaWiki: extra HIGH CONTRAST coverage (Timeless + Vector)
    panel.setAttribute("role", "dialog");
  Add at END of Gadget CSS so it wins.
    panel.setAttribute("aria-label", "Accessibility options");
  ========================================================= */
    panel.hidden = true;


    panel.innerHTML = `
/* TOC */
      <div class="a11y-head">
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #toc,
        <h2>Accessibility</h2>
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .toc,
        <a class="a11y-help" href="${helpHref}" aria-label="Accessibility help">?</a>
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #toc * ,
      </div>
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;
}


      <div class="a11y-row" role="group" aria-label="Text size">
/* Category links area */
        <button type="button" class="a11y-btn" data-action="font-minus" aria-pressed="false" aria-label="Decrease text size">A−</button>
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-normal-catlinks,
        <button type="button" class="a11y-btn" data-action="font-plus" aria-pressed="false" aria-label="Increase text size">A+</button>
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-normal-catlinks *,
        <button type="button" class="a11y-btn" data-action="font-reset" aria-pressed="false" aria-label="Reset text size">Reset</button>
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .catlinks,
      </div>
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;
}


      <div class="a11y-row" role="group" aria-label="Contrast and links">
/* Wikitables */
        <button type="button" class="a11y-btn" data-action="contrast" aria-pressed="false">High contrast</button>
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) table,
        <button type="button" class="a11y-btn" data-action="underline" aria-pressed="false">Underline links</button>
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) table *,
      </div>
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;
}


      <div class="a11y-row" role="group" aria-label="Text spacing">
/* Figures/captions */
        <button type="button" class="a11y-btn" data-action="spacing-minus" aria-pressed="false">Less spacing</button>
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) figure,
        <button type="button" class="a11y-btn" data-action="spacing-plus" aria-pressed="false">More spacing</button>
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) figure *,
        <button type="button" class="a11y-btn" data-action="spacing-reset" aria-pressed="false">Spacing reset</button>
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-halign-center,
      </div>
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;
}


      <div class="a11y-row" role="group" aria-label="Cursor and reading aid">
/* Thumb frames / image captions */
        <button type="button" class="a11y-btn" data-action="cursor" aria-pressed="false" aria-label="Large cursor setting">Large cursor: Off</button>
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .thumb,
        <button type="button" class="a11y-btn" data-action="ruler" aria-pressed="false" aria-label="Toggle reading ruler">Reading ruler</button>
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .thumb *,
      </div>
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;
}


      <div class="a11y-row" role="group" aria-label="Reset all">
/* Code-like blocks */
        <button type="button" class="a11y-btn" data-action="reset" aria-pressed="false">Reset all</button>
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) pre,
      </div>
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;
}


      <div class="a11y-hint">
/* [A11Y-SECTION:high-contrast-footer-vector-timeless] */
        Settings are saved on this device. Large cursor cycles <strong>Off → White → Yellow → Off</strong>.
/* =========================================================
        When Reading ruler is on, use <strong>↑/↓</strong> to move it and <strong>Esc</strong> to turn it off.
  HIGH CONTRAST: Footer (Vector + Timeless)
      </div>
  ========================================================= */
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;
}


      <div id="a11y-live" class="a11y-sr" aria-live="polite" aria-atomic="true"></div>
/* FIX: footer links should be blue (not yellow) */
    `;
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer a,
    document.body.appendChild(panel);
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;
}


    liveEl = panel.querySelector("#a11y-live");
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;
}


    function openPanel() {
/* [A11Y-SECTION:underline-links-ensure-toc-wins] */
      panel.hidden = false;
/* =========================================================
      toggle.setAttribute("aria-expanded", "true");
  Underline links: ensure TOC wins
      const firstBtn = panel.querySelector("button.a11y-btn");
  ========================================================= */
      if (firstBtn) firstBtn.focus();
body.a11y-underline-links #toc a,
    }
body.a11y-underline-links .toc a{
    function closePanel() {
  border-bottom-color: currentColor !important;
      panel.hidden = true;
}
      toggle.setAttribute("aria-expanded", "false");
body.a11y-underline-links:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #toc a,
      toggle.focus();
body.a11y-underline-links:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .toc a{
    }
  border-bottom-color: var(--a11y-contrast-link) !important;
}


    toggle.addEventListener("click", () => {
/* [A11Y-SECTION:high-contrast-header-search-user-tools] */
      if (panel.hidden) openPanel(); else closePanel();
/* =========================================================
    });
  HIGH CONTRAST: Header + search + user tools
  ========================================================= */


    document.addEventListener("click", (e) => {
/* Base header + content containers */
      if (panel.hidden) return;
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-header-container,
      if (panel.contains(e.target) || toggle.contains(e.target)) return;
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-content-container{
      closePanel();
  background: #000 !important;
    });
  background-image: none !important;
}


    document.addEventListener("keydown", (e) => {
/* Timeless header containers */
      if (panel.hidden) return;
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-header,
      if (e.key === "Escape") {
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-header-container .ts-inner,
        e.preventDefault();
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-header-container .mw-body,
        closePanel();
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;
}


    panel.addEventListener("click", (e) => {
/* Title */
      const btn = e.target.closest("button[data-action]");
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #p-logo-text #p-banner,
      if (!btn) return;
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #p-banner.mw-wiki-title,
      const action = btn.getAttribute("data-action") || "";
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #p-logo-text .mw-wiki-title{
      handleAction(action);
  color: var(--a11y-contrast-fg) !important;
    });
}
  }


  function updateUiButtons() {
/* Strapline */
    const panel = document.getElementById("a11y-panel");
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #bhc-strapline,
    if (!panel) return;
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .bhc-strapline{
  color: var(--a11y-contrast-fg) !important;
}


    const setPressed = (action, pressed) => {
/* Search box wrappers */
      const b = panel.querySelector(`button[data-action="${action}"]`);
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #p-search,
      if (b) b.setAttribute("aria-pressed", pressed ? "true" : "false");
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #simpleSearch{
    };
  background: #000 !important;
  color: var(--a11y-contrast-fg) !important;
}


    setPressed("contrast", STATE.contrast);
/* Search input (generic) */
    setPressed("underline", STATE.underline);
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #searchInput,
    setPressed("ruler", STATE.ruler);
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #p-search #searchInput,
    setPressed("cursor", STATE.cursor !== "off");
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #p-search input[type="search"],
    setPressed("spacing-plus", STATE.spacing === "plus");
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #simpleSearch input[type="search"]{
    setPressed("spacing-minus", STATE.spacing === "minus");
  background: #000 !important;
    setPressed("spacing-reset", false);
  color: var(--a11y-contrast-fg) !important;
    setPressed("font-plus", false);
  caret-color: var(--a11y-contrast-fg) !important;
    setPressed("font-minus", false);
  border: 2px solid var(--a11y-contrast-fg) !important;
    setPressed("font-reset", STATE.fontPct !== 100);
  box-shadow: none !important;
    setPressed("reset", false);
  -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;
}


    const cursorBtn = panel.querySelector('button[data-action="cursor"]');
/* Timeless-specific: beat background:#fff !important */
    if (cursorBtn) {
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #p-search input[type="search"],
      const label = (STATE.cursor === "off") ? "Off" : (STATE.cursor === "white") ? "White" : "Yellow";
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #p-search #searchInput{
      cursorBtn.textContent = `Large cursor: ${label}`;
  background: #000 !important;
      cursorBtn.setAttribute(
  color: var(--a11y-contrast-fg) !important;
        "aria-label",
  caret-color: var(--a11y-contrast-fg) !important;
        STATE.cursor === "off"
  border: 2px solid var(--a11y-contrast-fg) !important;
          ? "Large cursor off. Press to turn on"
  -webkit-text-fill-color: var(--a11y-contrast-fg) !important;
          : `Large cursor ${label}. Press to change colour or turn off`
}
      );
    }
  }


  // -------------------------------------------------------------------
/* Search submit button */
   // Actions
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,
  function handleAction(action) {
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-searchButton{
    switch (action) {
   background-color: #000 !important;
      case "contrast":
   border: 2px solid var(--a11y-contrast-border-85) !important;
        STATE.contrast = !STATE.contrast;
  filter: none !important;
        setCookie("contrast", STATE.contrast ? "1" : "0");
}
        applyState();
        announce(`High contrast ${STATE.contrast ? "on" : "off"}`);
        return;


      case "underline":
/* Suggestions dropdown */
        STATE.underline = !STATE.underline;
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .suggestions,
        setCookie("underline", STATE.underline ? "1" : "0");
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .suggestions-results,
        applyState();
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .suggestions-special,
        announce(`Underline links ${STATE.underline ? "on" : "off"}`);
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .suggestions a,
        return;
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;
}


      case "spacing-plus":
/* Vector search tabs area */
        STATE.spacing = (STATE.spacing === "plus") ? "off" : "plus";
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-search-profile-tabs,
        setCookie("spacing", STATE.spacing);
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-search-profile-tabs *{
        applyState();
  background: #000 !important;
        announce(STATE.spacing === "plus" ? "Text spacing increased" : "Text spacing normal");
  color: var(--a11y-contrast-fg) !important;
        return;
  border-color: var(--a11y-contrast-border-85) !important;
}


      case "spacing-minus":
/* [A11Y-SECTION:high-contrast-personal-tools-reduce-border-clutter] */
        STATE.spacing = (STATE.spacing === "minus") ? "off" : "minus";
/* =========================================================
        setCookie("spacing", STATE.spacing);
  HIGH CONTRAST: Personal tools (reduce border clutter)
        applyState();
  ========================================================= */
        announce(STATE.spacing === "minus" ? "Text spacing decreased" : "Text spacing normal");
        return;


      case "spacing-reset":
/* Force yellow text to beat Timeless dark text */
        STATE.spacing = "off";
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal,
        setCookie("spacing", "off");
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal a,
        applyState();
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal h2,
        announce("Text spacing reset");
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal h3,
        return;
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;
}


      case "cursor":
/* Force black background to beat Timeless white dropdown */
        STATE.cursor = (STATE.cursor === "off") ? "white" : (STATE.cursor === "white") ? "yellow" : "off";
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal .dropdown,
        setCookie("cursor", STATE.cursor);
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal .mw-portlet-body,
        applyState();
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal-inner,
        announce(
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal-inner *{
          STATE.cursor === "off" ? "Large cursor off" :
  background: #000 !important;
          STATE.cursor === "white" ? "Large cursor white" :
  background-image: none !important;
          "Large cursor yellow"
}
        );
        return;


      case "ruler":
/* Keep ONE border only (container), remove nested borders */
        STATE.ruler = !STATE.ruler;
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #personal .dropdown,
        setCookie("ruler", STATE.ruler ? "1" : "0");
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #personal-inner.dropdown,
        if (STATE.ruler && !rulerY) rulerY = Math.floor(window.innerHeight / 2);
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #personal .mw-portlet-body{
        applyState();
  background: #000 !important;
        announce(`Reading ruler ${STATE.ruler ? "on" : "off"}`);
  color: var(--a11y-contrast-fg) !important;
        return;
  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;
}


      case "font-plus":
/* =========================================================
        STATE.fontPct = clamp(STATE.fontPct + 10, 90, 140);
  HIGH CONTRAST: Timeless containers that fight back
        setCookie("fontPct", String(STATE.fontPct));
  ========================================================= */
        applyState();
        announce("Text size increased");
        return;


      case "font-minus":
/* Timeless forces grey content container */
        STATE.fontPct = clamp(STATE.fontPct - 10, 90, 140);
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-content-container{
        setCookie("fontPct", String(STATE.fontPct));
  background: #000 !important;
        applyState();
  background-image: none !important;
        announce("Text size decreased");
}
        return;


      case "font-reset":
/* Timeless header container sometimes white at breakpoints */
        STATE.fontPct = 100;
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-header-container{
        setCookie("fontPct", "100");
  background: #000 !important;
        applyState();
  background-image: none !important;
        announce("Text size reset");
}
        return;


      case "reset":
/* Timeless related-navigation sidebar chunk at ≥1340px */
        ["contrast","underline","spacing","cursor","ruler","fontPct"].forEach(delCookie);
@media screen and (min-width: 1340px){
        STATE.contrast = false;
  body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless
        STATE.underline = false;
  #mw-related-navigation .sidebar-chunk{
        STATE.spacing = "off";
    background: #000 !important;
        STATE.cursor = "off";
    background-image: none !important;
        STATE.ruler = false;
    border-color: var(--a11y-contrast-border-85) !important;
        STATE.fontPct = 100;
    box-shadow: none !important;
        rulerY = 0;
        applyState();
        announce("Accessibility settings reset");
        return;
    }
   }
   }
}


  // -------------------------------------------------------------------
/* mw-content border colour in high-contrast mode */
  // Load saved settings
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-content{
   // -------------------------------------------------------------------
   border-color: var(--a11y-contrast-fg) !important;
  function loadState() {
}
    STATE.contrast = getCookie("contrast", "0") === "1";
    STATE.underline = getCookie("underline", "0") === "1";


    const spacing = getCookie("spacing", "off");
/* =========================================================
    STATE.spacing = (spacing === "plus" || spacing === "minus") ? spacing : "off";
  EDIT MODE: textarea and editOptions
  ========================================================= */


    const cursor = getCookie("cursor", "off");
/* Edit textarea */
    STATE.cursor = (cursor === "white" || cursor === "yellow") ? cursor : "off";
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;
}


    STATE.ruler = getCookie("ruler", "0") === "1";
/* 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;
}


    const fp = parseInt(getCookie("fontPct", "100"), 10);
/* Don’t override links here — let your global contrast link styling apply */
    STATE.fontPct = clamp(isNaN(fp) ? 100 : fp, 90, 140);
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 */
   // Init
  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 *{
  function init() {
    color: var(--a11y-contrast-fg) !important;
    ensureUi();
    loadState();
    applyState();
   }
   }


   if (document.readyState === "loading") {
   /* …but if it’s a LINK (or inside a link), keep it blue */
    document.addEventListener("DOMContentLoaded", init);
  body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-site-navigation .sidebar-chunk a,
   } else {
  body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-site-navigation .sidebar-chunk a:visited,
     init();
  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;
}

Latest revision as of 12:54, 29 January 2026

/*
⚠️ 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;
}
Retrieved from "https://wiki.bellingham-heritage.org.uk:443/index.php?title=MediaWiki:Gadget-bhc-accessibility.css&oldid=1632"