/* cmp.wiki card check (2026-11-04). Loaded only on the page-check template. Palette and fonts are the variables
   from /shared/header.css. Phone first: everything stacks; boxes go two across and the rule table becomes a table
   from 900px. Long log lines wrap inside their box, so the page never scrolls sideways. */

.cmp-check-page .cmp-page-title { font-size: clamp(1.45rem, 5.4vw, 2.8rem); max-width: 24ch; }
.cmpc { min-width: 0; }
.cmpc *, .cmpc *::before, .cmpc *::after { min-width: 0; }
.cmpc p, .cmpc li, .cmpc td, .cmpc th, .cmpc summary, .cmpc code { overflow-wrap: anywhere; }
.cmpc [hidden] { display: none !important; }

.cmpc-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;
}
.cmpc-h:focus { outline: none; }
.cmpc-h:focus-visible { outline: 2px solid var(--cmp-teal); outline-offset: 4px; }
.cmpc-sub {
	margin: 1.75rem 0 .6rem;
	font-family: var(--cmp-font-body);
	font-size: 1.05rem;
	font-weight: 700;
}
.cmpc-nojs { padding: 12px 16px; border-left: 2px solid var(--cmp-orange); background: var(--cmp-surface); color: var(--cmp-muted); }
.cmp-content .cmpc code, .cmpc-cmd {
	padding: 1px 5px;
	border-radius: 4px;
	background: var(--cmp-bg-2);
	color: var(--cmp-text);
	font-family: var(--cmp-font-mono);
	font-size: .86em;
}

/* ---------- what to paste ---------- */
.cmp-content .cmpc-cmds__list { margin: 0; padding: 0; list-style: none; }
.cmp-content .cmpc-cmds__list li {
	display: grid;
	gap: 4px;
	margin: 0 0 8px;
	padding: 10px 12px;
	border: 1px solid var(--cmp-border);
	border-radius: 8px;
	background: var(--cmp-surface);
}
.cmpc-cmds__list li::marker { content: none; }
.cmp-content .cmpc-cmds__list .cmpc-cmd { justify-self: start; padding: 2px 7px; color: var(--cmp-teal); font-size: 13px; }
.cmpc-cmds__why { color: var(--cmp-muted); font-size: 14px; line-height: 1.45; }
@media (min-width: 900px) {
	.cmp-content .cmpc-cmds__list li { grid-template-columns: 19em minmax(0, 1fr); align-items: baseline; gap: 14px; }
}

/* ---------- form ---------- */
.cmpc-app { margin-top: 1.5rem; }
.cmpc-form {
	display: grid;
	gap: 16px;
	padding: 16px;
	border: 1px solid var(--cmp-border);
	border-radius: 8px;
	background: var(--cmp-surface);
}
.cmpc-field { display: flex; flex-direction: column; gap: 6px; }
.cmpc-field > label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.cmpc-field__name {
	color: var(--cmp-muted);
	font-family: var(--cmp-font-mono);
	font-size: 10.5px;
	letter-spacing: .12em;
	text-transform: uppercase;
}
.cmpc-field--any .cmpc-field__name { color: var(--cmp-teal); font-size: 11.5px; }
.cmp-content .cmpc-field__cmd { padding: 0; background: none; color: var(--cmp-text); font-size: 12.5px; }
.cmp-content .cmpc-hint { margin: 0; color: var(--cmp-muted); font-size: 13.5px; line-height: 1.45; }
.cmpc-ta {
	display: block;
	width: 100%;
	min-height: 7.5em;
	padding: 10px 12px;
	border: 1px solid #2c333c;
	border-radius: 6px;
	background: var(--cmp-bg-2);
	color: var(--cmp-text);
	font: 12.5px/1.45 var(--cmp-font-mono);
	white-space: pre;
	overflow: auto;
	resize: vertical;
	tab-size: 4;
}
.cmpc-field--any .cmpc-ta { min-height: 12em; }
.cmpc-ta:hover { border-color: #3a434d; }
.cmpc-ta:focus-visible { outline: 2px solid var(--cmp-teal); outline-offset: 1px; }
.cmp-content .cmpc-det { margin: 0; min-height: 1.3em; color: var(--cmp-muted); font-size: 12.5px; line-height: 1.4; }
.cmpc-boxes { display: grid; gap: 14px; margin: 0; padding: 14px 0 0; border: 0; border-top: 1px solid var(--cmp-border); }
.cmpc-legend {
	float: left;
	width: 100%;
	margin: 0 0 2px;
	padding: 0;
	color: var(--cmp-text);
	font-size: 14px;
	font-weight: 600;
}
.cmpc-legend + * { clear: left; }
@media (min-width: 900px) {
	.cmpc-boxes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
	.cmpc-legend { grid-column: 1 / -1; }
	.cmpc-form { padding: 20px; }
}

.cmpc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cmpc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 18px;
	border: 1px solid #3a434d;
	border-radius: 6px;
	background: transparent;
	color: var(--cmp-text);
	font: 600 14px/1.2 var(--cmp-font-body);
	cursor: pointer;
}
.cmpc-btn:hover { border-color: var(--cmp-teal); color: var(--cmp-teal); }
.cmpc-btn:focus-visible { outline: 2px solid var(--cmp-teal); outline-offset: 2px; }
.cmpc-btn--primary { border-color: var(--cmp-teal); background: var(--cmp-teal); color: var(--cmp-ink); }
.cmpc-btn--primary:hover { background: transparent; color: var(--cmp-teal); }
.cmpc-ex { display: inline-flex; flex: 1 1 14em; max-width: 100%; }
.cmpc-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: 14px/1.2 var(--cmp-font-body);
	appearance: none;
	-webkit-appearance: none;
}
.cmpc-select:focus-visible { outline: 2px solid var(--cmp-teal); outline-offset: 1px; }
.cmpc-keep { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--cmp-text); font-size: 14px; cursor: pointer; }
.cmpc-keep input { width: 18px; height: 18px; margin: 0; accent-color: var(--cmp-teal); }
.cmpc-keep input:focus-visible { outline: 2px solid var(--cmp-teal); outline-offset: 2px; }
.cmp-content .cmpc-privacy { margin: 0; color: var(--cmp-muted); font-size: 13px; line-height: 1.5; }
.cmp-content .cmpc-status { margin: 0; color: var(--cmp-teal); font-size: 13px; }
.cmp-content .cmpc-status:empty { display: none; }

/* ---------- results ---------- */
.cmp-content .cmpc-tally { margin: 0 0 12px; color: var(--cmp-muted); font-size: 14px; }
.cmp-content .cmpc-empty { color: var(--cmp-muted); }
.cmp-content .cmpc-cards { display: grid; gap: 8px; margin: 0 0 8px; padding: 0; list-style: none; }
.cmp-content .cmpc-card {
	display: grid;
	gap: 2px;
	margin: 0;
	padding: 10px 12px;
	border: 1px solid var(--cmp-border);
	border-radius: 8px;
	background: var(--cmp-surface);
}
.cmpc-card::marker { content: none; }
.cmpc-card__id { color: var(--cmp-text); font-size: 14.5px; font-weight: 600; }
.cmpc-card__line { color: var(--cmp-muted); font-family: var(--cmp-font-mono); font-size: 12px; line-height: 1.5; }
@media (min-width: 900px) {
	.cmp-content .cmpc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.cmpc-group { margin-top: 1.5rem; }
.cmpc-group__h {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 .6rem;
	color: var(--cmp-muted);
	font-family: var(--cmp-font-mono);
	font-size: 13px;
	font-weight: 400;
}
.cmpc-group--fold > summary { cursor: pointer; list-style: none; min-height: 44px; }
.cmpc-group--fold > summary::-webkit-details-marker { display: none; }
.cmpc-group--fold > summary::after { content: "+"; color: var(--cmp-teal); font-family: var(--cmp-font-mono); font-size: 15px; }
.cmpc-group--fold[open] > summary::after { content: "\2212"; }
.cmpc-group--fold > summary:focus-visible { outline: 2px solid var(--cmp-teal); outline-offset: 2px; }
.cmpc-group__more { color: var(--cmp-muted); font-family: var(--cmp-font-body); font-size: 13px; }
.cmpc-tag {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 3px;
	font-family: var(--cmp-font-mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.cmpc-tag--problem { background: var(--cmp-orange); color: var(--cmp-ink); }
.cmpc-tag--check { background: rgba(255, 138, 61, .15); color: #ff9a55; }
.cmpc-tag--good { background: rgba(94, 242, 232, .14); color: var(--cmp-teal); }
.cmp-content .cmpc-findings { margin: 0; padding: 0; list-style: none; }
.cmp-content .cmpc-f {
	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;
}
.cmpc-f::marker { content: none; }
.cmp-content .cmpc-f--problem { border-left-color: var(--cmp-orange); background: rgba(255, 138, 61, .06); }
.cmp-content .cmpc-f--check { border-left-color: rgba(255, 138, 61, .55); }
.cmp-content .cmpc-f--good { border-left-color: var(--cmp-teal); }
.cmp-content .cmpc-f__text { margin: 0; }
.cmpc-f__card {
	display: inline-block;
	margin-right: 6px;
	padding: 0 6px;
	border-radius: 3px;
	background: var(--cmp-bg-2);
	color: var(--cmp-text);
	font-family: var(--cmp-font-mono);
	font-size: 12px;
	white-space: nowrap;
}
.cmp-content .cmpc-f__ev {
	margin: 8px 0 0;
	padding: 8px 10px;
	border-radius: 6px;
	background: var(--cmp-bg-2);
	color: rgba(233, 230, 223, .86);
	font: 12px/1.45 var(--cmp-font-mono);
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	word-break: break-word;
}
.cmp-content .cmpc-f__ev code { padding: 0; background: none; font-size: inherit; color: inherit; }
.cmp-content .cmpc-f__src { margin: 6px 0 0; color: var(--cmp-muted); font-size: 12.5px; }
.cmp-content .cmpc-next { margin: 0; padding-left: 1.4em; }
.cmp-content .cmpc-next li { margin: 0 0 8px; font-size: 14.5px; line-height: 1.5; }
.cmpc-copy-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 10px; }
.cmpc-copy-msg { color: var(--cmp-muted); font-size: 13px; }
.cmpc-summary {
	display: block;
	width: 100%;
	min-height: 12em;
	padding: 10px 12px;
	border: 1px solid var(--cmp-border);
	border-radius: 6px;
	background: var(--cmp-bg-2);
	color: var(--cmp-text);
	font: 12px/1.45 var(--cmp-font-mono);
	white-space: pre;
	overflow: auto;
	resize: vertical;
}
.cmpc-summary:focus-visible { outline: 2px solid var(--cmp-teal); outline-offset: 1px; }

/* ---------- rule table: stacked rows on phones, a table from 900px ---------- */
.cmpc-rules { margin-top: 2.5rem; }
.cmpc-rules__details > summary {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	color: var(--cmp-teal);
	font-size: 14.5px;
	cursor: pointer;
	list-style: none;
}
.cmpc-rules__details > summary::-webkit-details-marker { display: none; }
.cmpc-rules__details > summary::before { content: "+"; width: 1em; font-family: var(--cmp-font-mono); }
.cmpc-rules__details[open] > summary::before { content: "\2212"; }
.cmpc-rules__details > summary:focus-visible { outline: 2px solid var(--cmp-teal); outline-offset: 2px; }
.cmp-content .cmpc-table { width: 100%; margin-top: 8px; border-collapse: collapse; font-size: 14px; line-height: 1.45; }
.cmpc-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.cmpc-table, .cmpc-table tbody, .cmpc-table tr, .cmpc-table td, .cmpc-table th { display: block; }
.cmp-content .cmpc-table tr {
	margin: 0 0 10px;
	padding: 12px 12px 4px;
	border: 1px solid var(--cmp-border);
	border-radius: 8px;
	background: var(--cmp-surface-2, #151a20);
}
.cmp-content .cmpc-table tr.cmpc-table__area { margin: 18px 0 8px; padding: 0; border: 0; background: none; }
.cmp-content .cmpc-table__area th {
	color: var(--cmp-muted);
	font-family: var(--cmp-font-mono);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: .12em;
	text-align: left;
	text-transform: uppercase;
}
.cmp-content .cmpc-table th[scope="row"] { margin: 0 0 6px; color: var(--cmp-text); font-size: 15px; font-weight: 700; text-align: left; }
.cmp-content .cmpc-table td { padding: 0 0 8px; border: 0; }
.cmpc-table td::before {
	content: attr(data-label);
	display: block;
	color: var(--cmp-muted);
	font-family: var(--cmp-font-mono);
	font-size: 10px;
	letter-spacing: .1em;
	line-height: 1.8;
	text-transform: uppercase;
}
.cmp-content .cmpc-table__from { color: var(--cmp-muted); font-family: var(--cmp-font-mono); font-size: 12px; }
.cmp-content .cmpc-foot { margin-top: 1.25rem; color: var(--cmp-muted); font-size: 14px; }
@media (min-width: 900px) {
	.cmp-content .cmpc-table { display: table; table-layout: fixed; }
	.cmpc-table thead { position: static; width: auto; height: auto; overflow: visible; clip-path: none; display: table-header-group; }
	.cmpc-table tbody { display: table-row-group; }
	.cmp-content .cmpc-table tr, .cmp-content .cmpc-table tr.cmpc-table__area { display: table-row; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; }
	.cmp-content .cmpc-table thead th {
		display: table-cell;
		padding: 8px 14px 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;
	}
	.cmp-content .cmpc-table th[scope="row"], .cmp-content .cmpc-table td {
		display: table-cell;
		padding: 10px 14px 10px 0;
		border-bottom: 1px solid var(--cmp-border);
		vertical-align: top;
	}
	.cmp-content .cmpc-table th[scope="row"] { font-size: 14px; }
	.cmp-content .cmpc-table__area th { display: table-cell; padding: 22px 0 8px; border-bottom: 1px solid var(--cmp-border); }
	.cmpc-table td::before { content: none; }
	.cmpc-table thead th:nth-child(1) { width: 17%; }
	.cmpc-table thead th:nth-child(2) { width: 49%; }
	.cmpc-table thead th:nth-child(3) { width: 15%; }
	.cmpc-table thead th:nth-child(4) { width: 19%; }
}

/* QA 2026-11-04: with scripts on (html.cmp-js) the app keeps its space before check.js builds it, so the rule table below
   does not jump once it appears (Lighthouse CLS 0.03 to 0.05). check.js removes the hidden attribute when the app is ready. */
.cmp-js #cmpc-app[hidden] { display: block !important; visibility: hidden; min-height: 60vh; }