/* ==========================================================================
   Viewing options (Ben, 30 Sep 2026; `docs/VIEWING-OPTIONS-MAP-2026-09-30.md`).

   The header's Accessibility button, the Viewing options panel it opens, and
   the same options opened in place inside the mobile menu. Form's own
   treatment, not an overlay: restrained sand and white, black type, one-pixel
   rules, an orange focus ring, the theme's radii (no pills). Montserrat names
   the panel and each option; Inter explains.

   Nothing here is small. The explanations are 16px, the option titles 17.5px,
   the state words 16px, and in Larger text every one of them scales with the
   reading scale like the rest of the site's reading text. The panel is a
   personal preference, so the site behind it is not made smaller to make the
   choices look bigger.

   The state is never colour alone: the active word is filled, bold and carries
   a tick, the two words are always both shown, and `aria-pressed` says it aloud.
   Under `forced-colors: active` the fill is the system's to remove, so the tick,
   the weight and a heavier border carry it.
   ========================================================================== */

/* ------------------------------------------------------------- the button */
.viewing-control {
	position: relative;
	flex: none;
	margin-left: 4px;
}

.viewing-trigger,
.viewing-menu-trigger {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	border: 1px solid var(--muted);
	border-radius: var(--r-button);
	background: transparent;
	color: var(--ink);
	font-family: var(--font-body);
	font-size: var(--fs-nav-link);
	font-weight: var(--fw-card-title);
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.viewing-trigger {
	padding: 0 15px 0 13px;
}

.viewing-trigger:hover,
.viewing-menu-trigger:hover {
	border-color: var(--ink);
}

.viewing-trigger:focus-visible,
.viewing-menu-trigger:focus-visible,
.viewing-switch:focus-visible,
.viewing-reset:focus-visible {
	outline: 3px solid var(--orange);
	outline-offset: 3px;
}

.viewing-trigger[aria-expanded="true"] {
	border-color: var(--ink);
	background: var(--ink);
	color: var(--white);
}

.viewing-trigger-icon {
	flex: none;
	width: 20px;
	height: 20px;
}

/* --------------------------------------------------------- the panel (1101+) */
.viewing-panel {
	position: absolute;
	top: calc(100% + 14px);
	right: 0;
	z-index: 950;
	box-sizing: border-box;
	width: min(400px, calc(100vw - 2 * var(--pad-x)));
	max-height: calc(100vh - var(--header-h) - 28px);
	overflow-y: auto;
	padding: 26px 24px 22px;
	border: 1px solid var(--ink);
	border-radius: var(--r-card);
	background: var(--paper);
	color: var(--ink);
	box-shadow: 0 24px 60px rgba(17, 17, 17, 0.16);
}

.viewing-panel[hidden],
.viewing-menu-panel[hidden],
.viewing-note[hidden] {
	display: none;
}

.viewing-title {
	margin: 0 0 8px;
	font-family: var(--font);
	font-size: calc(24px * var(--type-heading));
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.01em;
}

.viewing-title:focus {
	outline: none;
}

.viewing-intro {
	margin: 0 0 18px;
	font-family: var(--font-body);
	font-size: calc(16px * var(--type-reading));
	line-height: 1.45;
	color: var(--ink);
}

.viewing-list {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.viewing-row {
	margin: 0;
	padding: 0;
}

/* One row is one button: the whole row is the target. */
.viewing-switch {
	display: grid;
	gap: 12px;
	width: 100%;
	padding: 16px 16px 14px;
	border: 1px solid var(--line);
	border-radius: var(--r-card-sm);
	background: var(--white);
	color: var(--ink);
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: border-color 0.2s;
}

.viewing-switch:hover {
	border-color: var(--ink);
}

.viewing-text {
	display: grid;
	gap: 4px;
}

.viewing-name {
	font-family: var(--font);
	font-size: calc(17.5px * var(--type-reading));
	font-weight: 700;
	line-height: 1.2;
}

.viewing-help {
	font-family: var(--font-body);
	font-size: calc(16px * var(--type-reading));
	font-weight: 400;
	line-height: 1.4;
}

/* The two words, both always shown; the active one is filled, bold and ticked. */
.viewing-state {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border: 1px solid var(--ink);
	border-radius: 10px;
	overflow: hidden;
}

.viewing-option {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 44px;
	padding: 0 10px;
	font-family: var(--font-body);
	font-size: calc(16px * var(--type-reading));
	font-weight: 400;
	line-height: 1.1;
	text-align: center;
}

.viewing-option + .viewing-option {
	border-left: 1px solid var(--ink);
}

/* The active word is ticked and bold either way. The default (Off, Standard) is outlined; a choice (On, Larger, Reduced) is filled, so turning something on is plainly different from leaving it alone. */
.viewing-switch[aria-pressed="false"] .viewing-option:first-child,
.viewing-switch[aria-pressed="true"] .viewing-option:last-child {
	font-weight: 700;
}

.viewing-switch[aria-pressed="false"] .viewing-option:first-child {
	box-shadow: inset 0 0 0 3px var(--ink);
}

.viewing-switch[aria-pressed="true"] .viewing-option:last-child {
	background: var(--ink);
	color: var(--white);
}

.viewing-switch[aria-pressed="false"] .viewing-option:first-child::before,
.viewing-switch[aria-pressed="true"] .viewing-option:last-child::before {
	content: "\2713";
	font-weight: 700;
}

/* A row the system has already decided (forced colours, reduced motion): it says so, and does not pretend to be a choice. */
.viewing-switch[aria-disabled="true"] {
	cursor: default;
}

.viewing-switch[aria-disabled="true"]:hover {
	border-color: var(--line);
}

.viewing-note {
	margin: 8px 2px 0;
	font-family: var(--font-body);
	font-size: calc(16px * var(--type-reading));
	line-height: 1.4;
}

.viewing-reset {
	display: inline-block;
	margin: 18px 0 0;
	padding: 8px 2px;
	border: 0;
	background: none;
	color: var(--ink);
	font-family: var(--font-body);
	font-size: calc(16px * var(--type-reading));
	font-weight: 400;
	line-height: 1.2;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.viewing-reset:hover {
	text-decoration-thickness: 2px;
}

.viewing-status {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ------------------------------------------------ the mobile menu's version */
.viewing-menu {
	margin-top: 18px;
}

.viewing-menu-trigger {
	display: flex;
	width: 100%;
	min-height: 56px;
	padding: 0 4px;
	border: 0;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	border-radius: 0;
	font-family: var(--font);
	font-size: calc(18px * var(--type-reading));
	font-weight: 800;
}

.viewing-menu-trigger .viewing-trigger-label {
	flex: 1 1 auto;
	text-align: left;
}

.viewing-menu-mark {
	flex: none;
	width: 10px;
	height: 10px;
	margin-right: 6px;
	border-right: 2.5px solid currentColor;
	border-bottom: 2.5px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.2s;
}

.viewing-menu-trigger[aria-expanded="true"] .viewing-menu-mark {
	transform: rotate(-135deg);
}

.viewing-menu-panel {
	padding: 22px 2px 6px;
}

.viewing-menu-panel .viewing-title {
	font-size: calc(22px * var(--type-heading));
}

/* -------------------------------------------- where the header keeps it */
/* From 1101px up. Below it the navigation is not drawn, and neither is this: the options are in the menu. */
@media screen and (max-width: 1100px) {
	.viewing-control {
		display: none;
	}

	.header-inner .menu-btn {
		margin-left: auto;
	}
}

/* From 1101px to 1279px the navigation alone takes most of the room: the links close up by 4px each, and the button gives back a little padding. */
@media screen and (min-width: 1101px) and (max-width: 1279px) {
	.header-inner .nav {
		gap: 14px;
	}

	.viewing-trigger {
		gap: 8px;
		padding: 0 11px 0 10px;
	}
}

.header-inner .nav {
	margin-left: auto;
}

/* ------------------------------------------------------ reduced motion */
/* The panel's own transitions go with the rest (reduced-motion.css repeats this block for the Reduce motion setting). */
@media (prefers-reduced-motion: reduce) {
	.viewing-trigger,
	.viewing-menu-trigger,
	.viewing-switch,
	.viewing-menu-mark {
		transition: none;
	}
}

/* ------------------------------------------------------ forced colours */
/* The system's colours win. These rules only make sure the state and the edges survive them, without painting Form's colours over the top. */
@media (forced-colors: active) {
	.viewing-trigger,
	.viewing-menu-trigger {
		border-color: ButtonText;
	}

	.viewing-trigger:focus-visible,
	.viewing-menu-trigger:focus-visible,
	.viewing-switch:focus-visible,
	.viewing-reset:focus-visible {
		outline: 3px solid Highlight;
	}

	.viewing-panel {
		border: 2px solid CanvasText;
	}

	.viewing-switch {
		border: 2px solid CanvasText;
	}

	.viewing-state,
	.viewing-option + .viewing-option {
		border-color: CanvasText;
	}

	/* The fill is the system's to take away, so the active word is also boxed and underlined. */
	.viewing-switch[aria-pressed="false"] .viewing-option:first-child,
	.viewing-switch[aria-pressed="true"] .viewing-option:last-child {
		border: 3px solid Highlight;
		text-decoration: underline;
		text-underline-offset: 4px;
	}

	.viewing-trigger[aria-expanded="true"] {
		border: 3px solid Highlight;
	}
}