/* ============================================================================
   ISANEX Accessibility & Display Preferences
   ----------------------------------------------------------------------------
   Styles for (a) the always-available "Display" trigger and (b) the modal
   chooser used for both first-visit onboarding and later edits.

   The whole UI is driven by the SAME CSS custom properties the theme defines
   (--bg2, --text, --blue, --border, --shadow, --radius, --font ...). Fallback
   values are provided on every var() so the plugin still renders sensibly if it
   is ever activated without the ISANEX theme. Both light and dark are handled
   automatically because those tokens change under html[data-theme="light"].

   Tap targets are >= 44x44px; focus is always visible; contrast meets WCAG AA
   in both themes; animation is disabled under prefers-reduced-motion.
   ========================================================================== */

/* ── Local knobs (kept in the plugin namespace) ─────────────────────────── */
:root {
	--isa-a11y-accent:        var(--blue, #00A8CC);
	--isa-a11y-accent-ink:    #001018;   /* text on accent — AA on the blues */
	--isa-a11y-surface:       var(--bg2, #131313);
	--isa-a11y-surface-2:     var(--bg3, #1A1A1A);
	--isa-a11y-ink:           var(--text, #F2F4FA);
	--isa-a11y-ink-2:         var(--text2, #C8D0E8);
	--isa-a11y-ink-3:         var(--text3, #9AAAC8);
	--isa-a11y-border:        var(--border, #2E2E2E);
	--isa-a11y-border-strong: var(--border2, #3A3A3A);
	--isa-a11y-radius:        var(--radius, 8px);
	--isa-a11y-shadow:        var(--shadow, 0 8px 32px rgba(0,0,0,.5));
	--isa-a11y-font:          var(--font, system-ui, -apple-system, Segoe UI, Roboto, sans-serif);
	--isa-a11y-backdrop:      rgba(0, 0, 0, .62);
}

/* On/off helper shared by trigger + overlay */
.isanex-a11y-trigger,
.isanex-a11y-overlay { font-family: var(--isa-a11y-font); box-sizing: border-box; }
.isanex-a11y-overlay *,
.isanex-a11y-overlay *::before,
.isanex-a11y-overlay *::after { box-sizing: border-box; }

/* Consistent, high-visibility focus ring everywhere in this UI */
.isanex-a11y-trigger:focus-visible,
.isanex-a11y-overlay :focus-visible {
	outline: 3px solid var(--isa-a11y-accent);
	outline-offset: 2px;
	border-radius: 4px;
}

/* ==========================================================================
   1) TRIGGER  (reopen control)
   Default: floating, bottom-inset, respects safe-area. If a11y.js finds the
   theme's #a11y-toolbar-placeholder it relocates the button into the header
   and the .is-inline modifier drops the floating chrome.
   ========================================================================== */
.isanex-a11y-trigger {
	position: fixed;
	right: max(16px, env(safe-area-inset-right));
	bottom: max(16px, env(safe-area-inset-bottom));
	z-index: 2147483000;            /* above site chrome, below nothing of ours */

	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;               /* AA touch target */
	padding: 8px 16px;

	background: var(--isa-a11y-surface);
	color: var(--isa-a11y-ink);
	border: 1px solid var(--isa-a11y-border-strong);
	border-radius: 999px;
	box-shadow: var(--isa-a11y-shadow);
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.isanex-a11y-trigger:hover { border-color: var(--isa-a11y-accent); transform: translateY(-1px); }
.isanex-a11y-trigger__icon {
	font-weight: 800;
	line-height: 1;
	color: var(--isa-a11y-accent);
}
.isanex-a11y-trigger__text { line-height: 1; }

/* Inline (relocated into the header) variant.
   The ISANEX header is forced black in BOTH themes, so this variant uses fixed
   light-on-black colors (not the theme --text token, which flips dark in light
   mode) to stay AA-legible regardless of the active theme. */
.isanex-a11y-trigger.is-inline {
	position: static;
	box-shadow: none;
	background: transparent;
	border-color: transparent;
	padding: 8px 10px;
	min-width: 44px;
	justify-content: center;
	color: #EAF0FF;                 /* light ink on the always-black header */
}
.isanex-a11y-trigger.is-inline .isanex-a11y-trigger__icon { color: #00D4FF; } /* AA on black */
.isanex-a11y-trigger.is-inline:hover {
	background: rgba(255, 255, 255, .10);
	border-color: rgba(255, 255, 255, .25);
	color: #FFFFFF;
}

/* On small screens the header is tight — keep the icon, hide the word */
@media (max-width: 480px) {
	.isanex-a11y-trigger.is-inline .isanex-a11y-trigger__text { display: none; }
}

/* ==========================================================================
   2) OVERLAY + DIALOG
   ========================================================================== */
.isanex-a11y-overlay[hidden] { display: none; }
.isanex-a11y-overlay {
	position: fixed;
	inset: 0;
	z-index: 2147483600;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	overflow-y: auto;                /* long dialog on short screens scrolls */
	-webkit-overflow-scrolling: touch;
}
.isanex-a11y-backdrop {
	position: fixed;
	inset: 0;
	background: var(--isa-a11y-backdrop);
	backdrop-filter: blur(2px);
}

.isanex-a11y-dialog {
	position: relative;
	width: 100%;
	max-width: 560px;
	margin: auto;
	background: var(--isa-a11y-surface);
	color: var(--isa-a11y-ink);
	border: 1px solid var(--isa-a11y-border);
	border-radius: calc(var(--isa-a11y-radius) + 6px);
	box-shadow: var(--isa-a11y-shadow);
	padding: clamp(20px, 4vw, 34px);
}

/* Entrance animation — disabled below under prefers-reduced-motion */
.isanex-a11y-overlay.is-open .isanex-a11y-dialog { animation: isa-a11y-pop .22s ease both; }
@keyframes isa-a11y-pop {
	from { opacity: 0; transform: translateY(10px) scale(.98); }
	to   { opacity: 1; transform: none; }
}

.isanex-a11y-title {
	margin: 0 40px 6px 0;            /* clear the close button */
	font-size: clamp(1.35rem, 4vw, 1.7rem);
	font-weight: 800;
	line-height: 1.2;
	color: var(--isa-a11y-ink);
	text-transform: none;            /* override theme's uppercase headings */
}
.isanex-a11y-desc {
	margin: 0 0 22px;
	color: var(--isa-a11y-ink-2);
	font-size: 1rem;
	line-height: 1.55;
}

/* Close (×) */
.isanex-a11y-x {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.7rem;
	line-height: 1;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 50%;
	color: var(--isa-a11y-ink-3);
	cursor: pointer;
	transition: background .2s ease, color .2s ease;
}
.isanex-a11y-x:hover { background: var(--isa-a11y-surface-2); color: var(--isa-a11y-ink); }

/* ── Fieldsets ─────────────────────────────────────────────────────────── */
.isanex-a11y-field {
	border: 0;
	margin: 0 0 22px;
	padding: 0;
	min-width: 0;                    /* prevents fieldset from forcing overflow */
}
.isanex-a11y-field > legend {
	padding: 0;
	margin-bottom: 12px;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--isa-a11y-accent);
}

/* Choice grid — fluid, wraps on phones, no horizontal scroll */
.isanex-a11y-choices {
	display: grid;
	gap: 10px;
}
.isanex-a11y-choices--size  { grid-template-columns: repeat(4, 1fr); }
.isanex-a11y-choices--theme { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 480px) {
	.isanex-a11y-choices--size { grid-template-columns: repeat(2, 1fr); }
}

/* Each option: the real radio is visually hidden; the box is the target */
.isanex-a11y-choice { position: relative; display: block; }
.isanex-a11y-choice input {
	position: absolute;
	opacity: 0;
	width: 1px; height: 1px;
	margin: 0;
}
.isanex-a11y-choice__box {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-height: 72px;
	padding: 12px 8px;
	background: var(--isa-a11y-surface-2);
	border: 2px solid var(--isa-a11y-border);
	border-radius: var(--isa-a11y-radius);
	cursor: pointer;
	text-align: center;
	transition: border-color .15s ease, background .15s ease, transform .1s ease;
}
.isanex-a11y-choice__box:hover { border-color: var(--isa-a11y-accent); }

/* Selected + keyboard focus states driven by the native radio */
.isanex-a11y-choice input:checked + .isanex-a11y-choice__box {
	border-color: var(--isa-a11y-accent);
	background: color-mix(in srgb, var(--isa-a11y-accent) 16%, var(--isa-a11y-surface-2));
	box-shadow: inset 0 0 0 1px var(--isa-a11y-accent);
}
.isanex-a11y-choice input:focus-visible + .isanex-a11y-choice__box {
	outline: 3px solid var(--isa-a11y-accent);
	outline-offset: 2px;
}

.isanex-a11y-choice__sample { font-weight: 800; line-height: 1; color: var(--isa-a11y-ink); }
.isanex-a11y-choice__sample--small  { font-size: 1.1rem; }
.isanex-a11y-choice__sample--medium { font-size: 1.4rem; }
.isanex-a11y-choice__sample--large  { font-size: 1.7rem; }
.isanex-a11y-choice__sample--xl     { font-size: 2rem; }
.isanex-a11y-choice__label { font-size: 0.9rem; font-weight: 700; color: var(--isa-a11y-ink); }
.isanex-a11y-choice__meta  { font-size: 0.72rem; color: var(--isa-a11y-ink-3); }

/* Appearance swatches */
.isanex-a11y-choice__swatch {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid var(--isa-a11y-border-strong);
}
.isanex-a11y-choice__swatch--light { background: linear-gradient(135deg, #F5F7FC 50%, #FFFFFF 50%); }
.isanex-a11y-choice__swatch--dark  { background: linear-gradient(135deg, #0A0A0A 50%, #222222 50%); }

/* ── Actions ───────────────────────────────────────────────────────────── */
.isanex-a11y-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 26px;
}
.isanex-a11y-btn {
	flex: 1 1 auto;
	min-height: 48px;
	padding: 12px 20px;
	border-radius: var(--isa-a11y-radius);
	font-family: inherit;
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
	transition: transform .1s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.isanex-a11y-btn:active { transform: translateY(1px); }
.isanex-a11y-btn--primary {
	background: var(--isa-a11y-accent);
	color: var(--isa-a11y-accent-ink);
	border: 2px solid var(--isa-a11y-accent);
}
.isanex-a11y-btn--primary:hover { filter: brightness(1.08); }
.isanex-a11y-btn--ghost {
	background: transparent;
	color: var(--isa-a11y-ink);
	border: 2px solid var(--isa-a11y-border-strong);
}
.isanex-a11y-btn--ghost:hover { border-color: var(--isa-a11y-accent); color: var(--isa-a11y-accent); }

/* Visually-hidden but screen-reader-available status line */
.isanex-a11y-sr {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0; border: 0;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* Prevent the page from scrolling while the modal is open */
html.isanex-a11y-lock, html.isanex-a11y-lock body { overflow: hidden; }

/* ── Reduced motion: no entrance animation, no hover lift ──────────────── */
@media (prefers-reduced-motion: reduce) {
	.isanex-a11y-overlay.is-open .isanex-a11y-dialog { animation: none; }
	.isanex-a11y-trigger,
	.isanex-a11y-btn,
	.isanex-a11y-choice__box { transition: none; }
	.isanex-a11y-trigger:hover { transform: none; }
}

/* color-mix() fallback: if unsupported, the border+inset ring still signals
   selection, so no functional loss on older engines. */
@supports not (background: color-mix(in srgb, red 10%, blue)) {
	.isanex-a11y-choice input:checked + .isanex-a11y-choice__box { background: var(--isa-a11y-surface); }
}