/**
 * Public accessibility drawer. All visual preference overrides are opt-in and
 * scoped to an HTML class added by accessibility-toolbar.js.
 */

.ob-accessibility {
	--ob-accessibility-panel: #ffffff;
	--ob-accessibility-ink: var(--global-palette3, #32425a);
	--ob-accessibility-muted: var(--global-palette4, #5f6875);
	--ob-accessibility-line: #dfe6eb;
	--ob-accessibility-primary: var(--global-palette1, #5b9be3);
	--ob-accessibility-primary-contrast: #ffffff;
	--ob-accessibility-radius: 16px;
}

.ob-accessibility__overlay {
	position: fixed;
	z-index: 99990;
	inset: 0;
	background: rgba(26, 42, 57, 0.42);
	opacity: 0;
	pointer-events: none;
	transition: opacity 220ms ease;
}

.ob-accessibility__drawer {
	position: fixed;
	z-index: 99991;
	top: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	width: min(420px, calc(100vw - 2rem));
	height: 100dvh;
	max-height: 100vh;
	background: var(--ob-accessibility-panel);
	box-shadow: -20px 0 48px rgba(28, 47, 61, 0.18);
	color: var(--ob-accessibility-ink);
	font-size: 0.875rem;
	transform: translateX(105%);
	transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 260ms;
	visibility: hidden;
}

.ob-accessibility.is-open .ob-accessibility__overlay {
	opacity: 1;
	pointer-events: auto;
}

.ob-accessibility.is-open .ob-accessibility__drawer {
	transform: translateX(0);
	transition-delay: 0s;
	visibility: visible;
}

.ob-accessibility__header,
.ob-accessibility__footer {
	flex: 0 0 auto;
	padding: 1.25rem 1.5rem;
	border-color: var(--ob-accessibility-line);
	border-style: solid;
}

.ob-accessibility__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	border-width: 0 0 1px;
}

.ob-accessibility__footer {
	border-width: 1px 0 0;
}

.ob-accessibility__eyebrow,
.ob-accessibility__title,
.ob-accessibility__section h3,
.ob-accessibility__intro,
.ob-accessibility__help {
	margin: 0;
}

.ob-accessibility__eyebrow {
	display: none;
}

.ob-accessibility__title {
	color: var(--ob-accessibility-ink);
	font-size: clamp(0.9rem, 1vw, 1rem);
	font-weight: 700;
	line-height: 1.25;
	white-space: nowrap;
}

.ob-accessibility__icon-button,
.ob-accessibility__step,
.ob-accessibility__choice,
.ob-accessibility__action,
.ob-accessibility__reset {
	border: 1px solid var(--ob-accessibility-line);
	border-radius: 10px;
	background: #ffffff;
	color: var(--ob-accessibility-ink);
	font: inherit;
	font-weight: 650;
	cursor: pointer;
	transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.ob-accessibility__icon-button:hover,
.ob-accessibility__step:hover,
.ob-accessibility__choice:hover,
.ob-accessibility__action:hover,
.ob-accessibility__reset:hover {
	border-color: var(--ob-accessibility-primary);
	background: rgba(91, 155, 227, 0.08);
	background: color-mix(in srgb, var(--ob-accessibility-primary) 8%, #ffffff);
	color: var(--ob-accessibility-ink);
}

.ob-accessibility__icon-button:focus-visible,
.ob-accessibility__step:focus-visible,
.ob-accessibility__choice:focus-visible,
.ob-accessibility__action:focus-visible,
.ob-accessibility__reset:focus-visible {
	outline: 3px solid rgba(91, 155, 227, 0.35);
	outline: 3px solid color-mix(in srgb, var(--ob-accessibility-primary) 35%, transparent);
	outline-offset: 2px;
}

.ob-accessibility__icon-button {
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	font-size: 1.65rem;
	font-weight: 400;
	line-height: 1;
}

.ob-accessibility__content {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 1.5rem;
}

.ob-accessibility__intro,
.ob-accessibility__help {
	color: var(--ob-accessibility-muted);
	font-size: 0.82rem;
	line-height: 1.5;
}

.ob-accessibility__section {
	margin-top: 1.75rem;
}

.ob-accessibility__section h3 {
	margin-bottom: 0.75rem;
	color: var(--ob-accessibility-ink);
	font-size: 0.92rem;
	line-height: 1.35;
}

.ob-accessibility__text-controls,
.ob-accessibility__speech-actions {
	display: flex;
	align-items: stretch;
	gap: 0.6rem;
}

.ob-accessibility__help + .ob-accessibility__speech-actions {
	margin-top: 0.75rem;
}

.ob-accessibility__step,
.ob-accessibility__value {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.9rem;
}

.ob-accessibility__step {
	min-width: 3.25rem;
	padding: 0.5rem 0.75rem;
	font-size: 0.95rem;
}

.ob-accessibility__value {
	min-width: 5.25rem;
	border: 1px solid var(--ob-accessibility-line);
	border-radius: 10px;
	background: #f7fafb;
	font-weight: 700;
}

.ob-accessibility__choices,
.ob-accessibility__actions {
	display: grid;
	gap: 0.65rem;
}

.ob-accessibility__choices {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ob-accessibility__choice {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	min-height: 5.7rem;
	padding: 0.7rem 0.45rem;
	font-size: 0.78rem;
	line-height: 1.25;
}

.ob-accessibility__choice[aria-pressed='true'],
.ob-accessibility__action[aria-pressed='true'] {
	border-color: var(--ob-accessibility-primary);
	background: var(--ob-accessibility-primary);
	color: var(--ob-accessibility-primary-contrast);
}
.ob-accessibility__choice[aria-pressed='true']:hover,
.ob-accessibility__action[aria-pressed='true']:hover {
	background: var(--ob-accessibility-primary);
	color: var(--ob-accessibility-primary-contrast);
	filter: brightness(0.94);
}

.ob-accessibility__swatch {
	display: block;
	width: 2.25rem;
	height: 1.4rem;
	border: 1px solid #8593a0;
	border-radius: 4px;
}

.ob-accessibility__swatch--normal { background: linear-gradient(90deg, #ffffff 50%, #254661 50%); }
.ob-accessibility__swatch--invert { background: linear-gradient(90deg, #111111 50%, #ffffff 50%); }
.ob-accessibility__swatch--grayscale { background: linear-gradient(90deg, #333333 50%, #d6d6d6 50%); }

.ob-accessibility__choice[aria-pressed='true'] .ob-accessibility__swatch {
	border-color: rgba(255, 255, 255, 0.9);
}

.ob-accessibility__action,
.ob-accessibility__reset {
	min-height: 2.9rem;
	padding: 0.65rem 0.9rem;
	text-align: left;
}

.ob-accessibility__action--primary {
	border-color: var(--ob-accessibility-primary);
	background: var(--ob-accessibility-primary);
	color: var(--ob-accessibility-primary-contrast);
}

.ob-accessibility__action--primary:hover {
	background: var(--ob-accessibility-primary);
	color: var(--ob-accessibility-primary-contrast);
	filter: brightness(0.94);
}

.ob-accessibility__action[data-ob-action='underline-links'],
.ob-accessibility__action[data-ob-action='big-cursor'],
.ob-accessibility__action[data-ob-action='reading-guide'] {
	display: flex;
	align-items: center;
	gap: 0.7rem;
}

.ob-accessibility__action[data-ob-action='underline-links']::before,
.ob-accessibility__action[data-ob-action='big-cursor']::before,
.ob-accessibility__action[data-ob-action='reading-guide']::before {
	display: grid;
	width: 1.65rem;
	height: 1.65rem;
	flex: 0 0 1.65rem;
	place-items: center;
	border-radius: 6px;
	background: rgba(91, 155, 227, 0.1);
	background: color-mix(in srgb, var(--ob-accessibility-primary) 10%, #ffffff);
	color: var(--ob-accessibility-primary);
	font-size: 1rem;
	font-weight: 800;
	line-height: 1;
}

.ob-accessibility__action[data-ob-action='underline-links']::before {
	content: 'A';
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.12em;
}

.ob-accessibility__action[data-ob-action='big-cursor']::before {
	content: '↖';
	font-size: 1.25rem;
}

.ob-accessibility__action[data-ob-action='reading-guide']::before {
	content: '≡';
	font-size: 1.35rem;
}

.ob-accessibility__action[data-ob-action='underline-links'][aria-pressed='true'],
.ob-accessibility__action[data-ob-action='big-cursor'][aria-pressed='true'],
.ob-accessibility__action[data-ob-action='reading-guide'][aria-pressed='true'] {
	position: relative;
	padding-right: 3rem;
}

.ob-accessibility__action[data-ob-action='underline-links'][aria-pressed='true']::after,
.ob-accessibility__action[data-ob-action='big-cursor'][aria-pressed='true']::after,
.ob-accessibility__action[data-ob-action='reading-guide'][aria-pressed='true']::after {
	position: absolute;
	top: 50%;
	right: 0.9rem;
	display: grid;
	width: 1.25rem;
	height: 1.25rem;
	place-items: center;
	border-radius: 50%;
	background: #ffffff;
	color: var(--ob-accessibility-primary);
	content: '✓';
	font-size: 0.75rem;
	font-weight: 800;
	line-height: 1;
	transform: translateY(-50%);
}

.ob-accessibility__action[aria-pressed='true']::before {
	background: rgba(255, 255, 255, 0.2);
	color: currentColor;
}

.ob-accessibility__icon-button:active,
.ob-accessibility__step:active,
.ob-accessibility__choice:active,
.ob-accessibility__action:active,
.ob-accessibility__reset:active {
	transform: translateY(1px);
}

.ob-accessibility__action:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.ob-accessibility__reset {
	width: 100%;
	border-color: transparent;
	padding-inline: 0;
	color: var(--ob-accessibility-primary);
	text-align: center;
}

.ob-accessibility__reading-guide {
	position: fixed;
	z-index: 99992;
	top: 0;
	left: 0;
	width: 100vw;
	height: 2.25rem;
	border-top: 1px solid rgba(17, 17, 17, 0.55);
	border-bottom: 1px solid rgba(17, 17, 17, 0.55);
	background: rgba(255, 230, 86, 0.32);
	opacity: 0;
	pointer-events: none;
	transition: opacity 160ms ease;
}

html.ob-accessibility-reading-guide-active .ob-accessibility__reading-guide {
	opacity: 1;
}

body.ob-accessibility-drawer-open {
	overflow: hidden;
}

html.ob-accessibility-active {
	font-size: var(--ob-accessibility-text-scale, 100%);
}

html[data-ob-accessibility-color='invert'] body > :not(.ob-accessibility) {
	filter: invert(1) hue-rotate(180deg);
}

html[data-ob-accessibility-color='grayscale'] body {
	filter: grayscale(1);
}

html.ob-accessibility-links-underlined body a:not(.ob-accessibility__action):not(.ob-accessibility__choice):not(.ob-accessibility__step):not(.ob-accessibility__reset) {
	text-decoration: underline !important;
	text-decoration-thickness: 2px !important;
	text-underline-offset: 0.16em;
}

html.ob-accessibility-big-cursor,
html.ob-accessibility-big-cursor * {
	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 fill='white' stroke='black' stroke-width='1.5' d='M5 2v17l4.2-4.2 2.8 6.2 2.1-.9-2.8-6.1H18z'/%3E%3C/svg%3E") 4 2, auto !important;
}

@media (max-width: 767px) {
	.ob-accessibility__drawer {
		width: 100vw;
	}

	.ob-accessibility__header,
	.ob-accessibility__footer,
	.ob-accessibility__content {
		padding-inline: 1.25rem;
	}

	.ob-accessibility__action,
	.ob-accessibility__step,
	.ob-accessibility__icon-button {
		min-height: 3.25rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ob-accessibility__overlay,
	.ob-accessibility__drawer,
	.ob-accessibility__reading-guide,
	.ob-accessibility__icon-button,
	.ob-accessibility__step,
	.ob-accessibility__choice,
	.ob-accessibility__action,
	.ob-accessibility__reset {
		transition: none;
	}
}