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.
 
(88 intermediate revisions by the same user not shown)
Line 1: Line 1:
/*
⚠️ 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] */
/* =========================================================
/* =========================================================
   Accessibility launcher + menu (bottom-right icon)
   BHC Accessibility Gadget – MediaWiki / Timeless
   ========================================================= */
   ========================================================= */
/* [A11Y-SECTION:variables] */
/* ---------------------------------------------------------
  Variables
  --------------------------------------------------------- */
:root{
:root{
   --a11y-bg: #111827;         /* dark slate */
   --a11y-bg: #111827;
   --a11y-border: #374151;
   --a11y-border: #374151;
   --a11y-fg: #ffffff;
   --a11y-fg: #ffffff;
   --a11y-focus: #FFBF47;     /* strong focus outline */
   --a11y-focus: #FFBF47;
   --a11y-link-underline: #1D4ED8; /* underline color (non-contrast mode) */
   --a11y-link-underline: #3366CC; /* MediaWiki link blue */
   --a11y-menu-width: 340px;
   --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;
}
}


/* Floating accessibility icon button */
/* 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{
.a11y-toggle{
   position: fixed;
   position: fixed;
Line 22: Line 132:
   border-radius: 50%;
   border-radius: 50%;


   background: #005FCC;   /* accessibility blue */
   background: #005FCC;
   border: 2px solid #ffffff;
   border: 2px solid #ffffff;
   color: #ffffff;
   color: #ffffff;
Line 39: Line 149:
}
}
.a11y-toggle svg{
.a11y-toggle svg{
   width: 34px;
   width: 44px;
   height: 34px;
   height: 44px;
   fill: currentColor;
   fill: currentColor;
}
}


/* Menu panel (opens above the button) */
/* [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{
.a11y-panel{
   position: fixed;
   position: fixed;
Line 64: Line 185:
.a11y-panel[hidden]{ display:none !important; }
.a11y-panel[hidden]{ display:none !important; }


/* Panel header row */
/* Header */
.a11y-head{
.a11y-head{
   display:flex;
   display:flex;
   align-items:center;
   align-items:center;
   justify-content: space-between;
   justify-content: space-between;
  gap: 10px;
   margin-bottom: 10px;
   margin: 0 0 10px 0;
}
}
.a11y-head h2{
.a11y-head h2{
Line 77: Line 197:
}
}
.a11y-help{
.a11y-help{
  display:inline-flex;
  align-items:center;
  justify-content:center;
   width: 28px;
   width: 28px;
   height: 28px;
   height: 28px;
   border-radius: 999px;
   border-radius: 50%;
   border: 1px solid #ffffff;
   background: #fff;
   color: #111827;
   color: #111827;
   background: #ffffff;
   font-weight: 900;
   text-decoration: none;
   text-decoration: none;
   font-weight: 900;
   display:flex;
   line-height: 1;
  align-items:center;
   justify-content:center;
}
}
.a11y-help:hover{ background:#F3F4F6; }
.a11y-help:focus-visible{
.a11y-help:focus-visible{
   outline: 3px solid var(--a11y-focus);
   outline: 3px solid var(--a11y-focus);
Line 96: Line 213:
}
}


/* Button rows */
/* Buttons */
.a11y-row{
.a11y-row{
   display:flex;
   display:flex;
   gap: 8px;
   gap: 8px;
   flex-wrap: wrap;
   flex-wrap: wrap;
  align-items:center;
   margin-bottom: 10px;
   margin-bottom: 10px;
}
}
.a11y-btn{
.a11y-btn{
  appearance:none;
   border: 1px solid #D1D5DB;
   border: 1px solid #D1D5DB;
   background:#FFFFFF;
   background:#fff;
   color:#111827;
   color:#111827;
   padding: 8px 10px;
   padding: 8px 10px;
   border-radius: 999px;
   border-radius: 999px;
   font-size: 14px;
   font-size: 14px;
  line-height: 1;
   font-weight: 800;
   font-weight: 800;
   cursor: pointer;
   cursor: pointer;
}
}
.a11y-btn:hover{ background:#F3F4F6; }
.a11y-btn[aria-pressed="true"]{
.a11y-btn:active{ transform: translateY(1px); }
  background:#111827;
  color:#fff;
}
.a11y-btn:focus-visible{
.a11y-btn:focus-visible{
   outline: 3px solid var(--a11y-focus);
   outline: 3px solid var(--a11y-focus);
   outline-offset: 2px;
   outline-offset: 2px;
}
/* Pressed state */
.a11y-btn[aria-pressed="true"]{
  background:#111827;
  color:#ffffff;
  border-color:#ffffff;
}
}


/* Small explanatory text */
.a11y-hint{
.a11y-hint{
   font-size: 24px;
   font-size: 13px;
   color: #D1D5DB;
   color: var(--a11y-fg);
  margin-top: 6px;
   line-height: 1.4;
   line-height: 1.4;
}
}


/* Visually hidden helper (for aria-live etc) */
/* Screen reader only */
.a11y-sr{
.a11y-sr{
   position:absolute !important;
   position:absolute;
   width:1px !important;
   width:1px;
   height:1px !important;
   height:1px;
  padding:0 !important;
   overflow:hidden;
  margin:-1px !important;
   clip:rect(0,0,0,0);
   overflow:hidden !important;
   clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}
}


/* [A11Y-SECTION:feature-classes] */
/* =========================================================
/* =========================================================
   Features applied to page via classes / inline font sizing
   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 */
}


/* High contrast: black + yellow (kiosk-friendly) */
/* If portlets use <span> inside links, ensure span doesn't shrink hitbox */
body.a11y-contrast{
body.skin-timeless .mw-portlet-body li > a > span,
   background:#000 !important;
body.skin-vector .mw-portlet-body li > a > span{
   color:#FFD400 !important;
   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 */
}


  /* make the toolbar/panel inherit the same scheme */
body.skin-timeless #toc li > a,
  --a11y-bg: #000000;
body.skin-vector #toc li > a,
   --a11y-border: rgba(255, 212, 0, 0.75);
body.skin-timeless .toc li > a,
   --a11y-fg: #FFD400;
body.skin-vector .toc li > a{
   --a11y-focus: #FFD400;
   display: inline-block;
   --a11y-link-underline: #FFD400;
   padding: 4px 6px; /* matches sidebar hit area */
   line-height: 1.3;
   border-radius: 6px;
}
}


/* Links */
body.skin-timeless #toc a:focus-visible,
body.a11y-contrast a{
body.skin-vector #toc a:focus-visible{
   color:#FFD400 !important;
   outline: 2px solid currentColor;
  outline-offset: 2px;
}
}


/* Make common button-like elements readable in contrast mode */
/* [A11Y-SECTION:high-contrast-black-yellow-blue] */
body.a11y-contrast button,
/* ------------------------------
body.a11y-contrast .menu-btn,
  High contrast (black/yellow/blue)
body.a11y-contrast .back-btn,
  ------------------------------ */
body.a11y-contrast .a11y-btn{
 
   color:#FFD400 !important;
/* [A11Y-SECTION:high-contrast-presets] */
   border-color: rgba(255, 212, 0, 0.75) !important;
/* ------------------------------
  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);
}
}


/* Keep dark surfaces dark */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white){
body.a11y-contrast .a11y-panel,
body.a11y-contrast .a11y-toggle{
   background:#000 !important;
   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] */
/* =========================================================
/* =========================================================
   Contrast mode: ensure A11y panel buttons remain readable
   HIGH CONTRAST: Links must be visually distinct
   - Default .a11y-btn has white background; in contrast mode we force black/yellow.
   Blue + underline to meet WCAG 1.4.1
   ========================================================= */
   ========================================================= */
body.a11y-contrast .a11y-hint{
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a,
   color:#FFD400 !important;
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;
}
}


body.a11y-contrast .a11y-btn{
/* FIX: portlet links should be blue + underlined */
   background:#000000 !important;
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-portlet-body a,
   color:#FFD400 !important;
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-portlet-body a:visited{
   border:2px solid rgba(255, 212, 0, 0.85) !important;
   color: var(--a11y-contrast-link) !important;
   text-decoration: underline !important;
   text-decoration-thickness: 2px;
  text-underline-offset: 0.15em;
}
}


body.a11y-contrast .a11y-btn:hover{
/* CRITICAL FIX: many MW links are <a><span>text</span></a>
   background:#111111 !important;
  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;
}
}


body.a11y-contrast .a11y-btn[aria-pressed="true"]{
/* A11y UI in contrast */
   background:#000000 !important;
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .a11y-panel,
  color:#FFD400 !important;
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .a11y-toggle{
  border-color:#FFD400 !important;
   background:#000 !important;
}
}
/* Progress bar in contrast mode */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .a11y-btn{
body.a11y-contrast .progress-wrap{
   background:#000 !important;
   background: rgba(255, 212, 0, 0.18) !important;
  color:var(--a11y-contrast-fg) !important;
   border-color: rgba(255, 212, 0, 0.45) !important;
   border:2px solid var(--a11y-contrast-border-85) !important;
}
}
body.a11y-contrast .progress-bar{
 
   background: rgba(255, 212, 0, 0.85) !important;
/* FIX: “?” help button in contrast */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .a11y-help{
   background:#000 !important;
  color:var(--a11y-contrast-fg) !important;
  border:2px solid var(--a11y-contrast-border-85) !important;
}
}


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


/* Text spacing presets */
/* [A11Y-SECTION:text-spacing] */
/* ------------------------------
  Text spacing
  ------------------------------ */
body.a11y-spacing-plus{
body.a11y-spacing-plus{
   line-height: 1.8 !important;
   line-height: 1.8 !important;
Line 244: Line 470:
}
}


/* Large cursor (two options) — relative URLs so /churches works */
/* [A11Y-SECTION:large-cursors-wiki-hosted] */
/* ------------------------------
  Large cursors (wiki-hosted)
  ------------------------------ */
body.a11y-cursor-white,
body.a11y-cursor-white,
body.a11y-cursor-white *{
body.a11y-cursor-white *{
Line 254: Line 483:
}
}


/* Reading ruler overlay — JS positions #a11y-ruler */
/* [A11Y-SECTION:reading-ruler] */
/* ------------------------------
  Reading ruler
  ------------------------------ */
#a11y-ruler{
#a11y-ruler{
   position: fixed;
   position: fixed;
Line 266: Line 498:
   background: linear-gradient(
   background: linear-gradient(
     to bottom,
     to bottom,
     #C8FF00 0%,
     var(--a11y-contrast-fg) 0%,
     #C8FF00 40%,
     var(--a11y-contrast-fg) 40%,
     #000000 40%,
     #000000 40%,
     #000000 60%,
     #000000 60%,
     #C8FF00 60%,
     var(--a11y-contrast-fg) 60%,
     #C8FF00 100%
     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.
  ========================================================= */


   opacity: 0.95;
/* TOC */
   border-top: 1px solid rgba(0,0,0,0.35);
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #toc,
   border-bottom: 1px solid rgba(0,0,0,0.35);
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;
}
}
#a11y-ruler[hidden]{ display:none !important; }


/* Skip link: visible only when focused */
/* Thumb frames / image captions */
.skip-link {
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .thumb,
  position: absolute;
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .thumb *,
  left: 12px;
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .thumbinner,
  top: 12px;
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .thumbinner *,
  z-index: 11000;
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .thumbcaption,
  padding: 10px 14px;
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .thumbcaption *{
  border-radius: 8px;
   background: #000 !important;
   background: #111827;
   color: var(--a11y-contrast-fg) !important;
   color: #fff;
   border-color: var(--a11y-contrast-border-75) !important;
   text-decoration: none;
  transform: translateY(-150%);
  transition: transform 0.15s ease;
  border: 2px solid #FFBF47;
}
}


.skip-link:focus,
/* Code-like blocks */
.skip-link:focus-visible {
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) pre,
   transform: translateY(0);
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) pre *,
   outline: none;
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] */
/* =========================================================
/* =========================================================
   Kiosk integration helpers
   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;
}


/* Underline links: also underline key BUTTON labels (kiosk uses buttons not <a>) */
/* FIX: footer links should be blue (not yellow) */
body.a11y-underline-links .menu-btn .title,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer a,
body.a11y-underline-links #ov-back,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer a:visited{
body.a11y-underline-links .ov-back{
  color: var(--a11y-contrast-link) !important;
   text-decoration-line: underline !important;
   text-decoration: underline !important;
   text-decoration-thickness: 3px;
   text-decoration-thickness: 2px;
   text-underline-offset: 3px;
   text-underline-offset: 0.15em;
}
}


/* Text spacing: make the effect visible on fixed-height menu buttons */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer .mw-portlet,
body.a11y-spacing-plus .menu-btn{
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer .mw-portlet-body{
   height: auto !important;
   background: #000 !important;
   min-height: 96px;
   color: var(--a11y-contrast-fg) !important;
   padding-top: 0.6rem;
   border-color: var(--a11y-contrast-border-75) !important;
  padding-bottom: 0.6rem;
}
}
body.a11y-spacing-plus .menu-btn .title{
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer hr{
   line-height: 1.35;
   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] */
/* =========================================================
/* =========================================================
   Contrast coverage fixes (black + yellow)
   HIGH CONTRAST: Header + search + user tools
  - Menu title + instruction
  - Menu scrollbar styling
  - Slide overlay title/duration/caption/credit
   ========================================================= */
   ========================================================= */


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


/* Ensure menu buttons remain readable in contrast mode */
/* Timeless header containers */
body.a11y-contrast .menu-btn .title,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-header,
body.a11y-contrast .menu-btn .duration{
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-header-container .ts-inner,
   color:#FFD400 !important;
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;
}
}


/* Scrollbar styling: Firefox + WebKit */
/* Title */
body.a11y-contrast .menu-scroll{
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #p-logo-text #p-banner,
  scrollbar-color: #FFD400 #000000; /* thumb track */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #p-banner.mw-wiki-title,
   scrollbar-width: thin;
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #p-logo-text .mw-wiki-title{
   color: var(--a11y-contrast-fg) !important;
}
}
body.a11y-contrast .menu-scroll::-webkit-scrollbar{
 
   width: 12px;
/* 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;
}
}
body.a11y-contrast .menu-scroll::-webkit-scrollbar-track{
 
   background: #000000;
/* 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;
}
}
body.a11y-contrast .menu-scroll::-webkit-scrollbar-thumb{
 
   background: rgba(255,212,0,0.65);
/* Search input (generic) */
   border: 2px solid #000000;
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #searchInput,
   border-radius: 999px;
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.a11y-contrast .menu-scroll::-webkit-scrollbar-thumb:hover{
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #searchInput::placeholder,
   background: rgba(255,212,0,0.85);
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #simpleSearch input[type="search"]::placeholder{
   color: var(--a11y-contrast-border-75) !important;
}
}


/* Slide overlay text (title/duration/caption/credit) */
/* Timeless-specific: beat background:#fff !important */
body.a11y-contrast .track-controls,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #p-search input[type="search"],
body.a11y-contrast .track-controls *{
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #p-search #searchInput{
   color:#FFD400 !important;
   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;
}
}
body.a11y-contrast #ov-title,
 
body.a11y-contrast #ov-duration,
/* Search submit button */
body.a11y-contrast #ov-caption,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) input#mw-searchButton,
body.a11y-contrast #ov-credit,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) input#searchButton,
body.a11y-contrast .ov-title,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-searchButton{
body.a11y-contrast .ov-duration,
   background-color: #000 !important;
body.a11y-contrast .ov-caption,
  border: 2px solid var(--a11y-contrast-border-85) !important;
body.a11y-contrast .ov-credit{
  filter: none !important;
   color:#FFD400 !important;
}
}


/* Tap-to-enable sound button in contrast mode */
/* Suggestions dropdown */
body.a11y-contrast #audio-gate button{
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;
   background: #000 !important;
   color: #FFD400 !important;
   color: var(--a11y-contrast-fg) !important;
   border: 3px solid #FFD400 !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;
}
}


body.a11y-contrast #audio-gate button:hover{
/* Vector search tabs area */
   background: #111 !important;
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 progress bar yellow in contrast mode (override kiosk base CSS) */
/* Force yellow text to beat Timeless dark text */
body.a11y-contrast .progress-bar{
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal,
  background: rgba(255, 212, 0, 0.90) !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 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;
}
}
body.a11y-contrast .progress-wrap{
 
  background: rgba(255, 212, 0, 0.18) !important;
/* Force black background to beat Timeless white dropdown */
   border-color: rgba(255, 212, 0, 0.55) !important;
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 */
  High-contrast: progress bar
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;
}


/* Progress bar track */
/* =========================================================
body.a11y-contrast .progress-wrap {
  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: #000 !important;
   border-color: #ff0 !important;
   background-image: none !important;
}
}


/* Progress bar fill */
/* Timeless related-navigation sidebar chunk at ≥1340px */
body.a11y-contrast .progress-bar {
@media screen and (min-width: 1340px){
  background-color: #ff0 !important;
  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.a11y-contrast .ov-bar {
/* mw-content border colour in high-contrast mode */
    background-color: #ff0 !important;
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-content{
  border-color: var(--a11y-contrast-fg) !important;
}
}


/* =========================================================
/* =========================================================
   MediaWiki/Timeless: HIGH CONTRAST coverage
   EDIT MODE: textarea and editOptions
  (Timeless sets backgrounds/colours on containers, not body)
   ========================================================= */
   ========================================================= */


html body.a11y-contrast,
/* Edit textarea */
body.a11y-contrast #mw-wrapper,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #wpTextbox1,
body.a11y-contrast #mw-content-container,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) textarea.mw-editfont-monospace{
body.a11y-contrast #mw-content-block,
body.a11y-contrast #mw-content-wrapper,
body.a11y-contrast #mw-content,
body.a11y-contrast #content,
body.a11y-contrast .mw-body,
body.a11y-contrast .mw-parser-output,
body.a11y-contrast #mw-site-navigation,
body.a11y-contrast #mw-header-container,
body.a11y-contrast #mw-footer-container{
   background: #000 !important;
   background: #000 !important;
   color: #FFD400 !important;
   color: var(--a11y-contrast-fg) !important;
   background-image: none !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;
}
}


/* Headings (your Timeless theme sets maroon headings; override) */
/* editOptions bar */
body.a11y-contrast h1,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions,
body.a11y-contrast h2,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions *{
body.a11y-contrast h3,
  background: #000 !important;
body.a11y-contrast h4,
  color: var(--a11y-contrast-fg) !important;
body.a11y-contrast h5,
  border-color: var(--a11y-contrast-border-85) !important;
body.a11y-contrast h6,
   box-shadow: none !important;
body.a11y-contrast .mw-parser-output h1,
body.a11y-contrast .mw-parser-output h2,
body.a11y-contrast .mw-parser-output h3{
  color: #FFD400 !important;
   border-color: #FFD400 !important;
}
}


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


/* Common “box” surfaces in MW skins */
/* Buttons + inputs inside editOptions */
body.a11y-contrast .infobox,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions button,
body.a11y-contrast .thumbinner,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions input,
body.a11y-contrast .mw-parser-output .toc,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions select,
body.a11y-contrast .toc,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions textarea,
body.a11y-contrast table,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions .mw-ui-button,
body.a11y-contrast .wikitable{
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions .oo-ui-buttonElement-button{
   background: #000 !important;
   background: #000 !important;
   color: #FFD400 !important;
   color: var(--a11y-contrast-fg) !important;
   border-color: rgba(255, 212, 0, 0.75) !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;
}
}

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"