/* MR/Claude 10/20/2026: Accessibility switches from the xm-4 control panel (Mario: high contrast, reduce motion, underline
   links, larger focus outlines and a readable font, saved to the profile). Each one is a class on <html>:
     xm4-a11y-contrast  xm4-a11y-motion  xm4-a11y-links  xm4-a11y-focus  xm4-a11y-font
   _page_header.cfm prints the saved ones before the first paint (lib/com/accessibility/prefs.cfc); js/accessibility.js
   toggles them live from the panel and saves them through lib/cfc/user.cfc SaveAccessibility.
   The device setting "reduce motion" (prefers-reduced-motion) gets the same motion rules without the switch.
   Load after theme.css and dark.css so these win. Bump this file's ?ver= in _assets.cfm only once it is live. */

/* ---------- High contrast: darker text, visible borders, deeper link and status colours (WCAG AAA 7:1 for text) ---------- */
html.xm4-a11y-contrast {
  --xm4-bg:#ffffff; --xm4-surface:#ffffff; --xm4-soft:#f1f3f6; --xm4-text:#000000; --xm4-ink-2:#111827;
  --xm4-muted:#1f2937; --xm4-faint:#374151; --xm4-line:#4b5563; --xm4-line-2:#6b7280;
  --xm4-accent:#1e40af; --xm4-accent-dark:#1e3a8a; --xm4-tint:#dbe6ff;
  --xm4-danger:#991b1b; --xm4-success:#166534; --xm4-warning:#92400e;
  --xm4-a11y-placeholder:#4b5563;
  --bs-body-color:#000000; --bs-emphasis-color:#000000; --bs-secondary-color:#1f2937; --bs-tertiary-color:#374151;
  --bs-border-color:#4b5563; --bs-link-color:#1e40af; --bs-link-color-rgb:30,64,175; --bs-link-hover-color:#1e3a8a;
  --bs-link-hover-color-rgb:30,58,138; --bs-primary:#1e40af; --bs-primary-rgb:30,64,175;
}
html.xm4-a11y-contrast[data-bs-theme="dark"] {
  --xm4-bg:#000000; --xm4-surface:#0a0f18; --xm4-soft:#151c28; --xm4-text:#ffffff; --xm4-ink-2:#f1f5f9;
  --xm4-muted:#e2e8f0; --xm4-faint:#cbd5e1; --xm4-line:#94a3b8; --xm4-line-2:#64748b;
  --xm4-accent:#bfd5ff; --xm4-accent-dark:#dbe7ff; --xm4-tint:#1e3a6e;
  --xm4-danger:#fca5a5; --xm4-success:#86efac; --xm4-warning:#fcd34d;
  --xm4-a11y-placeholder:#cbd5e1;
  --bs-body-color:#ffffff; --bs-emphasis-color:#ffffff; --bs-secondary-color:#e2e8f0; --bs-tertiary-color:#cbd5e1;
  --bs-border-color:#94a3b8; --bs-link-color:#bfd5ff; --bs-link-color-rgb:191,213,255; --bs-link-hover-color:#dbe7ff;
  --bs-link-hover-color-rgb:219,231,255; --bs-primary-rgb:96,141,255;
}
/* The dark sidebar keeps its own tokens (theme.css), so it needs its own stronger set. */
html.xm4-a11y-contrast[data-xm4-sidebar-appearance="dark"] .xm4 #nav {
  --xm4-text:#ffffff; --xm4-ink-2:#f1f5f9; --xm4-muted:#e2e8f0; --xm4-faint:#cbd5e1; --xm4-line:#94a3b8; --xm4-accent:#bfd5ff;
}
html.xm4-a11y-contrast .text-muted, html.xm4-a11y-contrast .xm4-muted {color:var(--xm4-muted)!important;}
html.xm4-a11y-contrast ::placeholder {color:var(--xm4-a11y-placeholder)!important; opacity:1;}
html.xm4-a11y-contrast :is(input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea) {border-color:var(--xm4-line);}

/* ---------- Reduce motion: animations and transitions finish at once; loading spinners keep turning ---------- */
html.xm4-a11y-motion {scroll-behavior:auto!important;}
html.xm4-a11y-motion *, html.xm4-a11y-motion *::before, html.xm4-a11y-motion *::after {
  animation-duration:.01ms!important; animation-iteration-count:1!important;
  transition-duration:.01ms!important; transition-delay:0s!important; scroll-behavior:auto!important;
}
html.xm4-a11y-motion :is(.fa-spin, .fa-spin-pulse, .fa-pulse, .spinner-border, .spinner-grow) {animation-duration:1.5s!important; animation-iteration-count:infinite!important;}
/* Page-to-page view transitions (the header's view-transition meta). Kept in their own rules: a browser that does not
   know these pseudo-elements drops only the rule that names them. */
html.xm4-a11y-motion::view-transition-group(*) {animation:none!important;}
html.xm4-a11y-motion::view-transition-old(*) {animation:none!important;}
html.xm4-a11y-motion::view-transition-new(*) {animation:none!important;}
@media (prefers-reduced-motion: reduce) {
  html {scroll-behavior:auto!important;}
  html *, html *::before, html *::after {
    animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important; transition-delay:0s!important; scroll-behavior:auto!important;
  }
  html :is(.fa-spin, .fa-spin-pulse, .fa-pulse, .spinner-border, .spinner-grow) {animation-duration:1.5s!important; animation-iteration-count:infinite!important;}
}

/* ---------- Underline links: every text link in the page, panels and pop-ups is underlined, not only coloured.
   Buttons, tabs, menus, pagers and the header/sidebar navigation keep their own look.
   MR/Claude 10/20/2026: live on trustcentral the module menu (.navbar_category/.xm4-module-nav and its drop-downs), the
   Add New button and menu (.xm-drop-box, .xm-btn, .add-new), the Explorer admin menu, the modal close link and icon-only
   links (class fa-*) were underlined too; they are menus and controls, so they are left out with the others. ---------- */
html.xm4-a11y-links a[href]:not(:is(.btn, .btn-close, .xm-btn, .add-new, .nav-link, .dropdown-item, .page-link, .list-group-item, .opener, .badge, .label, .fc-event, .xm-modal-close, [class*="fa-"], [role=button], [role=tab], [role=menuitem])):not(:is(#header, #nav, .nav, .tabset, .dropdown-menu, .pagination, .ui-tabs-nav, .navbar_category, .xm4-module-nav, .xm4-mega, .xm-drop-box, .xpr-admin-menu, [role=menu], [role=menubar], [role=tablist], .xm4-panel-heading, .xm4-panel-footer) a) {
  text-decoration-line:underline!important; text-decoration-thickness:max(1px,.07em); text-underline-offset:.18em;
}
html.xm4-a11y-links a[href]:not(:is(.btn, .btn-close, .xm-btn, .add-new, .nav-link, .dropdown-item, .page-link, .list-group-item, .opener, .badge, .label, .fc-event, .xm-modal-close, [class*="fa-"], [role=button], [role=tab], [role=menuitem])):not(:is(#header, #nav, .nav, .tabset, .dropdown-menu, .pagination, .ui-tabs-nav, .navbar_category, .xm4-module-nav, .xm4-mega, .xm-drop-box, .xpr-admin-menu, [role=menu], [role=menubar], [role=tablist], .xm4-panel-heading, .xm4-panel-footer) a):is(:hover, :focus-visible) {
  text-decoration-thickness:max(2px,.12em);
}

/* ---------- Larger focus outlines: a 3px ring with a contrasting halo around whatever has keyboard focus
   (WCAG 2.4.13). Places that clip their edges (the sidebar, panel section headers, tabs, grid cells) draw it inside. ---------- */
html.xm4-a11y-focus {--xm4-a11y-ring:#1d4ed8; --xm4-a11y-halo:#ffffff;}
html.xm4-a11y-focus[data-bs-theme="dark"] {--xm4-a11y-ring:#93c5fd; --xm4-a11y-halo:#0d1422;}
html.xm4-a11y-focus :focus-visible {
  outline:3px solid var(--xm4-a11y-ring)!important; outline-offset:2px!important; box-shadow:0 0 0 7px var(--xm4-a11y-halo)!important;
}
html.xm4-a11y-focus :is(#nav a, #nav button, .control_panel .accordion > li > .opener, .control_panel .tabset a, .pq-grid *):focus-visible {
  outline-offset:-5px!important; box-shadow:inset 0 0 0 2px var(--xm4-a11y-halo)!important;
}

/* ---------- Readable text: a clearer typeface (distinct I, l and 1; open letters) with a little more space between
   letters, words and lines (WCAG 1.4.12). Icon fonts and code keep their own fonts. ---------- */
html.xm4-a11y-font {
  --xm4-a11y-font-family:Verdana,Tahoma,"Segoe UI","DejaVu Sans",sans-serif;
  --bs-body-font-family:var(--xm4-a11y-font-family);
}
html.xm4-a11y-font body,
html.xm4-a11y-font body *:not(i):not([class*="fa-"]):not([class*="icon"]):not([class*="material-"]):not(code):not(pre):not(kbd):not(samp):not(:is(pre, code, .CodeMirror, .cm-editor, .ace_editor, .monaco-editor) *) {
  font-family:var(--xm4-a11y-font-family)!important;
}
html.xm4-a11y-font body {letter-spacing:.012em; word-spacing:.06em;}
html.xm4-a11y-font #main :is(p, li, dd, blockquote, .form-text, .help-block) {line-height:1.65;}

/* ---------- The Accessibility section in the control panel (same switch as the panel's other rows) ---------- */
.xm4 .control_panel .form_row input.xm4-switch[type=checkbox] {display:inline-block; appearance:none; position:relative; flex:none; width:42px; height:26px; margin:0; border:1px solid var(--xm4-line); border-radius:20px; background:var(--xm4-muted); cursor:pointer; box-shadow:none; vertical-align:middle;}
.xm4 .control_panel .form_row input.xm4-switch[type=checkbox]::before {content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; transition:transform .15s;}
.xm4 .control_panel .form_row input.xm4-switch[type=checkbox]:checked {background:#2563eb; border-color:#2563eb;}
.xm4 .control_panel .form_row input.xm4-switch[type=checkbox]:checked::before {transform:translateX(16px);}
/* High contrast: the panel's switches (these and the older toggleCheck rows) get a track the knob stands out on. */
html.xm4-a11y-contrast .xm4 .control_panel .form_row input:is(.xm4-switch, .toggleCheck)[type=checkbox] {border-color:var(--xm4-line);}
html.xm4-a11y-contrast .xm4 .control_panel .form_row input:is(.xm4-switch, .toggleCheck)[type=checkbox]:checked {background:var(--xm4-accent); border-color:var(--xm4-accent);}
html.xm4-a11y-contrast[data-bs-theme="dark"] .xm4 .control_panel .form_row input:is(.xm4-switch, .toggleCheck)[type=checkbox]:not(:checked) {background:#475569;}
html.xm4-a11y-contrast[data-bs-theme="dark"] .xm4 .control_panel .form_row input:is(.xm4-switch, .toggleCheck)[type=checkbox]:checked::before {background:#000;}
.xm4 .control_panel .xm4-a11y-intro, .xm4 .control_panel .xm4-a11y-status {margin:0; padding:10px 14px; font-size:.75rem; line-height:1.45; color:var(--xm4-muted);}
.xm4 .control_panel .xm4-a11y-status {padding-top:4px;}
.xm4 .control_panel .xm4-a11y-status[data-state="error"] {color:var(--xm4-danger);}
@media (forced-colors: active) {
  html.xm4-a11y-focus :focus-visible {outline-color:Highlight!important; box-shadow:none!important;}
  .xm4 .control_panel .form_row input.xm4-switch[type=checkbox] {appearance:auto; width:auto; height:auto;}
  .xm4 .control_panel .form_row input.xm4-switch[type=checkbox]::before {display:none;}
}