/* cmp.wiki "Will it fit" (2026-11-04). Loaded only on the page-fit template. Palette and fonts are the variables
   from /shared/header.css. Phone first: controls stack, tables become cards; tables from 900px. */

.cmp-fit-page .cmp-page-title { font-size: clamp(1.55rem, 5.6vw, 3rem); max-width: 24ch; }
.cmpf { min-width: 0; }
.cmpf *, .cmpf *::before, .cmpf *::after { min-width: 0; }
.cmpf p, .cmpf li, .cmpf td, .cmpf th, .cmpf dd, .cmpf summary, .cmpf code { overflow-wrap: anywhere; }
.cmpf [hidden] { display: none !important; }

.cmpf-h {
	margin: 2rem 0 .75rem;
	font-family: var(--cmp-font-display);
	font-size: clamp(1.05rem, 3.6vw, 1.35rem);
	font-weight: 800;
	line-height: 1.2;
}
.cmp-content .cmpf-h--first { margin-top: 0; }
.cmpf-nojs { padding: 12px 16px; border-left: 2px solid var(--cmp-orange); background: var(--cmp-surface); color: var(--cmp-muted); }
.cmpf-ns { color: var(--cmp-muted); font-size: 12.5px; }
.cmp-content .cmpf-intro, .cmpf-how > p, .cmpf-how > ul, .cmpf-how > ol, .cmpf-how > h3 { max-width: 760px; }
.cmp-content .cmpf-hint { margin: 2px 0 0; color: var(--cmp-muted); font-size: 13px; line-height: 1.45; }
.cmp-content .cmpf-hint a { color: var(--cmp-teal); }

/* ---------- controls ---------- */
.cmpf-controls {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 14px;
	margin: 0;
}
@media (min-width: 720px) { .cmpf-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .cmpf-controls { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cmpf-group {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 14px 16px 16px;
	border: 1px solid var(--cmp-border);
	border-radius: 8px;
	background: var(--cmp-surface);
}
.cmpf-group > legend {
	padding: 0 6px;
	color: var(--cmp-text);
	font-family: var(--cmp-font-mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
}
.cmpf-hand { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; border-top: 1px solid var(--cmp-border); }
.cmpf-field { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; border: 0; }
.cmpf-field > label, .cmpf-field > legend {
	padding: 0;
	color: var(--cmp-muted);
	font-family: var(--cmp-font-mono);
	font-size: 10.5px;
	letter-spacing: .1em;
	line-height: 1.4;
	text-transform: uppercase;
}
.cmpf-field > legend { margin-bottom: 6px; }
.cmpf-field select, .cmpf-field input[type="text"] {
	width: 100%;
	min-height: 44px;
	border: 1px solid #2c333c;
	border-radius: 6px;
	background-color: var(--cmp-bg-2);
	color: var(--cmp-text);
	font: 15px/1.2 var(--cmp-font-body);
}
.cmpf-field select {
	padding: 0 34px 0 12px;
	background: var(--cmp-bg-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23a6acb4' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 12px center / 12px 8px;
	appearance: none;
	-webkit-appearance: none;
}
.cmpf-field input[type="text"] { padding: 0 12px; font-family: var(--cmp-font-mono); font-variant-numeric: tabular-nums; }
.cmpf-field select:hover, .cmpf-field input[type="text"]:hover { border-color: #3a434d; }
.cmpf-field select:focus-visible, .cmpf-field input[type="text"]:focus-visible { outline: 2px solid var(--cmp-teal); outline-offset: 1px; }
.cmpf-preset-line { margin-top: -4px; }

.cmpf-seg__row { display: flex; gap: 6px; }
.cmpf-seg__row label { position: relative; flex: 1 1 0; cursor: pointer; }
.cmpf-seg__row input, .cmpf-check input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.cmpf-seg__row span {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 10px;
	border: 1px solid #2c333c;
	border-radius: 6px;
	background: var(--cmp-bg-2);
	color: var(--cmp-muted);
	font-size: 14px;
	text-align: center;
}
.cmpf-seg__row input:checked + span { border-color: var(--cmp-teal); background: rgba(94, 242, 232, .12); color: var(--cmp-teal); }
.cmpf-seg__row input:focus-visible + span, .cmpf-check input:focus-visible + span { outline: 2px solid var(--cmp-teal); outline-offset: 2px; }
.cmpf-check label { position: relative; display: flex; cursor: pointer; }
.cmpf-check span {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	min-height: 44px;
	padding-top: 11px;
	color: var(--cmp-text);
	font-size: 14px;
	line-height: 1.4;
}
.cmpf-check span::before {
	content: "";
	flex: 0 0 18px;
	height: 18px;
	margin-top: 1px;
	border: 1px solid #3a434d;
	border-radius: 4px;
	background: var(--cmp-bg-2);
}
.cmpf-check input:checked + span::before {
	border-color: var(--cmp-teal);
	background: var(--cmp-teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1' fill='none' stroke='%23071012' stroke-width='2'/%3E%3C/svg%3E") no-repeat center / 11px 9px;
}
.cmpf-share-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 12px; }
.cmpf-share { background: transparent; cursor: pointer; }
.cmpf-share-msg { color: var(--cmp-muted); font-size: 13px; overflow-wrap: anywhere; }

/* ---------- verdict and key numbers ---------- */
.cmp-content .cmpf-verdict {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	padding: 14px 16px;
	border: 1px solid var(--cmp-border);
	border-left-width: 4px;
	border-radius: 8px;
	background: var(--cmp-surface);
	color: var(--cmp-text);
	font-size: 15px;
	line-height: 1.5;
}
.cmpf-verdict:focus { outline: 2px solid var(--cmp-teal); outline-offset: 2px; }
.cmpf-verdict-word { font-family: var(--cmp-font-display); font-size: clamp(1.3rem, 5vw, 1.8rem); font-weight: 800; line-height: 1.1; }
.cmp-content .cmpf-verdict--fits { border-color: rgba(94, 242, 232, .45); background: rgba(94, 242, 232, .06); }
.cmpf-verdict--fits .cmpf-verdict-word { color: var(--cmp-teal); }
.cmp-content .cmpf-verdict--tight { border-color: rgba(255, 138, 61, .5); background: rgba(255, 138, 61, .07); }
.cmpf-verdict--tight .cmpf-verdict-word { color: #ff9a55; }
.cmp-content .cmpf-verdict--no { border-color: rgba(255, 100, 100, .55); background: rgba(255, 100, 100, .07); }
.cmpf-verdict--no .cmpf-verdict-word { color: #ff7a7a; }
.cmpf-verdict--missing .cmpf-verdict-word { color: var(--cmp-muted); }

.cmpf-keys {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 10px;
	margin: 14px 0 6px;
}
@media (min-width: 560px) { .cmpf-keys { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .cmpf-keys { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cmpf-keys > div { padding: 10px 12px; border: 1px solid var(--cmp-border); border-radius: 6px; background: var(--cmp-surface-2, #151a20); }
.cmpf-keys dt { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--cmp-muted); font-family: var(--cmp-font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; }
.cmpf-keys dd { margin: 4px 0 0; color: var(--cmp-text); font-size: 15px; font-weight: 600; line-height: 1.4; }

/* labels: Measured, Calculated, Assumed */
.cmpf-k {
	display: inline-block;
	padding: 1px 6px;
	border-radius: 3px;
	font-family: var(--cmp-font-mono);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .06em;
	line-height: 1.6;
	text-transform: none;
	vertical-align: 1px;
	white-space: nowrap;
}
.cmpf-k--meas { background: rgba(94, 242, 232, .14); color: var(--cmp-teal); }
.cmpf-k--calc { background: rgba(233, 230, 223, .1); color: var(--cmp-text); }
.cmpf-k--assumed { background: rgba(255, 138, 61, .16); color: #ff9a55; }

/* ---------- tables: cards on phones ---------- */
.cmp-content .cmpf-table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.45; }
.cmpf-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.cmpf-table, .cmpf-table tbody, .cmpf-table tr, .cmpf-table td, .cmpf-table tbody th { display: block; }
.cmp-content .cmpf-table tr {
	margin: 0 0 10px;
	padding: 12px 14px 4px;
	border: 1px solid var(--cmp-border);
	border-radius: 8px;
	background: var(--cmp-surface-2, #151a20);
}
.cmp-content .cmpf-table tbody th { padding: 0 0 6px; border: 0; color: var(--cmp-text); font-weight: 700; text-align: left; }
.cmp-content .cmpf-table td {
	display: grid;
	grid-template-columns: 7.5em minmax(0, 1fr);
	gap: 2px 12px;
	padding: 6px 0;
	border-bottom: 1px solid var(--cmp-border);
	text-align: left;
}
.cmp-content .cmpf-table td:last-child { border-bottom: 0; }
.cmpf-table td::before {
	content: attr(data-label);
	color: var(--cmp-muted);
	font-family: var(--cmp-font-mono);
	font-size: 10px;
	letter-spacing: .1em;
	line-height: 1.9;
	text-transform: uppercase;
}
.cmp-content .cmpf-table td.cmpf-c-model { display: block; padding-top: 0; }
.cmpf-table td.cmpf-c-model::before { content: none; }
.cmpf-table td > .cmpf-k { justify-self: start; align-self: start; margin-top: 3px; }
.cmpf-name { color: var(--cmp-text); font-family: var(--cmp-font-display); font-size: 15px; font-weight: 700; line-height: 1.3; }
.cmp-content a.cmpf-name { color: var(--cmp-text); text-decoration: none; }
.cmp-content a.cmpf-name:hover { color: var(--cmp-teal); }
.cmpf-sub { display: block; margin-top: 3px; color: var(--cmp-muted); font-size: 12.5px; line-height: 1.4; }
.cmp-content .cmpf-sub a { color: var(--cmp-muted); }
.cmp-content .cmpf-sub a:hover { color: var(--cmp-teal); }
.cmpf-num { font-family: var(--cmp-font-mono); font-variant-numeric: tabular-nums; }
.cmpf-formula { font-family: var(--cmp-font-mono); font-size: 12.5px; color: rgba(233, 230, 223, .88); }
.cmp-content .cmpf-arith tr.cmpf-total { border-color: #2f3843; background: var(--cmp-surface-3, #1d232b); }
.cmpf-arith tr.cmpf-total th, .cmpf-arith tr.cmpf-total .cmpf-num { color: var(--cmp-text); font-weight: 700; }
.cmpf-nowrap { white-space: nowrap; }

@media (min-width: 900px) {
	.cmp-content .cmpf-table { display: table; table-layout: fixed; }
	.cmpf-table thead { position: static; width: auto; height: auto; overflow: visible; clip-path: none; display: table-header-group; }
	.cmpf-table tbody { display: table-row-group; }
	.cmp-content .cmpf-table tr { display: table-row; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; }
	.cmp-content .cmpf-table thead th {
		padding: 8px 12px 8px 0;
		border-bottom: 1px solid var(--cmp-border);
		color: var(--cmp-muted);
		font-family: var(--cmp-font-mono);
		font-size: 10px;
		font-weight: 400;
		letter-spacing: .1em;
		text-align: left;
		text-transform: uppercase;
		vertical-align: bottom;
	}
	.cmp-content .cmpf-table tbody th, .cmp-content .cmpf-table td { display: table-cell; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--cmp-border); vertical-align: top; }
	.cmpf-table td::before { content: none; }
	.cmp-content .cmpf-table td.cmpf-c-model { display: table-cell; padding-top: 10px; }
	.cmp-content .cmpf-table td:last-child { border-bottom: 1px solid var(--cmp-border); }
	.cmp-content .cmpf-table tr:last-child td, .cmp-content .cmpf-table tr:last-child th { border-bottom: 0; }
	.cmp-content .cmpf-arith tr.cmpf-total { background: none; }
	.cmp-content .cmpf-arith tr.cmpf-total th, .cmp-content .cmpf-arith tr.cmpf-total td { border-bottom-color: #3a434d; }
	.cmpf-arith th:nth-child(1) { width: 26%; }
	.cmpf-arith th:nth-child(2) { width: 50%; }
	.cmpf-arith th:nth-child(3) { width: 12%; }
	.cmpf-arith th:nth-child(4) { width: 12%; }
	.cmpf-recipes th:nth-child(1) { width: 26%; }
	.cmpf-recipes th:nth-child(2) { width: 9%; }
	.cmpf-recipes th:nth-child(3) { width: 27%; }
	.cmpf-recipes th:nth-child(4) { width: 11%; }
	.cmpf-recipes th:nth-child(5) { width: 20%; }
	.cmpf-recipes th:nth-child(6) { width: 7%; }
	.cmp-content .cmpf-presets { font-size: 13px; }
	.cmpf-presets th:nth-child(1) { width: 21%; }
	.cmpf-presets th:nth-child(2) { width: 5%; }
	.cmpf-presets th:nth-child(3) { width: 6%; }
	.cmpf-presets th:nth-child(4) { width: 6%; }
	.cmpf-presets th:nth-child(5) { width: 5%; }
	.cmpf-presets th:nth-child(6) { width: 7%; }
	.cmpf-presets th:nth-child(7) { width: 12%; }
	.cmpf-presets th:nth-child(8) { width: 10%; }
	.cmpf-presets th:nth-child(9) { width: 9%; }
	.cmpf-presets th:nth-child(10) { width: 9%; }
	.cmpf-presets th:nth-child(11) { width: 10%; }
	.cmpf-presets td:nth-child(11) { white-space: nowrap; }
}

/* ---------- recipes next to the result ---------- */
.cmp-content .cmpf-recipes-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 12px 0 0; padding: 0; list-style: none; }
@media (min-width: 980px) { .cmp-content .cmpf-recipes-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cmp-content .cmpf-recipes-list > li.cmpf-recipe {
	margin: 0;
	padding: 14px 14px 8px;
	border: 1px solid var(--cmp-border);
	border-radius: 8px;
	background: var(--cmp-surface-2, #151a20);
	font-size: 14px;
}
.cmpf-recipe::marker { content: none; }
.cmp-content .cmpf-recipes-list > li.cmpf-recipe--mine { border-color: rgba(94, 242, 232, .45); }
.cmp-content .cmpf-recipe-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin: 0 0 6px; }
.cmpf-dl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 6px 0 8px; }
.cmpf-dl dt { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; color: var(--cmp-muted); font-family: var(--cmp-font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.cmpf-dl dd { margin: 0; color: rgba(233, 230, 223, .92); font-size: 13.5px; line-height: 1.5; }
@media (min-width: 720px) {
	.cmpf-recipe .cmpf-dl { grid-template-columns: 9.5em minmax(0, 1fr); gap: 6px 12px; }
	.cmpf-recipe .cmpf-dl dt { margin-top: 0; padding-top: 2px; }
}
.cmp-content .cmpf-calc { margin: 8px 0 0; font-size: 13.5px; line-height: 1.5; }
.cmpf-use {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	margin-top: 4px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--cmp-teal);
	font: 600 13.5px/1.3 var(--cmp-font-body);
	text-align: left;
	cursor: pointer;
}
.cmpf-use::before { content: "\2191"; font-family: var(--cmp-font-mono); }
.cmpf-use:hover { color: var(--cmp-text); }
.cmpf-use:focus-visible { outline: 2px solid var(--cmp-teal); outline-offset: 2px; }
.cmpf-other { margin-top: 1.5rem; }
.cmpf-other > summary { cursor: pointer; list-style: none; }
.cmpf-other > summary::-webkit-details-marker { display: none; }
.cmpf-h--sum { display: inline-flex; align-items: baseline; gap: 10px; margin: 0; }
.cmpf-h--sum::before { content: "+"; color: var(--cmp-teal); font-family: var(--cmp-font-mono); }
.cmpf-other[open] .cmpf-h--sum::before { content: "\2212"; }
.cmpf-other > summary:focus-visible { outline: 2px solid var(--cmp-teal); outline-offset: 4px; }
.cmp-content .cmpf-notes { max-width: 760px; margin: 12px 0 0; color: var(--cmp-muted); font-size: 13.5px; }
.cmpf-howlink { margin: 1.5rem 0 0; font-size: 14px; }

/* ---------- static sections ---------- */
.cmpf-static { margin-top: 3rem; }
.cmpf-nojs:not([hidden]) + .cmpf-static { margin-top: 1.5rem; }
.cmpf-how { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--cmp-border); }
.cmp-content .cmpf-how h2 { margin-top: 0; }
.cmp-content .cmpf-how li { margin: .55em 0; }
.cmp-content .cmpf-formulas code { font-size: .85em; white-space: normal; }
.cmpf-how .cmpf-dl { max-width: 1000px; }
.cmp-content .cmpf-how .cmpf-dl dt { margin-top: 14px; color: var(--cmp-text); font-size: 11px; }
.cmp-content .cmpf-how .cmpf-dl ul { margin: 4px 0 0; }
.cmp-content .cmpf-how .cmpf-dl li { margin: .25em 0; font-size: 13.5px; }
.cmp-content .cmpf-how li.cmpf-note-li { color: var(--cmp-muted); }
.cmpf-foot { max-width: 760px; margin-top: 2rem; color: var(--cmp-muted); font-size: 14px; }

@media (prefers-reduced-motion: reduce) {
	.cmpf * { transition: none !important; }
}

/* QA 2026-11-04: with scripts on (html.cmp-js) the app keeps its space before fit.js builds it, so the sections below
   do not jump once it appears (Lighthouse CLS 0.24 on desktop). fit.js removes the hidden attribute when the app is ready. */
.cmp-js #cmpf-app[hidden] { display: block !important; visibility: hidden; min-height: 70vh; }

/* Keep the result beside the controls while the reader changes their setup. */
.cmpf-compact { position: sticky; top: 68px; z-index: 3; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 10px 12px; margin: 10px 0 16px; border: 1px solid var(--cmp-border); border-radius: 6px; background: var(--cmp-bg, #0b0e11); font-size: 13px; }
.cmpf-advanced { grid-column: 1 / -1; }
.cmpf-advanced summary, .cmp-tool-explainer summary { cursor: pointer; padding: 12px 0; color: var(--cmp-teal); }
.cmpf-advanced summary:focus-visible, .cmp-tool-explainer summary:focus-visible { outline: 2px solid var(--cmp-teal); outline-offset: 3px; }
.cmpf-advanced[open] > .cmpf-field { margin-top: 12px; }
#cmpf-app, #cmpf-verdict, #cmpf-how-title { scroll-margin-top: 130px; }
@media (max-width: 600px) { .cmp-fit-page .cmp-page-head { padding-top: 24px; padding-bottom: 20px; } .cmp-fit-page .cmp-lede { font-size: 17px; } }