/*
 * Section: Checklist.
 *
 * Loaded only on pages carrying the `checklist` layout.
 *
 * Design: _design/SharpQuery GBP Checklist.dc.html — "framed as a working
 * document: white sheet on the concrete band, ink rule at the top, numbered
 * rows, live checkboxes. Group headings sit on ink plates so the sections read
 * at a glance."
 *
 * The authority comes from looking like the real document rather than a
 * marketing block: heavy border, hard shadow, a stated total, and every one of
 * the twenty-odd rows visible at once.
 */

.section-checklist {
	/* A shade darker than concrete, so the white sheet lifts off it. */
	background-color: var(--sq-color-surface-track);
}


.checklist__header {
	max-width: 55rem; /* 880 */
}

.checklist__heading {
	line-height: 1;
}


/* =============================================================== SHEET == */

.checklist__sheet {
	position: relative;
	border: 3px solid var(--sq-color-ink);
	background-color: var(--sq-color-paper);
	color: var(--sq-color-ink);
	box-shadow: var(--sq-shadow-raised);
}

.checklist__sheet-head {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sq-space-3) var(--sq-space-5);
	align-items: baseline;
	justify-content: space-between;
	padding: var(--sq-space-4) var(--sq-space-5);
	border-bottom: 3px solid var(--sq-color-ink);
}

.checklist__count {
	margin: 0;
	font-family: var(--sq-font-display);
	font-size: 1.5rem; /* 24 */
	font-weight: var(--sq-weight-bold);
	letter-spacing: 0.04em;
	line-height: 1.1;
	text-transform: uppercase;
}

.checklist__status {
	margin: 0;
	color: var(--sq-color-support);
	font-size: 0.9375rem; /* 15 */
	font-weight: var(--sq-weight-bold);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
}

/*
 * Progress bar. Driven by --checklist-progress, which the script sets on the
 * sheet. With no JS the property is never set, the width is 0 and the bar is
 * invisible — so this degrades to nothing rather than to a broken empty rail.
 */
.checklist__sheet::after {
	position: absolute;
	top: 0;
	left: 0;
	width: var(--checklist-progress, 0);
	height: 4px;
	background-color: var(--sq-color-success);
	transition: width var(--sq-duration) var(--sq-ease);
	content: '';
}


/* ============================================================== GROUPS ==
 *
 * Two columns at desktop via CSS multi-column rather than a grid, because
 * `break-inside: avoid` is what guarantees a group is never split down the
 * middle. A grid would need the groups pre-balanced in PHP and would still
 * split a long one.
 */

.checklist__groups {
	padding: var(--sq-space-5);
}

.checklist__group {
	/* Never split a group across the column break. */
	break-inside: avoid;
	page-break-inside: avoid;
}

.checklist__group + .checklist__group {
	margin-top: 1.875rem; /* 30 */
}

.checklist__group-head {
	display: flex;
	gap: var(--sq-space-3);
	align-items: center;
	margin-bottom: 0.875rem; /* 14 */
}

/*
 * The ink plate. This is what makes twenty-eight rows scannable — five hard
 * dark markers down the sheet give the eye somewhere to land.
 */
.checklist__group-title {
	margin: 0;
	padding: 5px 0.75rem;
	background-color: var(--sq-color-ink);
	color: var(--sq-color-paper);
	font-family: var(--sq-font-display);
	font-size: 1.375rem; /* 22 */
	font-weight: var(--sq-weight-bold);
	letter-spacing: 0.06em;
	line-height: 1.2;
	text-transform: uppercase;
}

.checklist__group-count {
	margin: 0;
	color: var(--sq-color-support);
	font-size: 0.9375rem; /* 15 */
	font-weight: var(--sq-weight-bold);
}


/* =============================================================== ROWS == */

.checklist__items {
	display: flex;
	flex-direction: column;
	gap: var(--sq-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.checklist__item {
	margin: 0;
}

.checklist__row {
	display: flex;
	gap: var(--sq-space-3);
	align-items: flex-start;
	min-height: var(--sq-tap-target);
	/* Overrides the uppercase label styling from base.css. */
	font-size: var(--sq-text-body);
	font-weight: var(--sq-weight-regular);
	letter-spacing: var(--sq-tracking-normal);
	text-transform: none;
}

label.checklist__row {
	cursor: pointer;
}

.checklist__box {
	flex: 0 0 auto;
	margin-top: 0.2em;
}

/*
 * The row number. The comp sets these in #A3A19C, which is 2.6:1 on white and
 * fails AA — see the contrast note in CLAUDE.md. Support ink instead: same
 * job, 8.9:1.
 */
.checklist__number {
	flex: 0 0 1.625rem; /* 26 */
	color: var(--sq-color-support);
	font-size: var(--sq-text-small);
	font-weight: var(--sq-weight-bold);
	font-variant-numeric: tabular-nums;
	line-height: 1.55;
}

.checklist__text {
	line-height: 1.55;
}

/* Ticked rows recede so the remaining work is what stands out. */
.checklist__box:checked ~ .checklist__text {
	color: var(--sq-color-support);
	text-decoration: line-through;
	text-decoration-thickness: 1px;
}


/* ================================================================ FOOT ==
 *
 * Secondary conversion. Outline button below the whole list, never the orange
 * primary — it must not compete with the page's real CTA.
 */

.checklist__foot {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sq-space-3) var(--sq-space-5);
	align-items: center;
	padding: var(--sq-space-5);
	border-top: 3px solid var(--sq-color-ink);
	background-color: var(--sq-color-concrete);
}

.checklist__download {
	border-width: 3px;
	font-family: var(--sq-font-display);
	font-size: 1.3125rem; /* 21 */
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.checklist__download-icon {
	display: flex;
	flex: 0 0 auto;
}

.checklist__download-meta {
	margin: 0;
	font-variant-numeric: tabular-nums;
}


/* ============================================================= DESKTOP == */

@media (min-width: 61.25em) {

	.checklist__sheet-head,
	.checklist__foot {
		padding: 1.125rem var(--sq-space-6); /* 18 32 */
	}

	.checklist__groups {
		padding: var(--sq-space-6);
		columns: 2;
		column-gap: var(--sq-space-8); /* 64 */
		column-rule: var(--sq-border-width) solid var(--sq-color-hairline);
	}

	/* The first group in each column must not inherit the stacking margin. */
	.checklist__group + .checklist__group {
		margin-top: 0;
		padding-top: 1.875rem;
	}

	.checklist__foot {
		justify-content: flex-start;
	}
}

@media print {
	/* The printed sheet is the point of the download; make the page itself
	 * printable too. */
	.checklist__sheet {
		box-shadow: none;
	}

	.checklist__groups {
		columns: 2;
	}

	.checklist__foot {
		display: none;
	}
}