/* Core variables applied via classes */ :root{ --a11y-font-scale: 1; --a11y-focus: 3px solid #111; } /* Skip link */ .a11y-skip-link{ position: fixed; top: 8px; inset-inline-start: 8px; z-index: 2147483647; background: #111; color: #fff; padding: 10px 12px; border-radius: 10px; text-decoration: none; transform: translateY(-130%); transition: transform .15s ease; } .a11y-skip-link:focus{ transform: translateY(0); outline: none; } /* UI container */ .a11y-root{ position: fixed; z-index: 2147483646; font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif; } .a11y-root[dir="rtl"]{ direction: rtl; } .a11y-root[dir="ltr"]{ direction: ltr; } /* Legacy 2-value support (back-compat) */ .a11y-root[data-a11y-position="right"]{ bottom: 18px; inset-inline-end: 18px; } .a11y-root[data-a11y-position="left"]{ bottom: 18px; inset-inline-start: 18px; } /* Four admin-controlled FAB positions (logical positions, not affected by RTL/LTR) */ .a11y-root.rr-accessibility-pos-bottom-right{ bottom: 18px; right: 18px; left: auto; top: auto; } .a11y-root.rr-accessibility-pos-bottom-left { bottom: 18px; left: 18px; right: auto; top: auto; } .a11y-root.rr-accessibility-pos-middle-right{ top: 50%; transform: translateY(-50%); right: 18px; left: auto; bottom: auto; } .a11y-root.rr-accessibility-pos-middle-left { top: 50%; transform: translateY(-50%); left: 18px; right: auto; bottom: auto; } /* Mobile safety: lift bottom FAB above sticky photo-bar / footer; clamp middle FAB below header */ @media (max-width: 600px){ .a11y-root.rr-accessibility-pos-bottom-right, .a11y-root.rr-accessibility-pos-bottom-left{ bottom: 80px; } .a11y-root.rr-accessibility-pos-middle-right, .a11y-root.rr-accessibility-pos-middle-left{ top: max(50%, 120px); } } /* Floating button */ .a11y-fab{ border: 0; border-radius: 999px; padding: 12px 14px; cursor: pointer; background: rgba(17,17,17,.92); color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.25); } .a11y-fab:focus{ outline: var(--a11y-focus); outline-offset: 3px; } /* No-op: legacy backdrop element no longer rendered — kept for back-compat in case stale HTML lingers. */ .a11y-backdrop{ display: none !important; } /* Panel */ .a11y-panel{ position: fixed; bottom: 72px; inset-inline-end: 18px; width: min(360px, calc(100vw - 24px)); background: #fff; color: #111; border-radius: 16px; box-shadow: 0 18px 70px rgba(0,0,0,.25); overflow: hidden; } .a11y-root[data-a11y-position="left"] .a11y-panel{ inset-inline-end: auto; inset-inline-start: 18px; } /* Panel placement per FAB position (CSS logical properties stay neutral; physical sides for clarity) */ .a11y-root.rr-accessibility-pos-bottom-right .a11y-panel{ bottom: 72px; right: 18px; left: auto; top: auto; } .a11y-root.rr-accessibility-pos-bottom-left .a11y-panel{ bottom: 72px; left: 18px; right: auto; top: auto; } .a11y-root.rr-accessibility-pos-middle-right .a11y-panel{ top: 50%; transform: translateY(-50%); right: 72px; left: auto; bottom: auto; } .a11y-root.rr-accessibility-pos-middle-left .a11y-panel{ top: 50%; transform: translateY(-50%); left: 72px; right: auto; bottom: auto; } @media (max-width: 600px){ .a11y-root.rr-accessibility-pos-bottom-right .a11y-panel, .a11y-root.rr-accessibility-pos-bottom-left .a11y-panel{ bottom: 140px; } .a11y-root.rr-accessibility-pos-middle-right .a11y-panel, .a11y-root.rr-accessibility-pos-middle-left .a11y-panel{ top: 50%; } } .a11y-panel-header{ display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; background: #111; color: #fff; } .a11y-title{ font-weight: 700; } .a11y-close{ border: 0; background: transparent; color: #fff; cursor: pointer; font-size: 18px; line-height: 1; } .a11y-close:focus{ outline: 2px solid #fff; outline-offset: 2px; } .a11y-panel-body{ padding: 12px; } .a11y-row{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 8px; } .a11y-btn{ border: 1px solid rgba(0,0,0,.12); background: #f6f6f6; border-radius: 12px; padding: 10px 10px; cursor: pointer; font-size: 14px; } .a11y-btn[aria-pressed="true"]{ background: #111; color: #fff; border-color: #111; } .a11y-btn:focus{ outline: var(--a11y-focus); outline-offset: 2px; } .a11y-danger{ border-color: rgba(160,0,0,.25); } /* Anchor variant of the toolbar button (statement link → /accessibility.php) — visually identical to the surrounding