/*
 * Plain CSS, no build step.
 *
 * Deliberate: the point of moving to WordPress was that the owner can edit the site without a
 * toolchain. A theme that needs npm to change a colour defeats that.
 */

:root {
	--bg: #020617;
	--panel: #0f172a;
	--line: #1e293b;
	--text: #cbd5e1;
	--muted: #94a3b8;
	--white: #ffffff;
	--accent: #22d3ee;
	--warn-bg: rgba(245, 158, 11, 0.1);
	--warn-line: rgba(245, 158, 11, 0.3);
	--warn-text: #fde68a;
	--font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3 { color: var(--white); line-height: 1.25; }
h1 { font-size: 2rem; margin: 0 0 .5rem; }
h2 { font-size: 1.35rem; margin: 2.5rem 0 .75rem; }
a { color: var(--accent); }
a:hover { text-decoration: underline; }

.wrap { max-width: 64rem; margin: 0 auto; padding: 0 1rem; }
.narrow { max-width: 46rem; }
.section { padding: 2rem 0; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.accent { color: var(--accent); }
.lede { font-size: 1.1rem; color: var(--muted); }

.skip {
	position: absolute; left: -9999px;
}
.skip:focus {
	left: 1rem; top: 1rem; z-index: 100;
	background: var(--accent); color: #020617; padding: .5rem 1rem; border-radius: .5rem;
}

/* Header */
.site-header { border-bottom: 1px solid var(--line); }
.nav { display: flex; align-items: center; gap: 1.5rem; padding: .85rem 1rem; }
.brand { color: var(--white); font-weight: 700; font-size: 1.1rem; text-decoration: none; }
.nav-links { display: flex; gap: 1.25rem; list-style: none; margin: 0; padding: 0; font-size: .9rem; }
.nav-links a { color: var(--muted); text-decoration: none; }
.nav-links a:hover { color: var(--accent); }

/* Panels and forms */
.panel {
	border: 1px solid var(--line);
	background: rgba(15, 23, 42, .6);
	border-radius: 1rem;
	padding: 1.25rem;
}
.grid-2 { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 40rem) { .grid-2 { grid-template-columns: 1fr 1fr; } }

label { display: block; }
label > span { display: block; font-size: .85rem; font-weight: 500; margin-bottom: .3rem; color: var(--text); }
input, select {
	width: 100%;
	padding: .55rem .7rem;
	border-radius: .5rem;
	border: 1px solid #334155;
	background: var(--bg);
	color: var(--white);
	font-size: 1rem;
	font-family: inherit;
}
input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.results { margin-top: 1.5rem; }
.result {
	border: 1px solid var(--line);
	background: var(--bg);
	border-radius: .75rem;
	padding: 1rem;
}
.result-label { margin: 0; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.result-value { margin: .3rem 0 0; font-size: 1.9rem; font-weight: 700; color: var(--white); }
.result-value.small-value { font-size: 1.35rem; }
.note { margin-top: 1rem; }

/* Callout */
.callout {
	border: 1px solid var(--warn-line);
	background: var(--warn-bg);
	border-radius: .75rem;
	padding: 1rem;
	margin-top: 1.25rem;
}
.callout p { margin: 0; font-size: .9rem; color: var(--warn-text); }
.callout-title { font-weight: 600; margin-bottom: .25rem !important; }

/* Chips */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 1rem 0 0; padding: 0; }
.chips a {
	display: inline-block;
	border: 1px solid var(--line);
	border-radius: .5rem;
	padding: .35rem .7rem;
	font-size: .85rem;
	color: var(--muted);
	text-decoration: none;
}
.chips a:hover { border-color: var(--accent); color: var(--accent); }

.crumbs { font-size: .85rem; color: var(--muted); margin-bottom: .75rem; }
.crumbs span { margin: 0 .35rem; }

pre {
	overflow-x: auto;
	border: 1px solid var(--line);
	background: var(--bg);
	border-radius: .75rem;
	padding: 1rem;
	font-size: .85rem;
}

ul.plain { list-style: none; padding: 0; }
ul.plain li { padding-left: 1.1rem; position: relative; }
ul.plain li::before { content: "—"; position: absolute; left: 0; color: var(--muted); }

.btn {
	display: inline-block;
	background: var(--accent);
	color: #020617;
	font-weight: 600;
	padding: .7rem 1.2rem;
	border-radius: .7rem;
	text-decoration: none;
}

.post-list { list-style: none; padding: 0; }
.post-list li { padding: 1rem 0; border-bottom: 1px solid var(--line); }

.prose img { max-width: 100%; height: auto; }

/* Footer */
.site-footer { border-top: 1px solid var(--line); margin-top: 4rem; padding: 2.5rem 0; }
.footer-brand { color: var(--white); font-weight: 700; margin: 0; }
.footer-links { display: flex; flex-wrap: wrap; gap: 1rem; list-style: none; padding: 0; margin: 1rem 0; font-size: .9rem; }
.footer-links a { color: var(--muted); text-decoration: none; }
.disclaimer { max-width: 42rem; }

/* Home page */
.hero h1 { font-size: 2.4rem; }
.hero .lede { max-width: 38rem; }
.hero .btn { margin-top: 1.25rem; }
.col-head { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; margin: 0 0 .6rem; }
.rank-list { list-style: none; padding: 0; margin: 0; }
.rank-list li {
	display: flex; align-items: center; justify-content: space-between;
	border: 1px solid var(--line); border-radius: .5rem;
	padding: .5rem .75rem; margin-bottom: .5rem;
}
.rank-list a { color: var(--text); text-decoration: none; }
.rank-list a:hover { color: var(--accent); }

/* House ads
   Visually distinct from the content so nobody mistakes a promotion for a result, but not
   styled to mimic a network ad unit either. */
.house-ad { margin: 2rem 0; }
.house-ad-label {
	font-size: .68rem; text-transform: uppercase; letter-spacing: .1em;
	color: var(--muted); margin: 0 0 .5rem;
}
.house-ad-link {
	display: block; text-decoration: none;
	border: 1px solid var(--line); border-radius: .9rem;
	overflow: hidden; background: var(--panel);
	transition: border-color .15s ease;
}
.house-ad-link:hover { border-color: var(--accent); text-decoration: none; }
.house-ad-image { display: block; width: 100%; height: auto; }
.house-ad-text { display: block; padding: 1.25rem 1.4rem; }
.house-ad-heading { display: block; color: var(--white); font-weight: 600; font-size: 1.05rem; }
.house-ad-body { display: block; color: var(--muted); font-size: .9rem; margin-top: .4rem; line-height: 1.55; }
.house-ad-cta { display: inline-block; color: var(--accent); font-weight: 600; font-size: .9rem; margin-top: .75rem; }

.faq details { border-bottom: 1px solid var(--line); padding: .9rem 0; }
.faq summary { cursor: pointer; color: var(--white); font-weight: 500; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq p { color: var(--muted); margin: .65rem 0 0; }

/* Affiliate block. Visually separated from the calculator so a recommendation is never
   mistaken for a result. */
.aff { max-width: 46rem; margin: 2.5rem auto; padding: 0 1rem; }
.aff-title { font-size: 1.35rem; margin-bottom: .4rem; }
.aff-disclosure {
	font-size: .85rem; color: var(--muted); line-height: 1.6;
	border-left: 2px solid var(--line); padding-left: .9rem; margin: 0 0 1.25rem;
}
.aff-list { list-style: none; padding: 0; margin: 0; }
.aff-item {
	display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
	border: 1px solid var(--line); border-radius: .8rem;
	padding: 1rem 1.1rem; margin-bottom: .75rem; background: var(--panel);
}
.aff-copy { flex: 1 1 16rem; min-width: 0; }
.aff-name { margin: 0; color: var(--white); font-weight: 600; }
.aff-note { margin: .2rem 0 0; font-size: .8rem; color: var(--accent); }
.aff-desc { margin: .45rem 0 0; font-size: .9rem; color: var(--muted); line-height: 1.55; }
.aff-cta {
	flex: 0 0 auto;
	background: var(--accent); color: #020617; font-weight: 600;
	padding: .6rem 1.1rem; border-radius: .6rem; text-decoration: none; font-size: .9rem;
}
.aff-cta:hover { text-decoration: none; filter: brightness(1.08); }
.aff-foot { margin-top: 1rem; }

/* The one-sentence answer under each calculator heading. Styled as a statement rather than a
   callout box: it is the page answering the question it was found for, not an aside. */
.answer {
	border-left: 3px solid var(--accent, #c8622a);
	padding: .6rem 0 .6rem 1rem;
	margin: 0 0 1.5rem;
	font-size: 1.02rem;
	line-height: 1.6;
}

/* Merchant name beside a product. Deliberately quiet: the reader is choosing a product, and
   which shop it comes from is a detail they want available rather than announced. */
.aff-merchant {
	display: inline-block;
	margin-left: .5rem;
	padding: .1rem .45rem;
	border: 1px solid currentColor;
	border-radius: 3px;
	font-size: .72em;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	opacity: .6;
	vertical-align: middle;
}

/* ============================================================================
   Mobile shell
   ----------------------------------------------------------------------------
   The header previously had no mobile rules at all: six nav labels in a flex row
   overflowed the viewport, clipped the last two, and wrapped the site title onto
   three lines. Below 52rem the links move into a sheet and the bar keeps only
   the mark, the wordmark and a menu button.
   ========================================================================= */

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--bg, #0B1B2E);
	border-bottom: 1px solid var(--line);
	/* Notched phones: keep the bar clear of the status area in standalone mode. */
	padding-top: env(safe-area-inset-top, 0);
}

.nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: .7rem 1rem;
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	color: var(--white);
	font-weight: 700;
	font-size: 1.05rem;
	text-decoration: none;
	/* The wordmark is two words; it must never become three lines again. */
	white-space: nowrap;
	flex: 0 0 auto;
}

.brand-mark { display: block; width: 30px; height: 30px; border-radius: 7px; }
.brand-name { letter-spacing: -0.01em; }

.nav-links { display: flex; gap: 1.25rem; list-style: none; margin: 0; padding: 0; font-size: .9rem; }
.nav-links a { color: var(--muted); text-decoration: none; white-space: nowrap; }
.nav-links a:hover { color: var(--accent); }

/* --- menu button, phones only --- */
.nav-toggle {
	display: none;
	width: 44px; height: 44px;       /* 44px: the smallest reliably tappable target */
	margin: -6px -8px -6px 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 10px;
	color: var(--white);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.nav-toggle:active { background: rgba(255,255,255,.07); }
.nav-toggle-bars { display: block; width: 20px; margin: 0 auto; }
.nav-toggle-bars i {
	display: block; height: 2px; border-radius: 2px; background: currentColor;
	transition: transform .22s ease, opacity .18s ease;
}
.nav-toggle-bars i + i { margin-top: 5px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- the sheet --- */
.nav-sheet { border-top: 1px solid var(--line); background: var(--bg, #0B1B2E); }
.nav-sheet[hidden] { display: none; }
.nav-sheet-list { list-style: none; margin: 0; padding: .35rem 0 .6rem; }
.nav-sheet-list a {
	display: flex; align-items: center; justify-content: space-between;
	gap: 1rem;
	padding: .95rem 1.25rem;          /* generous: this is a thumb, not a cursor */
	color: var(--white);
	text-decoration: none;
	font-size: 1rem;
	font-weight: 500;
	-webkit-tap-highlight-color: transparent;
}
.nav-sheet-list a:active { background: rgba(255,255,255,.06); }
.nav-sheet-list svg { color: var(--muted); flex: 0 0 auto; }

@media (max-width: 52rem) {
	.nav-links { display: none; }
	.nav-toggle { display: block; }
}

@media (min-width: 52.01rem) {
	.nav-sheet { display: none !important; }
}

/* ============================================================================
   Phone comfort
   ========================================================================= */
@media (max-width: 40rem) {
	h1 { font-size: 1.85rem; line-height: 1.18; }
	h2 { font-size: 1.3rem; }
	.lede { font-size: 1.02rem; }

	/* Inputs below 16px make iOS zoom the page on focus, which feels broken. */
	input, select, textarea { font-size: 16px; }

	.panel { border-radius: 14px; padding: 1rem; }
	.results { gap: .6rem; }
	.result { padding: .85rem .9rem; border-radius: 12px; }
	.result-value { font-size: 1.6rem; }
	.small-value { font-size: 1.15rem; }

	/* Chip rows scroll sideways rather than reflowing into a tall block. */
	.chips {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		gap: .5rem;
		padding-bottom: .4rem;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.chips::-webkit-scrollbar { display: none; }
	.chips li { flex: 0 0 auto; }

	.aff-item { flex-direction: column; align-items: flex-start; gap: .75rem; }
	.aff-cta { width: 100%; text-align: center; padding: .8rem 1rem; }
}

/* Nothing may cause a sideways scroll on a phone. */
html, body { overflow-x: hidden; }

/* ============================================================================
   Install prompt
   ----------------------------------------------------------------------------
   Hidden until the browser confirms the site is installable, so it never appears
   to someone who has already installed it or to a browser that cannot.
   ========================================================================= */
.install-bar {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 60;
	background: #14304F;
	border-top: 1px solid rgba(255,255,255,.1);
	padding-bottom: env(safe-area-inset-bottom, 0);
	transform: translateY(100%);
	transition: transform .32s cubic-bezier(.22,.8,.3,1);
}
.install-bar[hidden] { display: none; }
.install-bar.is-up { transform: translateY(0); }

.install-bar-inner {
	display: flex; align-items: center; gap: .85rem;
	max-width: 46rem; margin: 0 auto;
	padding: .8rem 1rem;
}
.install-icon { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 9px; }
.install-copy { flex: 1 1 auto; min-width: 0; }
.install-title { margin: 0; color: #fff; font-weight: 650; font-size: .95rem; }
.install-sub { margin: .12rem 0 0; color: #9FB0C2; font-size: .82rem; line-height: 1.35; }
.install-go {
	flex: 0 0 auto;
	padding: .6rem 1.1rem;
	background: var(--accent, #3DD6E8);
	color: #06202E;
	border: 0; border-radius: 9px;
	font-weight: 700; font-size: .92rem;
	cursor: pointer;
}
.install-x {
	flex: 0 0 auto;
	width: 34px; height: 34px;
	background: none; border: 0;
	color: #8DA0B4; font-size: 1.5rem; line-height: 1;
	cursor: pointer;
}

@media (max-width: 26rem) {
	.install-sub { display: none; }
}

/* Once installed, the prompt is irrelevant. */
@media (display-mode: standalone) {
	.install-bar { display: none !important; }
}

/* Amazon category fallback. Deliberately quieter than a product block: it is a signpost, not a
   recommendation, and styling it like one would be a small lie. */
.amz {
	margin: 1.5rem 0;
	padding: .9rem 1.1rem;
	border: 1px dashed var(--line);
	border-radius: 10px;
	font-size: .92rem;
	line-height: 1.55;
}
.amz-label { color: var(--muted); margin-right: .4rem; }
.amz a { color: var(--accent); font-weight: 600; }
.amz-note { display: block; margin-top: .35rem; color: var(--muted); font-size: .8rem; }