/*
 * theme.css — the shared foundation for every page in this app.
 *
 * Page-specific components stay in each page's own <style> block. What lives
 * here is what two pages would otherwise drift apart on: the palette, the type
 * faces, the reset, and the handful of primitives both pages use.
 */

/*
 * The Blackdogranch warm palette, carried over from evibe and Me: a warm
 * charcoal dark and a warm paper light, so the two themes read as the same room
 * at different times of day rather than as a photo and its negative. Both are
 * AUTHORED; neither is an inversion of the other.
 *
 * Prefixed `--enc-`, not `--ev-`. Same family today, a different product
 * tomorrow, and a shared prefix is how one of them ends up unable to change a
 * colour without touching the other.
 *
 * THE ACCENT IS A COLD STEEL BLUE, not evibe's teal and not Me's indigo. These
 * sites sit one click apart under the same wordmark and have to be told apart
 * at a glance. Cold, because nothing on this page is decorative.
 */
:root {
	--enc-bg: hsl(40 30% 97.5%);
	--enc-surface: hsl(0 0% 100%);
	--enc-surface-sunk: hsl(38 24% 95%);
	--enc-border: hsl(35 14% 88%);
	--enc-border-strong: hsl(35 12% 80%);

	--enc-text: hsl(28 12% 13%);
	--enc-muted: hsl(30 7% 42%);
	--enc-faint: hsl(30 6% 60%);

	--enc-accent: hsl(214 70% 33%);
	--enc-accent-soft: hsl(214 56% 93%);

	/*
	 * THREE STATUS COLOURS, AND THEY MEAN SPECIFIC THINGS.
	 * settled = a property the construction actually guarantees
	 * open    = a real limit, deliberately loud (the last section is the honest part)
	 * danger  = a mistake that would silently destroy the guarantee
	 */
	--enc-settled: hsl(152 46% 30%);
	--enc-settled-soft: hsl(152 40% 92%);
	--enc-open: hsl(32 88% 42%);
	--enc-open-soft: hsl(38 88% 92%);
	--enc-danger: hsl(8 68% 46%);
	--enc-danger-soft: hsl(8 70% 94%);

	--enc-shadow: 0 1px 2px hsl(30 20% 20% / 0.05), 0 8px 24px -12px hsl(30 20% 20% / 0.12);

	/* THREE FACES, AND THE PAIRING IS THE POINT OF THE PAGE. Sans is the
	   interface. Mono is what a cryptographer writes. Serif is what a person
	   says. The two languages of this document get two typefaces so you can see
	   at a glance which one you are reading. */
	--enc-ui-face: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
	--enc-doc-face: ui-serif, Georgia, 'Iowan Old Style', 'Times New Roman', serif;
	--enc-mono-face: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme='light']) {
		--enc-bg: hsl(30 7% 7%);
		--enc-surface: hsl(30 6% 10%);
		--enc-surface-sunk: hsl(30 6% 8.5%);
		--enc-border: hsl(30 5% 17%);
		--enc-border-strong: hsl(30 5% 24%);

		--enc-text: hsl(40 14% 92%);
		--enc-muted: hsl(35 7% 60%);
		--enc-faint: hsl(35 6% 44%);

		--enc-accent: hsl(210 78% 68%);
		--enc-accent-soft: hsl(214 38% 18%);

		/* Lifted and desaturated for the charcoal ground: the light values read
		   as neon against it. */
		--enc-settled: hsl(152 44% 58%);
		--enc-settled-soft: hsl(152 30% 16%);
		--enc-open: hsl(36 82% 62%);
		--enc-open-soft: hsl(34 44% 17%);
		--enc-danger: hsl(8 72% 62%);
		--enc-danger-soft: hsl(8 34% 17%);

		--enc-shadow: 0 1px 2px hsl(0 0% 0% / 0.3), 0 8px 24px -12px hsl(0 0% 0% / 0.5);
	}
}

:root[data-theme='dark'] {
	--enc-bg: hsl(30 7% 7%);
	--enc-surface: hsl(30 6% 10%);
	--enc-surface-sunk: hsl(30 6% 8.5%);
	--enc-border: hsl(30 5% 17%);
	--enc-border-strong: hsl(30 5% 24%);

	--enc-text: hsl(40 14% 92%);
	--enc-muted: hsl(35 7% 60%);
	--enc-faint: hsl(35 6% 44%);

	--enc-accent: hsl(210 78% 68%);
	--enc-accent-soft: hsl(214 38% 18%);

	--enc-settled: hsl(152 44% 58%);
	--enc-settled-soft: hsl(152 30% 16%);
	--enc-open: hsl(36 82% 62%);
	--enc-open-soft: hsl(34 44% 17%);
	--enc-danger: hsl(8 72% 62%);
	--enc-danger-soft: hsl(8 34% 17%);

	--enc-shadow: 0 1px 2px hsl(0 0% 0% / 0.3), 0 8px 24px -12px hsl(0 0% 0% / 0.5);
}

*, *::before, *::after { box-sizing: border-box; }

html {
	background: var(--enc-bg);
	color: var(--enc-text);
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--enc-bg);
	color: var(--enc-text);
	font-family: var(--enc-ui-face);
	/* Phone first, and this line is why: a long parameter string, a hex digest
	   or a pasted key must wrap rather than push the page sideways. */
	overflow-wrap: anywhere;
	line-height: 1.5;
}

:focus-visible { outline: 2px solid var(--enc-accent); outline-offset: 2px; }

.wrap { max-width: 72rem; margin: 0 auto; padding: 0 1.25rem; }
.reading { max-width: 44rem; }

h1, h2, h3 { text-wrap: balance; margin: 0; }

/* ---- Eyebrow ------------------------------------------------------------ */

.eyebrow {
	display: inline-flex; align-items: center; gap: 0.5rem;
	border-radius: 999px; padding: 0.3rem 0.8rem;
	font-size: 0.75rem; font-weight: 600;
	letter-spacing: 0.09em; text-transform: uppercase;
	background: var(--enc-accent-soft); color: var(--enc-accent);
}

.label {
	font-size: 0.7rem; font-weight: 600;
	letter-spacing: 0.09em; text-transform: uppercase;
	color: var(--enc-faint);
}

/* `.k` is the secondary voice inside a mono run: parameter names, asides and
   spec notes. Defined standalone, not nested under `.jargon`, because the
   quantum tables use it inside table cells too. */
.k { color: var(--enc-muted); }

code {
	font-family: var(--enc-mono-face);
	font-size: 0.88em;
	background: var(--enc-surface-sunk);
	border: 1px solid var(--enc-border);
	border-radius: 0.35rem;
	padding: 0.08em 0.32em;
	color: var(--enc-text);
}

/* ---- Callouts ----------------------------------------------------------- */

.callout {
	border: 1px solid var(--enc-border);
	border-left: 3px solid var(--enc-accent);
	background: var(--enc-surface);
	border-radius: 0.75rem;
	padding: 1rem 1.15rem;
	margin-top: 1.75rem;
	font-size: 0.95rem; line-height: 1.6;
	color: var(--enc-muted);
	max-width: 44rem;
}
.callout strong { color: var(--enc-text); font-weight: 600; }
.callout.warn { border-left-color: var(--enc-open); }
.callout.stop { border-left-color: var(--enc-danger); }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/*
 * A HAND ON ANYTHING CLICKABLE, and every tap target clearing the 44px Apple
 * asks for. House rules, stated once here rather than remembered per control.
 */
button:not(:disabled),
summary,
[role='button'] {
	cursor: pointer;
}

button,
a[role='button'],
input,
textarea,
select {
	min-height: 44px;
}

/* ---- Scrollers ------------------------------------------------------------
 *
 * Wide content — tables, diagrams, code — scrolls inside its own box so the
 * page body never moves sideways. Two things that box needs on a phone, and
 * neither is the default:
 *
 * `overscroll-behavior-x: contain` stops a horizontal swipe that reaches the
 * end from becoming a browser back-navigation, which on iOS loses the page.
 *
 * The four background layers are the CSS-only scroll shadow: two `local`
 * gradients painted in the container's own colour sit at each edge and move
 * WITH the content, covering two fixed `scroll` shadows underneath. The
 * shadow is therefore visible only while there is more to scroll toward, and
 * disappears by itself at each end. No JavaScript, no scroll listener.
 *
 * Set `--scroller-bg` on any element using this to its own background colour.
 */
.scroller {
	overflow-x: auto;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	--scroller-bg: var(--enc-bg);
	background:
		linear-gradient(to right, var(--scroller-bg) 30%, transparent) left center / 2.5rem 100% no-repeat local,
		linear-gradient(to left, var(--scroller-bg) 30%, transparent) right center / 2.5rem 100% no-repeat local,
		radial-gradient(farthest-side at 0 50%, hsl(30 20% 20% / 0.16), transparent) left center / 0.9rem 100% no-repeat scroll,
		radial-gradient(farthest-side at 100% 50%, hsl(30 20% 20% / 0.16), transparent) right center / 0.9rem 100% no-repeat scroll;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme='light']) .scroller {
		background-image:
			linear-gradient(to right, var(--scroller-bg) 30%, transparent),
			linear-gradient(to left, var(--scroller-bg) 30%, transparent),
			radial-gradient(farthest-side at 0 50%, hsl(0 0% 0% / 0.5), transparent),
			radial-gradient(farthest-side at 100% 50%, hsl(0 0% 0% / 0.5), transparent);
	}
}
:root[data-theme='dark'] .scroller {
	background-image:
		linear-gradient(to right, var(--scroller-bg) 30%, transparent),
		linear-gradient(to left, var(--scroller-bg) 30%, transparent),
		radial-gradient(farthest-side at 0 50%, hsl(0 0% 0% / 0.5), transparent),
		radial-gradient(farthest-side at 100% 50%, hsl(0 0% 0% / 0.5), transparent);
}