/* 2026 Roadmap ([jnr_roadmap] in post 17): the build as a checklist. Loaded only on that post. */

.jbr { display: grid; gap: 40px; }
.jbp-article .jbr p { margin: 0; }
.jbp-article .jbr-intro { font-size: 19.5px; line-height: 1.6; max-width: 62ch; }

/* overall progress */
.jbr-prog { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 16px; padding: 18px 22px; background: var(--ink-900); border: 1px solid var(--ink-border); border-radius: var(--r-card); }
.jbr-bar { grid-column: 1 / -1; height: 6px; border-radius: var(--r-pill); background: var(--hairline-strong); overflow: hidden; }
.jbr-bar span { display: block; width: 100%; height: 100%; background: var(--glow-500); transform: scaleX(0); transform-origin: left center; transition: transform .25s ease-out; }
.jbp-article .jbr-prog-t { font-size: 15px; color: var(--cream-400); }
.jbr-count { font-weight: 600; color: var(--cream-100); font-variant-numeric: tabular-nums; }
.jbr .jbr-reset { margin: 0; padding: 0; font: 600 14px/1.4 'DM Sans', sans-serif; color: var(--glow-300); background: none; border: 0; box-shadow: none; cursor: pointer; }
.jbr .jbr-reset:hover { color: var(--glow-300); background: none; text-decoration: underline; text-underline-offset: 3px; }
.jbr .jbr-reset[hidden] { display: none; }

/* phases */
.jbr-ph { display: grid; gap: 10px; }
.jbr-ph-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.jbr-ph-num { font: 400 12px/1.4 'Space Mono', monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--glow-300); }
.jbr-ph-n { font: 400 12.5px/1.4 'Space Mono', monospace; color: var(--cream-400); font-variant-numeric: tabular-nums; }
.jbp-article .jbr h2 { margin: 0; }
.jbp-article .jbr-ph-d { max-width: 62ch; color: var(--cream-400); font-size: 16.5px; line-height: 1.6; }

/* steps */
.jbp-article .jbr-list { margin: 8px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--hairline); }
.jbp-article .jbr-list li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 14px; margin: 0; padding: 14px 0; border-bottom: 1px solid var(--hairline); }
.jbr-list input[type="checkbox"] {
	-webkit-appearance: none; appearance: none; display: grid; place-content: center;
	width: 20px; height: 20px; margin: 4px 0 0; background: transparent; border: 1.5px solid var(--cream-400); border-radius: 5px;
	cursor: pointer; transition: background-color .15s ease-out, border-color .15s ease-out;
}
.jbr-list input[type="checkbox"]::before {
	content: ""; width: 12px; height: 12px; background: var(--ink-950); transform: scale(0); transition: transform .12s ease-out;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.5l2.5 2.5L10 3.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.5l2.5 2.5L10 3.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.jbr-list input[type="checkbox"]:hover { border-color: var(--glow-500); }
.jbr-list input[type="checkbox"]:checked { background: var(--glow-500); border-color: var(--glow-500); }
.jbr-list input[type="checkbox"]:checked::before { transform: scale(1); }
.jbr-list input[type="checkbox"]:focus-visible { outline: 2px solid var(--glow-500); outline-offset: 2px; }
.jbr-body { display: grid; gap: 3px; min-width: 0; }
.jbr-body label { font-size: 17.5px; font-weight: 600; line-height: 1.45; color: var(--cream-100); cursor: pointer; }
.jbp-article .jbr-d { font-size: 15.5px; line-height: 1.55; color: var(--cream-400); }
.jbp-article .jbr-src { justify-self: start; font-size: 14px; line-height: 1.5; color: var(--glow-300); text-decoration: none; }
.jbp-article .jbr-src:hover { text-decoration: underline; text-underline-offset: 3px; }
.jbr-src-h { color: var(--cream-400); font-size: 14px; }
.jbr-list li:has(input:checked) label { color: var(--cream-400); text-decoration: line-through; text-decoration-color: var(--glow-500); }

/* free ebooks under a phase */
.jbp-article .jbr-eb { font-size: 14.5px; color: var(--cream-400); }
.jbr-eb span { margin-right: 6px; font: 400 11.5px/1.4 'Space Mono', monospace; letter-spacing: .06em; text-transform: uppercase; }
.jbp-article .jbr-eb a { text-decoration: none; }
.jbp-article .jbr-eb a:hover { text-decoration: underline; }

/* if something goes wrong: links, no ticks */
.jbr-ph-fix .jbr-ph-num { color: var(--cream-400); }
.jbp-article .jbr-fix li { grid-template-columns: minmax(0, 1fr); }
.jbp-article .jbr-fix-t { justify-self: start; font-size: 17.5px; font-weight: 600; line-height: 1.45; color: var(--cream-100); text-decoration: none; }
.jbp-article .jbr-fix-t:hover { color: var(--glow-300); }

/* rail: per-phase counts next to "On this page" links (added by roadmap.js) */
.jbp-toc a { grid-template-columns: 28px minmax(0, 1fr) auto; column-gap: 0; }
.jbr-toc-n { padding-left: 10px; font: 400 12px/1.9 'Space Mono', monospace; color: var(--cream-400); font-variant-numeric: tabular-nums; }
.jbr-toc-n.is-done { color: var(--glow-300); }

@media (max-width: 560px) {
	.jbr { gap: 32px; }
	.jbp-article .jbr-intro { font-size: 18px; }
	.jbr-prog { padding: 16px 18px; }
	.jbr-body label, .jbp-article .jbr-fix-t { font-size: 16.5px; }
}
@media (prefers-reduced-motion: reduce) { .jbr-bar span, .jbr-list input[type="checkbox"], .jbr-list input[type="checkbox"]::before { transition: none; } }