/* ============================================================
   EmailVerifyerAPI - Global Accessibility Layer  (WCAG 2.2 Level AAA)
   ------------------------------------------------------------
   Loaded LAST on every page so its rules win the cascade.
   Each block notes the Success Criterion it satisfies.
   Enforcement-critical properties use !important so component
   CSS and inline styles cannot silently defeat them.
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&display=swap");

/* ------------------------------------------------------------
   Skip link  (2.4.1 Bypass Blocks)
   Visible only on focus; high-contrast; never obscured.
   ------------------------------------------------------------ */
.skip-link {
  position: fixed;
  top: 0; left: 0;
  transform: translateY(-120%);
  z-index: 100000;
  background: var(--xe-blue, #0A146E);
  color: #fff;
  padding: 14px 22px;
  font: 600 16px/1.2 var(--font-sans, system-ui, sans-serif);
  text-decoration: underline;
  border-radius: 0 0 8px 0;
  box-shadow: 0 6px 24px rgba(0,0,0,0.28);
  transition: transform 120ms ease;
}
.skip-link:focus,
.skip-link:focus-visible { transform: translateY(0); outline: 3px solid #fff; outline-offset: -6px; }

/* Visually-hidden, still read by AT */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.sr-only-focusable:focus,
.sr-only-focusable:focus-visible {
  position: static !important;
  width: auto; height: auto;
  margin: 0; overflow: visible; clip: auto; white-space: normal;
}

/* ------------------------------------------------------------
   Focus appearance  (2.4.13 Focus Appearance - AAA,
   2.4.11/2.4.12 Focus Not Obscured)
   A solid ring ≥3px thick, ≥2px offset, ≥3:1 contrast.
   --focus-ring is re-pointed per surface so the ring contrasts
   on BOTH light and dark backgrounds.
   ------------------------------------------------------------ */
:root { --focus-ring: #163BFF; }            /* on light surfaces */

/* Dark surfaces → light ring */
.hero,
.auth-page, .waitlist-page,
.dash-sidebar, .cta-band, .footer,
[data-theme="dark"] { --focus-ring: #A9C4FF; }

*:focus-visible {
  outline: 3px solid var(--focus-ring) !important;
  outline-offset: 2px !important;
}
/* Keyboard focus must never be removed */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible,
[tabindex]:focus-visible, [role="button"]:focus-visible,
[role="tab"]:focus-visible, [role="link"]:focus-visible,
[role="menuitem"]:focus-visible, [contenteditable]:focus-visible {
  outline: 3px solid var(--focus-ring) !important;
  outline-offset: 2px !important;
}
/* Don't let a focused control hide behind sticky headers */
html { scroll-padding-top: 96px; }
a, button, input, select, textarea, summary, [tabindex],
h1, h2, h3, h4, [id] { scroll-margin-top: 96px; }

/* ------------------------------------------------------------
   Target size (Enhanced)  (2.5.5 - AAA: min 44×44 CSS px)
   Applied to standalone controls that have room. Dense
   segmented/utility clusters are handled individually.
   ------------------------------------------------------------ */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
select, textarea {
  min-height: 44px;
}
button, [role="button"], a.btn, .btn, a[role="button"], summary {
  min-height: 44px;
  min-width: 44px;
}
/* Checkboxes & radios: enlarge hit area without resizing the glyph */
input[type="checkbox"], input[type="radio"] {
  min-width: 24px; min-height: 24px;
}
label:has(> input[type="checkbox"]),
label:has(> input[type="radio"]) { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; }

/* Dense dashboard / nav utility controls - keep visual size,
   guarantee a 44px touch area via the row they sit in. */
.chart-range-btn, .intg-seg__btn, .tab, .chip, .intg-chip,
.dash-notif__mark, .verify-seg__btn {
  min-height: 36px;
}

/* ------------------------------------------------------------
   Use of colour  (1.4.1) - links in running text carry a
   non-colour cue (underline). Buttons/badges/nav excluded.
   ------------------------------------------------------------ */
p a, li a, dd a, blockquote a, .prose a, .t-body a, .t-body-lg a,
.legal-content a, .article-body a, td a {
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: from-font;
}
p a:hover, li a:hover, .prose a:hover, .legal-content a:hover,
.article-body a:hover { text-decoration-thickness: 2px; }

/* ------------------------------------------------------------
   Status TEXT colour  (1.4.6 Contrast Enhanced - AAA 7:1)
   Re-point common error/success text off the bright brand
   tokens onto the AAA-safe *-text tokens.
   ------------------------------------------------------------ */
.form-error, .field-error, .input-error, .error-text, [role="alert"] .msg {
  color: var(--error-text, #A11E17);
}
.success-text, .field-success { color: var(--success-text, #0C5F30); }
.warning-text, .field-warning { color: var(--warning-text, #7A4E00); }
/* Dark surfaces already use light semantic tints - leave them. */
[data-theme="dark"] .form-error,
[data-theme="dark"] .field-error { color: inherit; }

/* ------------------------------------------------------------
   Visual presentation  (1.4.8 - AAA) & Text spacing (1.4.12)
   Never full-justify; keep readable measure & spacing; let
   user text-spacing overrides reflow without clipping.
   ------------------------------------------------------------ */
p, li, dd, blockquote { text-align: left; }
[style*="text-align: justify"], [style*="text-align:justify"] { text-align: left !important; }
.prose p, .legal-content p, .article-body p, .t-body, .t-body-lg {
  line-height: 1.6;
  overflow-wrap: break-word;
}
.prose, .legal-content, .article-body { max-width: 80ch; }

/* Accessible high-contrast text selection */
::selection { background: #0A146E; color: #fff; }

/* ------------------------------------------------------------
   Motion  (2.3.3 Animation from Interactions - AAA,
   2.2.2 Pause/Stop/Hide)
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  /* Reveal/entrance animations must NEVER leave content hidden:
     drop the animation and pin the visible end-state. (2.3.3) */
  .dash-page > *, .page-transition, .tm-tabs,
  .kpi-card, .plan-card, .chart-card, .activity-card,
  .verify-check, .verify-summary__card, .theme-option,
  [class*="fade-up"], [class*="reveal"] {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ------------------------------------------------------------
   System high-contrast / forced colours  (1.4.1, 1.4.11)
   Keep focus rings and borders visible in forced-colors mode.
   ------------------------------------------------------------ */
@media (forced-colors: active) {
  *:focus-visible { outline: 3px solid Highlight !important; outline-offset: 2px !important; }
  .btn, button, [role="button"] { border: 1px solid ButtonText; }
}
@media (prefers-contrast: more) {
  :root {
    --text-secondary: #2C3340;
    --text-tertiary:  #2C3340;
    --border-default: #9AA3B2;
    --border-input:   #8B95A6;
  }
}

/* ------------------------------------------------------------
   Disabled controls - communicate state beyond colour
   and keep them perceivable.  (1.4.1)
   ------------------------------------------------------------ */
:disabled, [aria-disabled="true"] { cursor: not-allowed; }

/* ============================================================
   USER PERSONALIZATION  (draft WCAG 3.0 - adaptation intent)
   Driven by a11y-prefs.js via classes/vars on <html>.
   ============================================================ */

/* --- Text size ------------------------------------------------ */
html.a11y-zoom-on { zoom: var(--a11y-zoom, 1); }

/* --- High contrast ------------------------------------------- */
/* Light surfaces: push greys to near-black, strengthen borders. */
html.a11y-contrast {
  --text-secondary: #000000;
  --text-tertiary:  #111418;
  --border-default: #1d2430;
  --border-input:   #11151c;
  --border-card:    #1d2430;
}
html.a11y-contrast a { text-decoration: underline !important; }
html.a11y-contrast:not([data-theme="dark"]) .t-sm,
html.a11y-contrast:not([data-theme="dark"]) .t-cap,
html.a11y-contrast:not([data-theme="dark"]) p,
html.a11y-contrast:not([data-theme="dark"]) li { color: #000; }
/* Dark surfaces (e.g. the dashboard): push toward white instead.
   Same-element selector so it stays a valid token scope. */
html.a11y-contrast[data-theme="dark"] {
  --text-secondary: #FFFFFF;
  --text-tertiary:  #E6ECF7;
  --border-default: #FFFFFF;
}
html.a11y-contrast[data-theme="dark"] p,
html.a11y-contrast[data-theme="dark"] li { color: #fff; }
html.a11y-contrast .hero__lede,
html.a11y-contrast .hero__stat__l,
html.a11y-contrast .compliance-badge,
html.a11y-contrast .footer a,
html.a11y-contrast .cta-band p { color: #fff !important; opacity: 1 !important; }

/* --- Reduce motion (manual, mirrors the media query) --------- */
html.a11y-reduce-motion *, html.a11y-reduce-motion *::before, html.a11y-reduce-motion *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}
html.a11y-reduce-motion .dash-page > *, html.a11y-reduce-motion .page-transition,
html.a11y-reduce-motion .tm-tabs, html.a11y-reduce-motion [class*="fade-up"],
html.a11y-reduce-motion .kpi-card, html.a11y-reduce-motion .chart-card,
html.a11y-reduce-motion .activity-card, html.a11y-reduce-motion .plan-card,
html.a11y-reduce-motion .verify-check, html.a11y-reduce-motion .verify-summary__card {
  animation: none !important; opacity: 1 !important; transform: none !important;
}

/* --- Readable font ------------------------------------------- */
html.a11y-readable-font {
  --font-sans: "Atkinson Hyperlegible", Verdana, Tahoma, sans-serif;
}
html.a11y-readable-font body,
html.a11y-readable-font button,
html.a11y-readable-font input,
html.a11y-readable-font select,
html.a11y-readable-font textarea { font-family: var(--font-sans) !important; letter-spacing: 0 !important; }

/* --- Dyslexia-friendly font ----------------------------------- */
html.a11y-font-dyslexia body,
html.a11y-font-dyslexia button,
html.a11y-font-dyslexia input,
html.a11y-font-dyslexia select,
html.a11y-font-dyslexia textarea {
  font-family: "Comic Sans MS", "Comic Neue", "Trebuchet MS", Verdana, sans-serif !important;
}

/* --- Line height / letter & word spacing ---------------------- */
html.a11y-lh-on :is(p, li, dd, dt, blockquote, label, td, th, .t-body, .t-body-lg) {
  line-height: var(--a11y-lh, 1.8) !important;
}
html.a11y-ls-on :is(p, li, a, span, button, label, h1, h2, h3, h4, h5, h6, td, th, dd, dt, input, textarea) {
  letter-spacing: var(--a11y-ls, 0.06em) !important;
  word-spacing: var(--a11y-ws, 0.12em) !important;
}

/* --- Text alignment override ----------------------------------- */
html.a11y-align-left   :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, dd, dt, figcaption) { text-align: left !important; }
html.a11y-align-center :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, dd, dt, figcaption) { text-align: center !important; }
html.a11y-align-right  :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, dd, dt, figcaption) { text-align: right !important; }

/* --- Highlight titles ------------------------------------------- */
html.a11y-highlight-titles :is(h1, h2, h3, h4, h5, h6):not(:focus-visible) {
  outline: 2px dashed var(--xe-blue-hover, #163BFF);
  outline-offset: 4px;
}

/* --- Highlight links ----------------------------------------- */
html.a11y-highlight-links a {
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 2px !important;
  font-weight: 700;
}
html.a11y-highlight-links main p a,
html.a11y-highlight-links main li a,
html.a11y-highlight-links .prose a,
html.a11y-highlight-links .legal-content a {
  box-shadow: inset 0 -0.55em 0 rgba(255, 214, 0, 0.45);
}

/* --- Larger targets ------------------------------------------ */
html.a11y-big-targets button,
html.a11y-big-targets [role="button"],
html.a11y-big-targets .btn,
html.a11y-big-targets a.btn,
html.a11y-big-targets input:not([type="checkbox"]):not([type="radio"]),
html.a11y-big-targets select { min-height: 52px !important; }
html.a11y-big-targets .header__nav-item,
html.a11y-big-targets .dash-nav-item,
html.a11y-big-targets .lgl-toc__list a { min-height: 48px; display: flex; align-items: center; }
html.a11y-big-targets input[type="checkbox"],
html.a11y-big-targets input[type="radio"] { min-width: 28px; min-height: 28px; }

/* --- Colour filters (applied to the root canvas) --------------- */
/* A filter on the document root element does NOT create a
   containing block for fixed descendants (spec exemption), so
   these are safe page-wide. */
html.a11y-filter-invert { filter: invert(1) hue-rotate(180deg); }
/* Counter-invert media so photos/video keep their true colors. */
html.a11y-filter-invert :is(img, picture, video, iframe, canvas, [style*="background-image"]) {
  filter: invert(1) hue-rotate(180deg);
}
/* Counter-invert the ENTIRE accessibility widget chrome so it stays
   readable and correctly coloured while the page is inverted.
   IMPORTANT: target the panel and FAB *directly*, never their shared
   .a11y-fab-wrap - a filter clips its element to a filter region sized to
   that element, and the 408px panel overflows the ~56px wrapper, so
   filtering the wrapper would crop the panel's shape. Filtering each piece
   on its own keeps every filter region matched to its own box. */
html.a11y-filter-invert :is(
  .a11y-fab, .a11y-panel, .a11y-readbar, .a11y-vkb, .a11y-vc,
  .a11y-dict, .a11y-tip, .a11y-skip
) {
  filter: invert(1) hue-rotate(180deg);
}
/* Grayscale / saturation also hit the widget - keep its chrome true-colour
   so controls stay legible (re-saturate, since there's no exact inverse). */
html:is(.a11y-filter-grayscale, .a11y-filter-lowsat, .a11y-filter-highsat) :is(
  .a11y-fab, .a11y-panel, .a11y-readbar, .a11y-vkb, .a11y-vc, .a11y-dict, .a11y-tip
) {
  filter: saturate(1) grayscale(0);
}
html.a11y-filter-grayscale { filter: grayscale(1); }
html.a11y-filter-lowsat    { filter: saturate(0.45); }
html.a11y-filter-highsat   { filter: saturate(2.1); }

/* --- Big cursor -------------------------------------------------- */
html.a11y-big-cursor,
html.a11y-big-cursor * {
  cursor: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="42" height="42" viewBox="0 0 24 24"%3E%3Cpath d="M4.5 1.5 L19.5 13.2 L12.6 14.1 L16.4 21.5 L12.4 23.4 L8.9 15.8 L4.5 19.6 Z" fill="white" stroke="black" stroke-width="1.5" stroke-linejoin="round"/%3E%3C/svg%3E') 4 2, auto !important;
}

/* --- Hide images -------------------------------------------------- */
html.a11y-hide-images :is(img, picture, video, [role="img"], image-slot) { visibility: hidden !important; }
html.a11y-hide-images [style*="background-image"] { background-image: none !important; }

/* The widget's own chrome (launcher, panel, reading-guide /
   mask / magnifier overlays) lives in a11y-widget.css, which
   a11y-prefs.js loads itself. */

/* ============================================================
   Added capabilities (driven by a11y-prefs.js)
   ============================================================ */

/* --- Color-vision correction (daltonize SVG filters) --------- */
html.a11y-daltonize-protan { filter: url('#a11y-dlt-protan'); }
html.a11y-daltonize-deutan { filter: url('#a11y-dlt-deutan'); }
html.a11y-daltonize-tritan { filter: url('#a11y-dlt-tritan'); }

/* --- Keyboard navigation: stronger, always-on focus ring ----- */
html.a11y-kbd-nav :is(a, button, input, select, textarea, summary, [tabindex], [role="button"], [role="link"], [role="menuitem"], [role="tab"]):focus {
  outline: 4px solid var(--focus-ring, #163BFF) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 3px rgba(22, 59, 255, 0.30) !important;
}

/* --- Read aloud: highlight the block being spoken ------------ */
.a11y-reading {
  background-color: rgba(255, 214, 0, 0.40) !important;
  box-shadow: 0 0 0 5px rgba(255, 214, 0, 0.40) !important;
  border-radius: 3px !important;
}
[data-theme="dark"] .a11y-reading {
  background-color: rgba(118, 160, 255, 0.42) !important;
  box-shadow: 0 0 0 5px rgba(118, 160, 255, 0.42) !important;
}

/* --- Bionic reading ----------------------------------------- */
span.a11y-bionic > b { font-weight: 700; }

/* --- Custom colors + brightness (user overrides) ------------- */
html.a11y-custom-colors body { background-color: var(--a11y-bg, transparent) !important; }
html.a11y-custom-colors :is(p, li, span, h1, h2, h3, h4, h5, h6, td, th, dd, dt, blockquote, label, figcaption) {
  color: var(--a11y-txt, inherit) !important;
}
html.a11y-custom-colors :is(a, a *) { color: var(--a11y-link, inherit) !important; }
html.a11y-brightness { filter: brightness(var(--a11y-bright, 1)); }
html.a11y-daltonize-protan.a11y-brightness { filter: url('#a11y-dlt-protan') brightness(var(--a11y-bright, 1)); }
html.a11y-daltonize-deutan.a11y-brightness { filter: url('#a11y-dlt-deutan') brightness(var(--a11y-bright, 1)); }
html.a11y-daltonize-tritan.a11y-brightness { filter: url('#a11y-dlt-tritan') brightness(var(--a11y-bright, 1)); }