/*
 * SG Accessibility toolbar + the page modes it switches on.
 *
 * Every toolbar rule is scoped under #sg-a11y (an id), so theme rules such
 * as Woodmart's [type="button"] (0,1,0) can never tie with them and win on
 * load order. That exact tie broke sg-dedications buttons on prod (v1.7.2).
 *
 * Page modes are classes on <html>, set before first paint by the inline
 * restore script. The toolbar is excluded from them so it stays usable.
 */

/* ─── Page modes ──────────────────────────────────────────────────────── */

/* Text size, zoom method (default): works on px-based themes too. The
   toolbar counter-zooms so it does not grow off a phone screen. */
html.sg-a11y-m-zoom.sg-a11y-fs body { zoom: var(--sg-a11y-zoom, 1); }
html.sg-a11y-m-zoom.sg-a11y-fs body > #sg-a11y { zoom: var(--sg-a11y-unzoom, 1); }

/* Text size, rem method: for themes sized in rem only. */
html.sg-a11y-m-rem.sg-a11y-fs { font-size: calc(var(--sg-a11y-zoom, 1) * 100%) !important; }

/* High contrast, dark. Exclusions sit inside :where() on purpose: every
   :not(#id) would add ID-level specificity and let this catch-all rule beat
   the more specific link rule below (both are !important). */
html.sg-a11y-contrast-dark body,
html.sg-a11y-contrast-dark body *:where(:not(#sg-a11y, #sg-a11y *, svg *, img, video, picture, canvas)) {
	background-color: #000 !important;
	color: #fff !important;
	border-color: #fff !important;
	box-shadow: none !important;
	text-shadow: none !important;
}

html.sg-a11y-contrast-dark body a:where(:not(#sg-a11y *)),
html.sg-a11y-contrast-dark body a:where(:not(#sg-a11y *)) * { color: #ffeb3b !important; }

html.sg-a11y-contrast-dark body button:not(#sg-a11y *),
html.sg-a11y-contrast-dark body input:not(#sg-a11y *),
html.sg-a11y-contrast-dark body select,
html.sg-a11y-contrast-dark body textarea { border: 2px solid #fff !important; }

/* High contrast, light. */
html.sg-a11y-contrast-light body,
html.sg-a11y-contrast-light body *:where(:not(#sg-a11y, #sg-a11y *, svg *, img, video, picture, canvas)) {
	background-color: #fff !important;
	color: #000 !important;
	border-color: #000 !important;
	box-shadow: none !important;
	text-shadow: none !important;
}

html.sg-a11y-contrast-light body a:where(:not(#sg-a11y *)),
html.sg-a11y-contrast-light body a:where(:not(#sg-a11y *)) * { color: #0000c8 !important; }

/* Grayscale on the ROOT only: a filter on any other element would become
   the containing block of position:fixed descendants and break sticky
   headers. The root element is the one exception in the spec. */
html.sg-a11y-mono { filter: grayscale(1); }

/* Underline links. */
html.sg-a11y-underline body a:not(#sg-a11y *) {
	text-decoration: underline !important;
	text-decoration-thickness: 2px !important;
	text-underline-offset: 3px !important;
}

/* Keyboard focus highlight: every focus, not only :focus-visible. */
html.sg-a11y-focus *:focus {
	outline: 3px solid #ffbf00 !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 6px #000 !important;
}

/* Stop animations. animation:none leaves scroll-driven reveals in their
   natural, visible state; widget.js also pauses playing media. */
html.sg-a11y-still *,
html.sg-a11y-still *::before,
html.sg-a11y-still *::after {
	animation: none !important;
	transition: none !important;
	scroll-behavior: auto !important;
}

/* Readable font (Arial covers Hebrew). Icon fonts are left alone. */
html.sg-a11y-readable body *:not(#sg-a11y *):not(i):not([class*="icon"]):not([class*="fa-"]):not(svg *) {
	font-family: Arial, "Helvetica Neue", "Segoe UI", sans-serif !important;
}

/* Text spacing: the WCAG 1.4.12 values. */
html.sg-a11y-spacing body *:not(#sg-a11y):not(#sg-a11y *) {
	line-height: 1.8 !important;
	letter-spacing: 0.12em !important;
	word-spacing: 0.16em !important;
}

html.sg-a11y-spacing body p:not(#sg-a11y *) { margin-block-end: 2em !important; }

/* ─── Skip link ───────────────────────────────────────────────────────── */

.sg-a11y-skip {
	position: fixed;
	z-index: 2147483647;
	inset-block-start: 8px;
	inset-inline-start: 8px;
	padding: 12px 18px;
	border-radius: 8px;
	background: #000;
	color: #fff !important;
	font: 700 16px/1.2 Arial, sans-serif;
	text-decoration: none;
}

/* Visually hidden until focused. Not a translate off-screen: themes that make
   <body> a containing block for position:fixed (transform, filter, etc.)
   would leave a translated link half visible (seen in the SORKISTx theme). */
.sg-a11y-skip:not(:focus) {
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.sg-a11y-skip:focus {
	outline: 3px solid #ffbf00;
	outline-offset: 2px;
}

/* ─── Toolbar ─────────────────────────────────────────────────────────── */

/*
 * 1.1 look: the sorkx-glass language. A glass panel (backdrop-filter, opaque
 * fallback), soft radius, Heebo/Rubik, icon + label tiles.
 *
 * Colour follows the site's design tokens (--sg-primary, --sg-secondary,
 * --sg-text ...) with quiet defaults. Brand colours are re-derived in OKLCH
 * with their lightness capped (relative colour syntax), so white on a fill
 * and text on the glass stay WCAG AA for ANY palette; browsers without
 * relative colours get the fixed safe palette. Active tiles show a check
 * mark, so state never depends on colour alone.
 */

#sg-a11y {
	/* Geometry (1.2). The plugin prints the real values inline from the settings. */
	--sg-a11y-offset: 16px;
	--sga-inline: var(--sg-a11y-offset); /* distance from the side edge; 0 for the edge tab */
	--sga-size: 56px;
	--sga-icon: 32px;
	--sga-y: 50%;

	--sga-seed-brand: var(--sga-custom, var(--sg-primary, #1f5f7a));
	--sga-seed-text: var(--sg-text, #1b2433);
	--sga-seed-muted: var(--sg-text-muted, #4b5565);

	--sga-brand: var(--sga-custom, #1f5f7a);
	--sga-brand-text: var(--sga-custom, #1f5f7a);
	--sga-text: #1b2433;
	--sga-muted: #4b5565;

	--sga-glass: rgb(255 255 255 / 0.9);
	--sga-glass-solid: #fff;
	--sga-edge: rgb(255 255 255 / 0.75);
	--sga-hairline: rgb(27 36 51 / 0.1);
	--sga-tile: rgb(255 255 255 / 0.66);
	--sga-font: var(--sg-font-body, "Heebo", system-ui, -apple-system, "Segoe UI", Arial, sans-serif);
	--sga-font-heading: var(--sg-font-heading, "Rubik", var(--sga-font));
	--sga-ease: cubic-bezier(0.2, 0.8, 0.2, 1);

	position: fixed;
	z-index: 2147483001;
	inset-block-end: var(--sg-a11y-offset);
	inset-inline-start: var(--sga-inline);
	/* Collision avoidance (1.3): widget.js sets --sga-avoid-y. A translate, so
	   moving out of the way is never a layout shift. */
	translate: 0 var(--sga-avoid-y, 0px);
	transition: translate 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
	font: 15px/1.45 var(--sga-font);
	color: var(--sga-text);
	text-align: start;
	-webkit-font-smoothing: antialiased;
}

@supports (color: oklch(from red l c h)) {
	#sg-a11y {
		--sga-brand: oklch(from var(--sga-seed-brand) min(l, 0.5) c h);
		/* Brand as TEXT on the translucent, brand-tinted glass needs more. */
		--sga-brand-text: oklch(from var(--sga-seed-brand) min(l, 0.42) c h);
		--sga-text: oklch(from var(--sga-seed-text) min(l, 0.32) c h);
		--sga-muted: oklch(from var(--sga-seed-muted) min(l, 0.46) c h);
	}
}

/* Position (1.2): edge (start = right in Hebrew) + vertical. Logical properties
   only, so the same classes are correct in RTL and LTR. */
#sg-a11y.sg-a11y--edge-end { inset-inline-start: auto; inset-inline-end: var(--sga-inline); }
#sg-a11y.sg-a11y--v-top { inset-block-end: auto; inset-block-start: var(--sg-a11y-offset); }

#sg-a11y.sg-a11y--v-middle,
#sg-a11y.sg-a11y--v-percent { inset-block-end: auto; inset-block-start: var(--sga-y); translate: 0 calc(-50% + var(--sga-avoid-y, 0px)); }

/* widget.js measures with transitions off, so it reads the real position. */
#sg-a11y.sg-a11y--measuring { transition: none; }

#sg-a11y.sg-a11y--shape-edge { --sga-inline: 0px; }

#sg-a11y *,
#sg-a11y *::before,
#sg-a11y *::after { box-sizing: border-box; }

#sg-a11y button,
#sg-a11y a,
#sg-a11y h2 {
	font: inherit;
	letter-spacing: normal;
	text-transform: none;
	text-shadow: none;
}

#sg-a11y svg { flex: none; }

/* ─── Floating button ─────────────────────────────────────────────────── */

#sg-a11y .sg-a11y__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	inline-size: var(--sga-size);
	block-size: var(--sga-size);
	min-inline-size: 44px; /* a 44px target whatever the settings say */
	min-block-size: 44px;
	margin: 0;
	padding: 0;
	border: 3px solid #fff;
	border-radius: 50%;
	/* Custom colours (1.2) when set, else the site palette. */
	background: var(--sga-btn-bg, var(--sga-brand));
	color: var(--sga-btn-icon, #fff);
	box-shadow: 0 12px 28px -10px rgb(16 24 40 / 0.55), 0 0 0 1px rgb(16 24 40 / 0.08);
	cursor: pointer;
	transition: transform 0.2s var(--sga-ease), box-shadow 0.2s var(--sga-ease);
}

#sg-a11y .sg-a11y__toggle:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 16px 32px -12px rgb(16 24 40 / 0.6), 0 0 0 1px rgb(16 24 40 / 0.08); }
#sg-a11y .sg-a11y__toggle[aria-expanded="true"] { transform: none; }
#sg-a11y .sg-a11y__toggle:is(:hover, :focus-visible) { background: var(--sga-btn-hover, var(--sga-btn-bg, var(--sga-brand))); }
#sg-a11y .sg-a11y__toggle svg { inline-size: var(--sga-icon); block-size: var(--sga-icon); }

/* Shapes (1.2). */
#sg-a11y.sg-a11y--shape-rounded .sg-a11y__toggle { border-radius: calc(var(--sga-size) * 0.3); }

/* Pill: the icon plus a visible "Accessibility" label. */
#sg-a11y.sg-a11y--shape-pill .sg-a11y__toggle {
	inline-size: auto;
	padding-inline: calc(var(--sga-size) * 0.22) calc(var(--sga-size) * 0.36);
	border-radius: 999px;
}

#sg-a11y .sg-a11y__toggle-label {
	font-size: max(14px, calc(var(--sga-size) * 0.28));
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
}

/* Edge tab: flush with the screen edge, taller than wide, rounded on the
   inner side only, no ring on the outer side. */
#sg-a11y.sg-a11y--shape-edge .sg-a11y__toggle {
	block-size: calc(var(--sga-size) * 1.25);
	border-radius: calc(var(--sga-size) * 0.3);
	border-inline-start-width: 0;
	border-start-start-radius: 0;
	border-end-start-radius: 0;
}

#sg-a11y.sg-a11y--shape-edge.sg-a11y--edge-end .sg-a11y__toggle {
	border-inline-start-width: 3px;
	border-inline-end-width: 0;
	border-start-start-radius: calc(var(--sga-size) * 0.3);
	border-end-start-radius: calc(var(--sga-size) * 0.3);
	border-start-end-radius: 0;
	border-end-end-radius: 0;
}

/* A tab does not lift away from its edge. */
#sg-a11y.sg-a11y--shape-edge .sg-a11y__toggle:hover { transform: none; }

/* ─── Panel ───────────────────────────────────────────────────────────── */

#sg-a11y .sg-a11y__panel {
	position: absolute;
	inset-block-end: calc(100% + 12px);
	inset-inline-start: 0;
	translate: 0 var(--sga-shift, 0px); /* widget.js nudges the panel inside the viewport */
	inline-size: min(400px, calc(100vw - 2 * var(--sg-a11y-offset)));
	max-block-size: calc(100vh - 100px);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 18px;
	border: 1px solid var(--sga-edge);
	border-radius: 24px;
	background: var(--sga-glass-solid);
	color: var(--sga-text);
	box-shadow: 0 28px 64px -20px rgb(16 24 40 / 0.45), 0 2px 8px rgb(16 24 40 / 0.06), inset 0 0 0 1px var(--sga-hairline);
	animation: sga-pop 0.32s var(--sga-ease) both;
	transform-origin: bottom left;
}

#sg-a11y[dir="rtl"] .sg-a11y__panel { transform-origin: bottom right; }

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
	#sg-a11y .sg-a11y__panel {
		background:
			linear-gradient(160deg, color-mix(in srgb, var(--sga-brand) 7%, transparent), transparent 55%),
			var(--sga-glass);
		-webkit-backdrop-filter: blur(22px) saturate(160%);
		backdrop-filter: blur(22px) saturate(160%);
	}
}

@media (prefers-reduced-transparency: reduce) {
	#sg-a11y .sg-a11y__panel {
		background: var(--sga-glass-solid);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}

#sg-a11y .sg-a11y__panel[hidden] { display: none; }

/* Where the panel opens (1.2): up from a low button, down from a high one,
   beside a button in the middle. */
#sg-a11y.sg-a11y--edge-end .sg-a11y__panel { inset-inline-start: auto; inset-inline-end: 0; }

#sg-a11y.sg-a11y--open-down .sg-a11y__panel {
	inset-block-end: auto;
	inset-block-start: calc(100% + 12px);
	transform-origin: top left;
}

#sg-a11y[dir="rtl"].sg-a11y--open-down .sg-a11y__panel { transform-origin: top right; }

#sg-a11y.sg-a11y--open-side .sg-a11y__panel {
	inset-block-end: auto;
	inset-block-start: 50%;
	translate: 0 calc(-50% + var(--sga-shift, 0px));
	inset-inline-start: calc(100% + 12px);
}

#sg-a11y.sg-a11y--open-side.sg-a11y--edge-end .sg-a11y__panel { inset-inline-start: auto; inset-inline-end: calc(100% + 12px); }

/* The edge tab sits on the edge: give its panel a margin from it. */
#sg-a11y.sg-a11y--shape-edge:not(.sg-a11y--open-side) .sg-a11y__panel { inset-inline-start: 8px; }
#sg-a11y.sg-a11y--shape-edge.sg-a11y--edge-end:not(.sg-a11y--open-side) .sg-a11y__panel { inset-inline-start: auto; inset-inline-end: 8px; }

/* Phones: no room beside the button, so a side panel lies over it instead. */
@media (max-width: 599px) {
	#sg-a11y.sg-a11y--open-side .sg-a11y__panel { inset-inline-start: 0; }
	#sg-a11y.sg-a11y--open-side.sg-a11y--edge-end .sg-a11y__panel { inset-inline-start: auto; inset-inline-end: 0; }
	#sg-a11y.sg-a11y--open-side.sg-a11y--shape-edge .sg-a11y__panel { inset-inline-start: 8px; }
	#sg-a11y.sg-a11y--open-side.sg-a11y--shape-edge.sg-a11y--edge-end .sg-a11y__panel { inset-inline-start: auto; inset-inline-end: 8px; }
}

#sg-a11y .sg-a11y__head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-block-end: 14px;
}

#sg-a11y .sg-a11y__badge {
	display: inline-grid;
	flex: none;
	place-items: center;
	inline-size: 38px;
	block-size: 38px;
	border-radius: 12px;
	background: var(--sga-brand);
	color: #fff;
}

#sg-a11y .sg-a11y__badge svg { inline-size: 24px; block-size: 24px; }

#sg-a11y .sg-a11y__title {
	flex: 1;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--sga-text);
	font-family: var(--sga-font-heading);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.25;
}

#sg-a11y .sg-a11y__close {
	display: inline-grid;
	flex: none;
	place-items: center;
	inline-size: 44px;
	block-size: 44px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--sga-hairline);
	border-radius: 50%;
	background: rgb(255 255 255 / 0.7);
	color: var(--sga-text);
	cursor: pointer;
	box-shadow: none;
}

#sg-a11y .sg-a11y__close svg { inline-size: 20px; block-size: 20px; }

/* Text size: a segmented control. */
#sg-a11y .sg-a11y__size {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-block-end: 12px;
	padding: 6px 6px 6px 14px;
	border: 1px solid var(--sga-hairline);
	border-radius: 16px;
	background: var(--sga-tile);
}

#sg-a11y[dir="rtl"] .sg-a11y__size { padding: 6px 14px 6px 6px; }

#sg-a11y .sg-a11y__size-label { flex: 1; color: var(--sga-text); font-weight: 700; }

#sg-a11y .sg-a11y__step {
	display: inline-grid;
	place-items: center;
	min-inline-size: 44px;
	block-size: 44px;
	margin: 0;
	padding: 0 10px;
	border: 0;
	border-radius: 12px;
	background: var(--sga-brand);
	color: #fff;
	font-weight: 700;
	cursor: pointer;
	box-shadow: none;
}

/* Disabled stays legible (it is still information: "this is the limit"). */
#sg-a11y .sg-a11y__step[disabled] {
	background: rgb(27 36 51 / 0.08);
	color: var(--sga-muted);
	cursor: not-allowed;
}

#sg-a11y .sg-a11y__size-value {
	min-inline-size: 52px;
	color: var(--sga-text);
	font-weight: 700;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

/* Tools: icon + label tiles, two columns (no orphan holes for the default
   eight tools; labels wrap far less than in narrow vertical tiles). */
#sg-a11y .sg-a11y__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

#sg-a11y .sg-a11y__tool {
	display: flex;
	align-items: center;
	gap: 10px;
	min-block-size: 58px;
	margin: 0;
	padding: 8px 10px;
	border: 1px solid var(--sga-hairline);
	border-radius: 16px;
	background: var(--sga-tile);
	color: var(--sga-text);
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.3;
	text-align: start;
	cursor: pointer;
	box-shadow: none;
	transition: transform 0.18s var(--sga-ease), border-color 0.18s ease;
}

#sg-a11y .sg-a11y__tool:hover { border-color: var(--sga-brand); transform: translateY(-1px); }

#sg-a11y .sg-a11y__tool-icon {
	display: inline-grid;
	flex: none;
	place-items: center;
	inline-size: 38px;
	block-size: 38px;
	border-radius: 12px;
	background: color-mix(in srgb, var(--sga-brand) 11%, #fff);
	color: var(--sga-brand);
}

#sg-a11y .sg-a11y__tool-icon svg { inline-size: 21px; block-size: 21px; }

#sg-a11y .sg-a11y__tool-label { flex: 1; min-inline-size: 0; }

#sg-a11y .sg-a11y__tool-check {
	display: none;
	flex: none;
	place-items: center;
	inline-size: 20px;
	block-size: 20px;
	border-radius: 50%;
	background: #fff;
	color: var(--sga-brand);
}

#sg-a11y .sg-a11y__tool-check svg { inline-size: 13px; block-size: 13px; }

/* Active: filled with the brand, white label, check mark. */
#sg-a11y .sg-a11y__tool[aria-pressed="true"] {
	border-color: var(--sga-brand);
	background: var(--sga-brand);
	color: #fff;
}

#sg-a11y .sg-a11y__tool[aria-pressed="true"] .sg-a11y__tool-icon {
	background: rgb(255 255 255 / 0.18);
	color: #fff;
}

#sg-a11y .sg-a11y__tool[aria-pressed="true"] .sg-a11y__tool-check { display: inline-grid; }

/* Footer: reset + statement. */
#sg-a11y .sg-a11y__foot {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	margin-block-start: 12px;
}

#sg-a11y .sg-a11y__reset,
#sg-a11y .sg-a11y__statement {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-block-size: 44px;
	margin: 0;
	padding: 0 12px;
	border: 1px solid var(--sga-hairline);
	border-radius: 14px;
	background: rgb(255 255 255 / 0.7);
	color: var(--sga-text);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	box-shadow: none;
}

#sg-a11y .sg-a11y__statement { color: var(--sga-brand-text); }
#sg-a11y .sg-a11y__statement:only-child,
#sg-a11y .sg-a11y__reset:only-child { grid-column: 1 / -1; }
#sg-a11y .sg-a11y__reset svg,
#sg-a11y .sg-a11y__statement svg { inline-size: 18px; block-size: 18px; }
#sg-a11y .sg-a11y__statement:hover span { text-decoration: underline; text-underline-offset: 3px; }

/* 1.4: "report an accessibility problem", a text link under the footer row. */
#sg-a11y .sg-a11y__report {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-block-size: 44px;
	margin-block-start: 4px;
	padding: 0 12px;
	border-radius: 14px;
	color: var(--sga-brand-text);
	font-size: 14px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}
#sg-a11y .sg-a11y__report svg { inline-size: 18px; block-size: 18px; flex: none; }
#sg-a11y .sg-a11y__report:hover { text-decoration-thickness: 2px; }

#sg-a11y .sg-a11y__live {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

#sg-a11y button:focus-visible,
#sg-a11y a:focus-visible {
	outline: 3px solid var(--sga-ring, #ffbf00);
	outline-offset: 2px;
	box-shadow: 0 0 0 6px #111827;
}

/* Opening effects (1.3): scale and fade (default), slide in from the
   button's own edge, or none. Transform and opacity only. */
#sg-a11y { --sga-slide-from: -24px; }
#sg-a11y[dir="rtl"],
#sg-a11y[dir="ltr"].sg-a11y--edge-end { --sga-slide-from: 24px; }
#sg-a11y[dir="rtl"].sg-a11y--edge-end { --sga-slide-from: -24px; }

#sg-a11y.sg-a11y--fx-slide .sg-a11y__panel { animation-name: sga-slide; }
#sg-a11y.sg-a11y--fx-none .sg-a11y__panel { animation: none; }

@keyframes sga-slide {
	from { opacity: 0; transform: translateX(var(--sga-slide-from)); }
	to { opacity: 1; transform: none; }
}

/* First-visit nudge (1.3): twice, after a short pause; once per visitor. */
#sg-a11y.sg-a11y--nudging .sg-a11y__toggle { animation: sga-nudge 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.6s 2; }
#sg-a11y.sg-a11y--nudging.sg-a11y--shape-edge .sg-a11y__toggle { animation-name: sga-nudge-tab; }

@keyframes sga-nudge {
	0%, 100% { transform: none; }
	20% { transform: rotate(-12deg) scale(1.06); }
	40% { transform: rotate(10deg) scale(1.06); }
	60% { transform: rotate(-6deg); }
	80% { transform: rotate(4deg); }
}

@keyframes sga-nudge-tab {
	0%, 100% { transform: none; }
	35% { transform: translateX(calc(var(--sga-slide-from) * -0.3)); }
	70% { transform: translateX(calc(var(--sga-slide-from) * -0.1)); }
}

@keyframes sga-pop {
	from { opacity: 0; transform: translateY(10px) scale(0.97); }
	to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	#sg-a11y,
	#sg-a11y .sg-a11y__toggle { animation: none !important; transition: none; }
	#sg-a11y .sg-a11y__panel { animation: none !important; } /* beats the --fx-* effect rules */
	#sg-a11y .sg-a11y__toggle,
	#sg-a11y .sg-a11y__tool { transition: none; }
	#sg-a11y .sg-a11y__toggle:hover,
	#sg-a11y .sg-a11y__tool:hover { transform: none; }
}


@media print {
	#sg-a11y,
	.sg-a11y-skip { display: none !important; }
}