/* =====================================================================
ACCESSIBILITY WIDGET — public/css/accessibility.css
=====================================================================
Architecture:
1. Design tokens (CSS custom properties)
2. Resets / utilities scoped to the widget
3. Floating toggle button
4. Backdrop overlay
5. Sliding panel shell (header / body)
6. Section heading
7. Profile cards (Section 1)
8. Generic control row (label / value line)
9. iOS-style toggle switch
10. Range slider
11. Select dropdown
12. Reset button
13. Ripple micro-interaction
14. GLOBAL PAGE EFFECTS
(the actual accessibility behaviours applied to the *host page*,
toggled by adding classes to from accessibility.js)
15. Responsive breakpoints
16. Keyframe animations
17. Reduced motion / print safety
IMPORTANT: every rule that changes the *host page* (not the widget
itself) is written with the exclusion pattern:
html.acc-xxx body :not(#acc-widget-root):not(#acc-widget-root *)
This guarantees the widget never accessibility-mangles its own UI
(e.g. grayscale never desaturates the widget's blue brand color,
"hide images" never hides the widget's icons, etc).
===================================================================== */
/* ---------------------------------------------------------------------
1. DESIGN TOKENS
--------------------------------------------------------------------- */
#acc-widget-root {
/* Brand */
--acc-primary: #1E88E5;
--acc-primary-dark: #1565C0;
--acc-primary-darker: #0D47A1;
--acc-primary-light: #E3F2FD;
--acc-primary-contrast: #FFFFFF;
/* Neutrals */
--acc-text: #16181D;
--acc-text-muted: #6B7280;
--acc-text-faint: #9CA3AF;
--acc-bg: #FFFFFF;
--acc-bg-soft: #F6F8FB;
--acc-bg-hover: #EEF3FA;
--acc-border: #E4E7EC;
--acc-border-strong: #CBD5E1;
--acc-danger: #E53935;
/* Geometry */
--acc-radius-sm: 8px;
--acc-radius-md: 14px;
--acc-radius-lg: 20px;
--acc-radius-pill: 999px;
/* Elevation */
--acc-shadow-btn: 0 4px 14px rgba(30, 136, 229, 0.4);
--acc-shadow-btn-hover: 0 6px 20px rgba(30, 136, 229, 0.55);
--acc-shadow-panel: -12px 0 48px rgba(16, 24, 40, 0.18);
--acc-shadow-card: 0 1px 3px rgba(16, 24, 40, 0.06);
--acc-shadow-card-hover: 0 8px 20px rgba(16, 24, 40, 0.1);
/* Motion */
--acc-speed: 300ms;
--acc-ease: cubic-bezier(0.4, 0, 0.2, 1);
--acc-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
/* Layout */
--acc-panel-width: 420px;
--acc-btn-size: 56px;
--acc-z-btn: 999997;
--acc-z-overlay: 999998;
--acc-z-panel: 999999;
/* Fixed baseline so host-page font-size changes never resize the widget */
font-size: 16px;
line-height: 1.4;
color: var(--acc-text);
-webkit-font-smoothing: antialiased;
text-align: left;
direction: ltr;
}
/* ---------------------------------------------------------------------
2. RESETS / UTILITIES (scoped to the widget only)
--------------------------------------------------------------------- */
#acc-widget-root,
#acc-widget-root *,
#acc-widget-root *::before,
#acc-widget-root *::after {
box-sizing: border-box;
font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
#acc-widget-root button {
font: inherit;
color: inherit;
background: none;
border: none;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
#acc-widget-root input,
#acc-widget-root select {
font: inherit;
color: inherit;
}
.acc-visually-hidden {
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;
}
/* Consistent, visible focus ring for every interactive element in the widget */
#acc-widget-root button:focus-visible,
#acc-widget-root input:focus-visible,
#acc-widget-root select:focus-visible,
#acc-widget-root a:focus-visible {
outline: 3px solid var(--acc-primary-dark);
outline-offset: 2px;
border-radius: var(--acc-radius-sm);
}
/* ---------------------------------------------------------------------
3. FLOATING TOGGLE BUTTON
--------------------------------------------------------------------- */
.acc-toggle-btn {
position: fixed;
top: 50%;
right: 24px;
transform: translateY(-50%);
width: var(--acc-btn-size);
height: var(--acc-btn-size);
border-radius: 50%;
background: var(--acc-primary);
color: var(--acc-primary-contrast);
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
box-shadow: var(--acc-shadow-btn);
z-index: var(--acc-z-btn);
transition: transform var(--acc-speed) var(--acc-ease-spring),
box-shadow var(--acc-speed) var(--acc-ease),
background var(--acc-speed) var(--acc-ease);
overflow: hidden;
}
.acc-toggle-btn:hover {
transform: translateY(-50%) scale(1.08);
box-shadow: var(--acc-shadow-btn-hover);
background: var(--acc-primary-dark);
}
.acc-toggle-btn:active {
transform: translateY(-50%) scale(0.96);
}
.acc-toggle-btn[aria-expanded="true"] {
background: var(--acc-primary-dark);
}
/* Ripple element injected by JS on click */
.acc-toggle-btn .acc-ripple {
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, 0.55);
transform: scale(0);
pointer-events: none;
animation: acc-ripple-anim 600ms var(--acc-ease) forwards;
}
/* ---------------------------------------------------------------------
4. BACKDROP OVERLAY
--------------------------------------------------------------------- */
.acc-overlay {
position: fixed;
inset: 0;
background: rgba(16, 24, 40, 0.45);
z-index: var(--acc-z-overlay);
opacity: 0;
visibility: hidden;
transition: opacity var(--acc-speed) var(--acc-ease),
visibility 0s linear var(--acc-speed);
}
.acc-overlay.acc-is-visible {
opacity: 1;
visibility: visible;
transition: opacity var(--acc-speed) var(--acc-ease), visibility 0s linear 0s;
}
/* ---------------------------------------------------------------------
5. PANEL SHELL
--------------------------------------------------------------------- */
.acc-panel {
position: fixed;
top: 0;
right: 0;
width: var(--acc-panel-width);
max-width: 100vw;
height: 90vh;
margin-top: 5vh;
background: var(--acc-bg);
border-radius: var(--acc-radius-lg) 0 0 var(--acc-radius-lg);
box-shadow: var(--acc-shadow-panel);
z-index: var(--acc-z-panel);
display: flex;
flex-direction: column;
overflow: hidden;
transform: translateX(100%);
opacity: 0;
visibility: hidden;
transition: transform var(--acc-speed) var(--acc-ease),
opacity var(--acc-speed) var(--acc-ease),
visibility 0s linear var(--acc-speed);
}
.acc-panel.acc-is-open {
transform: translateX(0);
opacity: 1;
visibility: visible;
transition: transform var(--acc-speed) var(--acc-ease-spring),
opacity var(--acc-speed) var(--acc-ease),
visibility 0s linear 0s;
}
.acc-panel-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
padding: 22px 22px 18px;
background: linear-gradient(135deg, var(--acc-primary) 0%, var(--acc-primary-dark) 100%);
color: var(--acc-primary-contrast);
flex-shrink: 0;
}
.acc-panel-title {
font-size: 22px;
font-weight: 700;
margin: 0 0 4px;
letter-spacing: -0.01em;
}
.acc-panel-subtitle {
font-size: 13px;
margin: 0;
color: rgba(255, 255, 255, 0.85);
font-weight: 400;
}
.acc-close-btn {
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
background: rgba(255, 255, 255, 0.16);
color: var(--acc-primary-contrast);
flex-shrink: 0;
transition: background var(--acc-speed) var(--acc-ease), transform var(--acc-speed) var(--acc-ease);
}
.acc-close-btn:hover {
background: rgba(255, 255, 255, 0.3);
transform: rotate(90deg);
}
.acc-panel-body {
flex: 1 1 auto;
overflow-y: auto;
overflow-x: hidden;
padding: 20px 22px 32px;
scrollbar-width: thin;
scrollbar-color: var(--acc-border-strong) transparent;
}
.acc-panel-body::-webkit-scrollbar {
width: 8px;
}
.acc-panel-body::-webkit-scrollbar-track {
background: transparent;
}
.acc-panel-body::-webkit-scrollbar-thumb {
background-color: var(--acc-border-strong);
border-radius: var(--acc-radius-pill);
}
/* ---------------------------------------------------------------------
6. SECTION HEADING
--------------------------------------------------------------------- */
.acc-section {
padding: 18px 0;
border-bottom: 1px solid var(--acc-border);
}
.acc-section:first-child {
padding-top: 0;
}
.acc-section:last-child {
border-bottom: none;
padding-bottom: 0;
}
.acc-section-title {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--acc-text-muted);
margin: 0 0 14px;
}
.acc-section-title i {
color: var(--acc-primary);
font-size: 14px;
}
/* ---------------------------------------------------------------------
7. PROFILE CARDS
--------------------------------------------------------------------- */
.acc-profiles-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.acc-profile-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
padding: 18px 10px;
border: 2px solid var(--acc-border);
border-radius: var(--acc-radius-md);
background: var(--acc-bg-soft);
text-align: center;
transition: transform var(--acc-speed) var(--acc-ease),
border-color var(--acc-speed) var(--acc-ease),
background var(--acc-speed) var(--acc-ease),
box-shadow var(--acc-speed) var(--acc-ease);
}
.acc-profile-card:hover {
transform: translateY(-3px);
border-color: var(--acc-primary);
box-shadow: var(--acc-shadow-card-hover);
}
.acc-profile-card:active {
transform: translateY(-1px);
}
.acc-profile-card.acc-is-active {
border-color: var(--acc-primary);
background: var(--acc-primary-light);
box-shadow: 0 0 0 3px rgba(30, 136, 229, 0.15);
}
.acc-profile-icon {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: var(--acc-primary-light);
color: var(--acc-primary);
font-size: 17px;
transition: background var(--acc-speed) var(--acc-ease), color var(--acc-speed) var(--acc-ease);
}
.acc-profile-card.acc-is-active .acc-profile-icon {
background: var(--acc-primary);
color: var(--acc-primary-contrast);
}
.acc-profile-title {
font-size: 12.5px;
font-weight: 600;
line-height: 1.3;
color: var(--acc-text);
}
/* ---------------------------------------------------------------------
8. GENERIC CONTROL ROW
--------------------------------------------------------------------- */
.acc-row {
padding: 12px 0;
}
.acc-row-toggle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.acc-row-label {
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
font-weight: 500;
color: var(--acc-text);
cursor: pointer;
}
.acc-row-icon {
width: 18px;
text-align: center;
color: var(--acc-primary);
font-size: 14px;
flex-shrink: 0;
}
.acc-row-label-line {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
}
.acc-row-value {
font-size: 12.5px;
font-weight: 700;
color: var(--acc-primary);
background: var(--acc-primary-light);
padding: 2px 9px;
border-radius: var(--acc-radius-pill);
min-width: 44px;
text-align: center;
}
.acc-row-select {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
/* ---------------------------------------------------------------------
9. iOS-STYLE TOGGLE SWITCH
--------------------------------------------------------------------- */
.acc-switch {
position: relative;
display: inline-flex;
align-items: center;
flex-shrink: 0;
cursor: pointer;
}
.acc-switch input {
position: absolute;
opacity: 0;
width: 44px;
height: 26px;
margin: 0;
cursor: pointer;
z-index: 1;
}
.acc-switch-track {
width: 44px;
height: 26px;
border-radius: var(--acc-radius-pill);
background: var(--acc-border-strong);
position: relative;
transition: background var(--acc-speed) var(--acc-ease);
}
.acc-switch-thumb {
position: absolute;
top: 3px;
left: 3px;
width: 20px;
height: 20px;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
transition: transform var(--acc-speed) var(--acc-ease-spring);
}
.acc-switch input:checked + .acc-switch-track {
background: var(--acc-primary);
}
.acc-switch input:checked + .acc-switch-track .acc-switch-thumb {
transform: translateX(18px);
}
.acc-switch input:focus-visible + .acc-switch-track {
outline: 3px solid var(--acc-primary-dark);
outline-offset: 2px;
}
.acc-switch input:disabled + .acc-switch-track {
opacity: 0.5;
cursor: not-allowed;
}
/* ---------------------------------------------------------------------
10. RANGE SLIDER
--------------------------------------------------------------------- */
.acc-slider {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 6px;
border-radius: var(--acc-radius-pill);
background: linear-gradient(
to right,
var(--acc-primary) 0%,
var(--acc-primary) var(--acc-slider-fill, 50%),
var(--acc-border) var(--acc-slider-fill, 50%),
var(--acc-border) 100%
);
outline: none;
cursor: pointer;
margin: 4px 0;
}
.acc-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--acc-primary);
border: 3px solid #fff;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
cursor: pointer;
transition: transform var(--acc-speed) var(--acc-ease);
}
.acc-slider::-webkit-slider-thumb:hover {
transform: scale(1.15);
}
.acc-slider::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--acc-primary);
border: 3px solid #fff;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
cursor: pointer;
transition: transform var(--acc-speed) var(--acc-ease);
}
.acc-slider::-moz-range-thumb:hover {
transform: scale(1.15);
}
.acc-slider::-moz-range-track {
height: 6px;
border-radius: var(--acc-radius-pill);
background: transparent;
}
.acc-slider:focus-visible::-webkit-slider-thumb {
outline: 3px solid var(--acc-primary-dark);
outline-offset: 2px;
}
/* ---------------------------------------------------------------------
11. SELECT DROPDOWN
--------------------------------------------------------------------- */
.acc-select {
-webkit-appearance: none;
appearance: none;
padding: 8px 32px 8px 12px;
border: 1.5px solid var(--acc-border);
border-radius: var(--acc-radius-sm);
background-color: var(--acc-bg-soft);
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 12px center;
font-size: 13.5px;
font-weight: 500;
color: var(--acc-text);
cursor: pointer;
transition: border-color var(--acc-speed) var(--acc-ease);
}
.acc-select:hover {
border-color: var(--acc-primary);
}
/* ---------------------------------------------------------------------
12. RESET BUTTON
--------------------------------------------------------------------- */
.acc-section-reset {
padding-top: 22px;
}
.acc-reset-btn {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 14px 20px;
border-radius: var(--acc-radius-md);
background: var(--acc-danger);
color: #fff;
font-size: 14.5px;
font-weight: 700;
letter-spacing: 0.01em;
box-shadow: 0 4px 14px rgba(229, 57, 53, 0.35);
transition: transform var(--acc-speed) var(--acc-ease),
box-shadow var(--acc-speed) var(--acc-ease),
background var(--acc-speed) var(--acc-ease);
position: relative;
overflow: hidden;
}
.acc-reset-btn:hover {
background: #c62828;
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(229, 57, 53, 0.45);
}
.acc-reset-btn:active {
transform: translateY(0);
}
/* ---------------------------------------------------------------------
13. RIPPLE MICRO-INTERACTION (shared by any .acc-rippleable element)
--------------------------------------------------------------------- */
@keyframes acc-ripple-anim {
to {
transform: scale(2.5);
opacity: 0;
}
}
/* =====================================================================
14. GLOBAL PAGE EFFECTS
Applied to by accessibility.js. Each block below is scoped to
the live page content and explicitly excludes the widget itself via
:not(#acc-widget-root):not(#acc-widget-root *).
===================================================================== */
/* --- Text sizing / spacing --------------------------------------- */
/* Font size is applied directly by JS as html.style.fontSize (%) so it
naturally cascades via rem/em on the host page. The widget is immune
because #acc-widget-root fixes its own font-size to 16px above. */
html.acc-text-adjust body :not(#acc-widget-root):not(#acc-widget-root *) {
line-height: var(--acc-line-height, 1.5) !important;
letter-spacing: var(--acc-letter-spacing, 0px) !important;
word-spacing: var(--acc-word-spacing, 0px) !important;
}
html.acc-font-weight-medium body :not(#acc-widget-root):not(#acc-widget-root *) {
font-weight: 500 !important;
}
html.acc-font-weight-bold body :not(#acc-widget-root):not(#acc-widget-root *) {
font-weight: 700 !important;
}
html.acc-readable-font body :not(#acc-widget-root):not(#acc-widget-root *) {
font-family: "Atkinson Hyperlegible", "OpenDyslexic", Arial, sans-serif !important;
}
/* --- Color & contrast filters -------------------------------------
Composed into a single CSS variable (--acc-page-filter) by JS so that
contrast / brightness / saturation / grayscale / invert can all stack
without overwriting one another. */
html.acc-color-filters {
--acc-page-filter: none;
}
html.acc-color-filters body {
filter: var(--acc-page-filter);
}
html.acc-high-contrast body :not(#acc-widget-root):not(#acc-widget-root *) {
background-color: #000 !important;
color: #fff !important;
border-color: #fff !important;
}
html.acc-high-contrast body a:not(#acc-widget-root *) {
color: #FFD54F !important;
}
html.acc-dark-mode body :not(#acc-widget-root):not(#acc-widget-root *) {
background-color: #121212 !important;
color: #EDEDED !important;
border-color: #333 !important;
}
html.acc-dark-mode body img:not(#acc-widget-root *),
html.acc-dark-mode body video:not(#acc-widget-root *) {
filter: brightness(0.85);
}
html.acc-light-mode body :not(#acc-widget-root):not(#acc-widget-root *) {
background-color: #FFFFFF !important;
color: #16181D !important;
border-color: #E4E7EC !important;
}
/* --- Reading aids --------------------------------------------------- */
html.acc-highlight-links body a:not(#acc-widget-root *) {
outline: 2px solid var(--acc-primary, #1E88E5) !important;
background-color: rgba(30, 136, 229, 0.12) !important;
text-decoration: underline !important;
}
html.acc-highlight-headings body h1:not(#acc-widget-root *),
html.acc-highlight-headings body h2:not(#acc-widget-root *),
html.acc-highlight-headings body h3:not(#acc-widget-root *),
html.acc-highlight-headings body h4:not(#acc-widget-root *),
html.acc-highlight-headings body h5:not(#acc-widget-root *),
html.acc-highlight-headings body h6:not(#acc-widget-root *) {
outline: 2px dashed var(--acc-primary, #1E88E5) !important;
background-color: rgba(30, 136, 229, 0.08) !important;
padding: 2px 4px !important;
}
/* Reading guide: a horizontal line that tracks the cursor (positioned by JS) */
.acc-reading-guide-line {
position: fixed;
left: 0;
width: 100%;
height: 3px;
background: var(--acc-primary, #1E88E5);
box-shadow: 0 0 8px rgba(30, 136, 229, 0.6);
z-index: 999996;
pointer-events: none;
transition: top 60ms linear;
}
/* Reading mask: two overlays with a transparent horizontal band that follows the cursor */
.acc-reading-mask-overlay {
position: fixed;
left: 0;
width: 100%;
background: rgba(0, 0, 0, 0.65);
z-index: 999995;
pointer-events: none;
}
.acc-reading-mask-top {
top: 0;
}
.acc-reading-mask-bottom {
bottom: 0;
}
/* Text magnifier: a circular lens that follows the cursor and scales the
page content beneath it via CSS `zoom` on a cloned/backdrop layer */
.acc-magnifier-lens {
position: fixed;
width: 220px;
height: 220px;
border-radius: 50%;
border: 4px solid var(--acc-primary, #1E88E5);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
pointer-events: none;
z-index: 999996;
background-repeat: no-repeat;
display: none;
}
.acc-magnifier-lens.acc-is-active {
display: block;
}
/* Focus indicator: a stronger, unmissable focus ring across the page */
html.acc-focus-indicator body :not(#acc-widget-root):not(#acc-widget-root *):focus {
outline: 4px solid #FF5722 !important;
outline-offset: 3px !important;
box-shadow: 0 0 0 6px rgba(255, 87, 34, 0.25) !important;
}
/* Page structure: a floating outline panel of headings/landmarks, built by JS */
.acc-structure-panel {
position: fixed;
top: 50%;
left: 24px;
transform: translateY(-50%);
width: 280px;
max-height: 70vh;
overflow-y: auto;
background: #fff;
border-radius: var(--acc-radius-md, 14px);
box-shadow: 0 12px 40px rgba(16, 24, 40, 0.25);
padding: 16px;
z-index: 999996;
font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.acc-structure-panel h4 {
margin: 0 0 10px;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #6B7280;
}
.acc-structure-panel ul {
list-style: none;
margin: 0;
padding: 0;
}
.acc-structure-panel li a {
display: block;
padding: 6px 8px;
border-radius: 6px;
font-size: 13.5px;
color: #16181D;
text-decoration: none;
border-left: 3px solid transparent;
}
.acc-structure-panel li a:hover,
.acc-structure-panel li a:focus-visible {
background: #E3F2FD;
border-left-color: #1E88E5;
}
.acc-structure-panel li[data-level="2"] a { padding-left: 18px; }
.acc-structure-panel li[data-level="3"] a { padding-left: 30px; }
.acc-structure-panel li[data-level="4"] a { padding-left: 42px; }
/* Large cursor */
html.acc-large-cursor,
html.acc-large-cursor body :not(#acc-widget-root):not(#acc-widget-root *) {
cursor: url("data:image/svg+xml;utf8,") 4 4, auto !important;
}
/* --- Interaction ------------------------------------------------------ */
html.acc-hide-images body img:not(#acc-widget-root *),
html.acc-hide-images body svg:not(#acc-widget-root *):not(.acc-keep-visible),
html.acc-hide-images body picture:not(#acc-widget-root *),
html.acc-hide-images body [style*="background-image"]:not(#acc-widget-root *) {
visibility: hidden !important;
}
html.acc-stop-animations body :not(#acc-widget-root):not(#acc-widget-root *),
html.acc-stop-animations body :not(#acc-widget-root):not(#acc-widget-root *)::before,
html.acc-stop-animations body :not(#acc-widget-root):not(#acc-widget-root *)::after {
animation-play-state: paused !important;
animation-duration: 0s !important;
transition-duration: 0s !important;
}
html.acc-reduce-motion body :not(#acc-widget-root):not(#acc-widget-root *) {
scroll-behavior: auto !important;
}
/* Small paused indicator overlaid on paused media by JS (video/gif via ![]()
) */
.acc-media-paused-badge {
position: absolute;
top: 8px;
left: 8px;
background: rgba(0, 0, 0, 0.65);
color: #fff;
font-size: 11px;
font-weight: 600;
padding: 3px 8px;
border-radius: var(--acc-radius-pill, 999px);
z-index: 10;
pointer-events: none;
}
/* ---------------------------------------------------------------------
15. RESPONSIVE BREAKPOINTS
--------------------------------------------------------------------- */
/* Tablet */
@media (max-width: 768px) {
.acc-panel {
width: 380px;
}
.acc-toggle-btn {
right: 18px;
}
}
/* Mobile */
@media (max-width: 480px) {
.acc-panel {
width: 100%;
height: 100vh;
max-height: 100vh;
margin-top: 0;
border-radius: 0;
}
.acc-toggle-btn {
right: 14px;
width: 50px;
height: 50px;
font-size: 21px;
}
.acc-profiles-grid {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.acc-panel-header {
padding: 18px 16px 14px;
}
.acc-panel-body {
padding: 16px 16px 28px;
}
.acc-structure-panel {
left: 12px;
right: 12px;
width: auto;
}
}
/* ---------------------------------------------------------------------
16. KEYFRAME ANIMATIONS
--------------------------------------------------------------------- */
@keyframes acc-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes acc-pop-in {
0% { transform: scale(0.9); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.acc-panel-body .acc-section {
animation: acc-fade-in 400ms var(--acc-ease) both;
}
/* ---------------------------------------------------------------------
17. REDUCED MOTION / PRINT SAFETY
--------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.acc-toggle-btn,
.acc-panel,
.acc-overlay,
.acc-profile-card,
.acc-switch-thumb,
.acc-slider::-webkit-slider-thumb,
.acc-close-btn,
.acc-reset-btn,
.acc-panel-body .acc-section {
transition: none !important;
animation: none !important;
}
}
@media print {
#acc-widget-root {
display: none !important;
}
}