/* /learn/career-* (scripts/build-career-roadmap.js). Surfaces and text come from theme-green.css tokens,
   so light and dark both work. This section adds a layout-viewer language on top: families are drawn as
   mask layers (poly red, metal blue, n-well ochre, violet, teal), each with its own stipple, and flows
   are routed copper with square vias. Colour never stands alone: every swatch has a hatch and a label.
   Palette checked with the dataviz validator (adjacent CVD and contrast) for both surfaces. */

.cr-page {
  --fam: var(--green);
  --cu: #b5651d; --cu-deep: #7f4210; --cu-soft: color-mix(in srgb, #b5651d 13%, var(--card));
  --via: #2b2420; --grid-dot: color-mix(in srgb, var(--ink) 14%, transparent);
}
html[data-theme="dark"] .cr-page { --cu: #d98a4a; --cu-deep: #f0b27a; --cu-soft: color-mix(in srgb, #d98a4a 16%, var(--card)); --via: #f3e6d8; }
.cr-fam-front { --fam: #c73a2e; --hatch: repeating-linear-gradient(45deg, var(--fam) 0 1.5px, transparent 1.5px 6px); }
.cr-fam-back { --fam: #2a5fb0; --hatch: repeating-linear-gradient(0deg, var(--fam) 0 1.5px, transparent 1.5px 5px); }
.cr-fam-analog { --fam: #a3781c; --hatch: radial-gradient(var(--fam) 1.1px, transparent 1.3px) 0 0 / 5px 5px; }
.cr-fam-systems { --fam: #7f3fa3; --hatch: repeating-linear-gradient(45deg, var(--fam) 0 1.2px, transparent 1.2px 6px), repeating-linear-gradient(-45deg, var(--fam) 0 1.2px, transparent 1.2px 6px); }
.cr-fam-mfg { --fam: #008ea6; --hatch: repeating-linear-gradient(-45deg, var(--fam) 0 1.5px, transparent 1.5px 6px); }
html[data-theme="dark"] .cr-fam-front { --fam: #d9614f; }
html[data-theme="dark"] .cr-fam-back { --fam: #5c8bd6; }
html[data-theme="dark"] .cr-fam-analog { --fam: #b8892f; }
html[data-theme="dark"] .cr-fam-systems { --fam: #a172cc; }
html[data-theme="dark"] .cr-fam-mfg { --fam: #1aa596; }

.cr-page main { background: var(--canvas); color: var(--body); }
.cr-page h1, .cr-page h2, .cr-page h3, .cr-page h4 { color: var(--ink); }
.cr-page a { color: var(--green); }
.cr-page a:focus-visible, .cr-page summary:focus-visible, .cr-page button:focus-visible,
.cr-page input:focus-visible, .cr-page select:focus-visible, .cr-scroll:focus-visible, .cr-sal-row:focus-visible {
  outline: 2px solid var(--green); outline-offset: 3px; border-radius: 6px;
}
.cr-sw { display: inline-block; flex: none; width: 13px; height: 13px; border: 1.5px solid var(--fam); background: var(--hatch, var(--fam)); background-color: var(--card); }

/* ---- Hero ---------------------------------------------------------------------------------- */
.cr-hero { padding: 44px 0 30px; background: radial-gradient(var(--grid-dot) 1px, transparent 1.3px) 0 0 / 20px 20px, var(--canvas); }
.cr-hero h1 { margin: 10px 0 12px; max-width: 22ch; font-size: clamp(2rem, 4.6vw, 3.1rem); }
.cr-lead { max-width: 62ch; margin: 0; font-size: 1.07rem; line-height: 1.62; color: var(--body); }
.cr-cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 0; }
.cr-hero-hub { padding-bottom: 48px; }
.cr-hero-hub h1 { max-width: 16ch; font-size: clamp(2.3rem, 5.6vw, 3.8rem); }
.cr-fam-label { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; font-size: 14px; color: var(--ink); }
.cr-facts { display: flex; flex-wrap: wrap; gap: 14px 40px; margin: 24px 0 0; padding: 18px 0 0; border-top: 1px solid var(--hairline); }
.cr-facts div { margin: 0; }
.cr-facts dt { font-size: 12.5px; color: var(--muted); }
.cr-facts dd { margin: 3px 0 0; font: 600 1.02rem/1.35 var(--si-head, inherit); color: var(--ink); }
.cr-note { margin: 14px 0 0; font-size: 13.5px; color: var(--muted); max-width: 70ch; }
.cr-hero-role { border-bottom: 1px solid var(--hairline); }
.cr-hero-role h1 { position: relative; padding-left: 18px; }
.cr-hero-role h1::before { content: ""; position: absolute; left: 0; top: .12em; bottom: .12em; width: 6px; border: 1.5px solid var(--fam); background: var(--hatch, var(--fam)); }

/* ---- Signature: the chip map --------------------------------------------------------------- */
.cr-map { margin: 34px 0 0; }
.cr-map-svg { display: block; width: 100%; height: auto; overflow: visible; }
.cr-map figcaption { margin: 12px 0 0; font-size: 13.5px; color: var(--muted); max-width: 72ch; }
.cr-canvas { stroke: none; }
.cr-grid-dot { fill: var(--grid-dot); }
.cr-ruler-t { stroke: var(--muted); stroke-width: 1; opacity: .6; }
.cr-ruler-n { font: 400 10.5px var(--si-text, sans-serif); fill: var(--muted); }
.cr-seal { fill: var(--card); stroke: var(--ink); stroke-width: 1.4; }
.cr-seal-in { fill: none; stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 3; }
.cr-core { fill: none; stroke: var(--hairline); stroke-width: 1; }
.cr-bpad { fill: none; stroke: var(--muted); stroke-width: 1.2; opacity: .55; }
.cr-bpad-open { fill: var(--soft); stroke: var(--muted); stroke-width: .8; opacity: .55; }
.cr-rail { stroke: var(--muted); stroke-width: 1.6; opacity: .45; }
.cr-cell { fill: var(--soft); stroke: var(--hairline); stroke-width: .8; }
.cr-pat path, .cr-pat circle { stroke: var(--fam); fill: var(--fam); stroke-width: 1; }
.cr-pat path { fill: none; }
.cr-trace { fill: none; stroke: var(--cu); stroke-width: 7; stroke-linecap: square; }
.cr-trace-v { stroke: var(--cu-deep); stroke-width: 6; }
.cr-pin { fill: var(--card); stroke: var(--cu-deep); stroke-width: 1.6; }
.cr-via { fill: var(--via); stroke: var(--card); stroke-width: 1.2; }
.cr-pad-io { fill: var(--cu); stroke: var(--cu-deep); stroke-width: 1.4; }
.cr-pad-label { font: 600 15px var(--si-head, sans-serif); fill: var(--ink); }
.cr-blk { cursor: pointer; text-decoration: none; }
.cr-blk-fill { opacity: .55; transition: opacity .15s ease; }
.cr-blk-body { fill: none; stroke: var(--fam); stroke-width: 2; }
.cr-blk-side .cr-blk-body { stroke-dasharray: 7 4; }
.cr-blk-plate { fill: var(--card); stroke: var(--hairline); stroke-width: 1; }
.cr-blk-name { font: 600 18px var(--si-head, sans-serif); fill: var(--ink); letter-spacing: -0.01em; }
.cr-blk-fam { font: 500 12.5px var(--si-text, sans-serif); fill: var(--fam); }
.cr-blk:hover .cr-blk-fill, .cr-blk:focus-visible .cr-blk-fill { opacity: 1; }
.cr-blk:hover .cr-blk-body, .cr-blk:focus-visible .cr-blk-body { stroke-width: 3.5; stroke-dasharray: none; }
.cr-blk:focus-visible { outline: none; }
/* One orchestrated moment: the trace routes itself once when the page loads. */
@media (prefers-reduced-motion: no-preference) {
  .cr-hub .cr-trace { stroke-dasharray: 900; stroke-dashoffset: 900; animation: cr-route .45s linear forwards; animation-delay: calc(var(--i) * .14s + .2s); }
  @keyframes cr-route { to { stroke-dashoffset: 0; } }
}
.cr-map-list { display: none; }
.cr-h3 { margin: 22px 0 10px; font-size: 1rem; }
.cr-flowlist { list-style: none; margin: 0; padding: 0; border-left: 5px solid var(--cu); }
.cr-sidelist { border-left: 3px dashed var(--hairline); }
.cr-flowlist li a { display: flex; align-items: center; gap: 12px; padding: 10px 14px; color: var(--ink); text-decoration: none; }
.cr-flowlist li a span:last-child { display: flex; flex-direction: column; }
.cr-flowlist small { font-size: 12.5px; color: var(--muted); }
@media (max-width: 640px) {
  .cr-map { display: none; }
  .cr-map-list { display: block; margin-top: 18px; }
}

/* Tooltip shared by the map and the salary chart */
.cr-tip { position: fixed; z-index: 60; max-width: 280px; padding: 10px 12px; border: 1px solid var(--hairline); border-radius: 10px; background: var(--card); color: var(--body); font-size: 13.5px; line-height: 1.45; box-shadow: 0 14px 34px -14px rgba(1, 47, 31, .35); pointer-events: none; }
.cr-tip strong { display: block; color: var(--ink); margin-bottom: 2px; }

/* ---- Bands and sections -------------------------------------------------------------------- */
.cr-band { padding: 40px 0; background: var(--soft); border-block: 1px solid var(--hairline); }
.cr-band h2, .cr-section h2 { margin: 0 0 8px; font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.cr-section { padding: 52px 0; }
.cr-section-soft { background: var(--soft); border-block: 1px solid var(--hairline); }
.cr-sub { margin: 0 0 22px; max-width: 66ch; color: var(--body); line-height: 1.6; }
.cr-routes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 18px; border: 1px solid var(--hairline); border-radius: 14px; overflow: hidden; background: var(--card); }
.cr-route { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; color: var(--body); text-decoration: none; }
.cr-route + .cr-route { border-left: 1px solid var(--hairline); }
.cr-route strong { font: 600 1.12rem/1.3 var(--si-head, inherit); color: var(--ink); }
.cr-route-when { font-size: 13px; color: var(--cu-deep); font-weight: 600; }
.cr-route span:last-child { color: var(--body); }
.cr-route:hover strong { color: var(--green); }

.cr-families { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 40px; }
.cr-fam-group h3 { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 10px; font-size: 1.08rem; }
.cr-fam-group h3 .cr-dot { transform: translateY(-1px); }
.cr-fam-group h3 small { font: 400 13px var(--si-text, inherit); color: var(--muted); }
.cr-fam-group ul { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--fam); }
.cr-fam-group li { border-bottom: 1px solid var(--hairline); }
.cr-fam-group a { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; padding: 12px 2px; color: var(--body); text-decoration: none; }
.cr-fam-group a strong { color: var(--ink); font-weight: 600; }
.cr-fam-group a span { grid-column: 1; font-size: 13.5px; line-height: 1.45; }
.cr-fam-group a em { grid-column: 2; grid-row: 1; font-style: normal; font-size: 12.5px; color: var(--muted); }
.cr-fam-group a:hover strong { color: var(--green); }

.cr-split-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.cr-proj-teaser { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; border-top: 1px solid var(--hairline); }
.cr-proj-teaser li { border-bottom: 1px solid var(--hairline); }
.cr-proj-teaser li:not(:nth-child(3n + 1)) { border-left: 1px solid var(--hairline); }
.cr-proj-teaser a { display: flex; flex-direction: column; gap: 5px; height: 100%; padding: 16px 18px; color: var(--body); text-decoration: none; font-size: 14px; line-height: 1.5; }
.cr-proj-teaser strong { color: var(--ink); font: 600 1.02rem/1.3 var(--si-head, inherit); }
.cr-proj-teaser a:hover strong { color: var(--green); }
.cr-proj-cat { font-size: 12.5px; color: var(--muted); }
.cr-more { margin: 14px 0 0; font-size: 14px; }

/* ---- Article layout (guides and role pages) ----------------------------------------------- */
.cr-article { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 48px; padding: 36px 0 72px; align-items: start; }
.cr-toc { position: sticky; top: 90px; font-size: 13.5px; }
.cr-toc p { margin: 0 0 8px; font-weight: 600; color: var(--ink); }
.cr-toc ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--hairline); }
.cr-toc a { display: block; padding: 5px 0 5px 12px; margin-left: -1px; border-left: 2px solid transparent; color: var(--muted); text-decoration: none; }
.cr-toc a:hover, .cr-toc a[aria-current="true"] { color: var(--ink); border-left-color: var(--green); }
.cr-prose { max-width: 760px; min-width: 0; font-size: 1rem; line-height: 1.68; }
.cr-prose > section, .cr-section-block { scroll-margin-top: 88px; }
.cr-section-block + .cr-section-block, .cr-prose > .cr-section { margin-top: 44px; }
.cr-prose .cr-section { padding: 0; }
.cr-prose h2 { margin: 0 0 12px; font-size: clamp(1.35rem, 2.4vw, 1.7rem); }
.cr-prose h3 { margin: 22px 0 8px; font-size: 1.05rem; }
.cr-prose p { margin: 0 0 14px; }
.cr-list { margin: 0 0 14px; padding-left: 1.2em; }
.cr-list li + li { margin-top: 6px; }
.cr-yes li::marker { color: var(--green); }
.cr-no li::marker { color: var(--muted); }
.cr-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 32px; }

.cr-table-wrap { overflow-x: auto; margin: 6px 0 18px; border: 1px solid var(--hairline); border-radius: 12px; }
.cr-table { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.5; background: var(--card); }
.cr-table caption { caption-side: top; padding: 12px 14px 4px; text-align: left; font-weight: 600; color: var(--ink); background: var(--card); }
.cr-table th, .cr-table td { padding: 10px 14px; text-align: left; vertical-align: top; border-top: 1px solid var(--hairline); }
.cr-table thead th { font-size: 13px; color: var(--muted); font-weight: 600; border-top: 0; }
.cr-table tbody th { color: var(--ink); font-weight: 600; }

.cr-callout { margin: 6px 0 18px; padding: 14px 18px; border-left: 4px solid var(--green); border-radius: 0 10px 10px 0; background: var(--green-soft); }
.cr-callout p { margin: 0; }
.cr-callout .cr-callout-title { margin-bottom: 4px; font-weight: 600; color: var(--ink); }
.cr-callout-warn { border-left-color: #b7791f; background: color-mix(in srgb, #b7791f 10%, var(--card)); }
.cr-callout-note { border-left-color: var(--hairline); background: var(--soft); }

.cr-fit { margin: 6px 0 20px; }
.cr-fit-cap { font-weight: 600; color: var(--ink); }
.cr-fit ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hairline); }
.cr-fit li { display: grid; grid-template-columns: minmax(150px, 220px) auto 1fr; align-items: center; gap: 6px 18px; padding: 11px 0; border-bottom: 1px solid var(--hairline); }
.cr-fit-name { font-weight: 600; color: var(--ink); }
.cr-fit-note { font-size: 14px; color: var(--body); }
.cr-meter { display: inline-flex; gap: 4px; }
.cr-meter span { width: 11px; height: 11px; border: 1.5px solid var(--hairline); background: transparent; }
.cr-meter span.on { background: var(--via); border-color: var(--via); }

.cr-fig { margin: 8px 0 22px; }
.cr-fig figcaption { margin-top: 10px; font-size: 13.5px; color: var(--muted); }
.cr-scroll { overflow-x: auto; padding-bottom: 4px; }
.cr-flow-svg { display: block; width: 100%; height: auto; }
@media (max-width: 640px) { .cr-flow-svg { min-width: var(--minw, 0); } }
.cr-node rect { fill: var(--card); stroke: var(--ink); stroke-width: 1.4; }
.cr-tone-accent rect { fill: var(--cu-soft); stroke: var(--cu-deep); }
.cr-tone-alt rect { fill: var(--card); stroke: var(--muted); stroke-dasharray: 6 4; }
.cr-node-title { font: 600 18px var(--si-head, sans-serif); fill: var(--ink); }
.cr-node-sub { font: 400 15px var(--si-text, sans-serif); fill: var(--body); }
.cr-edge { fill: none; stroke: var(--cu); stroke-width: 4; stroke-linecap: square; stroke-linejoin: miter; }
.cr-edge-label { font: 600 14px var(--si-text, sans-serif); fill: var(--cu-deep); paint-order: stroke; stroke: var(--canvas); stroke-width: 5px; }
.cr-wave-year { font: 700 16px var(--si-head, sans-serif); fill: var(--ink); }
.cr-wave-sem { font: 500 13px var(--si-text, sans-serif); fill: var(--muted); }
.cr-wave-ydiv { stroke: var(--hairline); stroke-width: 1.2; }
.cr-wave-clk { fill: none; stroke: var(--ink); stroke-width: 1.8; }
.cr-wave-name { font: 500 15px var(--si-text, sans-serif); fill: var(--ink); }
.cr-wave-idle { stroke: var(--muted); stroke-width: 1.2; opacity: .45; }
.cr-wave-bus { fill: var(--cu-soft); stroke: var(--cu); stroke-width: 2; }
.cr-wave-opt .cr-wave-bus { fill: transparent; stroke-dasharray: 6 4; }
.cr-wave-opt .cr-wave-name { fill: var(--muted); }
.cr-years { margin-top: 12px !important; }
.cr-years { list-style: none; counter-reset: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 6px 0 0; padding: 0; border-top: 3px solid var(--cu); }
.cr-years > li { position: relative; padding: 18px 14px 4px 0; }
.cr-years > li::before { content: ""; position: absolute; top: -8px; left: 0; width: 13px; height: 13px; background: var(--via); }
.cr-year-head { display: flex; flex-direction: column; margin-bottom: 6px; }
.cr-year { font: 700 1.05rem var(--si-head, inherit); color: var(--ink); }
.cr-year-focus { font-size: 13.5px; color: var(--cu-deep); font-weight: 600; }
.cr-years ul { margin: 0; padding-left: 1.05em; font-size: 14px; line-height: 1.5; }
.cr-years ul li + li { margin-top: 4px; }

.cr-tl { list-style: none; margin: 8px 0 0; padding: 0 0 0 4px; }
.cr-tl li { position: relative; display: grid; grid-template-columns: 96px 1fr; gap: 14px; margin-top: var(--gap, 0); padding: 6px 0 6px 22px; border-left: 4px solid var(--cu); }
.cr-tl li::before { content: ""; position: absolute; left: -9px; top: 11px; width: 13px; height: 13px; background: var(--via); }
.cr-tl-target { border-left-style: dashed !important; }
.cr-tl-target::before { background: var(--card) !important; border: 2px solid var(--via); width: 9px !important; height: 9px !important; }
.cr-tl-date { font: 600 0.95rem var(--si-head, inherit); color: var(--ink); }
.cr-tl-text { font-size: 14.5px; color: var(--body); }
.cr-tl-target .cr-tl-text { font-style: italic; }
@media (max-width: 480px) { .cr-tl li { grid-template-columns: 1fr; gap: 0; } }

/* ---- Salary chart (one axis, thin marks, direct labels) ------------------------------------ */
.cr-salary { margin: 6px 0 4px; }
.cr-sal-svg { display: block; width: 100%; height: auto; }
.cr-grid { stroke: var(--hairline); stroke-width: 1; }
.cr-tick, .cr-axis { font: 400 15px var(--si-text, sans-serif); fill: var(--muted); }
.cr-sal-label { font: 600 18px var(--si-head, sans-serif); fill: var(--ink); }
.cr-sal-span { stroke: var(--muted); stroke-width: 2; stroke-linecap: round; opacity: .55; }
.cr-sal-mid { fill: var(--cu); }
.cr-sal-val { font: 500 15px var(--si-text, sans-serif); fill: var(--body); }
.cr-sal-end { font: 400 14px var(--si-text, sans-serif); fill: var(--muted); }
.cr-hit { fill: transparent; }
.cr-sal-row { outline: none; }
.cr-sal-row:focus-visible .cr-sal-label { text-decoration: underline; }
.cr-sal-row:hover .cr-sal-mid, .cr-sal-row:focus-visible .cr-sal-mid { fill: var(--cu-deep); }
.cr-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 6px; font-size: 13px; color: var(--muted); }
.cr-lg-mid { display: inline-block; width: 22px; height: 10px; border-radius: 3px; background: var(--cu); }
.cr-lg-span { display: inline-block; width: 22px; height: 2px; margin-left: 10px; background: var(--muted); opacity: .55; }
.cr-data { margin: 8px 0 0; font-size: 14px; }
.cr-data summary { cursor: pointer; color: var(--green); font-weight: 600; }
.cr-data .cr-table { margin-top: 8px; border: 1px solid var(--hairline); }
.cr-sal-m { display: none; list-style: none; margin: 8px 0 0; padding: 0; }
.cr-sal-m li { display: grid; gap: 4px; padding: 10px 0; border-bottom: 1px solid var(--hairline); }
.cr-sal-m-label { font-weight: 600; color: var(--ink); font-size: 14.5px; }
.cr-sal-m-track { position: relative; height: 12px; }
.cr-sal-m-span { position: absolute; top: 5px; height: 2px; background: var(--muted); opacity: .55; border-radius: 2px; }
.cr-sal-m-mid { position: absolute; top: 0; height: 12px; background: var(--cu); border-radius: 4px; }
.cr-sal-m-val { font-size: 13px; color: var(--body); }
@media (max-width: 640px) {
  .cr-sal-svg { display: none; }
  .cr-sal-m { display: block; }
}
.cr-source { margin: 10px 0 0; font-size: 12.5px; color: var(--muted); max-width: 80ch; }

/* ---- Role page pieces ---------------------------------------------------------------------- */
.cr-ladder { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 14px 0 0; padding: 0; }
.cr-ladder > li { position: relative; padding: 22px 18px 4px 0; border-top: 6px solid var(--cu); }
.cr-ladder > li + li { padding-left: 18px; border-left: 1px solid var(--hairline); }
.cr-ladder > li::before { content: ""; position: absolute; top: -8px; left: 0; width: 13px; height: 13px; background: var(--via); }
.cr-ladder > li + li::before { left: -8px; }
.cr-ladder-head { display: flex; flex-direction: column; margin-bottom: 10px; }
.cr-ladder-stage { font: 700 1.1rem var(--si-head, inherit); color: var(--ink); }
.cr-ladder-time { font-size: 13px; color: var(--muted); }
.cr-ladder-label { margin: 10px 0 4px !important; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.cr-ladder ul { margin: 0; padding-left: 1.05em; font-size: 14px; line-height: 1.5; }
.cr-tools { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 !important; }
.cr-tools span { padding: 2px 8px; border: 1px solid var(--hairline); border-radius: 6px; font-size: 12.5px; background: var(--card); }
.cr-ladder-mile { margin: 12px 0 0 !important; font-size: 13.5px; line-height: 1.5; }
.cr-role .cr-article { --fam: inherit; }

.cr-path { list-style: none; counter-reset: step; margin: 0; padding: 0; }
.cr-path { border-left: 4px solid var(--cu); margin-left: 12px !important; }
.cr-path li { counter-increment: step; position: relative; display: flex; flex-direction: column; padding: 10px 0 10px 30px; border-bottom: 1px solid var(--hairline); }
.cr-path li::before { left: -16px !important; }
.cr-path li::before { content: counter(step); position: absolute; left: 0; top: 10px; width: 28px; height: 28px; display: grid; place-items: center; border: 1.5px solid var(--cu-deep); background: var(--cu-soft); color: var(--ink); font-weight: 700; font-size: 13.5px; }
.cr-path a, .cr-path strong { font-weight: 600; }
.cr-path span { font-size: 14px; color: var(--body); }

.cr-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; padding: 0; }
.cr-tags li { padding: 5px 12px; border: 1px solid var(--hairline); border-radius: 999px; font-size: 14px; background: var(--card); }

.cr-check { border: 1px solid var(--hairline); border-radius: 12px; background: var(--card); padding: 6px 18px 10px; }
.cr-check-count { margin: 10px 0 6px !important; font-weight: 600; color: var(--ink); }
.cr-check ul { list-style: none; margin: 0; padding: 0; }
.cr-check li { border-top: 1px solid var(--hairline); }
.cr-check label { display: flex; gap: 12px; align-items: flex-start; padding: 9px 0; cursor: pointer; font-size: 14.5px; line-height: 1.5; }
.cr-check input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--green); }
.cr-check input:checked + span { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--green); }

.cr-faq details { border-bottom: 1px solid var(--hairline); }
.cr-faq summary { cursor: pointer; padding: 12px 0; font-weight: 600; color: var(--ink); list-style-position: outside; }
.cr-faq details p { margin: 0 0 14px; }

.cr-prevnext, .cr-next { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 48px; }
.cr-next { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.cr-prevnext a, .cr-next a { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; border: 1px solid var(--hairline); border-radius: 12px; background: var(--card); color: var(--ink); text-decoration: none; }
.cr-prevnext a[rel="next"] { text-align: right; }
.cr-prevnext span, .cr-next span { font-size: 12.5px; color: var(--muted); }
.cr-prevnext a:hover, .cr-next a:hover { border-color: var(--green-border); }

.cr-chip { display: inline-flex; align-items: center; gap: 6px; margin: 0 6px 6px 0; padding: 3px 10px; border: 1px solid var(--hairline); border-radius: 999px; font-size: 13px; color: var(--ink) !important; text-decoration: none; background: var(--card); }

/* ---- Project library ---------------------------------------------------------------------- */
.cr-lib { padding: 24px 0 72px; }
.cr-filters { position: sticky; top: 64px; z-index: 5; margin: 0 0 18px; padding: 14px 0 10px; background: var(--canvas); border-bottom: 1px solid var(--hairline); }
.cr-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
.cr-chips legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.cr-fchip { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border: 1px solid var(--hairline); border-radius: 999px; background: var(--card); color: var(--ink); font: 500 13.5px var(--si-text, inherit); cursor: pointer; }
.cr-fchip span { color: var(--muted); font-size: 12px; }
.cr-fchip[aria-pressed="true"] { border-color: var(--green); background: var(--green-soft); color: var(--ink); font-weight: 600; }
.cr-frow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: 12px; font-size: 14px; color: var(--body); }
.cr-frow label { display: inline-flex; align-items: center; gap: 8px; }
.cr-frow select, .cr-frow input[type="search"] { min-height: 36px; padding: 0 10px; border: 1px solid var(--hairline); border-radius: 8px; background: var(--card); color: var(--ink); font: inherit; }
.cr-search { flex: 1 1 220px; }
.cr-search input { flex: 1; min-width: 0; }
.cr-check-inline input { width: 17px; height: 17px; accent-color: var(--green); }
.cr-count { margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.cr-proj-list { border-top: 1px solid var(--hairline); }
.cr-proj { border-bottom: 1px solid var(--hairline); scroll-margin-top: 230px; }
.cr-proj > summary { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: start; gap: 4px 16px; padding: 14px 4px; cursor: pointer; list-style: none; }
.cr-proj > summary::-webkit-details-marker { display: none; }
.cr-proj-id { font: 700 13px var(--si-text, inherit); color: var(--muted); font-variant-numeric: tabular-nums; padding-top: 3px; }
.cr-proj-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cr-proj-main strong { font: 600 1.03rem/1.35 var(--si-head, inherit); color: var(--ink); }
.cr-proj-main span { font-size: 14px; line-height: 1.5; color: var(--body); }
.cr-proj-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.cr-lvl { padding: 1px 8px; border-radius: 999px; border: 1px solid var(--hairline); color: var(--ink); }
.cr-lvl-advanced { border-color: var(--ink); }
.cr-proj[open] > summary { background: var(--soft); }
.cr-proj[open] .cr-proj-main strong { color: var(--green); }
.cr-proj-body { padding: 6px 4px 22px 62px; font-size: 14.5px; line-height: 1.55; }
.cr-proj-goal { margin: 10px 0 14px; max-width: 75ch; }
.cr-proj-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 36px; }
.cr-proj-grid h4 { margin: 12px 0 4px; font-size: 0.92rem; }
.cr-proj-grid ul, .cr-proj-grid ol { margin: 0; padding-left: 1.15em; }
.cr-proj-grid li + li { margin-top: 3px; }
.cr-tools-line { margin: 2px 0; }
.cr-tools-kind { font-weight: 600; color: var(--ink); margin-right: 4px; }
.cr-resume { margin: 16px 0 6px; padding: 10px 14px; border-left: 3px solid var(--green); background: var(--green-soft); border-radius: 0 8px 8px 0; }
.cr-resume span { display: block; font-size: 12.5px; font-weight: 600; color: var(--green); }
.cr-proj-roles { margin: 12px 0 0; font-size: 13.5px; color: var(--muted); }
.cr-empty { padding: 30px 0; color: var(--muted); }

/* ---- Responsive ---------------------------------------------------------------------------- */
@media (max-width: 960px) {
  .cr-article { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .cr-toc { position: static; margin-bottom: 24px; }
  .cr-toc ul { display: flex; flex-wrap: wrap; gap: 4px 14px; border: 0; }
  .cr-toc a { padding: 2px 0; border: 0; text-decoration: underline; text-underline-offset: 3px; }
  .cr-proj-teaser { grid-template-columns: 1fr; }
  .cr-proj-teaser li:not(:nth-child(3n + 1)) { border-left: 0; }
}
@media (max-width: 760px) {
  .cr-routes { grid-template-columns: 1fr; }
  .cr-route + .cr-route { border-left: 0; border-top: 1px solid var(--hairline); }
  .cr-families, .cr-two-col, .cr-proj-grid { grid-template-columns: 1fr; }
  .cr-ladder, .cr-years { grid-template-columns: 1fr; border-top: 0; }
  .cr-ladder > li, .cr-ladder > li + li, .cr-years > li { padding: 4px 0 18px 26px; border-top: 0; border-left: 6px solid var(--cu); }
  .cr-years > li { border-left-color: var(--cu); }
  .cr-ladder > li::before, .cr-ladder > li + li::before, .cr-years > li::before { top: 2px; left: -9px; }
  .cr-fit li { grid-template-columns: 1fr auto; }
  .cr-fit-note { grid-column: 1 / -1; }
  .cr-proj > summary { grid-template-columns: 34px minmax(0, 1fr); }
  .cr-proj-meta { grid-column: 2; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
  .cr-proj-body { padding-left: 4px; }
  .cr-filters { position: static; }
  .cr-prevnext { grid-template-columns: 1fr; }
  .cr-prevnext a[rel="next"] { text-align: left; }
  .cr-section { padding: 38px 0; }
  .cr-sal-label { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .cr-blk-body { transition: none; }
}