/*!
 * Rank+ - Website Accessibility — front-end toolbar styles.
 * Enqueued only when the toolbar is enabled in Settings → Accessibility.
 */

/* === 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. */
.rpwa-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;}
.rpwa-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) === */
#rpwa-widget { all: initial !important; }
#rpwa-widget, #rpwa-widget * {
    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;
}
/* Defensive baseline — properties the widget doesn't set on every element but
   host themes routinely do (global resets, icon fonts, dark skins, page
   builders). :where() keeps specificity at a bare (1,0,0) so every component
   rule below — all ID-anchored and !important — still overrides it, while
   !important lifts this baseline above ANY host rule that doesn't target the
   widget's own ID. Deliberately excluded: display/position/width/height/
   inset/visibility/transform (component- or JS-controlled) and outline
   (focus rings). */
#rpwa-widget :where(*),
#rpwa-widget :where(*)::before,
#rpwa-widget :where(*)::after {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    text-decoration: none !important;
    text-indent: 0 !important;
    float: none !important;
    filter: none !important;
    opacity: 1 !important;
    animation: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    font-style: normal !important;
    color: inherit !important;
    content: none !important;
}
#rpwa-widget .rpwa-toggle span,
#rpwa-widget .rpwa-radio span,
#rpwa-widget .rpwa-section > summary,
#rpwa-widget .rpwa-panel-header h2,
#rpwa-widget .rpwa-footer-links a,
#rpwa-widget .rpwa-footer-links button,
#rpwa-widget #rpwaResetAll,
#rpwa-widget .rpwa-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. */
#rpwa-widget .rpwa-panel-header h2,
#rpwa-widget .rpwa-section > summary {
    text-align: start !important;
}

#rpwa-widget #rpwaToggleBtn {
    position: fixed !important; bottom: 100px !important; z-index: 99999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important; height: 60px !important;
    background-color: var(--rpwa-color) !important;
    background-image: none !important;
    border: 0 !important; cursor: pointer !important;
    box-shadow: 0 4px 20px rgba(0,0,0,.3) !important;
    transition: transform .2s, box-shadow .2s !important;
}
/* The launcher glyph paints as a CSS *mask* on a ::before box, not as a
   background-image data URI. Custom properties do NOT interpolate inside a
   url("data:…") value, so a hardcoded stroke='%23ffffff' would keep the icon
   white on a light brand pick and drop the only thing identifying the control
   below 3:1 (WCAG 1.4.11). A mask uses just the glyph's alpha channel, so the
   paint comes from background-color — i.e. from --rpwa-on-color, with no PHP
   dependency. The stroke colour inside the SVG is irrelevant to an alpha mask. */
#rpwa-widget #rpwaToggleBtn::before {
    content: '' !important;
    display: block !important;
    width: 24px !important;
    height: 24px !important;
    flex-shrink: 0 !important;
    background-color: var(--rpwa-on-color, #fff) !important;
    -webkit-mask-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='%23000000' 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>") !important;
    mask-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='%23000000' 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>") !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
    -webkit-mask-size: 24px 24px !important;
    mask-size: 24px 24px !important;
}
/* 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). */
#rpwa-widget.rpwa-pos-left  #rpwaToggleBtn:hover { transform: scale(1.08) !important; transform-origin: left center !important; }
#rpwa-widget.rpwa-pos-right #rpwaToggleBtn:hover { transform: scale(1.08) !important; transform-origin: right center !important; }
/* Inner <svg> is decorative fallback only — icon paints via the ::before mask
   above so host-theme SVG rules can't blank it. */
#rpwa-widget #rpwaToggleBtn 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. */
#rpwa-widget.rpwa-pos-left #rpwaToggleBtn {
    left: 0 !important; right: auto !important;
    margin-left: 0 !important; margin-right: 0 !important;
    -webkit-border-top-right-radius: 50% !important;
    -webkit-border-bottom-right-radius: 50% !important;
    -moz-border-radius-topright: 50% !important;
    -moz-border-radius-bottomright: 50% !important;
    border-top-right-radius: 50% !important;
    border-bottom-right-radius: 50% !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}
#rpwa-widget.rpwa-pos-right #rpwaToggleBtn {
    right: 0 !important; left: auto !important;
    margin-left: 0 !important; margin-right: 0 !important;
    -webkit-border-top-left-radius: 50% !important;
    -webkit-border-bottom-left-radius: 50% !important;
    -moz-border-radius-topleft: 50% !important;
    -moz-border-radius-bottomleft: 50% !important;
    border-top-left-radius: 50% !important;
    border-bottom-left-radius: 50% !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* 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. */
#rpwa-widget:has(#rpwaPanel[data-open="true"]) #rpwaToggleBtn {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

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

/* 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. */
#rpwa-widget #rpwaPanel:not([data-open="true"]) {
    visibility: hidden !important;
    transition: transform .3s ease, visibility 0s .3s !important;
}
#rpwa-widget #rpwaPanel[data-open="true"] {
    visibility: visible !important;
    transition: transform .3s ease, visibility 0s 0s !important;
}

/* 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 #rpwa-widget #rpwaPanel { top: 32px !important; }
@media screen and (max-width: 782px) {
    body.admin-bar #rpwa-widget #rpwaPanel { top: 46px !important; }
}
/* Same for the re-enable pill if it ever sits at top — harmless when bottom-anchored. */
body.admin-bar #rpwa-widget #rpwaToggleBtn { /* no change; button is bottom-anchored */ }

/* === Panel header === */
#rpwa-widget .rpwa-panel-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 16px 16px !important;
    background: var(--rpwa-color) !important;
    color: var(--rpwa-on-color, #fff) !important;
    flex-shrink: 0 !important;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .05) !important;
}
#rpwa-widget .rpwa-panel-header h2 {
    margin: 0 !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    color: var(--rpwa-on-color, #fff) !important;
    letter-spacing: 0.005em !important;
}
#rpwa-widget #rpwaCloseBtn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    border: 0 !important;
    flex-shrink: 0 !important;
    background-color: rgba(255, 255, 255, .15) !important;
    background-image: none !important;
    cursor: pointer !important;
    transition: background-color .15s !important;
}
/* Same mask technique as the launcher glyph above — the × takes its paint from
   --rpwa-on-color instead of a hardcoded stroke='%23ffffff' that would fail
   1.4.11 on a light brand pick. */
#rpwa-widget #rpwaCloseBtn::before {
    content: '' !important;
    display: block !important;
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
    background-color: var(--rpwa-on-color, #fff) !important;
    -webkit-mask-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='%23000000' stroke-width='2.2' stroke-linecap='round'><path d='M6 6l12 12M6 18L18 6'/></svg>") !important;
    mask-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='%23000000' stroke-width='2.2' stroke-linecap='round'><path d='M6 6l12 12M6 18L18 6'/></svg>") !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
    -webkit-mask-size: 16px 16px !important;
    mask-size: 16px 16px !important;
}
#rpwa-widget #rpwaCloseBtn:hover { background-color: rgba(255, 255, 255, .28) !important; }
#rpwa-widget #rpwaCloseBtn:active { background-color: rgba(255, 255, 255, .35) !important; }
#rpwa-widget #rpwaCloseBtn svg { display: none !important; }

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

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

#rpwa-widget .rpwa-section > summary {
    list-style: none !important;
    cursor: pointer !important;
    padding: 12px 16px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    color: #2a2a30 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    user-select: none !important;
    transition: background-color .15s !important;
}
#rpwa-widget .rpwa-section > summary:hover { background: #f6f4ec !important; }
#rpwa-widget .rpwa-section > summary:focus-visible {
    /* --rpwa-focus-color falls back to the brand colour only when it clears
       3:1 on the panel surface; a yellow or sky-blue pick would otherwise give
       1.45:1 / 2.89:1 and leave the focus ring invisible (WCAG 1.4.11). */
    outline: 3px solid var(--rpwa-focus-color, #1f1f24) !important;
    outline-offset: -3px !important;
}
#rpwa-widget .rpwa-section > summary::-webkit-details-marker { display: none !important; }

/* 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. */
#rpwa-widget .rpwa-section > summary::after {
    content: '' !important;
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0 !important;
    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>") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    transition: transform .2s ease !important;
}
#rpwa-widget .rpwa-section[open] > summary::after { transform: rotate(-180deg) !important; }
#rpwa-widget .rpwa-section[open] > summary { border-bottom: 1px solid #efece2 !important; }

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

/* === Toggle / radio tiles === */
#rpwa-widget .rpwa-toggle,
#rpwa-widget .rpwa-radio {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 14px 8px 10px !important;
    background: #ffffff !important;
    color: #434349 !important;
    /* #8a857a = 3.52:1 on the #fbfaf5 section body (3.67:1 on the tile's own
       white fill); the old #d7d2c2 was 1.45:1 and the tile border is the
       control's only boundary (WCAG 1.4.11). */
    border: 1.5px solid #8a857a !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    min-height: 86px !important;
    transition: border-color .15s, background .15s, transform .12s, box-shadow .15s !important;
}
#rpwa-widget .rpwa-toggle:hover,
#rpwa-widget .rpwa-radio:hover {
    border-color: #a78460 !important;
    background: #fffaf3 !important;
}
#rpwa-widget .rpwa-toggle:active,
#rpwa-widget .rpwa-radio:active {
    transform: translateY(1px) !important;
}
#rpwa-widget .rpwa-toggle svg,
#rpwa-widget .rpwa-radio svg {
    width: 24px !important;
    height: 24px !important;
    margin-bottom: 8px !important;
    stroke: #434349 !important;
    transition: stroke .15s !important;
}
#rpwa-widget .rpwa-toggle span,
#rpwa-widget .rpwa-radio span {
    font-size: 12.5px !important;
    font-weight: 500 !important;
    color: #434349 !important;
    text-align: center !important;
    line-height: 1.3 !important;
}
#rpwa-widget .rpwa-toggle[aria-pressed="true"],
#rpwa-widget .rpwa-radio[aria-pressed="true"] {
    background: #fbeedf !important;
    /* The pressed state must stay perceivable for ANY brand pick: a light one
       drops the coloured border to 2.89:1 against the section body. The thicker
       border keeps the brand cue, and the near-black inset ring is a second,
       colour-independent state signal (14.38:1 on #fbeedf) so 1.4.11 holds. */
    border-color: var(--rpwa-color) !important;
    border-width: 2.5px !important;
    box-shadow: inset 0 0 0 1.5px #1f1f24 !important;
}
#rpwa-widget .rpwa-toggle[aria-pressed="true"] svg,
#rpwa-widget .rpwa-radio[aria-pressed="true"] svg {
    /* Near-black keeps the active tile's icon/label legible on the pale
       pressed background regardless of the chosen brand color (var(--rpwa-color)
       on #fbeedf was only ~3.27:1). Active state is still signaled by the
       colored border + near-black inset ring above. */
    stroke: #1f1f24 !important;
}
#rpwa-widget .rpwa-toggle[aria-pressed="true"] span,
#rpwa-widget .rpwa-radio[aria-pressed="true"] span {
    color: #1f1f24 !important;
    font-weight: 600 !important;
}

/* === 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. */
#rpwa-widget .rpwa-scale-row {
    grid-column: 1 / -1 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 4px !important;
    border-top: 1px solid #efece2 !important;
}
#rpwa-widget .rpwa-scale-row:first-child {
    border-top: 0 !important;
    padding-top: 4px !important;
}
#rpwa-widget .rpwa-scale-label {
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: #2a2a30 !important;
    /* Must wrap: the baseline above zeroes `min-width` and .rpwa-section sets
       `overflow: hidden`, so at the 1.4.10 reflow width of 320px a nowrap label
       is laid out in a box narrower than itself and is clipped outright — in
       RTL it disappears at the section edge. */
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}
#rpwa-widget .rpwa-scale-controls {
    display: flex !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
}
#rpwa-widget .rpwa-btn {
    width: 38px !important;
    height: 38px !important;
    border-radius: 8px !important;
    /* #8a857a = 3.52:1 on the #fbfaf5 section body (was #d7d2c2 ≈ 1.45:1) — the
       border is the only boundary of these +/-/reset controls (WCAG 1.4.11). */
    border: 1px solid #8a857a !important;
    background: #ffffff !important;
    cursor: pointer !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #434349 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background .15s, border-color .15s !important;
}
#rpwa-widget .rpwa-btn[data-value="reset"] {
    width: 54px !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
}
#rpwa-widget .rpwa-btn:hover {
    background: #fbeedf !important;
    border-color: var(--rpwa-color) !important;
    /* Same reasoning as the pressed tile: the brand colour as ink on the pale
       #fbeedf hover fill was only ~3.27:1. Hover is still signalled by the
       background change + the coloured border. */
    color: #1f1f24 !important;
}

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

#rpwa-widget .rpwa-footer-links {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin: 10px 0 6px !important;
    font-size: 12.5px !important;
    gap: 12px !important;
}
#rpwa-widget .rpwa-footer-links a,
#rpwa-widget .rpwa-footer-links button {
    background: none !important;
    border: 0 !important;
    /* --rpwa-brand-ink is the brand colour only when it clears 4.5:1 as text on
       white; otherwise near-black, so a light brand pick can't leave these
       links unreadable on the #ffffff footer (WCAG 1.4.3). */
    color: var(--rpwa-brand-ink, #1f1f24) !important;
    cursor: pointer !important;
    text-decoration: underline !important;
    padding: 2px 0 !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: 500 !important;
}
#rpwa-widget .rpwa-footer-links a:hover,
#rpwa-widget .rpwa-footer-links button:hover { text-decoration: none !important; }

#rpwa-widget .rpwa-attribution {
    display: block !important;
    text-align: center !important;
    font-size: 11px !important;
    color: #6b6760 !important; /* 5.62:1 on #fff — passes WCAG AA (was #98948a ≈ 2.6:1) */
    text-decoration: none !important;
    padding: 6px 0 0 !important;
    margin-top: 4px !important;
    border-top: 1px solid #efece2 !important;
}
/* Brand-as-ink on white — same --rpwa-brand-ink guard as the footer links. */
#rpwa-widget .rpwa-attribution strong { color: var(--rpwa-brand-ink, #1f1f24) !important; font-weight: 700 !important; }

#rpwa-widget #rpwaToggleBtn:focus-visible,
#rpwa-widget .rpwa-toggle:focus-visible,
#rpwa-widget .rpwa-radio:focus-visible,
#rpwa-widget .rpwa-btn:focus-visible,
#rpwa-widget #rpwaResetAll:focus-visible,
#rpwa-widget .rpwa-footer-links a:focus-visible,
#rpwa-widget .rpwa-footer-links button:focus-visible {
    /* --rpwa-focus-color keeps the ring at 3:1 against the panel surface even
       when the brand pick itself can't reach it (WCAG 1.4.11). */
    outline: 3px solid var(--rpwa-focus-color, #1f1f24) !important;
    outline-offset: 2px !important;
}

@media (max-width: 600px) {
    #rpwa-widget #rpwaPanel { width: 92vw !important; max-width: 380px !important; }
    /* Stack the label above its +/-/reset controls so neither is squeezed at
       the 1.4.10 reflow width of 320px. */
    #rpwa-widget .rpwa-scale-row { flex-direction: column !important; align-items: stretch !important; }
}

/* 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
   (`#rpwa-widget`) and its helper elements (`[id^="rpwa-"]`).
   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.rpwa-contrast-high > *:not(#rpwa-widget):not([id^="rpwa-"]) { filter: contrast(1.4) !important; }
body.rpwa-contrast-high > *:not(#rpwa-widget):not([id^="rpwa-"]),
body.rpwa-contrast-high > *:not(#rpwa-widget):not([id^="rpwa-"]) * { 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.rpwa-contrast-dark { background: #000 !important; }
body.rpwa-contrast-dark > *:not(#rpwa-widget):not([id^="rpwa-"]),
body.rpwa-contrast-dark > *:not(#rpwa-widget):not([id^="rpwa-"]) * {
    background: #000 !important;
    color: #fff !important;
    border-color: #fff !important;
    background-image: none !important;
}
body.rpwa-contrast-dark > *:not(#rpwa-widget):not([id^="rpwa-"]) a,
body.rpwa-contrast-dark > *:not(#rpwa-widget):not([id^="rpwa-"]) a * { color: #ff0 !important; }
body.rpwa-contrast-dark > *:not(#rpwa-widget):not([id^="rpwa-"]) button { background: #222 !important; }
/* `color` doesn't reach ::placeholder, and inline SVGs that paint through the
   `fill`/`stroke` presentation attributes keep their original paint — so
   placeholder text and icon-only controls (hamburger, search, cart) would sit
   invisible on the forced background. `:not([fill="none"])` / `:not([stroke="none"])`
   leave deliberately unpainted shapes alone. */
body.rpwa-contrast-dark > *:not(#rpwa-widget):not([id^="rpwa-"])::placeholder,
body.rpwa-contrast-dark > *:not(#rpwa-widget):not([id^="rpwa-"]) ::placeholder {
    color: #ccc !important;
    opacity: 1 !important;
}
body.rpwa-contrast-dark > *:not(#rpwa-widget):not([id^="rpwa-"]) svg *:not([fill="none"]) { fill: #fff !important; }
body.rpwa-contrast-dark > *:not(#rpwa-widget):not([id^="rpwa-"]) svg *:not([stroke="none"]) { stroke: #fff !important; }

body.rpwa-contrast-light { background: #fff !important; }
body.rpwa-contrast-light > *:not(#rpwa-widget):not([id^="rpwa-"]),
body.rpwa-contrast-light > *:not(#rpwa-widget):not([id^="rpwa-"]) * {
    background: #fff !important;
    color: #000 !important;
    border-color: #000 !important;
    background-image: none !important;
}
body.rpwa-contrast-light > *:not(#rpwa-widget):not([id^="rpwa-"]) a,
body.rpwa-contrast-light > *:not(#rpwa-widget):not([id^="rpwa-"]) a * { color: #0000ff !important; }
/* Placeholder + SVG paint, same reasoning as the dark mode above. */
body.rpwa-contrast-light > *:not(#rpwa-widget):not([id^="rpwa-"])::placeholder,
body.rpwa-contrast-light > *:not(#rpwa-widget):not([id^="rpwa-"]) ::placeholder {
    color: #333 !important;
    opacity: 1 !important;
}
body.rpwa-contrast-light > *:not(#rpwa-widget):not([id^="rpwa-"]) svg *:not([fill="none"]) { fill: #000 !important; }
body.rpwa-contrast-light > *:not(#rpwa-widget):not([id^="rpwa-"]) svg *:not([stroke="none"]) { stroke: #000 !important; }

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

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

body.rpwa-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;
}
/* The resting highlight above is an author `outline !important`, so it also
   replaces the UA focus ring — focused and unfocused links would be pixel
   identical (WCAG 2.4.7). Give the focused link a dark ring with the yellow
   pushed out to a surrounding box-shadow so both states stay distinguishable. */
body.rpwa-highlight-links a:focus-visible {
    outline: 3px solid #0b0b0b !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 6px #ff0 !important;
}

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

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

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

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

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

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

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

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

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

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

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

/* Page zoom (display magnification) */
/* Scoped to body's direct children (excluding the widget and its helper
   elements) for the same reason as the filter modes above: zoom/transform on
   <body> itself would scale the widget's fixed UI, and a body-level transform
   creates a containing block that re-anchors every position:fixed element. */
@supports (zoom: 1.1) {
    body.rpwa-page-zoom-1 > *:not([id^="rpwa-"]) { zoom: 1.1 !important; }
    body.rpwa-page-zoom-2 > *:not([id^="rpwa-"]) { zoom: 1.2 !important; }
    body.rpwa-page-zoom-3 > *:not([id^="rpwa-"]) { zoom: 1.3 !important; }
    body.rpwa-page-zoom-4 > *:not([id^="rpwa-"]) { zoom: 1.4 !important; }
    body.rpwa-page-zoom-5 > *:not([id^="rpwa-"]) { zoom: 1.5 !important; }
}
@supports not (zoom: 1.1) {
    body.rpwa-page-zoom-1 > *:not([id^="rpwa-"]) { transform: scale(1.1) !important; transform-origin: top left !important; width: 90.91% !important; }
    body.rpwa-page-zoom-2 > *:not([id^="rpwa-"]) { transform: scale(1.2) !important; transform-origin: top left !important; width: 83.33% !important; }
    body.rpwa-page-zoom-3 > *:not([id^="rpwa-"]) { transform: scale(1.3) !important; transform-origin: top left !important; width: 76.92% !important; }
    body.rpwa-page-zoom-4 > *:not([id^="rpwa-"]) { transform: scale(1.4) !important; transform-origin: top left !important; width: 71.43% !important; }
    body.rpwa-page-zoom-5 > *:not([id^="rpwa-"]) { transform: scale(1.5) !important; transform-origin: top left !important; width: 66.67% !important; }
}
/* Keep the widget itself unscaled */
#rpwa-widget { transform: none !important; zoom: 1 !important; }

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

.rpwa-img-desc {
    display: block !important;
    padding: 6px 10px !important;
    background: var(--rpwa-color, #b04e00) !important;
    /* Ink chosen against the brand fill — a light brand pick leaves plain #fff
       below 4.5:1 on this host-page caption. */
    color: var(--rpwa-on-color, #fff) !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    border-radius: 0 0 6px 6px !important;
    max-width: 100% !important;
}
/* Fixed red fill, so the ink is pinned rather than inherited: on a light brand
   pick --rpwa-on-color resolves to #1f1f24, which is only 3.59:1 on #d33 at
   13px. White is 4.57:1. */
.rpwa-img-desc.rpwa-img-missing {
    background: #d33 !important;
    color: #fff !important;
}

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

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

#rpwa-reading-focus {
    position: fixed !important;
    inset: 0 !important;
    pointer-events: none !important;
    z-index: 99996 !important;
    /* Kept deliberately light: this overlay sits above the host page (and above
       any focus ring the host paints), so whatever it dims must still read.
       At .55 even black-on-white host text composites to 4.41:1 — under the
       4.5:1 floor. .35 keeps the dimmed text above it in every case while the
       transparent band still calls out the reading line. */
    background: rgba(0,0,0,.35) !important;
    mask: linear-gradient(to bottom,
        rgba(0,0,0,1) 0,
        rgba(0,0,0,1) var(--rpwa-rf-top, 40%),
        rgba(0,0,0,0) var(--rpwa-rf-top, 40%),
        rgba(0,0,0,0) calc(var(--rpwa-rf-top, 40%) + 80px),
        rgba(0,0,0,1) calc(var(--rpwa-rf-top, 40%) + 80px),
        rgba(0,0,0,1) 100%) !important;
    -webkit-mask: linear-gradient(to bottom,
        rgba(0,0,0,1) 0,
        rgba(0,0,0,1) var(--rpwa-rf-top, 40%),
        rgba(0,0,0,0) var(--rpwa-rf-top, 40%),
        rgba(0,0,0,0) calc(var(--rpwa-rf-top, 40%) + 80px),
        rgba(0,0,0,1) calc(var(--rpwa-rf-top, 40%) + 80px),
        rgba(0,0,0,1) 100%) !important;
    display: none !important;
}
#rpwa-reading-focus.rpwa-active { display: block !important; }

/* === Virtual keyboard (Task 17) === */
#rpwa-vkeyboard {
    position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
    background: #2a2a2a !important; color: #fff !important; border-radius: 12px !important;
    padding: 8px !important; z-index: 99997 !important;
    box-shadow: 0 8px 30px rgba(0,0,0,.4) !important;
    user-select: none !important;
    display: none !important;
    max-width: 96vw !important;
}
#rpwa-vkeyboard.rpwa-active { display: block !important; }
#rpwa-vkeyboard .rpwa-vk-header {
    display: flex !important; justify-content: space-between !important; align-items: center !important;
    padding: 4px 8px !important; font-size: 12px !important; cursor: move !important;
}
#rpwa-vkeyboard .rpwa-vk-row { display: flex !important; flex-wrap: wrap !important; gap: 4px !important; justify-content: center !important; margin: 4px 0 !important; }
#rpwa-vkeyboard .rpwa-vk-key {
    min-width: 32px !important; height: 36px !important; padding: 0 8px !important;
    background: #444 !important; border: 0 !important; color: #fff !important; border-radius: 6px !important; cursor: pointer !important;
    font-size: 14px !important;
}
#rpwa-vkeyboard .rpwa-vk-key:hover { background: #555 !important; }
#rpwa-vkeyboard .rpwa-vk-key.rpwa-vk-wide { min-width: 64px !important; }
#rpwa-vkeyboard .rpwa-vk-key.rpwa-vk-extra-wide { min-width: 120px !important; }
/* 11-key rows (Arabic/Russian/German layouts) on narrow phones */
@media (max-width: 480px) {
    #rpwa-vkeyboard .rpwa-vk-key { min-width: 26px !important; padding: 0 4px !important; font-size: 13px !important; }
    #rpwa-vkeyboard .rpwa-vk-key.rpwa-vk-extra-wide { min-width: 80px !important; }
}

/* Keyboard navigation — high-contrast focus outlines + always-visible skip link */
body.rpwa-kbd-nav :focus-visible {
    outline: 3px solid var(--rpwa-color, #b04e00) !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 4px rgba(150, 82, 21, 0.2) !important;
}
body.rpwa-kbd-nav .rpwa-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.
   `aria-hidden` hides from assistive tech, not from sight, and themes routinely
   put it on visible wrappers. Fading those to 50% dropped real body text from
   21:1 to ~3.98:1 inside a mode the visitor turned on to read better, so the
   marker is non-destructive: outline + hatch only, no opacity change. */
/* Marker only — never `opacity`, which would composite real text toward the
   background (black-on-white drops 21:1 to 3.98:1) inside a mode the visitor
   enabled to improve legibility, and never an `!important` background-image,
   which would erase a legitimate background on any host wrapper that happens
   to carry aria-hidden. The outline marks the region without touching either. */
body.rpwa-sr [aria-hidden="true"] {
    outline: 2px dashed #d00000 !important;
    outline-offset: -2px !important;
}

/* Smart-navigation landmark chips */
.rpwa-landmark-chip {
    position: absolute !important;
    z-index: 99996 !important;
    background: var(--rpwa-color, #b04e00) !important;
    /* Ink chosen against the brand fill — see .rpwa-img-desc above. */
    color: var(--rpwa-on-color, #fff) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    padding: 2px 8px !important;
    border-radius: 6px !important;
    pointer-events: none !important;
    box-shadow: 0 2px 6px rgba(0,0,0,.3) !important;
}

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

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

/* AT-only text (same technique as the skip link's hidden state) */
.rpwa-visually-hidden {
    position: absolute !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;
}

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

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

/* 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) {
    #rpwa-widget #rpwaToggleBtn,
    #rpwa-widget #rpwaPanel,
    #rpwa-widget #rpwaCloseBtn,
    #rpwa-widget .rpwa-section > summary,
    #rpwa-widget .rpwa-section > summary::after,
    #rpwa-widget .rpwa-toggle,
    #rpwa-widget .rpwa-radio,
    #rpwa-widget .rpwa-btn,
    #rpwa-widget #rpwaResetAll {
        transition: none !important;
    }
    #rpwa-widget #rpwaToggleBtn:hover,
    #rpwa-widget .rpwa-toggle:active,
    #rpwa-widget .rpwa-radio:active,
    #rpwa-widget #rpwaResetAll:active {
        transform: none !important;
    }
    #rpwa-mic-indicator {
        animation: none !important;
    }
}