/*!
 * RankPlus Accessibility Widget
 * Loaded only when rankplus_accessibility_enabled = '1'.
 */

/* === Skip-to-content link (WCAG 2.4.1) === */
/* Visually hidden without negative offsets — `margin: -1px` shifts the box past
   the document edge and causes a horizontal scrollbar on RTL pages (left side)
   and LTR pages (right side). `inset: auto` + `clip-path: inset(50%)` keep the
   box at the body's origin while clipping it to nothing visually. */
.rankplus-skip-link{position:absolute!important;top:0!important;left:0!important;width:1px!important;height:1px!important;margin:0!important;padding:0!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;clip-path:inset(50%)!important;border:0!important;white-space:nowrap!important;}
.rankplus-skip-link:focus{position:fixed!important;top:8px!important;inset-inline-start:8px!important;width:auto!important;height:auto!important;margin:0!important;padding:8px 12px!important;overflow:visible!important;clip:auto!important;clip-path:none!important;white-space:normal!important;background:#000!important;color:#fff!important;text-decoration:none!important;border-radius:4px!important;z-index:999999!important;}

/* === Panel UI (v8.2.3 — offcanvas drawer, solid colour, theme-resistant icons) === */
#accessibilityWidget { all: initial; }
#accessibilityWidget, #accessibilityWidget * {
    box-sizing: border-box !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    line-height: 1.5 !important;
    /* Host themes routinely set text-transform: uppercase + letter-spacing on
       buttons and headings. In RTL mode this clipped longer English labels
       (e.g. "SCREEN READER COMPATIBILITY") to their last few chars because
       LTR text in an RTL container is anchored to the right edge. Reset
       these so labels render mixed-case and wrap normally inside cells. */
    text-transform: none !important;
    letter-spacing: normal !important;
    word-spacing: normal !important;
}
#accessibilityWidget .acc-toggle span,
#accessibilityWidget .acc-radio span,
#accessibilityWidget .acc-section > summary,
#accessibilityWidget .acc-panel-header h2,
#accessibilityWidget .acc-footer-links a,
#accessibilityWidget .acc-footer-links button,
#accessibilityWidget #accResetAll,
#accessibilityWidget .acc-attribution {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
}
/* Logical alignment for labels — `start` follows the widget's `dir` attribute,
   so headings and links sit at the correct edge in both RTL and LTR. */
#accessibilityWidget .acc-panel-header h2,
#accessibilityWidget .acc-section > summary {
    text-align: start !important;
}

/* Hide host-theme skip-link / screen-reader-text whenever the widget is
   loaded. The widget renders its own .rankplus-skip-link with safe positioning,
   so the theme-supplied helpers (which often use `margin: -1px` and cause an
   RTL/LTR horizontal scrollbar) aren't needed. */
.skip-link:not(.rankplus-skip-link),
.screen-reader-text {
    display: none !important;
}

#accToggleBtn {
    position: fixed; bottom: 100px; z-index: 99999;
    width: 40px; height: 60px;
    background-color: var(--rp-acc-color);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='4' r='2'/><path d='M12 6v6'/><path d='M8 10l4 2 4-2'/><path d='M8 22l4-10 4 10'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px 24px;
    border: 0; cursor: pointer;
    box-shadow: 0 4px 20px rgba(0,0,0,.3);
    transition: transform .2s, box-shadow .2s;
}
/* Edge-pinned hover scales toward the inside of the page so the button never
   extends past the viewport edge (which would force a horizontal scrollbar). */
.acc-pos-left  #accToggleBtn:hover { transform: scale(1.08); transform-origin: left center; }
.acc-pos-right #accToggleBtn:hover { transform: scale(1.08); transform-origin: right center; }
/* Inner <svg> is decorative fallback only — icon paints via background-image
   above so host-theme SVG rules can't blank it. */
#accToggleBtn svg { display: none !important; }

/* Semicircle pinned flush to the page edge — flat side touches the viewport,
   rounded side faces the page content. Position class controls which side. */
.acc-pos-left #accToggleBtn {
    left: 0; right: auto;
    margin-left: 0; margin-right: 0;
    -webkit-border-top-right-radius: 50%;
    -webkit-border-bottom-right-radius: 50%;
    -moz-border-radius-topright: 50%;
    -moz-border-radius-bottomright: 50%;
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.acc-pos-right #accToggleBtn {
    right: 0; left: auto;
    margin-left: 0; margin-right: 0;
    -webkit-border-top-left-radius: 50%;
    -webkit-border-bottom-left-radius: 50%;
    -moz-border-radius-topleft: 50%;
    -moz-border-radius-bottomleft: 50%;
    border-top-left-radius: 50%;
    border-bottom-left-radius: 50%;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* When the offcanvas drawer is open, the round toggle button would otherwise
   sit on top of the panel's footer (Reset/Disable buttons) at bottom-left/right
   and trap the user's clicks. Hide it while the panel is open; clicking the
   panel's close button restores it. */
#accessibilityWidget:has(#accPanel[data-open="true"]) #accToggleBtn {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* --- Offcanvas drawer: full-height, slides in from the configured side. --- */
#accPanel {
    display: flex;
    position: fixed;
    top: 0; bottom: 0;
    width: 380px; max-width: 92vw;
    z-index: 99998;
    flex-direction: column;
    background: #fff;
    box-shadow: 0 10px 40px rgba(0,0,0,.25);
    overflow: hidden;
    transition: transform .3s ease;
    will-change: transform;
}
.acc-pos-left #accPanel  { left: 0;  right: auto; transform: translateX(-100%); }
.acc-pos-right #accPanel { right: 0; left: auto;  transform: translateX(100%); }
#accPanel[data-open="true"] { transform: translateX(0); }

/* Fallback for browsers without `inert` support (JS sets/removes `inert`):
   take the closed panel out of the tab order + a11y tree once the slide-out
   finishes, so keyboard users can't tab into the offscreen controls. The
   visibility flip is delayed until after the transform transition so the
   close animation still plays. */
#accPanel:not([data-open="true"]) {
    visibility: hidden;
    transition: transform .3s ease, visibility 0s .3s;
}
#accPanel[data-open="true"] {
    visibility: visible;
    transition: transform .3s ease, visibility 0s 0s;
}

/* Honour the WordPress admin bar so the panel header isn't hidden behind it.
   `html { margin-top: 32px }` only shifts in-flow content; position:fixed
   elements still sit against the viewport top. */
body.admin-bar #accPanel { top: 32px; }
@media screen and (max-width: 782px) {
    body.admin-bar #accPanel { top: 46px; }
}
/* Same for the re-enable pill if it ever sits at top — harmless when bottom-anchored. */
body.admin-bar #accToggleBtn { /* no change; button is bottom-anchored */ }

/* === Panel header === */
.acc-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 16px;
    background: var(--rp-acc-color);
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .05);
}
.acc-panel-header h2 {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.2;
    color: #fff;
    letter-spacing: 0.005em;
}
#accCloseBtn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 0;
    flex-shrink: 0;
    background-color: rgba(255, 255, 255, .15);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round'><path d='M6 6l12 12M6 18L18 6'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px 16px;
    cursor: pointer;
    transition: background-color .15s;
}
#accCloseBtn:hover  { background-color: rgba(255, 255, 255, .28); }
#accCloseBtn:active { background-color: rgba(255, 255, 255, .35); }
#accCloseBtn svg    { display: none !important; }

/* === Panel body === */
.acc-panel-body {
    padding: 14px 16px;
    overflow-y: auto;
    flex: 1;
    background: #fafaf7;
}

/* === Collapsible section === */
.acc-section {
    margin-bottom: 12px;
    border: 1px solid #e9e6dc;
    border-radius: 12px;
    background: #ffffff;
    overflow: hidden;
}
.acc-section:last-child { margin-bottom: 0; }

.acc-section > summary {
    list-style: none;
    cursor: pointer;
    padding: 12px 16px;
    font-weight: 600;
    font-size: 14px;
    color: #2a2a30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
    transition: background-color .15s;
}
.acc-section > summary:hover  { background: #f6f4ec; }
.acc-section > summary:focus-visible {
    outline: 3px solid var(--rp-acc-color);
    outline-offset: -3px;
}
.acc-section > summary::-webkit-details-marker { display: none; }

/* Section disclosure indicator — SVG chevron rendered via background-image
   so it doesn't depend on a font that has the `▾` glyph at the right size. */
.acc-section > summary::after {
    content: '';
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none' stroke='%23434349' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 5l4 4 4-4'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition: transform .2s ease;
}
.acc-section[open] > summary::after { transform: rotate(-180deg); }
.acc-section[open] > summary { border-bottom: 1px solid #efece2; }

.acc-section-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 14px 14px 16px;
    background: #fbfaf5;
}

/* === Toggle / radio tiles === */
.acc-toggle,
.acc-radio {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 14px 8px 10px;
    background: #ffffff;
    color: #434349;
    border: 1.5px solid #d7d2c2;
    border-radius: 10px;
    cursor: pointer;
    min-height: 86px;
    transition: border-color .15s, background .15s, transform .12s, box-shadow .15s;
}
.acc-toggle:hover,
.acc-radio:hover {
    border-color: #a78460;
    background: #fffaf3;
}
.acc-toggle:active,
.acc-radio:active {
    transform: translateY(1px);
}
.acc-toggle svg,
.acc-radio svg {
    width: 24px;
    height: 24px;
    margin-bottom: 8px;
    stroke: #434349;
    transition: stroke .15s;
}
.acc-toggle span,
.acc-radio span {
    font-size: 12.5px;
    font-weight: 500;
    color: #434349;
    text-align: center;
    line-height: 1.3;
}
.acc-toggle[aria-pressed="true"],
.acc-radio[aria-pressed="true"] {
    background: #fbeedf;
    border-color: var(--rp-acc-color);
    box-shadow: inset 0 0 0 1px var(--rp-acc-color);
}
.acc-toggle[aria-pressed="true"] svg,
.acc-radio[aria-pressed="true"] svg {
    stroke: var(--rp-acc-color);
}
.acc-toggle[aria-pressed="true"] span,
.acc-radio[aria-pressed="true"] span {
    color: var(--rp-acc-color);
    font-weight: 600;
}

/* === Scale rows (font/line/word/letter/zoom) ===
   Span the section-body grid's full width — otherwise the 2-column grid
   squeezes them into a half-cell and the RTL Hebrew label wraps
   character-by-character. The top border separates a scale row from any
   tile-grid rows above it. */
.acc-scale-row {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 4px;
    border-top: 1px solid #efece2;
}
.acc-scale-row:first-child {
    border-top: 0;
    padding-top: 4px;
}
.acc-scale-label {
    font-size: 13.5px;
    font-weight: 500;
    color: #2a2a30;
    white-space: nowrap;
}
.acc-scale-controls {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.acc-btn {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    border: 1px solid #d7d2c2;
    background: #ffffff;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: #434349;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, border-color .15s;
}
.acc-btn[data-value="reset"] {
    width: 54px;
    font-size: 11.5px;
    font-weight: 600;
}
.acc-btn:hover {
    background: #fbeedf;
    border-color: var(--rp-acc-color);
    color: var(--rp-acc-color);
}

/* === Panel footer === */
.acc-panel-footer {
    border-top: 1px solid #e9e6dc;
    padding: 12px 16px 14px;
    background: #ffffff;
    flex-shrink: 0;
}
#accResetAll {
    display: block;
    width: 100%;
    padding: 11px;
    background: var(--rp-acc-color);
    border: 1px solid var(--rp-acc-color);
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: filter .15s, transform .12s;
    font-family: inherit;
}
#accResetAll:hover  { filter: brightness(1.08); }
#accResetAll:active { transform: translateY(1px); }

.acc-footer-links {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px 0 6px;
    font-size: 12.5px;
    gap: 12px;
}
.acc-footer-links a,
.acc-footer-links button {
    background: none;
    border: 0;
    color: var(--rp-acc-color);
    cursor: pointer;
    text-decoration: underline;
    padding: 2px 0;
    font-family: inherit;
    font-size: inherit;
    font-weight: 500;
}
.acc-footer-links a:hover,
.acc-footer-links button:hover { text-decoration: none; }

.acc-attribution {
    display: block;
    text-align: center;
    font-size: 11px;
    color: #6b6760; /* 5.62:1 on #fff — passes WCAG AA (was #98948a ≈ 2.6:1) */
    text-decoration: none;
    padding: 6px 0 0;
    margin-top: 4px;
    border-top: 1px solid #efece2;
}
.acc-attribution strong { color: var(--rp-acc-color); font-weight: 700; }

#accToggleBtn:focus-visible,
.acc-toggle:focus-visible,
.acc-radio:focus-visible,
.acc-btn:focus-visible,
#accResetAll:focus-visible,
.acc-footer-links a:focus-visible,
.acc-footer-links button:focus-visible {
    outline: 3px solid var(--rp-acc-color);
    outline-offset: 2px;
}

@media (max-width: 600px) {
    #accPanel { width: 92vw; max-width: 380px; }
}

/* Base accessibility styles - injected dynamically */
/* === Contrast modes (mutually exclusive) ===
   Per CSS spec, `filter` and `transform` on an ancestor create a NEW
   containing block for position:fixed descendants. If we apply `filter`
   directly to <body>, the widget's own fixed elements (toggle button,
   offcanvas panel, magnifier, mic indicator, reading-focus mask,
   text-reader bar) get re-anchored to body coordinates and travel with
   page scroll — the offcanvas appears "broken" the moment any contrast,
   colorblind, or zoom-fallback mode is activated.

   Fix: apply the effect to body's *direct children* EXCEPT the widget
   (`#accessibilityWidget`) and its helper elements (`[id^="acc-"]`).
   The visual result is identical — we're filtering the same page content,
   just at a level that doesn't establish a CB for the widget. */
body.acc-contrast-high > *:not(#accessibilityWidget):not([id^="acc-"]) { filter: contrast(1.4) !important; }
body.acc-contrast-high > *:not(#accessibilityWidget):not([id^="acc-"]),
body.acc-contrast-high > *:not(#accessibilityWidget):not([id^="acc-"]) * { border-color: #000 !important; }

/* True dark-contrast theme (no filter:invert) — body gets the page-level
   background so the page edges stay dark; children/descendants (excluding
   the widget) get the cascade for text/border colour. */
body.acc-contrast-dark { background: #000 !important; }
body.acc-contrast-dark > *:not(#accessibilityWidget):not([id^="acc-"]),
body.acc-contrast-dark > *:not(#accessibilityWidget):not([id^="acc-"]) * {
    background: #000 !important;
    color: #fff !important;
    border-color: #fff !important;
    background-image: none !important;
}
body.acc-contrast-dark > *:not(#accessibilityWidget):not([id^="acc-"]) a,
body.acc-contrast-dark > *:not(#accessibilityWidget):not([id^="acc-"]) a * { color: #ff0 !important; }
body.acc-contrast-dark > *:not(#accessibilityWidget):not([id^="acc-"]) button { background: #222 !important; }

body.acc-contrast-light { background: #fff !important; }
body.acc-contrast-light > *:not(#accessibilityWidget):not([id^="acc-"]),
body.acc-contrast-light > *:not(#accessibilityWidget):not([id^="acc-"]) * {
    background: #fff !important;
    color: #000 !important;
    border-color: #000 !important;
    background-image: none !important;
}
body.acc-contrast-light > *:not(#accessibilityWidget):not([id^="acc-"]) a,
body.acc-contrast-light > *:not(#accessibilityWidget):not([id^="acc-"]) a * { color: #0000ff !important; }

body.acc-contrast-monochrome > *:not(#accessibilityWidget):not([id^="acc-"]) { filter: grayscale(1) !important; }
body.acc-contrast-low-sat    > *:not(#accessibilityWidget):not([id^="acc-"]) { filter: saturate(.5) !important; }
body.acc-contrast-high-sat   > *:not(#accessibilityWidget):not([id^="acc-"]) { filter: saturate(1.5) !important; }

body.acc-cb-protanopia    > *:not(#accessibilityWidget):not([id^="acc-"]) { filter: url(#acc-cb-protanopia) !important; }
body.acc-cb-deuteranopia  > *:not(#accessibilityWidget):not([id^="acc-"]) { filter: url(#acc-cb-deuteranopia) !important; }
body.acc-cb-tritanopia    > *:not(#accessibilityWidget):not([id^="acc-"]) { filter: url(#acc-cb-tritanopia) !important; }
body.acc-cb-achromatopsia > *:not(#accessibilityWidget):not([id^="acc-"]) { filter: url(#acc-cb-achromatopsia) !important; }

body.acc-highlight-links a {
    outline: 3px solid #ff0 !important;
    outline-offset: 2px !important;
    background-color: rgba(255, 255, 0, 0.2) !important;
    text-decoration: underline !important;
}

body.acc-readable-font,
body.acc-readable-font * {
    font-family: Arial, Helvetica, sans-serif !important;
}

body.acc-stop-animations,
body.acc-stop-animations *,
body.acc-stop-animations *::before,
body.acc-stop-animations *::after {
    animation: none !important;
    transition: none !important;
}

body.acc-line-spacing-1 *,
body.acc-line-spacing-1 { line-height: 1.5 !important; }
body.acc-line-spacing-2 *,
body.acc-line-spacing-2 { line-height: 2 !important; }
body.acc-line-spacing-3 *,
body.acc-line-spacing-3 { line-height: 2.5 !important; }

body.acc-word-spacing-1 *,
body.acc-word-spacing-1 { word-spacing: 0.1em !important; }
body.acc-word-spacing-2 *,
body.acc-word-spacing-2 { word-spacing: 0.2em !important; }
body.acc-word-spacing-3 *,
body.acc-word-spacing-3 { word-spacing: 0.3em !important; }

body.acc-letter-spacing-1 *,
body.acc-letter-spacing-1 { letter-spacing: 0.05em !important; }
body.acc-letter-spacing-2 *,
body.acc-letter-spacing-2 { letter-spacing: 0.1em !important; }
body.acc-letter-spacing-3 *,
body.acc-letter-spacing-3 { letter-spacing: 0.15em !important; }

body.acc-cursor-black,
body.acc-cursor-black * { cursor: url('../images/accessibility/cursor-black.svg') 4 4, auto !important; }
body.acc-cursor-white,
body.acc-cursor-white * { cursor: url('../images/accessibility/cursor-white.svg') 4 4, auto !important; }

/* Font size scaling */
html.acc-font-size-1 {
    font-size: 112.5% !important;
}

html.acc-font-size-2 {
    font-size: 125% !important;
}

html.acc-font-size-3 {
    font-size: 150% !important;
}

html.acc-font-size-4 {
    font-size: 175% !important;
}

html.acc-font-size-5 {
    font-size: 200% !important;
}

/* Page zoom (display magnification) */
@supports (zoom: 1.1) {
    body.acc-page-zoom-1 { zoom: 1.1; }
    body.acc-page-zoom-2 { zoom: 1.2; }
    body.acc-page-zoom-3 { zoom: 1.3; }
    body.acc-page-zoom-4 { zoom: 1.4; }
    body.acc-page-zoom-5 { zoom: 1.5; }
}
@supports not (zoom: 1.1) {
    body.acc-page-zoom-1 { transform: scale(1.1); transform-origin: top left; width: 90.91%; }
    body.acc-page-zoom-2 { transform: scale(1.2); transform-origin: top left; width: 83.33%; }
    body.acc-page-zoom-3 { transform: scale(1.3); transform-origin: top left; width: 76.92%; }
    body.acc-page-zoom-4 { transform: scale(1.4); transform-origin: top left; width: 71.43%; }
    body.acc-page-zoom-5 { transform: scale(1.5); transform-origin: top left; width: 66.67%; }
}
/* Keep the widget itself unscaled */
#accessibilityWidget { transform: none !important; zoom: 1 !important; }

body.acc-highlight-headings h1,
body.acc-highlight-headings h2,
body.acc-highlight-headings h3,
body.acc-highlight-headings h4,
body.acc-highlight-headings h5,
body.acc-highlight-headings h6 {
    outline: 2px dashed var(--rp-acc-color, #d46400) !important;
    outline-offset: 4px !important;
    padding: 4px !important;
    position: relative !important;
}
body.acc-highlight-headings h1::before { content: 'H1 '; font-size: 11px; color: var(--rp-acc-color, #d46400); font-weight: 700; }
body.acc-highlight-headings h2::before { content: 'H2 '; font-size: 11px; color: var(--rp-acc-color, #d46400); font-weight: 700; }
body.acc-highlight-headings h3::before { content: 'H3 '; font-size: 11px; color: var(--rp-acc-color, #d46400); font-weight: 700; }
body.acc-highlight-headings h4::before { content: 'H4 '; font-size: 11px; color: var(--rp-acc-color, #d46400); font-weight: 700; }
body.acc-highlight-headings h5::before { content: 'H5 '; font-size: 11px; color: var(--rp-acc-color, #d46400); font-weight: 700; }
body.acc-highlight-headings h6::before { content: 'H6 '; font-size: 11px; color: var(--rp-acc-color, #d46400); font-weight: 700; }

.acc-img-desc {
    display: block;
    padding: 6px 10px;
    background: var(--rp-acc-color, #d46400);
    color: #fff;
    font-size: 13px;
    line-height: 1.4;
    border-radius: 0 0 6px 6px;
    max-width: 100%;
}
.acc-img-desc.acc-img-missing {
    background: #d33;
}

.acc-bionic-bold { font-weight: 700 !important; }

#acc-magnifier {
    position: fixed;
    width: 200px; height: 200px;
    border-radius: 50%;
    border: 3px solid var(--rp-acc-color, #d46400);
    pointer-events: none;
    overflow: hidden;
    z-index: 99997;
    background: #fff;
    box-shadow: 0 4px 20px rgba(0,0,0,.3);
    display: none;
}
#acc-magnifier.acc-active { display: block; }
#acc-magnifier > div {
    position: absolute;
    transform-origin: 0 0;
    transform: scale(2);
}

#acc-reading-focus {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 99996;
    background: rgba(0,0,0,.55);
    mask: linear-gradient(to bottom,
        rgba(0,0,0,1) 0,
        rgba(0,0,0,1) var(--rp-rf-top, 40%),
        rgba(0,0,0,0) var(--rp-rf-top, 40%),
        rgba(0,0,0,0) calc(var(--rp-rf-top, 40%) + 80px),
        rgba(0,0,0,1) calc(var(--rp-rf-top, 40%) + 80px),
        rgba(0,0,0,1) 100%);
    -webkit-mask: linear-gradient(to bottom,
        rgba(0,0,0,1) 0,
        rgba(0,0,0,1) var(--rp-rf-top, 40%),
        rgba(0,0,0,0) var(--rp-rf-top, 40%),
        rgba(0,0,0,0) calc(var(--rp-rf-top, 40%) + 80px),
        rgba(0,0,0,1) calc(var(--rp-rf-top, 40%) + 80px),
        rgba(0,0,0,1) 100%);
    display: none;
}
#acc-reading-focus.acc-active { display: block; }

/* === Virtual keyboard (Task 17) === */
#acc-vkeyboard {
    position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
    background: #2a2a2a; color: #fff; border-radius: 12px;
    padding: 8px; z-index: 99997;
    box-shadow: 0 8px 30px rgba(0,0,0,.4);
    user-select: none;
    display: none;
}
#acc-vkeyboard.acc-active { display: block; }
.acc-vk-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 4px 8px; font-size: 12px; cursor: move;
}
.acc-vk-row { display: flex; gap: 4px; justify-content: center; margin: 4px 0; }
.acc-vk-key {
    min-width: 32px; height: 36px; padding: 0 8px;
    background: #444; border: 0; color: #fff; border-radius: 6px; cursor: pointer;
    font-size: 14px;
}
.acc-vk-key:hover { background: #555; }
.acc-vk-key.acc-vk-wide { min-width: 64px; }
.acc-vk-key.acc-vk-extra-wide { min-width: 120px; }

/* Keyboard navigation — high-contrast focus outlines + always-visible skip link */
body.acc-kbd-nav :focus-visible {
    outline: 3px solid var(--rp-acc-color, #d46400) !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 4px rgba(150, 82, 21, 0.2) !important;
}
body.acc-kbd-nav .skip-link,
body.acc-kbd-nav .rankplus-skip-link {
    position: fixed !important;
    top: 8px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: auto !important;
    height: auto !important;
    clip: auto !important;
    clip-path: none !important;
    padding: 8px 12px !important;
    background: #000 !important;
    color: #fff !important;
    z-index: 99999 !important;
}

/* Screen-reader compatibility mode — surface hidden decorations */
body.acc-sr [aria-hidden="true"] {
    opacity: 0.5 !important;
    outline: 1px dashed #f00 !important;
}

/* Smart-navigation landmark chips */
.acc-landmark-chip {
    position: absolute;
    z-index: 99996;
    background: var(--rp-acc-color, #d46400);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 6px;
    pointer-events: none;
    box-shadow: 0 2px 6px rgba(0,0,0,.3);
}

/* Live-region announcer for screen readers (visually hidden) */
#acc-announcer {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Text reader (Web Speech API) floating controls bar */
#acc-text-reader-bar {
    position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
    background: #2a2a2a; color: #fff; padding: 8px 12px;
    border-radius: 24px; display: none; align-items: center; gap: 10px;
    z-index: 99996; box-shadow: 0 4px 20px rgba(0,0,0,.4);
}
#acc-text-reader-bar.acc-active { display: inline-flex; }
#acc-text-reader-bar button { background: #444; color: #fff; border: 0; padding: 6px 12px; border-radius: 16px; cursor: pointer; }
.acc-reader-cursor { cursor: help !important; }

/* Voice commands (Web Speech Recognition) mic indicator */
#acc-mic-indicator {
    position: fixed; bottom: 80px;
    width: 56px; height: 56px; border-radius: 50%;
    background: #d00; color: #fff; z-index: 99996;
    display: none; align-items: center; justify-content: center;
    box-shadow: 0 4px 20px rgba(0,0,0,.3);
    animation: acc-mic-pulse 1.4s infinite ease-in-out;
}
#acc-mic-indicator.acc-active { display: flex; }
.acc-pos-left #acc-mic-indicator { left: 90px; }
.acc-pos-right #acc-mic-indicator { right: 90px; }
@keyframes acc-mic-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* === Visitor "disable accessibility" re-enable pill (Task 22) === */
#acc-reenable {
    position: fixed; bottom: 8px; z-index: 99999;
    padding: 6px 10px; border-radius: 16px;
    background: rgba(0,0,0,.6); color: #fff;
    font-size: 12px; text-decoration: none;
    display: none;
}
#acc-reenable.acc-active { display: inline-block; }

/* Respect the visitor's OS "reduce motion" setting — exactly the population an
   accessibility widget should serve (WCAG 2.3.3 / vestibular sensitivity). The
   panel still shows/hides via transform; it just snaps instead of sliding. */
@media (prefers-reduced-motion: reduce) {
    #accToggleBtn,
    #accPanel,
    #accCloseBtn,
    .acc-section > summary,
    .acc-section > summary::after,
    .acc-toggle,
    .acc-radio,
    .acc-btn,
    #accResetAll {
        transition: none !important;
    }
    #accToggleBtn:hover,
    .acc-toggle:active,
    .acc-radio:active,
    #accResetAll:active {
        transform: none !important;
    }
    #acc-mic-indicator {
        animation: none !important;
    }
}