/*
	FXVane — skin.css
	Theme layer loaded after main.css.
	Fonts: Literata (display) / Atkinson Hyperlegible (body) / Martian Mono (figures).
	Accent: oxblood #7c2d3a, used <=10% of surface.
	Signature component: .ruler (the Mid-Rate Ruler).
*/

/* Defensive base: images (incl. brand/logo, concept art, thumbnails) never overflow
   their container even if a component stylesheet is cache-stale. Specific rules like
   `.image.main img { height:100% }` still win by selector specificity. */
img { max-width: 100%; height: auto; }

:root {
	--paper:      #f7f8f9;   /* cool near-white page */
	--paper-2:    #eef0f2;   /* faint panel */
	--ink:        #191b1d;   /* near-black text */
	--ink-soft:   #4a4f54;   /* secondary text */
	--ink-faint:  #767c83;   /* muted captions */
	--rule:       #dcdfe3;   /* hairline borders */
	--rule-soft:  #e7e9ec;
	--seal:       #7c2d3a;   /* oxblood accent */
	--seal-deep:  #5f2029;   /* darker oxblood (hover / danger) */
	--seal-tint:  #f3e7e9;   /* faint oxblood wash */
	--side:       #1c1f22;   /* sidebar ink */
	--side-2:     #24282c;
	--side-line:  #34393e;
	--side-fg:    #c7cdd2;
	--side-fg-2:  #8b939b;
}

/* ---------- Typography ---------- */
body, input, select, textarea {
	font-family: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
	color: var(--ink);
	letter-spacing: 0;
}
#wrapper { background: var(--paper); }
body { background: var(--paper); }

h1, h2, h3, h4, h5, h6 {
	font-family: "Literata", Georgia, "Times New Roman", serif;
	color: var(--ink);
	font-weight: 600;
	letter-spacing: -0.01em;
	text-wrap: balance;
}
#main h1 { font-size: 2.35em; line-height: 1.12; margin: 0 0 0.5em 0; }
#main h1 small {
	display: block;
	font-family: "Atkinson Hyperlegible", system-ui, sans-serif;
	font-size: 0.46em;
	font-weight: 400;
	letter-spacing: 0;
	color: var(--ink-soft);
	margin-top: 0.9em;
	line-height: 1.4;
	text-wrap: pretty;
}
#main h2 {
	font-size: 1.6em;
	margin: 1.9em 0 0.7em 0;
	padding-top: 0.7em;
	border-top: 1px solid var(--rule-soft);
}
#main h3 { font-size: 1.2em; margin: 1.5em 0 0.5em 0; }
#main p, #main li { line-height: 1.72; }
#main p { margin: 0 0 1.25em 0; }
p.lede {
	font-size: 1.18em;
	line-height: 1.6;
	color: var(--ink-soft);
	margin-bottom: 1.4em;
}
strong, b { color: var(--ink); font-weight: 700; }

/* Links — oxblood, understated underline */
#main a, #footer a {
	color: var(--seal);
	text-decoration: none;
	border-bottom: 1px solid rgba(124,45,58,0.32);
	transition: border-color .15s, color .15s;
}
#main a:hover, #footer a:hover { color: var(--seal-deep); border-bottom-color: var(--seal); }

/* Mono figures */
.fig, .ruler *, .compare td.num, .compare th.num {
	font-family: "Martian Mono", "Courier New", monospace;
	font-feature-settings: "tnum" 1;
	letter-spacing: -0.03em;
}

/* ---------- Sidebar (#header) — right-side wine panel ---------- */
#header {
	background: var(--seal);
	color: #f0d8dd;
	text-align: left;
	border-left: 1px solid rgba(0,0,0,0.18);
}
#header > header { padding: 2.5em 2em 1.5em 2em; text-align: center; }
#header .image.avatar { display: inline-block; margin: 0 auto 1.1em auto; width: 6.5em; }
#header .image.avatar img {
	width: 100%; border-radius: 100%;
	border: 4px solid rgba(255,255,255,0.28);
	background: var(--paper);
}
#header #logo, #header h1 { font-size: 1.45em; margin: 0; line-height: 1.15; text-align: center; }
#header #logo a, #header h1 a { color: #fff; border: 0; }
#header header p {
	color: #ecc3cc; font-style: normal; font-size: 0.9em;
	line-height: 1.5; margin: 0.7em 0 0 0; text-align: center;
}
#header a { color: #f0d8dd; }
#header a:hover { color: #fff !important; }

#header > nav ul li { border-top: 1px solid rgba(255,255,255,0.15); }
#header > nav ul li a {
	color: #fbeef1 !important; text-align: left;
	padding: 0.72em 2em !important; font-size: 0.96em;
}
#header > nav ul li a:hover { background: var(--seal-deep); color: #fff !important; }
#header > nav ul li a.active { background: var(--paper); color: var(--seal) !important; font-weight: 700; }
#header > nav .nav-label {
	display: block; padding: 1.3em 2em 0.45em 2em;
	font-family: "Martian Mono", monospace; font-size: 0.62em;
	letter-spacing: 0.18em; text-transform: uppercase; color: #e0a3af;
}

/* "Before you start" mini box in sidebar */
#header .precheck {
	margin: 1.2em 2em 0 2em; padding: 1em 1.1em;
	background: rgba(0,0,0,0.17); border: 1px solid rgba(255,255,255,0.18); border-radius: 4px;
}
#header .precheck h2 {
	font-family: "Atkinson Hyperlegible", sans-serif;
	font-size: 0.78em; color: #fff; margin: 0 0 0.4em 0; font-weight: 700;
}
#header .precheck p { color: #ecc8d0; font-size: 0.82em; line-height: 1.5; margin: 0 0 0.7em 0; }
#header .precheck a {
	display: inline-block; color: #fff !important; font-size: 0.82em;
	border: 1px solid rgba(255,255,255,0.4); padding: 0.4em 0.9em; border-radius: 3px;
}
#header .precheck a:hover { background: #fff; color: var(--seal) !important; border-color: #fff; }

#header > footer { padding: 1.5em 2em; }
#header > footer .smallprint { color: #e0a3af; font-size: 0.72em; line-height: 1.5; margin: 0; }
#header > footer .smallprint a { color: #f6dde2; border: 0; text-decoration: underline; }

/* ---------- Banner image (Read Only .image.main) ---------- */
.image.main { display: block; height: 22em; background: var(--seal-deep); margin: 0; overflow: hidden; }
.image.main img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
@media screen and (max-width: 1024px) { .image.main { height: 17em; } }
@media screen and (max-width: 736px) { .image.main { height: 12em; } }

/* ---------- Mobile off-canvas menu (right side) ---------- */
@media screen and (max-width: 1024px) {
	#titleBar { background: var(--seal-deep); }
	#titleBar .title { font-family: "Literata", serif; font-weight: 600; color: #fff; }
	#titleBar .toggle:before {
		font-family: "Atkinson Hyperlegible", sans-serif !important;
		content: '\2630'; background: rgba(0,0,0,0.22); color: #fff;
		font-size: 20px; font-weight: 700;
	}
}

/* ---------- Section rhythm ---------- */
#main > section { border-top: 1px solid var(--rule); }
#main > section:first-child { border-top: 0; }
#main > section > .container { padding: 3.5em 0 2.5em 0; }
#main .container { max-width: 47em; }

/* ---------- Disclosure / safety bar (top of every page) ---------- */
.disclosure-bar {
	background: var(--ink);
	color: #cfd4d8;
	font-size: 0.82em;
	line-height: 1.5;
	padding: 0.7em 0;
}
.disclosure-bar .container { max-width: 47em; padding: 0 1.5em; }
.disclosure-bar strong { color: #fff; }
.disclosure-bar a { color: #fff; text-decoration: underline; }

/* ---------- Table of contents ---------- */
details.toc {
	border: 1px solid var(--rule);
	background: #fff;
	border-radius: 5px;
	margin: 0 0 2em 0;
	padding: 0 1.2em;
}
details.toc summary {
	cursor: pointer;
	font-family: "Martian Mono", monospace;
	font-size: 0.7em;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink-soft);
	padding: 1em 0;
	list-style: none;
}
details.toc summary::-webkit-details-marker { display: none; }
details.toc summary:after { content: ' +'; color: var(--seal); }
details.toc[open] summary:after { content: ' \2212'; }
details.toc ol { margin: 0 0 1.1em 0; padding-left: 1.4em; columns: 2; column-gap: 2em; }
details.toc li { line-height: 1.5; margin: 0 0 0.5em 0; }
@media screen and (max-width: 736px) { details.toc ol { columns: 1; } }

/* ---------- Note / callout boxes (border + label chip, no thick side bars) ---------- */
.note {
	border: 1px solid var(--rule);
	background: #fff;
	border-radius: 5px;
	padding: 1.1em 1.3em;
	margin: 0 0 1.6em 0;
}
.note .note-label {
	display: inline-block;
	font-family: "Martian Mono", monospace;
	font-size: 0.6em;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink-faint);
	margin-bottom: 0.5em;
}
.note p:last-child { margin-bottom: 0; }
.note.caution { background: var(--paper-2); border-color: var(--rule); }
.note.caution .note-label { color: var(--ink-soft); }
.note.danger { background: var(--seal-tint); border-color: #e3c4ca; }
.note.danger .note-label { color: var(--seal); }

/* ---------- SIGNATURE: Mid-Rate Ruler ---------- */
.ruler {
	border: 1px solid var(--rule);
	background: #fff;
	border-radius: 6px;
	padding: 1.6em 1.5em 1.3em 1.5em;
	margin: 0 0 1.8em 0;
}
.ruler .ruler-cap {
	font-family: "Martian Mono", monospace;
	font-size: 0.62em; letter-spacing: 0.16em; text-transform: uppercase;
	color: var(--ink-faint); margin-bottom: 1.4em;
}
.ruler .scale {
	position: relative;
	height: 3px;
	background: var(--ink);
	margin: 3.2em 0 3.6em 0;
}
.ruler .tick {
	position: absolute; top: 50%; transform: translate(-50%,-50%);
	width: 2px; height: 16px; background: var(--ink-faint);
}
.ruler .mark {
	position: absolute; top: 50%;
	transform: translateX(-50%);
	text-align: center; width: 9em;
}
.ruler .mark .pin {
	width: 2px; height: 26px; background: var(--ink);
	margin: -13px auto 0 auto;
}
.ruler .mark.is-mid .pin { background: var(--ink); height: 34px; margin-top: -17px; }
.ruler .mark.is-seal .pin { background: var(--seal); }
.ruler .mark .val {
	font-family: "Martian Mono", monospace;
	font-size: 0.82em; font-weight: 600; margin-top: 0.3em; display: block;
}
.ruler .mark .lab {
	font-size: 0.72em; color: var(--ink-faint); display: block; margin-top: 0.15em; line-height: 1.3;
}
.ruler .mark.below { top: 50%; }
.ruler .mark.below .pin { margin: 0 auto -13px auto; }
.ruler .band {
	position: absolute; top: 50%; transform: translateY(-50%);
	height: 14px; background: repeating-linear-gradient(45deg, rgba(124,45,58,0.16) 0 6px, rgba(124,45,58,0.06) 6px 12px);
	border-left: 2px solid var(--seal); border-right: 2px solid var(--seal);
}
.ruler .band-note {
	display: inline-block; margin-top: 0.4em;
	font-size: 0.8em; color: var(--seal);
}
.ruler .ruler-foot { font-size: 0.78em; color: var(--ink-faint); margin: 0; }
@media screen and (max-width: 736px) {
	.ruler .mark { width: 7em; }
	.ruler .mark .val { font-size: 0.72em; }
	.ruler .mark .lab { font-size: 0.64em; }
}

/* ---------- Comparison / rate tables ---------- */
.compare { width: 100%; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 1.6em 0; }
.compare table, table.compare { width: 100%; min-width: 32em; margin: 0; border-collapse: collapse; font-size: 0.95em; }
table.compare th, table.compare td { text-align: left; padding: 0.7em 0.8em; border-bottom: 1px solid var(--rule); vertical-align: top; }
table.compare thead th {
	font-family: "Martian Mono", monospace; font-size: 0.66em; letter-spacing: 0.1em;
	text-transform: uppercase; color: var(--ink-faint); border-bottom: 2px solid var(--ink);
}
table.compare td.num, table.compare th.num { text-align: right; white-space: nowrap; }
table.compare tbody tr:last-child td { border-bottom: 2px solid var(--ink); }
table.compare tr.is-bridge td { background: var(--seal-tint); }
table.compare tr.is-bridge td:first-child { box-shadow: inset 3px 0 0 var(--seal); }

/* ---------- Steps ---------- */
ol.steps { list-style: none; counter-reset: s; margin: 0 0 1.6em 0; padding: 0; }
ol.steps > li {
	counter-increment: s; position: relative;
	padding: 0 0 1em 2.6em; line-height: 1.6;
}
ol.steps > li:before {
	content: counter(s); position: absolute; left: 0; top: 0;
	width: 1.7em; height: 1.7em; line-height: 1.7em; text-align: center;
	font-family: "Martian Mono", monospace; font-size: 0.8em; font-weight: 600;
	color: #fff; background: var(--ink); border-radius: 50%;
}

/* ---------- Checklist ---------- */
ul.checklist { list-style: none; margin: 0 0 1.6em 0; padding: 0; }
ul.checklist > li { position: relative; padding: 0 0 0.7em 1.9em; line-height: 1.55; }
ul.checklist > li:before {
	content: '\2713'; position: absolute; left: 0; top: 0;
	color: var(--seal); font-weight: 700;
}

/* ---------- Homepage: route splitter ---------- */
.routes { margin: 0 0 1em 0; border-top: 1px solid var(--rule); }
.routes a.route {
	display: grid; grid-template-columns: 2.4em 1fr auto; align-items: center; gap: 1em;
	padding: 1.15em 0.2em; border-bottom: 1px solid var(--rule);
	color: var(--ink); border-bottom: 1px solid var(--rule);
}
.routes a.route { border-bottom: 1px solid var(--rule); }
.routes a.route .rn {
	font-family: "Martian Mono", monospace; font-size: 1.1em; color: var(--seal); font-weight: 600;
}
.routes a.route .rt { font-weight: 700; font-family: "Literata", serif; font-size: 1.08em; }
.routes a.route .rd { display: block; color: var(--ink-soft); font-size: 0.92em; margin-top: 0.15em; font-family: "Atkinson Hyperlegible", sans-serif; font-weight: 400; }
.routes a.route .arr { color: var(--ink-faint); font-size: 1.2em; }
.routes a.route:hover { background: #fff; }
.routes a.route:hover .arr { color: var(--seal); }
@media screen and (max-width: 480px) {
	.routes a.route { grid-template-columns: 2em 1fr; }
	.routes a.route .arr { display: none; }
}

/* ---------- Homepage: editorial guide index ---------- */
ol.guide-index { list-style: none; counter-reset: g; margin: 0; padding: 0; }
ol.guide-index > li { counter-increment: g; border-bottom: 1px solid var(--rule); padding: 1.2em 0; }
ol.guide-index > li:before {
	content: counter(g, decimal-leading-zero);
	font-family: "Martian Mono", monospace; font-size: 0.8em; color: var(--ink-faint);
	display: inline-block; margin-bottom: 0.3em;
}
ol.guide-index .gi-title { display: block; font-family: "Literata", serif; font-size: 1.18em; font-weight: 600; color: var(--ink); border: 0; }
ol.guide-index a.gi-title:hover { color: var(--seal); }
ol.guide-index .gi-dek { display: block; color: var(--ink-soft); margin: 0.25em 0 0.4em 0; line-height: 1.55; }
ol.guide-index .gi-meta { font-family: "Martian Mono", monospace; font-size: 0.68em; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }

/* ---------- Pull quote ---------- */
.pull {
	font-family: "Literata", serif; font-size: 1.5em; line-height: 1.32;
	color: var(--ink); border: 0; border-top: 2px solid var(--seal);
	padding: 0.9em 0 0 0; margin: 1.6em 0; font-weight: 500;
}

/* ---------- Byline + author card ---------- */
.byline {
	font-family: "Martian Mono", monospace; font-size: 0.72em; letter-spacing: 0.04em;
	color: var(--ink-faint); margin: 0 0 1.6em 0;
}
.byline a { color: var(--ink-soft); border-bottom: 1px solid var(--rule); }
.byline a:hover { color: var(--seal); }
.author-card {
	display: flex; gap: 1.1em; align-items: flex-start;
	border: 1px solid var(--rule); background: #fff; border-radius: 6px;
	padding: 1.3em; margin: 2em 0 0 0;
}
.author-card .ava {
	flex: 0 0 auto; width: 3.2em; height: 3.2em; border-radius: 50%;
	background: var(--seal); color: #fff; display: flex; align-items: center; justify-content: center;
	font-family: "Literata", serif; font-weight: 700; font-size: 1.1em;
}
.author-card .who { font-weight: 700; margin: 0 0 0.2em 0; font-family: "Literata", serif; }
.author-card p { font-size: 0.92em; line-height: 1.55; color: var(--ink-soft); margin: 0; }

/* ---------- Sources ---------- */
.sources {
	border-top: 1px solid var(--rule); margin-top: 2em; padding-top: 1.2em;
	font-size: 0.9em; color: var(--ink-soft);
}
.sources .sources-cap {
	font-family: "Martian Mono", monospace; font-size: 0.66em; letter-spacing: 0.16em;
	text-transform: uppercase; color: var(--ink-faint); margin-bottom: 0.6em;
}
.sources ul { margin: 0; padding-left: 1.2em; }
.sources li { margin-bottom: 0.4em; line-height: 1.5; }
p.updated { font-size: 0.85em; color: var(--ink-faint); margin-top: 1.4em; }

/* ---------- Call-to-action block ---------- */
.cta-block {
	border: 1px solid var(--rule); border-top: 3px solid var(--seal);
	background: #fff; border-radius: 0 0 6px 6px; padding: 1.5em;
	margin: 2.2em 0 0 0;
}
.cta-block .cta-cap {
	font-family: "Martian Mono", monospace; font-size: 0.64em; letter-spacing: 0.16em;
	text-transform: uppercase; color: var(--ink-faint); margin-bottom: 0.5em;
}
.cta-block p { margin: 0 0 1em 0; line-height: 1.6; }
.cta-block .disclosure { font-size: 0.82em; color: var(--ink-faint); margin-top: 0.9em; }

/* ---------- Homepage callout card ---------- */
.precheck-card {
	border: 1px solid var(--rule); border-top: 3px solid var(--seal);
	background: #fff; border-radius: 0 0 6px 6px; padding: 1.4em 1.5em; margin: 1.8em 0 0 0;
}
.precheck-card .pc-head {
	font-family: "Literata", serif; font-weight: 600; font-size: 1.05em; line-height: 1.3;
	margin: 0 0 1em 0; padding-left: 1.5em; position: relative;
}
.precheck-card .pc-head:before { content: '\2713'; position: absolute; left: 0; top: 0; color: var(--seal); font-weight: 700; }
.precheck-card dl { margin: 0 0 1em 0; }
.precheck-card dt {
	font-family: "Martian Mono", monospace; font-size: 0.6em; letter-spacing: 0.14em;
	text-transform: uppercase; color: var(--ink-faint); margin-top: 0.9em;
}
.precheck-card dt:first-of-type { margin-top: 0; }
.precheck-card dd { margin: 0.25em 0 0 0; line-height: 1.55; font-size: 0.95em; }
.precheck-card dd .fig { color: var(--seal); font-weight: 600; }
.precheck-card .pc-disc { font-size: 0.82em; color: var(--ink-faint); line-height: 1.5; margin: 0 0 1.1em 0; }

/* ---------- Copy button and call-to-action ---------- */
.copy-btn {
	font-family: "Atkinson Hyperlegible", sans-serif; font-size: 0.8em; cursor: pointer;
	border: 1px solid var(--rule); background: transparent; color: var(--seal);
	padding: 0.22em 0.7em; border-radius: 4px; line-height: 1.4;
}
.copy-btn:hover { background: var(--seal-tint); }
.copy-btn.is-copied { background: var(--seal); color: #fff; border-color: var(--seal); }
@media screen and (max-width: 736px) {
	.copy-btn { min-height: 44px; display: inline-flex; align-items: center; }
	#footer .foot-nav a { display: inline-flex; align-items: center; min-height: 44px; }
}
sup.ast, a.ast { color: inherit; text-decoration: none; font-size: 0.8em; vertical-align: super; }

/* Homepage top bar */
.reg-bar { background: var(--seal); color: #fff; }
.reg-bar .container { max-width: 47em; padding: 1.1em 1.5em; }
.reg-bar-in { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7em 1.2em; justify-content: space-between; }
.reg-bar .reg-msg { flex: 1 1 19em; line-height: 1.5; font-size: 1em; }
.reg-bar .reg-msg strong { color: #fff; }
.reg-bar .code {
	font-family: "Martian Mono", monospace; font-weight: 600; letter-spacing: 0.04em;
	background: rgba(0,0,0,0.24); padding: 0.14em 0.55em; border-radius: 4px; white-space: nowrap;
}
.reg-bar .copy-btn { color: #fff; border-color: rgba(255,255,255,0.55); margin-left: 0.35em; }
.reg-bar .copy-btn:hover { background: rgba(255,255,255,0.16); }
.reg-bar .copy-btn.is-copied { background: #fff; color: var(--seal); border-color: #fff; }
.reg-cta {
	flex: 0 0 auto; display: inline-block; background: #fff; color: var(--seal) !important;
	font-weight: 700; font-family: "Atkinson Hyperlegible", sans-serif; white-space: nowrap;
	padding: 0.75em 1.35em; border-radius: 5px; border: 0 !important; text-decoration: none;
}
.reg-cta:hover { background: #f5e6e9; color: var(--seal-deep) !important; }
.reg-bar .reg-note { font-size: 0.76em; color: rgba(255,255,255,0.86); margin: 0.7em 0 0 0; line-height: 1.5; }
.reg-bar .reg-note a { color: #fff; text-decoration: underline; }
@media (max-width: 620px) { .reg-cta { width: 100%; text-align: center; } }

/* In-article card (guides) */
.reg-card {
	border: 1px solid var(--rule); border-top: 3px solid var(--seal); background: #fff;
	border-radius: 0 0 6px 6px; padding: 1.4em 1.5em; margin: 2.2em 0 0 0;
}
.reg-card .rc-head { font-family: "Literata", serif; font-weight: 600; font-size: 1.08em; margin: 0 0 0.8em 0; }
.reg-card .rc-code { display: flex; align-items: center; gap: 0.55em; flex-wrap: wrap; margin: 0 0 0.9em 0; }
.reg-card .rc-code .lbl {
	font-family: "Martian Mono", monospace; font-size: 0.58em; letter-spacing: 0.14em;
	text-transform: uppercase; color: var(--ink-faint);
}
.reg-card .rc-code .code {
	font-family: "Martian Mono", monospace; font-weight: 600; font-size: 1.05em; color: var(--seal);
	background: var(--seal-tint); padding: 0.14em 0.6em; border-radius: 4px; letter-spacing: 0.04em;
}
.reg-card p { margin: 0 0 0.9em 0; line-height: 1.6; }
.reg-card .rc-disc { font-size: 0.82em; color: var(--ink-faint); margin-bottom: 0; }
.reg-card.home-reg { border-top-width: 4px; margin-top: 2em; }
.reg-card.home-reg .rc-head { font-size: 1.35em; line-height: 1.24; margin-bottom: 0.4em; }
.reg-card .rc-head .pct { color: var(--seal); }
.reg-card .rc-sub { font-size: 0.98em; color: var(--ink-soft); line-height: 1.55; margin: 0 0 1.15em 0; }
.reg-card .rc-row { display: flex; align-items: center; gap: 0.8em 1.2em; flex-wrap: wrap; margin: 0 0 1em 0; }
.reg-card .rc-row .rc-code { margin: 0; }
.reg-card .rc-row .button.primary { flex: 0 0 auto; }

/* ---------- Tools (calculators) ---------- */
.tool { border: 1px solid var(--rule); background: #fff; border-radius: 6px; padding: 1.5em; margin: 0 0 1.8em 0; }
.tool-form { display: grid; gap: 1em; grid-template-columns: 1fr 1fr; }
.tool-form .col-full { grid-column: 1 / -1; }
.tool-field { display: flex; flex-direction: column; gap: 0.3em; }
.tool-field label { font-size: 0.86em; font-weight: 700; color: var(--ink-soft); }
.tool-field .hint { font-size: 0.76em; color: var(--ink-faint); font-weight: 400; }
.tool-field input, .tool-field select {
	font-family: "Martian Mono", monospace; font-size: 1em; padding: 0.55em 0.7em;
	border: 1px solid var(--rule); border-radius: 5px; background: var(--paper); color: var(--ink);
}
.tool-field input:focus, .tool-field select:focus { outline: 2px solid var(--seal); outline-offset: 0; border-color: var(--seal); }
.tool-result { margin-top: 1.3em; border-top: 1px solid var(--rule); padding-top: 1.1em; }
.tool-result[hidden] { display: none; }
.res-row { display: flex; justify-content: space-between; gap: 1em; padding: 0.45em 0; border-bottom: 1px solid var(--rule-soft); }
.res-row:last-child { border-bottom: 0; }
.res-label { color: var(--ink-soft); }
.res-val { font-family: "Martian Mono", monospace; font-weight: 600; color: var(--ink); text-align: right; }
.res-val.big { font-size: 1.2em; color: var(--seal); }
.tool-note { font-size: 0.85em; color: var(--ink-faint); margin-top: 1.1em; line-height: 1.5; }
@media (max-width: 560px) { .tool-form { grid-template-columns: 1fr; } }

/* ---------- Buttons (override teal accent) ---------- */
input[type="submit"], input[type="reset"], input[type="button"],
.button {
	font-family: "Atkinson Hyperlegible", sans-serif; font-weight: 700;
	letter-spacing: 0; text-transform: none; border-radius: 4px;
}
.button {
	background: transparent; box-shadow: inset 0 0 0 2px var(--ink); color: var(--ink) !important;
	border: 0; height: auto; line-height: 1.4; padding: 0.7em 1.3em;
}
.button:hover { background: var(--paper-2); box-shadow: inset 0 0 0 2px var(--ink); }
.button.primary {
	background: var(--seal); box-shadow: none; color: #fff !important;
}
.button.primary:hover { background: var(--seal-deep); }

/* ---------- Footer ---------- */
#footer { background: #fff; border-top: 1px solid var(--rule); color: var(--ink-faint); }
#footer .container { max-width: 47em; }
#footer .foot-nav { list-style: none; padding: 0; margin: 0 0 1em 0; }
#footer .foot-nav li { display: inline-block; margin: 0 1.2em 0.4em 0; }
#footer .foot-nav a { color: var(--ink-soft); border: 0; font-size: 0.9em; }
#footer .foot-nav a:hover { color: var(--seal); }
#footer .copyright li { border-left-color: var(--rule); color: var(--ink-faint); }
#footer .copyright li a { color: var(--ink-faint); }

/* ---------- A11y / motion ---------- */
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }
img { max-width: 100%; height: auto; }

/* ---------- Consent banner ---------- */
.consent {
	position: fixed; left: 1em; right: 1em; bottom: 1em; max-width: 41em; margin: 0 auto; z-index: 11000;
	background: var(--ink); color: #d7dbdf; border-radius: 6px; padding: 1em 1.2em;
	box-shadow: 0 10px 34px rgba(0,0,0,0.28);
	display: flex; gap: 1em; align-items: center; flex-wrap: wrap; font-size: 0.88em;
}
.consent p { margin: 0; flex: 1 1 17em; line-height: 1.5; }
.consent a { color: #fff; text-decoration: underline; }
.consent-actions { display: flex; gap: 0.5em; }
.consent button {
	font-family: "Atkinson Hyperlegible", sans-serif; font-size: 0.92em; cursor: pointer;
	border-radius: 4px; padding: 0.5em 1.1em; border: 1px solid #41464b; background: transparent; color: #fff;
}
.consent button.primary { background: var(--seal); border-color: var(--seal); }
@media (max-width: 480px) { .consent-actions { width: 100%; } .consent button { flex: 1; } }