:root{
--ea-font-scale: 1;
--ea-line-height: 1.55;
--ea-letter-spacing: 0em;
--ea-word-spacing: 0em;
}

.ea-sr-only {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0,0,0,0) !important;
white-space: nowrap !important;
border: 0 !important;
}

.ea-skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 2147483647;
background: #fff;
color: #000;
padding: 10px 12px;
border: 2px solid #000;
border-radius: 10px;
}
.ea-skip-link:focus { left: 12px; top: 12px; }

#ea-a11y {
position: fixed;
left: 16px;
bottom: 16px;
z-index: 2147483000;
font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

#ea-a11y-toggle {
width: 48px;
height: 48px;
border-radius: 999px;
border: 1px solid rgba(0,0,0,0.28);
background: rgba(255,255,255,0.95);
color: #111;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 10px 24px rgba(0,0,0,0.16);
-webkit-tap-highlight-color: transparent;
}
#ea-a11y-toggle:hover { background: #fff; }
#ea-a11y-toggle:focus { outline: 3px solid #111; outline-offset: 3px; }
#ea-a11y-toggle svg { width: 22px; height: 22px; display: block; }

#ea-a11y-panel {
margin-top: 10px;
width: 300px;
border-radius: 14px;
border: 1px solid rgba(0,0,0,0.25);
background: rgba(255,255,255,0.98);
color: #111;
box-shadow: 0 14px 34px rgba(0,0,0,0.22);
padding: 12px;
}
#ea-a11y-panel[hidden] { display: none; }

.ea-a11y-title { font-weight: 700; font-size: 14px; margin: 2px 2px 10px 2px; }

.ea-a11y-row {
display: flex;
gap: 8px;
margin: 10px 0;
flex-wrap: wrap;
align-items: center;
}

.ea-a11y-row button {
flex: 1 1 auto;
padding: 10px;
border-radius: 10px;
border: 1px solid rgba(0,0,0,0.22);
background: #f7f7f7;
color: #111;
cursor: pointer;
}
.ea-a11y-row button:focus { outline: 3px solid #111; outline-offset: 2px; }
.ea-a11y-row button[aria-pressed="true"] { background: #111; color: #fff; }

/* Text size stepper — keep on one line at large text */
.ea-a11y-stepper { flex-wrap: nowrap; }
.ea-a11y-stepper button { flex: 0 0 auto; width: 52px; padding: 10px 0; }
.ea-a11y-stepper .ea-a11y-value {
flex: 1 1 auto;
min-width: 0;
text-align: center;
font-weight: 700;
padding: 10px 8px;
border-radius: 10px;
border: 1px solid rgba(0,0,0,0.12);
background: #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

/* ---------------- Preference effects ---------------- */

/*
SPACING:
Apply line-height/letter/word spacing broadly WITHOUT changing font-size.
This avoids “title” size changes when the user only wants spacing.
*/
html.ea-a11y-spacing body {
line-height: var(--ea-line-height) !important;
}

html.ea-a11y-spacing body :where(
p, li, ul, ol, dl, dt, dd,
blockquote, figcaption, caption,
div, span, section, article, main, aside,
header, footer, nav,
h1, h2, h3, h4, h5, h6
){
line-height: var(--ea-line-height) !important;
letter-spacing: var(--ea-letter-spacing) !important;
word-spacing: var(--ea-word-spacing) !important;
}

/* Spacing toggle values (noticeable) */
html.ea-a11y-spacing {
--ea-line-height: 1.95;
--ea-letter-spacing: 0.035em;
--ea-word-spacing: 0.14em;
}

/*
TEXT SCALING:
Only apply font-size overrides when fontScale != 1.00.
This prevents spacing-only mode from altering typography.
*/
html.ea-a11y-scale body :where(
p, li, a, label, input, textarea, select, button,
td, th, small, span, div, blockquote, figcaption, dt, dd
){
font-size: calc(16px * var(--ea-font-scale)) !important;
}

html.ea-a11y-scale h1 { font-size: calc(34px * var(--ea-font-scale)) !important; }
html.ea-a11y-scale h2 { font-size: calc(30px * var(--ea-font-scale)) !important; }
html.ea-a11y-scale h3 { font-size: calc(26px * var(--ea-font-scale)) !important; }
html.ea-a11y-scale h4 { font-size: calc(22px * var(--ea-font-scale)) !important; }
html.ea-a11y-scale h5 { font-size: calc(19px * var(--ea-font-scale)) !important; }
html.ea-a11y-scale h6 { font-size: calc(16px * var(--ea-font-scale)) !important; }

/* Underline links */
html.ea-a11y-underline a {
text-decoration: underline !important;
text-underline-offset: 2px !important;
}

/* High contrast (force full-page background + neutralize “islands”) */
html.ea-a11y-contrast,
html.ea-a11y-contrast body {
min-height: 100vh !important;
height: 100% !important;
background-color: #000 !important;
color: #fff !important;
}

html.ea-a11y-contrast body * {
background-color: transparent !important;
color: inherit !important;
}

html.ea-a11y-contrast a { color: #9ad7ff !important; }

/* Form controls outside the widget */
html.ea-a11y-contrast input,
html.ea-a11y-contrast textarea,
html.ea-a11y-contrast select,
html.ea-a11y-contrast button {
background-color: #000 !important;
color: #fff !important;
border: 2px solid currentColor !important;
}

/* Restore widget styling and active states in high contrast mode */
html.ea-a11y-contrast #ea-a11y-toggle,
html.ea-a11y-contrast #ea-a11y-panel,
html.ea-a11y-contrast .ea-skip-link {
background: #fff !important;
color: #111 !important;
border-color: rgba(0,0,0,0.25) !important;
}

html.ea-a11y-contrast #ea-a11y button {
background: #f7f7f7 !important;
color: #111 !important;
border: 1px solid rgba(0,0,0,0.22) !important;
}

html.ea-a11y-contrast #ea-a11y button[aria-pressed="true"] {
background: #111 !important;
color: #fff !important;
}

html.ea-a11y-contrast #ea-a11y .ea-a11y-value {
background: #fff !important;
color: #111 !important;
border: 1px solid rgba(0,0,0,0.12) !important;
}

/* Reduce motion */
html.ea-a11y-reduce-motion * {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}