/*
Theme Name:  Calc Theme
Theme URI:   https://yourcalculator.com/
Author:      Calculator Hub
Description: Design system and templates for the Calculator & Converter Hub. Direction is "instrument panel" — everything derives from measurement: rulers, readouts, tick marks, tabular figures. There is deliberately no single dominant brand hue; the category accent becomes the page's primary colour, so the brand is the system rather than one colour.
Version:     0.1.0
Requires PHP: 8.1
License:     GPL-2.0-or-later
Text Domain: calc-theme
*/

/* ============================================================
   1. TOKENS
   Every colour and type value is a custom property so the
   Customizer (Bible §11) can override any of them inline in
   <head> without touching a stylesheet.
   ============================================================ */

:root {
	/* Surfaces. Paper is cool and faintly blue — engineering vellum,
	   not the cream that every AI-designed site reaches for. */
	--paper:        #F6F8FC;
	--surface:      #FFFFFF;
	--surface-sunk: #EEF1F8;

	/* Ink. Deep navy rather than black: softer on long articles,
	   and it keeps the category accents as the only true darks. */
	--ink:        #131A2E;
	--ink-muted:  #545E7B;
	/* Was #8D96AF — 2.95:1 on white, below the AA 4.5:1 floor for the small
	   uppercase labels (TOC title, share label, ad slots, card metadata) that
	   use it as text rather than decoration. Same hue and saturation, darkened
	   just enough to clear 4.5:1 on white and on --surface-sunk, still
	   visibly a step lighter than --ink-muted. Found by the Phase 6 Lighthouse
	   pass — token-level, not a per-selector fix, because 14 selectors share it. */
	--ink-faint:  #616C8A;
	--line:       #DDE3EF;
	--line-strong:#C3CBDD;

	/* Fallback accent, used off-category (homepage chrome, blog, pages).
	   Overridden per category by .cat-* below. */
	--cat-accent: #2C6BF0;
	--cat-ink:    #1449B8;
	--cat-wash:   #E6EEFE;

	--focus: #FF6B2C;

	/* On-dark muted text, for the footer only. --ink-faint cannot serve here:
	   no single colour clears 4.5:1 against both a white surface and this
	   site's near-black footer at once. Found by Lighthouse the same run that
	   caught --ink-faint's own AA failure — darkening --ink-faint for the
	   light-surface cases had, at that value, pushed the footer's reuse of it
	   from 5.86:1 down to 3.31:1. Two contexts, two tokens. */
	--footer-faint: #7B8DBB;

	/* Type. Families are injected inline by functions.php so only the
	   Customizer-selected pair is ever downloaded (Bible §11, §12). */
	--font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
	--font-body:    "Literata", Georgia, "Times New Roman", serif;

	/* Fluid scale. Ratio ~1.25 on mobile opening to ~1.33 on desktop. */
	--t-xs:   0.75rem;
	--t-sm:   0.875rem;
	--t-base: 1rem;
	--t-md:   clamp(1.06rem, 1.01rem + 0.24vw, 1.19rem);
	--t-lg:   clamp(1.25rem, 1.16rem + 0.44vw, 1.5rem);
	--t-xl:   clamp(1.5rem, 1.33rem + 0.85vw, 2rem);
	--t-2xl:  clamp(1.85rem, 1.55rem + 1.5vw, 2.75rem);
	--t-3xl:  clamp(2.25rem, 1.7rem + 2.75vw, 3.75rem);

	/* Readout: the number is the point of the page, so it gets its own step. */
	--t-readout: clamp(2.5rem, 1.9rem + 3vw, 4rem);

	--lh-tight: 1.12;
	--lh-snug:  1.3;
	--lh-body:  1.68;

	/* Space — 4px base, geometric-ish. */
	--s-1:  0.25rem;
	--s-2:  0.5rem;
	--s-3:  0.75rem;
	--s-4:  1rem;
	--s-5:  1.5rem;
	--s-6:  2rem;
	--s-7:  3rem;
	--s-8:  4rem;
	--s-9:  6rem;

	--radius-sm: 4px;
	--radius:    6px;
	--radius-lg: 14px;

	/* Hairline tinted borders instead of soft shadows: truer to the
	   instrument direction and cheaper for the browser to paint. */
	--border:        1px solid var(--line);
	--border-strong: 1px solid var(--line-strong);

	--wrap:      1220px;
	--wrap-text: 68ch;

	--header-h: 64px;
}

/* ------------------------------------------------------------
   Category accents — Bible §4.1's ten Phase-1 categories.
   Each gets three tokens, which is what makes ten vivid colours
   survive contact with accessibility:
     accent — the vivid hue, for fills, badges and the tick rule
     ink    — darkened, AA-safe for small text and links on white
     wash   — a pale tint for card and section backgrounds
   Hues are spread ~36° apart so the ten read as one system when
   they sit side by side in the homepage grid.
   ------------------------------------------------------------ */

.cat-finance       { --cat-accent:#00A472; --cat-ink:#00694A; --cat-wash:#E2F6EF; }
.cat-health        { --cat-accent:#FF3D6E; --cat-ink:#C0083D; --cat-wash:#FFE8EE; }
.cat-math          { --cat-accent:#2C6BF0; --cat-ink:#1449B8; --cat-wash:#E6EEFE; }
.cat-physics       { --cat-accent:#8A3FE8; --cat-ink:#6323B4; --cat-wash:#F2E9FE; }
.cat-statistics    { --cat-accent:#0AA2C0; --cat-ink:#00697A; --cat-wash:#E0F5F9; }
.cat-everyday-life { --cat-accent:#F2A00C; --cat-ink:#875600; --cat-wash:#FEF2DB; }
.cat-construction  { --cat-accent:#FA6224; --cat-ink:#BC3907; --cat-wash:#FFEBE2; }
.cat-chemistry     { --cat-accent:#74BE24; --cat-ink:#46740F; --cat-wash:#EFF9DC; }
.cat-food          { --cat-accent:#E62E9B; --cat-ink:#A50A69; --cat-wash:#FDE6F4; }
.cat-conversion    { --cat-accent:#5B4BE8; --cat-ink:#3C2CB8; --cat-wash:#ECE9FE; }

/* ============================================================
   2. BASE
   ============================================================ */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-h) + var(--s-4));
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: var(--t-base);
	line-height: var(--lh-body);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	font-weight: 700;
	line-height: var(--lh-tight);
	letter-spacing: -0.02em;
	margin: 0 0 var(--s-3);
	text-wrap: balance;
}

h1 { font-size: var(--t-3xl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); }
h4 { font-size: var(--t-md); }

p, ul, ol, dl, table, blockquote, figure { margin: 0 0 var(--s-4); }

a {
	color: var(--cat-ink);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.16em;
}
a:hover { text-decoration-thickness: 2px; }

img, svg, video { max-width: 100%; height: auto; }

/* One focus treatment everywhere, in the one colour reserved for it,
   so it is never mistaken for a category accent. */
:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}

::selection { background: var(--cat-accent); color: #fff; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip-path: inset(50%);
	white-space: nowrap; border: 0;
}

.skip-link {
	position: absolute;
	left: var(--s-3); top: -100px;
	z-index: 200;
	padding: var(--s-3) var(--s-4);
	background: var(--ink); color: #fff;
	border-radius: var(--radius);
	font-family: var(--font-display);
	text-decoration: none;
}
.skip-link:focus { top: var(--s-3); }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ============================================================
   3. SIGNATURE — the tick rule
   A ruler edge. Ten segments of category colour under the hero;
   a hairline under the header; a single accent once you are
   inside a category, as if the instrument has tuned to one
   channel. Pure CSS, no images, no JS.
   ============================================================ */

.tickrule {
	--tick-h: 8px;
	height: var(--tick-h);
	border: 0;
	margin: 0;
	background-image:
		repeating-linear-gradient(90deg, rgba(19,26,46,0.28) 0 1px, transparent 1px 9px),
		var(--tick-fill, var(--cat-accent));
	background-size: 100% 100%, 100% 100%;
}

/* Full spectrum — all ten categories, in the §4.1 order. */
.tickrule--spectrum {
	--tick-fill: linear-gradient(90deg,
		#00A472 0 10%, #FF3D6E 10% 20%, #2C6BF0 20% 30%, #8A3FE8 30% 40%,
		#0AA2C0 40% 50%, #F2A00C 50% 60%, #FA6224 60% 70%, #74BE24 70% 80%,
		#E62E9B 80% 90%, #5B4BE8 90% 100%);
}

.tickrule--thin { --tick-h: 4px; }
.tickrule--tall { --tick-h: 14px; }

/* ============================================================
   4. LAYOUT
   ============================================================ */

.wrap {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--s-4);
}

@media (min-width: 900px) {
	.wrap { padding-inline: var(--s-5); }
}

.section { padding-block: var(--s-7); }
.section--tight { padding-block: var(--s-5); }

/* Content + ad rail. Bible §13 wants a fixed-size sticky sidebar on
   desktop; below 1080px the rail drops out entirely rather than
   reflowing, which keeps CLS at zero. */
.layout-rail {
	display: grid;
	gap: var(--s-6);
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
}

@media (min-width: 1080px) {
	.layout-rail { grid-template-columns: minmax(0, 1fr) 300px; }
	.layout-rail__aside { position: sticky; top: calc(var(--header-h) + var(--s-4)); }
}

/* --- Header --- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--surface);
	border-bottom: var(--border);
}

.site-header__bar {
	display: flex;
	align-items: center;
	gap: var(--s-4);
	min-height: var(--header-h);
}

.site-brand {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--t-md);
	letter-spacing: -0.03em;
	color: var(--ink);
	text-decoration: none;
	white-space: nowrap;
}
.site-brand img { max-height: 34px; width: auto; }

/* Placeholder mark until a real logo is uploaded (Bible §19 blocker 3):
   a miniature of the tick rule, so even the fallback is on-system. */
.site-brand__mark {
	width: 26px; height: 26px;
	border-radius: var(--radius-sm);
	background-image:
		repeating-linear-gradient(90deg, rgba(255,255,255,0.55) 0 1px, transparent 1px 5px),
		linear-gradient(135deg, #2C6BF0, #8A3FE8 45%, #E62E9B);
	flex: none;
}

.nav-primary ul {
	display: flex;
	gap: var(--s-4);
	list-style: none;
	margin: 0; padding: 0;
}
.nav-primary a {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: var(--t-sm);
	color: var(--ink-muted);
	text-decoration: none;
	white-space: nowrap;
}
.nav-primary a:hover,
.nav-primary .current-menu-item > a { color: var(--ink); }

.header-spacer { margin-inline-start: auto; }

.nav-toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	background: none;
	border: var(--border-strong);
	border-radius: var(--radius);
	padding: var(--s-2) var(--s-3);
	font: inherit;
	font-family: var(--font-display);
	font-size: var(--t-sm);
	color: var(--ink);
	cursor: pointer;
}

@media (min-width: 900px) { .nav-toggle { display: none; } }

@media (max-width: 899px) {
	.nav-primary {
		display: none;
		position: absolute;
		inset-inline: 0;
		top: 100%;
		background: var(--surface);
		border-bottom: var(--border);
		padding: var(--s-4);
	}
	.nav-primary.is-open { display: block; }
	.nav-primary ul { flex-direction: column; gap: var(--s-3); }
	.nav-primary a { font-size: var(--t-md); }
}

/* --- Footer --- */

.site-footer {
	margin-top: var(--s-8);
	background: var(--ink);
	color: #C9D0E2;
	padding-block: var(--s-7) var(--s-5);
}
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer h2 {
	font-size: var(--t-sm);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--footer-faint);
}
.site-footer__cols {
	display: grid;
	gap: var(--s-6);
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li + li { margin-top: var(--s-2); }
.site-footer__legal {
	margin-top: var(--s-6);
	padding-top: var(--s-4);
	border-top: 1px solid rgba(255,255,255,0.14);
	font-size: var(--t-sm);
	color: var(--footer-faint);
}

/* ============================================================
   5. COMPONENTS
   ============================================================ */

/* --- Buttons --- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s-2);
	padding: var(--s-3) var(--s-5);
	border: 1px solid transparent;
	border-radius: var(--radius);
	background: var(--cat-accent);
	color: #fff;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--t-sm);
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: filter 0.15s ease, transform 0.15s ease;
}
.btn:hover { filter: brightness(0.92); }
.btn:active { transform: translateY(1px); }

.btn--quiet {
	background: var(--surface);
	color: var(--ink);
	border-color: var(--line-strong);
}
.btn--quiet:hover { background: var(--surface-sunk); filter: none; }

.btn--ghost {
	background: none;
	color: var(--cat-ink);
	border-color: transparent;
	padding-inline: var(--s-2);
}
.btn--ghost:hover { background: var(--cat-wash); filter: none; }

.btn--block { width: 100%; }

/* --- Category badge + card --- */

.badge {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	padding: 3px var(--s-3) 3px var(--s-2);
	border-radius: 999px;
	background: var(--cat-wash);
	color: var(--cat-ink);
	font-family: var(--font-display);
	font-weight: 500;
	font-size: var(--t-xs);
	letter-spacing: 0.02em;
	text-decoration: none;
	white-space: nowrap;
}
.badge::before {
	content: "";
	width: 8px; height: 8px;
	border-radius: 2px;
	background: var(--cat-accent);
	flex: none;
}

.card-grid {
	display: grid;
	gap: var(--s-4);
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	list-style: none;
	margin: 0; padding: 0;
}

.cat-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
	padding: var(--s-5) var(--s-4) var(--s-4);
	background: var(--surface);
	border: var(--border);
	border-radius: var(--radius);
	text-decoration: none;
	color: inherit;
	overflow: hidden;
	transition: border-color 0.15s ease, transform 0.15s ease;
}
/* The tick rule again, at card scale — the accent is the only
   colour the card carries, so the grid reads as the spectrum. */
.cat-card::before {
	content: "";
	position: absolute;
	inset-inline: 0; top: 0;
	height: 6px;
	background-image:
		repeating-linear-gradient(90deg, rgba(255,255,255,0.45) 0 1px, transparent 1px 7px),
		var(--cat-accent);
}
.cat-card:hover { border-color: var(--cat-accent); transform: translateY(-2px); }

.cat-card__name {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--t-lg);
	letter-spacing: -0.02em;
	color: var(--ink);
}
.cat-card__count {
	font-family: var(--font-display);
	font-size: var(--t-xs);
	color: var(--ink-faint);
	font-variant-numeric: tabular-nums;
}
.cat-card__desc { font-size: var(--t-sm); color: var(--ink-muted); line-height: 1.5; }

/* Calculator link card — denser than a category card. */
.calc-card {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--s-3);
	padding: var(--s-4);
	background: var(--surface);
	border: var(--border);
	border-inline-start: 3px solid var(--cat-accent);
	border-radius: var(--radius);
	text-decoration: none;
	color: inherit;
	transition: border-color 0.15s ease, background 0.15s ease;
}
.calc-card:hover { background: var(--cat-wash); }
.calc-card__title {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: var(--t-base);
	line-height: 1.35;
	color: var(--ink);
}
.calc-card__meta { font-size: var(--t-xs); color: var(--ink-faint); margin-top: var(--s-1); }

/* --- Favourite heart. UI only in Phase 1; wired up in Phase 2. --- */

.fav-toggle {
	flex: none;
	display: inline-grid;
	place-items: center;
	width: 34px; height: 34px;
	border: var(--border);
	border-radius: 999px;
	background: var(--surface);
	color: var(--ink-faint);
	cursor: pointer;
	padding: 0;
	transition: color 0.15s ease, border-color 0.15s ease;
}
.fav-toggle:hover { color: var(--cat-accent); border-color: var(--cat-accent); }
.fav-toggle[aria-pressed="true"] { color: var(--cat-accent); border-color: var(--cat-accent); }
.fav-toggle[aria-pressed="true"] svg { fill: currentColor; }
.fav-toggle svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; }

/* --- The calculator widget: input group + readout --- */

.calc-widget {
	background: var(--surface);
	border: var(--border-strong);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.calc-widget__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-3);
	padding: var(--s-4) var(--s-5);
	background: var(--cat-wash);
	border-bottom: var(--border);
}
.calc-widget__title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--t-md);
	margin: 0;
	color: var(--cat-ink);
}

.calc-widget__body { padding: var(--s-5); display: grid; gap: var(--s-4); }

@media (min-width: 720px) {
	.calc-widget__body--two-col { grid-template-columns: 1fr 1fr; }
}

.calc-field { display: grid; gap: var(--s-2); }
.calc-field[hidden] { display: none; }

.calc-field__label {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: var(--t-sm);
	color: var(--ink);
	display: flex;
	align-items: center;
	gap: var(--s-2);
}

.calc-field__hint { font-size: var(--t-xs); color: var(--ink-muted); line-height: 1.45; }

/* Input + unit, joined into one control so the unit reads as part of
   the instrument rather than a separate dropdown floating beside it. */
.calc-input {
	display: flex;
	align-items: stretch;
	border: var(--border-strong);
	border-radius: var(--radius);
	background: var(--surface);
	overflow: hidden;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.calc-input:focus-within {
	border-color: var(--cat-accent);
	box-shadow: 0 0 0 3px var(--cat-wash);
}

.calc-input input,
.calc-input select {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: none;
	padding: var(--s-3);
	font-family: var(--font-display);
	font-weight: 500;
	font-size: var(--t-md);
	font-variant-numeric: tabular-nums;
	color: var(--ink);
}
.calc-input input:focus,
.calc-input select:focus { outline: none; }

.calc-input__affix {
	flex: none;
	display: grid;
	place-items: center;
	padding-inline: var(--s-3);
	background: var(--surface-sunk);
	border-inline-start: var(--border);
	font-family: var(--font-display);
	font-size: var(--t-sm);
	color: var(--ink-muted);
	white-space: nowrap;
}
.calc-input__affix select {
	border: 0; background: none; padding: 0;
	font-size: var(--t-sm); color: var(--ink-muted);
}

.calc-input--invalid { border-color: #C0083D; }
.calc-field__error { font-size: var(--t-xs); color: #C0083D; }

/* Segmented control, for things like metric/imperial. Real radios sit under
   the pills: they arrive keyboard-navigable and announce themselves as a
   group, which a row of buttons has to fake. */
.calc-segment {
	display: inline-flex;
	padding: 3px;
	background: var(--surface-sunk);
	border-radius: var(--radius);
	gap: 2px;
}

.calc-segment__radio {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px;
	clip-path: inset(50%);
}

.calc-segment__option {
	padding: var(--s-2) var(--s-4);
	border-radius: var(--radius-sm);
	font-family: var(--font-display);
	font-weight: 500;
	font-size: var(--t-sm);
	color: var(--ink-muted);
	cursor: pointer;
	user-select: none;
}

.calc-segment__radio:checked + .calc-segment__option {
	background: var(--surface);
	color: var(--cat-ink);
	box-shadow: 0 1px 2px rgba(19,26,46,0.1);
}

.calc-segment__radio:focus-visible + .calc-segment__option {
	outline: 2px solid var(--focus);
	outline-offset: 2px;
}

/* Secondary fields — the units most people never touch. A <details> gives
   the open/closed behaviour, the keyboard support and the animation for
   nothing, so there is no state to manage in JavaScript. */
.calc-more {
	grid-column: 1 / -1;
	border-top: var(--border);
	padding-top: var(--s-4);
}

.calc-more__summary {
	cursor: pointer;
	font-family: var(--font-display);
	font-size: var(--t-sm);
	font-weight: 500;
	color: var(--cat-ink);
	list-style: none;
}
.calc-more__summary::-webkit-details-marker { display: none; }

.calc-more__summary::before {
	content: "+";
	display: inline-block;
	width: 1.25em;
	font-weight: 700;
}
.calc-more[open] .calc-more__summary::before { content: "−"; }

.calc-more__summary:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 3px;
	border-radius: var(--radius-sm);
}

.calc-more__grid {
	display: grid;
	gap: var(--s-4);
	margin-top: var(--s-4);
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

/* The readout. This is the point of the page, so it gets the
   largest type on it, tabular figures, and the tick baseline. */
.calc-result {
	padding: var(--s-5);
	background: var(--ink);
	color: #fff;
	display: grid;
	gap: var(--s-4);
}

.calc-result__row { display: grid; gap: var(--s-1); }

.calc-result__label {
	font-family: var(--font-display);
	font-size: var(--t-xs);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: #97A1BC;
}

.calc-result__value {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--t-readout);
	line-height: 1;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
	color: #fff;
	display: flex;
	align-items: baseline;
	gap: var(--s-2);
	flex-wrap: wrap;
	/* Reserves the line box before JS fills it, so the first
	   calculation cannot shift the page (Bible §12, CLS). */
	min-height: 1em;
}

.calc-result__unit {
	font-size: var(--t-lg);
	font-weight: 500;
	color: var(--cat-accent);
	letter-spacing: 0;
}

.calc-result__row--primary { padding-bottom: var(--s-4); border-bottom: 1px solid rgba(255,255,255,0.16); }

.calc-result__secondary {
	display: grid;
	gap: var(--s-4);
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.calc-result__secondary .calc-result__value { font-size: var(--t-xl); }

.calc-result__note { font-size: var(--t-sm); color: #B6BFD6; line-height: 1.5; }

/* A banded verdict — "Healthy weight", "Overweight". The tone is the
   calculator's judgement, so it is never the category accent: an amber
   pill has to mean the same thing on a health page and a finance one. */
.calc-band {
	display: inline-block;
	padding: var(--s-1) var(--s-3);
	border-radius: 999px;
	font-size: var(--t-lg);
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.3;
}
.calc-band--good    { background: #C8F5DF; color: #00553A; }
.calc-band--low     { background: #D6ECFB; color: #08466E; }
.calc-band--warn    { background: #FDE9C4; color: #7A4A00; }
.calc-band--high    { background: #FFD9E1; color: #96072F; }
.calc-band--neutral { background: var(--surface-sunk); color: var(--ink); }

/* Data panels sit inside the dark readout as lit surfaces — the numbers
   they hold are dense, and dense figures want paper, not ink. */
.calc-chart,
.calc-table {
	margin: 0;
	background: var(--surface);
	border-radius: var(--radius);
	padding: var(--s-4);
	color: var(--ink);
}

.calc-chart svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}
.calc-chart__grid { stroke: var(--line); stroke-width: 1; }
.calc-chart__tick {
	fill: var(--ink-faint);
	font-family: var(--font-display);
	font-size: 11px;
	font-variant-numeric: tabular-nums;
}
.calc-chart__line {
	stroke: var(--cat-accent);
	stroke-width: 2.5;
	stroke-linejoin: round;
	stroke-linecap: round;
}
.calc-chart__line--2 { stroke: var(--cat-ink); stroke-dasharray: 5 4; }

.calc-chart__legend {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-4);
	margin-top: var(--s-3);
	font-size: var(--t-xs);
	color: var(--ink-muted);
}
.calc-chart__key::before {
	content: "";
	display: inline-block;
	width: 14px; height: 3px;
	margin-inline-end: var(--s-2);
	vertical-align: middle;
	background: var(--cat-accent);
	border-radius: 2px;
}
.calc-chart__key--2::before { background: var(--cat-ink); }

.calc-table__title {
	font-family: var(--font-display);
	font-size: var(--t-xs);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--ink-muted);
	margin-bottom: var(--s-3);
}

/* A 360-row schedule is wider than a phone; let the table scroll rather
   than the page (the header row stays put while it does). */
.calc-table__scroll {
	overflow-x: auto;
	max-height: 24rem;
	overflow-y: auto;
	border: var(--border);
	border-radius: var(--radius-sm);
}
.calc-table table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.calc-table th,
.calc-table td {
	padding: var(--s-2) var(--s-3);
	text-align: start;
	white-space: nowrap;
	border-bottom: 1px solid var(--line);
}
.calc-table th {
	position: sticky;
	top: 0;
	z-index: 1;
	background: var(--surface-sunk);
	font-family: var(--font-display);
	font-size: var(--t-xs);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--ink-muted);
}
.calc-table td { font-variant-numeric: tabular-nums; }
.calc-table .is-num { text-align: end; }
.calc-table tbody tr:last-child td { border-bottom: 0; }
.calc-table__more { margin-top: var(--s-3); }

.calc-widget__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-3);
	padding: var(--s-4) var(--s-5);
	border-top: var(--border);
	background: var(--surface);
}

/* --- Share buttons (Bible §6) --- */

.share {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	flex-wrap: wrap;
}
.share__label {
	font-family: var(--font-display);
	font-size: var(--t-xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--ink-faint);
}
.share__btn {
	display: inline-grid;
	place-items: center;
	width: 36px; height: 36px;
	border: var(--border);
	border-radius: var(--radius);
	background: var(--surface);
	color: var(--ink-muted);
	cursor: pointer;
	text-decoration: none;
	padding: 0;
}
.share__btn:hover { border-color: var(--cat-accent); color: var(--cat-ink); background: var(--cat-wash); }
.share__btn svg { width: 17px; height: 17px; fill: currentColor; }

/* --- Breadcrumb --- */

.breadcrumb {
	font-family: var(--font-display);
	font-size: var(--t-xs);
	color: var(--ink-muted);
	padding-block: var(--s-4) 0;
}
.breadcrumb ol {
	display: flex; flex-wrap: wrap;
	gap: var(--s-2);
	list-style: none; margin: 0; padding: 0;
}
.breadcrumb li { display: flex; align-items: center; gap: var(--s-2); }
.breadcrumb li + li::before { content: "/"; color: var(--line-strong); }
.breadcrumb a { color: var(--ink-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--cat-ink); text-decoration: underline; }

/* --- Table of contents (Bible §7.3) --- */

.toc {
	background: var(--surface);
	border: var(--border);
	border-radius: var(--radius);
	padding: var(--s-4);
}
.toc__title {
	font-family: var(--font-display);
	font-size: var(--t-xs);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--ink-faint);
	margin: 0 0 var(--s-3);
}
.toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc li + li { margin-top: var(--s-2); }
.toc a {
	display: flex;
	gap: var(--s-3);
	font-size: var(--t-sm);
	line-height: 1.45;
	color: var(--ink-muted);
	text-decoration: none;
}
/* Numbered because a TOC genuinely is an ordered sequence through
   the article — the numbers carry position, they are not decoration. */
.toc a::before {
	content: counter(toc, decimal-leading-zero);
	font-family: var(--font-display);
	font-variant-numeric: tabular-nums;
	color: var(--line-strong);
	flex: none;
}
.toc a:hover { color: var(--cat-ink); }
.toc a[aria-current="true"] { color: var(--cat-ink); font-weight: 600; }
.toc a[aria-current="true"]::before { color: var(--cat-accent); }
.toc li li { margin-inline-start: var(--s-5); }

/* --- Star rating (Bible §7.9) --- */

.rating { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.rating__stars { display: inline-flex; gap: 2px; }
.rating__star {
	background: none; border: 0; padding: 2px; cursor: pointer;
	color: var(--line-strong); line-height: 0;
}
.rating__star svg { width: 22px; height: 22px; fill: currentColor; }
.rating__star.is-on { color: #F2A00C; }
.rating__star:hover { color: #F2A00C; }
.rating__meta {
	font-family: var(--font-display);
	font-size: var(--t-sm);
	color: var(--ink-muted);
	font-variant-numeric: tabular-nums;
}

/* --- Author / reviewer box (Bible §8) --- */

.author-box {
	display: grid;
	gap: var(--s-4);
	padding: var(--s-5);
	background: var(--surface);
	border: var(--border);
	border-radius: var(--radius);
}
@media (min-width: 640px) { .author-box--pair { grid-template-columns: 1fr 1fr; } }

.author { display: flex; gap: var(--s-4); align-items: flex-start; }
.author__avatar {
	flex: none;
	width: 56px; height: 56px;
	border-radius: 999px;
	object-fit: cover;
	background: var(--surface-sunk);
	/* Ring in the category accent — the one flourish the box gets. */
	box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--cat-accent);
}
.author__role {
	font-family: var(--font-display);
	font-size: var(--t-xs);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--ink-faint);
}
.author__name {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--t-base);
	margin: 2px 0;
}
.author__name a { color: var(--ink); text-decoration: none; }
.author__name a:hover { color: var(--cat-ink); text-decoration: underline; }
.author__cred { font-size: var(--t-xs); color: var(--cat-ink); font-family: var(--font-display); }
.author__bio { font-size: var(--t-sm); color: var(--ink-muted); line-height: 1.55; margin-top: var(--s-2); }

/* --- Feedback widget (Bible §7.5) --- */

.feedback {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--s-3);
	padding: var(--s-4) var(--s-5);
	background: var(--cat-wash);
	border-radius: var(--radius);
}
.feedback__q { font-family: var(--font-display); font-weight: 500; font-size: var(--t-sm); color: var(--cat-ink); }
.feedback__actions { display: flex; gap: var(--s-2); }

/* --- Sources (Bible §7.8) --- */

.sources { font-size: var(--t-sm); }
.sources ol { padding-inline-start: var(--s-5); color: var(--ink-muted); }
.sources li { margin-bottom: var(--s-2); }

/* --- Modal shell (auth in Phase 2) --- */

.modal[hidden] { display: none; }
.modal {
	position: fixed;
	inset: 0;
	z-index: 300;
	display: grid;
	place-items: center;
	padding: var(--s-4);
	background: rgba(19,26,46,0.55);
}
.modal__panel {
	width: 100%;
	max-width: 420px;
	max-height: 90vh;
	overflow-y: auto;
	background: var(--surface);
	border-radius: var(--radius-lg);
	overflow: hidden;
}
.modal__head {
	display: flex; align-items: center; justify-content: space-between;
	gap: var(--s-3);
	padding: var(--s-4) var(--s-5);
	border-bottom: var(--border);
}
.modal__title { font-family: var(--font-display); font-size: var(--t-md); margin: 0; }
.modal__body { padding: var(--s-5); display: grid; gap: var(--s-4); }
.modal__close {
	background: none; border: 0; cursor: pointer;
	font-size: var(--t-lg); line-height: 1; color: var(--ink-muted); padding: var(--s-1);
}
.modal__tabs { display: flex; gap: var(--s-1); padding: var(--s-3) var(--s-5) 0; }
.modal__tab {
	background: none; border: 0; cursor: pointer;
	padding: var(--s-3) var(--s-4);
	font-family: var(--font-display); font-weight: 500; font-size: var(--t-sm);
	color: var(--ink-muted);
	border-bottom: 2px solid transparent;
}
.modal__tab[aria-selected="true"] { color: var(--cat-ink); border-bottom-color: var(--cat-accent); }

/* --- Search --- */

.search-form { position: relative; }
.search-form input[type="search"] {
	width: 100%;
	padding: var(--s-4) var(--s-5);
	padding-inline-end: 3.5rem;
	border: var(--border-strong);
	border-radius: var(--radius);
	background: var(--surface);
	font-family: var(--font-display);
	font-size: var(--t-md);
	color: var(--ink);
}
.search-form input[type="search"]:focus {
	outline: none;
	border-color: var(--cat-accent);
	box-shadow: 0 0 0 3px var(--cat-wash);
}
.search-form__submit {
	position: absolute;
	inset-inline-end: 6px; top: 50%;
	transform: translateY(-50%);
	width: 40px; height: 40px;
	display: grid; place-items: center;
	border: 0; border-radius: var(--radius-sm);
	background: var(--ink); color: #fff;
	cursor: pointer;
}
.search-form__submit svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; }

/* Instant results dropdown (Bible §10). */
.search-results-live {
	position: absolute;
	inset-inline: 0; top: calc(100% + 6px);
	z-index: 120;
	background: var(--surface);
	border: var(--border-strong);
	border-radius: var(--radius);
	max-height: 60vh;
	overflow-y: auto;
	list-style: none;
	margin: 0; padding: var(--s-2);
	box-shadow: 0 12px 28px rgba(19,26,46,0.14);
}
.search-results-live[hidden] { display: none; }
.search-results-live a {
	display: flex; align-items: center; justify-content: space-between;
	gap: var(--s-3);
	padding: var(--s-3);
	border-radius: var(--radius-sm);
	text-decoration: none;
	color: var(--ink);
	font-family: var(--font-display);
	font-size: var(--t-sm);
}
.search-results-live a:hover,
.search-results-live a:focus,
.search-results-live [aria-selected="true"] a { background: var(--surface-sunk); }
.search-results-live__empty { padding: var(--s-4); color: var(--ink-muted); font-size: var(--t-sm); }

/* --- Ad slots (Bible §13). Fixed boxes, always reserved, so an ad
   that loads late or never cannot move the page. --- */

.ad-slot {
	display: grid;
	place-items: center;
	background: var(--surface-sunk);
	border: 1px dashed var(--line-strong);
	border-radius: var(--radius);
	color: var(--ink-faint);
	font-family: var(--font-display);
	font-size: var(--t-xs);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	overflow: hidden;
}
.ad-slot--rail       { width: 300px; height: 600px; }
.ad-slot--inline     { width: 100%; max-width: 728px; height: 90px; margin-inline: auto; }
.ad-slot--in-article { width: 100%; max-width: 336px; height: 280px; margin: var(--s-6) auto; }

@media (max-width: 720px) {
	.ad-slot--inline { max-width: 320px; height: 100px; }
}

/* ============================================================
   6. PROSE — the article body (Bible §7.10, 600–1500+ words)
   ============================================================ */

.prose { max-width: var(--wrap-text); font-size: var(--t-md); }
.prose > * + * { margin-top: var(--s-4); }
.prose h2 { margin-top: var(--s-7); scroll-margin-top: calc(var(--header-h) + var(--s-4)); }
.prose h3 { margin-top: var(--s-5); scroll-margin-top: calc(var(--header-h) + var(--s-4)); }
.prose ul, .prose ol { padding-inline-start: var(--s-5); }
.prose li + li { margin-top: var(--s-2); }
.prose strong { font-weight: 600; }

.prose blockquote {
	margin-inline: 0;
	padding: var(--s-2) 0 var(--s-2) var(--s-4);
	border-inline-start: 3px solid var(--cat-accent);
	color: var(--ink-muted);
	font-style: italic;
}

.prose table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.prose th, .prose td { padding: var(--s-3); border-bottom: var(--border); text-align: start; }
.prose th { font-family: var(--font-display); font-weight: 700; color: var(--ink); }
.prose td { font-variant-numeric: tabular-nums; }

/* Wide content scrolls inside itself; the page never scrolls sideways. */
.prose .table-scroll { overflow-x: auto; }

/* The highlighted formula box (Bible §7.10). Rendered as a readout
   on paper: the one place the article borrows the widget's voice. */
.formula-box {
	padding: var(--s-5);
	background: var(--surface);
	border: var(--border-strong);
	border-radius: var(--radius);
	border-inline-start: 4px solid var(--cat-accent);
	overflow-x: auto;
}
.formula-box__label {
	font-family: var(--font-display);
	font-size: var(--t-xs);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--ink-faint);
	margin-bottom: var(--s-2);
}
.formula-box__eq {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: var(--t-lg);
	font-variant-numeric: tabular-nums;
	color: var(--ink);
	white-space: nowrap;
}
.formula-box__where { margin-top: var(--s-3); font-size: var(--t-sm); color: var(--ink-muted); }

/* FAQ (Bible §7.10, FAQPage schema). */
.faq { display: grid; gap: var(--s-2); }
.faq details {
	background: var(--surface);
	border: var(--border);
	border-radius: var(--radius);
	padding: var(--s-4);
}
.faq summary {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: var(--t-base);
	cursor: pointer;
	color: var(--ink);
	list-style: none;
	display: flex;
	justify-content: space-between;
	gap: var(--s-3);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--cat-accent); font-size: var(--t-lg); line-height: 1; }
.faq details[open] summary::after { content: "\2212"; }
.faq details[open] summary { margin-bottom: var(--s-3); }

/* Disclaimer — mandatory on Finance and Health (Bible §7.10). */
.disclaimer {
	padding: var(--s-4);
	background: var(--surface-sunk);
	border-inline-start: 3px solid var(--ink-faint);
	border-radius: var(--radius-sm);
	font-size: var(--t-sm);
	color: var(--ink-muted);
}
.disclaimer strong { color: var(--ink); }

/* ============================================================
   7. PAGE FURNITURE
   ============================================================ */

.page-head { padding-block: var(--s-6) var(--s-5); }
.page-head__lede { font-size: var(--t-md); color: var(--ink-muted); max-width: var(--wrap-text); }

/* Homepage hero. The thesis: the search field is the product's front
   door, so it is the hero — not a slogan over a gradient. */
.hero { padding-block: var(--s-7) var(--s-6); text-align: center; }
.hero__title { font-size: var(--t-3xl); margin-bottom: var(--s-3); }
.hero__lede {
	font-size: var(--t-md);
	color: var(--ink-muted);
	max-width: 54ch;
	margin: 0 auto var(--s-5);
}
.hero__search { max-width: 620px; margin-inline: auto; }

.eyebrow {
	font-family: var(--font-display);
	font-size: var(--t-xs);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--ink-faint);
	margin-bottom: var(--s-2);
}

.section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--s-4);
	margin-bottom: var(--s-4);
	flex-wrap: wrap;
}

.empty-state {
	padding: var(--s-7) var(--s-4);
	text-align: center;
	color: var(--ink-muted);
	background: var(--surface);
	border: 1px dashed var(--line-strong);
	border-radius: var(--radius);
}

/* 404 (Bible §3). The code is set as a readout, because on this site
   a big number always means "here is your answer" — and here the
   answer is that the page is missing. */
.error-code {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(4rem, 2rem + 12vw, 9rem);
	line-height: 1;
	letter-spacing: -0.05em;
	font-variant-numeric: tabular-nums;
	color: var(--ink);
	margin-bottom: var(--s-3);
}

.pagination { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-6); }
.pagination .page-numbers {
	display: inline-grid; place-items: center;
	min-width: 40px; height: 40px;
	padding-inline: var(--s-3);
	border: var(--border);
	border-radius: var(--radius);
	background: var(--surface);
	font-family: var(--font-display);
	font-size: var(--t-sm);
	color: var(--ink-muted);
	text-decoration: none;
}
.pagination .page-numbers:hover { border-color: var(--cat-accent); color: var(--cat-ink); }
.pagination .page-numbers.current { background: var(--ink); color: #fff; border-color: var(--ink); }

/* Post/article list. */
.post-list { display: grid; gap: var(--s-5); list-style: none; margin: 0; padding: 0; }
.post-card {
	background: var(--surface);
	border: var(--border);
	border-radius: var(--radius);
	padding: var(--s-5);
}
.post-card__title { font-size: var(--t-lg); margin-bottom: var(--s-2); }
.post-card__title a { color: var(--ink); text-decoration: none; }
.post-card__title a:hover { color: var(--cat-ink); }
.post-card__meta {
	font-family: var(--font-display);
	font-size: var(--t-xs);
	color: var(--ink-faint);
	margin-bottom: var(--s-3);
}
.post-card__excerpt { font-size: var(--t-sm); color: var(--ink-muted); }

/* Account shell (fleshed out in Phase 2). */
.account-tabs {
	display: flex;
	gap: var(--s-1);
	border-bottom: var(--border);
	margin-bottom: var(--s-5);
	overflow-x: auto;
}
.account-tabs a {
	padding: var(--s-3) var(--s-4);
	font-family: var(--font-display);
	font-weight: 500;
	font-size: var(--t-sm);
	color: var(--ink-muted);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	white-space: nowrap;
}
.account-tabs a[aria-current="page"] { color: var(--cat-ink); border-bottom-color: var(--cat-accent); }

/* Added with the templates. */
.toc__sub { margin-inline-start: var(--s-5); }
.author-box__policy { font-size: var(--t-xs); color: var(--ink-faint); margin-top: var(--s-2); }
.breadcrumb { padding-inline: 0; }
.hero__search--flush { margin-inline-start: 0; }

/* ---------------------------------------------------------------
   Cookie consent (Phase 5).

   Docked to the bottom rather than a modal over the page: the
   reader came for a calculator, and a full-screen interruption
   before they have seen anything is the pattern this site is
   trying not to be. It sits last in the DOM, so it is also last
   in the tab order — reachable, never in the way.
   --------------------------------------------------------------- */

.calc-consent {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 60;
	background: var(--surface);
	border-top: 2px solid var(--cat-accent);
	box-shadow: 0 -1px 0 var(--line), 0 -12px 32px rgb(19 26 46 / 8%);
}
.calc-consent[hidden] { display: none; }

.calc-consent__inner {
	max-width: 68rem;
	margin-inline: auto;
	padding: var(--s-4) var(--s-5);
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-4);
	align-items: center;
	justify-content: space-between;
}

.calc-consent__text { flex: 1 1 24rem; }
.calc-consent__title {
	font-family: var(--font-display);
	font-size: var(--t-base);
	font-weight: 600;
	margin: 0 0 var(--s-1);
}
.calc-consent__text p {
	margin: 0;
	font-size: var(--t-sm);
	line-height: var(--lh-snug);
	color: var(--ink-muted);
}

.calc-consent__actions {
	display: flex;
	gap: var(--s-3);
	flex: 0 0 auto;
}
/* Equal visual weight on both choices — a greyed-out reject button
   is a dark pattern with a stylesheet in front of it. */
.calc-consent__actions .btn { min-width: 9rem; justify-content: center; }

.calc-consent__reopen {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	color: inherit;
	text-decoration: underline;
	cursor: pointer;
}

@media (max-width: 40rem) {
	.calc-consent__actions { width: 100%; }
	.calc-consent__actions .btn { flex: 1; min-width: 0; }
}

/* ---------------------------------------------------------------
   Contact form (Phase 5).
   --------------------------------------------------------------- */

.calc-contact { max-width: 34rem; }
.calc-contact__field { display: flex; flex-direction: column; gap: var(--s-2); margin-bottom: var(--s-5); }
.calc-contact__field label { font-family: var(--font-display); font-weight: 500; font-size: var(--t-sm); }
.calc-contact__field input,
.calc-contact__field textarea {
	font: inherit;
	padding: var(--s-3);
	border: 1px solid var(--line-strong);
	border-radius: var(--radius);
	background: var(--surface);
	color: var(--ink);
}
.calc-contact__field textarea { resize: vertical; min-height: 9rem; }
.calc-contact__field input:focus-visible,
.calc-contact__field textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.calc-contact__hint { font-size: var(--t-xs); color: var(--ink-faint); }
.calc-contact__status { display: block; margin-bottom: var(--s-5); }

/* Off-screen rather than display:none — a bot reading the CSS can
   spot display:none, and some fill hidden fields anyway. */
.calc-contact__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}