/* ─────────────────────────────────────────────────────────────
 * CRREM Library — inner pages stylesheet
 * Shell (zones 1, 2, 4, 5) + per-page Zone 3.
 * Loaded only on the four /library/* pages via inc/library-pages.php.
 * ───────────────────────────────────────────────────────────── */

/* ========== Tokens ========== */
.crrem-lib-page-main {
    --evergreen: #174A3B;
    --slate: #213338;
    --slate-60: #66707A;
    --arctic: #2F6F85;
    --amber: #D6A24A;
    --amber-deep: #B28433;
    --fern: #477262;
    --sage: #7BA68A;
    --ember: #A63F3C;
    --sienna: #C15A2E;
    --band-cool: #E0EAEE;
    --band-off: #F7F8F8;
    --band-warm: #DCE8E2;
    --hair: rgba(33, 51, 56, 0.08);
    --hair-warm: rgba(23, 74, 59, 0.12);
    /* Note: --excel-blue and --excel-yellow (refimpl) are aliases for --arctic and --amber,
       same values, kept as named vars within scoped refimpl section only. */
    font-family: 'Lexend Deca', sans-serif;
    font-size: 16.5px;
    color: var(--slate);
    line-height: 1.55;
    background: #fff;
}

.crrem-lib-page-main .material-symbols-rounded {
    font-family: 'Material Symbols Rounded';
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ========== Site container alignment ==========
 * Each zone (top strip, hero, siblings, footer) stays full-bleed so its
 * background fills the viewport, but the CONTENT inside gets constrained
 * to the site's 1200px container with 32px horizontal padding — matching
 * .container { max-width: 1200px; padding: 0 32px } used across crrem.org.
 * The calc() formula adds side buffer on viewports wider than 1200px.
 */
.crrem-lib-page-main .crrem-lib-zone-top {
    padding-left: max(32px, calc(50% - 600px + 32px));
    padding-right: max(32px, calc(50% - 600px + 32px));
}
.crrem-lib-page-main .crrem-lib-zone-hero {
    padding-left: max(32px, calc(50% - 600px + 32px));
    padding-right: max(32px, calc(50% - 600px + 32px));
}
.crrem-lib-page-main .crrem-lib-zone-siblings {
    padding-left: max(32px, calc(50% - 600px + 32px));
    padding-right: max(32px, calc(50% - 600px + 32px));
}
.crrem-lib-page-main .crrem-lib-zone-footer {
    padding-left: max(32px, calc(50% - 600px + 32px));
    padding-right: max(32px, calc(50% - 600px + 32px));
}

/* Shell wrapper */
.crrem-lib-page-main .shell {
    max-width: 1200px;
    margin: 24px auto 0;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 2px 30px rgba(23, 74, 59, 0.08);
    background: #fff;
}
.crrem-lib-page-main .shell + .shell { margin-top: 40px; }

/* ========== ZONE 1 — Top strip ========== */
/* Sticky + fade-on-scroll behavior is wired by assets/js/library-shell.js.
 * Logic:
 *   - Default: visible, in flow at top of page.
 *   - Scrolled past 8px: gains .is-stuck (translucent blurred chrome).
 *   - Scrolled past 240px: gains .is-hidden (fades out, click-through).
 *   - Hash change / in-page anchor click: peeks back in for ~2.5s so a reader
 *     who landed mid-page from a hub link can re-orient.
 */
.crrem-lib-zone-top {
    background: #fff;
    padding: 22px 32px 18px;
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 12px;
    position: sticky;
    /* Sit below the Elementor sticky site header (73px tall, fixed, z 100). */
    top: 73px;
    z-index: 50;
    transition: background 200ms ease, box-shadow 200ms ease,
                opacity 320ms ease, transform 320ms ease;
}
@media (max-width: 768px) {
    .crrem-lib-zone-top { top: 60px; }
}
.crrem-lib-zone-top.is-stuck {
    background: rgba(255, 255, 255, 0.94);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    box-shadow: 0 1px 0 var(--hair), 0 8px 24px rgba(23, 74, 59, 0.06);
}
.crrem-lib-zone-top.is-hidden {
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
    .crrem-lib-zone-top { transition: none; }
}
.crrem-lib-zone-top .back-link {
    color: var(--arctic);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 500;
}
.crrem-lib-zone-top .back-link .material-symbols-rounded { font-size: 16px; }
.crrem-lib-zone-top .crumb { color: var(--slate-60); }
.crrem-lib-zone-top .crumb .sep { margin: 0 8px; color: var(--hair); }
.crrem-lib-zone-top .grow { flex: 1; }
.crrem-lib-zone-top .meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    color: var(--slate-60);
    padding: 3px 10px;
    background: var(--band-off);
    border-radius: 999px;
    letter-spacing: 0.04em;
}
.crrem-lib-zone-top .meta-chip .dot {
    width: 6px;
    height: 6px;
    background: var(--fern);
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(71, 114, 98, 0.15);
}
.crrem-lib-zone-top .meta-chip--release {
    background: rgba(23, 74, 59, 0.08);
    color: var(--evergreen, #174A3B);
    font-weight: 500;
}

/* ========== ZONE 2 — Hero (washed skyline) ========== */
.crrem-lib-zone-hero {
    padding: 72px 56px 60px;
    position: relative;
    isolation: isolate;
}
/* city skyline layer — image URL is supplied per-page via the --crrem-lib-skyline
 * CSS variable set inline by the hero partial (see template-parts/library-shell-hero.php).
 * Kept at a medium opacity so the skyline reads as a recognizable backdrop
 * without overpowering the hero text.
 */
.crrem-lib-zone-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    opacity: 0.55;
    background-image: var(--crrem-lib-skyline);
    background-position: center 40%;
    background-size: cover;
    background-repeat: no-repeat;
}
/* wash/gradient overlay — softens the skyline and ensures text contrast */
.crrem-lib-zone-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(ellipse 900px 500px at 80% 0%, rgba(47, 111, 133, 0.08), transparent 60%),
        radial-gradient(ellipse 700px 400px at 0% 100%, rgba(214, 162, 74, 0.06), transparent 60%),
        linear-gradient(180deg, rgba(247, 248, 248, 0.55) 0%, rgba(247, 248, 248, 0.82) 100%);
}
/* 4px top accent rule above everything — softer so it doesn't clash with
 * the dark-evergreen site navbar directly above. */
.crrem-lib-zone-hero .accent-rule {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(to right, var(--evergreen) 0%, var(--arctic) 40%, var(--amber) 80%, var(--evergreen) 100%);
    opacity: 0.4;
    z-index: 2;
}

.crrem-lib-zone-hero .hero-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 56px;
    align-items: center;
    position: relative;
    z-index: 1;
}
.crrem-lib-zone-hero .hero-grid.mirror {
    grid-template-columns: 1fr 1.1fr;
}
.crrem-lib-zone-hero .hero-grid.mirror .hero-text { order: 2; }
.crrem-lib-zone-hero .hero-grid.mirror .hero-visual-wrap { order: 1; }

.crrem-lib-zone-hero .hero-eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--arctic);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.crrem-lib-zone-hero .hero-eyebrow .num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: rgba(214, 162, 74, 0.18);
    color: #B28433;
    border-radius: 4px;
    font-weight: 600;
    font-size: 10.5px;
}
.crrem-lib-zone-hero .crrem-lib-hero-h1 {
    font-family: 'Lexend Deca', sans-serif;
    font-weight: 600;
    font-size: 58px;
    line-height: 1.06;
    letter-spacing: -0.02em;
    color: var(--evergreen);
    margin-bottom: 18px;
}
.crrem-lib-zone-hero .crrem-lib-hero-h1 .em { color: var(--arctic); }
.crrem-lib-zone-hero .crrem-lib-hero-sub {
    font-size: 18px;
    line-height: 1.65;
    color: var(--slate);
    max-width: 560px;
    margin-bottom: 28px;
}
.crrem-lib-zone-hero .crrem-lib-hero-actions { display: flex; gap: 8px; flex-wrap: nowrap; align-items: center; }
.crrem-lib-zone-hero .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 11px 16px;
    border-radius: 6px;
    font-family: 'Lexend Deca', sans-serif;
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.2s ease;
    cursor: pointer;
}
.crrem-lib-zone-hero .btn-primary { background: var(--evergreen); color: #fff; }
.crrem-lib-zone-hero .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(23, 74, 59, 0.25);
}
.crrem-lib-zone-hero .btn-ghost {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: var(--evergreen);
    border: 1px solid rgba(23, 74, 59, 0.2);
}
.crrem-lib-zone-hero .btn-ghost:hover {
    background: #fff;
    border-color: var(--evergreen);
    transform: translateY(-2px);
}
.crrem-lib-zone-hero .btn .material-symbols-rounded { font-size: 18px; }

/* Hero visual window */
.crrem-lib-zone-hero .hero-visual {
    background: var(--band-warm);
    border: 1px solid var(--hair-warm);
    border-radius: 14px;
    padding: 22px;
    position: relative;
    min-height: 280px;
    box-shadow: 0 8px 32px rgba(23, 74, 59, 0.08);
}
.crrem-lib-zone-hero .hero-visual-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 4px;
}
.crrem-lib-zone-hero .hero-visual-head .vlabel {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 11px;
    color: var(--evergreen);
    letter-spacing: 0.1em;
    font-weight: 600;
    text-transform: uppercase;
}
.crrem-lib-zone-hero .hero-visual-live {
    font-size: 9.5px;
    color: var(--fern);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    letter-spacing: 0.06em;
    white-space: nowrap;
}
.crrem-lib-zone-hero .hero-visual-live .dot {
    width: 6px;
    height: 6px;
    background: var(--fern);
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(71, 114, 98, 0.2);
    flex-shrink: 0;
}
.crrem-lib-zone-hero .hero-visual-meta {
    font-size: 10.5px;
    color: var(--slate-60);
    margin-bottom: 14px;
    letter-spacing: 0.02em;
}
.crrem-lib-zone-hero .hero-visual-inner {
    background: #fff;
    border-radius: 10px;
    padding: 22px 20px;
    box-shadow: inset 0 0 0 1px rgba(33, 51, 56, 0.04);
    min-height: 240px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Inner previews (mini versions of hub previews) */
/* Release-log list used in the Pathways hero (replaces the duplicate curve
 * chart; the chart already shows in the Explorer section below). */
.crrem-lib-zone-hero .rel-list-mini { font-size: 13px; line-height: 1.5; font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-feature-settings: 'calt' 0, 'liga' 0; }
.crrem-lib-zone-hero .rel-list-mini .rel {
    display: grid;
    grid-template-columns: 56px 100px 1fr;
    gap: 14px;
    padding: 10px 4px;
    align-items: baseline;
    border-bottom: 1px solid var(--hair);
}
.crrem-lib-zone-hero .rel-list-mini .rel:last-child { border-bottom: 0; }
.crrem-lib-zone-hero .rel-list-mini .rel .v {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--evergreen);
}
.crrem-lib-zone-hero .rel-list-mini .rel .d {
    font-size: 11.5px;
    color: var(--slate-60);
    letter-spacing: 0.01em;
}
.crrem-lib-zone-hero .rel-list-mini .rel .note { color: var(--slate); }
.crrem-lib-zone-hero .rel-list-mini a.rel {
    color: inherit;
    text-decoration: none;
    border-radius: 6px;
    margin: 0 -8px;
    padding-left: 12px;
    padding-right: 12px;
    transition: background-color 160ms ease;
}
.crrem-lib-zone-hero .rel-list-mini a.rel:hover,
.crrem-lib-zone-hero .rel-list-mini a.rel:focus-visible {
    background-color: rgba(214, 162, 74, 0.14);
    outline: none;
    border-bottom-color: transparent;
}
.crrem-lib-zone-hero .rel-list-mini a.rel:hover .v,
.crrem-lib-zone-hero .rel-list-mini a.rel:focus-visible .v { color: var(--amber-deep); }

/* Calc-mini used in the Reference Implementations hero (label · value · unit rows).
   Labels stay in Lexend Deca for legibility; values and units go monospace so
   numbers align tabularly and unit suffixes form a clean right-hand column. */
.crrem-lib-zone-hero .calc-mini { font-size: 13.5px; line-height: 1.55; }
.crrem-lib-zone-hero .calc-mini .line {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 14px;
    align-items: baseline;
    padding: 9px 2px;
    border-bottom: 1px dotted rgba(33, 51, 56, 0.10);
}
.crrem-lib-zone-hero .calc-mini .line:last-child { border-bottom: 0; }
.crrem-lib-zone-hero .calc-mini .line .lbl { color: var(--slate-60); }
.crrem-lib-zone-hero .calc-mini .line .val {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-feature-settings: 'calt' 0, 'liga' 0;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--evergreen);
    text-align: right;
    min-width: 60px;
}
.crrem-lib-zone-hero .calc-mini .line .unit {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-feature-settings: 'calt' 0, 'liga' 0;
    color: var(--slate-60);
    font-size: 11.5px;
    min-width: 92px;
    text-align: right;
}
.crrem-lib-zone-hero .calc-mini .rule {
    height: 1px;
    background: rgba(33, 51, 56, 0.15);
    margin: 6px 0;
}
.crrem-lib-zone-hero .calc-mini a.line {
    color: inherit;
    text-decoration: none;
    border-radius: 6px;
    margin: 0 -8px;
    padding-left: 10px;
    padding-right: 10px;
    transition: background-color 160ms ease;
}
.crrem-lib-zone-hero .calc-mini a.line:hover,
.crrem-lib-zone-hero .calc-mini a.line:focus-visible {
    background-color: rgba(214, 162, 74, 0.14);
    outline: none;
    border-bottom-color: transparent;
}
.crrem-lib-zone-hero .calc-mini a.line:hover .val,
.crrem-lib-zone-hero .calc-mini a.line:focus-visible .val { color: var(--amber-deep); }

/* Schema-mini used in the Technical Blueprint hero (glyph · key · type rows). */
.crrem-lib-zone-hero .schema-mini { font-size: 13.5px; line-height: 1.6; font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-feature-settings: 'calt' 0, 'liga' 0; }
.crrem-lib-zone-hero .schema-mini .ln {
    display: grid;
    grid-template-columns: 22px 1fr auto;
    gap: 10px;
    align-items: baseline;
    padding: 4px 0;
}
.crrem-lib-zone-hero .schema-mini .ln .glyph {
    color: var(--slate-60);
    text-align: center;
    font-weight: 500;
}
.crrem-lib-zone-hero .schema-mini .ln .key {
    color: var(--evergreen);
    font-weight: 500;
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.crrem-lib-zone-hero .schema-mini .ln .type {
    color: var(--slate-60);
    font-size: 11.5px;
    font-style: normal;
    padding: 2px 6px;
    background: rgba(33, 51, 56, 0.05);
    border-radius: 3px;
}
.crrem-lib-zone-hero .schema-mini .ln.root .key { font-weight: 700; color: var(--amber-deep); }
.crrem-lib-zone-hero .schema-mini .ln.root .glyph { color: var(--amber-deep); }
.crrem-lib-zone-hero .schema-mini a.ln {
    color: inherit;
    text-decoration: none;
    border-radius: 6px;
    margin: 0 -6px;
    padding-left: 8px;
    padding-right: 8px;
    transition: background-color 160ms ease;
}
.crrem-lib-zone-hero .schema-mini a.ln:hover,
.crrem-lib-zone-hero .schema-mini a.ln:focus-visible {
    background-color: rgba(47, 111, 133, 0.10);
    outline: none;
}
.crrem-lib-zone-hero .schema-mini a.ln:hover .key,
.crrem-lib-zone-hero .schema-mini a.ln:focus-visible .key { color: var(--arctic); }

.crrem-lib-zone-hero .chap-list-mini { font-size: 13px; line-height: 1.7; }
.crrem-lib-zone-hero .chap-list-mini .chap {
    display: grid;
    grid-template-columns: 30px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 6px 8px;
    border-bottom: 1px dotted rgba(33, 51, 56, 0.12);
    margin: 0 -8px;
    border-radius: 6px;
}
.crrem-lib-zone-hero .chap-list-mini .chap .n { color: var(--arctic); font-size: 11px; font-weight: 500; }
.crrem-lib-zone-hero .chap-list-mini .chap .t { color: var(--slate); }
.crrem-lib-zone-hero .chap-list-mini .chap .p { font-size: 11px; color: var(--slate-60); }
.crrem-lib-zone-hero .chap-list-mini a.chap {
    color: inherit;
    text-decoration: none;
    transition: background-color 160ms ease;
}
.crrem-lib-zone-hero .chap-list-mini a.chap:hover,
.crrem-lib-zone-hero .chap-list-mini a.chap:focus-visible {
    background-color: rgba(214, 162, 74, 0.14);
    border-bottom-color: transparent;
    outline: none;
}
.crrem-lib-zone-hero .chap-list-mini a.chap:hover .t,
.crrem-lib-zone-hero .chap-list-mini a.chap:focus-visible .t { font-weight: 600; color: var(--evergreen); }

.crrem-lib-zone-hero .pathway-chart { width: 100%; height: 140px; }
.crrem-lib-zone-hero .pathway-chart .gridline { stroke: rgba(33, 51, 56, 0.08); stroke-width: 1; }
.crrem-lib-zone-hero .pathway-chart .pathway-fill { fill: rgba(23, 74, 59, 0.06); }
.crrem-lib-zone-hero .pathway-chart .pathway-line { stroke: var(--evergreen); stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.crrem-lib-zone-hero .pathway-chart .pathway-dot { fill: var(--evergreen); }
.crrem-lib-zone-hero .pathway-chart .pathway-dot.current { fill: var(--amber); }
.crrem-lib-zone-hero .pathway-chart .pathway-dot.halo { fill: rgba(214, 162, 74, 0.18); }
.crrem-lib-zone-hero .pathway-chart .year-label { font-family: 'Lexend Deca', sans-serif; font-size: 10px; fill: var(--slate-60); font-weight: 500; }
.crrem-lib-zone-hero .pathway-chart .year-label.current { fill: #B28433; font-weight: 600; }
.crrem-lib-zone-hero .pathway-chart .y-tick { font-family: 'Lexend Deca', sans-serif; font-size: 9px; fill: var(--slate-60); }

.crrem-lib-zone-hero .chart-cap {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 10px;
    font-size: 11px;
    color: var(--slate-60);
}
.crrem-lib-zone-hero .chart-cap .title {
    font-family: 'Lexend Deca', sans-serif;
    font-weight: 600;
    font-size: 11.5px;
    color: var(--evergreen);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.crrem-lib-zone-hero .chart-cap .unit { font-size: 10px; }
.crrem-lib-zone-hero .chart-cap .unit .val {
    color: var(--evergreen);
    font-family: 'Lexend Deca', sans-serif;
    font-weight: 600;
    font-size: 12px;
    margin-right: 4px;
    font-variant-numeric: tabular-nums;
}

/* ========== ZONE 4 — Siblings ========== */
.crrem-lib-zone-siblings {
    padding: 56px 56px 48px;
    background: var(--band-off);
    border-top: 1px solid var(--hair);
}
.crrem-lib-zone-siblings .sib-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: var(--arctic);
    text-transform: uppercase;
    margin-bottom: 22px;
}
.crrem-lib-zone-siblings .sib-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.crrem-lib-zone-siblings .sib-card {
    background: var(--band-warm);
    border: 1px solid var(--hair-warm);
    border-radius: 12px;
    padding: 22px;
    transition: all 0.2s ease;
    cursor: pointer;
}
.crrem-lib-zone-siblings .sib-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(23, 74, 59, 0.1);
}
.crrem-lib-zone-siblings .sib-card .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.crrem-lib-zone-siblings .sib-card .icon {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 6px;
    color: var(--evergreen);
}
.crrem-lib-zone-siblings .sib-card .icon .material-symbols-rounded { font-size: 18px; }
.crrem-lib-zone-siblings .sib-card .num {
    font-size: 10px;
    color: #B28433;
    font-weight: 600;
    letter-spacing: 0.12em;
}
.crrem-lib-zone-siblings .sib-card .tile-title {
    font-family: 'Lexend Deca', sans-serif;
    font-weight: 600;
    color: var(--evergreen);
    font-size: 16px;
    margin-bottom: 4px;
}
.crrem-lib-zone-siblings .sib-card .tile-desc {
    font-size: 12.5px;
    color: var(--slate);
    line-height: 1.5;
    opacity: 0.8;
}
.crrem-lib-zone-siblings .sib-card .cta {
    margin-top: 10px;
    font-size: 12px;
    color: var(--evergreen);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.crrem-lib-zone-siblings .sib-card .cta .material-symbols-rounded { font-size: 14px; }

/* ========== ZONE 5 — Footer strip ========== */
.crrem-lib-zone-footer {
    padding: 28px 56px;
    background: #fff;
    border-top: 1px solid var(--hair);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.crrem-lib-zone-footer .lib-link {
    font-size: 13px;
    color: var(--evergreen);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.crrem-lib-zone-footer .lib-link .material-symbols-rounded { font-size: 18px; }
.crrem-lib-zone-footer .cite { font-size: 11px; color: var(--slate-60); }

/* ========== Shared Zone-3 section wrapper ========== */
/* These .sec, .sec-label, .sec-h, .sec-intro, .sec-h .em rules are shared
   across all four Zone-3 pages. Scoped to .crrem-lib-page-main to avoid leaks. */
.crrem-lib-page-main .sec,
.crrem-lib-page-main section.sec {
    padding-top: 72px;
    padding-bottom: 72px;
    padding-left: max(32px, calc(50% - 600px + 32px));
    padding-right: max(32px, calc(50% - 600px + 32px));
}
.crrem-lib-page-main .sec.alt,
.crrem-lib-page-main section.sec.alt { background: var(--band-off); }
.crrem-lib-page-main .sec-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: var(--arctic);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.crrem-lib-page-main .sec-label .dot-amber {
    width: 6px;
    height: 6px;
    background: var(--amber);
    border-radius: 50%;
}
.crrem-lib-page-main .sec-h {
    font-family: 'Lexend Deca', sans-serif;
    font-weight: 600;
    font-size: 36px;
    color: var(--evergreen);
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin-bottom: 16px;
}
.crrem-lib-page-main .sec-h .em { color: var(--arctic); }
.crrem-lib-page-main .sec-intro {
    font-size: 17px;
    color: var(--slate);
    line-height: 1.65;
    max-width: 760px;
    margin-bottom: 40px;
}

/* Compact hero mini (used in zone3 mockup previews, scoped to lib pages) */
.crrem-lib-page-main .z-hero-mini {
    padding: 28px 48px 24px;
    background:
        radial-gradient(ellipse 900px 500px at 80% 0%, rgba(47, 111, 133, 0.08), transparent 60%),
        linear-gradient(180deg, rgba(247, 248, 248, 0.85), rgba(247, 248, 248, 0.95)),
        var(--band-off);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
    border-bottom: 1px solid var(--hair);
    position: relative;
}
.crrem-lib-page-main .z-hero-mini::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(to right, var(--evergreen) 0%, var(--arctic) 40%, var(--amber) 80%, var(--evergreen) 100%);
    opacity: 0.85;
}
.crrem-lib-page-main .z-hero-mini .meta-small { font-size: 10px; color: var(--slate-60); letter-spacing: 0.04em; }
.crrem-lib-page-main .z-hero-mini h2 {
    font-family: 'Lexend Deca', sans-serif;
    font-weight: 600;
    font-size: 22px;
    color: var(--evergreen);
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin: 4px 0;
}
.crrem-lib-page-main .z-hero-mini h2 .em { color: var(--arctic); }
.crrem-lib-page-main .z-hero-mini .note { font-size: 12px; color: var(--slate-60); }
.crrem-lib-page-main .z-hero-mini .pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    background: var(--band-warm);
    color: var(--evergreen);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
}

/* ========== ZONE 3 — Assessment Guide ========== */
.crrem-lib-page-main[data-component="assessment-guide"] .flow-sec { background: #fff; }
.crrem-lib-page-main[data-component="assessment-guide"] .flow-block {
    background: var(--band-off);
    border: 1px solid var(--hair);
    border-radius: 16px;
    padding: 40px 36px;
    margin-bottom: 24px;
    position: relative;
}
.crrem-lib-page-main[data-component="assessment-guide"] .flow-block + .flow-block { margin-top: 18px; }
.crrem-lib-page-main[data-component="assessment-guide"] .flow-head {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 28px;
}
.crrem-lib-page-main[data-component="assessment-guide"] .flow-head .tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--band-warm);
    color: var(--evergreen);
    border-radius: 10px;
}
.crrem-lib-page-main[data-component="assessment-guide"] .flow-head .tag .material-symbols-rounded { font-size: 26px; }
.crrem-lib-page-main[data-component="assessment-guide"] .flow-head .title-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.crrem-lib-page-main[data-component="assessment-guide"] .flow-head .label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: var(--amber-deep);
    text-transform: uppercase;
}
.crrem-lib-page-main[data-component="assessment-guide"] .flow-head h3 {
    font-family: 'Lexend Deca', sans-serif;
    font-weight: 600;
    font-size: 22px;
    color: var(--evergreen);
    letter-spacing: -0.01em;
    line-height: 1.2;
}
.crrem-lib-page-main[data-component="assessment-guide"] .flow-head .count {
    margin-left: auto;
    font-size: 12px;
    color: var(--slate-60);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: #fff;
    border-radius: 999px;
}

/* Step flow — horizontal */
.crrem-lib-page-main[data-component="assessment-guide"] .flow-steps {
    display: grid;
    gap: 8px;
    position: relative;
}
.crrem-lib-page-main[data-component="assessment-guide"] .flow-steps.six { grid-template-columns: repeat(6, 1fr); }
.crrem-lib-page-main[data-component="assessment-guide"] .flow-steps.four { grid-template-columns: repeat(4, 1fr); }

.crrem-lib-page-main[data-component="assessment-guide"] .step {
    background: #fff;
    border: 1px solid var(--hair);
    border-radius: 10px;
    padding: 14px 12px 14px 14px;
    position: relative;
    transition: all 0.2s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    min-height: 135px;
}
.crrem-lib-page-main[data-component="assessment-guide"] .step:hover {
    border-color: var(--arctic);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(23, 74, 59, 0.08);
}
.crrem-lib-page-main[data-component="assessment-guide"] .step.active {
    background: var(--band-warm);
    border-color: var(--hair-warm);
}
.crrem-lib-page-main[data-component="assessment-guide"] .step .step-num {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--amber-deep);
    margin-bottom: 6px;
}
.crrem-lib-page-main[data-component="assessment-guide"] .step h4 {
    font-family: 'Lexend Deca', sans-serif;
    font-weight: 600;
    font-size: 13.5px;
    color: var(--evergreen);
    margin-bottom: 8px;
    line-height: 1.25;
    letter-spacing: -0.005em;
}
.crrem-lib-page-main[data-component="assessment-guide"] .step .step-desc {
    font-size: 11.5px;
    color: var(--slate);
    line-height: 1.45;
    opacity: 0.8;
    flex: 1;
}
.crrem-lib-page-main[data-component="assessment-guide"] .step .step-io {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed rgba(33, 51, 56, 0.1);
    font-size: 10px;
    color: var(--slate-60);
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.crrem-lib-page-main[data-component="assessment-guide"] .step .step-io .chip {
    background: rgba(47, 111, 133, 0.08);
    color: var(--arctic);
    padding: 1px 6px;
    border-radius: 3px;
    font-weight: 500;
}

/* Connector arrows */
.crrem-lib-page-main[data-component="assessment-guide"] .flow-steps .step + .step::before {
    content: '';
    position: absolute;
    left: -7px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 1.5px;
    background: rgba(47, 111, 133, 0.35);
    z-index: 2;
    pointer-events: none;
}
.crrem-lib-page-main[data-component="assessment-guide"] .flow-steps .step + .step::after {
    content: '';
    position: absolute;
    left: -2px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid rgba(47, 111, 133, 0.55);
    border-top: 3.5px solid transparent;
    border-bottom: 3.5px solid transparent;
    z-index: 3;
    pointer-events: none;
}

/* Bridge between asset-level and portfolio-level */
.crrem-lib-page-main[data-component="assessment-guide"] .flow-bridge {
    margin: 8px auto;
    padding: 10px 18px;
    text-align: center;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--arctic);
    background: #fff;
    border: 1px dashed rgba(47, 111, 133, 0.3);
    border-radius: 8px;
    max-width: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.crrem-lib-page-main[data-component="assessment-guide"] .flow-bridge .material-symbols-rounded { font-size: 16px; color: var(--arctic); }

/* Directory */
.crrem-lib-page-main[data-component="assessment-guide"] .directory {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 48px;
}
.crrem-lib-page-main[data-component="assessment-guide"] .dir-aside h3 {
    font-family: 'Lexend Deca', sans-serif;
    font-weight: 600;
    font-size: 20px;
    color: var(--evergreen);
    margin-bottom: 10px;
    letter-spacing: -0.01em;
    line-height: 1.2;
}
.crrem-lib-page-main[data-component="assessment-guide"] .dir-aside p {
    font-size: 13px;
    color: var(--slate);
    line-height: 1.55;
    opacity: 0.85;
    margin-bottom: 20px;
}
.crrem-lib-page-main[data-component="assessment-guide"] .dir-aside .dir-quick {
    background: #fff;
    border: 1px solid var(--hair);
    border-radius: 10px;
    padding: 14px 16px;
}
.crrem-lib-page-main[data-component="assessment-guide"] .dir-aside .dir-quick .row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 12px;
}
.crrem-lib-page-main[data-component="assessment-guide"] .dir-aside .dir-quick .row:not(:last-child) {
    border-bottom: 1px dashed rgba(33, 51, 56, 0.1);
}
.crrem-lib-page-main[data-component="assessment-guide"] .dir-aside .dir-quick .k { color: var(--slate-60); }
.crrem-lib-page-main[data-component="assessment-guide"] .dir-aside .dir-quick .v { color: var(--evergreen); font-weight: 500; }

.crrem-lib-page-main[data-component="assessment-guide"] .dir-body { display: flex; flex-direction: column; gap: 22px; }
.crrem-lib-page-main[data-component="assessment-guide"] .dir-group {
    background: #fff;
    border: 1px solid var(--hair);
    border-radius: 12px;
    overflow: hidden;
}
.crrem-lib-page-main[data-component="assessment-guide"] .dir-group-head {
    padding: 16px 22px;
    background: var(--band-off);
    border-bottom: 1px solid var(--hair);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.crrem-lib-page-main[data-component="assessment-guide"] .dir-group-head .t {
    font-family: 'Lexend Deca', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: var(--evergreen);
    letter-spacing: 0.01em;
}
.crrem-lib-page-main[data-component="assessment-guide"] .dir-group-head .n { font-size: 11px; color: var(--slate-60); }
.crrem-lib-page-main[data-component="assessment-guide"] .dir-group ol { list-style: none; }
.crrem-lib-page-main[data-component="assessment-guide"] .dir-group li {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 14px 22px;
    transition: background 0.15s;
    border-bottom: 1px solid rgba(33, 51, 56, 0.04);
    cursor: pointer;
}
.crrem-lib-page-main[data-component="assessment-guide"] .dir-group li:hover { background: var(--band-off); }
.crrem-lib-page-main[data-component="assessment-guide"] .dir-group li:last-child { border-bottom: none; }
.crrem-lib-page-main[data-component="assessment-guide"] .dir-group li .num {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 13px;
    color: var(--amber-deep);
    font-weight: 600;
    letter-spacing: 0.02em;
}
.crrem-lib-page-main[data-component="assessment-guide"] .dir-group li .text .title {
    font-size: 14.5px;
    font-weight: 500;
    color: var(--slate);
    margin-bottom: 2px;
}
.crrem-lib-page-main[data-component="assessment-guide"] .dir-group li .text .desc {
    font-size: 12px;
    color: var(--slate-60);
    line-height: 1.5;
}
.crrem-lib-page-main[data-component="assessment-guide"] .dir-group li .anchor {
    font-size: 11px;
    color: var(--arctic);
    font-family: 'Lexend Deca', sans-serif;
    opacity: 0;
    transition: opacity 0.15s;
}
.crrem-lib-page-main[data-component="assessment-guide"] .dir-group li:hover .anchor { opacity: 1; }

/* Audience */
.crrem-lib-page-main[data-component="assessment-guide"] .audience-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.crrem-lib-page-main[data-component="assessment-guide"] .aud-card {
    background: #fff;
    border: 1px solid var(--hair);
    border-radius: 12px;
    padding: 26px 26px 22px;
}
.crrem-lib-page-main[data-component="assessment-guide"] .aud-card .icon {
    width: 40px;
    height: 40px;
    background: var(--band-warm);
    color: var(--evergreen);
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}
.crrem-lib-page-main[data-component="assessment-guide"] .aud-card .icon .material-symbols-rounded { font-size: 22px; }
.crrem-lib-page-main[data-component="assessment-guide"] .aud-card h4 {
    font-family: 'Lexend Deca', sans-serif;
    font-weight: 600;
    font-size: 17px;
    color: var(--evergreen);
    margin-bottom: 8px;
}
.crrem-lib-page-main[data-component="assessment-guide"] .aud-card p {
    font-size: 13px;
    color: var(--slate);
    line-height: 1.6;
    margin-bottom: 12px;
    opacity: 0.85;
}
.crrem-lib-page-main[data-component="assessment-guide"] .aud-card ul {
    list-style: none;
    font-size: 12px;
    color: var(--slate-60);
}
.crrem-lib-page-main[data-component="assessment-guide"] .aud-card ul li {
    padding: 3px 0 3px 14px;
    position: relative;
}
.crrem-lib-page-main[data-component="assessment-guide"] .aud-card ul li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--arctic);
    font-size: 10px;
    top: 5px;
}

/* Under review */
.crrem-lib-page-main[data-component="assessment-guide"] .review-sec { background: #fff; }
.crrem-lib-page-main[data-component="assessment-guide"] .review-wrap {
    background: linear-gradient(135deg, rgba(214, 162, 74, 0.08), rgba(214, 162, 74, 0.04));
    border: 1px solid rgba(214, 162, 74, 0.3);
    border-radius: 14px;
    padding: 28px 32px;
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 36px;
    align-items: center;
}
.crrem-lib-page-main[data-component="assessment-guide"] .review-left .badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: var(--amber);
    color: #fff;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 14px;
}
.crrem-lib-page-main[data-component="assessment-guide"] .review-left h3 {
    font-family: 'Lexend Deca', sans-serif;
    font-weight: 600;
    font-size: 22px;
    color: var(--evergreen);
    margin-bottom: 10px;
    line-height: 1.2;
}
.crrem-lib-page-main[data-component="assessment-guide"] .review-left p {
    font-size: 13.5px;
    color: var(--slate);
    line-height: 1.6;
    opacity: 0.9;
}
.crrem-lib-page-main[data-component="assessment-guide"] .review-items { display: flex; flex-direction: column; gap: 10px; }
.crrem-lib-page-main[data-component="assessment-guide"] .review-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 12px 16px;
    background: #fff;
    border-radius: 8px;
    border-left: 3px solid var(--amber);
    color: inherit;
    text-decoration: none;
    transition: border-left-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.crrem-lib-page-main[data-component="assessment-guide"] a.review-item:hover {
    border-left-color: var(--amber-deep);
    box-shadow: 0 2px 10px rgba(214, 162, 74, 0.15);
    transform: translateX(2px);
}
.crrem-lib-page-main[data-component="assessment-guide"] a.review-item:hover .more {
    color: var(--evergreen);
}
.crrem-lib-page-main[data-component="assessment-guide"] a.review-item:focus-visible {
    outline: 2px solid var(--arctic);
    outline-offset: 2px;
}
.crrem-lib-page-main[data-component="assessment-guide"] .review-item .step-ref {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 11px;
    color: var(--amber-deep);
    font-weight: 600;
    letter-spacing: 0.05em;
}
.crrem-lib-page-main[data-component="assessment-guide"] .review-item .txt { font-size: 12.5px; color: var(--slate); }
.crrem-lib-page-main[data-component="assessment-guide"] .review-item .more { font-size: 11px; color: var(--arctic); font-weight: 500; }

/* Cite & Downloads */
.crrem-lib-page-main[data-component="assessment-guide"] .cite-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    align-items: start;
}
.crrem-lib-page-main[data-component="assessment-guide"] .cite-card,
.crrem-lib-page-main[data-component="assessment-guide"] .down-card {
    background: #fff;
    border: 1px solid var(--hair);
    border-radius: 12px;
    padding: 26px 28px;
}
.crrem-lib-page-main[data-component="assessment-guide"] .cite-card .k,
.crrem-lib-page-main[data-component="assessment-guide"] .down-card .k {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--arctic);
    text-transform: uppercase;
    margin-bottom: 8px;
}
.crrem-lib-page-main[data-component="assessment-guide"] .cite-card h4,
.crrem-lib-page-main[data-component="assessment-guide"] .down-card h4 {
    font-family: 'Lexend Deca', sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: var(--evergreen);
    margin-bottom: 14px;
}
.crrem-lib-page-main[data-component="assessment-guide"] .cite-block {
    background: var(--band-off);
    border-radius: 8px;
    padding: 14px 16px;
    font-family: 'Lexend Deca', sans-serif;
    font-size: 12px;
    line-height: 1.55;
    color: var(--slate);
    margin-bottom: 10px;
    white-space: nowrap;
    overflow-x: auto;
}
.crrem-lib-page-main[data-component="assessment-guide"] .cite-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.crrem-lib-page-main[data-component="assessment-guide"] .cite-actions .action {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: 'Lexend Deca', sans-serif;
    font-size: 11.5px;
    color: var(--slate-60);
    padding: 5px 11px;
    background: var(--band-off);
    border: 1px solid transparent !important;
    border-radius: 999px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    box-shadow: none !important;
    text-shadow: none !important;
    outline: none;
    transition: all 0.15s;
}
.crrem-lib-page-main[data-component="assessment-guide"] .cite-actions .action:hover {
    color: var(--evergreen);
    background: var(--band-warm);
}
.crrem-lib-page-main[data-component="assessment-guide"] .cite-actions .action .material-symbols-rounded { font-size: 12px; }
.crrem-lib-page-main[data-component="assessment-guide"] .down-list { display: flex; flex-direction: column; gap: 8px; }
.crrem-lib-page-main[data-component="assessment-guide"] .down-row {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 10px 14px;
    background: var(--band-off);
    border-radius: 8px;
    transition: all 0.15s;
    cursor: pointer;
    color: inherit;
    text-decoration: none;
}
.crrem-lib-page-main[data-component="assessment-guide"] .down-row:hover { background: var(--band-warm); }
.crrem-lib-page-main[data-component="assessment-guide"] .down-row:hover .dtype { background: #fff; color: var(--amber-deep); }
.crrem-lib-page-main[data-component="assessment-guide"] .down-row:focus-visible {
    outline: 2px solid var(--arctic);
    outline-offset: 2px;
}
.crrem-lib-page-main[data-component="assessment-guide"] .down-row .dtype {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: #fff;
    border-radius: 6px;
    color: var(--evergreen);
}
.crrem-lib-page-main[data-component="assessment-guide"] .down-row .dtype .material-symbols-rounded { font-size: 18px; }
.crrem-lib-page-main[data-component="assessment-guide"] .down-row .dm .dt { font-size: 13px; color: var(--evergreen); font-weight: 500; }
.crrem-lib-page-main[data-component="assessment-guide"] .down-row .dm .dd { font-size: 11px; color: var(--slate-60); }
.crrem-lib-page-main[data-component="assessment-guide"] .down-row .dsize {
    font-size: 11px;
    color: var(--slate-60);
    font-family: 'Lexend Deca', sans-serif;
}

/* ========== ZONE 3 — Pathways & Datasets ========== */
/* Explorer */
.crrem-lib-page-main[data-component="pathways-datasets"] .explorer {
    background: #fff;
    border: 1px solid var(--hair);
    border-radius: 16px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 280px 1fr;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .explorer-controls {
    background: var(--band-off);
    padding: 22px 20px;
    border-right: 1px solid var(--hair);
}
.crrem-lib-page-main[data-component="pathways-datasets"] .explorer-controls .ctrl-label {
    display: block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--arctic);
    text-transform: uppercase;
    margin-bottom: 5px;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .explorer-controls .ctrl-group + .ctrl-group { margin-top: 14px; }
.crrem-lib-page-main[data-component="pathways-datasets"] .select-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: #fff;
    border: 1px solid rgba(33, 51, 56, 0.14);
    border-radius: 6px;
    font-size: 13px;
    color: var(--slate);
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .select-box:hover {
    border-color: var(--evergreen);
    box-shadow: 0 1px 2px rgba(23, 74, 59, 0.06);
}
.crrem-lib-page-main[data-component="pathways-datasets"] .select-box .val { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 auto; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.crrem-lib-page-main[data-component="pathways-datasets"] .select-box .val .flag {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 16px;
    padding: 0 4px;
    background: rgba(23, 74, 59, 0.07);
    color: var(--evergreen);
    border-radius: 3px;
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .select-box .material-symbols-rounded { font-size: 16px; color: var(--slate-60); flex: 0 0 auto; }
.crrem-lib-page-main[data-component="pathways-datasets"] .explorer-meta {
    margin-top: 22px;
    padding: 14px 12px 4px;
    border-top: 1px solid var(--hair);
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 11.5px;
    color: var(--slate-60);
}
.crrem-lib-page-main[data-component="pathways-datasets"] .explorer-meta .row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 3px 0;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .explorer-meta .row + .row { border-top: 1px dashed rgba(33, 51, 56, 0.06); }
.crrem-lib-page-main[data-component="pathways-datasets"] .explorer-meta .row > span:first-child {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 10px;
    font-weight: 500;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .explorer-meta .row .v {
    color: var(--evergreen);
    font-weight: 600;
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    text-align: right;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .explorer-download {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .explorer-download .dl-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid var(--hair);
    border-radius: 8px;
    font-size: 12.5px;
    color: var(--slate);
    cursor: pointer;
    transition: all 0.15s;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .explorer-download .dl-btn.primary {
    background: var(--evergreen);
    border-color: var(--evergreen);
    color: #fff;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .explorer-download .dl-btn.primary:hover {
    background: #0E2A22;
    transform: translateY(-1px);
}
.crrem-lib-page-main[data-component="pathways-datasets"] .explorer-download .dl-btn:hover { border-color: var(--arctic); }
.crrem-lib-page-main[data-component="pathways-datasets"] .explorer-download .dl-btn .left { display: flex; align-items: center; gap: 8px; }
.crrem-lib-page-main[data-component="pathways-datasets"] .explorer-download .dl-btn .material-symbols-rounded { font-size: 16px; }
.crrem-lib-page-main[data-component="pathways-datasets"] .explorer-download .dl-btn .size {
    font-size: 10.5px;
    color: var(--slate-60);
    font-family: 'Lexend Deca', sans-serif;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .explorer-download .dl-btn.primary .size { color: rgba(255, 255, 255, 0.65); }

/* F-gas variant — elevated sibling to the primary download */
.crrem-lib-page-main[data-component="pathways-datasets"] .explorer-download .dl-btn.fgas {
    align-items: flex-start;
    background: rgba(47, 111, 133, 0.06);
    border-color: rgba(47, 111, 133, 0.35);
    padding: 12px 14px;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .explorer-download .dl-btn.fgas:hover {
    border-color: var(--arctic);
    background: rgba(47, 111, 133, 0.10);
    transform: translateY(-1px);
}
.crrem-lib-page-main[data-component="pathways-datasets"] .explorer-download .dl-btn.fgas .left {
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .explorer-download .dl-btn.fgas .material-symbols-rounded {
    font-size: 20px;
    color: var(--arctic);
}
.crrem-lib-page-main[data-component="pathways-datasets"] .explorer-download .dl-btn.fgas .dl-btn-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    line-height: 1.3;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .explorer-download .dl-btn.fgas .dl-btn-title {
    font-weight: 500;
    color: var(--evergreen);
}
.crrem-lib-page-main[data-component="pathways-datasets"] .explorer-download .dl-btn.fgas .dl-btn-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .explorer-download .dl-btn.fgas .dl-btn-sub {
    font-size: 11px;
    color: var(--slate-60);
}
.crrem-lib-page-main[data-component="pathways-datasets"] .explorer-download .dl-btn.fgas .size { white-space: nowrap; }
.crrem-lib-page-main[data-component="pathways-datasets"] .explorer-download .dl-pill {
    flex: none;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--arctic);
    background: rgba(47, 111, 133, 0.12);
    border: 1px solid rgba(47, 111, 133, 0.30);
    border-radius: 999px;
    padding: 2px 6px;
    line-height: 1.5;
}

/* Full bundle — demoted to a quiet tertiary link */
.crrem-lib-page-main[data-component="pathways-datasets"] .explorer-download .dl-btn.subtle {
    background: transparent;
    border-color: transparent;
    padding: 6px 14px;
    color: var(--slate-60);
}
.crrem-lib-page-main[data-component="pathways-datasets"] .explorer-download .dl-btn.subtle:hover {
    border-color: transparent;
    background: transparent;
    color: var(--arctic);
}
.crrem-lib-page-main[data-component="pathways-datasets"] .explorer-download .dl-btn.subtle .material-symbols-rounded { font-size: 15px; }
.crrem-lib-page-main[data-component="pathways-datasets"] .explorer-chart { padding: 32px 36px; position: relative; }
.crrem-lib-page-main[data-component="pathways-datasets"] .explorer-chart-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 22px;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .explorer-chart-head .title {
    font-family: 'Lexend Deca', sans-serif;
    font-weight: 600;
    font-size: 17px;
    color: var(--evergreen);
    line-height: 1.2;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .explorer-chart-head .subtitle { font-size: 11.5px; color: var(--slate-60); margin-top: 3px; }
.crrem-lib-page-main[data-component="pathways-datasets"] .explorer-chart-head .live {
    font-size: 10px;
    color: var(--fern);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .explorer-chart-head .live .dot {
    width: 6px;
    height: 6px;
    background: var(--fern);
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(71, 114, 98, 0.2);
}
.crrem-lib-page-main[data-component="pathways-datasets"] .big-chart { width: 100%; height: 420px; }
.crrem-lib-page-main[data-component="pathways-datasets"] .big-chart .gridline { stroke: rgba(33, 51, 56, 0.06); stroke-width: 1; }
.crrem-lib-page-main[data-component="pathways-datasets"] .big-chart .axis { stroke: rgba(33, 51, 56, 0.2); stroke-width: 1; }
.crrem-lib-page-main[data-component="pathways-datasets"] .big-chart .pathway-fill { fill: rgba(23, 74, 59, 0.06); }
.crrem-lib-page-main[data-component="pathways-datasets"] .big-chart .pathway-line,
.crrem-lib-page-main[data-component="pathways-datasets"] .crrem-explorer-chart .pathway-line { stroke: var(--evergreen); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 4px rgba(23, 74, 59, 0.7)) drop-shadow(0 0 12px rgba(23, 74, 59, 0.45)) drop-shadow(0 0 28px rgba(23, 74, 59, 0.25)) drop-shadow(0 0 56px rgba(23, 74, 59, 0.12)); }
.crrem-lib-page-main[data-component="pathways-datasets"] .big-chart .pathway-dot { fill: var(--evergreen); }
.crrem-lib-page-main[data-component="pathways-datasets"] .big-chart .pathway-dot.current { fill: var(--amber); }
.crrem-lib-page-main[data-component="pathways-datasets"] .big-chart .pathway-dot.current-halo { fill: rgba(214, 162, 74, 0.2); }
.crrem-lib-page-main[data-component="pathways-datasets"] .big-chart .year-label { font-family: 'Lexend Deca', sans-serif; font-size: 11px; fill: var(--slate-60); }
.crrem-lib-page-main[data-component="pathways-datasets"] .big-chart .year-label.current { fill: var(--amber-deep); font-weight: 600; }
.crrem-lib-page-main[data-component="pathways-datasets"] .big-chart .y-tick { font-family: 'Lexend Deca', sans-serif; font-size: 10px; fill: var(--slate-60); }
.crrem-lib-page-main[data-component="pathways-datasets"] .big-chart .axis-label {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 10px;
    fill: var(--slate-60);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .chart-footnote {
    margin-top: 18px;
    font-size: 11px;
    color: var(--slate-60);
    display: flex;
    justify-content: space-between;
    padding-top: 12px;
    border-top: 1px dashed var(--hair);
}
.crrem-lib-page-main[data-component="pathways-datasets"] .chart-footnote .legend { display: flex; gap: 16px; }
.crrem-lib-page-main[data-component="pathways-datasets"] .chart-footnote .legend-item { display: flex; align-items: center; gap: 6px; }
.crrem-lib-page-main[data-component="pathways-datasets"] .chart-footnote .legend-swatch { width: 10px; height: 2px; background: var(--evergreen); }
.crrem-lib-page-main[data-component="pathways-datasets"] .chart-footnote .legend-swatch.amber { background: var(--amber); }

/* "Where these datasets are used" — footer cross-reference index, grouped by
   destination component. Editorial three-column layout with vertical hairlines
   and per-component accent dots (amber / arctic / fern). Each entry pairs a
   monospace ref pill with a Lexend title and a hover-revealed arrow.
   ----------------------------------------------------------------- */
.crrem-lib-page-main[data-component="pathways-datasets"] .where-used {
    margin-top: 48px;
    padding-top: 28px;
    border-top: 1px solid var(--hair);
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .where-used__heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    row-gap: 4px;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .where-used__label {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--evergreen);
}
.crrem-lib-page-main[data-component="pathways-datasets"] .where-used__hint {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 12.5px;
    color: var(--slate-60);
    font-style: italic;
    letter-spacing: -0.005em;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .where-used__columns {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .where-used__col {
    padding: 0 28px;
    border-left: 1px solid var(--hair);
    min-width: 0;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .where-used__col:first-child {
    padding-left: 0;
    border-left: none;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .where-used__col:last-child {
    padding-right: 0;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .where-used__col-h {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 14px;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .where-used__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .where-used__col[data-source="assessment-guide"] .where-used__dot {
    background: var(--amber-deep);
    box-shadow: 0 0 0 3px rgba(214, 162, 74, 0.18);
}
.crrem-lib-page-main[data-component="pathways-datasets"] .where-used__col[data-source="technical-blueprint"] .where-used__dot {
    background: var(--arctic);
    box-shadow: 0 0 0 3px rgba(102, 153, 171, 0.18);
}
.crrem-lib-page-main[data-component="pathways-datasets"] .where-used__col[data-source="worked-examples"] .where-used__dot {
    background: var(--fern, #4A7C59);
    box-shadow: 0 0 0 3px rgba(74, 124, 89, 0.18);
}
.crrem-lib-page-main[data-component="pathways-datasets"] .where-used__col-name {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--evergreen);
    letter-spacing: -0.005em;
    flex: 1;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .where-used__col-count {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    font-weight: 500;
    color: var(--slate-60);
    letter-spacing: 0.06em;
    line-height: 1;
    padding: 3px 6px;
    background: rgba(33, 51, 56, 0.05);
    border-radius: 3px;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .where-used__col-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .where-used__col-list li {
    margin: 0;
    line-height: 1;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .where-used__col-list a {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 11px;
    padding: 9px 10px 9px 8px;
    margin: 0 -10px 0 -8px;
    border-radius: 5px;
    text-decoration: none;
    color: inherit;
    transition: background-color 0.15s ease;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .where-used__col-list a:hover,
.crrem-lib-page-main[data-component="pathways-datasets"] .where-used__col-list a:focus-visible {
    background: rgba(23, 74, 59, 0.04);
    outline: none;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .where-used__ref {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--amber-deep);
    background: transparent;
    border: 1px solid var(--hair-warm);
    border-radius: 3px;
    padding: 3px 6px;
    line-height: 1;
    text-align: center;
    min-width: 28px;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .where-used__ref--alt {
    color: var(--slate-60);
    font-size: 13px;
    letter-spacing: 0;
    padding: 1px 6px;
    border-style: dashed;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .where-used__title {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 13.5px;
    color: var(--evergreen);
    line-height: 1.4;
    letter-spacing: -0.005em;
    min-width: 0;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .where-used__chev {
    font-size: 16px;
    color: var(--slate-60);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease, color 0.15s ease;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .where-used__col-list a:hover .where-used__chev,
.crrem-lib-page-main[data-component="pathways-datasets"] .where-used__col-list a:focus-visible .where-used__chev {
    opacity: 1;
    transform: translateX(0);
    color: var(--evergreen);
}
.crrem-lib-page-main[data-component="pathways-datasets"] .where-used__col-list a:hover .where-used__title {
    color: var(--evergreen);
}

@media (max-width: 880px) {
    .crrem-lib-page-main[data-component="pathways-datasets"] .where-used__columns {
        grid-template-columns: 1fr;
    }
    .crrem-lib-page-main[data-component="pathways-datasets"] .where-used__col {
        padding: 18px 0;
        border-left: none;
        border-top: 1px solid var(--hair);
    }
    .crrem-lib-page-main[data-component="pathways-datasets"] .where-used__col:first-child {
        padding-top: 4px;
        border-top: none;
    }
    .crrem-lib-page-main[data-component="pathways-datasets"] .where-used__col:last-child {
        padding-bottom: 0;
    }
}

.crrem-lib-page-main[data-component="pathways-datasets"] .data-preview {
    margin-top: 20px;
    background: var(--band-off);
    border-radius: 10px;
    padding: 16px 20px;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .data-preview-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 10px;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .data-preview-title {
    font-family: 'Lexend Deca', sans-serif;
    font-weight: 600;
    font-size: 11.5px;
    color: var(--evergreen);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .data-preview-meta {
    font-size: 10.5px;
    color: var(--slate-60);
    font-family: 'Lexend Deca', sans-serif;
    letter-spacing: 0.04em;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .data-preview-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Lexend Deca', sans-serif;
    font-size: 12px;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .data-preview-table th,
.crrem-lib-page-main[data-component="pathways-datasets"] .data-preview-table td {
    padding: 8px 6px;
    text-align: right;
    border-bottom: 1px solid var(--hair);
}
.crrem-lib-page-main[data-component="pathways-datasets"] .data-preview-table thead th {
    font-weight: 500;
    color: var(--slate-60);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .data-preview-table thead th:first-child,
.crrem-lib-page-main[data-component="pathways-datasets"] .data-preview-table tbody td:first-child.row-label {
    text-align: left;
    color: var(--slate-60);
    font-family: 'Lexend Deca', sans-serif;
    font-size: 11px;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .data-preview-table tbody td { color: var(--evergreen); font-weight: 500; }
.crrem-lib-page-main[data-component="pathways-datasets"] .data-preview-table .current-col {
    background: rgba(214, 162, 74, 0.1);
    color: var(--amber-deep) !important;
    font-weight: 600;
}

/* Dataset catalog */
.crrem-lib-page-main[data-component="pathways-datasets"] .catalog { display: flex; flex-direction: column; gap: 18px; }
.crrem-lib-page-main[data-component="pathways-datasets"] .dataset {
    background: #fff;
    border: 1px solid var(--hair);
    border-radius: 14px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .dataset-body { padding: 28px 32px; }
.crrem-lib-page-main[data-component="pathways-datasets"] .dataset-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .dataset-head .icon {
    width: 40px;
    height: 40px;
    background: var(--band-warm);
    color: var(--evergreen);
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .dataset-head .icon .material-symbols-rounded { font-size: 22px; }
.crrem-lib-page-main[data-component="pathways-datasets"] .dataset-head .version {
    font-size: 11px;
    color: var(--arctic);
    font-family: 'Lexend Deca', sans-serif;
    padding: 3px 10px;
    background: rgba(47, 111, 133, 0.08);
    border-radius: 999px;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .dataset h3 {
    font-family: 'Lexend Deca', sans-serif;
    font-weight: 600;
    font-size: 20px;
    color: var(--evergreen);
    letter-spacing: -0.01em;
    margin-bottom: 8px;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .dataset p {
    font-size: 13.5px;
    color: var(--slate);
    line-height: 1.6;
    margin-bottom: 18px;
    opacity: 0.88;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .dataset .dataset-note {
    margin-top: -8px;
    margin-bottom: 18px;
    padding: 10px 14px;
    background: rgba(214, 162, 74, 0.08);
    border-left: 3px solid var(--amber, #D6A24A);
    border-radius: 0 6px 6px 0;
    font-size: 12.5px;
    color: var(--slate-60, #66707A);
    line-height: 1.55;
    opacity: 1;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .sec.is-draft {
    position: relative;
    outline: 2px dashed rgba(214, 162, 74, 0.55);
    outline-offset: -8px;
    border-radius: 8px;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .sec.is-draft::before {
    content: "Draft — visible to editors only";
    position: absolute;
    top: 8px;
    right: 12px;
    z-index: 2;
    background: var(--amber, #D6A24A);
    color: #1f1a10;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .dataset .facets {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 16px;
    padding-top: 14px;
    border-top: 1px solid var(--hair);
}
.crrem-lib-page-main[data-component="pathways-datasets"] .dataset .facet .k {
    font-size: 10px;
    color: var(--slate-60);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 3px;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .dataset .facet .v {
    font-size: 12.5px;
    color: var(--evergreen);
    font-weight: 500;
    font-family: 'Lexend Deca', sans-serif;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .dataset-aside {
    background: var(--band-off);
    padding: 28px 32px;
    border-left: 1px solid var(--hair);
    display: flex;
    flex-direction: column;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .dataset-aside .label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--slate-60);
    text-transform: uppercase;
    margin-bottom: 10px;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .dataset-aside .formats { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.crrem-lib-page-main[data-component="pathways-datasets"] .dataset-aside .format-row {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 8px 12px;
    background: #fff;
    border: 1px solid var(--hair);
    border-radius: 8px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .dataset-aside .format-row:hover {
    border-color: var(--arctic);
    transform: translateY(-1px);
}
.crrem-lib-page-main[data-component="pathways-datasets"] .dataset-aside .format-row .fmt {
    width: 32px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--band-off);
    border-radius: 5px;
    font-family: 'Lexend Deca', sans-serif;
    font-size: 10px;
    font-weight: 600;
    color: var(--evergreen);
    letter-spacing: 0.04em;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .dataset-aside .format-row .desc { color: var(--slate); }
.crrem-lib-page-main[data-component="pathways-datasets"] .dataset-aside .format-row .size {
    color: var(--slate-60);
    font-size: 11px;
    font-family: 'Lexend Deca', sans-serif;
}
/* Legacy preview-link button — markup removed in favor of always-visible
   schema panel. Kept for back-compat in case the JS attaches elsewhere. */
.crrem-lib-page-main[data-component="pathways-datasets"] .dataset-aside .preview-link { display: none; }

/* Always-visible schema panel — fills the right rail with a compact data
   dictionary so it doesn't bottom out below a single download row. */
.crrem-lib-page-main[data-component="pathways-datasets"] .dataset-aside .ds-schema {
    margin-top: 16px;
    padding-top: 18px;
    border-top: 1px dashed var(--hair);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .dataset-aside .ds-schema__label {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--slate-60);
}
.crrem-lib-page-main[data-component="pathways-datasets"] .dataset-aside .schema-preview {
    background: #fff;
    border: 1px solid var(--hair);
    border-radius: 8px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .dataset-aside .schema-preview strong {
    display: block;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 9.5px;
    font-weight: 600;
    color: var(--amber-deep);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-bottom: 4px;
    line-height: 1.2;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .dataset-aside .schema-preview br { display: none; }
.crrem-lib-page-main[data-component="pathways-datasets"] .dataset-aside .schema-preview > strong + br { display: none; }
.crrem-lib-page-main[data-component="pathways-datasets"] .dataset-aside .schema-preview {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11.25px;
    line-height: 1.55;
    color: var(--slate);
    word-break: break-word;
    overflow-wrap: break-word;
}

/* API reference */
.crrem-lib-page-main[data-component="pathways-datasets"] .api-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .api-left h3 {
    font-family: 'Lexend Deca', sans-serif;
    font-weight: 600;
    font-size: 22px;
    color: var(--evergreen);
    margin-bottom: 12px;
    line-height: 1.2;
    letter-spacing: -0.01em;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .api-left p {
    font-size: 14px;
    color: var(--slate);
    line-height: 1.65;
    margin-bottom: 16px;
    opacity: 0.88;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .api-left .endpoint-list { display: flex; flex-direction: column; gap: 8px; }
.crrem-lib-page-main[data-component="pathways-datasets"] .api-left .ep {
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 12px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid var(--hair);
    border-radius: 8px;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .api-left .ep .method {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 10px;
    font-weight: 600;
    color: var(--evergreen);
    background: rgba(23, 74, 59, 0.08);
    padding: 3px 6px;
    border-radius: 4px;
    text-align: center;
    letter-spacing: 0.05em;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .api-left .ep .path {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-feature-settings: 'calt' 0, 'liga' 0;
    font-size: 12.5px;
    color: var(--slate);
    align-self: center;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .api-left .ep .path .param { color: var(--arctic); }
.crrem-lib-page-main[data-component="pathways-datasets"] .api-left .inline-code,
.crrem-lib-page-main[data-component="pathways-datasets"] code.inline-code {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-feature-settings: 'calt' 0, 'liga' 0;
    font-size: 0.92em;
    color: var(--evergreen);
    background: rgba(23, 74, 59, 0.06);
    padding: 1px 6px;
    border-radius: 4px;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .api-left .ep .desc { grid-column: 2; font-size: 11.5px; color: var(--slate-60); margin-top: 4px; }
.crrem-lib-page-main[data-component="pathways-datasets"] .api-right .code-block {
    background: #14302A;
    color: rgba(255, 255, 255, 0.9);
    border-radius: 12px;
    overflow: hidden;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .code-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 18px;
    background: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-feature-settings: 'calt' 0, 'liga' 0;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 0.02em;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .code-head .tabs { display: flex; gap: 12px; }
.crrem-lib-page-main[data-component="pathways-datasets"] .code-head .tab { color: rgba(255, 255, 255, 0.4); cursor: pointer; }
.crrem-lib-page-main[data-component="pathways-datasets"] .code-head .tab.active { color: var(--amber); }
.crrem-lib-page-main[data-component="pathways-datasets"] .code-head .copy { cursor: pointer; display: flex; align-items: center; gap: 4px; }
.crrem-lib-page-main[data-component="pathways-datasets"] .code-head .copy .material-symbols-rounded { font-size: 12px; }
.crrem-lib-page-main[data-component="pathways-datasets"] .code-body {
    padding: 20px 22px;
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-feature-settings: 'calt' 0, 'liga' 0;
    font-size: 12.5px;
    line-height: 1.75;
    overflow-x: auto;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .code-body .cmt { color: rgba(255, 255, 255, 0.4); }
.crrem-lib-page-main[data-component="pathways-datasets"] .code-body .kw { color: var(--amber); }
.crrem-lib-page-main[data-component="pathways-datasets"] .code-body .str { color: #7FB3C4; }
.crrem-lib-page-main[data-component="pathways-datasets"] .code-body .fn { color: #9DD9B8; }

/* Version history */
.crrem-lib-page-main[data-component="pathways-datasets"] .version-list {
    background: #fff;
    border: 1px solid var(--hair);
    border-radius: 12px;
    overflow: hidden;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .version-row {
    display: grid;
    grid-template-columns: 90px 1fr auto;
    gap: 20px;
    padding: 18px 24px;
    border-bottom: 1px solid var(--hair);
    align-items: start;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .version-row:last-child { border-bottom: none; }
.crrem-lib-page-main[data-component="pathways-datasets"] .version-row.current { background: var(--band-warm); }
.crrem-lib-page-main[data-component="pathways-datasets"] .version-row .v-tag {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 13px;
    color: var(--evergreen);
    font-weight: 600;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .version-row.current .v-tag { color: var(--amber-deep); }
.crrem-lib-page-main[data-component="pathways-datasets"] .version-row .v-body .date {
    font-size: 11px;
    color: var(--slate-60);
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .version-row .v-body .notes { font-size: 13px; color: var(--slate); line-height: 1.55; }
.crrem-lib-page-main[data-component="pathways-datasets"] .version-row .v-body .notes ul { list-style: none; margin-top: 6px; }
.crrem-lib-page-main[data-component="pathways-datasets"] .version-row .v-body .notes ul li {
    padding: 2px 0 2px 14px;
    position: relative;
    font-size: 12.5px;
    color: var(--slate-60);
}
.crrem-lib-page-main[data-component="pathways-datasets"] .version-row .v-body .notes ul li::before {
    content: '·';
    position: absolute;
    left: 0;
    color: var(--arctic);
    top: 1px;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .version-row .v-actions { display: flex; gap: 6px; align-items: center; }
.crrem-lib-page-main[data-component="pathways-datasets"] .version-row .v-actions a {
    font-size: 12px;
    color: var(--slate-60);
    padding: 6px 12px;
    background: var(--band-off);
    border: 1px solid transparent;
    border-radius: 999px;
    text-decoration: none;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .version-row.current .v-actions a { background: #fff; }

/* License & citation */
.crrem-lib-page-main[data-component="pathways-datasets"] .license-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
    gap: 24px;
    align-items: stretch;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .license-card,
.crrem-lib-page-main[data-component="pathways-datasets"] .cite-card {
    background: #fff;
    border: 1px solid var(--hair);
    border-radius: 12px;
    padding: 28px 30px;
    display: flex;
    flex-direction: column;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .license-card .k,
.crrem-lib-page-main[data-component="pathways-datasets"] .cite-card .k {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--arctic);
    text-transform: uppercase;
    margin-bottom: 8px;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .license-card h4,
.crrem-lib-page-main[data-component="pathways-datasets"] .cite-card h4 {
    font-family: 'Lexend Deca', sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: var(--evergreen);
    margin-bottom: 14px;
    letter-spacing: -0.005em;
    line-height: 1.25;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .license-chip {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--band-off);
    border-radius: 8px;
    margin-bottom: 14px;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .chip-tag {
    display: inline-block;
    padding: 5px 11px;
    background: var(--evergreen);
    color: #fff;
    border-radius: 5px;
    font-family: 'Lexend Deca', sans-serif;
    font-weight: 600;
    font-size: 11.5px;
    letter-spacing: 0.04em;
    white-space: nowrap;
    flex-shrink: 0;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .chip-text { font-size: 12px; color: var(--slate-60); line-height: 1.45; }
.crrem-lib-page-main[data-component="pathways-datasets"] .license-card p { font-size: 13px; color: var(--slate); line-height: 1.6; opacity: 0.88; }
.crrem-lib-page-main[data-component="pathways-datasets"] .cite-block {
    background: var(--band-off);
    border-radius: 8px;
    padding: 14px 16px;
    font-family: 'Lexend Deca', sans-serif;
    font-size: 12px;
    line-height: 1.6;
    color: var(--slate);
    margin-bottom: 12px;
    word-break: break-word;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .cite-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.crrem-lib-page-main[data-component="pathways-datasets"] .cite-actions .action {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: 'Lexend Deca', sans-serif;
    font-size: 11.5px;
    color: var(--slate-60);
    padding: 5px 11px;
    background: var(--band-off);
    border: 1px solid transparent !important;
    border-radius: 999px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    box-shadow: none !important;
    text-shadow: none !important;
    outline: none;
    transition: all 0.15s;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .cite-actions .action:hover { color: var(--evergreen); background: var(--band-warm); }
.crrem-lib-page-main[data-component="pathways-datasets"] .cite-actions .action .material-symbols-rounded { font-size: 12px; }
.crrem-lib-page-main[data-component="pathways-datasets"] .cite-links {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--hair);
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .cite-link-row {
    display: grid;
    grid-template-columns: 82px 1fr;
    gap: 12px;
    font-size: 11.5px;
    align-items: baseline;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .cite-link-label {
    color: var(--slate-60);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 10px;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .cite-link-val {
    color: var(--evergreen);
    font-family: 'Lexend Deca', sans-serif;
    font-size: 11.5px;
    word-break: break-all;
}

/* ========== ZONE 3 — Reference Implementations ========== */
/* Note: --excel-blue = #2F6F85 (same as --arctic), --excel-yellow = #D6A24A (same as --amber) */
.crrem-lib-page-main[data-component="reference-implementations"] .color-legend {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    padding: 14px 20px;
    background: var(--band-off);
    border: 1px solid var(--hair);
    border-radius: 10px;
    margin-bottom: 28px;
    font-size: 13px;
    color: var(--slate-60);
}
.crrem-lib-page-main[data-component="reference-implementations"] .color-legend .item { display: inline-flex; align-items: center; gap: 8px; }
.crrem-lib-page-main[data-component="reference-implementations"] .color-legend .swatch { width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--hair); }
.crrem-lib-page-main[data-component="reference-implementations"] .color-legend .swatch.input { background: rgba(47, 111, 133, 0.12); border-color: rgba(47, 111, 133, 0.3); }
.crrem-lib-page-main[data-component="reference-implementations"] .color-legend .swatch.calc { background: #fff; border-color: var(--hair); }
.crrem-lib-page-main[data-component="reference-implementations"] .color-legend .swatch.output { background: rgba(214, 162, 74, 0.2); border-color: rgba(214, 162, 74, 0.5); }
.crrem-lib-page-main[data-component="reference-implementations"] .color-legend .swatch.note { background: rgba(33, 51, 56, 0.05); border-color: var(--hair); }

/* Asset tabs with duotone city images — image paths rewritten to theme-relative URLs */
.crrem-lib-page-main[data-component="reference-implementations"] .asset-tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 28px;
}
.crrem-lib-page-main[data-component="reference-implementations"] .asset-tab {
    position: relative;
    min-height: 220px;
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    isolation: isolate;
}
.crrem-lib-page-main[data-component="reference-implementations"] .tab-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.crrem-lib-page-main[data-component="reference-implementations"] .asset-tab:hover .tab-bg { transform: scale(1.05); }
.crrem-lib-page-main[data-component="reference-implementations"] .tab-wash {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

/* Per-city duotone backgrounds — paths rewritten from /files/ to theme-relative */
.crrem-lib-page-main[data-component="reference-implementations"] .asset-tab.city-nyc { --card-accent: #7BA68A; }
.crrem-lib-page-main[data-component="reference-implementations"] .asset-tab.city-nyc .tab-bg {
    background-image: url('../img/library-cities/duo-nyc.png');
}
.crrem-lib-page-main[data-component="reference-implementations"] .asset-tab.city-nyc .tab-wash {
    background: linear-gradient(180deg, rgba(23, 74, 59, 0) 35%, rgba(23, 74, 59, 0.65) 100%);
}
.crrem-lib-page-main[data-component="reference-implementations"] .asset-tab.city-hk { --card-accent: #2F6F85; }
.crrem-lib-page-main[data-component="reference-implementations"] .asset-tab.city-hk .tab-bg {
    background-image: url('../img/library-cities/duo-hk.png');
}
.crrem-lib-page-main[data-component="reference-implementations"] .asset-tab.city-hk .tab-wash {
    background: linear-gradient(180deg, rgba(47, 111, 133, 0) 35%, rgba(47, 111, 133, 0.6) 100%);
}
.crrem-lib-page-main[data-component="reference-implementations"] .asset-tab.city-lon { --card-accent: #D6A24A; }
.crrem-lib-page-main[data-component="reference-implementations"] .asset-tab.city-lon .tab-bg {
    background-image: url('../img/library-cities/duo-lon.png');
}
.crrem-lib-page-main[data-component="reference-implementations"] .asset-tab.city-lon .tab-wash {
    background: linear-gradient(180deg, rgba(178, 132, 51, 0) 35%, rgba(178, 132, 51, 0.58) 100%);
}
.crrem-lib-page-main[data-component="reference-implementations"] .asset-tab.city-tok { --card-accent: #BC002D; }
.crrem-lib-page-main[data-component="reference-implementations"] .asset-tab.city-tok .tab-bg {
    background-image: url('../img/library-cities/duo-tok.png');
}
.crrem-lib-page-main[data-component="reference-implementations"] .asset-tab.city-tok .tab-wash {
    background: linear-gradient(180deg, rgba(188, 0, 45, 0) 35%, rgba(188, 0, 45, 0.55) 100%);
}

.crrem-lib-page-main[data-component="reference-implementations"] .tab-glass {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: 2;
    padding: 12px 14px 14px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 5px;
    box-shadow:
        0 2px 12px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.crrem-lib-page-main[data-component="reference-implementations"] .asset-tab:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 36px rgba(23, 74, 59, 0.25);
}
.crrem-lib-page-main[data-component="reference-implementations"] .asset-tab.active {
    box-shadow: 0 0 0 2px var(--card-accent, var(--amber)), 0 18px 36px rgba(23, 74, 59, 0.25);
}
.crrem-lib-page-main[data-component="reference-implementations"] .asset-tab.active .tab-glass {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.32);
}
.crrem-lib-page-main[data-component="reference-implementations"] .tab-floatbar {
    position: absolute;
    top: 12px;
    left: 14px;
    right: 14px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
.crrem-lib-page-main[data-component="reference-implementations"] .tab-floatbar .tab-num {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.95);
    font-weight: 600;
    letter-spacing: 0.14em;
}
.crrem-lib-page-main[data-component="reference-implementations"] .tab-floatbar .tab-ico .material-symbols-rounded {
    font-size: 20px;
    color: #fff;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.3));
}
.crrem-lib-page-main[data-component="reference-implementations"] .asset-tab h4 {
    font-family: 'Lexend Deca', sans-serif;
    font-weight: 600;
    font-size: 15.5px;
    color: #fff;
    line-height: 1.2;
    letter-spacing: -0.005em;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
.crrem-lib-page-main[data-component="reference-implementations"] .asset-tab .tab-loc {
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.88);
    letter-spacing: 0.01em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.crrem-lib-page-main[data-component="reference-implementations"] .asset-tab .tab-meta {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    padding-top: 6px;
    margin-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    font-size: 11px;
    font-family: 'Lexend Deca', sans-serif;
    color: #fff;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.crrem-lib-page-main[data-component="reference-implementations"] .asset-tab .tab-meta .m-k {
    color: rgba(255, 255, 255, 0.7);
    margin-right: 5px;
    font-family: 'Lexend Deca', sans-serif;
    letter-spacing: 0.05em;
    font-size: 10px;
    text-transform: uppercase;
}
.crrem-lib-page-main[data-component="reference-implementations"] .asset-tab .status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 999px;
    align-self: flex-start;
}
.crrem-lib-page-main[data-component="reference-implementations"] .asset-tab .status.aligned {
    background: rgba(125, 186, 150, 0.35);
    color: #fff;
    border: 1px solid rgba(207, 233, 216, 0.55);
}
.crrem-lib-page-main[data-component="reference-implementations"] .asset-tab .status.misaligned {
    background: rgba(214, 162, 74, 0.4);
    color: #fff;
    border: 1px solid rgba(245, 216, 154, 0.6);
}

/* Walkthrough */
.crrem-lib-page-main[data-component="reference-implementations"] .walkthrough {
    background: #fff;
    border: 1px solid var(--hair);
    border-radius: 16px;
    overflow: hidden;
}
.crrem-lib-page-main[data-component="reference-implementations"] .walk-head {
    padding: 22px 28px;
    background: var(--band-off);
    border-bottom: 1px solid var(--hair);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.crrem-lib-page-main[data-component="reference-implementations"] .walk-head-l { display: flex; align-items: center; gap: 14px; }
.crrem-lib-page-main[data-component="reference-implementations"] .walk-head-l .ico {
    width: 38px;
    height: 38px;
    background: var(--evergreen);
    color: #fff;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.crrem-lib-page-main[data-component="reference-implementations"] .walk-head-l .ico .material-symbols-rounded { font-size: 22px; }
.crrem-lib-page-main[data-component="reference-implementations"] .walk-head h3 {
    font-family: 'Lexend Deca', sans-serif;
    font-weight: 600;
    font-size: 20px;
    color: var(--evergreen);
    letter-spacing: -0.01em;
    line-height: 1.2;
}
.crrem-lib-page-main[data-component="reference-implementations"] .walk-head .sub {
    font-size: 13.5px;
    color: var(--slate-60);
    margin-top: 3px;
    font-family: 'Lexend Deca', sans-serif;
}
.crrem-lib-page-main[data-component="reference-implementations"] .walk-head-r { display: flex; gap: 8px; }
.crrem-lib-page-main[data-component="reference-implementations"] .walk-head-r .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--slate);
    padding: 6px 12px;
    background: #fff;
    border: 1px solid var(--hair);
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.15s;
}
.crrem-lib-page-main[data-component="reference-implementations"] .walk-head-r .btn:hover { border-color: var(--arctic); }
.crrem-lib-page-main[data-component="reference-implementations"] .walk-head-r .btn .material-symbols-rounded { font-size: 14px; }

/* Step blocks */
.crrem-lib-page-main[data-component="reference-implementations"] .steps { padding: 0; }
.crrem-lib-page-main[data-component="reference-implementations"] .step-block { padding: 28px 32px; border-bottom: 1px solid var(--hair); }
.crrem-lib-page-main[data-component="reference-implementations"] .step-block:last-child { border-bottom: none; }
.crrem-lib-page-main[data-component="reference-implementations"] .step-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}
.crrem-lib-page-main[data-component="reference-implementations"] .step-header h4 {
    font-family: 'Lexend Deca', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: var(--evergreen);
    letter-spacing: -0.01em;
    display: flex;
    align-items: baseline;
    gap: 12px;
}
.crrem-lib-page-main[data-component="reference-implementations"] .step-header .step-num {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 11px;
    color: var(--amber-deep);
    font-weight: 600;
    letter-spacing: 0.1em;
}
.crrem-lib-page-main[data-component="reference-implementations"] .step-header .step-anchor {
    font-size: 11px;
    color: var(--arctic);
    font-family: 'Lexend Deca', sans-serif;
    opacity: 0.7;
}

/* Data rows */
.crrem-lib-page-main[data-component="reference-implementations"] .data-row {
    display: grid;
    grid-template-columns: minmax(200px, 1.2fr) 100px minmax(150px, 1fr) 1fr;
    gap: 16px;
    padding: 9px 12px;
    margin: 0 -12px;
    border-radius: 4px;
    align-items: baseline;
    font-size: 15px;
    line-height: 1.5;
}
.crrem-lib-page-main[data-component="reference-implementations"] .data-row + .data-row { border-top: 1px dashed rgba(33, 51, 56, 0.08); }
.crrem-lib-page-main[data-component="reference-implementations"] .data-row.input { background: rgba(47, 111, 133, 0.04); }
.crrem-lib-page-main[data-component="reference-implementations"] .data-row.output { background: rgba(214, 162, 74, 0.12); font-weight: 500; }
.crrem-lib-page-main[data-component="reference-implementations"] .data-row .field { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; font-feature-settings: 'calt' 0, 'liga' 0; color: var(--slate); }
.crrem-lib-page-main[data-component="reference-implementations"] .data-row .unit { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; color: var(--slate-60); }
.crrem-lib-page-main[data-component="reference-implementations"] .data-row .val { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--slate); }
.crrem-lib-page-main[data-component="reference-implementations"] .data-row.input .val { color: var(--arctic); }
.crrem-lib-page-main[data-component="reference-implementations"] .data-row.output .val { color: var(--amber-deep); font-weight: 600; font-size: 16.5px; }
.crrem-lib-page-main[data-component="reference-implementations"] .data-row .note { font-size: 13px; color: var(--slate-60); line-height: 1.5; }

/* Formula */
.crrem-lib-page-main[data-component="reference-implementations"] .formula {
    padding: 14px 18px;
    background: var(--band-off);
    border-left: 3px solid rgba(23, 74, 59, 0.18);
    border-radius: 6px;
    margin: 8px 0;
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 14.5px;
    font-weight: 400;
    color: var(--evergreen);
    letter-spacing: 0;
    line-height: 1.75;
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'calt' 0, 'liga' 0;
    overflow-x: auto;
}
.crrem-lib-page-main[data-component="reference-implementations"] .formula .eq { color: var(--slate-60); margin: 0 6px; font-weight: 400; }
.crrem-lib-page-main[data-component="reference-implementations"] .formula .in { color: var(--arctic); font-weight: 500; }
.crrem-lib-page-main[data-component="reference-implementations"] .formula .out { color: var(--amber-deep); font-weight: 600; }

.crrem-lib-page-main[data-component="reference-implementations"] .pathway-comparison {
    margin-top: 14px;
    padding: 16px 20px;
    background: rgba(166, 63, 60, 0.06);
    border-left: 3px solid var(--ember);
    border-radius: 4px;
    font-size: 14px;
    color: var(--slate);
    line-height: 1.6;
}
.crrem-lib-page-main[data-component="reference-implementations"] .pathway-comparison.aligned {
    background: rgba(71, 114, 98, 0.06);
    border-left-color: var(--fern);
}
.crrem-lib-page-main[data-component="reference-implementations"] .pathway-comparison strong { color: var(--evergreen); font-weight: 500; }

/* Misalignment chart */
.crrem-lib-page-main[data-component="reference-implementations"] .misalign-chart { width: 100%; height: 220px; margin-top: 16px; }
.crrem-lib-page-main[data-component="reference-implementations"] .mc-grid { stroke: rgba(33, 51, 56, 0.06); stroke-width: 1; }
.crrem-lib-page-main[data-component="reference-implementations"] .mc-axis { stroke: rgba(33, 51, 56, 0.2); stroke-width: 1; }
.crrem-lib-page-main[data-component="reference-implementations"] .mc-asset-line { stroke: var(--ember); stroke-width: 2; fill: none; stroke-dasharray: 4 3; stroke-linecap: round; stroke-linejoin: round; }
.crrem-lib-page-main[data-component="reference-implementations"] .mc-pathway-line { stroke: var(--evergreen); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.crrem-lib-page-main[data-component="reference-implementations"] .mc-pathway-fill { fill: rgba(23, 74, 59, 0.05); }
.crrem-lib-page-main[data-component="reference-implementations"] .mc-misalign-marker { fill: var(--ember); }
.crrem-lib-page-main[data-component="reference-implementations"] .mc-misalign-halo { fill: rgba(166, 63, 60, 0.18); }
.crrem-lib-page-main[data-component="reference-implementations"] .mc-year-label,
.crrem-lib-page-main[data-component="reference-implementations"] .mc-y-tick {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 10px;
    fill: var(--slate-60);
}
.crrem-lib-page-main[data-component="reference-implementations"] .mc-legend { display: flex; gap: 20px; margin-top: 10px; font-size: 12.5px; color: var(--slate-60); }
.crrem-lib-page-main[data-component="reference-implementations"] .mc-legend .it { display: flex; align-items: center; gap: 6px; }
.crrem-lib-page-main[data-component="reference-implementations"] .mc-legend .sw { width: 14px; height: 2px; }
.crrem-lib-page-main[data-component="reference-implementations"] .mc-legend .sw.a { background: var(--ember); }
.crrem-lib-page-main[data-component="reference-implementations"] .mc-legend .sw.p { background: var(--evergreen); }
.crrem-lib-page-main[data-component="reference-implementations"] .mc-legend .sw.m { width: 8px; height: 8px; border-radius: 50%; background: var(--ember); }

/* Portfolio aggregation */
.crrem-lib-page-main[data-component="reference-implementations"] .portfolio-block {
    background: #fff;
    border: 1px solid var(--hair);
    border-radius: 14px;
    overflow: hidden;
}
.crrem-lib-page-main[data-component="reference-implementations"] .pf-head { padding: 22px 28px; background: var(--band-off); border-bottom: 1px solid var(--hair); }
.crrem-lib-page-main[data-component="reference-implementations"] .pf-head h3 { font-family: 'Lexend Deca', sans-serif; font-weight: 600; font-size: 18px; color: var(--evergreen); letter-spacing: -0.01em; }
.crrem-lib-page-main[data-component="reference-implementations"] .pf-head p { font-size: 13.5px; color: var(--slate-60); margin-top: 4px; }
.crrem-lib-page-main[data-component="reference-implementations"] .pf-body { padding: 24px 28px; }
.crrem-lib-page-main[data-component="reference-implementations"] .pf-assets-table { width: 100%; border-collapse: collapse; font-size: 13.5px; margin-bottom: 22px; }
.crrem-lib-page-main[data-component="reference-implementations"] .pf-assets-table th {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    font-weight: 600;
    color: var(--slate-60);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 10px 12px;
    text-align: right;
    border-bottom: 1px solid var(--hair);
}
.crrem-lib-page-main[data-component="reference-implementations"] .pf-assets-table th:first-child { text-align: left; }
.crrem-lib-page-main[data-component="reference-implementations"] .pf-assets-table td {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(33, 51, 56, 0.04);
    text-align: right;
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13.5px;
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'calt' 0, 'liga' 0;
    color: var(--slate);
}
.crrem-lib-page-main[data-component="reference-implementations"] .pf-assets-table td:first-child { text-align: left; font-family: 'Lexend Deca', sans-serif; font-size: 14px; color: var(--evergreen); font-weight: 500; }
.crrem-lib-page-main[data-component="reference-implementations"] .pf-assets-table td.weight { color: var(--arctic); }
.crrem-lib-page-main[data-component="reference-implementations"] .pf-assets-table tfoot td {
    border-top: 2px solid var(--evergreen);
    border-bottom: 2px solid var(--evergreen);
    background: rgba(23, 74, 59, 0.04);
    font-weight: 600;
    color: var(--evergreen);
}
.crrem-lib-page-main[data-component="reference-implementations"] .pf-assets-table tfoot td.out { background: rgba(214, 162, 74, 0.12); color: var(--amber-deep); }
.crrem-lib-page-main[data-component="reference-implementations"] .pf-outputs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 22px; }
.crrem-lib-page-main[data-component="reference-implementations"] .pf-output-card {
    padding: 18px 22px;
    background: rgba(214, 162, 74, 0.08);
    border: 1px solid rgba(214, 162, 74, 0.25);
    border-radius: 10px;
}
.crrem-lib-page-main[data-component="reference-implementations"] .pf-output-card .k { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--amber-deep); font-weight: 600; margin-bottom: 6px; }
.crrem-lib-page-main[data-component="reference-implementations"] .pf-output-card .v { font-family: 'Lexend Deca', sans-serif; font-size: 24px; color: var(--evergreen); font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.crrem-lib-page-main[data-component="reference-implementations"] .pf-output-card .v .u { font-size: 13.5px; color: var(--slate-60); font-weight: 400; margin-left: 4px; }
.crrem-lib-page-main[data-component="reference-implementations"] .pf-projection-chart { width: 100%; height: 220px; margin-top: 8px; }
.crrem-lib-page-main[data-component="reference-implementations"] .pf-proj-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--hair);
    margin-bottom: 14px;
}
.crrem-lib-page-main[data-component="reference-implementations"] .pf-proj-head .t { font-family: 'Lexend Deca', sans-serif; font-weight: 600; font-size: 13px; color: var(--evergreen); letter-spacing: 0.04em; text-transform: uppercase; }
.crrem-lib-page-main[data-component="reference-implementations"] .pf-proj-head .sub { font-size: 12.5px; color: var(--slate-60); font-family: 'Lexend Deca', sans-serif; }

/* Validation checklist */
.crrem-lib-page-main[data-component="reference-implementations"] .validate-wrap { display: grid; grid-template-columns: 1fr 1.2fr; gap: 28px; }
.crrem-lib-page-main[data-component="reference-implementations"] .validate-left h3 { font-family: 'Lexend Deca', sans-serif; font-weight: 600; font-size: 22px; color: var(--evergreen); margin-bottom: 14px; line-height: 1.2; letter-spacing: -0.01em; }
.crrem-lib-page-main[data-component="reference-implementations"] .validate-left p { font-size: 15.5px; color: var(--slate); line-height: 1.65; margin-bottom: 16px; opacity: 0.9; }
.crrem-lib-page-main[data-component="reference-implementations"] .validate-left .bullet {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 10px;
    padding: 8px 0;
    align-items: baseline;
    font-size: 13px;
    color: var(--slate);
    line-height: 1.5;
}
.crrem-lib-page-main[data-component="reference-implementations"] .validate-left .bullet .ix { color: var(--amber); font-family: 'Lexend Deca', sans-serif; font-weight: 600; }
.crrem-lib-page-main[data-component="reference-implementations"] .validate-table {
    background: #fff;
    border: 1px solid var(--hair);
    border-radius: 12px;
    overflow: hidden;
    align-self: start;
}
.crrem-lib-page-main[data-component="reference-implementations"] .validate-table-head {
    padding: 14px 20px;
    background: var(--evergreen);
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 600;
}
.crrem-lib-page-main[data-component="reference-implementations"] .validate-table-head .material-symbols-rounded { font-size: 16px; }
.crrem-lib-page-main[data-component="reference-implementations"] .validate-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'calt' 0, 'liga' 0;
    margin: 0;
}
.crrem-lib-page-main[data-component="reference-implementations"] .validate-table tbody tr:last-child td { border-bottom: 0; }
.crrem-lib-page-main[data-component="reference-implementations"] .validate-table th,
.crrem-lib-page-main[data-component="reference-implementations"] .validate-table td {
    padding: 10px 14px;
    text-align: right;
    border-bottom: 1px solid rgba(33, 51, 56, 0.04);
}
.crrem-lib-page-main[data-component="reference-implementations"] .validate-table th:first-child,
.crrem-lib-page-main[data-component="reference-implementations"] .validate-table td:first-child { text-align: left; }
.crrem-lib-page-main[data-component="reference-implementations"] .validate-table th {
    font-size: 10px;
    font-weight: 600;
    color: var(--slate-60);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-family: 'Lexend Deca', sans-serif;
    background: var(--band-off);
}
.crrem-lib-page-main[data-component="reference-implementations"] .validate-table td { color: var(--evergreen); }
.crrem-lib-page-main[data-component="reference-implementations"] .validate-table td:first-child { color: var(--slate); font-family: 'Lexend Deca', sans-serif; font-size: 14px; font-weight: 500; }
.crrem-lib-page-main[data-component="reference-implementations"] .validate-table tr.portfolio td { background: rgba(214, 162, 74, 0.08); color: var(--amber-deep); font-weight: 600; border-top: 2px solid var(--amber); }
.crrem-lib-page-main[data-component="reference-implementations"] .validate-table tr.portfolio td:first-child { font-family: 'Lexend Deca', sans-serif; color: var(--amber-deep); }

/* Downloads + citation */
.crrem-lib-page-main[data-component="reference-implementations"] .down-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
.crrem-lib-page-main[data-component="reference-implementations"] .down-card,
.crrem-lib-page-main[data-component="reference-implementations"] .cite-card-refimpl {
    background: #fff;
    border: 1px solid var(--hair);
    border-radius: 12px;
    padding: 26px 28px;
    display: flex;
    flex-direction: column;
}
.crrem-lib-page-main[data-component="reference-implementations"] .down-card .k,
.crrem-lib-page-main[data-component="reference-implementations"] .cite-card-refimpl .k {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--arctic);
    text-transform: uppercase;
    margin-bottom: 8px;
}
.crrem-lib-page-main[data-component="reference-implementations"] .down-card h4,
.crrem-lib-page-main[data-component="reference-implementations"] .cite-card-refimpl h4 {
    font-family: 'Lexend Deca', sans-serif;
    font-weight: 600;
    font-size: 17px;
    color: var(--evergreen);
    margin-bottom: 14px;
    line-height: 1.2;
    letter-spacing: -0.005em;
}
.crrem-lib-page-main[data-component="reference-implementations"] .down-list { display: flex; flex-direction: column; gap: 6px; }
.crrem-lib-page-main[data-component="reference-implementations"] .down-row {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 10px 14px;
    background: var(--band-off);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
}
.crrem-lib-page-main[data-component="reference-implementations"] .down-row:hover { background: var(--band-warm); }
.crrem-lib-page-main[data-component="reference-implementations"] .down-row .fmt {
    width: 32px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 5px;
    font-family: 'Lexend Deca', sans-serif;
    font-size: 10px;
    font-weight: 600;
    color: var(--evergreen);
    letter-spacing: 0.04em;
}
.crrem-lib-page-main[data-component="reference-implementations"] .down-row .dd .dt { font-size: 14.5px; color: var(--evergreen); font-weight: 500; }
.crrem-lib-page-main[data-component="reference-implementations"] .down-row .dd .dmsub { font-size: 12.5px; color: var(--slate-60); }
.crrem-lib-page-main[data-component="reference-implementations"] .down-row .size { font-size: 12.5px; color: var(--slate-60); font-family: 'Lexend Deca', sans-serif; }
.crrem-lib-page-main[data-component="reference-implementations"] .cite-card-refimpl .cite-block-ri {
    background: var(--band-off);
    border-radius: 8px;
    padding: 12px 14px;
    font-family: 'Lexend Deca', sans-serif;
    font-size: 12px;
    line-height: 1.55;
    color: var(--slate);
    margin-bottom: 10px;
}
.crrem-lib-page-main[data-component="reference-implementations"] .cite-card-refimpl .actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.crrem-lib-page-main[data-component="reference-implementations"] .cite-card-refimpl .action {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: 'Lexend Deca', sans-serif;
    font-size: 11.5px;
    color: var(--slate-60);
    padding: 5px 11px;
    background: var(--band-off);
    border: 1px solid transparent !important;
    border-radius: 999px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    box-shadow: none !important;
    text-shadow: none !important;
    outline: none;
    transition: all 0.15s;
}
.crrem-lib-page-main[data-component="reference-implementations"] .cite-card-refimpl .action:hover { color: var(--evergreen); background: var(--band-warm); }
.crrem-lib-page-main[data-component="reference-implementations"] .cite-card-refimpl .action:focus-visible { outline: 2px solid var(--arctic); outline-offset: 2px; }
.crrem-lib-page-main[data-component="reference-implementations"] .cite-card-refimpl .action.is-copied { color: var(--evergreen); background: rgba(74, 124, 89, 0.18); }
.crrem-lib-page-main[data-component="reference-implementations"] .cite-card-refimpl .action .material-symbols-rounded { font-size: 12px; }
.crrem-lib-page-main[data-component="reference-implementations"] .cite-card-refimpl .link-val-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex-wrap: wrap;
}
.crrem-lib-page-main[data-component="reference-implementations"] .cite-card-refimpl .link-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 999px;
    color: var(--slate-60);
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
}
.crrem-lib-page-main[data-component="reference-implementations"] .cite-card-refimpl .link-copy:hover { color: var(--evergreen); background: var(--band-warm); }
.crrem-lib-page-main[data-component="reference-implementations"] .cite-card-refimpl .link-copy:focus-visible { outline: 2px solid var(--arctic); outline-offset: 2px; }
.crrem-lib-page-main[data-component="reference-implementations"] .cite-card-refimpl .link-copy.is-copied { color: var(--evergreen); background: rgba(74, 124, 89, 0.18); }
.crrem-lib-page-main[data-component="reference-implementations"] .cite-card-refimpl .link-copy .material-symbols-rounded { font-size: 14px; }
.crrem-lib-page-main[data-component="reference-implementations"] .step-header .step-anchor {
    text-decoration: none;
    transition: opacity 0.15s;
}
.crrem-lib-page-main[data-component="reference-implementations"] .step-header .step-anchor:hover { opacity: 1; text-decoration: underline; }
.crrem-lib-page-main[data-component="reference-implementations"] .step-header .step-anchor:focus-visible { outline: 2px solid var(--arctic); outline-offset: 2px; opacity: 1; }
.crrem-lib-page-main[data-component="reference-implementations"] .cite-card-refimpl .links {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--hair);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.crrem-lib-page-main[data-component="reference-implementations"] .cite-card-refimpl .link-row {
    display: grid;
    grid-template-columns: 82px 1fr;
    gap: 12px;
    align-items: baseline;
    font-size: 11.5px;
}
.crrem-lib-page-main[data-component="reference-implementations"] .cite-card-refimpl .link-label { color: var(--slate-60); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; font-size: 10px; }
.crrem-lib-page-main[data-component="reference-implementations"] .cite-card-refimpl .link-val { color: var(--evergreen); font-family: 'Lexend Deca', sans-serif; word-break: break-all; }



/* Inline <code> elements: field names, units, region codes, pathway identifiers.
   Used inside notes, pathway-comparison callouts, intros, and anywhere technical
   identifiers appear in prose. Keeps the prose in Lexend but lifts the identifiers
   into monospace so they read as code, not as words. */
.crrem-lib-page-main[data-component="reference-implementations"] code,
.crrem-lib-page-main[data-component="reference-implementations"] .note code,
.crrem-lib-page-main[data-component="reference-implementations"] .pathway-comparison code,
.crrem-lib-page-main[data-component="reference-implementations"] .sec-intro code,
.crrem-lib-page-main[data-component="reference-implementations"] .validate-left code,
.crrem-lib-page-main[data-component="reference-implementations"] .cross-link code {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.92em;
    padding: 1px 5px;
    background: rgba(47, 111, 133, 0.06);
    color: var(--evergreen);
    border-radius: 3px;
    font-weight: 500;
    font-feature-settings: 'calt' 0, 'liga' 0;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    white-space: nowrap;
}
.crrem-lib-page-main[data-component="reference-implementations"] .cite-card-refimpl .link-val {
    background: transparent;
    padding: 0;
}
/* Cross-link */
.crrem-lib-page-main[data-component="reference-implementations"] .cross-link {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 22px;
    margin-top: 18px;
    background: rgba(47, 111, 133, 0.06);
    border: 1px solid rgba(47, 111, 133, 0.15);
    border-radius: 10px;
}
.crrem-lib-page-main[data-component="reference-implementations"] .cross-link .material-symbols-rounded { color: var(--arctic); font-size: 22px; }
.crrem-lib-page-main[data-component="reference-implementations"] .cross-link .t { font-family: 'Lexend Deca', sans-serif; font-weight: 600; color: var(--evergreen); font-size: 13.5px; margin-bottom: 2px; }
.crrem-lib-page-main[data-component="reference-implementations"] .cross-link .d { font-size: 12px; color: var(--slate); line-height: 1.5; }
.crrem-lib-page-main[data-component="reference-implementations"] .cross-link .cta { margin-left: auto; color: var(--arctic); font-size: 12px; font-weight: 500; display: inline-flex; align-items: center; gap: 4px; }
.crrem-lib-page-main[data-component="reference-implementations"] .cross-link .cta .material-symbols-rounded { font-size: 14px; color: inherit; }

/* ========== ZONE 3 — Technical Blueprint ========== */

/* ----- Intro section ---------------------------------------------------
 * Three audience tracks (01 / 02 / 03) — numbered front-matter of a
 * technical spec. Each track is open at the top with a thin evergreen
 * rule and an inset mono numeral that breaks through the rule. Below the
 * tracks, a quiet amber-bordered callout holds the "How to read" notes.
 *
 * No card backgrounds, no chips. Hierarchy is type-driven; visual
 * interest comes from the numbered top rules and the hairline
 * geometry — RFC front-matter, not promo blocks.
 * --------------------------------------------------------------------- */

/* Three numbered tracks */
.crrem-lib-page-main[data-component="technical-blueprint"] .intro-audience {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 36px 40px;
    margin: 56px 0 44px;
    counter-reset: aud;
}
.crrem-lib-page-main[data-component="technical-blueprint"] .intro-audience__item {
    counter-increment: aud;
    border-top: 1px solid var(--evergreen);
    padding: 22px 0 0;
    position: relative;
}
.crrem-lib-page-main[data-component="technical-blueprint"] .intro-audience__item::before {
    content: counter(aud, decimal-leading-zero);
    position: absolute;
    top: -9px;
    left: 0;
    background: #fff;
    padding-right: 12px;
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-feature-settings: 'calt' 0, 'liga' 0;
    font-size: 11px;
    font-weight: 600;
    color: var(--amber-deep);
    letter-spacing: 0.18em;
    line-height: 1;
}
.crrem-lib-page-main[data-component="technical-blueprint"] .intro-audience__label {
    font-family: 'Lexend Deca', sans-serif;
    font-weight: 600;
    font-size: 14.5px;
    color: var(--evergreen);
    letter-spacing: -0.005em;
    line-height: 1.25;
    margin: 0 0 10px;
}
.crrem-lib-page-main[data-component="technical-blueprint"] .intro-audience__body {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 13.5px;
    color: var(--slate);
    line-height: 1.6;
    margin: 0;
}

/* "How to read this page" callout — amber-bordered instructions strip */
.crrem-lib-page-main[data-component="technical-blueprint"] .intro-howto {
    margin-top: 8px;
    padding: 22px 26px 22px 24px;
    border-left: 2px solid var(--amber-deep);
    background: linear-gradient(90deg, rgba(214, 162, 74, 0.05), rgba(214, 162, 74, 0) 70%);
    border-radius: 0 6px 6px 0;
}
.crrem-lib-page-main[data-component="technical-blueprint"] .intro-howto__label {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-feature-settings: 'calt' 0, 'liga' 0;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--amber-deep);
    margin-bottom: 12px;
}
.crrem-lib-page-main[data-component="technical-blueprint"] .intro-howto__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 9px;
}
.crrem-lib-page-main[data-component="technical-blueprint"] .intro-howto__list li {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 13.5px;
    color: var(--slate);
    line-height: 1.6;
    padding-left: 22px;
    position: relative;
}
.crrem-lib-page-main[data-component="technical-blueprint"] .intro-howto__list li::before {
    content: '→';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--evergreen);
    font-weight: 600;
    font-size: 13px;
    line-height: 1.65;
}
.crrem-lib-page-main[data-component="technical-blueprint"] .intro-howto__list a {
    color: var(--arctic);
    text-decoration: none;
    border-bottom: 1px solid rgba(47, 111, 133, 0.3);
    transition: color 0.15s ease, border-color 0.15s ease;
}
.crrem-lib-page-main[data-component="technical-blueprint"] .intro-howto__list a:hover {
    color: var(--evergreen);
    border-bottom-color: var(--evergreen);
}
.crrem-lib-page-main[data-component="technical-blueprint"] .intro-howto__list code {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-feature-settings: 'calt' 0, 'liga' 0;
    font-size: 12px;
    background: rgba(47, 111, 133, 0.08);
    padding: 1px 6px;
    border-radius: 3px;
    color: var(--arctic);
}

@media (max-width: 860px) {
    .crrem-lib-page-main[data-component="technical-blueprint"] .intro-audience {
        grid-template-columns: 1fr;
        gap: 28px;
        margin: 44px 0 36px;
    }
}

/* Dependency callout */
.crrem-lib-page-main[data-component="technical-blueprint"] .dep-callout {
    background: linear-gradient(135deg, rgba(47, 111, 133, 0.05), rgba(71, 114, 98, 0.04));
    border: 1px solid rgba(47, 111, 133, 0.15);
    border-radius: 14px;
    padding: 28px 32px;
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 32px;
    align-items: start;
}
.crrem-lib-page-main[data-component="technical-blueprint"] .dep-callout h3 {
    font-family: 'Lexend Deca', sans-serif;
    font-weight: 600;
    font-size: 20px;
    color: var(--evergreen);
    margin-bottom: 12px;
    line-height: 1.2;
    letter-spacing: -0.01em;
}
.crrem-lib-page-main[data-component="technical-blueprint"] .dep-callout p { font-size: 13.5px; color: var(--slate); line-height: 1.6; opacity: 0.9; }
.crrem-lib-page-main[data-component="technical-blueprint"] .dep-list { display: flex; flex-direction: column; gap: 8px; }
.crrem-lib-page-main[data-component="technical-blueprint"] .dep-item {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 10px 14px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid var(--hair);
    font-size: 12.5px;
}
.crrem-lib-page-main[data-component="technical-blueprint"] .dep-item .ico {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--band-warm);
    color: var(--evergreen);
    border-radius: 6px;
}
.crrem-lib-page-main[data-component="technical-blueprint"] .dep-item .ico .material-symbols-rounded { font-size: 18px; }
.crrem-lib-page-main[data-component="technical-blueprint"] .dep-item .info .t { color: var(--evergreen); font-weight: 500; }
.crrem-lib-page-main[data-component="technical-blueprint"] .dep-item .info .d { color: var(--slate-60); font-size: 11px; margin-top: 1px; }
.crrem-lib-page-main[data-component="technical-blueprint"] .dep-item .tag {
    font-size: 10px;
    color: var(--slate-60);
    font-family: 'Lexend Deca', sans-serif;
    padding: 2px 8px;
    background: var(--band-off);
    border-radius: 999px;
    letter-spacing: 0.04em;
}
.crrem-lib-page-main[data-component="technical-blueprint"] .dep-item .tag.optional { color: var(--amber-deep); background: rgba(214, 162, 74, 0.1); }

/* Scope selector */
.crrem-lib-page-main[data-component="technical-blueprint"] .scope-switch {
    display: inline-flex;
    padding: 4px;
    background: var(--band-off);
    border-radius: 10px;
    margin-bottom: 24px;
    border: 1px solid var(--hair);
}
.crrem-lib-page-main[data-component="technical-blueprint"] .scope-switch .opt {
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 500;
    color: var(--slate-60);
    cursor: pointer;
    border-radius: 7px;
    letter-spacing: 0.01em;
    transition: all 0.15s;
}
.crrem-lib-page-main[data-component="technical-blueprint"] .scope-switch .opt.active {
    background: #fff;
    color: var(--evergreen);
    box-shadow: 0 1px 4px rgba(23, 74, 59, 0.08);
}
.crrem-lib-page-main[data-component="technical-blueprint"] .scope-switch .opt .ct {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 10px;
    color: var(--slate-60);
    margin-left: 8px;
}

/* Step navigator */
.crrem-lib-page-main[data-component="technical-blueprint"] .step-nav {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    margin-bottom: 32px;
}
.crrem-lib-page-main[data-component="technical-blueprint"] .step-nav[hidden] { display: none; }
.crrem-lib-page-main[data-component="technical-blueprint"] .step-nav[data-scope="portfolio"] { grid-template-columns: repeat(4, 1fr); }
.crrem-lib-page-main[data-component="technical-blueprint"] .step-chip {
    padding: 14px 14px 12px;
    background: #fff;
    border: 1px solid var(--hair);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s;
}
.crrem-lib-page-main[data-component="technical-blueprint"] .step-chip:hover {
    border-color: var(--arctic);
    transform: translateY(-1px);
}
.crrem-lib-page-main[data-component="technical-blueprint"] .step-chip.current {
    border-color: var(--evergreen);
    box-shadow: 0 0 0 2px rgba(23, 74, 59, 0.12);
}
.crrem-lib-page-main[data-component="technical-blueprint"] .step-chip .sc-num {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 11px;
    color: var(--amber-deep);
    font-weight: 600;
    letter-spacing: 0.1em;
    margin-bottom: 5px;
}
.crrem-lib-page-main[data-component="technical-blueprint"] .step-chip .sc-name {
    font-family: 'Lexend Deca', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: var(--evergreen);
    letter-spacing: -0.005em;
    line-height: 1.25;
}

/* Step spec block */
.crrem-lib-page-main[data-component="technical-blueprint"] .step-spec {
    background: #fff;
    border: 1px solid var(--hair);
    border-radius: 14px;
    overflow: hidden;
}
.crrem-lib-page-main[data-component="technical-blueprint"] .step-spec > .fields-table { margin: 0; }
.crrem-lib-page-main[data-component="technical-blueprint"] .step-spec-head {
    padding: 20px 28px;
    background: var(--band-off);
    border-bottom: 1px solid var(--hair);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.crrem-lib-page-main[data-component="technical-blueprint"] .step-spec-head h3 {
    font-family: 'Lexend Deca', sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: var(--evergreen);
    letter-spacing: -0.01em;
    display: flex;
    align-items: baseline;
    gap: 12px;
}
.crrem-lib-page-main[data-component="technical-blueprint"] .step-spec-head h3 .stnum {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 11px;
    color: var(--amber-deep);
    font-weight: 600;
    letter-spacing: 0.1em;
}
.crrem-lib-page-main[data-component="technical-blueprint"] .step-spec-head .anchor {
    font-size: 11px;
    color: var(--arctic);
    font-family: 'Lexend Deca', sans-serif;
    padding: 4px 10px;
    background: rgba(47, 111, 133, 0.06);
    border-radius: 999px;
}

/* ---- Collapsible step accordion (<details class="step-spec">) ---------
 * The spec browser uses a flat <details>/<summary> per step. Native marker
 * is hidden; the summary becomes a compact, clickable card header with a
 * monospace step label, a Lexend title, a muted blurb, an anchor pill and
 * a circular chevron that rotates on open. Hover / focus / open states all
 * stay within the existing CRREM Library palette — band-off, amber-deep,
 * arctic — so the accordion sits naturally next to the rest of the page.
 */
.crrem-lib-page-main[data-component="technical-blueprint"] details.step-spec {
    margin-bottom: 14px;
    scroll-margin-top: 110px;
    transition: border-color 0.18s ease, box-shadow 0.22s ease;
}
.crrem-lib-page-main[data-component="technical-blueprint"] details.step-spec:hover {
    border-color: rgba(47, 111, 133, 0.28);
}
.crrem-lib-page-main[data-component="technical-blueprint"] details.step-spec[open] {
    border-color: rgba(23, 74, 59, 0.18);
    box-shadow: 0 4px 22px rgba(23, 74, 59, 0.06);
}
.crrem-lib-page-main[data-component="technical-blueprint"] details.step-spec:target {
    border-color: rgba(214, 162, 74, 0.55);
    box-shadow: 0 0 0 3px rgba(214, 162, 74, 0.15), 0 4px 22px rgba(23, 74, 59, 0.06);
}

.crrem-lib-page-main[data-component="technical-blueprint"] .step-spec-summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
    padding: 22px 26px;
    display: flex;
    align-items: flex-start;
    gap: 22px;
    background: var(--band-off);
    border-bottom: 1px solid transparent;
    transition: background-color 0.18s ease, border-color 0.18s ease;
}
.crrem-lib-page-main[data-component="technical-blueprint"] .step-spec-summary::-webkit-details-marker {
    display: none;
}
.crrem-lib-page-main[data-component="technical-blueprint"] .step-spec-summary::marker {
    content: '';
}
.crrem-lib-page-main[data-component="technical-blueprint"] details.step-spec[open] > .step-spec-summary {
    border-bottom-color: var(--hair);
}
.crrem-lib-page-main[data-component="technical-blueprint"] .step-spec-summary:hover {
    background: rgba(214, 162, 74, 0.06);
}
.crrem-lib-page-main[data-component="technical-blueprint"] .step-spec-summary:focus-visible {
    outline: 2px solid var(--arctic);
    outline-offset: -2px;
}

.crrem-lib-page-main[data-component="technical-blueprint"] .step-spec-summary .ss-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.crrem-lib-page-main[data-component="technical-blueprint"] .step-spec-summary .ss-num {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--amber-deep);
    line-height: 1.2;
}
.crrem-lib-page-main[data-component="technical-blueprint"] .step-spec-summary .ss-title {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--evergreen);
    letter-spacing: -0.005em;
    line-height: 1.3;
}
.crrem-lib-page-main[data-component="technical-blueprint"] .step-spec-summary .ss-blurb {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 13.5px;
    color: var(--slate-60);
    line-height: 1.55;
    margin-top: 2px;
}

.crrem-lib-page-main[data-component="technical-blueprint"] .step-spec-summary .ss-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    margin-top: 4px;
}
.crrem-lib-page-main[data-component="technical-blueprint"] .step-spec-summary .anchor {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10.5px;
    color: var(--arctic);
    background: rgba(47, 111, 133, 0.08);
    padding: 4px 10px;
    border-radius: 999px;
    letter-spacing: 0.02em;
    transition: background-color 0.18s ease, color 0.18s ease;
}
.crrem-lib-page-main[data-component="technical-blueprint"] .step-spec-summary:hover .anchor {
    background: rgba(47, 111, 133, 0.16);
    color: var(--evergreen);
}

.crrem-lib-page-main[data-component="technical-blueprint"] .step-spec-summary .ss-toggle {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(23, 74, 59, 0.06);
    position: relative;
    flex-shrink: 0;
    transition: background-color 0.18s ease;
}
.crrem-lib-page-main[data-component="technical-blueprint"] .step-spec-summary .ss-toggle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 7px;
    height: 7px;
    border-right: 2px solid var(--evergreen);
    border-bottom: 2px solid var(--evergreen);
    transform: translate(-50%, -65%) rotate(45deg);
    transition: transform 0.25s ease;
}
.crrem-lib-page-main[data-component="technical-blueprint"] details.step-spec[open] .step-spec-summary .ss-toggle::after {
    transform: translate(-50%, -35%) rotate(-135deg);
}
.crrem-lib-page-main[data-component="technical-blueprint"] .step-spec-summary:hover .ss-toggle {
    background: rgba(214, 162, 74, 0.18);
}

.crrem-lib-page-main[data-component="technical-blueprint"] .step-spec-body {
    padding: 0;
}

@media (max-width: 720px) {
    .crrem-lib-page-main[data-component="technical-blueprint"] .step-spec-summary {
        padding: 18px 20px;
        gap: 14px;
    }
    .crrem-lib-page-main[data-component="technical-blueprint"] .step-spec-summary .ss-title {
        font-size: 16px;
    }
    .crrem-lib-page-main[data-component="technical-blueprint"] .step-spec-summary .ss-blurb {
        font-size: 13px;
    }
    .crrem-lib-page-main[data-component="technical-blueprint"] .step-spec-summary .ss-meta {
        flex-direction: column-reverse;
        align-items: flex-end;
        gap: 8px;
    }
}

/* ==========================================================================
 * Spec field-table → editorial glossary
 *
 * The <table> markup is preserved, but rendered via CSS grid. <thead> is
 * hidden; column structure is self-evident from typography, not column
 * heads. Every row becomes a glossary entry: field name + unit + required
 * marker on the left, prose description on the right.
 *
 * Hierarchy is type-driven:
 *   - Section headings (.fields-group-header) — Lexend 17, evergreen 600.
 *   - Field name — JetBrains Mono 13.5, evergreen 600.
 *   - Required marker — JetBrains Mono 10.5, tracked caps, color-coded:
 *       required → warm tomato; conditional → arctic; optional → very-muted
 *       slate. No pill chips, no boxes.
 *   - Unit — JetBrains Mono 11.5, slate-60. "—" stays visible but recedes.
 *   - Description — Lexend 14, slate, max 70ch. <em> sub-line slate-60.
 *
 * No vertical hairlines anywhere; only soft horizontal rules between rows.
 * Section headings get generous top whitespace so they actually breathe.
 * ========================================================================== */

.crrem-lib-page-main[data-component="technical-blueprint"] .fields-table {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(64px, max-content) minmax(96px, max-content) minmax(0, 2.4fr);
    column-gap: 28px;
    width: 100%;
    background: #fff;
    align-items: baseline;
    border-collapse: separate;
    font-size: 14px;
}
.crrem-lib-page-main[data-component="technical-blueprint"] .fields-table thead,
.crrem-lib-page-main[data-component="technical-blueprint"] .fields-table tbody,
.crrem-lib-page-main[data-component="technical-blueprint"] .fields-table tr {
    display: contents;
}
.crrem-lib-page-main[data-component="technical-blueprint"] .fields-table thead {
    display: none;
}

/* Section heading row — full-width, generous whitespace, no decoration */
.crrem-lib-page-main[data-component="technical-blueprint"] .fields-group-header > td {
    grid-column: 1 / -1;
    padding: 38px 28px 6px;
    background: transparent;
    border: none;
    box-shadow: none;
    position: relative;
}
.crrem-lib-page-main[data-component="technical-blueprint"] .fields-group-header:first-of-type > td {
    padding-top: 22px;
}
.crrem-lib-page-main[data-component="technical-blueprint"] .fields-group-header .lbl {
    font-family: 'Lexend Deca', sans-serif;
    font-weight: 600;
    font-size: 17px;
    color: var(--evergreen);
    letter-spacing: -0.012em;
    line-height: 1.25;
    margin: 0 0 4px;
    display: block;
}
.crrem-lib-page-main[data-component="technical-blueprint"] .fields-group-header .lbl::before {
    content: none;
}
.crrem-lib-page-main[data-component="technical-blueprint"] .fields-group-header .desc {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 13px;
    color: var(--slate-60);
    font-style: normal;
    font-weight: 400;
    line-height: 1.55;
    max-width: 64ch;
    margin: 0;
}

/* Field row — hairline-divided, no vertical borders */
.crrem-lib-page-main[data-component="technical-blueprint"] .fields-table tbody tr:not(.fields-group-header) > td {
    padding: 16px 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(33, 51, 56, 0.05);
}
.crrem-lib-page-main[data-component="technical-blueprint"] .fields-table tbody tr:not(.fields-group-header) > td.field {
    padding-left: 28px;
}
.crrem-lib-page-main[data-component="technical-blueprint"] .fields-table tbody tr:not(.fields-group-header) > td.desc {
    padding-right: 28px;
}
.crrem-lib-page-main[data-component="technical-blueprint"] .fields-table tbody tr:last-child > td {
    border-bottom: none;
}

/* Subtle row hover — :hover on a display:contents row still works because the
 * pseudo bubbles via descendants. Every cell in the row tints together. */
.crrem-lib-page-main[data-component="technical-blueprint"] .fields-table tbody tr:not(.fields-group-header):hover > td {
    background: rgba(47, 111, 133, 0.022);
}

/* Field name */
.crrem-lib-page-main[data-component="technical-blueprint"] .fields-table td.field {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-feature-settings: 'calt' 0, 'liga' 0;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--evergreen);
    line-height: 1.5;
    word-break: break-word;
}

/* Unit */
.crrem-lib-page-main[data-component="technical-blueprint"] .fields-table td.unit {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-feature-settings: 'calt' 0, 'liga' 0;
    font-size: 11.5px;
    font-weight: 400;
    color: var(--slate-60);
    line-height: 1.6;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

/* Required marker — typographic, color-coded, no pill */
.crrem-lib-page-main[data-component="technical-blueprint"] .fields-table td.req {
    line-height: 1.6;
    white-space: nowrap;
}
.crrem-lib-page-main[data-component="technical-blueprint"] .fields-table td.req .pill {
    display: inline;
    background: none;
    border: none;
    padding: 0;
    border-radius: 0;
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-feature-settings: 'calt' 0, 'liga' 0;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    line-height: 1.5;
}
.crrem-lib-page-main[data-component="technical-blueprint"] .fields-table td.req .pill.yes { color: #B23A2C; }
.crrem-lib-page-main[data-component="technical-blueprint"] .fields-table td.req .pill.cond { color: var(--arctic); }
.crrem-lib-page-main[data-component="technical-blueprint"] .fields-table td.req .pill.opt {
    color: var(--slate-60);
    font-weight: 500;
    opacity: 0.75;
}

/* Description — comfortable reading prose */
.crrem-lib-page-main[data-component="technical-blueprint"] .fields-table td.desc {
    font-family: 'Lexend Deca', sans-serif;
    color: var(--slate);
    font-size: 14px;
    line-height: 1.6;
    max-width: 70ch;
}
.crrem-lib-page-main[data-component="technical-blueprint"] .fields-table td.desc em {
    color: var(--slate-60);
    font-size: 12.5px;
    font-style: normal;
    display: block;
    margin-top: 6px;
    line-height: 1.55;
}

/* Mobile — single-column flow, meta wraps inline above description */
@media (max-width: 720px) {
    .crrem-lib-page-main[data-component="technical-blueprint"] .fields-table {
        display: block;
    }
    .crrem-lib-page-main[data-component="technical-blueprint"] .fields-table tbody,
    .crrem-lib-page-main[data-component="technical-blueprint"] .fields-table tr {
        display: block;
    }
    .crrem-lib-page-main[data-component="technical-blueprint"] .fields-table tbody tr:not(.fields-group-header) {
        padding: 14px 20px;
        border-bottom: 1px solid rgba(33, 51, 56, 0.05);
    }
    .crrem-lib-page-main[data-component="technical-blueprint"] .fields-table tbody tr:last-child {
        border-bottom: none;
    }
    .crrem-lib-page-main[data-component="technical-blueprint"] .fields-table tbody tr:not(.fields-group-header) > td {
        display: inline;
        padding: 0;
        border-bottom: none;
    }
    .crrem-lib-page-main[data-component="technical-blueprint"] .fields-table tbody tr:not(.fields-group-header) > td.field {
        display: block;
        padding-left: 0;
        margin-bottom: 4px;
    }
    .crrem-lib-page-main[data-component="technical-blueprint"] .fields-table tbody tr:not(.fields-group-header) > td.unit {
        margin-right: 14px;
    }
    .crrem-lib-page-main[data-component="technical-blueprint"] .fields-table tbody tr:not(.fields-group-header) > td.req {
        margin-right: 0;
    }
    .crrem-lib-page-main[data-component="technical-blueprint"] .fields-table tbody tr:not(.fields-group-header) > td.desc {
        display: block;
        margin-top: 6px;
        padding-right: 0;
        font-size: 13.5px;
    }
    .crrem-lib-page-main[data-component="technical-blueprint"] .fields-group-header > td {
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 28px;
    }
}

/* Formula blocks */
.crrem-lib-page-main[data-component="technical-blueprint"] .formulas { padding: 24px 28px; }
.crrem-lib-page-main[data-component="technical-blueprint"] .formula-head {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: var(--arctic);
    text-transform: uppercase;
    margin-bottom: 14px;
}
.crrem-lib-page-main[data-component="technical-blueprint"] .formula {
    background: #0E2A22;
    color: rgba(255, 255, 255, 0.92);
    border-radius: 8px;
    padding: 16px 20px;
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13.5px;
    font-feature-settings: 'calt' 0, 'liga' 0;
    font-variant-numeric: tabular-nums;
    line-height: 1.75;
    margin-bottom: 10px;
    overflow-x: auto;
    position: relative;
}
.crrem-lib-page-main[data-component="technical-blueprint"] .formula + .formula { margin-top: 10px; }
.crrem-lib-page-main[data-component="technical-blueprint"] .formula .cmt { color: rgba(255, 255, 255, 0.45); }
.crrem-lib-page-main[data-component="technical-blueprint"] .formula .in { color: #9DD9B8; }
.crrem-lib-page-main[data-component="technical-blueprint"] .formula .out { color: var(--amber); font-weight: 600; }
.crrem-lib-page-main[data-component="technical-blueprint"] .formula .op { color: rgba(255, 255, 255, 0.6); }
.crrem-lib-page-main[data-component="technical-blueprint"] .formula .fn { color: #7FB3C4; }
.crrem-lib-page-main[data-component="technical-blueprint"] .formula .copy {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.4);
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.15s;
}
.crrem-lib-page-main[data-component="technical-blueprint"] .formula .copy:hover { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.9); }
.crrem-lib-page-main[data-component="technical-blueprint"] .formula .copy .material-symbols-rounded { font-size: 14px; }

.crrem-lib-page-main[data-component="technical-blueprint"] .rule-explainer {
    margin-top: 14px;
    padding: 14px 16px;
    background: var(--band-off);
    border-radius: 8px;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--slate);
}
.crrem-lib-page-main[data-component="technical-blueprint"] .rule-explainer .rk {
    font-family: 'Lexend Deca', sans-serif;
    font-weight: 600;
    color: var(--evergreen);
    font-size: 12px;
    display: block;
    margin-bottom: 4px;
}
.crrem-lib-page-main[data-component="technical-blueprint"] .rule-explainer code {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 11.5px;
    background: rgba(47, 111, 133, 0.08);
    padding: 1px 6px;
    border-radius: 3px;
    color: var(--arctic);
}

/* Edge cases */
.crrem-lib-page-main[data-component="technical-blueprint"] .edge-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.crrem-lib-page-main[data-component="technical-blueprint"] .edge-card {
    background: #fff;
    border: 1px solid var(--hair);
    border-radius: 12px;
    padding: 22px 24px;
}
.crrem-lib-page-main[data-component="technical-blueprint"] .edge-card .tag {
    display: inline-block;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 4px;
    margin-bottom: 10px;
}
.crrem-lib-page-main[data-component="technical-blueprint"] .edge-card.critical .tag { background: rgba(166, 63, 60, 0.1); color: var(--ember); }
.crrem-lib-page-main[data-component="technical-blueprint"] .edge-card.optional .tag { background: rgba(214, 162, 74, 0.1); color: var(--amber-deep); }
.crrem-lib-page-main[data-component="technical-blueprint"] .edge-card.legacy .tag { background: rgba(47, 111, 133, 0.1); color: var(--arctic); }
.crrem-lib-page-main[data-component="technical-blueprint"] .edge-card.behavior .tag { background: rgba(71, 114, 98, 0.1); color: var(--fern); }
.crrem-lib-page-main[data-component="technical-blueprint"] .edge-card h4 {
    font-family: 'Lexend Deca', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: var(--evergreen);
    margin-bottom: 8px;
    line-height: 1.2;
    letter-spacing: -0.005em;
}
.crrem-lib-page-main[data-component="technical-blueprint"] .edge-card p { font-size: 13px; color: var(--slate); line-height: 1.6; opacity: 0.88; margin-bottom: 12px; }
.crrem-lib-page-main[data-component="technical-blueprint"] .edge-card .mini-formula {
    background: var(--band-off);
    border-radius: 6px;
    padding: 10px 14px;
    font-family: 'Lexend Deca', sans-serif;
    font-size: 11.5px;
    color: var(--evergreen);
    line-height: 1.6;
}
.crrem-lib-page-main[data-component="technical-blueprint"] .edge-card .mini-formula .cmt { color: var(--slate-60); }
.crrem-lib-page-main[data-component="technical-blueprint"] .edge-card .mini-formula .kw { color: var(--amber-deep); font-weight: 600; }
.crrem-lib-page-main[data-component="technical-blueprint"] .edge-card .mini-formula .fn { color: var(--arctic); }

/* Pathway resolution diagram */
.crrem-lib-page-main[data-component="technical-blueprint"] .resolve-flow {
    background: #fff;
    border: 1px solid var(--hair);
    border-radius: 14px;
    padding: 28px 32px;
}
.crrem-lib-page-main[data-component="technical-blueprint"] .resolve-steps {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.crrem-lib-page-main[data-component="technical-blueprint"] .resolve-step {
    flex: 1;
    min-width: 180px;
    padding: 16px 18px;
    background: var(--band-off);
    border-radius: 10px;
    border: 1px solid var(--hair);
    position: relative;
}
.crrem-lib-page-main[data-component="technical-blueprint"] .resolve-step + .resolve-step::before {
    content: '→';
    position: absolute;
    left: -14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--arctic);
    font-weight: 600;
    font-size: 14px;
}
.crrem-lib-page-main[data-component="technical-blueprint"] .resolve-step .rs-num {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 10px;
    color: var(--amber-deep);
    font-weight: 600;
    letter-spacing: 0.1em;
    margin-bottom: 6px;
}
.crrem-lib-page-main[data-component="technical-blueprint"] .resolve-step .rs-t { font-family: 'Lexend Deca', sans-serif; font-weight: 600; font-size: 13px; color: var(--evergreen); margin-bottom: 4px; }
.crrem-lib-page-main[data-component="technical-blueprint"] .resolve-step .rs-d { font-size: 11.5px; color: var(--slate-60); line-height: 1.5; }
.crrem-lib-page-main[data-component="technical-blueprint"] .resolve-examples {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 20px;
}
.crrem-lib-page-main[data-component="technical-blueprint"] .resolve-example {
    padding: 14px 16px;
    background: var(--band-off);
    border-radius: 8px;
    font-family: 'Lexend Deca', sans-serif;
    font-size: 11.5px;
    line-height: 1.8;
}
.crrem-lib-page-main[data-component="technical-blueprint"] .resolve-example .k { color: var(--slate-60); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; font-family: 'Lexend Deca', sans-serif; margin-bottom: 4px; }
.crrem-lib-page-main[data-component="technical-blueprint"] .resolve-example .in { color: var(--arctic); }
.crrem-lib-page-main[data-component="technical-blueprint"] .resolve-example .out { color: var(--amber-deep); font-weight: 600; }
.crrem-lib-page-main[data-component="technical-blueprint"] .resolve-example .arrow { color: var(--slate-60); margin: 0 4px; }

/* Validate your impl cross-link */
.crrem-lib-page-main[data-component="technical-blueprint"] .validate-cross {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 24px;
    align-items: center;
    padding: 24px 28px;
    background: linear-gradient(135deg, rgba(214, 162, 74, 0.08), rgba(214, 162, 74, 0.04));
    border: 1px solid rgba(214, 162, 74, 0.25);
    border-radius: 12px;
}
.crrem-lib-page-main[data-component="technical-blueprint"] .validate-cross .ico {
    width: 48px;
    height: 48px;
    background: #fff;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--amber-deep);
}
.crrem-lib-page-main[data-component="technical-blueprint"] .validate-cross .ico .material-symbols-rounded { font-size: 26px; }
.crrem-lib-page-main[data-component="technical-blueprint"] .validate-cross h3 { font-family: 'Lexend Deca', sans-serif; font-weight: 600; font-size: 18px; color: var(--evergreen); margin-bottom: 4px; letter-spacing: -0.005em; }
.crrem-lib-page-main[data-component="technical-blueprint"] .validate-cross p { font-size: 13px; color: var(--slate); opacity: 0.85; }
.crrem-lib-page-main[data-component="technical-blueprint"] .validate-cross .cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: var(--evergreen);
    color: #fff;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.15s;
}
.crrem-lib-page-main[data-component="technical-blueprint"] .validate-cross .cta:hover { background: #0E2A22; transform: translateY(-1px); }
.crrem-lib-page-main[data-component="technical-blueprint"] .validate-cross .cta .material-symbols-rounded { font-size: 16px; }

/* Downloads + citation */
.crrem-lib-page-main[data-component="technical-blueprint"] .down-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px;
    align-items: stretch;
}
.crrem-lib-page-main[data-component="technical-blueprint"] .down-card,
.crrem-lib-page-main[data-component="technical-blueprint"] .cite-card-bp {
    background: #fff;
    border: 1px solid var(--hair);
    border-radius: 12px;
    padding: 26px 28px;
    display: flex;
    flex-direction: column;
}
.crrem-lib-page-main[data-component="technical-blueprint"] .down-card .k,
.crrem-lib-page-main[data-component="technical-blueprint"] .cite-card-bp .k {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--arctic);
    text-transform: uppercase;
    margin-bottom: 8px;
}
.crrem-lib-page-main[data-component="technical-blueprint"] .down-card h4,
.crrem-lib-page-main[data-component="technical-blueprint"] .cite-card-bp h4 {
    font-family: 'Lexend Deca', sans-serif;
    font-weight: 600;
    font-size: 17px;
    color: var(--evergreen);
    margin-bottom: 14px;
    line-height: 1.2;
    letter-spacing: -0.005em;
}
.crrem-lib-page-main[data-component="technical-blueprint"] .down-list { display: flex; flex-direction: column; gap: 6px; }
.crrem-lib-page-main[data-component="technical-blueprint"] .down-row {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 10px 14px;
    background: var(--band-off);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
}
.crrem-lib-page-main[data-component="technical-blueprint"] .down-row:hover { background: var(--band-warm); }
.crrem-lib-page-main[data-component="technical-blueprint"] .down-row .fmt {
    width: 32px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 5px;
    font-family: 'Lexend Deca', sans-serif;
    font-size: 10px;
    font-weight: 600;
    color: var(--evergreen);
    letter-spacing: 0.04em;
}
.crrem-lib-page-main[data-component="technical-blueprint"] .down-row .dd .dt { font-size: 12.5px; color: var(--evergreen); font-weight: 500; }
.crrem-lib-page-main[data-component="technical-blueprint"] .down-row .dd .dmsub { font-size: 11px; color: var(--slate-60); }
.crrem-lib-page-main[data-component="technical-blueprint"] .down-row .size { font-size: 11px; color: var(--slate-60); font-family: 'Lexend Deca', sans-serif; }
.crrem-lib-page-main[data-component="technical-blueprint"] .cite-card-bp .cite-block-bp {
    background: var(--band-off);
    border-radius: 8px;
    padding: 12px 14px;
    font-family: 'Lexend Deca', sans-serif;
    font-size: 12px;
    line-height: 1.55;
    color: var(--slate);
    margin-bottom: 10px;
}
.crrem-lib-page-main[data-component="technical-blueprint"] .cite-card-bp .actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.crrem-lib-page-main[data-component="technical-blueprint"] .cite-card-bp .action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Lexend Deca', sans-serif;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--slate-60);
    padding: 5px 11px;
    background: var(--band-off);
    border: 1px solid transparent !important;
    border-radius: 999px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    text-shadow: none !important;
    box-shadow: none !important;
    outline: none;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.crrem-lib-page-main[data-component="technical-blueprint"] .cite-card-bp .action:hover { color: var(--evergreen); background: var(--band-warm); border-color: rgba(23, 74, 59, 0.12); }
.crrem-lib-page-main[data-component="technical-blueprint"] .cite-card-bp .action:focus-visible { outline: 2px solid var(--arctic); outline-offset: 2px; }
.crrem-lib-page-main[data-component="technical-blueprint"] .cite-card-bp .action .material-symbols-rounded { font-size: 13px; }
.crrem-lib-page-main[data-component="technical-blueprint"] .cite-card-bp .links {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--hair);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.crrem-lib-page-main[data-component="technical-blueprint"] .cite-card-bp .link-row {
    display: grid;
    grid-template-columns: 82px 1fr;
    gap: 12px;
    align-items: baseline;
    font-size: 11.5px;
}
.crrem-lib-page-main[data-component="technical-blueprint"] .cite-card-bp .link-label { color: var(--slate-60); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; font-size: 10px; }
.crrem-lib-page-main[data-component="technical-blueprint"] .cite-card-bp .link-val { color: var(--evergreen); font-family: 'Lexend Deca', sans-serif; word-break: break-all; }

/* Spec browser — calculation-step extensions (Steps 2+ and Portfolio) */
.crrem-lib-page-main[data-component="technical-blueprint"] .step-intro {
    padding: 20px 24px 6px;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--slate);
}
.crrem-lib-page-main[data-component="technical-blueprint"] .step-intro em { color: var(--slate-60); font-style: italic; }
.crrem-lib-page-main[data-component="technical-blueprint"] .fields-table td.req .pill.key { background: rgba(214, 162, 74, 0.2); color: var(--amber-deep); font-weight: 600; }
.crrem-lib-page-main[data-component="technical-blueprint"] .fields-table td.req .pill.intm { background: rgba(47, 111, 133, 0.09); color: var(--arctic); }
.crrem-lib-page-main[data-component="technical-blueprint"] .fields-table td.req .pill.input { background: rgba(71, 114, 98, 0.1); color: var(--fern); }
.crrem-lib-page-main[data-component="technical-blueprint"] .fields-table td.desc .fm {
    display: block;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12.5px;
    background: var(--band-off);
    border: 1px solid var(--hair);
    border-radius: 4px;
    padding: 9px 12px;
    margin: 9px 0 4px;
    color: var(--slate);
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.6;
}
.crrem-lib-page-main[data-component="technical-blueprint"] .fields-table td.desc .fm .out { color: var(--amber-deep); font-weight: 600; }
.crrem-lib-page-main[data-component="technical-blueprint"] .fields-table td.desc .fm .in { color: var(--fern); }
.crrem-lib-page-main[data-component="technical-blueprint"] .fields-table td.desc .fm .fn { color: var(--arctic); font-weight: 500; }
.crrem-lib-page-main[data-component="technical-blueprint"] .fields-table td.desc .fm .cmt { color: var(--slate-60); font-style: italic; }

/* Step cross-link — points into another section of this page */
.crrem-lib-page-main[data-component="technical-blueprint"] .step-crosslink {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 24px 0;
    padding: 14px 18px;
    background: var(--band-off);
    border: 1px solid var(--hair);
    border-left: 3px solid var(--arctic);
    border-radius: 8px;
    font-size: 14px;
    color: var(--slate);
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
}
.crrem-lib-page-main[data-component="technical-blueprint"] .step-crosslink:hover {
    background: rgba(47, 111, 133, 0.05);
    border-left-color: var(--evergreen);
    color: var(--evergreen);
}
.crrem-lib-page-main[data-component="technical-blueprint"] .step-crosslink .material-symbols-rounded { color: var(--arctic); font-size: 20px; }
.crrem-lib-page-main[data-component="technical-blueprint"] .step-crosslink strong { color: var(--evergreen); }

/* Assumption table — lightweight, used for Step 6 flat-demand note */
.crrem-lib-page-main[data-component="technical-blueprint"] .assumption-list {
    padding: 6px 24px 20px;
}
.crrem-lib-page-main[data-component="technical-blueprint"] .assumption-list .row {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(33, 51, 56, 0.06);
    font-size: 14px;
}
.crrem-lib-page-main[data-component="technical-blueprint"] .assumption-list .row:last-child { border-bottom: 0; }
.crrem-lib-page-main[data-component="technical-blueprint"] .assumption-list .k {
    font-family: 'Lexend Deca', sans-serif;
    font-weight: 500;
    color: var(--evergreen);
    font-size: 13.5px;
}
.crrem-lib-page-main[data-component="technical-blueprint"] .assumption-list .v { color: var(--slate); line-height: 1.55; }
.crrem-lib-page-main[data-component="technical-blueprint"] .assumption-list .v em { color: var(--slate-60); font-style: normal; display: block; margin-top: 4px; font-size: 12.5px; }

/* Copy button feedback — applied via JS */
.crrem-lib-page-main[data-component="technical-blueprint"] .formula .copy {
    cursor: pointer;
}
.crrem-lib-page-main[data-component="technical-blueprint"] .formula .copy.is-copied {
    background: rgba(157, 217, 184, 0.18);
    color: #9DD9B8;
}
.crrem-lib-page-main[data-component="technical-blueprint"] .cite-card-bp .action {
    cursor: pointer;
    user-select: none;
    transition: color 0.15s;
}
.crrem-lib-page-main[data-component="technical-blueprint"] .cite-card-bp .action:hover { color: var(--evergreen); }
.crrem-lib-page-main[data-component="technical-blueprint"] .cite-card-bp .action.is-copied { color: var(--evergreen); }

/* Downloads — enabled state for JSON/MD rows */
.crrem-lib-page-main[data-component="technical-blueprint"] .down-row .fmt.fmt-json { background: rgba(47, 111, 133, 0.12); color: var(--arctic); }
.crrem-lib-page-main[data-component="technical-blueprint"] .down-row .fmt.fmt-md { background: rgba(71, 114, 98, 0.12); color: var(--fern); }

/* Visually-hidden live region for copy confirmation */
.crrem-bp-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ========== Responsive & motion ========== */
@media (max-width: 1050px) {
    /* Shell zones */
    .crrem-lib-zone-hero .hero-grid,
    .crrem-lib-zone-hero .hero-grid.mirror { grid-template-columns: 1fr; }
    .crrem-lib-zone-hero .hero-grid.mirror .hero-text { order: 1; }
    .crrem-lib-zone-hero .hero-grid.mirror .hero-visual-wrap { order: 2; }
    .crrem-lib-zone-siblings .sib-row { grid-template-columns: 1fr; }
    .crrem-lib-zone-hero .crrem-lib-hero-h1 { font-size: 36px; }
    .crrem-lib-zone-hero,
    .crrem-lib-page-main .sec,
    .crrem-lib-zone-siblings,
    .crrem-lib-zone-footer,
    .crrem-lib-zone-top { padding-left: 28px; padding-right: 28px; }

    /* Assessment Guide */
    .crrem-lib-page-main[data-component="assessment-guide"] .flow-steps.six,
    .crrem-lib-page-main[data-component="assessment-guide"] .flow-steps.four { grid-template-columns: repeat(2, 1fr); }
    .crrem-lib-page-main[data-component="assessment-guide"] .flow-steps .step + .step::before,
    .crrem-lib-page-main[data-component="assessment-guide"] .flow-steps .step + .step::after { display: none; }
    .crrem-lib-page-main[data-component="assessment-guide"] .directory { grid-template-columns: 1fr; }
    .crrem-lib-page-main[data-component="assessment-guide"] .audience-grid { grid-template-columns: 1fr; }
    .crrem-lib-page-main[data-component="assessment-guide"] .review-wrap { grid-template-columns: 1fr; }
    .crrem-lib-page-main[data-component="assessment-guide"] .cite-grid { grid-template-columns: 1fr; }

    /* Pathways & Datasets */
    .crrem-lib-page-main[data-component="pathways-datasets"] .explorer { grid-template-columns: 1fr; }
    .crrem-lib-page-main[data-component="pathways-datasets"] .explorer-controls { border-right: none; border-bottom: 1px solid var(--hair); }
    .crrem-lib-page-main[data-component="pathways-datasets"] .dataset { grid-template-columns: 1fr; }
    .crrem-lib-page-main[data-component="pathways-datasets"] .dataset-aside { border-left: none; border-top: 1px solid var(--hair); }
    .crrem-lib-page-main[data-component="pathways-datasets"] .api-wrap,
    .crrem-lib-page-main[data-component="pathways-datasets"] .license-wrap { grid-template-columns: 1fr; }
    .crrem-lib-page-main[data-component="pathways-datasets"] .big-chart { height: 240px; }

    /* Reference Implementations */
    .crrem-lib-page-main[data-component="reference-implementations"] .asset-tabs { grid-template-columns: 1fr 1fr; }
    .crrem-lib-page-main[data-component="reference-implementations"] .data-row {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .crrem-lib-page-main[data-component="reference-implementations"] .data-row .note { grid-column: 1 / -1; }
    .crrem-lib-page-main[data-component="reference-implementations"] .pf-outputs { grid-template-columns: 1fr; }
    .crrem-lib-page-main[data-component="reference-implementations"] .validate-wrap,
    .crrem-lib-page-main[data-component="reference-implementations"] .down-grid { grid-template-columns: 1fr; }

    /* Technical Blueprint */
    .crrem-lib-page-main[data-component="technical-blueprint"] .dep-callout { grid-template-columns: 1fr; }
    .crrem-lib-page-main[data-component="technical-blueprint"] .step-nav { grid-template-columns: repeat(3, 1fr); }
    .crrem-lib-page-main[data-component="technical-blueprint"] .edge-grid { grid-template-columns: 1fr; }
    .crrem-lib-page-main[data-component="technical-blueprint"] .resolve-steps { flex-direction: column; }
    .crrem-lib-page-main[data-component="technical-blueprint"] .resolve-step + .resolve-step::before { display: none; }
    .crrem-lib-page-main[data-component="technical-blueprint"] .resolve-examples { grid-template-columns: 1fr; }
    .crrem-lib-page-main[data-component="technical-blueprint"] .validate-cross { grid-template-columns: 1fr; text-align: left; }
    .crrem-lib-page-main[data-component="technical-blueprint"] .down-grid { grid-template-columns: 1fr; }

    /* Shared hero-mini responsive */
    .crrem-lib-page-main .z-hero-mini { flex-direction: column; align-items: flex-start; padding: 24px 28px; }
}

@media (prefers-reduced-motion: reduce) {
    .crrem-lib-page-main * {
        animation: none !important;
        transition-duration: 0.01ms !important;
    }
}

/* =======================================================================
   Pathways & Datasets — interactive explorer state layer.
   Companion to /assets/js/library-pathways-explorer.js.
   ======================================================================= */

/* Enable absolute-positioned panels. */
.crrem-lib-page-main[data-component="pathways-datasets"] .ctrl-group {
    position: relative;
}

/* Select-box as a button: reset default browser styling. */
.crrem-lib-page-main[data-component="pathways-datasets"] button.select-box {
    -webkit-appearance: none;
    appearance: none;
    font: inherit;
    font-family: 'Lexend Deca', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: inherit;
    text-align: left;
    cursor: pointer;
    width: 100%;
    text-shadow: none;
    box-shadow: none;
    gap: 8px;
}
.crrem-lib-page-main[data-component="pathways-datasets"] button.select-box:focus-visible {
    outline: 2px solid var(--arctic);
    outline-offset: 2px;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .select-box[aria-expanded="true"] {
    border-color: var(--evergreen);
    background: #fff;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .select-box[aria-expanded="true"] .material-symbols-rounded {
    transform: rotate(180deg);
    color: var(--evergreen);
}
.crrem-lib-page-main[data-component="pathways-datasets"] .select-box[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.6;
}

/* Muted state when subregion is N/A for the chosen country. */
.crrem-lib-page-main[data-component="pathways-datasets"] .ctrl-group.is-muted .ctrl-label {
    color: var(--slate-60);
}
.crrem-lib-page-main[data-component="pathways-datasets"] .ctrl-group.is-muted .select-box {
    background: transparent;
}

/* Dropdown panel. */
.crrem-lib-page-main[data-component="pathways-datasets"] .select-panel {
    list-style: none;
    margin: 4px 0 0;
    padding: 4px;
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    z-index: 20;
    background: #fff;
    border: 1px solid rgba(23, 74, 59, 0.15);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(23, 74, 59, 0.14), 0 2px 6px rgba(23, 74, 59, 0.08);
    max-height: 280px;
    overflow-y: auto;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .select-panel[hidden] {
    display: none;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .select-panel-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    font-size: 13px;
    color: var(--slate);
    border-radius: 6px;
    cursor: pointer;
    user-select: none;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .select-panel-option:hover,
.crrem-lib-page-main[data-component="pathways-datasets"] .select-panel-option:focus {
    background: var(--band-off, #F7F8F8);
    color: var(--evergreen);
    outline: none;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .select-panel-option .opt-meta {
    font-size: 11px;
    color: var(--slate-60);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* Hint replacing the old inline style. */
.crrem-lib-page-main[data-component="pathways-datasets"] .ctrl-hint {
    font-size: 10.5px;
    color: var(--slate-60);
    margin: 6px 0 0;
    line-height: 1.5;
}

/* Disabled format row (CSV / JSON / PARQ coming soon). */
.crrem-lib-page-main[data-component="pathways-datasets"] .format-row--pending {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .format-row--pending .size {
    text-transform: lowercase;
}

/* Schema preview disclosure. */
.crrem-lib-page-main[data-component="pathways-datasets"] button.preview-link {
    background: transparent;
    border: 0;
    padding: 10px 0 0;
    font: inherit;
    color: var(--arctic);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.crrem-lib-page-main[data-component="pathways-datasets"] button.preview-link:hover {
    color: var(--evergreen);
}
.crrem-lib-page-main[data-component="pathways-datasets"] .schema-preview {
    margin-top: 10px;
    padding: 12px 14px;
    background: rgba(23, 74, 59, 0.04);
    border: 1px solid rgba(23, 74, 59, 0.08);
    border-radius: 8px;
    font-size: 12px;
    color: var(--slate);
    line-height: 1.6;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .schema-preview[hidden] {
    display: none;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .schema-preview strong {
    color: var(--evergreen);
    font-weight: 600;
}

/* Catalog info strip — callout pointing to Property Types in the Assessment Guide. */
.crrem-lib-page-main[data-component="pathways-datasets"] .catalog-info-strip {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 20px;
    margin: 24px 0 0;
    background: rgba(47, 111, 133, 0.06);
    border: 1px solid rgba(47, 111, 133, 0.14);
    border-radius: 10px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--slate);
}
.crrem-lib-page-main[data-component="pathways-datasets"] .catalog-info-strip .material-symbols-rounded {
    color: var(--arctic);
    font-size: 20px;
    flex-shrink: 0;
    margin-top: 1px;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .catalog-info-strip strong { color: var(--evergreen); font-weight: 600; }
.crrem-lib-page-main[data-component="pathways-datasets"] .catalog-info-strip a {
    color: var(--arctic);
    text-decoration: underline;
    text-decoration-color: rgba(47, 111, 133, 0.4);
    text-underline-offset: 2px;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .catalog-info-strip a:hover {
    color: var(--evergreen);
    text-decoration-color: currentColor;
}

/* Disabled version-row pill ("Archive · on request"). */
.crrem-lib-page-main[data-component="pathways-datasets"] .v-action-disabled {
    color: var(--slate-60);
    font-size: 12px;
    padding: 6px 12px;
    border: 1px dashed rgba(23, 74, 59, 0.18);
    border-radius: 999px;
}

/* API tabs: reset button defaults and add active visual. */
.crrem-lib-page-main[data-component="pathways-datasets"] .api-right .tabs button.tab {
    background: transparent;
    border: 0;
    padding: 4px 10px;
    font: inherit;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.55);
    border-radius: 6px;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .api-right .tabs button.tab.active,
.crrem-lib-page-main[data-component="pathways-datasets"] .api-right .tabs button.tab[aria-selected="true"] {
    color: #D6A24A;
    background: rgba(214, 162, 74, 0.12);
}
.crrem-lib-page-main[data-component="pathways-datasets"] .api-right .tabs button.tab:focus-visible {
    outline: 2px solid #D6A24A;
    outline-offset: 2px;
}

/* API copy button. */
.crrem-lib-page-main[data-component="pathways-datasets"] .api-right button.copy {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.7);
    font: inherit;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .api-right button.copy:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.4);
}
.crrem-lib-page-main[data-component="pathways-datasets"] .api-right button.copy.is-copied {
    color: #D6A24A;
    border-color: #D6A24A;
}

/* Citation action buttons — reset <button> chrome but preserve the
   font-size defined in the earlier .cite-actions .action rule so the
   buttons match the other library pages. */
.crrem-lib-page-main[data-component="pathways-datasets"] .cite-actions button.action {
    font-family: inherit;
    font-weight: inherit;
    line-height: inherit;
    border: none;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}
.crrem-lib-page-main[data-component="pathways-datasets"] .cite-actions button.action.is-copied {
    color: var(--evergreen);
    background: rgba(74, 124, 89, 0.18);
    border-color: var(--evergreen);
}

/* Pathway-line animation (gated by prefers-reduced-motion in JS). */
.crrem-lib-page-main[data-component="pathways-datasets"] .big-chart .pathway-line {
    transition: stroke-dashoffset 900ms ease-out;
}

/* Responsive — explorer panel caps at 240px below 1050px. */
@media (max-width: 1050px) {
    .crrem-lib-page-main[data-component="pathways-datasets"] .select-panel {
        max-height: 240px;
    }
}

/* ========== Assessment Guide — Section 1: Reference (two-column) ==========
 * Editorial documentation layout. Sticky left rail for anchor navigation;
 * single content column with hair rules between items (no card chrome).
 * Typographic vocabulary:
 *   - Mono = anything addressable (anchors, step codes, part labels, meta)
 *   - Amber = technical-reference accent (step numbers, formula spine, :target)
 *   - Evergreen = brand primary (group headings, CTA block)
 */

.crrem-lib-page-main[data-component="assessment-guide"] .ref-sec {
    background: #fff;
    max-width: 1200px;
    margin: 0 auto;
    padding: 64px 32px 72px;
}

/* Section header — spans full width above the two-column layout */
.crrem-lib-page-main[data-component="assessment-guide"] .ref-head {
    max-width: 720px;
    margin-bottom: 44px;
}
.crrem-lib-page-main[data-component="assessment-guide"] .ref-head .sec-h {
    margin-bottom: 12px;
}
.crrem-lib-page-main[data-component="assessment-guide"] .ref-head .sec-intro {
    color: var(--slate-60);
    font-size: 14.5px;
    line-height: 1.65;
    max-width: 620px;
}
.crrem-lib-page-main[data-component="assessment-guide"] .ref-head .sec-inline {
    color: var(--arctic);
    text-decoration: underline;
    text-decoration-color: rgba(47, 111, 133, 0.35);
    text-underline-offset: 2px;
}
.crrem-lib-page-main[data-component="assessment-guide"] .ref-head .sec-inline:hover {
    color: var(--evergreen);
    text-decoration-color: var(--evergreen);
}

/* Two-column grid — aside stretches so the sticky inner has a tall
 * containing block to stick through the entire Reference section. */
.crrem-lib-page-main[data-component="assessment-guide"] .ref-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 56px;
}

/* Left rail — sticky within section; scrolls internally if taller than viewport.
 * Top offset clears the fixed site navbar (72px) plus 24px breathing room.
 * WP admin-bar adds 32px when logged in — handled by the override below. */
.crrem-lib-page-main[data-component="assessment-guide"] .ref-nav-inner {
    position: sticky;
    top: 96px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: var(--hair) transparent;
}
body.admin-bar .crrem-lib-page-main[data-component="assessment-guide"] .ref-nav-inner {
    top: 128px;
    max-height: calc(100vh - 152px);
}
.crrem-lib-page-main[data-component="assessment-guide"] .ref-nav-list {
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.crrem-lib-page-main[data-component="assessment-guide"] .ref-nav-group {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.crrem-lib-page-main[data-component="assessment-guide"] .ref-nav-group-t {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--slate-60);
    font-weight: 500;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--hair);
}
.crrem-lib-page-main[data-component="assessment-guide"] .ref-nav-link {
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 10px;
    align-items: baseline;
    padding: 6px 10px;
    margin-left: -2px;
    color: var(--slate-60);
    text-decoration: none;
    font-size: 13px;
    line-height: 1.35;
    border-left: 2px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.crrem-lib-page-main[data-component="assessment-guide"] .ref-nav-link .n {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--amber-deep);
    letter-spacing: 0.04em;
}
.crrem-lib-page-main[data-component="assessment-guide"] .ref-nav-link:hover {
    color: var(--slate);
    background: var(--band-off);
}
.crrem-lib-page-main[data-component="assessment-guide"] .ref-nav-link.is-active {
    color: var(--evergreen);
    font-weight: 500;
    border-left-color: var(--amber);
    background: rgba(214, 162, 74, 0.07);
}
.crrem-lib-page-main[data-component="assessment-guide"] .ref-nav-link.is-active .n {
    color: var(--evergreen);
}
.crrem-lib-page-main[data-component="assessment-guide"] .ref-nav-stats {
    margin-top: 26px;
    padding-top: 14px;
    border-top: 1px solid var(--hair);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
    color: var(--slate-60);
    letter-spacing: 0.04em;
    line-height: 1.7;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.crrem-lib-page-main[data-component="assessment-guide"] .ref-nav-stats .sep {
    color: var(--hair);
}

/* Right column */
.crrem-lib-page-main[data-component="assessment-guide"] .ref-content {
    min-width: 0;
    max-width: 780px;
}

/* Group heading — "Part 0 | Foundation | 4 sections" */
.crrem-lib-page-main[data-component="assessment-guide"] .ref-group {
    margin-bottom: 52px;
}
.crrem-lib-page-main[data-component="assessment-guide"] .ref-group:last-child {
    margin-bottom: 8px;
}
/* Reference part header — editorial 2-column row.
   Identity stack on the left (PART pill / title / meta line),
   plain-prose description on the right.
   Border-bottom acts as a chapter rule. */
.crrem-lib-page-main[data-component="assessment-guide"] .ref-group-h {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(0, 1.55fr);
    column-gap: 56px;
    row-gap: 18px;
    align-items: start;
    padding-bottom: 22px;
    margin: 0;
    border-bottom: 2px solid var(--evergreen);
    color: var(--evergreen);
    cursor: pointer;
    list-style: none;
}
.crrem-lib-page-main[data-component="assessment-guide"] .ref-group-h::-webkit-details-marker { display: none; }
.crrem-lib-page-main[data-component="assessment-guide"] .ref-group-h:hover .ref-group-h-row .t { color: var(--arctic); }

/* Left identity column — vertical stack: PART pill, big title, meta line. */
.crrem-lib-page-main[data-component="assessment-guide"] .ref-group-h-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
}
.crrem-lib-page-main[data-component="assessment-guide"] .ref-group-h .part {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--amber-deep);
    padding: 4px 9px;
    border: 1px solid var(--hair-warm);
    border-radius: 3px;
    line-height: 1;
}
.crrem-lib-page-main[data-component="assessment-guide"] .ref-group-h .t {
    font-family: 'Lexend Deca', sans-serif;
    font-weight: 600;
    font-size: 26px;
    line-height: 1.15;
    letter-spacing: -0.012em;
    color: var(--evergreen);
    transition: color 0.15s ease;
}
.crrem-lib-page-main[data-component="assessment-guide"] .ref-group-h-meta {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    margin-top: 2px;
}
.crrem-lib-page-main[data-component="assessment-guide"] .ref-group-h .n {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
    font-weight: 500;
    color: var(--slate-60);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    line-height: 1;
}

/* Under-review chip — gavel icon + count, sits beside the steps count. */
.crrem-lib-page-main[data-component="assessment-guide"] .ref-group-h .part-review-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--amber-deep);
    background: rgba(214, 162, 74, 0.12);
    border: 1px solid rgba(214, 162, 74, 0.32);
    border-radius: 999px;
    padding: 4px 10px 4px 8px;
    line-height: 1;
}
.crrem-lib-page-main[data-component="assessment-guide"] .ref-group-h .part-review-chip .material-symbols-rounded {
    font-size: 13px;
    color: var(--amber-deep);
    font-variation-settings: 'FILL' 0, 'wght' 500;
}

/* Right column — the editorial description. Top-aligned, breathable. */
.crrem-lib-page-main[data-component="assessment-guide"] .ref-group-h .ref-group-desc {
    font-family: 'Lexend Deca', sans-serif;
    font-weight: 400;
    font-size: 16.5px;
    line-height: 1.5;
    color: var(--slate);
    letter-spacing: -0.003em;
    align-self: end;
    padding-bottom: 4px;
    max-width: 56ch;
}

/* Items — uncarded: hair rule between items, flex head, body flows beneath */
.crrem-lib-page-main[data-component="assessment-guide"] .ref-content .guide-item {
    background: transparent;
    border: none;
    border-top: 1px solid var(--hair);
    border-radius: 0;
    padding: 28px 0 32px;
    margin: 0;
    scroll-margin-top: 96px;
    transition: background-color 0.3s ease;
}
.crrem-lib-page-main[data-component="assessment-guide"] .ref-content .ref-group > .guide-item:first-of-type {
    border-top: none;
    padding-top: 28px;
}
.crrem-lib-page-main[data-component="assessment-guide"] .ref-content .guide-item:target {
    background: linear-gradient(90deg, rgba(214, 162, 74, 0.10) 0%, rgba(214, 162, 74, 0) 72%);
    border-radius: 6px;
    padding-left: 14px;
    padding-right: 14px;
    margin-left: -14px;
    margin-right: -14px;
}

/* Head: number badge, title, optional permalink button */
.crrem-lib-page-main[data-component="assessment-guide"] .ref-content .guide-item-head {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin: 0 0 8px 0;
}
.crrem-lib-page-main[data-component="assessment-guide"] .ref-content .guide-item-head .num {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--amber-deep);
    background: transparent;
    border: 1px solid var(--hair-warm);
    border-radius: 3px;
    padding: 4px 8px;
    line-height: 1;
    flex-shrink: 0;
    position: relative;
    top: -2px;
}
.crrem-lib-page-main[data-component="assessment-guide"] .ref-content .guide-item-head h3 {
    flex: 1;
    font-size: 18px;
    font-weight: 600;
    color: var(--slate);
    line-height: 1.3;
    margin: 0;
    letter-spacing: -0.005em;
}

/* Hover-reveal permalink button */
.crrem-lib-page-main[data-component="assessment-guide"] .ref-item-permalink {
    flex-shrink: 0;
    appearance: none;
    border: none;
    background: transparent;
    padding: 4px 6px;
    margin-right: -6px;
    cursor: pointer;
    color: var(--slate-60);
    align-self: center;
    opacity: 0;
    border-radius: 4px;
    transition: opacity 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.crrem-lib-page-main[data-component="assessment-guide"] .ref-content .guide-item:hover .ref-item-permalink,
.crrem-lib-page-main[data-component="assessment-guide"] .ref-content .guide-item:focus-within .ref-item-permalink,
.crrem-lib-page-main[data-component="assessment-guide"] .ref-item-permalink:focus-visible {
    opacity: 1;
}
.crrem-lib-page-main[data-component="assessment-guide"] .ref-item-permalink:hover {
    color: var(--evergreen);
    background: var(--band-off);
}
.crrem-lib-page-main[data-component="assessment-guide"] .ref-item-permalink.is-copied {
    color: var(--amber-deep);
    background: rgba(214, 162, 74, 0.12);
}
.crrem-lib-page-main[data-component="assessment-guide"] .ref-item-permalink .material-symbols-rounded {
    font-size: 16px;
    display: block;
}
.crrem-lib-page-main[data-component="assessment-guide"] .ref-item-permalink:focus-visible {
    outline: 2px solid var(--arctic);
    outline-offset: 1px;
}

.crrem-lib-page-main[data-component="assessment-guide"] .ref-content .guide-item-desc {
    font-size: 14.5px;
    color: var(--slate);
    line-height: 1.65;
    margin: 6px 0;
}
.crrem-lib-page-main[data-component="assessment-guide"] .ref-content .guide-item-desc + .guide-item-desc {
    margin-top: 10px;
}
.crrem-lib-page-main[data-component="assessment-guide"] .ref-content .guide-item-note {
    font-size: 13px;
    color: var(--slate-60);
    line-height: 1.55;
    margin-top: 12px;
    padding: 8px 0 8px 12px;
    border-left: 2px solid var(--hair-warm);
}
.crrem-lib-page-main[data-component="assessment-guide"] .ref-content .guide-item-note strong {
    color: var(--slate);
    font-weight: 500;
}
.crrem-lib-page-main[data-component="assessment-guide"] .ref-content .guide-item-note a {
    color: var(--arctic);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Lists */
.crrem-lib-page-main[data-component="assessment-guide"] .ref-content .guide-item-list {
    list-style: none;
    padding: 0;
    margin: 10px 0 0;
}
.crrem-lib-page-main[data-component="assessment-guide"] .ref-content .guide-item-list li {
    font-size: 13.5px;
    color: var(--slate);
    line-height: 1.55;
    padding: 4px 0 4px 18px;
    position: relative;
}
.crrem-lib-page-main[data-component="assessment-guide"] .ref-content .guide-item-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 14px;
    width: 8px;
    height: 1px;
    background: var(--arctic);
}
.crrem-lib-page-main[data-component="assessment-guide"] .ref-content .guide-item-list.compact li {
    padding: 2px 0 2px 18px;
}

/* I/O chips */
.crrem-lib-page-main[data-component="assessment-guide"] .ref-content .guide-item-io {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px dashed var(--hair);
}
.crrem-lib-page-main[data-component="assessment-guide"] .ref-content .guide-item-io .io-label {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--slate-60);
    margin-right: 6px;
}
.crrem-lib-page-main[data-component="assessment-guide"] .ref-content .guide-item-io .chip {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    color: var(--evergreen);
    background: var(--band-off);
    border: 1px solid var(--hair);
    border-radius: 2px;
    padding: 3px 8px;
    letter-spacing: 0.02em;
}

/* Formula blocks */
.crrem-lib-page-main[data-component="assessment-guide"] .ref-content .formula {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12.5px;
    line-height: 1.75;
    color: var(--evergreen);
    background: var(--band-off);
    border-left: 3px solid var(--amber);
    border-radius: 0 4px 4px 0;
    padding: 12px 16px;
    margin: 12px 0;
    overflow-x: auto;
    white-space: pre;
    letter-spacing: 0.01em;
}

/* Inline link (F3 cross-link to Pathways & Datasets) */
.crrem-lib-page-main[data-component="assessment-guide"] .ref-content .inline-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--arctic);
    text-decoration: none;
    margin-top: 10px;
}
.crrem-lib-page-main[data-component="assessment-guide"] .ref-content .inline-link:hover {
    color: var(--evergreen);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.crrem-lib-page-main[data-component="assessment-guide"] .ref-content .inline-link .material-symbols-rounded {
    font-size: 15px;
}

/* Glossary (inside F2) — 2-col grid of term cards */
.crrem-lib-page-main[data-component="assessment-guide"] .ref-content .glossary-block {
    margin-top: 14px;
}
.crrem-lib-page-main[data-component="assessment-guide"] .ref-content .glossary-cat {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--amber-deep);
    font-weight: 600;
    margin: 20px 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--hair);
}
.crrem-lib-page-main[data-component="assessment-guide"] .ref-content .glossary-cat:first-child {
    margin-top: 4px;
}
.crrem-lib-page-main[data-component="assessment-guide"] .ref-content .glossary-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 24px;
    margin: 0;
}
.crrem-lib-page-main[data-component="assessment-guide"] .ref-content .glossary-grid .term {
    padding: 6px 0;
}
.crrem-lib-page-main[data-component="assessment-guide"] .ref-content .glossary-grid dt {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--evergreen);
    margin-bottom: 2px;
    letter-spacing: -0.005em;
}
.crrem-lib-page-main[data-component="assessment-guide"] .ref-content .glossary-grid dd {
    font-size: 12px;
    color: var(--slate-60);
    line-height: 1.55;
    margin: 0;
}

/* Footer CTA — evergreen block button */
.crrem-lib-page-main[data-component="assessment-guide"] .ref-footer {
    margin-top: 36px;
    padding-top: 32px;
    border-top: 1px solid var(--hair);
}
.crrem-lib-page-main[data-component="assessment-guide"] .ref-footer .btn-download {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 14px 22px 14px 20px;
    background: var(--evergreen);
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.crrem-lib-page-main[data-component="assessment-guide"] .ref-footer .btn-download:hover {
    background: #0f3a2e;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(23, 74, 59, 0.18);
}
.crrem-lib-page-main[data-component="assessment-guide"] .ref-footer .btn-download .material-symbols-rounded {
    font-size: 22px;
    opacity: 0.9;
}
.crrem-lib-page-main[data-component="assessment-guide"] .ref-footer .btn-download-main {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}
.crrem-lib-page-main[data-component="assessment-guide"] .ref-footer .btn-download-label {
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: 0.005em;
}
.crrem-lib-page-main[data-component="assessment-guide"] .ref-footer .btn-download-meta {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.65);
    letter-spacing: 0.04em;
    margin-top: 2px;
    text-transform: uppercase;
}

/* Scrollspy focus ring */
.crrem-lib-page-main[data-component="assessment-guide"] .ref-nav-link:focus-visible {
    outline: 2px solid var(--arctic);
    outline-offset: 2px;
}

/* Responsive — Reference section */
@media (max-width: 1050px) {
    .crrem-lib-page-main[data-component="assessment-guide"] .ref-sec {
        padding: 48px 28px 56px;
    }
    .crrem-lib-page-main[data-component="assessment-guide"] .ref-head {
        margin-bottom: 28px;
    }
    .crrem-lib-page-main[data-component="assessment-guide"] .ref-layout {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .crrem-lib-page-main[data-component="assessment-guide"] .ref-nav-inner {
        position: static;
        max-height: none;
        overflow: visible;
        padding: 18px 20px;
        background: var(--band-off);
        border: 1px solid var(--hair);
        border-radius: 8px;
    }
    .crrem-lib-page-main[data-component="assessment-guide"] .ref-nav-list {
        gap: 14px;
    }
    .crrem-lib-page-main[data-component="assessment-guide"] .ref-group {
        margin-bottom: 36px;
    }
    .crrem-lib-page-main[data-component="assessment-guide"] .ref-group-h {
        grid-template-columns: 1fr;
        column-gap: 0;
        row-gap: 14px;
        padding-bottom: 18px;
    }
    .crrem-lib-page-main[data-component="assessment-guide"] .ref-group-h .t {
        font-size: 22px;
    }
    .crrem-lib-page-main[data-component="assessment-guide"] .ref-group-h .ref-group-desc {
        align-self: start;
        padding-bottom: 0;
        font-size: 15.5px;
    }
    .crrem-lib-page-main[data-component="assessment-guide"] .ref-content .guide-item {
        padding: 24px 0 26px;
    }
    .crrem-lib-page-main[data-component="assessment-guide"] .ref-content .guide-item-head {
        gap: 10px;
    }
    .crrem-lib-page-main[data-component="assessment-guide"] .ref-item-permalink {
        opacity: 1;
    }
    .crrem-lib-page-main[data-component="assessment-guide"] .ref-content .glossary-grid {
        grid-template-columns: 1fr;
    }
    .crrem-lib-page-main[data-component="assessment-guide"] .ref-footer .btn-download {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 600px) {
    .crrem-lib-page-main[data-component="assessment-guide"] .ref-group-h .t {
        font-size: 19px;
    }
    .crrem-lib-page-main[data-component="assessment-guide"] .ref-content .guide-item-head h3 {
        font-size: 16px;
    }
}

/* ========== Assessment Guide — citation buttons + toast ==========
 * The Copy APA/BibTeX/Chicago actions are now <button>s. Reset default
 * button chrome, then add a brief "is-copied" state flash. The toast is
 * a single shared element appended to body, shown after any successful
 * copy.
 */
.crrem-lib-page-main[data-component="assessment-guide"] .cite-actions button.action {
    font-family: inherit;
    font-weight: inherit;
    line-height: inherit;
    border: none;
    appearance: none;
    -webkit-appearance: none;
}
.crrem-lib-page-main[data-component="assessment-guide"] .cite-actions .action.is-copied,
.crrem-lib-page-main[data-component="assessment-guide"] .cite-actions .action.is-copied:hover {
    color: var(--amber-deep);
    background: rgba(214, 162, 74, 0.18);
}
.crrem-lib-page-main[data-component="assessment-guide"] .cite-actions .action:focus-visible {
    outline: 2px solid var(--arctic);
    outline-offset: 2px;
}

/* Toast — bottom-right, dark slate, fades in/out */
.crrem-lib-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    padding: 12px 18px;
    background: var(--slate, #213338);
    color: #fff;
    font-family: 'Lexend Deca', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.01em;
    border-radius: 6px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease;
}
.crrem-lib-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.crrem-lib-toast.is-error {
    background: #8C2F2C;
}
@media (prefers-reduced-motion: reduce) {
    .crrem-lib-toast { transition: none; }
}

/* ========== Cross-link "also / where / how" strips ========== */
/* Three sibling blocks (Guide start-here, Pathways where-used, Reference mapping,
   Blueprint orient) ship with inline styles as a fallback. These rules layer
   hover feedback and tidy typography that can't be expressed inline. */

/* Guide: "new to CRREM?" hint */
.guide-reader-hint a {
    color: var(--evergreen, #174A3B);
    text-decoration: none;
    border-bottom: 1px dotted currentColor;
    transition: border-bottom-color 0.15s ease;
}
.guide-reader-hint a:hover {
    border-bottom-color: transparent;
    color: var(--slate, #213338);
}

/* Pathways: where these datasets are used */
.crrem-lib-data-where-used a:hover {
    border-bottom-color: currentColor !important;
}

/* Reference: how these examples map to the methodology */
.crrem-lib-refimpl-mapping a:hover {
    border-bottom-style: solid !important;
}

/* Blueprint: about this specification */
.crrem-lib-blueprint-orient a:hover {
    border-bottom-style: solid !important;
}
.crrem-lib-blueprint-orient code {
    white-space: nowrap;
}

/* ========== Tripartite step pivot ========== */
/* Rendered at the top of each step section on Guide / Blueprint / Reference. */
.crrem-lib-step-pivot {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin: 10px 0 22px;
    padding: 4px 0 2px;
    font-size: 12px;
    color: var(--slate-60, #7A8588);
}
.crrem-lib-step-pivot__label {
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 10.5px;
    color: var(--slate-60, #7A8588);
    margin-right: 2px;
    padding-right: 14px;
    border-right: 1px solid var(--hair, rgba(33, 51, 56, 0.08));
    line-height: 1;
}
.crrem-lib-step-pivot__link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px 7px 12px;
    background: var(--band-off, #F7F8F8);
    border: 1px solid var(--hair, rgba(33, 51, 56, 0.08));
    border-radius: 999px;
    color: var(--slate, #213338);
    text-decoration: none;
    line-height: 1;
    transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.crrem-lib-step-pivot__link + .crrem-lib-step-pivot__link {
    margin-left: -2px;
}
.crrem-lib-step-pivot__link:hover {
    color: var(--evergreen, #174A3B);
    border-color: var(--evergreen, #174A3B);
    background: #ffffff;
    transform: translateY(-1px);
}
.crrem-lib-step-pivot__link:focus-visible {
    outline: 2px solid var(--arctic, #2F6F85);
    outline-offset: 2px;
}
.crrem-lib-step-pivot__link .material-symbols-rounded {
    font-size: 15px;
    color: var(--evergreen, #174A3B);
}
.crrem-lib-step-pivot__text {
    font-weight: 500;
    font-size: 12.5px;
    color: inherit;
}
@media (max-width: 680px) {
    .crrem-lib-step-pivot { font-size: 11.5px; gap: 10px; margin: 6px 0 16px; }
    .crrem-lib-step-pivot__label { padding-right: 10px; }
    .crrem-lib-step-pivot__link { padding: 6px 12px 6px 10px; }
}

/* Technical Blueprint — pivot lives inside .step-spec-body, *after* the
   field table. Visual ordering is done with flex+order so the source order
   (pivot first) can stay tabbable-before-content if anyone navigates by
   keyboard, while the layout shows it as a "see also" outro. Padding
   aligns the ALSO SEE label with the section headings inside the table. */
.crrem-lib-page-main[data-component="technical-blueprint"] .step-spec > .step-spec-body {
    display: flex;
    flex-direction: column;
}
.crrem-lib-page-main[data-component="technical-blueprint"] .step-spec > .step-spec-body > .fields-table {
    order: 1;
}
.crrem-lib-page-main[data-component="technical-blueprint"] .step-spec > .step-spec-body > .crrem-lib-step-pivot {
    order: 2;
    margin: 0;
    padding: 18px 28px 22px;
    border-top: 1px solid var(--hair);
    background: var(--band-off);
}
@media (max-width: 680px) {
    .crrem-lib-page-main[data-component="technical-blueprint"] .step-spec > .step-spec-body > .crrem-lib-step-pivot {
        padding: 14px 20px 18px;
    }
}

/* =============================================================
   Technical Council review — per-Part directory + inline flags
   Matches the editorial 2-column ref-group-h style.
   Hunter: OneDrive share URLs go in template's $tc_review_items[...]['doc']
   ============================================================= */

/* Directory block — rendered immediately after each Part's <summary> */
.crrem-lib-page-main[data-component="assessment-guide"] .part-review-dir {
    margin: 18px 0 28px;
    padding: 18px 22px 16px;
    background: rgba(214, 162, 74, 0.06);
    border: 1px solid rgba(214, 162, 74, 0.28);
    border-left: 3px solid var(--amber-deep);
    border-radius: 8px;
}
.crrem-lib-page-main[data-component="assessment-guide"] .part-review-dir-h {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
    font-family: 'Lexend Deca', sans-serif;
    font-size: 13.5px;
    color: var(--slate);
    line-height: 1.55;
}
.crrem-lib-page-main[data-component="assessment-guide"] .part-review-dir-h .material-symbols-rounded {
    font-size: 18px;
    color: var(--amber-deep);
    flex-shrink: 0;
    margin-top: 1px;
}
.crrem-lib-page-main[data-component="assessment-guide"] .part-review-dir-h strong {
    color: var(--evergreen);
    font-weight: 600;
}
.crrem-lib-page-main[data-component="assessment-guide"] .part-review-dir-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.crrem-lib-page-main[data-component="assessment-guide"] .part-review-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 11px 14px;
    background: #fff;
    border: 1px solid rgba(214, 162, 74, 0.18);
    border-radius: 6px;
}
.crrem-lib-page-main[data-component="assessment-guide"] .part-review-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-items: center;
    color: inherit;
    text-decoration: none;
    min-width: 0;
}
.crrem-lib-page-main[data-component="assessment-guide"] .part-review-item .step-ref {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--amber-deep);
    background: transparent;
    border: 1px solid var(--hair-warm);
    border-radius: 3px;
    padding: 4px 8px;
    line-height: 1;
}
.crrem-lib-page-main[data-component="assessment-guide"] .part-review-item .txt {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 13.5px;
    color: var(--slate);
    line-height: 1.45;
}
.crrem-lib-page-main[data-component="assessment-guide"] .part-review-item:hover .txt {
    color: var(--evergreen);
}
.crrem-lib-page-main[data-component="assessment-guide"] .part-review-doc {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 11px;
    font-family: 'Lexend Deca', sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--arctic);
    background: rgba(47, 111, 133, 0.08);
    border: 1px solid rgba(47, 111, 133, 0.24);
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.crrem-lib-page-main[data-component="assessment-guide"] a.part-review-doc:hover {
    background: var(--arctic);
    color: #fff;
    border-color: var(--arctic);
}
.crrem-lib-page-main[data-component="assessment-guide"] .part-review-doc .material-symbols-rounded {
    font-size: 14px;
}
.crrem-lib-page-main[data-component="assessment-guide"] .part-review-doc.pending {
    color: var(--slate-60);
    background: rgba(122, 133, 136, 0.06);
    border-color: rgba(122, 133, 136, 0.22);
    font-style: italic;
    font-weight: 500;
}

/* Inline flag — sits at the end of guide-item-head h3 */
.crrem-lib-page-main[data-component="assessment-guide"] .under-review-flag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    padding: 4px 10px 4px 8px;
    background: rgba(214, 162, 74, 0.12);
    color: var(--amber-deep);
    border: 1px solid rgba(214, 162, 74, 0.32);
    border-radius: 999px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1;
    text-decoration: none;
    flex-shrink: 0;
    align-self: center;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.crrem-lib-page-main[data-component="assessment-guide"] a.under-review-flag.has-doc:hover {
    background: var(--amber);
    color: #fff;
    border-color: var(--amber);
}
.crrem-lib-page-main[data-component="assessment-guide"] .under-review-flag .material-symbols-rounded {
    font-size: 13px;
    color: inherit;
    font-variation-settings: 'FILL' 0, 'wght' 500;
}

@media (max-width: 720px) {
    .crrem-lib-page-main[data-component="assessment-guide"] .part-review-dir {
        margin: 14px 0 22px;
        padding: 14px 16px 12px;
    }
    .crrem-lib-page-main[data-component="assessment-guide"] .part-review-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .crrem-lib-page-main[data-component="assessment-guide"] .part-review-doc {
        justify-self: start;
    }
}

/* Inline footnote-style marker on F4 assumption items that are under TC review.
   Editorial restraint: micro mono, dotted underline, slate-60, scrolls to #tc-review.
   Sits like a scholarly footnote glyph — discoverable but never distracting. */
.crrem-lib-page-main[data-component="assessment-guide"] .guide-item-tc-fn {
    display: inline-block;
    margin: 0 0 0 4px;
    padding: 0 2px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.14em;
    line-height: 1;
    text-transform: uppercase;
    color: var(--slate-60);
    text-decoration: underline dotted;
    text-decoration-color: rgba(122, 133, 136, 0.45);
    text-underline-offset: 3px;
    vertical-align: 5px;
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.crrem-lib-page-main[data-component="assessment-guide"] .guide-item-tc-fn:hover,
.crrem-lib-page-main[data-component="assessment-guide"] .guide-item-tc-fn:focus-visible {
    color: var(--evergreen);
    text-decoration-color: var(--amber-deep, var(--amber, #B8852D));
}

/* =============================================================
   TECHNICAL COUNCIL REVIEW TOPICS — bottom-of-page open methodology
   Editorial methodology paper: numbered minutes, hairline rules,
   typographic restraint over decoration. JetBrains Mono for ordinals,
   Lexend Deca for prose.
   ============================================================= */
.crrem-lib-page-main[data-component="assessment-guide"] .tc-review-sec {
    position: relative;
}

/* --- Section header block --- */
.crrem-lib-page-main[data-component="assessment-guide"] .tc-review-head {
    max-width: 760px;
    margin-bottom: 56px;
}

/* Meta pill — locates this list in time. Mono kicker before the lede. */
.crrem-lib-page-main[data-component="assessment-guide"] .tc-review-meta {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px 14px;
    margin: -4px 0 22px;
    padding: 7px 14px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(33, 51, 56, 0.14);
    border-radius: 999px;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.crrem-lib-page-main[data-component="assessment-guide"] .tc-review-meta .tc-review-meta-pair {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
}
.crrem-lib-page-main[data-component="assessment-guide"] .tc-review-meta dt {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--slate-60);
    margin: 0;
}
.crrem-lib-page-main[data-component="assessment-guide"] .tc-review-meta dd {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--evergreen);
    margin: 0;
}
.crrem-lib-page-main[data-component="assessment-guide"] .tc-review-meta-sep {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    color: rgba(33, 51, 56, 0.28);
    user-select: none;
}
.crrem-lib-page-main[data-component="assessment-guide"] .tc-review-intro {
    margin-bottom: 0;
}

/* --- The numbered list --- */
.crrem-lib-page-main[data-component="assessment-guide"] .tc-review-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid rgba(23, 74, 59, 0.22);
}

/* --- Row: ordinal | title | description (editorial 3-col) --- */
.crrem-lib-page-main[data-component="assessment-guide"] .tc-row {
    display: grid;
    grid-template-columns: 132px minmax(220px, 300px) 1fr;
    align-items: start;
    gap: 36px;
    padding: 30px 0 32px;
    border-bottom: 1px solid rgba(23, 74, 59, 0.10);
    transition: background-color 0.25s ease;
}
.crrem-lib-page-main[data-component="assessment-guide"] .tc-row-body {
    display: contents;
}
.crrem-lib-page-main[data-component="assessment-guide"] .tc-row:last-child {
    border-bottom-color: rgba(23, 74, 59, 0.22);
}
.crrem-lib-page-main[data-component="assessment-guide"] .tc-row:hover {
    background: linear-gradient(90deg, rgba(214, 162, 74, 0.04), rgba(214, 162, 74, 0) 60%);
}

/* Ordinal column */
.crrem-lib-page-main[data-component="assessment-guide"] .tc-row-ord {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 5px;
}
.crrem-lib-page-main[data-component="assessment-guide"] .tc-row-num {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--evergreen);
    line-height: 1;
}
.crrem-lib-page-main[data-component="assessment-guide"] .tc-row-stat {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.18em;
    color: var(--slate-60);
    text-transform: uppercase;
    line-height: 1;
}
.crrem-lib-page-main[data-component="assessment-guide"] .tc-row-stat::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--amber-deep, var(--amber, #B8852D));
    box-shadow: 0 0 0 3px rgba(214, 162, 74, 0.18);
    flex-shrink: 0;
}

/* Title column (anchor) */
.crrem-lib-page-main[data-component="assessment-guide"] .tc-row-title {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: var(--evergreen);
    line-height: 1.22;
    letter-spacing: -0.012em;
    margin: 0;
}

/* Description column (fills remaining width) */
.crrem-lib-page-main[data-component="assessment-guide"] .tc-row-desc {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 15.5px;
    font-weight: 400;
    color: var(--slate);
    line-height: 1.65;
    margin: 0;
    max-width: 70ch;
}

/* --- Tablet: collapse to 2-col (ord | body) so title+desc stack vertically --- */
@media (max-width: 1024px) and (min-width: 761px) {
    .crrem-lib-page-main[data-component="assessment-guide"] .tc-row {
        grid-template-columns: 132px 1fr;
    }
    .crrem-lib-page-main[data-component="assessment-guide"] .tc-row-body {
        display: block;
    }
    .crrem-lib-page-main[data-component="assessment-guide"] .tc-row-title {
        margin: 0 0 12px;
    }
    .crrem-lib-page-main[data-component="assessment-guide"] .tc-row-desc {
        max-width: none;
    }
}

/* --- Mobile --- */
@media (max-width: 760px) {
    .crrem-lib-page-main[data-component="assessment-guide"] .tc-review-head {
        margin-bottom: 36px;
    }
    .crrem-lib-page-main[data-component="assessment-guide"] .tc-review-meta {
        padding: 6px 12px;
        gap: 8px 10px;
    }
    .crrem-lib-page-main[data-component="assessment-guide"] .tc-row {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 24px 0 26px;
    }
    .crrem-lib-page-main[data-component="assessment-guide"] .tc-row-body {
        display: block;
    }
    .crrem-lib-page-main[data-component="assessment-guide"] .tc-row-ord {
        flex-direction: row;
        align-items: center;
        gap: 14px;
        padding-top: 0;
    }
    .crrem-lib-page-main[data-component="assessment-guide"] .tc-row-title {
        font-size: 19px;
        margin: 0 0 8px;
    }
    .crrem-lib-page-main[data-component="assessment-guide"] .tc-row-desc {
        font-size: 15px;
        max-width: none;
    }
}

/* ──────────────────────────────────────────────────────────────────────
 * Hero panel modifiers (added 2026-05-05 alongside hub-card recovery).
 *
 *   --blueprint  → Tech Blueprint hero hosts the dark code window;
 *                  drop the white inner frame so the artifact dominates.
 *   --downloads  → Pathways & Datasets hero now hosts the same downloads
 *                  list shown on the hub card; transparent inner panel.
 *
 * Plus: align-items: stretch on the inner panel + flex on the guide pair
 * so the AG hero's PDF mockup and chap-list visually center.
 * ────────────────────────────────────────────────────────────────────── */
.crrem-lib-zone-hero .hero-visual-inner--blueprint {
    background: transparent;
    box-shadow: none;
    padding: 0;
    min-height: 0;
}
.crrem-lib-zone-hero .hero-visual-guide-pair {
    display: grid;
    grid-template-columns: minmax(150px, 0.9fr) minmax(190px, 1.2fr);
    gap: 28px;
    align-items: center;
    width: 100%;
    flex: 1;
}
.crrem-lib-zone-hero .hero-visual-guide-pair .crrem-lib-doc-mockup {
    align-self: center;
    justify-self: center;
    width: 100%;
    max-width: 220px;
    aspect-ratio: 0.74 / 1;
    margin: 0 auto;
}
.crrem-lib-zone-hero .hero-visual-guide-pair .chap-list-mini {
    align-self: center;
}

/* ──────────────────────────────────────────────────────────────────────
 * Collapsible note (native <details>) — used for the "About these
 * examples" disclaimer above the worked examples and any other
 * post-load housekeeping callouts. Closed by default; users expand
 * once and the answer stays open. Per Andrea's "less initial noise"
 * feedback (April 2026 review round).
 * ────────────────────────────────────────────────────────────────────── */
.crrem-lib-collapsible-note {
    margin: 0 0 28px;
    padding: 0;
    background: var(--band-off, #F4F5F2);
    border-left: 3px solid var(--evergreen, #174A3B);
    border-radius: 4px;
    color: var(--slate-60, #7A8588);
    overflow: hidden;
    transition: background-color 220ms ease, box-shadow 220ms ease;
}
.crrem-lib-collapsible-note[open] {
    background: #FAFBF9;
    box-shadow: 0 1px 0 rgba(33, 51, 56, 0.04), 0 8px 24px -16px rgba(23, 74, 59, 0.18);
}
.crrem-lib-collapsible-note__summary {
    list-style: none;
    cursor: pointer;
    padding: 12px 18px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 14px;
    align-items: center;
    font-size: 13px;
    line-height: 1.4;
    color: var(--slate-60, #7A8588);
    transition: color 160ms ease;
    user-select: none;
}
.crrem-lib-collapsible-note__summary::-webkit-details-marker { display: none; }
.crrem-lib-collapsible-note__summary::marker { display: none; content: ''; }
.crrem-lib-collapsible-note__summary:hover { color: var(--evergreen, #174A3B); }
.crrem-lib-collapsible-note__summary:focus-visible {
    outline: 2px solid rgba(47, 111, 133, 0.55);
    outline-offset: -2px;
    border-radius: 4px;
}
.crrem-lib-collapsible-note__label {
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--evergreen, #174A3B);
    font-weight: 600;
}
.crrem-lib-collapsible-note__hint {
    color: var(--slate-60, #7A8588);
    font-size: 12px;
    text-align: right;
    transition: opacity 160ms ease;
}
.crrem-lib-collapsible-note[open] .crrem-lib-collapsible-note__hint { opacity: 0; pointer-events: none; }
.crrem-lib-collapsible-note__chevron {
    color: var(--evergreen, #174A3B);
    font-size: 22px;
    transition: transform 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
    line-height: 1;
}
.crrem-lib-collapsible-note[open] .crrem-lib-collapsible-note__chevron { transform: rotate(180deg); }
.crrem-lib-collapsible-note__body {
    padding: 4px 18px 18px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--slate, #213338);
    animation: crrem-lib-note-fade 240ms ease both;
}
.crrem-lib-collapsible-note__body a {
    color: var(--evergreen, #174A3B);
    text-decoration: none;
    border-bottom: 1px dotted currentColor;
}
.crrem-lib-collapsible-note__body a:hover { border-bottom-style: solid; }
@keyframes crrem-lib-note-fade {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

/* ──────────────────────────────────────────────────────────────────────
 * Assessment Guide — collapsible step accordions.
 *
 * Each guide-item is now a native <details> element that can be expanded
 * or collapsed independently. Closed by default per Andrea's review:
 *   "Can you put each step in an accordion / collapsible so it's not
 *    so much text immediately?"
 *
 * The summary is the existing .guide-item-head row (number badge + H3).
 * We hide the browser's disclosure marker, add a custom chevron pinned
 * to the right, and animate it on open. The whole row is the click
 * target. Deep-link anchors auto-open via JS.
 * ────────────────────────────────────────────────────────────────────── */
.crrem-lib-page-main[data-component="assessment-guide"] .ref-content details.guide-item--collapsible {
    /* override the underlying border-top behavior so each item reads as a
       discrete card with a hairline border; gives users a clearer click
       target than a top border alone. */
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 0;
    margin: 6px 0 0;
    transition: background-color 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}
.crrem-lib-page-main[data-component="assessment-guide"] .ref-content details.guide-item--collapsible:hover {
    border-color: rgba(33, 51, 56, 0.10);
    background: rgba(255, 255, 255, 0.55);
}
.crrem-lib-page-main[data-component="assessment-guide"] .ref-content details.guide-item--collapsible[open] {
    background: #FAFBF9;
    border-color: rgba(23, 74, 59, 0.12);
    box-shadow: 0 1px 0 rgba(33, 51, 56, 0.04), 0 12px 28px -18px rgba(23, 74, 59, 0.18);
}
.crrem-lib-page-main[data-component="assessment-guide"] .ref-content details.guide-item--collapsible:target {
    border-color: rgba(214, 162, 74, 0.45);
    box-shadow: 0 0 0 3px rgba(214, 162, 74, 0.12), 0 12px 28px -18px rgba(23, 74, 59, 0.18);
}

/* Summary: the click target.
 * - Hide both the modern ::marker and the legacy WebKit marker
 * - Use grid so the existing .num/.h3 align as before, plus a chevron
 * - Inherit the existing .guide-item-head colors and weights
 */
.crrem-lib-page-main[data-component="assessment-guide"] .ref-content details.guide-item--collapsible > summary.guide-item-head {
    list-style: none;
    cursor: pointer;
    padding: 18px 18px 18px 16px;
    margin: 0;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 16px;
    align-items: center;
    border-top: none;
    border-radius: 8px;
    transition: background-color 200ms ease;
    user-select: none;
}
.crrem-lib-page-main[data-component="assessment-guide"] .ref-content details.guide-item--collapsible > summary.guide-item-head::-webkit-details-marker {
    display: none;
}
.crrem-lib-page-main[data-component="assessment-guide"] .ref-content details.guide-item--collapsible > summary.guide-item-head::marker {
    content: '';
    display: none;
}
.crrem-lib-page-main[data-component="assessment-guide"] .ref-content details.guide-item--collapsible > summary.guide-item-head:focus-visible {
    outline: 2px solid rgba(47, 111, 133, 0.55);
    outline-offset: -2px;
}
.crrem-lib-page-main[data-component="assessment-guide"] .ref-content details.guide-item--collapsible > summary.guide-item-head:hover h3,
.crrem-lib-page-main[data-component="assessment-guide"] .ref-content details.guide-item--collapsible[open] > summary.guide-item-head h3 {
    color: var(--evergreen);
}

/* Chevron — appended via ::after on the summary */
.crrem-lib-page-main[data-component="assessment-guide"] .ref-content details.guide-item--collapsible > summary.guide-item-head::after {
    content: 'expand_more';
    font-family: 'Material Symbols Rounded';
    font-size: 24px;
    color: var(--evergreen);
    line-height: 1;
    transform-origin: center;
    transition: transform 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
    opacity: 0.65;
}
.crrem-lib-page-main[data-component="assessment-guide"] .ref-content details.guide-item--collapsible:hover > summary.guide-item-head::after { opacity: 1; }
.crrem-lib-page-main[data-component="assessment-guide"] .ref-content details.guide-item--collapsible[open] > summary.guide-item-head::after {
    transform: rotate(180deg);
    opacity: 1;
}

/* Body padding so the content visually nests inside the accordion box */
.crrem-lib-page-main[data-component="assessment-guide"] .ref-content details.guide-item--collapsible > :not(summary) {
    margin-left: 16px;
    margin-right: 18px;
}
.crrem-lib-page-main[data-component="assessment-guide"] .ref-content details.guide-item--collapsible > :first-of-type:not(summary) {
    margin-top: 4px;
}
.crrem-lib-page-main[data-component="assessment-guide"] .ref-content details.guide-item--collapsible > :last-of-type:not(summary) {
    margin-bottom: 22px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .crrem-lib-page-main[data-component="assessment-guide"] .ref-content details.guide-item--collapsible,
    .crrem-lib-page-main[data-component="assessment-guide"] .ref-content details.guide-item--collapsible > summary.guide-item-head::after {
        transition: none;
    }
}