/* =========================================================================
   MyPCB House — Project Finder and the kit parts list
   Loaded on /project-finder/ and on any product that has a parts list.
   ========================================================================= */

/* ---------- The finder page --------------------------------------------- */

.finder-page__head { max-width: 60ch; margin-bottom: var(--sp-6); }

.finder-page__eyebrow {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	margin: 0 0 var(--sp-3);
	color: var(--c-text-faint);
	font-family: var(--f-mono);
	font-size: .68rem;
	letter-spacing: .2em;
}

.finder-page__title {
	margin: 0 0 var(--sp-3);
	font-size: clamp(1.9rem, 6.5vw, 3.2rem);
	line-height: 1.02;
	letter-spacing: -.04em;
}
.finder-page__lead {
	margin: 0;
	color: var(--c-text-dim);
	font-size: clamp(.95rem, 2.4vw, 1.08rem);
	line-height: 1.55;
}

/* The three questions, ruled like a form on paper. */
.finder-form {
	display: grid;
	gap: 0;
	margin-bottom: var(--sp-6);
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
	overflow: hidden;
}

.qblock {
	margin: 0;
	padding: var(--sp-4);
	border: 0;
	border-bottom: 1px dashed var(--c-line);
}
.qblock:last-of-type { border-bottom: 0; }

.qblock__q {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	padding: 0;
	margin-bottom: var(--sp-3);
	font-size: .95rem;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--c-text);
}
.qblock__n {
	display: grid;
	place-items: center;
	width: 26px; height: 26px;
	flex: none;
	border-radius: var(--r-full);
	background: var(--c-surface-3);
	border: 1px solid var(--c-line);
	color: var(--c-accent);
	font-family: var(--f-mono);
	font-size: .75rem;
	font-weight: 700;
}

.qblock__opts { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* Every option is a link, so the whole tool works with JavaScript off and
   any answer can be bookmarked or sent to a friend. */
.pick {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	min-height: 44px;
	padding: 0 var(--sp-3);
	background: var(--c-bg);
	border: 1px solid var(--c-line);
	border-radius: var(--r-md);
	color: var(--c-text-dim);
	font-size: .85rem;
	font-weight: 600;
	text-decoration: none;
	transition: border-color var(--dur) var(--ease),
				background-color var(--dur) var(--ease),
				color var(--dur) var(--ease);
}
.pick:hover { border-color: var(--c-accent); color: var(--c-text); }
.pick .icon { width: 17px; height: 17px; color: var(--c-accent); flex: none; }

.pick.is-on {
	background: var(--c-accent);
	border-color: var(--c-accent);
	color: var(--c-accent-ink);
}
.pick.is-on .icon { color: var(--c-accent-ink); }

.pick__n {
	color: var(--c-text-faint);
	font-family: var(--f-mono);
	font-size: .7rem;
}
.pick.is-on .pick__n { color: var(--c-accent-ink); opacity: .75; }
.pick--num { font-family: var(--f-mono); font-size: .78rem; }

/* ---------- Result header ------------------------------------------------ */

.finder-results__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-3);
	padding-bottom: var(--sp-3);
	border-bottom: 1px solid var(--c-line-soft);
	margin-bottom: var(--sp-4);
}
.finder-results__count {
	margin: 0;
	color: var(--c-text-dim);
	font-family: var(--f-mono);
	font-size: .8rem;
}
.finder-results__count strong { color: var(--c-copper); font-size: 1.1rem; }

.finder-results__tools {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-1);
	margin-inline-start: auto;
}
.sortlink {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	min-height: 36px;
	padding: 0 var(--sp-3);
	border-radius: var(--r-sm);
	color: var(--c-text-faint);
	font-size: .78rem;
	font-weight: 600;
	text-decoration: none;
}
.sortlink:hover { background: var(--c-surface-2); color: var(--c-text); }
.sortlink.is-on { background: var(--c-surface-3); color: var(--c-accent); }
.sortlink--clear { color: var(--c-danger); }
.sortlink--clear .icon { width: 13px; height: 13px; }

/* ---------- The parts list (bill of materials) --------------------------- */

.bom {
	margin-top: var(--sp-6);
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
	overflow: hidden;
}

.bom__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
	padding: var(--sp-4);
	background: var(--c-surface-2);
	border-bottom: 1px solid var(--c-line);
}
.bom__title { margin: 0; font-size: 1.05rem; letter-spacing: -.02em; }
.bom__sub { margin: 2px 0 0; color: var(--c-text-faint); font-size: .8rem; }

.bom__saving { margin: 0; text-align: end; }
.bom__saving-label {
	display: block;
	color: var(--c-text-faint);
	font-size: .64rem;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.bom__saving-amt {
	color: var(--c-ok);
	font-family: var(--f-mono);
	font-size: 1.1rem;
	font-weight: 700;
}

.bom__list { list-style: none; margin: 0; padding: 0; }

.bom__row {
	display: grid;
	grid-template-columns: 48px 1fr auto auto;
	align-items: center;
	gap: var(--sp-3);
	padding: var(--sp-3) var(--sp-4);
	border-bottom: 1px dashed var(--c-line-soft);
}
.bom__row:last-child { border-bottom: 0; }
.bom__row.is-out { opacity: .55; }

.bom__media img {
	width: 48px; height: 48px;
	object-fit: contain;
	padding: 3px;
	background: var(--c-plate);
	border: 1px solid var(--c-plate-edge);
	border-radius: var(--r-sm);
}

.bom__info { min-width: 0; }
.bom__name {
	display: block;
	color: var(--c-text);
	font-size: .875rem;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
}
.bom__name:hover { color: var(--c-accent); }
.bom__flag {
	display: inline-block;
	margin-top: 2px;
	color: var(--c-danger);
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.bom__qty {
	color: var(--c-text-faint);
	font-family: var(--f-mono);
	font-size: .85rem;
	font-variant-numeric: tabular-nums;
}
.bom__line {
	color: var(--c-copper);
	font-family: var(--f-mono);
	font-size: .875rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	text-align: end;
	min-width: 74px;
}

.bom__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
	padding: var(--sp-4);
	background: var(--c-surface-2);
	border-top: 1px solid var(--c-line);
}
.bom__total { display: grid; gap: 1px; margin: 0; }
.bom__total span {
	color: var(--c-text-faint);
	font-size: .64rem;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.bom__total strong {
	color: var(--c-text);
	font-family: var(--f-mono);
	font-size: 1.15rem;
	font-variant-numeric: tabular-nums;
}
.bom__foot .btn .icon { width: 17px; height: 17px; }

@media (max-width: 639px) {
	.bom__row { grid-template-columns: 42px 1fr auto; row-gap: var(--sp-1); }
	.bom__media img { width: 42px; height: 42px; }
	.bom__line { grid-column: 2 / -1; text-align: start; min-width: 0; }
	.bom__foot { flex-direction: column; align-items: stretch; }
	.bom__foot .btn { justify-content: center; }
}

/* ---------- Admin: the parts meta box ----------------------------------- */

.mypcb-parts td { vertical-align: middle; padding: 8px 10px; }

/* ---------- The bench pass: the box list --------------------------------- */

/* Reference designators on each part's photo, U1, U2…, counted by CSS, and
   footprint pads on the corners of the panel — the same marks as the parts
   list on the homepage, so a kit reads the same wherever it is shown. */
.bom { background: var(--pads), var(--grain), var(--c-surface); }
.bom__list { counter-reset: kitpart; }
.bom__row { counter-increment: kitpart; }
.bom__media { position: relative; }
.bom__media::before {
	content: "U" counter(kitpart);
	position: absolute;
	top: -6px; inset-inline-start: -6px;
	z-index: 1;
	padding: 1px 4px;
	border-radius: 3px;
	background: var(--c-bg);
	border: 1px solid var(--c-line);
	color: var(--c-copper);
	font-family: var(--f-mono);
	font-size: .55rem;
	font-weight: 700;
	line-height: 1.3;
}
.bom__title { font-family: var(--f-display); }