/* JNR Builds part picker (/builder/). Markup is built by builder.js.
   Colours come from the site tokens in design.css (dark default, light via
   html[data-jbtheme="light"]); status colours get light-mode values here. */

.jnr-builder {
	--jb-pass: #4ADE80;
	--jb-warn: #FBBF24;
	--jb-fail: #F87171;
	--jb-head-offset: 24px; /* the site header scrolls away, so the summary pins near the top */
}
html[data-jbtheme="light"] .jnr-builder {
	--jb-pass: #1B5E33;
	--jb-warn: #7A4E06;
	--jb-fail: #A61B1B;
}

/* Page: the builder uses the full content width instead of the 820px text column,
   and the intro sentence lines up with it. */
body:not(.home) .entry-content > .jnr-builder.jnr-builder { max-width: none; }
body:not(.home) .entry-content:has(> .jnr-builder) > p.has-text-align-center {
	max-width: 68ch;
	margin: 0 0 32px;
	text-align: left;
	color: var(--cream-400);
}

/* ---------- Layout ---------- */
.jnr-builder {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	grid-template-areas: "head head" "presets presets" "table side";
	gap: 24px 32px;
	align-items: start;
	color: var(--cream-100);
	font-variant-numeric: tabular-nums;
}
.jb-head { grid-area: head; }
.jb-parts { grid-area: table; }
.jb-side {
	grid-area: side;
	position: sticky;
	top: var(--jb-head-offset);
	display: grid;
	gap: 16px;
}
.jb-visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- Buttons (reset theme button styles first) ---------- */
.jnr-builder button {
	margin: 0;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: none;
	color: var(--cream-100);
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--r-pill);
	box-shadow: none;
	cursor: pointer;
	transition: border-color .15s ease-out, background-color .15s ease-out, color .15s ease-out;
}
.jnr-builder button:focus-visible,
.jnr-builder .jb-input:focus-visible,
.jnr-builder .jb-only-toggle input:focus-visible {
	outline: 2px solid var(--glow-500);
	outline-offset: 2px;
}
.jb-btn-ghost { padding: 10px 18px; border-color: var(--hairline-strong) !important; }
.jb-btn-ghost:hover { border-color: var(--glow-500) !important; color: var(--glow-300) !important; }
.jb-btn-sm { padding: 8px 14px; font-size: 13.5px !important; }
.jb-btn-text { padding: 10px 6px; color: var(--cream-400) !important; }
.jb-btn-text:hover { color: var(--cream-100) !important; }
.jb-btn-icon {
	display: inline-grid;
	place-items: center;
	width: 36px;
	height: 36px;
	padding: 0;
	font-size: 20px !important;
	font-weight: 400 !important;
	color: var(--cream-400) !important;
}
.jb-btn-icon:hover { color: var(--jb-fail) !important; background: var(--wash) !important; }
.jb-btn-choose {
	padding: 9px 16px;
	color: var(--glow-300) !important;
	border-color: var(--glow-border) !important;
}
.jb-btn-choose:hover { border-color: var(--glow-500) !important; background: var(--wash) !important; }
.jb-btn-add {
	padding: 9px 20px;
	color: var(--ink-950) !important;
	background: var(--glow-500) !important;
}
.jb-btn-add:hover { background: var(--glow-300) !important; }

/* ---------- Header ---------- */
.jb-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px 24px;
}
.entry-content .jnr-builder .jb-h2 {
	margin: 0;
	font: 400 30px/1.15 'Lora', serif;
	color: var(--cream-100);
}
.entry-content .jnr-builder .jb-count {
	margin: 6px 0 0;
	font: 400 12px/1.4 'Space Mono', monospace;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--cream-400);
}
.jb-head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.jb-head-actions button { white-space: nowrap; }

/* ---------- Random build by tier ---------- */
.jb-presets { grid-area: presets; }
.jb-preset-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.jnr-builder .jb-preset {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: baseline;
	gap: 4px 12px;
	padding: 16px 20px;
	text-align: left;
	background: var(--ink-900);
	border-color: var(--ink-border);
	border-radius: var(--r-card);
}
.jnr-builder .jb-preset:hover { border-color: var(--glow-500); }
.jnr-builder .jb-preset:disabled { opacity: .6; cursor: progress; }
.jb-preset-name { font: 400 22px/1.2 'Lora', serif; color: var(--cream-100); }
.jb-preset-range { font: 400 13px/1.3 'Space Mono', monospace; color: var(--glow-300); white-space: nowrap; }
.jb-preset-use { grid-column: 1 / -1; font-size: 13.5px; font-weight: 400; line-height: 1.4; color: var(--cream-400); }
.entry-content .jnr-builder .jb-preset-msg { min-height: 1.45em; margin: 10px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--cream-400); }
.jnr-builder button:disabled:not(.jb-preset) { opacity: .45; cursor: not-allowed; }

/* ---------- Parts table ---------- */
.jnr-builder .jb-parts,
body:not(.home) .entry-content .jnr-builder table.jb-parts {
	/* design.css breaks every page table out to 1240px with !important; not this one */
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	display: table;
	transform: none !important;
	border-collapse: separate;
	border-spacing: 0;
	background: var(--ink-900);
	border: 1px solid var(--ink-border);
	border-radius: var(--r-card);
	overflow: hidden;
}
.jnr-builder .jb-parts th,
.jnr-builder .jb-parts td {
	padding: 14px 16px;
	text-align: left;
	vertical-align: middle;
	background: none;
	border: 0;
	border-top: 1px solid var(--hairline);
}
.jnr-builder .jb-parts thead th {
	padding-block: 12px;
	font: 400 11.5px/1.3 'Space Mono', monospace;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--cream-400);
	border-top: 0;
}
.jnr-builder .jb-parts .jb-num { text-align: right; white-space: nowrap; }
.jnr-builder .jb-comp {
	width: 150px;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--cream-100);
	padding-left: 20px;
}
.jb-optional {
	display: block;
	margin-top: 2px;
	font: 400 11px/1.3 'Space Mono', monospace;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--cream-400);
}
.jnr-builder .jb-cost { width: 110px; font-size: 15px; font-weight: 600; }
.jnr-builder .jb-act { width: 140px; padding-right: 16px; text-align: right; white-space: nowrap; }
.jnr-builder .jb-act button + button { margin-left: 4px; }
.jb-row:not(.is-filled) .jb-comp { color: var(--cream-400); }
.jb-part-name { display: block; font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--cream-100); }
.jb-part-spec { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.4; color: var(--cream-400); }
.jb-part-clash { display: block; margin-top: 4px; font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--jb-fail); }
.jb-part-clash::before { content: "✕ "; }
.jnr-builder .jb-parts tfoot th,
.jnr-builder .jb-parts tfoot td {
	padding-block: 16px;
	background: var(--ink-850);
	border-top: 1px solid var(--ink-border);
}
.jnr-builder .jb-parts tfoot th { padding-left: 20px; font-size: 14.5px; font-weight: 600; }
.jnr-builder .jb-foot-total { font: 400 22px/1.2 'Lora', serif; color: var(--cream-100); }

/* ---------- Summary ---------- */
.jb-strip {
	display: grid;
	grid-template-columns: 1fr 1fr;
	background: var(--ink-900);
	border: 1px solid var(--ink-border);
	border-radius: var(--r-card);
	overflow: hidden;
}
.jb-cell { display: flex; flex-direction: column; gap: 4px; padding: 16px 20px; min-width: 0; }
.jb-cell-status { grid-column: 1 / -1; gap: 10px; border-bottom: 1px solid var(--ink-border); }
.jb-cell-watts { border-right: 1px solid var(--ink-border); }
.jb-cell-label {
	font: 400 11.5px/1.3 'Space Mono', monospace;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--cream-400);
}
.jb-cell-value { font: 400 26px/1.15 'Lora', serif; color: var(--cream-100); }
.jb-cell-note { font-size: 12.5px; line-height: 1.4; color: var(--cream-400); }
.jb-status-text { font-size: 14.5px; line-height: 1.45; color: var(--cream-100); }
.jb-status-pill {
	align-self: flex-start;
	padding: 4px 12px;
	font: 700 11.5px/1.3 'Space Mono', monospace;
	letter-spacing: .08em;
	text-transform: uppercase;
	border: 1px solid var(--hairline-strong);
	border-radius: var(--r-pill);
	color: var(--cream-400);
}
.is-ok .jb-status-pill { color: var(--jb-pass); border-color: currentColor; }
.is-warn .jb-status-pill { color: var(--jb-warn); border-color: currentColor; }
.is-fail .jb-status-pill { color: var(--jb-fail); border-color: currentColor; }
.jb-cell-status.is-ok { box-shadow: inset 3px 0 0 var(--jb-pass); }
.jb-cell-status.is-warn { box-shadow: inset 3px 0 0 var(--jb-warn); }
.jb-cell-status.is-fail { box-shadow: inset 3px 0 0 var(--jb-fail); }
.jb-meter {
	display: block;
	height: 6px;
	margin-top: 6px;
	background: var(--wash);
	border: 1px solid var(--hairline);
	border-radius: var(--r-pill);
	overflow: hidden;
}
.jb-meter-fill { display: block; height: 100%; background: var(--glow-500); border-radius: inherit; }
.jb-meter.is-over .jb-meter-fill { background: var(--jb-fail); }

.entry-content .jnr-builder .jb-h3 {
	margin: 0 0 10px;
	font: 400 11.5px/1.3 'Space Mono', monospace;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--cream-400);
}
.entry-content .jnr-builder .jb-note-list { display: grid; gap: 8px; margin: 0 0 12px; padding: 0; list-style: none; }
.entry-content .jnr-builder .jb-note {
	display: grid;
	grid-template-columns: 92px minmax(0, 1fr);
	gap: 10px;
	margin: 0;
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--cream-100);
}
.jb-note-tag {
	font: 700 11px/1.7 'Space Mono', monospace;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--cream-400);
}
.jb-note.is-ok .jb-note-tag { color: var(--jb-pass); }
.jb-note.is-warn .jb-note-tag { color: var(--jb-warn); }
.jb-note.is-fail .jb-note-tag { color: var(--jb-fail); }
.entry-content .jnr-builder .jb-disclaimer { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--cream-400); }

/* ---------- Picker dialog ---------- */
.jb-dialog {
	width: min(960px, calc(100vw - 32px));
	max-height: min(86vh, 900px);
	padding: 0;
	color: var(--cream-100);
	background: var(--ink-900);
	border: 1px solid var(--ink-border);
	border-radius: var(--r-card);
	box-shadow: 0 24px 64px rgba(0, 0, 0, .5);
	overflow: hidden;
}
.jb-dialog[open] { display: flex; flex-direction: column; }
.jb-dialog::backdrop { background: rgba(5, 8, 8, .72); }
.jb-dlg-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 20px 12px 24px;
}
.entry-content .jnr-builder .jb-dlg-title { margin: 0; font: 400 24px/1.2 'Lora', serif; color: var(--cream-100); }
.jb-dlg-controls {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 190px 190px auto;
	align-items: center;
	gap: 10px;
	padding: 0 24px 16px;
	border-bottom: 1px solid var(--ink-border);
}
.jnr-builder .jb-input {
	width: 100%;
	height: 44px;
	margin: 0;
	padding: 0 14px;
	font: inherit;
	font-size: 14.5px;
	color: var(--cream-100);
	background: var(--ink-950);
	border: 1px solid var(--ink-border);
	border-radius: var(--r-input);
	box-shadow: none;
	color-scheme: dark;
}
html[data-jbtheme="light"] .jnr-builder .jb-input { color-scheme: light; }
.jnr-builder .jb-input::placeholder { color: var(--cream-400); opacity: 1; }
.jb-only-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; white-space: nowrap; cursor: pointer; }
.jb-only-toggle input { width: 18px; height: 18px; margin: 0; accent-color: var(--glow-500); }
.jb-dlg-body { flex: 1 1 auto; min-height: 0; padding: 12px 24px 24px; overflow-y: auto; overscroll-behavior: contain; }
.entry-content .jnr-builder .jb-dlg-meta { margin: 0 0 8px; font: 400 12px/1.4 'Space Mono', monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--cream-400); }
.entry-content .jnr-builder .jb-results { margin: 0; padding: 0; list-style: none; }
.entry-content .jnr-builder .jb-result {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 100px auto;
	align-items: center;
	gap: 16px;
	margin: 0;
	padding: 12px 0;
	border-top: 1px solid var(--hairline);
}
.entry-content .jnr-builder .jb-result:first-child { border-top: 0; }
.jb-result-price { font-size: 15px; font-weight: 600; text-align: right; }
.jb-result.has-clash .jb-part-name { color: var(--cream-400); }
.entry-content .jnr-builder .jb-result-empty { padding: 24px 0; font-size: 14.5px; color: var(--cream-400); }
.jb-more { display: block; margin: 16px auto 0; }

/* ---------- Narrower screens ---------- */
@media (max-width: 1080px) {
	.jnr-builder {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "head" "presets" "strip" "table" "notes";
	}
	.jb-side { display: contents; }
	.jb-strip { grid-area: strip; grid-template-columns: 2fr 1fr 1fr; }
	.jb-notes { grid-area: notes; max-width: 68ch; }
	.jb-cell-status { grid-column: auto; border-bottom: 0; border-right: 1px solid var(--ink-border); }
}
@media (max-width: 720px) {
	.jb-preset-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
	.jb-head-actions { width: 100%; }
	.jnr-builder .jb-preset { padding: 12px 16px; }
	.jb-strip { grid-template-columns: 1fr 1fr; }
	.jb-cell-status { grid-column: 1 / -1; border-right: 0; border-bottom: 1px solid var(--ink-border); }
	.jb-dlg-controls { grid-template-columns: 1fr 1fr; }
	.jb-dlg-controls .jb-input[type="search"], .jb-only-toggle { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
	/* table rows become stacked blocks: label, part, then price + actions */
	.jnr-builder .jb-parts thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.jnr-builder .jb-parts, body:not(.home) .entry-content .jnr-builder table.jb-parts, .jnr-builder .jb-parts tbody, .jnr-builder .jb-parts tfoot { display: block; }
	.jnr-builder .jb-parts tr {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: 6px 12px;
		padding: 14px 16px;
		border-top: 1px solid var(--hairline);
	}
	.jnr-builder .jb-parts tbody tr:first-child { border-top: 0; }
	.jnr-builder .jb-parts th, .jnr-builder .jb-parts td { display: block; width: auto; padding: 0; border: 0; }
	.jnr-builder .jb-comp {
		grid-column: 1 / -1;
		font: 400 11.5px/1.3 'Space Mono', monospace;
		letter-spacing: .08em;
		text-transform: uppercase;
		color: var(--cream-400);
	}
	.jb-optional { display: inline; margin: 0 0 0 8px; }
	.jnr-builder .jb-sel { grid-column: 1 / -1; }
	.jnr-builder .jb-cost { text-align: left; }
	.jnr-builder .jb-row:not(.is-filled) .jb-cost, .jnr-builder .jb-row:not(.is-filled) .jb-act { display: none; }
	.jnr-builder .jb-act { width: auto; }
	.jnr-builder .jb-parts tfoot tr { background: var(--ink-850); border-top: 1px solid var(--ink-border); }
	.jnr-builder .jb-parts tfoot th, .jnr-builder .jb-parts tfoot td { background: none; border: 0; padding: 0; }
	.jnr-builder .jb-parts tfoot td:last-child { display: none; }
	.jnr-builder .jb-foot-total { text-align: right; }
	.entry-content .jnr-builder .jb-note { grid-template-columns: 1fr; gap: 0; }

	.jb-dialog { width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; border-radius: 0; border: 0; }
	.jb-dlg-head { padding: 14px 12px 10px 16px; }
	.jb-dlg-controls { padding: 0 16px 12px; }
	.jb-dlg-body { padding: 8px 16px 24px; }
	.entry-content .jnr-builder .jb-result { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; }
	.jb-result-info { grid-column: 1 / -1; }
	.jb-result-price { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
	.jnr-builder button { transition: none; }
}


/* Prices aren't shown (stale catalogue); each part links to a live Amazon search. */
.jnr-builder .jb-price-link { font-size: 14px; font-weight: 600; color: var(--glow-300, #7EE8DC); text-decoration: none; white-space: nowrap; }
.jnr-builder .jb-price-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.jnr-builder .jb-price-link:focus-visible { outline: 2px solid var(--glow-500, #2DD4BF); outline-offset: 2px; }
.jnr-builder tfoot { display: none; }
.jnr-builder .jb-result-price:empty, .jnr-builder .jb-preset-range { display: none; }