/*
 * Reading preferences.
 *
 * Every preference is expressed here as CSS against an attribute on the root
 * element. Nothing in this file changes what the page *is* — only how it is
 * set — which is the line between a preferences panel and an overlay widget
 * that rewrites a page for assistive technology that never asked it to.
 *
 * Every custom property carries a fallback. The plugin owns this markup
 * (ADR-001) and has to keep working under a theme that has never heard of these
 * tokens.
 */

/* ================================================== the preferences === */

/*
 * Text size, in four steps of 12.5%.
 *
 * Set on the root font size, so everything the theme sizes in rem follows —
 * type, spacing, the measure. The 44px touch targets are stated in px and stay
 * where they are, which is correct: they are a floor, not a proportion.
 */
:root[data-jmns-text="1"] { font-size: 112.5%; }
:root[data-jmns-text="2"] { font-size: 125%; }
:root[data-jmns-text="3"] { font-size: 137.5%; }

/*
 * The spacing WCAG 1.4.12 asks for, as a switch rather than as a default.
 *
 * The numbers are the success criterion's own: line height 1.5 times the font
 * size, paragraph spacing twice, letter spacing 0.12em, word spacing 0.16em.
 * The criterion is that content survives a reader applying these; offering them
 * is the friendlier version of the same idea.
 */
:root[data-jmns-spacing="on"] body {
	line-height: 1.5;
	letter-spacing: 0.12em;
	word-spacing: 0.16em;
}

:root[data-jmns-spacing="on"] p,
:root[data-jmns-spacing="on"] li {
	line-height: 1.5;
	margin-block-end: 2em;
}

/*
 * Higher contrast, by strengthening rather than inverting.
 *
 * Inversion is the usual approach and it is wrong here: this page carries the
 * state crest and the department's own artwork, and inverting a coat of arms
 * produces something that is not the coat of arms. Text goes to full black on
 * the page ground, secondary text stops being secondary, and borders darken so
 * the card edges hold.
 */
:root[data-jmns-contrast="on"] {
	--wp--preset--color--text-primary: #000;
	--wp--preset--color--text-secondary: #1c2620;
	--wp--preset--color--border: #1F2925;
	--wp--preset--color--border-strong: #1F2925;
	--wp--preset--color--interactive: #1f4030;
	--wp--preset--color--interactive-hover: #0d2318;
}

/*
 * Both rules below restate the block above rather than adding to it: `body`
 * already takes its colour from `text-primary` and a card edge from `border`.
 * They are kept as belt and braces for a component that sets its own, and they
 * read the tokens rather than the literals they used to hold — a colour scheme
 * is entitled to say what "higher contrast" means under *its* ground, and a
 * scheme that inverts would otherwise have this driving its ink towards black
 * on a black page. The scheme's answer lands on the block above, at one
 * attribute more specific; these follow it because they no longer state a
 * colour of their own.
 */
:root[data-jmns-contrast="on"] body {
	color: var(--wp--preset--color--text-primary, #000);
}

/* Cards and bands need their edges back once the ground stops carrying them. */
:root[data-jmns-contrast="on"] .jmns-card,
:root[data-jmns-contrast="on"] [class*="__card"],
:root[data-jmns-contrast="on"] input,
:root[data-jmns-contrast="on"] select,
:root[data-jmns-contrast="on"] textarea {
	border-color: var(--wp--preset--color--border, #1F2925);
}

/*
 * Every link underlined.
 *
 * The site already meets SC 1.4.1 — its links are distinguished by more than
 * colour — but "more than colour" is a floor, and somebody who cannot pick the
 * green out at all wants the line. Navigation is excluded: underlining a
 * horizontal menu turns it into a row of scored words and helps nobody.
 */
:root[data-jmns-links="on"] .entry-content a,
:root[data-jmns-links="on"] main a:not([class*="button"]):not([class*="tile"]):not([class*="card__link"]),
:root[data-jmns-links="on"] .site-footer a {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/*
 * Motion off, by the same switch the operating system sets.
 *
 * The stylesheet already answers `prefers-reduced-motion`; this gives the same
 * answer to a visitor whose device has no such setting, or who wants it here
 * and not everywhere.
 */
:root[data-jmns-motion="on"] *,
:root[data-jmns-motion="on"] *::before,
:root[data-jmns-motion="on"] *::after {
	animation-duration: 0.01ms !important;
	animation-iteration-count: 1 !important;
	transition-duration: 0.01ms !important;
	scroll-behavior: auto !important;
}

/* ------------------------------------------------------ reading guide -- */

.jmns-access__guide {
	display: none;
}

:root[data-jmns-guide="on"] .jmns-access__guide {
	display: block;
	position: fixed;
	inset-inline: 0;
	inset-block-start: 0;
	block-size: 2px;
	background-color: var(--wp--preset--color--interactive, #245746);
	opacity: 0.55;
	pointer-events: none;
	z-index: 90;
}

/* ======================================================== the panel === */

.jmns-access {
	/*
	 * Bottom-inline-start corner, in the slot nearest the viewport edge.
	 *
	 * That is the whole of what this component says about where it is. It used
	 * to say `position: fixed; inset-block-end: 1rem; inset-inline-start: 1rem`,
	 * with bot.css saying the mirror image of the same three lines eighty
	 * characters away in another file — which is why adding a third control to
	 * these corners meant inventing a fourth set of numbers and hoping they
	 * stayed in step with the other two. The corner is declared in the markup as
	 * `data-jmns-stack`, the slot is the line below, and stack.css turns the two
	 * into an offset.
	 *
	 * The stacking this used to set for itself — 95, under the chatbot and above
	 * the page, because the two only meet on a screen narrow enough — is
	 * `--jmns-stack-z` in stack.css now, where the whole order can be read at
	 * once instead of inferred from two comments.
	 */
	--jmns-stack-order: 0;
}

/*
 * The launcher: the OKU mark, and nothing else.
 *
 * A circle in the theme's interactive green with the symbol reversed out of it,
 * which is the same weight the chatbot's launcher carries in the opposite
 * corner — two floating controls that read as a pair rather than as one control
 * and one afterthought.
 *
 * 48px, comfortably past the 44px floor, and square so the mark sits centred in
 * it at every width. No visible label: the symbol is the label, and the
 * accessible name comes from the visually hidden text inside the button.
 */
.jmns-access__launcher {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 48px;
	block-size: 48px;
	padding: 0;
	border: 1px solid var(--wp--preset--color--interactive, #245746);
	border-radius: 50%;
	background-color: var(--wp--preset--color--interactive, #245746);
	color: var(--wp--preset--color--surface, #fff);
	cursor: pointer;
	box-shadow: 0 1px 3px rgb(var(--jmns-shade-rgb, 38 51 42) / 0.25);
}

.jmns-access__launcher:hover {
	background-color: var(--wp--preset--color--interactive-hover, #173D32);
	border-color: var(--wp--preset--color--interactive-hover, #173D32);
}

.jmns-access__icon {
	display: inline-flex;
}

.jmns-access__panel {
	position: absolute;
	inset-block-end: calc( 100% + 0.5rem );
	inset-inline-start: 0;
	inline-size: min(20rem, calc( 100vw - 2rem ));
	max-block-size: min(30rem, calc( 100vh - 6rem ));
	overflow-y: auto;
	padding: var(--wp--preset--spacing--40, 1rem);
	border: 1px solid var(--wp--preset--color--border, #DCE4DF);
	border-radius: var(--r-card, 16px);
	background-color: var(--wp--preset--color--background, #FAF8F2);
	box-shadow: 0 8px 24px rgb(var(--jmns-shade-rgb, 38 51 42) / 0.18);
}

.jmns-access__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin-block-end: var(--wp--preset--spacing--30, 0.75rem);
}

.jmns-access__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--large, 1.125rem);
}

.jmns-access__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 44px;
	min-block-size: 44px;
	margin-inline-end: -0.5rem;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--text-secondary, #5E6D63);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

.jmns-access__group {
	padding-block-end: var(--wp--preset--spacing--30, 0.75rem);
	border-block-end: 1px solid var(--wp--preset--color--border, #DCE4DF);
}

.jmns-access__label {
	margin: 0 0 0.35rem;
	font-weight: 600;
}

.jmns-access__stepper {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.jmns-access__step {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 44px;
	min-block-size: 44px;
	border: 1px solid var(--wp--preset--color--border-strong, #6F8D7A);
	border-radius: var(--r-control, 8px);
	background-color: transparent;
	color: var(--wp--preset--color--interactive, #245746);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.jmns-access__step:hover {
	background-color: var(--wp--preset--color--surface-tint, #EAF1EC);
}

.jmns-access__level {
	min-inline-size: 4ch;
	color: var(--wp--preset--color--text-secondary, #5E6D63);
	font-variant-numeric: tabular-nums;
	text-align: center;
}

.jmns-access__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.jmns-access__toggle {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	min-block-size: 44px;
	padding-block: 0.5rem;
	cursor: pointer;
}

.jmns-access__toggle input {
	flex: 0 0 auto;
	inline-size: 1.15rem;
	block-size: 1.15rem;
	margin-block-start: 0.15rem;
	accent-color: var(--wp--preset--color--interactive, #245746);
}

.jmns-access__toggle-text {
	display: flex;
	flex-direction: column;
}

.jmns-access__toggle-label {
	font-weight: 600;
	line-height: 1.35;
}

.jmns-access__toggle-help {
	color: var(--wp--preset--color--text-secondary, #5E6D63);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	line-height: 1.4;
}

/*
 * The colour schemes, as a radio group.
 *
 * Laid out like the switches below it so the panel reads as one list of
 * preferences rather than two components stacked. The only addition is the
 * swatch, which is three bands of the scheme's own colours — ground, brand,
 * ink — supplied as `--s-1` to `--s-3` on the element by the panel.
 *
 * Those three are the one place in this codebase where a stated colour is the
 * correct answer: the chip has to show the palette the visitor is choosing, not
 * the one they are currently reading in. They arrive as custom properties in a
 * style attribute rather than as CSS, so a scheme added to the registry needs no
 * rule written for it here.
 */
.jmns-access__schemes {
	display: flex;
	flex-direction: column;
}

.jmns-access__scheme {
	display: flex;
	/* Top-aligned like the switches below, because the note under a scheme name
	   runs to three lines and a centred control drifts away from the name it
	   belongs to. */
	align-items: flex-start;
	gap: 0.6rem;
	min-block-size: 44px;
	padding-block: 0.5rem;
	cursor: pointer;
}

.jmns-access__scheme input {
	flex: 0 0 auto;
	inline-size: 1.15rem;
	block-size: 1.15rem;
	margin-block-start: 0.2rem;
	accent-color: var(--wp--preset--color--interactive, #245746);
}

.jmns-access__swatch {
	flex: 0 0 auto;
	inline-size: 2.25rem;
	block-size: 1.5rem;
	border: 1px solid var(--wp--preset--color--border-strong, #6F8D7A);
	border-radius: var(--r-control, 8px);
	/*
	 * Hard stops, not a gradient. Three colours blurred into each other would
	 * preview a scheme that does not exist; three bands preview three tokens.
	 */
	background-image: linear-gradient(
		90deg,
		var(--s-1, var(--wp--preset--color--background, #FAF8F2)) 0 33.33%,
		var(--s-2, var(--wp--preset--color--primary, #245746)) 33.33% 66.66%,
		var(--s-3, var(--wp--preset--color--text-primary, #1F2925)) 66.66% 100%
	);
}

.jmns-access__reset {
	inline-size: 100%;
	min-block-size: 44px;
	margin-block-start: var(--wp--preset--spacing--20, 0.5rem);
	border: 1px solid var(--wp--preset--color--border-strong, #6F8D7A);
	border-radius: var(--r-control, 8px);
	background-color: transparent;
	color: var(--wp--preset--color--interactive, #245746);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.jmns-access__reset:hover {
	background-color: var(--wp--preset--color--surface-tint, #EAF1EC);
}

/*
 * No print rule here any more. Withholding a floating control from print is
 * true of every control in the corner stack and was only ever written for this
 * one — the chat launcher printed a green pill onto every page anyone sent to a
 * printer — so it is one rule in stack.css keyed on stack membership.
 */