/* ==========================================================================
   Accessly — accessibility toolbar styles
   Namespaced under #accessly-root / .accessly-* to avoid theme collisions.
   ========================================================================== */

/* ---------- Root + positioning ---------- */
#accessly-root {
	position: fixed;
	z-index: 2147483000; /* sit above almost everything, below nothing sane */
}

#accessly-root.accessly-pos-bottom-left {
	bottom: 20px;
	left: 20px;
}

#accessly-root.accessly-pos-bottom-right {
	bottom: 20px;
	right: 20px;
}

#accessly-root.accessly-pos-middle-right {
	top: 50%;
	right: 20px;
	transform: translateY(-50%);
}

#accessly-root.accessly-pos-middle-left {
	top: 50%;
	left: 20px;
	transform: translateY(-50%);
}

/* ---------- Trigger button: white icon on black ---------- */
.accessly-trigger {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 68px;
	height: 68px;
	padding: 0;
	margin: 0;
	border: 2px solid #ffffff;
	border-radius: 50%;
	background: #000000;
	color: #ffffff;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}

.accessly-trigger svg {
	fill: #ffffff;
	width: 52px;
	height: 52px;
}

.accessly-trigger:hover,
.accessly-trigger:focus-visible {
	transform: scale(1.06);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
	outline: none;
}

.accessly-trigger:focus-visible {
	outline: 3px solid #4c9ffe;
	outline-offset: 2px;
}

/* ---------- Panel ---------- */
.accessly-panel {
	position: fixed;
	z-index: 2147483001;
	width: 320px;
	max-width: calc(100vw - 24px);
	max-height: 80vh;
	overflow-y: auto;
	background: #ffffff;
	color: #1a1a1a;
	border-radius: 12px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 15px;
	line-height: 1.4;
}

/* Panel anchor positions mirror the trigger position */
.accessly-panel.accessly-pos-bottom-left { bottom: 96px; left: 20px; }
.accessly-panel.accessly-pos-bottom-right { bottom: 96px; right: 20px; }
.accessly-panel.accessly-pos-middle-right { top: 50%; right: 96px; transform: translateY(-50%); }
.accessly-panel.accessly-pos-middle-left { top: 50%; left: 96px; transform: translateY(-50%); }

.accessly-panel[hidden] { display: none; }

.accessly-panel-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px;
	background: #000000;
	color: #ffffff;
	border-top-left-radius: 12px;
	border-top-right-radius: 12px;
}

.accessly-panel-title {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
}

.accessly-close {
	background: transparent;
	border: none;
	color: #ffffff;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	padding: 4px 8px;
	border-radius: 6px;
}

.accessly-close:hover,
.accessly-close:focus-visible {
	background: rgba(255, 255, 255, 0.15);
	outline: none;
}

.accessly-section {
	padding: 12px 16px;
	border-bottom: 1px solid #ececec;
}

.accessly-section:last-of-type { border-bottom: none; }

.accessly-section-title {
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #555;
}

.accessly-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.accessly-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-height: 48px;
	padding: 8px;
	border: 2px solid #d9d9d9;
	border-radius: 8px;
	background: #f7f7f7;
	color: #1a1a1a;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: border-color 0.12s ease, background 0.12s ease;
}

.accessly-btn:hover,
.accessly-btn:focus-visible {
	border-color: #000000;
	outline: none;
}

.accessly-btn.accessly-active {
	border-color: #000000;
	background: #000000;
	color: #ffffff;
}

.accessly-btn-wide {
	grid-column: 1 / -1;
}

.accessly-range-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
}

.accessly-range-row label {
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
}

.accessly-range-row input[type="range"] {
	flex: 1;
}

.accessly-reset {
	width: 100%;
	min-height: 44px;
	border: none;
	border-radius: 0 0 12px 12px;
	background: #f0f0f0;
	color: #b00020;
	font-weight: 700;
	cursor: pointer;
}

.accessly-reset:hover,
.accessly-reset:focus-visible {
	background: #e6e6e6;
	outline: none;
}

/* ==========================================================================
   Adjustment classes — applied to <html> via JS.
   Prefixed so they only ever touch behavior Accessly intends.
   ========================================================================== */

/* Font scaling is handled inline by JS on the root element. */

html.accessly-high-contrast,
html.accessly-high-contrast body {
	background: #000000 !important;
	color: #ffff00 !important;
}
html.accessly-high-contrast a { color: #00ffff !important; }
html.accessly-high-contrast img { filter: contrast(1.1); }

html.accessly-dark,
html.accessly-dark body {
	background: #121212 !important;
	color: #e8e8e8 !important;
}
html.accessly-dark a { color: #8ab4f8 !important; }

html.accessly-invert {
	filter: invert(1) hue-rotate(180deg);
}
html.accessly-invert img,
html.accessly-invert video,
html.accessly-invert #accessly-root,
html.accessly-invert .accessly-panel {
	filter: invert(1) hue-rotate(180deg);
}

html.accessly-grayscale {
	filter: grayscale(1);
}
html.accessly-grayscale #accessly-root,
html.accessly-grayscale .accessly-panel {
	filter: grayscale(0);
}

html.accessly-readable-font,
html.accessly-readable-font body,
html.accessly-readable-font p,
html.accessly-readable-font li,
html.accessly-readable-font span,
html.accessly-readable-font a,
html.accessly-readable-font h1,
html.accessly-readable-font h2,
html.accessly-readable-font h3,
html.accessly-readable-font h4 {
	font-family: Verdana, Arial, "Helvetica Neue", sans-serif !important;
	letter-spacing: 0.02em !important;
}

html.accessly-highlight-links a {
	outline: 2px solid #ffbf00 !important;
	background: #fff8e1 !important;
	color: #1a1a1a !important;
	text-decoration: underline !important;
}

html.accessly-big-cursor,
html.accessly-big-cursor * {
	cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M6 2l30 18-13 3 8 16-6 3-8-16-11 9z' fill='%23000' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") 6 2, auto !important;
}

html.accessly-line-spacing,
html.accessly-line-spacing body,
html.accessly-line-spacing p,
html.accessly-line-spacing li {
	line-height: 2 !important;
	letter-spacing: 0.04em !important;
}

/* Reading guide bar follows the pointer (positioned by JS). */
#accessly-reading-guide {
	position: fixed;
	left: 0;
	width: 100%;
	height: 40px;
	background: rgba(0, 0, 0, 0.08);
	border-top: 2px solid rgba(0, 0, 0, 0.5);
	border-bottom: 2px solid rgba(0, 0, 0, 0.5);
	pointer-events: none;
	z-index: 2147482999;
	display: none;
}
html.accessly-reading-guide #accessly-reading-guide { display: block; }

/* Currently spoken element highlight for text-to-speech. */
.accessly-speaking {
	background: #fff1a8 !important;
	box-shadow: 0 0 0 3px #fff1a8 !important;
}

/* ---------- Small screens ---------- */
@media (max-width: 480px) {
	.accessly-panel {
		width: calc(100vw - 24px);
		right: 12px !important;
		left: auto !important;
	}
	.accessly-panel.accessly-pos-middle-right,
	.accessly-panel.accessly-pos-middle-left {
		top: auto;
		bottom: 96px;
		transform: none;
	}
	#accessly-root.accessly-pos-middle-right,
	#accessly-root.accessly-pos-middle-left {
		top: auto;
		bottom: 20px;
		transform: none;
	}
}

/* Respect users who asked the OS to reduce motion. */
@media (prefers-reduced-motion: reduce) {
	.accessly-trigger { transition: none; }
}