MediaWiki:Timeless.css: Difference between revisions

← Older editNewer edit →
Steve (talk | contribs)
Bureaucrats, Interface administrators, Suppressors, Administrators
1,526 edits
No edit summary
No edit summary
Tag: Reverted
Line 4: Line 4:


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


@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Roboto+Condensed:wght@400;700&family=Satisfy&display=swap');
/* ---------------------------------------------------------
  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;
}


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


  /* Site colours */
/* Timeless: stop skin CSS shrinking the accessibility icon */
   --bhc-maroon: rgb(93, 8, 58);     /* main burgundy */
body.skin-timeless .a11y-toggle{
   --bhc-gold: rgb(228, 186, 123);   /* site gold/yellow */
   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;


   --bhc-link: #005DB3;
   /* If the glyph still looks small, keep this: */
   --bhc-text: #202020;
  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;
}


  /* Header is WHITE */
/* ---------------------------------------------------------
  --bhc-header-bg: #ffffff;
  Skip links (appear when focused)
   --bhc-header-text: #202020;
  --------------------------------------------------------- */
.skip-link{
  position: absolute;
  left: 12px;
  top: 12px;
   z-index: 11000;


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


   /* Fonts */
   background: #111827;
  --bhc-body-font: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
   color: #fff;
   --bhc-heading-font: "Roboto Condensed", "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
   text-decoration: none;
   --bhc-accent-font: "Satisfy", cursive;


   /* Readability */
   top: -9999px;              /* hidden off-screen by default */
   font-size: 112.5%;
   transition: none;           /* no animation needed when hidden */
  line-height: 1.65;


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


@media (max-width: 720px){
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .skip-link{
   body.skin-timeless{ font-size: 16.5px; }
   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; }


/* ---------------------------------------------------------
/* ---------------------------------------------------------
   Global typography (content)
   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;
}


body.skin-timeless,
/* ---------------------------------------------------------
body.skin-timeless .mw-body,
  Panel
body.skin-timeless .mw-parser-output{
  --------------------------------------------------------- */
   font-family: var(--bhc-body-font);
/* Compact current-settings line (display-only) */
   color: var(--bhc-text);
.a11y-status{
   font-size: 13px;
  line-height: 1.25;
  margin: 6px 0 8px;
   opacity: 0.95;
}
}


body.skin-timeless a{ color: var(--bhc-link); }
.a11y-panel{
body.skin-timeless a:hover{ text-decoration: underline; }
  position: fixed;
  right: 14px;
  bottom: 76px;
  z-index: 10000;


body.skin-timeless .mw-parser-output h1,
  width: var(--a11y-menu-width);
body.skin-timeless .mw-parser-output h2,
  max-width: calc(100vw - 28px);
body.skin-timeless .mw-parser-output h3{
 
   font-family: var(--bhc-heading-font);
  background: var(--a11y-bg);
   letter-spacing: .02em;
  border: 1px solid var(--a11y-border);
   color: var(--bhc-maroon);
   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; }


body.skin-timeless .mw-parser-output h1{
/* Header */
   font-size: 2.05rem;
.a11y-head{
   line-height: 1.15;
  display:flex;
   margin: 0.25rem 0 0.75rem;
  align-items:center;
   font-weight: 700;
  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;
}
}


body.skin-timeless .mw-parser-output h2{
/* Buttons */
   font-size: 1.55rem;
.a11y-row{
   line-height: 1.2;
  display:flex;
   margin: 1.6rem 0 0.6rem;
  gap: 8px;
   border-bottom: 3px solid var(--bhc-sand);
  flex-wrap: wrap;
   padding-bottom: .25rem;
  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;
}
}


body.skin-timeless .mw-parser-output h3{
.a11y-hint{
   font-size: 1.25rem;
   font-size: 13px;
   line-height: 1.25;
   color: var(--a11y-fg);
   margin: 1.2rem 0 0.45rem;
   line-height: 1.4;
}
}


body.skin-timeless .mw-parser-output h4{
/* Screen reader only */
   font-size: 1.1rem;
.a11y-sr{
   line-height: 1.3;
   position:absolute;
  width:1px;
   height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
}
}


body.skin-timeless .mw-parser-output p{ margin: 0.75rem 0; }
/* =========================================================
  Feature classes
  ========================================================= */
 
/* ------------------------------
  High contrast (black/yellow/blue)
  ------------------------------ */


body.skin-timeless .mw-parser-output ul,
/* ------------------------------
body.skin-timeless .mw-parser-output ol{ margin: 0.6rem 0 0.9rem 1.25rem; }
  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.skin-timeless .mw-parser-output li{ margin: 0.2rem 0; }
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white){
  background:#000 !important;
  color: var(--a11y-contrast-fg) !important;


body.skin-timeless #toc,
  /* Gadget UI variables in contrast mode */
body.skin-timeless .toc,
  --a11y-bg: #000;
body.skin-timeless .mw-normal-catlinks,
  --a11y-border: var(--a11y-contrast-border-70);
body.skin-timeless .catlinks,
  --a11y-fg: var(--a11y-contrast-fg);
body.skin-timeless .mw-editsection,
  --a11y-focus: var(--a11y-contrast-fg);
body.skin-timeless .mw-editsection a,
   --a11y-link-underline: var(--a11y-contrast-link);
body.skin-timeless .mw-changeslist,
body.skin-timeless .mw-footer{
   font-size: 0.95rem;
}
}
/* Optional accent class you can use in wiki content */
body.skin-timeless .bhc-script{ font-family: var(--bhc-accent-font); }


/* =========================================================
/* =========================================================
   HEADER: white background + top/bottom bars (20px each)
   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;
}


/* Hide Timeless fixed decorative bars that can “float” during scroll */
/* Headings */
body.skin-timeless #mw-header-hack,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) h1,
body.skin-timeless #mw-header-nav-hack,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) h2,
body.skin-timeless .color-bar{
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) h3,
   display: none !important;
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;
}
}


/* Header container – ensure no clipping */
/* Main containers (Timeless needs explicit coverage) */
body.skin-timeless #mw-header-container{
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-wrapper,
   position: relative !important;
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-content-container,
   background: var(--bhc-header-bg) !important; /* white */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-content,
   border: 0 !important;
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-body,
   overflow: visible !important;
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-parser-output{
  background:#000 !important;
  color:var(--a11y-contrast-fg) !important;
}
 
/* Sidebars / tools */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #site-navigation,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #site-tools,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #page-tools,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-portlet,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-portlet-body{
  background:#000 !important;
  color:var(--a11y-contrast-fg) !important;
  border-color: var(--a11y-contrast-border-70) !important;
}
 
/* FIX: portlet text stays yellow (titles, non-links) */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-portlet-body{
  color:var(--a11y-contrast-fg) !important;
}
 
/* FIX: portlet links should be blue + underlined */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-portlet-body a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-portlet-body a:visited{
  color: var(--a11y-contrast-link) !important;
  text-decoration: underline !important;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.15em;
}
 
/* CRITICAL FIX: many MW links are <a><span>text</span></a>
  The span was inheriting/being forced yellow.
  Make link contents inherit the link colour. */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-portlet-body a *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer a *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer-container a *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #footer-list a *{
  color: inherit !important;
}
 
/* A11y UI in contrast */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .a11y-panel,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .a11y-toggle{
   background:#000 !important;
}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .a11y-btn{
   background:#000 !important;
  color:var(--a11y-contrast-fg) !important;
  border:2px solid var(--a11y-contrast-border-85) !important;
}
 
/* FIX: “?” help button in contrast */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .a11y-help{
  background:#000 !important;
  color:var(--a11y-contrast-fg) !important;
  border:2px solid var(--a11y-contrast-border-85) !important;
}
 
/* ------------------------------
  Underline links
  ------------------------------ */
body.a11y-underline-links a{
  text-decoration: none !important;
   border-bottom: 2px solid currentColor;
  padding-bottom: 0.05em;
}
body.a11y-underline-links:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a{
  border-bottom-color: var(--a11y-contrast-link) !important;
}
 
/* ------------------------------
  Text spacing
  ------------------------------ */
body.a11y-spacing-plus{
  line-height: 1.8 !important;
  letter-spacing: 0.06em !important;
   word-spacing: 0.16em !important;
}
body.a11y-spacing-minus{
  line-height: 1.45 !important;
  letter-spacing: 0.01em !important;
  word-spacing: 0.02em !important;
}
 
/* ------------------------------
  Large cursors (wiki-hosted)
  ------------------------------ */
body.a11y-cursor-white,
body.a11y-cursor-white *{
  cursor: url("/index.php/Special:FilePath/large-arrow-white-64.png") 8 8, auto !important;
}
body.a11y-cursor-yellow,
body.a11y-cursor-yellow *{
  cursor: url("/index.php/Special:FilePath/large-arrow-yellow-64.png") 8 8, auto !important;
}
}


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


/* Bottom bar (gold then maroon) */
body.skin-timeless #mw-header-container::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 20px;
  z-index: 5;
  pointer-events: none;
   background: linear-gradient(
   background: linear-gradient(
     to bottom,
     to bottom,
     var(--bhc-bottombar-sand) 0 33%,
     var(--a11y-contrast-fg) 0%,
     var(--bhc-bottombar-maroon) 33% 100%
     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; }
/* Make header text dark by default */
body.skin-timeless #mw-header,
body.skin-timeless #mw-header a{
  color: var(--bhc-header-text) !important;
}


/* =========================================================
/* =========================================================
   HEADER LAYOUT: stack title/strapline, then search, then user-tools
   MediaWiki: extra HIGH CONTRAST coverage (Timeless + Vector)
   (prevents large-screen collisions)
   Add at END of Gadget CSS so it wins.
   ========================================================= */
   ========================================================= */


body.skin-timeless #mw-header{
/* TOC */
   position: relative;
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #toc,
   display: flex;
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .toc,
   flex-wrap: wrap;
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #toc * ,
  align-items: flex-start;
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .toc *{
  gap: 1.25rem;
   background: #000 !important;
   color: var(--a11y-contrast-fg) !important;
   border-color: var(--a11y-contrast-border-75) !important;
}


  /* leave room for the bars */
/* Category links area */
   padding-top: calc(14px + 20px);
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-normal-catlinks,
   padding-bottom: calc(12px + 20px);
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;
}
}


/* Row 1: Title block is always full width */
/* Wikitables */
body.skin-timeless #mw-header #p-logo-text{
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) table,
   min-width: 0;
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) table *,
   flex: 1 1 100%;
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikitable,
   width: 100%;
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikitable *,
   order: 1;
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;
}
}


/* Row 2: Search sits on its own row, right aligned, constrained */
/* Figures/captions */
body.skin-timeless #mw-header #p-search{
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) figure,
  flex: 1 1 100%;
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) figure *,
  width: 100%;
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-halign-center,
  max-width: none;
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-halign-centre,
   margin-left: 0;
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-halign-center *,
   order: 2;
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .mw-halign-centre *{
   background: #000 !important;
   color: var(--a11y-contrast-fg) !important;
}
}


/* Constrain the inner search box and right-align it */
/* Thumb frames / image captions */
body.skin-timeless #mw-header #p-search form#searchform,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .thumb,
body.skin-timeless #mw-header #p-search #simpleSearch{
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .thumb *,
   max-width: 520px;
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .thumbinner,
   margin-left: auto; /* right align */
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;
}
}


/* Row 3: User tools on its own row, right aligned */
/* Code-like blocks */
body.skin-timeless #mw-header #user-tools{
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) pre,
  flex: 1 1 100%;
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) pre *,
  width: 100%;
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) code,
  max-width: none;
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) code *{
   margin-left: 0;
   background: #000 !important;
   order: 3;
   color: var(--a11y-contrast-fg) !important;
   text-align: right;
   border-color: var(--a11y-contrast-border-75) !important;
}
}


body.skin-timeless #mw-header #user-tools #personal{
/* =========================================================
   display: inline-block;
  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;
}
}


/* Optional: open dropdown from right edge */
/* FIX: footer links should be blue (not yellow) */
body.skin-timeless #mw-header #user-tools #personal-inner.dropdown{
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer a,
   right: 0 !important;
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer a:visited{
   left: auto !important;
   color: var(--a11y-contrast-link) !important;
   text-decoration: underline !important;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.15em;
}
}


/* Small widths: keep things simple */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer .mw-portlet,
@media (max-width: 720px){
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer .mw-portlet-body{
  body.skin-timeless #mw-header #p-search form#searchform,
  background: #000 !important;
  body.skin-timeless #mw-header #p-search #simpleSearch{
  color: var(--a11y-contrast-fg) !important;
    max-width: none;
  border-color: var(--a11y-contrast-border-75) !important;
    margin-left: 0;
}
   }
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-footer hr{
   border-color: var(--a11y-contrast-fg) !important;
}
}


/* =========================================================
/* =========================================================
   SITE TITLE + LOGO (left)
   Underline links: ensure TOC wins
  Timeless uses: #p-logo-text a#p-banner
   ========================================================= */
   ========================================================= */
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;
}


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


  background-image: url(/resources/assets/BHClogo.jpg);
/* Base header + content containers */
  background-repeat: no-repeat;
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-header-container,
   background-position: left top;
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-content-container{
   background-size: 96px 96px;
   background: #000 !important;
   background-image: none !important;
}


  min-height: 96px;      /* reserves logo height */
/* Timeless header containers */
   padding-left: 118px;  /* reserves logo width + gap */
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 link should not carry logo spacing */
/* Title */
body.skin-timeless #p-logo-text #p-banner{
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #p-logo-text #p-banner,
  display: block;
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #p-banner.mw-wiki-title,
  text-decoration: none;
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #p-logo-text .mw-wiki-title{
  color: var(--a11y-contrast-fg) !important;
}


  font-family: var(--bhc-heading-font) !important;
/* Strapline */
  font-weight: 700;
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #bhc-strapline,
  font-size: 40px;
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .bhc-strapline{
  letter-spacing: .01em;
   color: var(--a11y-contrast-fg) !important;
   color: var(--bhc-maroon) !important;
}


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


   line-height: 1.05;
/* Search input (generic) */
   white-space: normal;
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #searchInput,
   margin: 0;
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;
}
}


/* Strapline injected (LocalSettings-driven). Expect element id="bhc-strapline" or class="bhc-strapline".
/* Timeless-specific: beat background:#fff !important */
  We style BOTH for safety. */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #p-search input[type="search"],
body.skin-timeless #bhc-strapline,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #p-search #searchInput{
body.skin-timeless .bhc-strapline{
   background: #000 !important;
   margin-top: 0.15rem;
   color: var(--a11y-contrast-fg) !important;
   font-family: var(--bhc-accent-font);
   caret-color: var(--a11y-contrast-fg) !important;
   color: var(--bhc-teal);
   border: 2px solid var(--a11y-contrast-fg) !important;
   font-size: 20px;
   -webkit-text-fill-color: var(--a11y-contrast-fg) !important;
   line-height: 1.12;
  font-weight: 400;
  white-space: normal;
  max-width: 52rem;
}
}


@media (max-width: 1024px){
/* Search submit button */
  body.skin-timeless #bhc-strapline,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) input#mw-searchButton,
  body.skin-timeless .bhc-strapline{
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) input#searchButton,
    font-size: 18px;
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-searchButton{
    max-width: 100%;
  background-color: #000 !important;
   }
  border: 2px solid var(--a11y-contrast-border-85) !important;
   filter: none !important;
}
}


@media (max-width: 720px){
/* Suggestions dropdown */
   body.skin-timeless #bhc-strapline,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .suggestions,
   body.skin-timeless .bhc-strapline{
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .suggestions-results,
    font-size: 16px;
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;
}
}


/* Remove any old pseudo-element strapline rules (belt & braces) */
/* Vector search tabs area */
body.skin-timeless #p-logo-text #p-banner::after{
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-search-profile-tabs,
   content: none !important;
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;
}
}


/* Small widths: reduce left indent + logo size (logo is on #p-logo-text now) */
/* =========================================================
@media (max-width: 768px){
  HIGH CONTRAST: Personal tools (reduce border clutter)
  body.skin-timeless #p-logo-text{
  ========================================================= */
    background-size: 72px 72px !important;
 
    padding-left: 92px !important; /* 72 + ~20 gap */
/* Force yellow text to beat Timeless dark text */
    min-height: 72px !important;
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;
}


  body.skin-timeless #p-logo-text #p-banner{
/* Force black background to beat Timeless white dropdown */
    line-height: 1.05 !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;
}
}


/* Hide Timeless sidebar logo to avoid double branding */
/* Keep ONE border only (container), remove nested borders */
body.skin-timeless #mw-site-navigation #p-logo{
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #personal .dropdown,
   display: none !important;
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;
}
}


/* =========================================================
/* =========================================================
   SEARCH: icon OUTSIDE input (right side)
   HIGH CONTRAST: Timeless containers that fight back
   ========================================================= */
   ========================================================= */


body.skin-timeless #p-search #simpleSearch{
/* Timeless forces grey content container */
   position: relative;
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;
}
}


/* Input */
/* Timeless related-navigation sidebar chunk at ≥1340px */
body.skin-timeless #p-search input[type="search"],
@media screen and (min-width: 1340px){
body.skin-timeless #p-search #searchInput{
  body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless
  width: 100%;
  #mw-related-navigation .sidebar-chunk{
  box-sizing: border-box;
    background: #000 !important;
    background-image: none !important;
    border-color: var(--a11y-contrast-border-85) !important;
    box-shadow: none !important;
  }
}


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


  background: #fff !important;
/* =========================================================
  color: #202020 !important;
  EDIT MODE: textarea and editOptions
  caret-color: #202020 !important;
  ========================================================= */


  border: 1px solid rgba(0,0,0,.18) !important;
/* 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;
   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;
}


   -webkit-appearance: none;
/* editOptions bar */
   appearance: none;
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;
}


  /* room for icon */
/* Don’t override links here — let your global contrast link styling apply */
   padding-right: 3.1rem !important;
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;
}
}


body.skin-timeless #p-search input[type="search"]::placeholder,
/* Buttons + inputs inside editOptions */
body.skin-timeless #p-search #searchInput::placeholder{
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions button,
   color: rgba(0,0,0,.55) !important;
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;
}
}


/* Hide WebKit search decorations */
/* Focus visibility */
body.skin-timeless #p-search input[type="search"]::-webkit-search-decoration,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions button:focus-visible,
body.skin-timeless #p-search input[type="search"]::-webkit-search-cancel-button,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions input:focus-visible,
body.skin-timeless #p-search input[type="search"]::-webkit-search-results-button,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions select:focus-visible,
body.skin-timeless #p-search input[type="search"]::-webkit-search-results-decoration{
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions .mw-ui-button:focus-visible,
   -webkit-appearance: none;
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .editOptions .oo-ui-buttonElement-button:focus-visible{
   display: none;
   outline: 3px solid var(--a11y-contrast-fg) !important;
   outline-offset: 2px !important;
}
}


/* Keep ONE icon button (Search), hide Go */
/* =========================================================
body.skin-timeless #p-search input#mw-searchButton,
  EDIT MODE: Codex (CDX) message banners (e.g. interface warning)
body.skin-timeless #p-search input#searchButton{
  ========================================================= */
   position: absolute;
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .cdx-message,
   top: 50%;
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .cdx-message--block,
   right: 6px;
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .cdx-message--error{
   transform: translateY(-50%);
  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;
}


   width: 38px;
/* FIX: Timeless sidebar chunks stay light at 1100–1339px.
  height: 38px;
  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;
  }


   padding: 0;
   /* If any text inside is still dark, force it yellow */
   margin: 0;
  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;
  }


   border-radius: 10px;
   /* …but if it’s a LINK (or inside a link), keep it blue */
   border: 1px solid rgba(0,0,0,.18);
  body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #mw-site-navigation .sidebar-chunk a,
   background: #fff;
  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;
  }
}


   cursor: pointer;
/* 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;
  }


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


   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath fill='%23666' d='M10 18a8 8 0 1 1 5.293-14.293A8 8 0 0 1 10 18m0-2a6 6 0 1 0-6-6a6 6 0 0 0 6 6m9.707 6.293l-5.1-5.1l1.414-1.414l5.1 5.1z'/%3E%3C/svg%3E");
   /* …but links stay blue */
   background-repeat: no-repeat;
  body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-site-navigation .sidebar-chunk a,
   background-position: center;
  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;
  }
}
}


body.skin-timeless #p-search input#searchButton{
/* =========================================================
   display: none !important;
  EMERGENCY: ensure the accessibility toggle is visible
}
  (keep at VERY END)
  ========================================================= */
#a11y-toggle.a11y-toggle{
   position: fixed !important;
  right: 16px !important;
  bottom: 16px !important;


/* Label styling */
  display: inline-flex !important;
body.skin-timeless #p-search label{
   visibility: visible !important;
   color: rgba(32,32,32,.75) !important;
  opacity: 1 !important;
}


/* =========================================================
  z-index: 2147483647 !important;
  Personal dropdown: ensure text is dark (header is white)
  pointer-events: auto !important;
  ========================================================= */


body.skin-timeless #personal,
   transform: none !important;
body.skin-timeless #personal a,
body.skin-timeless #personal h2,
body.skin-timeless #personal h3,
body.skin-timeless #personal .mw-portlet,
body.skin-timeless #personal .mw-portlet *{
   color: #202020 !important;
}
}
 
#a11y-toggle.a11y-toggle svg{
body.skin-timeless #personal .dropdown,
   display: block !important;
body.skin-timeless #personal .mw-portlet-body{
  visibility: visible !important;
   background: #fff !important;
  opacity: 1 !important;
}
}


/* =========================================================
/* =========================================================
   CONTENT WRAPPER FIXES
   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
   ========================================================= */
   ========================================================= */


body.skin-timeless #mw-content-container{
/* ---------- Firefox (Gecko) ---------- */
  background: #eaecf0 !important;
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white),
   background-image: none !important;
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) *{
  border-bottom: 0 !important;
   scrollbar-color: var(--a11y-contrast-fg) #000;     /* thumb / track */
   padding-top: 1rem !important; /* breathing space under header bar */
   scrollbar-width: auto;           /* or 'thin' if you prefer */
}
}


/* Reduce Timeless default top gap below header */
/* ---------- Chrome / Safari / Opera (WebKit/Blink) ---------- */
@media screen and (min-width: 851px) {
/* Page scrollbars */
   body.skin-timeless #mw-content-container{
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white)::-webkit-scrollbar{
    margin-top: 0.5rem !important;
  width: 14px;
    padding-bottom: 1em !important;
  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) */
  FOOTER: match site (burgundy, white text, gold links) + top border
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 */
}


body.skin-timeless #mw-footer-container{
/* FIX: WikiEditor tool-select dropdown text becomes unreadable
  background: var(--bhc-maroon) !important;
  because it inherits yellow from body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white). */
  border-top: 10px solid var(--bhc-gold) !important;
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 */
}
}


/* Full-bleed footer: remove Timeless .ts-inner side padding ONLY in footer */
/* FIX: WikiEditor toolbar tabs readability in high-contrast mode */
body.skin-timeless #mw-footer-container .ts-inner{
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui-toolbar .tabs a,
  max-width: none !important;
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui-toolbar .tabs a:visited{
   padding-left: 0 !important;
   color: #0645ad !important;  /* MediaWiki blue */
   padding-right: 0 !important;
}
}


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


/* Footer links */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) textarea::-webkit-scrollbar,
body.skin-timeless #mw-footer a,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) #wpTextbox1::-webkit-scrollbar,
body.skin-timeless #mw-footer a:visited{
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) .wikiEditor-ui::-webkit-scrollbar{
   color: var(--bhc-gold) !important;
  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);
}
}


/* Footer padding */
/* Try to target root scrolling element where supported */
body.skin-timeless #footer-list {padding-left:20px; padding-bottom: 20px;}
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) html{
body.skin-timeless #footer-icons {padding-right: 20px;}
  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;
}


/* =========================================================
/* =========================================================
   Hide empty "Wiki Tools" (site-tools) portlet on smaller screens
   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.
   ========================================================= */
   ========================================================= */
@media (max-width: 1100px){
 
  body.skin-timeless #site-tools{
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a,
    display: none !important;
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a:visited{
    height: 0 !important;
  color: var(--a11y-contrast-link) !important;
    overflow: hidden !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>),
   Remove Timeless default borders on MediaWiki heading wrappers and TOC title
   force ALL children inside links to inherit the link colour. */
  ========================================================= */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a *,
body.skin-timeless .toctitle,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white) a:visited *{
body.skin-timeless .mw-heading2,
   color: inherit !important;
body.skin-timeless .mw-heading3,
body.skin-timeless .mw-heading4,
body.skin-timeless .mw-heading5 {
   border-bottom: none !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
}


/* =========================================================
/* Extra specificity for the problem zones (beats Timeless + portlet-body * rules) */
  Header: use available width on large screens (reduce height)
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless .mw-portlet-body a,
  - Keep wrap on smaller screens
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;
}


/* Make sure the logo/title portlet is not shrink-wrapped by skin rules */
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless .mw-portlet-body a *,
body.skin-timeless #p-logo-text{
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless .mw-portlet-body a:visited *,
  display: block !important;
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-footer a *,
  float: none !important;
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #mw-footer a:visited *{
  width: 100% !important;
   color: inherit !important;
   max-width: none !important;
}
}


/* Wide screens: keep title + strapline on single lines */
/* =========================================================
@media (min-width: 1100px){
  FINAL FIX: #personal (user tools) links
  body.skin-timeless #p-logo-text #p-banner{
  The portlet-body * rule forces yellow.
    white-space: nowrap !important;
  Override ONLY for links and their contents.
    font-size: 52px !important;      /* tweak 48–56 if you want */
  ========================================================= */
    line-height: 1.02 !important;
  }


  body.skin-timeless #bhc-strapline,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal a,
  body.skin-timeless .bhc-strapline{
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal a:visited{
    white-space: nowrap !important;
  color: var(--a11y-contrast-link) !important;
    max-width: none !important;
  text-decoration: underline !important;
    margin-top: 0.05rem !important;
  }
}
}


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

Revision as of 09:33, 29 January 2026

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

/* =========================================================
   BHC Accessibility Gadget – MediaWiki / Timeless
   ========================================================= */

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


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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* =========================================================
   Feature classes
   ========================================================= */

/* ------------------------------
   High contrast (black/yellow/blue)
   ------------------------------ */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* =========================================================
   MediaWiki: extra HIGH CONTRAST coverage (Timeless + Vector)
   Add at END of Gadget CSS so it wins.
   ========================================================= */

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

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

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

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

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

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

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

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

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

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

/* =========================================================
   HIGH CONTRAST: Header + search + user tools
   ========================================================= */

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

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

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

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

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

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

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

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

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

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

/* =========================================================
   HIGH CONTRAST: Personal tools (reduce border clutter)
   ========================================================= */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal a *,
body:is(.a11y-contrast,.a11y-contrast-yellow,.a11y-contrast-white).skin-timeless #personal a:visited *{
  color: inherit !important;
}
Retrieved from "https://wiki.bellingham-heritage.org.uk:443/index.php?title=MediaWiki:Timeless.css&oldid=1621"