/* Hallmark · concept E "manual plate", chosen at В1 2026-11-08 · two-colour print: black ink, one spot cyan (hue 222) on tinted stock · Work Sans 400–800 · the system is recorded in DESIGN.md at the repo root
 * This file carries the tokens, the base and the site chrome (header, breadcrumbs, title, copy, footer). The calculator
 * and article blocks arrive with the В2 reference page (/concrete-calculator/), taken from work/design/concepts/e-plate/. */
/* Hallmark · waive 80 · Fig. 1 and Fig. 2 are drawn from the engine's own numbers with dimension callouts and labels, and the home's house plate is a numbered index of the calculators (each part links its tool) · they are labelled technical diagrams, the concept's signature, not decoration */
/* Hallmark · dismissed 23 · checked: the spot-cyan step numerals are the second colour of the two-colour print, the plate's one accent ink (as in concept E) */

/* ---------- Font: Work Sans, self-hosted (SIL OFL 1.1, ../fonts/OFL.txt) ---------- */
@font-face {
	font-family: "Work Sans";
	src: url("../fonts/WorkSans-latin-wght400-800.woff2") format("woff2");
	font-weight: 400 800;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Work Sans Fallback";
	src: local("Arial");
	size-adjust: 110.73%;
	ascent-override: 83.99%;
	descent-override: 21.94%;
	line-gap-override: 0%;
}

/* ---------- Tokens ---------- */
:root {
	--space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px; --space-4xl: 144px;
	--text-sm: 1rem; --text-md: 1rem; --text-prose: 1.0625rem; --text-lg: 1.25rem; --text-xl: 1.5rem; --text-2xl: 2rem; --text-3xl: 3.5rem; --text-hero: 6rem; --text-xs: 1rem;
	--text-display-s: 2.5rem; --text-display: 3.5rem; --text-section: 2rem; --text-title: 1.25rem; --text-lead: 1.25rem; --text-figure: 4.5rem; --text-figure-s: 3rem;
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-micro: 120ms; --dur-short: 220ms;
	--container: 1440px; --gutter: 16px; --gap-columns: 32px;
	--z-dropdown: 100; --z-sticky: 200; --z-modal: 400;

	/* Stock and ink */
	--color-paper: oklch(99.4% 0.003 222); --color-paper-2: oklch(97% 0.008 222); --color-paper-3: oklch(94% 0.012 222);
	--color-plate: oklch(95.8% 0.022 222);
	--color-tint: oklch(91% 0.04 222);
	--color-ink: oklch(21% 0.02 228); --color-ink-2: oklch(40% 0.025 225); --color-muted: oklch(52% 0.025 222);
	--color-rule: oklch(84% 0.02 222);
	/* The spot cyan: one hue, three strengths */
	--color-accent: oklch(48% 0.085 222);
	--color-accent-ink: var(--color-paper);
	--color-spot: oklch(64% 0.1 222);
	--color-face-top: oklch(81% 0.06 222);
	--color-error: oklch(52% 0.19 27);
	--color-focus: var(--color-accent);
	/* The drawing: linework in ink, form boards as unscreened stock */
	--color-line: var(--color-ink);
	--color-wood: var(--color-paper);

	--font-display: "Work Sans", "Work Sans Fallback", ui-sans-serif, system-ui, sans-serif;
	--font-body: "Work Sans", "Work Sans Fallback", ui-sans-serif, system-ui, sans-serif;
	--radius-card: 2px; --radius-pill: 999px; --rule-hair: 1px; --rule-line: 1.5px; --rule-heavy: 3px;
	--tracking-display: -0.025em;
	--measure: 68ch;
	--hit: 48px;
	color-scheme: light;
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--color-paper: oklch(17% 0.012 222); --color-paper-2: oklch(21% 0.014 222); --color-paper-3: oklch(24% 0.016 222);
		--color-plate: oklch(22% 0.03 222); --color-tint: oklch(29% 0.045 222);
		--color-ink: oklch(94% 0.01 222); --color-ink-2: oklch(80% 0.02 222); --color-muted: oklch(66% 0.025 222);
		--color-rule: oklch(36% 0.025 222);
		--color-accent: oklch(74% 0.1 222); --color-accent-ink: oklch(17% 0.012 222);
		--color-spot: oklch(60% 0.1 222); --color-face-top: oklch(40% 0.06 222); --color-wood: oklch(22% 0.03 222);
		--color-error: oklch(70% 0.16 27);
		color-scheme: dark;
	}
}
:root[data-theme="dark"] {
	--color-paper: oklch(17% 0.012 222); --color-paper-2: oklch(21% 0.014 222); --color-paper-3: oklch(24% 0.016 222);
	--color-plate: oklch(22% 0.03 222); --color-tint: oklch(29% 0.045 222);
	--color-ink: oklch(94% 0.01 222); --color-ink-2: oklch(80% 0.02 222); --color-muted: oklch(66% 0.025 222);
	--color-rule: oklch(36% 0.025 222);
	--color-accent: oklch(74% 0.1 222); --color-accent-ink: oklch(17% 0.012 222);
	--color-spot: oklch(60% 0.1 222); --color-face-top: oklch(40% 0.06 222); --color-wood: oklch(22% 0.03 222);
	--color-error: oklch(70% 0.16 27);
	color-scheme: dark;
}
/* Print is always the light plate on paper, whatever the screen theme. */
@media print {
	:root, :root:not([data-theme="light"]), :root[data-theme="dark"] {
		--color-paper: oklch(99.4% 0.003 222); --color-paper-2: oklch(97% 0.008 222); --color-paper-3: oklch(94% 0.012 222);
		--color-plate: oklch(95.8% 0.022 222); --color-tint: oklch(91% 0.04 222);
		--color-ink: oklch(21% 0.02 228); --color-ink-2: oklch(40% 0.025 225); --color-muted: oklch(52% 0.025 222);
		--color-rule: oklch(84% 0.02 222);
		--color-accent: oklch(48% 0.085 222); --color-accent-ink: oklch(99.4% 0.003 222);
		--color-spot: oklch(64% 0.1 222); --color-face-top: oklch(81% 0.06 222); --color-wood: oklch(99.4% 0.003 222);
		--color-error: oklch(52% 0.19 27);
		color-scheme: light;
	}
}
@media (min-width: 48rem) { :root { --gutter: 40px; } }
@media (min-width: 80rem) { :root { --gutter: 64px; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scrollbar-color: var(--color-muted) var(--color-paper); scroll-padding-top: var(--space-3xl); }
body { margin: 0; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-md); line-height: 1.55; -webkit-font-smoothing: antialiased; caret-color: var(--color-accent); }
::selection { background: color-mix(in oklab, var(--color-accent) 22%, transparent); color: var(--color-ink); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
a:hover { text-decoration-color: var(--color-accent); }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-synthesis: none; overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
li, figcaption { text-wrap: pretty; }
b, strong, th { font-weight: 600; }
img, video { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; }
.num { font-variant-numeric: tabular-nums; }
.fr { font-variant-numeric: tabular-nums diagonal-fractions; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media screen and (max-width: 29.99rem) {
	.data--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
	.data--stack tbody tr { display: grid; gap: var(--space-2xs); padding: var(--space-sm) var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }
	.data--stack tbody tr:first-child { border-top: 0; }
	.data--stack tbody :is(th, td) { padding: 0; border: 0; }
	.data--stack tbody td { display: flex; justify-content: space-between; gap: var(--space-md); text-align: right; }
	.data--stack tbody td::before { content: attr(data-label); flex: none; max-width: 50%; text-align: left; color: var(--color-ink-2); }
}

/* Long exact values (the units table) on the narrowest phones: the column name over the value, not beside it. */
@media screen and (max-width: 22.49rem) {
	.t-defs tbody td { display: block; text-align: left; }
	.t-defs tbody td::before { display: block; max-width: none; font-size: var(--text-sm); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }

/* ---------- Chrome ---------- */
/* GeneratePress wraps the page in its own capped container; the child theme's .wrap owns the width instead. */
#page.grid-container { max-width: none; padding: 0; }
.site-content { display: block; padding: 0; }
.wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.top { background: var(--color-paper); border-bottom: var(--rule-hair) solid var(--color-rule); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: 56px; }
/* The lockup: ink follows the text colour, the accent block follows the theme's spot cyan. */
.brand { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-ink); text-decoration: none; --bm-accent: var(--color-accent); }
.brand svg { display: block; height: 26px; width: auto; aspect-ratio: 216.35 / 32; }
.foot .brand { color: var(--color-ink); }
.foot .brand svg { height: 24px; }
/* GeneratePress colours every link on hover with its own dark grey, which dimmed the lockup and links in the dark
   theme; links keep their own colour here and each block sets its hover. */
a:is(:hover, :focus, :active) { color: inherit; }
.brand:is(:hover, :focus, :active) { color: var(--color-ink); }

/* Main navigation: the bar from 64rem (the lockup and five labels need that width), a Menu disclosure below it. */
.nav { display: none; }
.nav-list, .menu-list { list-style: none; margin: 0; padding: 0; }
.nav-list { display: flex; gap: var(--space-2xs); }
.nav-list a, .menu-list a { display: flex; align-items: center; min-height: 44px; padding-inline: var(--space-sm); color: var(--color-ink-2); font-weight: 400; text-decoration: none; }
.nav-list a:hover, .menu-list a:hover { color: var(--color-ink); text-decoration: underline; }
.nav-list a[aria-current="page"], .menu-list a[aria-current="page"] { color: var(--color-ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 3px; text-underline-offset: 0.45em; }
.menu { position: relative; }
.menu summary { list-style: none; display: flex; align-items: center; min-height: 44px; padding-inline: var(--space-md); border: var(--rule-line) solid var(--color-ink); border-radius: var(--radius-card); font-weight: 600; cursor: pointer; }
.menu summary:hover { background: var(--color-tint); }
.menu summary::-webkit-details-marker { display: none; }
.menu[open] summary { background: var(--color-ink); color: var(--color-paper); }
.menu nav { position: absolute; right: 0; top: calc(100% + var(--space-xs)); z-index: var(--z-dropdown); min-width: 220px; background: var(--color-paper); border: var(--rule-line) solid var(--color-ink); padding: var(--space-xs); }
@media (min-width: 64rem) {
	.nav { display: flex; align-items: center; gap: var(--space-2xs); }
	.menu { display: none; }
}
/* The theme switch: a 44px round target with an 18px half-filled disc at the bar's end; a row under the links in the
   Menu. Shown by the script (no scripts, no switch). */
.theme-t { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--radius-pill); background: none; color: var(--color-ink-2); font: inherit; cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.theme-t[hidden] { display: none; }
.theme-t:hover { background: var(--color-tint); color: var(--color-ink); }
.theme-i { width: 18px; height: 18px; }
.theme-i circle { fill: none; stroke: currentColor; stroke-width: 1.5; }
.theme-i path { fill: currentColor; }
.theme-t--row { display: flex; justify-content: flex-start; gap: var(--space-xs); width: 100%; height: auto; min-height: 44px; margin-top: var(--space-2xs); padding-inline: var(--space-sm); border-top: var(--rule-hair) solid var(--color-rule); border-radius: 0; }
@media print { .nav, .menu { display: none; } }

.crumbs { padding-top: var(--space-md); }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); font-size: var(--text-sm); color: var(--color-ink-2); }
.crumbs li { display: flex; align-items: center; gap: var(--space-xs); }
.crumbs li + li::before { content: "›" / ""; color: var(--color-muted); }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-ink-2); }
.crumbs a:hover { color: var(--color-ink); }

main h1 { margin-top: var(--space-xs); font-size: var(--text-display-s); font-weight: 800; line-height: 1.05; letter-spacing: var(--tracking-display); }
.lead { margin-top: var(--space-sm); max-width: var(--measure); font-size: var(--text-lead); color: var(--color-ink-2); }
.copy { max-width: var(--measure); margin-top: var(--space-xl); font-size: var(--text-prose); }
.copy > * + * { margin-top: var(--space-md); }
.copy h2 { margin-top: var(--space-2xl); font-size: var(--text-section); font-weight: 800; line-height: 1.15; letter-spacing: var(--tracking-display); }
.copy h3 { margin-top: var(--space-xl); font-size: var(--text-title); font-weight: 600; line-height: 1.3; }

.foot { margin-top: var(--space-3xl); border-top: var(--rule-line) solid var(--color-ink); background: var(--color-paper); }
.foot .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-lg); padding-block: var(--space-lg); }
.foot nav { margin-left: auto; }
.foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--space-md); }
.foot a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-ink-2); }
.foot a:hover { color: var(--color-ink); }
.brand:active, .crumbs a:active, .foot a:active { opacity: 0.7; }

@media (min-width: 48rem) {
	.top .wrap { min-height: 64px; }
	main h1 { font-size: var(--text-display); }
}

/* ---------- Tool page: head ---------- */
.head { display: grid; gap: var(--space-xs); padding-bottom: var(--space-lg); }
.home .head { padding-top: var(--space-md); } /* no breadcrumb trail on the home */
.head .lead { margin-top: 0; color: var(--color-ink); font-size: var(--text-lg); line-height: 1.35; }
.checked { margin-top: var(--space-2xs); font-size: var(--text-sm); color: var(--color-ink-2); }
svg.to { display: inline-block; width: 1.05em; height: 0.6em; vertical-align: 0.1em; margin-inline: var(--space-3xs); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- The plate (tinted stock) ---------- */
.plate { background: var(--color-plate); border-block: var(--rule-line) solid var(--color-ink); }
.tool { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "cap" "fig" "fields" "list" "tip"; padding-block: var(--space-lg) var(--space-xl); }
.fig { grid-area: fig; margin: 0; padding-top: var(--space-lg); min-width: 0; }
.cap { grid-area: cap; min-width: 0; }
.cap-out { display: contents; }
.fields { grid-area: fields; margin-top: var(--space-lg); min-width: 0; }
.list { grid-area: list; margin-top: var(--space-xl); min-width: 0; }
.tip { grid-area: tip; margin-top: var(--space-lg); }
.print-meta, .print-sizes, .nojs { display: none; }
/* Without scripts only the slab is worked out: another tab hides the slab's answer and says so. */
.tool:not(.is-live, .tool--measure, .tool--tape):has(.shapes input:not([value="slab"]):checked) :is(.fig, .cap-out, .acts, .list, .sum) { display: none; }
.tool:not(.is-live, .tool--measure, .tool--tape):has(.shapes input:not([value="slab"]):checked) .nojs { display: block; font-size: var(--text-lg); font-weight: 600; }

/* The drawing: black linework, one weight, and the spot cyan for the concrete */
.art-box { position: relative; overflow: clip; overflow-clip-margin: var(--space-sm); } /* the detail circle's clipped edge stays inside */
.art-box--wide, .k-w { display: none; }
.art { display: block; width: 100%; height: auto; overflow: visible; }
.art path, .art circle { vector-effect: non-scaling-stroke; stroke: var(--color-line); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; fill: none; }
.art .cc.f-t { fill: var(--color-face-top); }
.art .cc.f-r { fill: var(--color-spot); }
.art .cc.f-l { fill: color-mix(in oklab, var(--color-spot) 82%, var(--color-line)); }
.art .stip-bg { fill: var(--color-spot); }
.art .stip-d { fill: var(--color-line); stroke: none; }
.art :is(.wd, .stk, .bag) { fill: var(--color-wood); }
.art :is(.wd, .stk, .bag).f-l { fill: color-mix(in oklab, var(--color-line) 8%, var(--color-wood)); }
.art .bag.f-t { fill: color-mix(in oklab, var(--color-line) 4%, var(--color-wood)); }
.art .gh, .art .ph { stroke-dasharray: 5 4; }
.art .ah { fill: var(--color-line); stroke: none; }
.art .det-bg { fill: var(--color-plate); stroke: none; }
.art .area { font-family: var(--font-body); font-size: 22px; font-weight: 400; fill: var(--color-ink); }
.art .dl--missing { stroke-dasharray: 2 5; }
.tool .art .dim.is-error :is(.dl, .ring, .lead) { stroke-dasharray: 6 4; }
.tool .art .dim .dl.dl--missing { stroke-dasharray: 2 5; }
.art .dim :is(path, circle) { transition: stroke var(--dur-micro) var(--ease-out), stroke-width var(--dur-micro) var(--ease-out); }
.fig figcaption, .fig2 figcaption { font-size: var(--text-sm); color: var(--color-ink-2); margin-top: var(--space-xs); line-height: 1.45; }
figcaption b { color: var(--color-ink); margin-right: var(--space-2xs); }

/* Callouts: the numbered discs on the drawing are links to their fields */
.callout { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: var(--space-2xs); min-height: 44px; padding: 0 var(--space-2xs); color: var(--color-ink); font-size: var(--text-xs); font-weight: 600; line-height: 1.2; white-space: nowrap; text-decoration: none; }
.callout .cv, .ptag { background: var(--color-plate); -webkit-text-stroke: 6px var(--color-plate); paint-order: stroke fill; }
.callout--side { transform: translate(0, -50%); }
.callout:hover .cv { text-decoration: underline; text-underline-offset: 0.2em; }
.ptag { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); font-size: var(--text-sm); font-weight: 600; white-space: nowrap; line-height: 1.2; }
.disc { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: var(--radius-pill); border: var(--rule-line) solid var(--color-accent); color: var(--color-accent); background: var(--color-plate); font-size: var(--text-xs); font-weight: 800; line-height: 1; transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.callout:hover .disc, .callout:focus-visible .disc { background: var(--color-accent); color: var(--color-accent-ink); }

/* Signature: the field in use lights its own dimension on the plate */
.tool:has(.key--n1:focus-within) .dim--n1 :is(.dl, .ring, .lead, .det-ring),
.tool:has(.callout--n1:hover) .dim--n1 :is(.dl, .ring, .lead, .det-ring),
.tool:has(.key--n2:focus-within) .dim--n2 :is(.dl, .ring, .lead, .det-ring),
.tool:has(.callout--n2:hover) .dim--n2 :is(.dl, .ring, .lead, .det-ring),
.tool:has(.key--n3:focus-within) .dim--n3 :is(.dl, .ring, .lead, .det-ring),
.tool:has(.callout--n3:hover) .dim--n3 :is(.dl, .ring, .lead, .det-ring),
.tool:has(.key--n4:focus-within) .dim--n4 :is(.dl, .ring, .lead, .det-ring),
.tool:has(.callout--n4:hover) .dim--n4 :is(.dl, .ring, .lead, .det-ring) { stroke: var(--color-accent); stroke-width: 3; }
.tool:has(.key--n1:focus-within) .dim--n1 .ah,
.tool:has(.key--n2:focus-within) .dim--n2 .ah,
.tool:has(.key--n3:focus-within) .dim--n3 .ah,
.tool:has(.key--n4:focus-within) .dim--n4 .ah { fill: var(--color-accent); }
.tool:has(.key--n1:focus-within) .callout--n1 .disc,
.tool:has(.key--n2:focus-within) .callout--n2 .disc,
.tool:has(.key--n3:focus-within) .callout--n3 .disc,
.tool:has(.key--n4:focus-within) .callout--n4 .disc { background: var(--color-accent); color: var(--color-accent-ink); }
.tool:has(.key--n1:focus-within) .callout--n1 .cv,
.tool:has(.key--n2:focus-within) .callout--n2 .cv,
.tool:has(.key--n3:focus-within) .callout--n3 .cv,
.tool:has(.key--n4:focus-within) .callout--n4 .cv { color: var(--color-accent); }

/* ---------- Caption: the answer ---------- */
.total { display: flex; align-items: flex-end; gap: var(--space-sm); flex-wrap: wrap; }
.big { font-family: var(--font-display); font-size: var(--text-figure); font-weight: 800; line-height: 0.82; letter-spacing: -0.035em; }
.unit { display: flex; flex-direction: column; padding-bottom: var(--space-3xs); }
.u1 { font-size: var(--text-xl); font-weight: 600; line-height: 1.1; }
.u2 { font-size: var(--text-sm); color: var(--color-ink-2); line-height: 1.3; }
.exact { font-size: var(--text-sm); color: var(--color-ink-2); margin-top: var(--space-sm); }
.exact .num { color: var(--color-ink); font-weight: 600; }
.bags { display: grid; margin: var(--space-sm) 0 0; border-top: var(--rule-hair) solid var(--color-rule); }
.bags > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "dt n" "ld ld"; align-items: baseline; column-gap: var(--space-sm); padding-block: var(--space-xs); }
.bags > div + div { border-top: var(--rule-hair) solid var(--color-rule); }
.bags dt { grid-area: dt; color: var(--color-ink-2); font-weight: 600; }
.bags dd { margin: 0; min-width: 0; }
.bag-n { grid-area: n; color: var(--color-ink-2); white-space: nowrap; }
.bag-n b { font-size: var(--text-xl); color: var(--color-ink); }
.bags .ld { grid-area: ld; }
.ld { color: var(--color-ink-2); }
.bags b, .buy b { font-weight: 800; }
.ex-line { color: var(--color-ink-2); margin-bottom: var(--space-sm); }
.ex-line a { color: var(--color-ink); font-weight: 600; display: inline-block; padding-block: var(--space-sm); margin-block: calc(-1 * var(--space-sm)); }
.acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-lg); margin-top: var(--space-md); }
.print, .q-go { appearance: none; border: 0; border-radius: var(--radius-card); min-height: var(--hit); padding-inline: var(--space-lg); background: var(--color-accent); color: var(--color-accent-ink); font-weight: 600; font-size: var(--text-md); cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out); }
.print:hover, .q-go:hover { background: color-mix(in oklab, var(--color-accent) 86%, var(--color-ink)); }
.print:active, .q-go:active { background: color-mix(in oklab, var(--color-accent) 75%, var(--color-ink)); }
.print:disabled { background: transparent; color: var(--color-ink-2); border: var(--rule-line) dashed var(--color-ink-2); cursor: not-allowed; }
.quiet { appearance: none; background: none; border: 0; padding: 0 var(--space-2xs); min-height: 44px; color: var(--color-ink); font-size: var(--text-md); font-weight: 400; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; cursor: pointer; }
.quiet:hover { text-decoration-thickness: 2px; }
.quiet:active { opacity: 0.7; }
.copy-status { font-size: var(--text-sm); color: var(--color-ink-2); overflow-wrap: anywhere; }
.copy-status:empty { display: none; }
.need-big { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 800; line-height: 1.12; letter-spacing: -0.02em; }
.need-sub { color: var(--color-ink-2); margin-top: var(--space-xs); }
.issues { list-style: none; margin: var(--space-sm) 0 0; padding: 0; display: grid; gap: var(--space-sm); }
.issues li { display: flex; gap: var(--space-sm); align-items: flex-start; }
.issues .fix { display: flex; width: max-content; margin-top: var(--space-xs); }
.disc--err { border-color: var(--color-ink); color: var(--color-ink); }

/* ---------- Fields ---------- */
.shapes { border: var(--rule-line) solid var(--color-ink); border-radius: var(--radius-card); margin: 0; padding: 0; display: flex; flex-wrap: wrap; background: var(--color-paper); }
.shapes input { appearance: none; width: 0; height: 0; margin: 0; opacity: 0; position: absolute; }
.shapes label { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; min-height: 44px; padding-inline: var(--space-xs); font-size: var(--text-sm); font-weight: 600; color: var(--color-ink-2); cursor: pointer; text-align: center; }
.shapes label:hover { color: var(--color-ink); background: var(--color-tint); }
.shapes input:checked + label { background: var(--color-ink); color: var(--color-paper); }
.shapes input:focus-visible + label { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.example-note { font-size: var(--text-sm); color: var(--color-ink-2); margin-top: var(--space-sm); }
.tool.is-live:not(.is-example) .example-note { visibility: hidden; }
.shape-set { display: none; margin-top: var(--space-sm); }
.tool:has(#in-shape-slab:checked) .shape-set--slab,
.tool:has(#in-shape-footing:checked) .shape-set--footing,
.tool:has(#in-shape-wall:checked) .shape-set--wall,
.tool:has(#in-shape-column:checked) .shape-set--column,
.tool:has(#in-shape-steps:checked) .shape-set--steps { display: block; }
.key { padding: var(--space-sm) var(--space-sm) var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); margin-inline: calc(-1 * var(--space-sm)); transition: background-color var(--dur-micro) var(--ease-out); }
.key:focus-within { background: var(--color-tint); }
.kname { display: flex; align-items: center; gap: var(--space-xs); font-size: var(--text-prose); font-weight: 600; }
.kname .disc { width: 28px; height: 28px; font-size: var(--text-sm); }
.key:focus-within .kname .disc { background: var(--color-accent); color: var(--color-accent-ink); }
.cells { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); margin-top: var(--space-xs); }
.cell { position: relative; display: block; }
.cell--ft { width: 7.25rem; }
.cell--in, .cell--pct, .cell--n { width: 5.5rem; }
.cell--frac { width: 6.25rem; }
.cells input, .cells select { display: block; width: 100%; height: 52px; border: var(--rule-line) solid var(--color-ink); border-radius: var(--radius-card); background: var(--color-paper); color: var(--color-ink); font-size: var(--text-lg); font-weight: 600; font-variant-numeric: tabular-nums; padding: 0 var(--space-sm); }
.cell--ft input, .cell--pct input { padding-right: var(--space-xl); }
.cells select { appearance: none; padding-right: var(--space-xl); cursor: pointer; }
.cells select:has(option[value=""]:checked) { color: var(--color-ink-2); }
.cells input:hover, .cells select:hover { border-color: var(--color-accent); }
.cells input:focus-visible, .cells select:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.cells [aria-invalid="true"] { border-color: var(--color-error); border-style: dashed; }
.chev { position: absolute; right: var(--space-sm); top: 50%; transform: translateY(-50%); width: 12px; height: 8px; fill: none; stroke: var(--color-ink); stroke-width: 1.5; pointer-events: none; }
.sfx { position: absolute; right: var(--space-sm); top: 50%; transform: translateY(-50%); font-size: var(--text-sm); color: var(--color-ink-2); pointer-events: none; }
.sfx--in { position: static; transform: none; font-size: var(--text-prose); }
.key-help { font-size: var(--text-sm); color: var(--color-ink-2); margin-top: var(--space-xs); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); }
.key-help:empty { display: none; }
.key.is-error .key-help { color: var(--color-error); font-weight: 600; }
.fix { appearance: none; display: inline-flex; align-items: center; vertical-align: middle; min-height: 44px; padding-inline: var(--space-md); border: var(--rule-line) solid var(--color-ink); border-radius: var(--radius-card); background: var(--color-paper); color: var(--color-ink); font-weight: 600; font-size: var(--text-sm); white-space: nowrap; cursor: pointer; }
.fix:hover, .chip:hover, .step:hover { background: var(--color-tint); }
.fix:active, .chip:active, .step:active { background: color-mix(in oklab, var(--color-tint) 70%, var(--color-ink)); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-sm); }
.chip { appearance: none; min-height: 44px; min-width: 64px; padding-inline: var(--space-sm); border: var(--rule-hair) solid var(--color-ink); border-radius: var(--radius-card); background: var(--color-paper); color: var(--color-ink); font-weight: 600; cursor: pointer; }
.key-hint { font-size: var(--text-sm); color: var(--color-ink-2); margin-top: var(--space-xs); max-width: 34rem; }
.stepper { display: flex; align-items: center; gap: var(--space-2xs); }
.step { appearance: none; width: 52px; height: 52px; display: grid; place-items: center; border: var(--rule-line) solid var(--color-ink); border-radius: var(--radius-card); background: var(--color-paper); color: var(--color-ink); cursor: pointer; padding: 0; }
.step svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.waste .cells { gap: var(--space-xs) var(--space-md); }
.waste .key-help { margin-top: 0; }
.clear-row { display: flex; justify-content: flex-end; border-top: var(--rule-hair) solid var(--color-rule); padding-top: var(--space-xs); }

/* Shape tools: a job is pieces (A, B, …), each a shape added or taken away; Fig. 1 joins them into one outline. */
.piece { border: 0; margin: var(--space-sm) 0 0; padding: 0; min-width: 0; }
.piece + .piece { border-top: var(--rule-line) solid var(--color-ink); padding-top: var(--space-sm); }
.piece-h { display: flex; align-items: center; gap: var(--space-xs); padding: 0; font-size: var(--text-lg); font-weight: 800; }
.piece-h:not(.visually-hidden) { float: left; width: 100%; } /* floated: off the rule above */
.piece-h + * { clear: both; }
.pmark { display: inline-grid; place-items: center; width: 28px; height: 28px; border: var(--rule-line) solid var(--color-ink); border-radius: var(--radius-card); background: var(--color-ink); color: var(--color-paper); font-size: var(--text-sm); }
.piece--cut .pmark { background: var(--color-paper); color: var(--color-ink); border-style: dashed; }
.piece-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-md); margin-top: var(--space-xs); }
.shapes--sign label { padding-inline: var(--space-md); }
.shapes--piece { margin-top: var(--space-xs); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.shapes--piece label { padding-inline: var(--space-2xs); }
.cell--sq { width: 9.5rem; }
.cell--sq input { padding-right: var(--space-2xl); }
.add-row { display: flex; flex-wrap: wrap; gap: 0 var(--space-lg); border-top: var(--rule-line) solid var(--color-ink); padding-block: var(--space-2xs); margin-top: var(--space-sm); }
.add-row .quiet { display: inline-flex; align-items: center; gap: var(--space-2xs); }
.add-row svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.quiet:disabled { opacity: 0.5; cursor: not-allowed; }
.tool--measure:not(.is-live) :is(.add-row, .clear-row, [data-remove]) { display: none; }
.tool--measure:not(.is-live) .nojs { display: block; margin-top: var(--space-sm); }
/* Without scripts only the example is worked out: another tab hides its answer and the note says so. */
.tool--measure:not(.is-live):has(.shapes input:checked:not([data-ex])) :is(.fig, .cap-out, .acts, .list, .sum) { display: none; }
.tool--measure:not(.is-live):has(.shapes input:checked:not([data-ex])) .nojs { font-size: var(--text-lg); font-weight: 600; }
.art .nos { stroke: none; }
.art .grid { stroke: var(--color-spot); stroke-width: 1; }
.art .mat-bg { fill: var(--color-face-top); }
.art .mat-d { fill: color-mix(in oklab, var(--color-line) 45%, var(--color-face-top)); stroke: none; }
.art .cut { stroke-dasharray: 5 4; }
.art .area--plan { stroke: var(--color-face-top); stroke-width: 5px; stroke-linejoin: round; paint-order: stroke; }
.callout--left { transform: translate(-100%, -50%); }
.art .dim.is-on :is(.dl, .ring, .lead, .det-ring) { stroke: var(--color-accent); stroke-width: 3; }
.art .dim.is-on .ah { fill: var(--color-accent); }
.callout.is-on .disc { background: var(--color-accent); color: var(--color-accent-ink); }
.callout.is-on .cv { color: var(--color-accent); }
.pieces-math { list-style: none; margin: var(--space-2xs) 0 0; padding: 0; display: grid; gap: var(--space-2xs); color: var(--color-ink-2); overflow-wrap: anywhere; }

/* Tape plate (home): readings added and taken away. Phone: title, total, rows, then Fig. 1; 60rem: as the reference. */
.tool--tape { grid-template-areas: "title" "cap" "fields" "fig"; }
.plate-h { grid-area: title; margin-bottom: var(--space-sm); font-size: var(--text-xl); font-weight: 800; line-height: 1.2; letter-spacing: -0.015em; }
.tool--tape .big { font-size: var(--text-figure-s); }
.tool--tape .total { row-gap: var(--space-xs); }
.exact-note { margin-top: var(--space-2xs); font-size: var(--text-sm); color: var(--color-ink-2); }
.tool--tape .fields { container-type: inline-size; }
.tool--tape .cell--ft { width: 6.5rem; }
.tool--tape .cell--in { width: 5rem; }
.tool--tape .cell--frac { width: 6rem; }
.row-h { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.row .shapes--sign label { font-size: var(--text-lg); }
.row--cut .kname .disc { border-style: dashed; }
.tool--tape:not(.is-live) :is(.add-row, .acts) { display: none; }
.tool--tape:not(.is-live) .nojs { display: block; margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-ink-2); }
@container (min-width: 31rem) {
	.row { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--space-sm); }
	.row .rname { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
	.row .cells { margin-top: 0; }
	.row .key-help { flex-basis: 100%; }
}
/* Fig. 1 of the tape: the blade screened in two strengths of the spot, ticks in ink, the total in the accent. */
.art .bl { fill: var(--color-face-top); }
.art .bl--b { fill: var(--color-spot); }
.art .cutx { fill: color-mix(in oklab, var(--color-plate) 70%, transparent); stroke: none; }
.art .tk, .art .xl { stroke-width: 1; }
.art .tk--on { stroke: var(--color-accent); stroke-width: 3; }
.art .dim--tot .dl { stroke: var(--color-accent); stroke-width: 2; }
.art .dim--tot .ah { fill: var(--color-accent); }
.ptag--tot, .ptag--mark { color: var(--color-accent); font-weight: 800; }

/* Phone: once the caption has scrolled away, the total rides at the top while you type, with the field in use. */
.sum { position: fixed; inset: 0 0 auto; z-index: var(--z-sticky); display: none; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 var(--space-sm); padding: var(--space-xs) var(--gutter); background: var(--color-plate); border-bottom: var(--rule-line) solid var(--color-ink); }
.tool.sum-on .sum { display: grid; }
.sum-t { grid-column: 1; grid-row: 1; min-width: 0; font-weight: 600; line-height: 1.25; }
.sum-t b { font-size: var(--text-xl); font-weight: 800; }
.sum-x { font-weight: 400; color: var(--color-ink-2); }
.sum-b { grid-column: 1 / -1; display: flex; flex-wrap: wrap; color: var(--color-ink-2); }
.sum-b span + span { margin-left: var(--space-sm); padding-left: var(--space-sm); border-left: var(--rule-hair) solid var(--color-rule); }
.sum-b b { color: var(--color-ink); }
.sig { grid-column: 2; grid-row: 1; display: none; align-items: center; gap: var(--space-xs); font-size: var(--text-lg); font-weight: 600; white-space: nowrap; }
.sig .disc { width: 28px; height: 28px; background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.tool:has(.key--n1:focus-within) .sig--n1,
.tool:has(.key--n2:focus-within) .sig--n2,
.tool:has(.key--n3:focus-within) .sig--n3,
.tool:has(.key--n4:focus-within) .sig--n4,
.sig.is-on { display: flex; }

/* ---------- Shopping list and tip ---------- */
.list h2, .tip h2 { font-size: var(--text-xl); font-weight: 800; letter-spacing: -0.015em; line-height: 1.2; }
.job { margin-top: var(--space-2xs); color: var(--color-ink-2); }
.job b { color: var(--color-ink); }
.buy, .data { width: 100%; border-collapse: collapse; border: var(--rule-line) solid var(--color-ink); background: var(--color-paper); margin-top: var(--space-md); font-variant-numeric: tabular-nums; }
.buy th, .buy td, .data th, .data td { text-align: left; vertical-align: top; padding: var(--space-sm) var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }
.buy thead th, .data thead th { background: var(--color-tint); border-top: 0; border-bottom: var(--rule-line) solid var(--color-ink); font-size: var(--text-sm); font-weight: 600; padding-block: var(--space-xs); }
.buy tbody th, .data tbody th { font-weight: 600; }
.buy tbody th { white-space: nowrap; width: 1%; }
.buy td.num { font-size: var(--text-lg); white-space: nowrap; }
.fig2 { margin: var(--space-lg) 0 0; max-width: 30rem; }
.tip { background: var(--color-tint); border-top: var(--rule-line) solid var(--color-ink); padding: var(--space-lg); align-self: start; }
.tip p { margin-top: var(--space-xs); }

/* ---------- Article (white stock) ---------- */
.article { padding-block: var(--space-2xl) 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
.toc { display: none; }
.prose { font-size: var(--text-prose); line-height: 1.6; min-width: 0; max-width: 46rem; }
.prose p { max-width: var(--measure); }
.prose > section + section { margin-top: var(--space-2xl); }
.prose h2 { font-size: var(--text-section); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; margin-bottom: var(--space-md); }
.prose h3 { font-size: var(--text-lg); font-weight: 800; line-height: 1.3; margin-top: var(--space-lg); }
.prose h3 + p { margin-top: var(--space-2xs); }
.prose p + p, .prose .worked-out + p, .prose .table-wrap + p:not(.table-note) { margin-top: var(--space-md); }
.prose .worked-out { margin-block: var(--space-lg); }
.note { color: var(--color-ink-2); margin-bottom: var(--space-md); }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: var(--space-lg); }
.steps li { counter-increment: step; display: grid; grid-template-columns: 3rem minmax(0, 1fr); column-gap: var(--space-md); }
.steps li::before { content: counter(step); grid-row: span 2; font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 800; line-height: 0.85; color: var(--color-accent); letter-spacing: -0.04em; }
.steps h3 { margin-top: 0; }
.steps p { margin-top: var(--space-2xs); color: var(--color-ink-2); overflow-wrap: anywhere; }
.formula { margin-top: var(--space-xl); border: var(--rule-line) solid var(--color-ink); padding: var(--space-lg); background: var(--color-paper); }
.formula-f { font-size: var(--text-lg); font-weight: 600; line-height: 1.35; }
.formula-n { margin-top: var(--space-xs); overflow-wrap: anywhere; }
.formula-k { margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-ink-2); }
.table-wrap { overflow-x: auto; margin-top: var(--space-md); }
.table-wrap .data { margin-top: 0; }
.table-note { font-size: var(--text-sm); color: var(--color-ink-2); margin-top: var(--space-sm); }
.caution { margin-top: var(--space-lg); display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--space-md); align-items: start; border: var(--rule-line) solid var(--color-ink); padding: var(--space-md) var(--space-lg); background: var(--color-paper); }
.caution-i { width: 28px; height: 28px; fill: none; stroke: var(--color-ink); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.related { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); border-bottom: var(--rule-hair) solid var(--color-rule); }
.related li { border-top: var(--rule-hair) solid var(--color-rule); display: flex; align-items: center; min-height: 52px; color: var(--color-ink-2); }
.related a { display: flex; align-items: center; min-height: 52px; color: var(--color-ink); font-weight: 600; text-decoration-color: var(--color-rule); text-underline-offset: 0.25em; }
.related a:hover { text-decoration-color: var(--color-accent); color: var(--color-accent); }
.sources { margin: var(--space-md) 0 0; padding-left: var(--space-lg); display: grid; gap: var(--space-xs); color: var(--color-ink-2); }

/* ---------- Home: the house plate (view/house.mjs, [bm_house]), catalog cards between the plate and the article ---------- */
.band { padding-bottom: var(--space-lg); }
.pick-h { font-size: var(--text-xl); font-weight: 800; line-height: 1.2; letter-spacing: -0.015em; }
.pick-lead { margin-top: var(--space-2xs); color: var(--color-ink-2); }
.house { position: relative; margin-top: var(--space-sm); display: grid; gap: var(--space-lg); }
.house-art { position: relative; overflow: clip; aspect-ratio: var(--ar); }
/* The drawing in two crops from the build: phone and tablet (--ar, --cw, --cx, --cy), desktop (the same with a d). */
.hsvg { position: absolute; left: calc(var(--cx) * 100%); top: calc(var(--cy) * 100%); display: block; width: calc(var(--cw) * 100%); max-width: none; height: auto; }
.hsvg :is(path, circle) { vector-effect: non-scaling-stroke; stroke: var(--color-line); stroke-width: 1.25; stroke-linejoin: round; stroke-linecap: round; }
.hsvg .dt { fill: none; stroke-width: 0.75; }
.hsvg .gnd { fill: var(--color-plate); }
.hsvg :is(.wd, .wl, .bd, .tb) { fill: var(--color-wood); }
.hsvg :is(.wd, .wl, .tb).f-l { fill: color-mix(in oklab, var(--color-line) 8%, var(--color-wood)); }
.hsvg .in { fill: var(--color-paper-2); }
.hsvg .in.f-l { fill: var(--color-paper-3); }
.hsvg :is(.gl, .rf) { fill: var(--color-tint); }
.hsvg :is(.dr, .rf--b, .tc.f-t) { fill: var(--color-face-top); }
.hsvg .tc { fill: var(--color-spot); }
.hsvg .tc.f-l { fill: color-mix(in oklab, var(--color-spot) 82%, var(--color-line)); }
.hsvg :is(.cc-t, .pl-bg) { fill: var(--color-face-top); }
.hsvg .mu-bg { fill: var(--color-paper-3); }
.hsvg .cc-r { fill: var(--color-spot); }
.hsvg .cc-l { fill: color-mix(in oklab, var(--color-spot) 82%, var(--color-line)); }
.hsvg :is(.so-bg) { fill: var(--color-tint); }
.hsvg :is(.gv-bg, .se-bg) { fill: var(--color-paper); }
.hsvg :is(.hs-d, .so-d, .pl-d) { fill: var(--color-line); stroke: none; }
.hsvg .mu-c { fill: none; stroke-width: 1.5; }
.hsvg .gv-s { fill: var(--color-paper); stroke-width: 0.75; }
.hsvg .se-l { stroke-width: 0.75; }
.hsvg .hl path { fill: none; stroke: var(--color-ink-2); stroke-width: 1; }
.hsvg .hl circle { fill: var(--color-line); stroke: none; }
.hsvg .hl { display: none; }
.hsvg :is(.hf, .hd, .hl path, .hl circle) { transition: fill var(--dur-micro) var(--ease-out), stroke var(--dur-micro) var(--ease-out); }
.hn { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--radius-pill); border: var(--rule-line) solid var(--color-accent); background: var(--color-paper); color: var(--color-accent); font-size: var(--text-xs); font-weight: 800; line-height: 1; pointer-events: none; }
@media (min-width: 60rem) {
	.house-art { aspect-ratio: var(--ard); }
	.hsvg { left: calc(var(--cxd) * 100%); top: calc(var(--cyd) * 100%); width: calc(var(--cwd) * 100%); }
	.hn { left: var(--xd); top: var(--yd); }
}
.quick { display: grid; gap: var(--space-md); align-content: start; }
.q-pick { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs); }
.q-pick input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.qp { display: flex; align-items: center; gap: var(--space-xs); min-height: 52px; padding: var(--space-xs) var(--space-sm); border: var(--rule-line) solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper); font-weight: 600; line-height: 1.25; cursor: pointer; transition: border-color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out); }
@media (hover: hover) { .qp:hover { border-color: var(--color-accent); } }
.q-pick input:checked + .qp { border-color: var(--color-accent); background: color-mix(in oklab, var(--color-accent) 10%, var(--color-paper)); }
.q-pick input:checked + .qp .disc { background: var(--color-accent); color: var(--color-accent-ink); }
.q-pick input:focus-visible + .qp { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.q-form { display: none; gap: var(--space-sm); }
.house:has(#qp-1:checked) .q-form--n1, .house:has(#qp-2:checked) .q-form--n2, .house:has(#qp-3:checked) .q-form--n3, .house:has(#qp-4:checked) .q-form--n4, .house:has(#qp-5:checked) .q-form--n5 { display: grid; }
.q-h { font-size: var(--text-lg); font-weight: 800; line-height: 1.25; }
.q-name { font-weight: 600; }
.q-key .cells { margin-top: var(--space-2xs); }
.q-in { display: flex; }
.quick .cell--in input { padding-right: var(--space-xl); border-top-right-radius: 0; border-bottom-right-radius: 0; }
.quick .cell--frac select { border-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.quick .cell--frac select:hover, .quick .cell--frac select:focus-visible { border-left: 0; }
.q-out { display: block; border-top: var(--rule-line) solid var(--color-ink); padding-top: var(--space-sm); }
.q-fig { font-weight: 600; font-size: var(--text-lg); }
.q-fig b { font-size: var(--text-figure-s); font-weight: 800; line-height: 1; letter-spacing: -0.035em; }
.q-buy { color: var(--color-ink-2); }
.q-go { justify-self: start; }
.qp--n5 { grid-column: 1 / -1; }
.qp-soon { margin-left: auto; font-size: var(--text-sm); font-weight: 400; color: var(--color-ink-2); }
.q-soon .q-h { font-size: var(--text-lg); }
.quick .cell--frac { width: 7.5rem; }
.quick .cell--frac select:has(option[value=""]:checked) { color: var(--color-ink-2); font-size: var(--text-sm); font-weight: 400; }
/* The picked part (its card or its drawing, a click or a tap): accent screen, accent outline, its number filled.
   A mouse over a part or a card previews it lighter, so the pick stays the one plain answer. */
.hsvg a.hp { cursor: pointer; }
@media (hover: hover) {
	.house:has(.hp--n1:hover, .qp--n1:hover) .hp--n1 .hf,
	.house:has(.hp--n2:hover, .qp--n2:hover) .hp--n2 .hf,
	.house:has(.hp--n3:hover, .qp--n3:hover) .hp--n3 .hf,
	.house:has(.hp--n4:hover, .qp--n4:hover) .hp--n4 .hf,
	.house:has(.hp--n5:hover, .qp--n5:hover) .hp--n5 .hf { fill: color-mix(in oklab, var(--color-accent) 16%, var(--color-paper)); stroke: var(--color-accent); stroke-width: 2; }
	.house:has(.hp--n1:hover, .qp--n1:hover) .hp--n1 .hd,
	.house:has(.hp--n2:hover, .qp--n2:hover) .hp--n2 .hd,
	.house:has(.hp--n3:hover, .qp--n3:hover) .hp--n3 .hd,
	.house:has(.hp--n4:hover, .qp--n4:hover) .hp--n4 .hd,
	.house:has(.hp--n5:hover, .qp--n5:hover) .hp--n5 .hd { stroke: var(--color-accent); }
	.house:has(.hp--n1:hover, .qp--n1:hover) .hn--n1,
	.house:has(.hp--n2:hover, .qp--n2:hover) .hn--n2,
	.house:has(.hp--n3:hover, .qp--n3:hover) .hn--n3,
	.house:has(.hp--n4:hover, .qp--n4:hover) .hn--n4,
	.house:has(.hp--n5:hover, .qp--n5:hover) .hn--n5 { border-width: 2px; }
}
.house:has(#qp-1:checked) .hp--n1 .hf,
.house:has(#qp-2:checked) .hp--n2 .hf,
.house:has(#qp-3:checked) .hp--n3 .hf,
.house:has(#qp-4:checked) .hp--n4 .hf,
.house:has(#qp-5:checked) .hp--n5 .hf { fill: color-mix(in oklab, var(--color-accent) 40%, var(--color-paper)); stroke: var(--color-accent); stroke-width: 2.5; }
.house:has(#qp-1:checked) .hp--n1 .hd,
.house:has(#qp-2:checked) .hp--n2 .hd,
.house:has(#qp-3:checked) .hp--n3 .hd,
.house:has(#qp-4:checked) .hp--n4 .hd,
.house:has(#qp-5:checked) .hp--n5 .hd { stroke: var(--color-accent); stroke-width: 2; }
.house:has(#qp-1:checked) .hn--n1,
.house:has(#qp-2:checked) .hn--n2,
.house:has(#qp-3:checked) .hn--n3,
.house:has(#qp-4:checked) .hn--n4,
.house:has(#qp-5:checked) .hn--n5 { background: var(--color-accent); color: var(--color-accent-ink); }
.q-all { display: inline-flex; align-items: center; gap: var(--space-2xs); min-height: 44px; justify-self: start; font-weight: 600; text-decoration-color: var(--color-rule); text-underline-offset: 0.2em; }
.q-all:hover { text-decoration-color: var(--color-accent); }
.q-all .to { width: 18px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.5; }
/* Phone: the picked part's sizes and answer close under the house. */
@media (max-width: 59.99rem) {
	.house { gap: var(--space-sm); }
	.quick { gap: var(--space-xs); }
	.qp { min-height: 44px; padding: var(--space-2xs) var(--space-xs); }
	.q-form { gap: var(--space-2xs); }
	.q-key .cells { margin-top: 0; }
	.quick .cells :is(input, select) { height: 44px; font-size: var(--text-md); }
	.q-out { padding-top: var(--space-2xs); }
	.band:has(.house) { padding-bottom: 0; }
}
.wide { padding-top: var(--space-xl); }
.catalog > h2 { font-size: var(--text-section); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
.catalog-lead { margin-top: var(--space-xs); max-width: var(--measure); font-size: var(--text-prose); color: var(--color-ink-2); }
.groups { display: grid; gap: var(--space-xl); margin-top: var(--space-lg); }
.group-h { font-size: var(--text-lg); font-weight: 800; line-height: 1.3; }
.cards { list-style: none; margin: var(--space-sm) 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg) var(--space-xl); }
.card { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: start; align-content: start; gap: var(--space-md); border-top: var(--rule-line) solid var(--color-ink); padding-top: var(--space-sm); }
.card-art { aspect-ratio: 4 / 3; display: grid; place-items: center; padding: var(--space-xs); background: var(--color-plate); }
.card-art .art { width: 100%; height: 100%; }
.card-h { margin: 0; font-family: var(--font-display); font-size: var(--text-lg); font-weight: 800; line-height: 1.25; }
.card-h a { display: inline-flex; align-items: center; min-height: 44px; text-decoration-color: var(--color-rule); text-underline-offset: 0.2em; }
.card-h a::after { content: ""; position: absolute; inset: 0; } /* the whole card, drawing included, opens the calculator */
.card:hover .card-h a { text-decoration-color: var(--color-accent); }
.card-does { color: var(--color-ink-2); }
.card-ex { margin-top: var(--space-xs); }
.card-ex > span { display: block; }
.card-job, .card-buy { font-size: var(--text-sm); color: var(--color-ink-2); }
.card-fig { font-weight: 600; }
.card-fig b { font-size: var(--text-xl); font-weight: 800; }

@media (min-width: 48rem) {
	.shapes--piece { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.shapes--piece:has(> label:nth-of-type(9)) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--space-2xl); row-gap: var(--space-2xs); align-items: end; padding-bottom: var(--space-md); }
	.head .crumbs { grid-column: 1 / -1; }
	.promise { padding-bottom: var(--space-3xs); }
	.callout { font-size: var(--text-prose); gap: var(--space-xs); padding: 0 var(--space-xs); }
	.art-box--wide { display: block; }
	.k-w { display: inline; }
	.art-box--narrow, .k-n, .fc-area { display: none; }
	.big { font-size: var(--text-hero); }
	.bags { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.bags > div { display: block; padding: var(--space-xs) var(--space-xs) 0 0; }
	.bags > div + div { border-top: 0; padding-left: var(--space-sm); border-left: var(--rule-hair) solid var(--color-rule); }
	.tool.sum-on .sum { display: none; }
	.article { grid-template-columns: 13rem minmax(0, 1fr); column-gap: var(--space-2xl); }
	.toc { display: block; }
	.toc > * { position: sticky; }
	.toc-h { top: var(--space-lg); font-size: var(--text-sm); font-weight: 600; }
	.toc ol { top: calc(var(--space-lg) + var(--space-lg)); list-style: none; margin: var(--space-xs) 0 0; padding: 0; border-left: var(--rule-hair) solid var(--color-rule); }
	.toc a { display: flex; align-items: center; min-height: 40px; padding-left: var(--space-sm); font-size: var(--text-sm); color: var(--color-ink-2); text-decoration: none; }
	.toc a:hover { color: var(--color-ink); text-decoration: underline; }
	.tool--tape .big { font-size: var(--text-figure); }
	.cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.card { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
}
@media (min-width: 60rem) {
	.tool { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "fig fields" "cap fields" "list tip"; grid-template-rows: auto 1fr auto; column-gap: var(--space-2xl); padding-block: var(--space-xs) var(--space-2xl); }
	.tool--measure { grid-template-areas: "fig fields" "cap fields" "list fields" "list tip"; grid-template-rows: auto auto auto 1fr; } /* the list follows the answer, the tip the form */
	.fig { padding-top: 0; }
	.cap { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: start; column-gap: var(--space-lg); border-top: var(--rule-line) solid var(--color-ink); padding-top: var(--space-sm); margin-top: var(--space-xs); }
	.cap-out > * { grid-column: 1 / -1; }
	.cap-out > :is(.total, .need-big) { grid-column: 1; grid-row: 1; }
	.acts { grid-column: 2; grid-row: 1; align-self: end; margin-top: 0; }
	.cap .nojs { grid-column: 1 / -1; }
	.exact { margin-top: var(--space-xs); }
	.ex-line { display: none; }
	.fields { margin-top: 0; padding-top: var(--space-xs); }
	.list, .tip { margin-top: var(--space-xl); }
	.list { border-top: var(--rule-line) solid var(--color-ink); padding-top: var(--space-md); }
	.related { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-xl); }
	.tool--tape { grid-template-areas: "title fields" "fig fields" "cap fields"; grid-template-rows: auto auto 1fr; padding-block: var(--space-lg) var(--space-xl); }
}
/* Wide: the groups share one four-column grid, each spanning as many columns as it has cards. */
@media (min-width: 80rem) {
	.groups { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--space-xl); }
	.group { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; grid-template-rows: auto 1fr; }
	.group[data-n="1"] { grid-column: span 1; }
	.group[data-n="2"] { grid-column: span 2; }
	.group[data-n="3"] { grid-column: span 3; }
	.group-h { grid-column: 1 / -1; }
	.group .cards { grid-column: 1 / -1; grid-template-columns: subgrid; }
}

/* Wide: the house on the left, the picked part's quick form on the right. */
@media (min-width: 60rem) {
	.house { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--space-2xl); align-items: start; }
}

@media screen and (max-width: 47.99rem) {
	.buy thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
	.buy tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name count" "load load"; gap: var(--space-2xs) var(--space-md); padding: var(--space-sm) var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }
	.buy tbody tr:first-child { border-top: 0; }
	.buy tbody :is(th, td) { padding: 0; border: 0; width: auto; }
	.buy tbody th { grid-area: name; align-self: baseline; white-space: normal; }
	.buy tbody td.num { grid-area: count; text-align: right; }
	.buy tbody td.ld { grid-area: load; }
	.buy tbody td.rm { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
	.art .dim :is(path, circle), .disc, .key, .print, .hsvg :is(.hf, .hd, .hl path, .hl circle) { transition: none; }
}

/* ---------- Print: date and link, the sizes, Fig. 1, the total, the list and the tip ---------- */
@media print {
	.crumbs, .head, .band, .article, .wide, .foot, .fields, .acts, .sum, .ex-line, .nojs { display: none !important; }
	.print-meta { display: block; color: var(--color-ink-2); }
	.print-sizes { display: block; font-size: var(--text-lg); font-weight: 600; }
	.plate { background: none; border: 0; --color-plate: var(--color-paper); }
	.tool { display: block; padding: var(--space-md) 0 0; }
	.fig { padding-top: var(--space-sm); break-inside: avoid; }
	.art-box--wide { display: block !important; }
	.art-box--narrow, .fc-area, .k-n { display: none !important; }
	.k-w { display: inline !important; }
	.art { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
	.callout .cv, .ptag { -webkit-text-stroke: 0; }
	.cap { margin-top: var(--space-md); border-top: var(--rule-line) solid var(--color-ink); padding-top: var(--space-sm); }
	.big { font-size: var(--text-3xl); }
	.list, .tip { margin-top: var(--space-lg); }
	.buy, .tip, .fig2 { break-inside: avoid; }
}