/* cmp.wiki setup matrix (2026-11-03). Loaded only on the page-matrix template. Palette and fonts are the
   variables from /shared/header.css. Phone first: controls stack, results are cards; a table from 900px. */

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

.cmpm-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;
}
.cmpm-h--first { margin-top: 0; }
.cmpm-nojs { padding: 12px 16px; border-left: 2px solid var(--cmp-orange); background: var(--cmp-surface); color: var(--cmp-muted); }
.cmpm-ns { display: block; color: var(--cmp-muted); font-family: var(--cmp-font-body); font-size: 12px; font-weight: 400; line-height: 1.35; white-space: normal; }

/* ---------- controls ---------- */
.cmpm-controls {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 14px;
	margin: 0;
	padding: 16px;
	border: 1px solid var(--cmp-border);
	border-radius: 8px;
	background: var(--cmp-surface);
}
@media (min-width: 560px) { .cmpm-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .cmpm-controls { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 20px; } }
.cmpm-field { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; border: 0; }
.cmpm-field > label, .cmpm-field legend {
	padding: 0;
	color: var(--cmp-muted);
	font-family: var(--cmp-font-mono);
	font-size: 10.5px;
	letter-spacing: .12em;
	text-transform: uppercase;
}
.cmpm-field legend { margin-bottom: 6px; }
.cmpm-field select {
	width: 100%;
	min-height: 44px;
	padding: 0 34px 0 12px;
	border: 1px solid #2c333c;
	border-radius: 6px;
	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;
	color: var(--cmp-text);
	font: 15px/1.2 var(--cmp-font-body);
	appearance: none;
	-webkit-appearance: none;
}
.cmpm-field select:hover { border-color: #3a434d; }
.cmpm-field select:focus-visible { outline: 2px solid var(--cmp-teal); outline-offset: 1px; }
.cmpm-seg__row { display: flex; gap: 6px; }
.cmpm-seg__row label { position: relative; flex: 1 1 0; cursor: pointer; }
.cmpm-seg__row input, .cmpm-check input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}
.cmpm-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;
}
.cmpm-seg__row input:checked + span { border-color: var(--cmp-teal); background: rgba(94, 242, 232, .12); color: var(--cmp-teal); }
.cmpm-seg__row input:focus-visible + span, .cmpm-check input:focus-visible + span { outline: 2px solid var(--cmp-teal); outline-offset: 2px; }
.cmpm-check { justify-content: flex-end; }
.cmpm-field.cmpm-check > label { color: var(--cmp-text); font-family: var(--cmp-font-body); font-size: 14px; letter-spacing: 0; text-transform: none; }
.cmpm-check label { position: relative; display: flex; cursor: pointer; }
.cmpm-check span {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	color: var(--cmp-text);
	font-size: 14px;
}
.cmpm-check span::before {
	content: "";
	flex: 0 0 18px;
	height: 18px;
	border: 1px solid #3a434d;
	border-radius: 4px;
	background: var(--cmp-bg-2);
}
.cmpm-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;
}
.cmpm-share-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 12px; }
.cmpm-share { background: transparent; cursor: pointer; }
.cmpm-share-msg { color: var(--cmp-muted); font-size: 13px; overflow-wrap: anywhere; }

/* ---------- setup notes ---------- */
.cmp-content .cmpm-notes { margin: 0; padding: 0; list-style: none; }
.cmp-content .cmpm-notes li.cmpm-note {
	margin: 0 0 8px;
	padding: 10px 12px 10px 14px;
	border-left: 2px solid var(--cmp-border);
	background: var(--cmp-surface);
	font-size: 14.5px;
	line-height: 1.5;
}
.cmpm-note::marker { content: none; }
.cmpm-tag {
	display: inline-block;
	margin-right: 4px;
	padding: 1px 6px;
	border-radius: 3px;
	background: rgba(166, 172, 180, .14);
	color: var(--cmp-muted);
	font-family: var(--cmp-font-mono);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	vertical-align: 1px;
	white-space: nowrap;
}
.cmp-content .cmpm-note--ok { border-left-color: var(--cmp-teal); }
.cmpm-note--ok .cmpm-tag { background: rgba(94, 242, 232, .14); color: var(--cmp-teal); }
.cmp-content .cmpm-note--mod { border-left-color: var(--cmp-orange); }
.cmpm-note--mod .cmpm-tag { background: rgba(255, 138, 61, .15); color: #ff9a55; }
.cmp-content .cmpm-note--fuse { border-left-color: var(--cmp-orange); background: rgba(255, 138, 61, .06); }
.cmpm-note--fuse .cmpm-tag { background: var(--cmp-orange); color: var(--cmp-ink); }
.cmp-content .cmpm-note--no { border-left-color: var(--cmp-red, #ff6464); background: rgba(255, 100, 100, .06); }
.cmpm-note--no .cmpm-tag { background: rgba(255, 100, 100, .16); color: #ff7a7a; }

.cmpm-summary {
	margin: 1.5rem 0 0;
	padding: 12px 14px;
	border: 1px solid rgba(94, 242, 232, .35);
	border-radius: 8px;
	background: rgba(94, 242, 232, .06);
	color: var(--cmp-text);
	font-size: 15px;
}
.cmpm-howlink { margin: 8px 0 0; font-size: 14px; }
.cmp-content .cmpm-proven-line { margin: 8px 0 0; color: var(--cmp-muted); font-size: 14px; line-height: 1.5; }

/* "Confirm on your own card": in every row's details; also in the row itself from 900px */
.cmpm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 18px; margin-top: 4px; }
.cmpm-actions .cmpm-more { margin-top: 0; }
.cmp-content a.cmpm-confirm {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	color: #ff9a55;
	font-size: 13px;
	line-height: 1.3;
	text-decoration-color: rgba(255, 154, 85, .45);
}
.cmp-content a.cmpm-confirm:hover { color: var(--cmp-text); }
.cmp-content a.cmpm-confirm--proven { color: var(--cmp-teal); text-decoration-color: rgba(94, 242, 232, .4); }
.cmp-content a.cmpm-confirm--row { display: none; }
.cmp-content .cmpm-confirm-p { margin: 4px 0 2px; }
@media (min-width: 900px) {
	.cmp-content a.cmpm-confirm--row { display: inline-flex; }
}

/* ---------- results: cards on phones ---------- */
.cmpm-group > summary { cursor: pointer; list-style: none; }
.cmpm-group > summary::-webkit-details-marker { display: none; }
.cmpm-group > summary .cmpm-h { display: inline-flex; align-items: baseline; gap: 10px; }
.cmpm-group > summary .cmpm-h::before { content: "+"; color: var(--cmp-teal); font-family: var(--cmp-font-mono); }
.cmpm-group[open] > summary .cmpm-h::before { content: "\2212"; }
.cmpm-group > summary:focus-visible { outline: 2px solid var(--cmp-teal); outline-offset: 4px; }

.cmp-content .cmpm-table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.4; }
.cmpm-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.cmpm-table, .cmpm-table tbody, .cmpm-table tr, .cmpm-table td { display: block; }
.cmp-content .cmpm-table tr {
	margin: 0 0 12px;
	padding: 14px 14px 6px;
	border: 1px solid var(--cmp-border);
	border-radius: 8px;
	background: var(--cmp-surface-2, #151a20);
}
.cmp-content .cmpm-table td {
	display: grid;
	grid-template-columns: 8.5em minmax(0, 1fr);
	gap: 2px 12px;
	padding: 7px 0;
	border-bottom: 1px solid var(--cmp-border);
	text-align: left;
}
.cmp-content .cmpm-table td:last-child { border-bottom: 0; }
.cmpm-table td::before {
	content: attr(data-label);
	grid-row: span 3;
	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 .cmpm-table td.cmpm-c-recipe { display: block; padding-top: 0; }
.cmpm-table td.cmpm-c-recipe::before { content: none; }
.cmp-content .cmpm-table a.cmpm-name {
	color: var(--cmp-text);
	font-family: var(--cmp-font-display);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.25;
	text-decoration: none;
}
.cmp-content .cmpm-table a.cmpm-name:hover { color: var(--cmp-teal); }
.cmpm-sub { display: block; margin-top: 2px; color: var(--cmp-muted); font-size: 12.5px; line-height: 1.4; }
.cmpm-setup { font-family: var(--cmp-font-mono); font-size: 11.5px; }
.cmpm-num { font-family: var(--cmp-font-mono); font-variant-numeric: tabular-nums; }
.cmpm-v { display: block; color: var(--cmp-text); font-size: 15px; font-weight: 600; }
.cmpm-m--none .cmpm-v, .cmpm-m--unknown .cmpm-v { color: var(--cmp-muted); font-weight: 400; }
.cmpm-k {
	justify-self: start;
	width: fit-content;
	margin-top: 3px;
	padding: 1px 6px;
	border-radius: 3px;
	font-family: var(--cmp-font-mono);
	font-size: 10px;
	letter-spacing: .06em;
	line-height: 1.6;
}
.cmpm-k--measured { background: rgba(94, 242, 232, .14); color: var(--cmp-teal); }
.cmpm-k--estimated { background: rgba(255, 138, 61, .16); color: #ff9a55; }
.cmpm-k--unknown, .cmpm-k--ref { background: rgba(166, 172, 180, .12); color: var(--cmp-muted); }
.cmpm-fit { color: var(--cmp-text); }
.cmpm-fit--fits, .cmpm-fit--fewer { color: var(--cmp-teal); }
.cmpm-fit--maybe { color: #ff9a55; }
.cmpm-fit--blocked { color: #ff8f8f; }
.cmpm-fit--variant { color: var(--cmp-muted); }

.cmp-content .cmpm-table td > .cmp-badge { justify-self: start; width: fit-content; }
.cmpm-more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 40px;
	margin-top: 4px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--cmp-teal);
	font: 13px/1.3 var(--cmp-font-body);
	text-align: left;
	cursor: pointer;
}
.cmpm-more::before { content: "+"; width: 1em; font-family: var(--cmp-font-mono); }
.cmpm-more[aria-expanded="true"]::before { content: "\2212"; }
.cmpm-more:hover { color: var(--cmp-text); }
.cmpm-more:focus-visible { outline: 2px solid var(--cmp-teal); outline-offset: 2px; }
/* phones: the detail row continues the card above it */
.cmp-content .cmpm-table tr.cmpm-detail-row {
	margin-top: -13px;
	padding: 0 14px 14px;
	border-top: 0;
	border-radius: 0 0 8px 8px;
}
.cmp-content .cmpm-table tr.cmpm-detail-row td { display: block; padding: 0; border: 0; }
.cmpm-table tr.cmpm-detail-row td::before { content: none; }
.cmpm-detail-body {
	margin-top: 0;
	padding: 12px;
	border-radius: 6px;
	background: var(--cmp-bg-2);
	font-size: 13.5px;
	line-height: 1.5;
}
.cmp-content .cmpm-detail-body p { margin: 0 0 6px; }
.cmpm-dt { color: var(--cmp-text); font-weight: 600; }
.cmp-content .cmpm-steps, .cmp-content .cmpm-caveats { margin: 0 0 12px; padding-left: 1.2em; }
.cmp-content .cmpm-steps li, .cmp-content .cmpm-caveats li { margin: 3px 0; font-size: 13.5px; }
.cmpm-dl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 10px 0; }
.cmpm-dl dt { margin-top: 8px; color: var(--cmp-muted); font-family: var(--cmp-font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.cmpm-dl dd { margin: 0; color: rgba(233, 230, 223, .92); }
@media (min-width: 720px) {
	.cmpm-dl { grid-template-columns: 11em minmax(0, 1fr); gap: 6px 14px; }
	.cmpm-dl dt { margin-top: 0; padding-top: 2px; }
}

/* ---------- results: a table from 900px ---------- */
@media (min-width: 900px) {
	.cmp-content .cmpm-table { display: table; table-layout: fixed; }
	.cmpm-table thead { position: static; width: auto; height: auto; overflow: visible; clip-path: none; display: table-header-group; }
	.cmpm-table tbody { display: table-row-group; }
	.cmp-content .cmpm-table tr { display: table-row; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; }
	.cmp-content .cmpm-table 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: .12em;
		text-align: left;
		text-transform: uppercase;
		vertical-align: bottom;
	}
	.cmp-content .cmpm-table td { display: table-cell; padding: 12px 12px 12px 0; border-bottom: 1px solid var(--cmp-border); vertical-align: top; }
	.cmp-content .cmpm-table tr:last-child td { border-bottom: 0; }
	.cmpm-table td::before { content: none; }
	.cmp-content .cmpm-table tr.cmpm-detail-row { display: table-row; margin: 0; padding: 0; }
	.cmp-content .cmpm-table tr.cmpm-detail-row[hidden] { display: none; }
	.cmp-content .cmpm-table tr.cmpm-detail-row td { display: table-cell; padding: 0 0 14px; border-bottom: 1px solid var(--cmp-border); }
	.cmpm-detail-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 32px; }
	.cmpm-detail-facts .cmpm-dl { margin-top: 0; }
	.cmpm-table th:nth-child(1) { width: 34%; }
	.cmpm-table th:nth-child(2) { width: 16%; }
	.cmpm-table th:nth-child(3), .cmpm-table th:nth-child(4), .cmpm-table th:nth-child(5) { width: 13%; }
	.cmpm-table th:nth-child(6) { width: 11%; }
	.cmpm-table--static th:nth-child(1) { width: 32%; }
	.cmpm-table--static th:nth-child(2) { width: 10%; }
	.cmpm-table--static th:nth-child(3) { width: 16%; }
	.cmpm-table--static th:nth-child(4), .cmpm-table--static th:nth-child(5), .cmpm-table--static th:nth-child(6) { width: 11%; }
	.cmpm-table--static th:nth-child(7) { width: 9%; }
	.cmp-content .cmpm-table a.cmpm-name { font-size: 15px; }
	.cmpm-v { font-size: 14px; }
	.cmpm-k { display: inline-block; }
}

/* ---------- How estimates are made ---------- */
.cmpm-how { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--cmp-border); }
.cmpm-how > p, .cmpm-how > ul, .cmpm-how > h3 { max-width: 760px; }
.cmp-content .cmpm-how h2 { margin-top: 0; }
.cmp-content .cmpm-how li { margin: .55em 0; }
.cmpm-foot { max-width: 760px; margin-top: 2rem; color: var(--cmp-muted); font-size: 14px; }

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

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

.cmp-tool-explainer summary { cursor: pointer; padding: 12px 0; color: var(--cmp-teal); }
.cmp-tool-explainer summary:focus-visible { outline: 2px solid var(--cmp-teal); outline-offset: 3px; }
#cmpm-app, #cmpm-how-title { scroll-margin-top: 80px; }
@media (max-width: 600px) { .cmp-matrix-page .cmp-page-head { padding-top: 24px; padding-bottom: 20px; } .cmp-matrix-page .cmp-lede { font-size: 17px; } }