/*!
 * AccessLens Accessibility Widget - front-end styles.
 * GPL-2.0-or-later.
 *
 * Two parts:
 *  1. Page effects: rules keyed off classes on <html> (al-contrast-high, al-big-text-2, ...).
 *     Every rule excludes the widget itself with :not(#accesslens-root, #accesslens-root *, #accesslens-skip)
 *     (except the contrast/saturation filter, which must sit on <html>).
 *  2. Widget UI: everything scoped to #accesslens-root (ID specificity beats most theme rules).
 */

/* ------------------------------------------------------------------ */
/* Fonts (bundled locally, SIL OFL / Bitstream Vera licences)         */
/* ------------------------------------------------------------------ */
@font-face {
	font-family: "AccessLens OpenDyslexic";
	src: url("../fonts/OpenDyslexic-Regular.woff") format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "AccessLens OpenDyslexic";
	src: url("../fonts/OpenDyslexic-Bold.woff") format("woff");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "AccessLens Atkinson";
	src: url("../fonts/AtkinsonHyperlegible-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "AccessLens Atkinson";
	src: url("../fonts/AtkinsonHyperlegible-Bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* ------------------------------------------------------------------ */
/* 1. PAGE EFFECTS                                                     */
/* ------------------------------------------------------------------ */

/* Filters (Contrast "high" + Saturation) are composed through custom properties
   so both can be active at once. Applied to <html>: a filter on any other element turns it
   into the containing block for position:fixed descendants, which breaks sticky headers,
   slide-out mini-carts, sticky "Add to cart" bars and popups (WooCommerce and most store themes).
   The root element is exempt from that rule. */
html.al-contrast-high { --al-fc: contrast(1.5); }
html.al-sat-low { --al-fs: saturate(0.5); }
html.al-sat-high { --al-fs: saturate(2); }
html.al-sat-mono { --al-fs: grayscale(1); }
html:is(.al-contrast-high, .al-sat-low, .al-sat-high, .al-sat-mono) {
	filter: var(--al-fc, contrast(1)) var(--al-fs, saturate(1)) !important;
}

/* Dark contrast */
html.al-contrast-dark,
html.al-contrast-dark body,
html.al-contrast-dark body :not(#accesslens-root, #accesslens-root *, #accesslens-skip) {
	background-color: #000 !important;
	color: #fff !important;
	text-shadow: none !important;
}
html.al-contrast-dark body :is(a, a *):not(#accesslens-root *) { color: #ffe14d !important; }
html.al-contrast-dark body :is(button, input, select, textarea):not(#accesslens-root *) { border: 1px solid #fff !important; }

/* Light contrast */
html.al-contrast-light,
html.al-contrast-light body,
html.al-contrast-light body :not(#accesslens-root, #accesslens-root *, #accesslens-skip) {
	background-color: #fff !important;
	color: #000 !important;
	text-shadow: none !important;
}
html.al-contrast-light body :is(a, a *):not(#accesslens-root *) { color: #0036a8 !important; }
html.al-contrast-light body :is(button, input, select, textarea):not(#accesslens-root *) { border: 1px solid #000 !important; }

/* Highlight links */
html.al-links body :is(a[href], [role="link"]):not(#accesslens-root *, #accesslens-skip) {
	text-decoration: underline !important;
	text-underline-offset: 0.18em !important;
	text-decoration-thickness: 2px !important;
	outline: 2px solid #1a1a1a !important;
	outline-offset: 2px !important;
	background-color: #fff3a3 !important;
	color: #1a1a1a !important;
}

/* Text spacing (WCAG 1.4.12 levels: max = 0.16em letter / 0.32em word) */
html.al-spacing-1 body :not(#accesslens-root, #accesslens-root *, #accesslens-skip) { letter-spacing: 0.05em !important; word-spacing: 0.12em !important; }
html.al-spacing-2 body :not(#accesslens-root, #accesslens-root *, #accesslens-skip) { letter-spacing: 0.1em !important; word-spacing: 0.24em !important; }
html.al-spacing-3 body :not(#accesslens-root, #accesslens-root *, #accesslens-skip) { letter-spacing: 0.16em !important; word-spacing: 0.32em !important; }

/* Line height */
html.al-lh-1 body :not(#accesslens-root, #accesslens-root *, #accesslens-skip) { line-height: 1.5 !important; }
html.al-lh-2 body :not(#accesslens-root, #accesslens-root *, #accesslens-skip) { line-height: 1.75 !important; }
html.al-lh-3 body :not(#accesslens-root, #accesslens-root *, #accesslens-skip) { line-height: 2 !important; }

/* Text align */
html.al-align-left body :not(#accesslens-root, #accesslens-root *, #accesslens-skip) { text-align: left !important; }
html.al-align-center body :not(#accesslens-root, #accesslens-root *, #accesslens-skip) { text-align: center !important; }
html.al-align-right body :not(#accesslens-root, #accesslens-root *, #accesslens-skip) { text-align: right !important; }
html.al-align-justify body :not(#accesslens-root, #accesslens-root *, #accesslens-skip) { text-align: justify !important; }

/* Dyslexia-friendly fonts. Icon fonts (Font Awesome, Dashicons, Elementor eicons, ...) and code are left alone. */
html.al-font-dyslexic body :not(#accesslens-root, #accesslens-root *, #accesslens-skip, i, code, pre, kbd, samp, .dashicons, .material-icons, [class*="icon"], [class*="fa-"], [class^="fa"], [data-icon]) {
	font-family: "AccessLens OpenDyslexic", Verdana, sans-serif !important;
}
html.al-font-atkinson body :not(#accesslens-root, #accesslens-root *, #accesslens-skip, i, code, pre, kbd, samp, .dashicons, .material-icons, [class*="icon"], [class*="fa-"], [class^="fa"], [data-icon]) {
	font-family: "AccessLens Atkinson", Verdana, sans-serif !important;
}

/* Big cursors (SVG data URIs, 48px; hotspot at the arrow tip) */
html.al-cursor-black,
html.al-cursor-black * {
	cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l15 9-7 1.6L8.6 20z' fill='%23000' stroke='%23fff' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E") 8 4, auto !important;
}
html.al-cursor-white,
html.al-cursor-white * {
	cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l15 9-7 1.6L8.6 20z' fill='%23fff' stroke='%23000' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E") 8 4, auto !important;
}

/* Hide images (img, picture, svg, role=img, background images). Widget icons are excluded. */
html.al-hide-img body :is(img, picture, svg, canvas.al-gif, [role="img"]):not(#accesslens-root *) { visibility: hidden !important; }
html.al-hide-img body :not(#accesslens-root, #accesslens-root *, #accesslens-skip) { background-image: none !important; }

/* Pause animations: end all CSS animations/transitions instantly; hide marquee/blink (flashing content). */
html.al-pause body :not(#accesslens-root, #accesslens-root *),
html.al-pause body :not(#accesslens-root, #accesslens-root *)::before,
html.al-pause body :not(#accesslens-root, #accesslens-root *)::after {
	animation-duration: 0.001ms !important;
	animation-delay: 0s !important;
	animation-iteration-count: 1 !important;
	transition-duration: 0.001ms !important;
	transition-delay: 0s !important;
	scroll-behavior: auto !important;
}
html.al-pause { scroll-behavior: auto !important; }
html.al-pause body :is(marquee, blink) { display: none !important; }

/* ------------------------------------------------------------------ */
/* Skip link (lives outside the widget root so it is first in tab order) */
/* ------------------------------------------------------------------ */
#accesslens-skip {
	position: absolute !important;
	top: 8px !important;
	left: 8px !important;
	z-index: 2147483647 !important;
	padding: 12px 18px !important;
	background: var(--al-primary, #4b15b5) !important;
	color: var(--al-on-primary, #fff) !important;
	font: 700 16px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
	border-radius: 8px !important;
	text-decoration: underline !important;
	transform: translateY(-200%);
	filter: none !important;
}
#accesslens-skip:focus { transform: none; outline: 3px solid #fff !important; box-shadow: 0 0 0 6px #111 !important; }
[dir="rtl"] #accesslens-skip { left: auto !important; right: 8px !important; }

/* ------------------------------------------------------------------ */
/* 2. WIDGET UI                                                         */
/* ------------------------------------------------------------------ */
#accesslens-root {
	all: initial;
	--al-primary: #4b15b5;
	--al-on-primary: #fff;
	--al-bg: #f3f2f9;
	--al-surface: #fff;
	--al-text: #1c1a27;
	--al-muted: #4b4760;
	--al-border: #8a84a3; /* 3.5:1 on white: WCAG 1.4.11 non-text contrast */
	--al-line: #dcd8ea;   /* decorative separators */
	--al-btn: 56px;
	--al-gap: 20px;
	display: block;
	font: 400 16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
	color: var(--al-text);
	direction: ltr;
}

/* Neutralise theme styles that target generic elements (button, h2, ul, select...). */
#accesslens-root *,
#accesslens-root *::before,
#accesslens-root *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	color: inherit;
	letter-spacing: normal;
	word-spacing: normal;
	line-height: inherit;
	text-transform: none;
	text-decoration: none;
	text-align: inherit;
	text-shadow: none;
	background: none;
	box-shadow: none;
	float: none;
	min-width: 0;
	max-width: none;
	min-height: 0;
	width: auto;
	height: auto;
	filter: none;
	opacity: 1;
	visibility: inherit;
	list-style: none;
	animation: none;
}
#accesslens-root [hidden] { display: none !important; }

/* Visible, two-tone focus ring: readable on light, dark and purple backgrounds. */
#accesslens-root :focus-visible {
	outline: 3px solid #fff;
	outline-offset: 0;
	box-shadow: 0 0 0 6px #111;
}
#accesslens-root .al-sr {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
}

/* Icons */
#accesslens-root .al-ic { display: inline-flex; width: 1.5em; height: 1.5em; flex: none; }
#accesslens-root .al-ic svg { display: block; width: 100%; height: 100%; visibility: visible; }
#accesslens-root .al-ic path {
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Floating trigger button */
#accesslens-root .al-btn {
	position: fixed;
	z-index: 2147483646;
	display: grid;
	place-items: center;
	width: var(--al-btn);
	height: var(--al-btn);
	border-radius: 50%;
	background: var(--al-primary);
	color: var(--al-on-primary);
	border: 2px solid var(--al-on-primary);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
	cursor: pointer;
	font-size: calc(var(--al-btn) * 0.4);
	transition: transform 0.15s ease;
}
#accesslens-root .al-btn:hover { transform: scale(1.06); }
#accesslens-root .al-btn .al-ic { width: 1.6em; height: 1.6em; }
#accesslens-root.al-size-small { --al-btn: 48px; }
#accesslens-root.al-size-large { --al-btn: 68px; }
#accesslens-root.al-pos-bottom-right .al-btn { right: var(--al-gap); bottom: var(--al-gap); }
#accesslens-root.al-pos-bottom-left .al-btn { left: var(--al-gap); bottom: var(--al-gap); }
#accesslens-root.al-pos-right .al-btn { right: var(--al-gap); top: 50%; margin-top: calc(var(--al-btn) / -2); }
#accesslens-root.al-pos-left .al-btn { left: var(--al-gap); top: 50%; margin-top: calc(var(--al-btn) / -2); }
#accesslens-root.al-pos-hide .al-btn { display: none; }

/* Device visibility (CSS-based so it works with full-page caching) */
@media (max-width: 767px) {
	#accesslens-root.al-no-mobile,
	#accesslens-skip.al-no-mobile { display: none !important; }
}
@media (min-width: 768px) {
	#accesslens-root.al-no-desktop,
	#accesslens-skip.al-no-desktop { display: none !important; }
}

/* Backdrop */
#accesslens-root .al-overlay {
	position: fixed;
	inset: 0;
	z-index: 2147483646;
	background: rgba(12, 8, 30, 0.45);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
#accesslens-root.al-open .al-overlay { opacity: 1; visibility: visible; transition: opacity 0.25s ease; }

/* Slide-in panel. Sizes are in em so "Oversized Widget" can scale everything by changing font-size. */
#accesslens-root .al-panel {
	position: fixed;
	top: 0;
	bottom: 0;
	right: 0;
	z-index: 2147483647;
	display: flex;
	flex-direction: column;
	width: min(27.5em, 100vw);
	background: var(--al-bg);
	color: var(--al-text);
	font-size: 16px;
	box-shadow: 0 0 30px rgba(0, 0, 0, 0.35);
	transform: translateX(105%);
	visibility: hidden;
	transition: transform 0.28s ease, visibility 0s linear 0.28s;
}
#accesslens-root.al-side-left .al-panel { right: auto; left: 0; transform: translateX(-105%); }
#accesslens-root.al-open .al-panel { transform: none; visibility: visible; transition: transform 0.28s ease; }
#accesslens-root.al-big .al-panel { font-size: 20px; width: min(34em, 100vw); }

#accesslens-root .al-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75em;
	padding: 0.85em 1em;
	background: var(--al-primary);
	color: var(--al-on-primary);
	flex: none;
}
#accesslens-root .al-title { font-size: 1.125em; font-weight: 700; }
#accesslens-root .al-close {
	display: grid;
	place-items: center;
	width: 2.75em;
	height: 2.75em;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.16);
	color: inherit;
	cursor: pointer;
	flex: none;
}
#accesslens-root .al-close:hover { background: rgba(255, 255, 255, 0.3); }

#accesslens-root .al-body {
	flex: 1;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 1em;
	display: flex;
	flex-direction: column;
	gap: 0.85em;
}
/* Sections keep their natural height; the body scrolls instead of squashing them. */
#accesslens-root .al-body > * { flex-shrink: 0; }

#accesslens-root .al-card {
	background: var(--al-surface);
	border: 1px solid var(--al-line);
	border-radius: 0.75em;
}
#accesslens-root .al-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75em;
	padding: 0.7em 0.9em;
	font-weight: 600;
}
#accesslens-root .al-row > span,
#accesslens-root .al-row > label > span { display: inline-flex; align-items: center; gap: 0.5em; }

#accesslens-root .al-select {
	appearance: auto;
	min-height: 2.75em;
	max-width: 60%;
	padding: 0.4em 0.6em;
	border: 2px solid var(--al-border);
	border-radius: 0.5em;
	background: #fff;
	color: var(--al-text);
	font-size: 0.95em;
	cursor: pointer;
}
#accesslens-root .al-select:hover { border-color: var(--al-primary); }

/* Collapsible sections */
#accesslens-root .al-acc {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	gap: 0.75em;
	padding: 0.85em 0.9em;
	font-weight: 700;
	text-align: start;
	cursor: pointer;
	border-radius: 0.75em;
}
#accesslens-root .al-acc .al-ic { transition: transform 0.2s ease; }
#accesslens-root .al-acc[aria-expanded="true"] .al-ic { transform: rotate(180deg); }
#accesslens-root .al-acc-body { padding: 0 0.9em 0.9em; }

/* Profiles */
#accesslens-root .al-profiles { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5em; }
#accesslens-root .al-prof {
	display: flex;
	align-items: center;
	gap: 0.5em;
	min-height: 2.75em;
	padding: 0.5em 0.65em;
	border: 2px solid var(--al-border);
	border-radius: 0.6em;
	background: #fff;
	font-size: 0.9em;
	font-weight: 600;
	text-align: start;
	cursor: pointer;
}
#accesslens-root .al-prof::before {
	content: "";
	flex: none;
	width: 1em;
	height: 1em;
	border: 2px solid currentColor;
	border-radius: 50%;
}
#accesslens-root .al-prof:hover { border-color: var(--al-primary); }
#accesslens-root .al-prof[aria-pressed="true"] { background: var(--al-primary); border-color: var(--al-primary); color: var(--al-on-primary); }
#accesslens-root .al-prof[aria-pressed="true"]::before { background: currentColor; box-shadow: inset 0 0 0 2px var(--al-primary); }

/* Switch */
#accesslens-root .al-switch {
	position: relative;
	flex: none;
	width: 3.1em;
	height: 1.75em;
	border-radius: 1em;
	background: #767189;
	cursor: pointer;
	transition: background 0.2s ease;
}
#accesslens-root .al-switch::after {
	content: "";
	position: absolute;
	top: 0.2em;
	left: 0.2em;
	width: 1.35em;
	height: 1.35em;
	border-radius: 50%;
	background: #fff;
	transition: transform 0.2s ease;
}
#accesslens-root .al-switch[aria-checked="true"] { background: var(--al-primary); }
#accesslens-root .al-switch[aria-checked="true"]::after { transform: translateX(1.35em); }
#accesslens-root [dir="rtl"] .al-switch[aria-checked="true"]::after { transform: translateX(-1.35em); }
#accesslens-root [dir="rtl"] .al-switch::after { left: auto; right: 0.2em; }

/* Feature tiles */
#accesslens-root .al-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6em; }
@media (max-width: 480px) {
	#accesslens-root .al-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
#accesslens-root .al-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.4em;
	min-height: 7em;
	padding: 0.85em 0.4em 0.7em;
	border: 2px solid var(--al-border);
	border-radius: 0.75em;
	background: var(--al-surface);
	color: var(--al-text);
	font-size: 0.875em;
	font-weight: 600;
	line-height: 1.25;
	text-align: center;
	cursor: pointer;
	overflow-wrap: anywhere;
}
#accesslens-root .al-tile .al-ic { width: 1.9em; height: 1.9em; }
#accesslens-root .al-tile:hover { border-color: var(--al-primary); }
#accesslens-root .al-tile[aria-pressed="true"] { background: var(--al-primary); border-color: var(--al-primary); color: var(--al-on-primary); }
#accesslens-root .al-tile[aria-disabled="true"] { opacity: 0.6; cursor: not-allowed; }
#accesslens-root .al-ts { font-size: 0.85em; font-weight: 500; min-height: 1.2em; }
#accesslens-root .al-check {
	position: absolute;
	top: 0.35em;
	inset-inline-end: 0.35em;
	display: none;
	width: 1.3em;
	height: 1.3em;
	border-radius: 50%;
	background: var(--al-on-primary);
	color: var(--al-primary);
}
#accesslens-root .al-check .al-ic { width: 100%; height: 100%; }
#accesslens-root .al-check path { stroke-width: 3; }
#accesslens-root .al-tile[aria-pressed="true"] .al-check { display: block; }
#accesslens-root .al-dots { display: flex; gap: 0.25em; }
#accesslens-root .al-dots i { display: block; width: 0.9em; height: 0.25em; border-radius: 1em; background: currentColor; opacity: 0.25; }
#accesslens-root .al-dots i.on { opacity: 1; }

/* Primary action button (Reset) */
#accesslens-root .al-reset {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	width: 100%;
	min-height: 3em;
	padding: 0.7em 1em;
	border-radius: 0.75em;
	background: var(--al-primary);
	color: var(--al-on-primary);
	font-weight: 700;
	cursor: pointer;
}
#accesslens-root .al-reset:hover { filter: brightness(1.15); }

/* Move/Hide radios */
#accesslens-root .al-radios { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4em; }
#accesslens-root .al-radio {
	display: flex;
	align-items: center;
	gap: 0.5em;
	min-height: 2.75em;
	padding: 0.4em 0.6em;
	border: 2px solid var(--al-border);
	border-radius: 0.6em;
	background: #fff;
	font-size: 0.9em;
	font-weight: 600;
	cursor: pointer;
}
#accesslens-root .al-radio input {
	appearance: auto;
	width: 1.15em;
	height: 1.15em;
	accent-color: var(--al-primary);
	cursor: pointer;
}
#accesslens-root .al-radio:has(input:checked) { border-color: var(--al-primary); }
#accesslens-root .al-note { margin-top: 0.6em; font-size: 0.85em; color: var(--al-muted); }

#accesslens-root .al-foot {
	flex: none;
	padding: 0.7em 1em;
	border-top: 1px solid var(--al-line);
	background: var(--al-surface);
	font-size: 0.85em;
	text-align: center;
	color: var(--al-muted);
}
#accesslens-root .al-foot a { color: var(--al-primary); text-decoration: underline; font-weight: 600; }

/* Page structure modal */
#accesslens-root .al-modal {
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 2147483647;
	display: flex;
	flex-direction: column;
	width: min(40em, 94vw);
	max-height: 85vh;
	transform: translate(-50%, -50%);
	background: var(--al-surface);
	color: var(--al-text);
	border-radius: 0.9em;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
	font-size: 16px;
	overflow: hidden;
}
#accesslens-root.al-big .al-modal { font-size: 20px; }
#accesslens-root .al-modal .al-body { gap: 1em; }
#accesslens-root .al-modal h3 { font-weight: 700; font-size: 1.05em; margin-bottom: 0.4em; }
#accesslens-root .al-list { display: flex; flex-direction: column; gap: 0.25em; }
#accesslens-root .al-item {
	display: block;
	width: 100%;
	min-height: 2.5em;
	padding: 0.45em 0.7em;
	border: 1px solid var(--al-border);
	border-radius: 0.5em;
	text-align: start;
	cursor: pointer;
	overflow-wrap: anywhere;
}
#accesslens-root .al-item:hover { border-color: var(--al-primary); background: var(--al-bg); }
#accesslens-root .al-item b { color: var(--al-primary); margin-inline-end: 0.4em; }

/* Tooltip, dictionary card, toasts, reading mask */
#accesslens-root .al-tip {
	position: fixed;
	z-index: 2147483647;
	max-width: min(320px, 90vw);
	padding: 6px 10px;
	border-radius: 6px;
	background: #111;
	color: #fff;
	font-size: 14px;
	line-height: 1.35;
	pointer-events: none;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}
#accesslens-root .al-dict,
#accesslens-root .al-toast {
	position: fixed;
	bottom: 20px;
	left: 50%;
	z-index: 2147483647;
	width: min(420px, 92vw);
	transform: translateX(-50%);
	padding: 14px 16px;
	border: 2px solid var(--al-primary);
	border-radius: 12px;
	background: #fff;
	color: var(--al-text);
	font-size: 15px;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}
#accesslens-root .al-toast { bottom: auto; top: 20px; font-weight: 600; }
#accesslens-root .al-dict h2 { font-size: 18px; font-weight: 700; margin-inline-end: 44px; }
#accesslens-root .al-dict p { margin-top: 6px; }
#accesslens-root .al-dict em { font-style: italic; color: var(--al-muted); }
#accesslens-root .al-dict small { display: block; margin-top: 8px; font-size: 12px; color: var(--al-muted); }
#accesslens-root .al-dict .al-close {
	position: absolute;
	top: 8px;
	inset-inline-end: 8px;
	font-size: 14px;
	background: var(--al-bg);
	color: var(--al-text);
}
#accesslens-root .al-mask {
	position: fixed;
	left: 0;
	right: 0;
	z-index: 2147483645;
	background: rgba(0, 0, 0, 0.55);
	pointer-events: none;
}
#accesslens-root .al-mask-t { top: 0; height: 0; }
#accesslens-root .al-mask-b { bottom: 0; top: 100vh; }
#accesslens-root .al-mask-b::before {
	content: "";
	position: absolute;
	top: -4px;
	left: 0;
	right: 0;
	height: 4px;
	background: var(--al-primary);
}

/* RTL layout for the panel (Arabic UI or RTL sites) */
#accesslens-root [dir="rtl"] { direction: rtl; text-align: right; }

/* Respect reduced-motion for the widget's own transitions */
@media (prefers-reduced-motion: reduce) {
	#accesslens-root *,
	#accesslens-root .al-panel,
	#accesslens-root .al-overlay { transition: none !important; }
}

/* Windows High Contrast / forced colors: make borders and state visible */
@media (forced-colors: active) {
	#accesslens-root .al-btn,
	#accesslens-root .al-tile,
	#accesslens-root .al-prof,
	#accesslens-root .al-switch,
	#accesslens-root .al-reset { border: 2px solid ButtonText; }
	#accesslens-root .al-tile[aria-pressed="true"],
	#accesslens-root .al-prof[aria-pressed="true"],
	#accesslens-root .al-switch[aria-checked="true"] { outline: 3px solid Highlight; }
	#accesslens-root :focus-visible { outline: 3px solid Highlight; }
}

/* Print: never print the widget */
@media print {
	#accesslens-root,
	#accesslens-skip { display: none !important; }
}

/* Secondary full-width button (e.g. "See all voice commands") */
#accesslens-root .al-link-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	width: 100%;
	min-height: 2.75em;
	padding: 0.6em 1em;
	border: 2px solid var(--al-primary);
	border-radius: 0.75em;
	background: var(--al-surface);
	color: var(--al-primary);
	font-weight: 700;
	cursor: pointer;
}
#accesslens-root .al-link-btn:hover { background: var(--al-bg); }

/* Voice command list */
#accesslens-root .al-cmds { display: grid; grid-template-columns: minmax(9em, auto) 1fr; gap: 0.5em 1em; align-items: baseline; }
#accesslens-root .al-cmds dt { font-weight: 700; color: var(--al-primary); white-space: nowrap; }
#accesslens-root .al-cmds dd { color: var(--al-text); }
@media (max-width: 480px) {
	#accesslens-root .al-cmds { grid-template-columns: 1fr; gap: 0.15em; }
	#accesslens-root .al-cmds dd { margin-bottom: 0.5em; }
}

/* Brief highlight on the element a voice command clicked */
.al-vflash { outline: 3px solid var(--al-primary, #4b15b5) !important; outline-offset: 3px !important; }