/*
 * Pathway Mapper body styles
 *
 * Targets the markup produced by experts/pathway_publisher/service.py:render_pathway_body.
 * Used both by the publisher's preview iframe (locally) and intended for
 * publication alongside the generated page in Cascade so the rendered
 * pathway looks consistent on the public site.
 *
 * WCAG 2.2 AA notes:
 *   - Body text uses #15251f on #ffffff (~14.5:1)
 *   - Muted text uses #4d6259 on #ffffff (~6.6:1)
 *   - Interactive elements have a visible focus indicator
 *   - prefers-reduced-motion respected
 *   - reflow tested at 320px
 *   - color is never the only signal: COI chips include the COI code text
 */

/* ----- Site-chrome override: hide the back-to-top banner on pathway pages.
 * The banner (`<section class="back-to-top-bar js-visible">`, JS-toggled)
 * pops in on scroll-up and overlays our sticky pathway header, hiding
 * the program title — defeats the point of the sticky header. This file
 * is only linked from pathway pages, so the rule scopes itself: other
 * site pages keep the back-to-top behavior. !important needed because
 * the site CSS uses `.back-to-top-bar.js-visible` to display:flex.
 * 2026-05-06: per user request "override the site back to top setting on
 * the pathway pages (and only the pathway pages)". */
.back-to-top-bar { display: none !important; }

.bc-pathway-page {
    --pathway-ink: #15251f;
    --pathway-muted: #4d6259;
    --pathway-surface: #ffffff;
    --pathway-surface-alt: #f7f8f4;
    --pathway-border: #d8e0db;
    --pathway-coi-start: #0b3d2e;
    --pathway-coi-end: #0b3d2e;
    --pathway-coi-deep: #06281f;
    --pathway-coi-soft: #e8f1ed;
    --pathway-coi-on-deep: #ffffff;
    --pathway-coi-on-soft: #06281f;
    /* Vertical offset for the sticky pathway header. 0 by default; the
       body.sticky-header rule below pushes us down by --site-sticky-header-height
       when Butte's site header is docked at the top of the viewport
       (scroll-up gesture). */
    --site-header-offset: 0px;
    /* Height of Butte's site header when docked at top:0 via the
       `body.sticky-header` class. Locked to 59px after user inspected
       the docked header's computed `height` in DevTools 2026-05-06
       (compact variant: logo + hamburger + search, 39px content +
       10px top + 10px bottom padding = 59px total). Per user request
       "lock pathway header to bottom of site header". */
    --site-sticky-header-height: 59px;

    color: var(--pathway-ink, #15251f);
    background: var(--pathway-surface, #ffffff);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.55;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 1rem 3rem;
}

.bc-pathway-page * {
    box-sizing: border-box;
}

.bc-pathway-page a {
    color: var(--pathway-coi-deep, #06281f);
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

.bc-pathway-page a:hover {
    text-decoration-thickness: 2px;
}

.bc-pathway-page a:focus-visible {
    outline: 3px solid var(--pathway-coi-deep, #06281f);
    outline-offset: 2px;
    border-radius: 3px;
}

.bc-pathway-page h1,
.bc-pathway-page h2,
.bc-pathway-page h3 {
    color: var(--pathway-ink, #15251f);
    line-height: 1.2;
    margin: 0 0 0.5rem;
}

.bc-pathway-page h1 { font-size: clamp(27px, 20px + 1.5vw, 41px); }
.bc-pathway-page h2 { font-size: clamp(21px, 18px + 0.8vw, 27px); margin-top: 1.5rem; }
.bc-pathway-page h3 { font-size: 18px; margin-top: 0.25rem; }

.bc-pathway-page p { margin: 0 0 0.75rem; }

/* ----- Sibling award-type nav (toggle between AS/CA/etc. for the same program) ----- */

/* Hidden until the page-format script moves the nav under the sticky header.
   Avoids a brief flash of pills above the header on initial render.
   Trade-off: if JS is disabled, the nav never appears — accepted because
   URL deep-linking still works, and the toggle is a navigation enhancement. */
.bc-pathway-page .bc-pathway-siblings {
    visibility: hidden;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0;
    margin: 0 0 1rem;
    border-bottom: 1px solid var(--pathway-border, #d8e0db);
}

/* Once the JS moves the nav right after .pathway-page-header, the --placed
   class kicks in. We turn the nav into a SECOND sticky band that:
   - matches the header's full-bleed width via the same negative-margin trick
   - sticks to the top of the viewport directly below the header
   - sizes to its content (pill + label) with a small min-height for breathing
     room. Header is ~3rem (h1 line-height 1.2 × ~1.45rem + 1.3rem padding); a
     3rem band lines up visually without leaving the pill swimming in space.
   - The --pathway-header-height var is read but NOT currently set by the
     format JS (the JS just moves the nav). 3rem is the practical default. */
.bc-pathway-page .bc-pathway-siblings--placed {
    visibility: visible;

    /* Full-bleed band, same as the header */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-bottom: 1.25rem;

    /* Stick to the top right below the header */
    position: sticky;
    top: calc(var(--site-header-offset, 0px) + var(--pathway-header-height, 3rem));
    z-index: 49; /* one below the header's 50 */

    /* Fixed band height + no border, with !important to defeat any conflict
       from Butte's main.css `nav { ... }` defaults. Earlier centering attempts
       kept failing because something upstream was still touching this band's
       padding or alignment — the !important guarantees a known-good value. */
    height: 3.25rem !important;
    padding: 0 1rem !important;
    border: none !important;
    /* Re-assert from base — nav default `display: block` from a stylesheet
       loaded LATER would otherwise strip the flex layout. */
    display: flex !important;
    align-items: center !important;

    /* Visual differentiation: lighter than the deep header but still tied to COI */
    background: var(--pathway-coi-soft, #e8f1ed);
    color: var(--pathway-coi-on-soft, #06281f);

    /* Layout */
    gap: 0.5rem 1rem;
}

/* Belt-and-braces: explicitly null the default block-margin from <ul> and
   <li> so neither offsets the pill within the band. Browser defaults often
   set <ul> margin-top/-bottom to 1em and <li> margin to 0, but third-party
   stylesheets sometimes add list margins that bleed in. */
.bc-pathway-page .bc-pathway-siblings__list,
.bc-pathway-page .bc-pathway-sibling {
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.bc-pathway-page .bc-pathway-siblings__label {
    font-size: 18px;
    font-weight: 600;
    color: var(--pathway-muted, #4d6259);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    /* Tight line-height so the label glyph sits at the visual center of its
       flex box. With the inherited 1.5 line-height the glyph sat near the top
       of a taller box and read as misaligned against the 2.75rem pill. */
    line-height: 1;
    /* Belt-and-braces: explicitly center the label cross-axis within the
       sticky band even if a future style overrides the parent align-items. */
    align-self: center;
}

.bc-pathway-page .bc-pathway-siblings__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Pill base — applies to both link siblings and the active <span>.
   Reset (2026-05-04): the prior padding-asymmetry approach to "fix" optical
   centering kept producing under-/over-corrected results. Cleaner design:
     - Fixed `height` (not min-height) so the pill is exactly one size
     - Zero vertical padding, horizontal-only — no stacking of padding +
       border + content into an oversized box that exaggerates centering
     - `line-height: 1` so the glyph's line-box equals the glyph height
     - Pill height (2.25rem ≈ 36px) is proportional to the label and
       still meets WCAG 2.2 AA touch target (24×24 minimum)
     - Font-size 0.9rem matches the label closer so the pill no longer
       visually swamps the "AWARD TYPE:" text */
.bc-pathway-page .bc-pathway-sibling > a,
.bc-pathway-page .bc-pathway-sibling > span {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.25rem;
    min-width: 3rem;
    padding: 0 0.95rem;
    border: 1.5px solid var(--pathway-coi-deep, #06281f);
    border-radius: 999px;
    font-weight: 600;
    font-size: 18px;
    text-decoration: none;
    line-height: 1;
}

@media (prefers-reduced-motion: no-preference) {
    .bc-pathway-page .bc-pathway-sibling > a {
        transition: background-color 0.15s ease, color 0.15s ease;
    }
}

/* Inactive (sibling link) — outlined pill */
.bc-pathway-page .bc-pathway-sibling > a {
    color: var(--pathway-coi-deep, #06281f);
    background: transparent;
}

.bc-pathway-page .bc-pathway-sibling > a:hover {
    background: var(--pathway-coi-soft, #e8f1ed);
    text-decoration: none;
}

.bc-pathway-page .bc-pathway-sibling > a:focus-visible {
    outline: 3px solid var(--pathway-coi-deep, #06281f);
    outline-offset: 2px;
}

/* Active (current page's award type) — filled pill, non-interactive */
.bc-pathway-page .bc-pathway-sibling--active > span {
    background: var(--pathway-coi-deep, #06281f);
    color: var(--pathway-coi-on-deep, #ffffff);
    cursor: default;
}

/* ----- Sticky page header (COI-branded: title left, COI badge right) ----- */

/* The publisher's inline <style> sets `overflow-x: clip` on .bc-pathway-page
   to prevent stray horizontal scroll. That clipping prevents our 100vw header
   from extending past the article. Override on the OUTER article only (via
   :not on the inner) so the header can break out, but inner content overflow
   is still controlled by the document body's overflow defaults. */
article.bc-pathway-page {
    overflow-x: visible;
}

/* Selector uses `article.bc-pathway-page` (0,2,1) instead of `.bc-pathway-page`
   (0,2,0) so we beat the publisher's inline <style> block which uses the
   lower-specificity selector. The inline <style> is a stale snapshot the
   publisher emits inside the body HTML; until the publisher stops doing that,
   we have to win via specificity. */
article.bc-pathway-page .pathway-page-header {
    position: sticky;
    top: var(--site-header-offset, 0);
    z-index: 50;
    background: var(--pathway-coi-deep, #06281f);
    color: var(--pathway-coi-on-deep, #ffffff);
    padding: 0;
    border-bottom: 6px solid;
    border-image: linear-gradient(90deg, var(--pathway-coi-start, #0b3d2e), var(--pathway-coi-end, #0b3d2e)) 1;
    /* Slide in unison with Butte's site header. Matches exactly the
       site header's computed transition (`top 0.3s ease`, captured from
       DevTools 2026-05-06) so the two elements travel at identical
       velocity with no mid-animation gap. Both elements use the `top`
       property — they animate the same primitive against the same
       trigger (body.sticky-header class flip). */
    transition: top 0.3s ease;
    /* Full viewport-width breakout. */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-bottom: 1.25rem;
}

/* When `body.sticky-header` is set (Butte's scroll-up gesture has docked
   the site header at the top of the viewport), push the pathway header
   down by the site header's height so it sits flush against the site
   header's bottom edge. Without this, both headers would stack at top:0
   and the site header would obscure the pathway header.

   When the class is absent (scrolling DOWN, or at top of page) the
   pathway header sits at top:0 — the site header is either off-screen
   above or in the natural document flow above us. Either way, top:0
   keeps our title visible without leaving a permanent dead zone.

   2026-05-06: per user request to lock the pathway header to the bottom
   of the site header which dynamically exposes/hides on scroll. */
body.sticky-header article.bc-pathway-page .pathway-page-header {
    top: var(--site-sticky-header-height, 100px);
}

/* When the award-type band has been placed directly under the header (post-JS),
   collapse the header's bottom margin so the two stay flush — both at scroll-top
   AND when both stick to the viewport (their sticky offsets are configured to
   meet exactly, but a static-flow gap would otherwise show during scroll). The
   band carries its own margin-bottom: 1.25rem to preserve spacing to the body. */
article.bc-pathway-page .pathway-page-header:has(+ .bc-pathway-siblings--placed) {
    margin-bottom: 0;
}

.pathway-page-header-inner {
    max-width: 1180px;
    margin: 0 auto;
    /* Asymmetric padding so the meta row ("+ details", "Share my plan ▾")
       hugs the bottom-border accent. Top padding stays generous; bottom
       is the smallest visible gap so the labels nearly kiss the olive
       border. 2026-05-06 per user "drop to .05rem". */
    padding: 0.85rem 1rem 0.05rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.bc-pathway-page .pathway-page-header-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
}
.bc-pathway-page .pathway-page-header-row-main {
    /* Two-column grid so the COI badge ALWAYS sits in its own right
       column regardless of how the title + award pills wrap. With the
       inherited flex+wrap layout, long titles plus multiple award pills
       pushed the badge onto a wrapped line, where justify-content:
       space-between then aligned it to the LEFT (it was the only item
       on that line). 2026-05-06 per user "the coi pill needs to always
       be at the top right of the pathway header".
       minmax(0, 1fr) lets the title column shrink to 0 so the badge
       reserves its column even on narrow viewports. */
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 0.5rem 1rem;
}
.bc-pathway-page .pathway-page-header-row-meta {
    /* Pull "+ details" and "Share my plan ▾" to the bottom of the row so
       their visible text hugs the olive border. Without this, the row
       inherits align-items:center and the 44px-tall "+ details" box
       centers its text ~13px above the bottom of the row. 2026-05-06 per
       user "+ details and Share my plan line needs to go down more". */
    align-items: flex-end;
}
.bc-pathway-page .pathway-page-header-row-main .pathway-page-header-title {
    flex: 1 1 auto;
    min-width: 0;
}

/* Title-block (h1 + inline pills + subtitle) on the left, COI badge
   anchored to the upper-right. h1 contains the title text PLUS the
   award pills as inline siblings — they wrap with the title on narrow
   viewports rather than getting demoted to their own row. */
.bc-pathway-page .pathway-page-header-titleblock {
    flex: 1 1 auto;
    min-width: 0;
    /* Flex-column with space-between so the "+ details" subtitle pins
       to the BOTTOM of the title block — same as the right-side stack
       does for "Share my plan". Both columns are align-items:stretched
       to the same height, so their bottom-pinned items share a baseline.
       2026-05-06 per user "+ details and share my plan should have same
       text with a shared baseline". */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* h1 in the header — title text + inline pills. Use word-spacing/gap via
   margin on the pills so they sit cleanly to the right of the title with
   visible breathing room when on the same line, and wrap to the next line
   together as a group when the viewport narrows. */
.bc-pathway-page .pathway-page-header-title {
    margin: 0;
    /* Allow flow inline so pills can be inline-flex children that wrap with
       the title text. font-size/weight/color inherit from the existing
       .pathway-page-header h1 rule. */
    word-spacing: 0.1em;
}

/* Award pills inline with the h1 title — smaller font (relative to h1)
   so they read as supplementary metadata, not a competing heading. */
/* Pills inline with h1 — see consolidated rules in the
   "Award-type pills inlined into the header" block below. */

/* "+ details" / "- details" subtitle under the title — a real button that
   controls the expanded program details body. */
.bc-pathway-page .pathway-page-header-subtitle {
    display: inline-flex;
    /* flex-end (was center) so the "+ details" text sits at the BOTTOM of
       its 44px touch-target box, lining up with "Share my plan ▾" (which
       is at its natural ~18px height). The row itself uses flex-end too,
       so the bottom of this 44px box hugs the bottom of the row.
       2026-05-06 per user "+ details and Share my plan line needs to go
       down more". */
    align-items: flex-end;
    min-height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 18px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1;
    letter-spacing: 0.02em;
    cursor: pointer;
}
/* Icon character lives ENTIRELY in ::before so the +/− swap doesn't
   collapse the icon's width (earlier we used font-size:0 to hide an
   inline "+" character, which collapsed the em-based width and caused
   the "−" pseudo-element to overlap the "details" text). The span
   itself stays empty in the markup. */
.bc-pathway-page .pathway-page-header-subtitle-icon {
    display: inline-block;
    width: 0.85em;
    text-align: center;
    margin-right: 0.1em;
    font-weight: 700;
}
.bc-pathway-page .pathway-page-header-subtitle-icon::before {
    content: "+";
}
/* When the header details body is expanded, swap "+" to "-". */
.bc-pathway-page .pathway-page-header-subtitle[aria-expanded="true"] .pathway-page-header-subtitle-icon::before {
    content: "−";
}
.bc-pathway-page .pathway-page-header-subtitle:hover {
    color: #ffffff;
}
.bc-pathway-page .pathway-page-header-subtitle:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 3px;
    border-radius: 4px;
}

.pathway-page-header h1 {
    color: var(--pathway-coi-on-deep, #ffffff);
    /* Bumped 2026-05-04 to read closer to a Butte main page-title (~2-2.6rem).
       Old range 1.05–1.45rem was undersized for the visual weight of a
       sticky branded header; titles like "COMPUTER SYSTEM ADMINISTRATION
       PROGRAM MAP" need to feel like the page heading, not a subheading. */
    font-size: clamp(24px, 17px + 1.4vw, 36px);
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
    flex: 1 1 auto;
    min-width: 0;
}

/* ----- Expandable header -----
   The sticky <header> remains a direct child of <article> so sticky behavior
   is not limited by a wrapping disclosure. The body is visible without script;
   the static enhancement script collapses it and maintains aria-expanded. */

.bc-pathway-page .pathway-page-header-body[hidden] {
    display: none;
}

/* Body shown when header is open — sits between the sticky bar and the
   page content. Styled like a card with the COI-soft background.
   Selector covers BOTH the legacy class (.pathway-page-header-extras
   used by older _render_sticky_header output) AND the new wrapper
   (.pathway-page-header-body introduced 2026-05-06). */
.bc-pathway-page .pathway-page-header-extras,
.bc-pathway-page .pathway-page-header-body {
    background: var(--pathway-coi-soft, #e8f1ed);
    color: var(--pathway-coi-on-soft, #06281f);
    /* Full-bleed to match the header bar width. */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-bottom: 1.25rem;
    padding: 1.1rem max(1rem, calc(50vw - 590px)) 1.4rem;
    /* Subtle separator from the body content below */
    border-bottom: 1px solid var(--pathway-border, #d8e0db);
}
.bc-pathway-page .pathway-page-header-dl {
    margin: 0 0 1rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.6rem 1.5rem;
}
.bc-pathway-page .pathway-page-header-dl > div {
    display: grid;
    gap: 0.15rem;
}
.bc-pathway-page .pathway-page-header-dl dt {
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--pathway-muted, #4d6259);
    font-weight: 600;
}
.bc-pathway-page .pathway-page-header-dl dd {
    margin: 0;
    font-size: 18px;
    color: var(--pathway-ink, #15251f);
}

.bc-pathway-page .pathway-page-header-description {
    font-size: 18px;
    line-height: 1.55;
    color: var(--pathway-ink, #15251f);
    max-width: 78ch;
}
.bc-pathway-page .pathway-page-header-description p {
    margin: 0 0 0.75rem;
}
.bc-pathway-page .pathway-page-header-description p:last-child {
    margin-bottom: 0;
}

/* Hide the old standalone snapshot accordion now that program details live
   inside the expandable header. */
.bc-pathway-page .pathway-snapshot-accordion {
    display: none !important;
}

/* ----- Award-type pills inlined into the header (2026-05-04) -----
   Replaces the old standalone .bc-pathway-siblings--placed sticky band that
   slid under the page header during scroll. With pills inside the header,
   one sticky element does it all — no overlap, no z-index war. */

/* Pills are now INLINE with the h1 title (a span inside h1) — they wrap
   with the title text on narrow viewports and read as visual extensions
   of the heading. Smaller than h1 itself so they don't compete. */
.bc-pathway-page .pathway-header-awards {
    display: inline-flex;
    flex-wrap: wrap;
    /* baseline alignment so the pill TEXT baseline matches the h1 text
       baseline (was 'center' which floated the pill mid-x-height and read
       as misaligned). Per design feedback "align text and pill baseline"
       2026-05-06. */
    align-items: baseline;
    gap: 0.4rem;
    margin-left: 0.65rem;
    padding: 0;
    vertical-align: baseline;
}

.bc-pathway-page .pathway-header-award {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 1.85rem;
    padding: 0 0.75rem;
    /* Inactive (sibling-link) baseline — thin outlined pill, semi-transparent
       white text/border so it reads as secondary against the active solid
       pill. The active rule below makes a stronger contrast jump. */
    border: 1.5px solid rgba(255, 255, 255, 0.55);
    border-radius: 999px;
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.75);
    background: transparent;
    text-decoration: none;
    white-space: nowrap;
}

@media (prefers-reduced-motion: no-preference) {
    .bc-pathway-page a.pathway-header-award {
        transition: background-color 0.15s ease, color 0.15s ease;
    }
}

.bc-pathway-page a.pathway-header-award:hover {
    background: rgba(255, 255, 255, 0.18);
    text-decoration: none;
}

.bc-pathway-page a.pathway-header-award:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 2px;
}

/* Active (current page's award type) — filled pill, non-interactive.
   Class name uses single hyphen (not BEM `--active`) because the inline
   <style> block runs through Cascade's SAX HTML normalizer, which wraps
   <style> contents in legacy `<!-- ... -->` comments and rejects any `--`
   sequence inside. The linked CSS is unconstrained but we keep names in
   sync to avoid bugs when the inline copy is the only one that loads. */
.bc-pathway-page .pathway-header-award-active {
    /* Strong active state — solid white pill, dark COI text, slightly
       heavier weight. Was a faint white tint that read nearly identical
       to the inactive sibling pill. 2026-05-06 per user feedback "we
       need a larger difference when AS Degree or Certificate of
       Achievement are selected and not selected. When selected it
       should be very prominent". */
    background: #ffffff;
    color: var(--pathway-coi-deep, #06281f);
    border-color: #ffffff;
    font-weight: 700;
    cursor: default;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25);
}

/* Hide the legacy standalone band emitted by the page format. The format
   wraps a <nav class="bc-pathway-siblings"> around the award/sibling pills
   and JS moves it post-load — that's the band that sat at z-index 49 and
   slid under the header during scroll. With pills inlined into the header
   now, the standalone nav is dead weight; suppress it without needing a
   format edit (which the API user can't perform). Descendant selector
   catches it whether it's a direct child of the outer or inner article. */
.bc-pathway-page .bc-pathway-siblings,
.bc-pathway-page .bc-pathway-siblings--placed {
    display: none !important;
}

/* COI badge is now an <a> linking to the COI's index page (was <span>).
   Strip the default underline/color so the badge keeps its branded look,
   and add hover/focus styles so it reads as interactive. */
a.pathway-coi-badge,
.pathway-coi-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    /* Solid coi-deep (matches header banner) instead of the lighter
       coi-start→coi-end gradient. The gradient drove white-text contrast
       below WCAG AA (~2.4:1 at the lighter end) — solid deep gives ~10:1. */
    background: var(--pathway-coi-deep, #06281f);
    color: #ffffff !important;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 0.4rem 0.85rem 0.4rem 0.5rem;
    font-size: 18px;
    flex: 0 0 auto;
    text-decoration: none;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.18);
}

@media (prefers-reduced-motion: no-preference) {
    a.pathway-coi-badge {
        transition: box-shadow 0.15s ease, transform 0.15s ease;
    }
}

a.pathway-coi-badge:hover {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35);
    text-decoration: none;
}

a.pathway-coi-badge:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 2px;
}

.pathway-coi-badge-mark {
    /* Circular slot for the COI logo. The renderer always inlines the logo as
       a base64 data URL, so we no longer need a white backplate as a missing-
       image fallback. The slot is transparent; the COI logo sits directly on
       the gradient badge. */
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: transparent;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.pathway-coi-badge-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    box-sizing: border-box;
    background: transparent;
}

@media (max-width: 480px) {
    .pathway-coi-badge-code {
        /* Keep the badge compact on phones; the aria-label still announces. */
        font-size: 18px;
    }
}

.pathway-kicker {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 18px;
    font-weight: 700;
    color: var(--pathway-coi-deep, #06281f);
    margin: 0 0 0.35rem;
}

/* Official-catalog reference link in the kicker. Resets the kicker's
   uppercase/letterspacing/bold so it reads as a normal sentence, sitting
   below the award block. 2026-05-17. */
.bc-pathway-page .pathway-kicker-catalog {
    display: inline-block;
    margin-top: 0.4rem;
    text-transform: none;
    letter-spacing: normal;
    font-size: 14px;
    font-weight: 400;
    color: var(--pathway-coi-deep, #06281f);
    text-decoration: underline;
}
.bc-pathway-page .pathway-kicker-catalog:hover,
.bc-pathway-page .pathway-kicker-catalog:focus-visible {
    text-decoration: none;
}

/* Two-row kicker (title row + award row). Each span is block-level so
   they stack; title wraps naturally on long names. 2026-05-08. */
.bc-pathway-page .pathway-kicker > .pathway-kicker-title {
    display: block;
}
.bc-pathway-page .pathway-kicker > .pathway-kicker-award {
    display: block;
    font-weight: 600;
    letter-spacing: 0.08em;
    opacity: 0.85;
    margin-top: 0.15rem;
    /* Keep "AS-T DEGREE" intact rather than breaking mid-word at
       the dash. 2026-05-08 per user "this shouldn't wrap when selected". */
    white-space: nowrap;
}

/* Award-type disclosure (2026-05-14). Click the "AS DEGREE" /
   "AA-T DEGREE" subtitle to reveal an explainer about the award type,
   GE pattern, and (for transfer degrees) the ADT framework. Browser
   default disclosure markers are hidden across vendors. !important
   because some browsers cascade linked CSS after inline in a way that
   reintroduces the default marker. */
.bc-pathway-page .pathway-kicker-award-details {
    display: block;
    margin-top: 0.15rem;
}
.bc-pathway-page .pathway-kicker-award-details > summary {
    display: inline-flex !important;
    align-items: center;
    gap: 0.55rem;
    cursor: pointer;
    list-style: none !important;
    font-weight: 600;
    letter-spacing: 0.08em;
    opacity: 0.85;
    white-space: nowrap;
    min-height: 24px;
    color: inherit;
}
.bc-pathway-page .pathway-kicker-award-details > summary::-webkit-details-marker {
    display: none !important;
}
.bc-pathway-page .pathway-kicker-award-details > summary::marker {
    display: none !important;
    content: "" !important;
}
.bc-pathway-page .pathway-kicker-award-details > summary::before {
    content: none;
}
.bc-pathway-page .pathway-kicker-award-details > summary:hover,
.bc-pathway-page .pathway-kicker-award-details > summary:focus-visible {
    opacity: 1;
    outline: none;
}
.bc-pathway-page .pathway-kicker-award-caret {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2em;
    height: 1.2em;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    font-size: 0.85em;
    line-height: 1;
    font-weight: 700;
    color: inherit;
    transition: transform 0.15s ease-out;
}
.bc-pathway-page .pathway-kicker-award-details[open] > summary .pathway-kicker-award-caret {
    transform: rotate(45deg);
}
.bc-pathway-page .pathway-kicker-award-body {
    background: #ffffff;
    color: var(--pathway-coi-deep, #06281f);
    border: 1px solid var(--pathway-coi-deep, #06281f);
    border-radius: 8px;
    padding: 0.85rem 1.1rem;
    margin-top: 0.65rem;
    max-width: 760px;
    white-space: normal;
    letter-spacing: normal;
    opacity: 1;
    font-weight: 400;
}
.bc-pathway-page .pathway-kicker-award-body p {
    margin: 0 0 0.65rem;
    font-size: 15px;
    line-height: 1.55;
}
.bc-pathway-page .pathway-kicker-award-body p:last-child {
    margin-bottom: 0;
}
.bc-pathway-page .pathway-kicker-award-body strong {
    font-weight: 700;
}
@media (prefers-reduced-motion: reduce) {
    .bc-pathway-page .pathway-kicker-award-caret {
        transition: none;
    }
}

/* ----- Quick actions ----- */

.pathway-actions {
    margin-bottom: 1.25rem;
}

.pathway-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: stretch;
}

/* Mobile: stack the buttons in a single column with full-width tap
   targets and consistent spacing. The default flex-wrap layout looks
   cramped + uneven on narrow viewports because each button sizes to
   its own content width (and they touch when wrapping with a small
   gap). 2026-05-06 per user "button spacing is not great in the
   mobile format". */
@media (max-width: 640px) {
    .bc-pathway-page .pathway-action-row {
        flex-direction: column;
        /* 2026-05-08 per user: more breathing room between stacked
           CTAs on mobile (was 0.75rem, felt cramped between Program
           Schedule Report and Meet With A Counselor). */
        gap: 1rem;
    }
    /* Plain anchor buttons (.cta) full-width.
       The "Map Class Schedule" picker is wrapped in a <details>, so we
       also stretch the wrapper AND its <summary> trigger so the bar
       spans the full row on mobile. 2026-05-06 per user "the map class
       schedule bar needs to span full width in mobile". */
    .bc-pathway-page .pathway-action-row > .cta,
    .bc-pathway-page .pathway-action-row > .pathway-schedule-picker,
    .bc-pathway-page .pathway-action-row > .pathway-schedule-picker > .pathway-schedule-picker-trigger {
        width: 100%;
        text-align: center;
        box-sizing: border-box;
    }
}

/* Intermediate band (above mobile-stack, below the width where all three
   actions fit on one row): the primary Map Class Schedule picker takes its
   own full row and the two secondary CTAs (Program Schedule Report, Meet
   With A Counselor) share the second row. Without this, flex wrap split
   them primary+secondary / orphaned-secondary. 2026-06 per user "If the
   buttons have to split, put the schedule report and counselor button on
   the same line". */
@media (min-width: 641px) and (max-width: 999px) {
    .bc-pathway-page .pathway-action-row > .pathway-schedule-picker {
        flex: 1 1 100%;
    }
    .bc-pathway-page .pathway-action-row > .pathway-schedule-picker > .pathway-schedule-picker-trigger {
        width: 100%;
    }
    .bc-pathway-page .pathway-action-row > .cta {
        flex: 1 1 calc(50% - 0.5rem);
    }
}

/* `.pathway-action` is now ONLY a layout hook — visual styling comes
   from Butte's site-standard `.btn` + color variant (`btn-yellow` for
   primary, `btn-black-alt` for secondary). This avoids inventing a
   parallel button system and keeps the pathway page consistent with
   the rest of the site. 2026-05-06 per user request "standardize the
   buttons with primary and secondary buttons on the site". */
.bc-pathway-page .pathway-action {
    /* Equal vertical alignment for the wrap row + minimum tap target.
       justify-content centers the button's text label horizontally —
       needed because `display: inline-flex` overrides .cta's
       `text-align: center` (text-align doesn't apply to flex items;
       only justify-content does). Without this, when the action row
       stacks full-width on mobile the secondary buttons' text
       left-aligns. 2026-05-07 per user "in compressed format the
       butte college catalog and meet with a counselor text is not
       centered in the box". */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    /* Share the action row evenly; a wrapped orphan stretches full-row so
       intermediate widths read as intentional (2-up + full-width) instead
       of a ragged short orphan. nowrap keeps labels on one line — the CTAs
       are height:44px / line-height:100%, so a mid-label wrap cramps the
       text. 2026-06 per user (intermediate-state cleanup). */
    flex: 1 0 auto;
    white-space: nowrap;
}

/* Inlined dev.butte.edu site-standard CTA styles.
   Values copied from DevTools Computed dump on a live `.cta.cta--button`
   element 2026-05-06 so the pathway buttons match the rest of the new
   dev site exactly, regardless of whether the page template loads
   the site CSS asset. Scoped to .bc-pathway-page so they don't leak.

   Primary CTA (`cta cta--button`): gold filled, 2px gold border,
   black text uppercase, 5px radius, 0.3s transition.

   Secondary (`cta cta--link`): text-link variant — same typography
   but no background, underlined. Tune if your dev site uses a
   different secondary treatment (paste a Computed dump for one and
   I'll match exactly). */
/* Base .cta — values from the dev site's actual rules (DevTools dump
   2026-05-06). Note: dev site uses `font-size: 1.6rem` with
   `html { font-size: 10px }` (= 16px effective). Pathway pages don't
   set html base size, so we use absolute 16px to render identically.
   `line-height: 100%` and `padding: 12px 16px` give the dev's exact
   44px total button height. */
.bc-pathway-page .cta {
    display: inline-block;
    padding: 12px 16px;
    border-radius: 5px;
    overflow: hidden;
    color: #000;
    font-family: "Barlow", serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 100%;
    text-transform: uppercase;
    text-decoration: none;
    transition: 0.3s ease;
    cursor: pointer;
    box-sizing: border-box;
    background-image: none;
    /* Center button text so wrapping anchors look balanced (esp. on
       mobile where the action row stacks full-width). 2026-05-06 per
       user "text needs to always be centered in the box". */
    text-align: center;
}
.bc-pathway-page .cta--button {
    background: #eaab00;
    border: 2px solid #eaab00;
    color: #000;
    /* Explicit height to match dev's computed-height of 44px and to
       guarantee both .cta--button and .cta--link siblings end up
       identical regardless of font fallback / line-height drift.
       2026-05-06 per user "the map class schedule button is still a
       different height than the other buttons. needs to be the same
       as the other two." */
    height: 44px;
    box-sizing: border-box;
}
.bc-pathway-page .cta--link {
    background-color: rgba(0, 0, 0, 0);
    color: #000;
    border: 2px solid #A8AE4F;
    height: 44px;
    box-sizing: border-box;
}
/* Hover states per DevTools dumps 2026-05-06:
   - `.cta:hover` zeroes out background-image (defensive override of the
     inherited `a:hover` gradient that would otherwise show through)
   - `.cta--button:hover` inverts to black-on-white (gold→black)
   - `.cta--link:hover` darkens the border (olive→black) */
.bc-pathway-page .cta:hover {
    background-image: none;
}
/* Hover ONLY — matching the dev site (which doesn't apply the inversion
   on :focus). Earlier I added :focus too, but that triggered the
   black/white inversion whenever <summary> got focus from a click on
   the schedule-picker (Map Class Schedule), making the button stay
   black after opening the dropdown. 2026-05-06 per user "the button
   change fucked up the styling". Keyboard focus rings come from
   :focus-visible below — visible only when nav is via keyboard. */
.bc-pathway-page .cta--button:hover {
    color: #fff;
    background: #000;
    border: 2px solid #000;
    text-decoration: none;
}
.bc-pathway-page .cta--link:hover {
    border: 2px solid #000;
    text-decoration: none;
}
.bc-pathway-page .cta:focus-visible {
    outline: 3px solid var(--pathway-coi-deep, #06281f);
    outline-offset: 2px;
}

/* Responsive bump at ≥700px viewport, matching dev's `.cta` media query. */
@media screen and (min-width: 700px) {
    .bc-pathway-page .cta {
        font-size: 18px;
        padding: 16px 20px;
    }
}

/* Pathway ACTION-ROW buttons: constant metrics at every width. The
   site-wide ≥700px .cta bump above (18px text / 16-20px padding) fought
   these buttons' pinned 44px heights — the text-to-edge spacing visibly
   jumped as the viewport crossed the trigger, and the <summary> trigger
   re-centered differently than the <a> CTAs. Pinning 16px / 12px 16px
   here (after the bump, so it wins) keeps all three buttons identical
   and stable across resizes. The term-head "Class Schedules" pills keep
   their own cta--small metrics. 2026-06 per user "when the text hits the
   resize trigger the vertical spacing changes in the buttons". */
.bc-pathway-page .pathway-action-row .cta,
.bc-pathway-page .pathway-action-row .pathway-schedule-picker-trigger {
    font-size: 16px;
    padding: 12px 16px;
}

/* ----- Class-schedule picker dropdown -----
   Used by:
     - The primary "Map Class Schedule" button in the action row
     - The per-term "Class Schedules" pill in each term-panel head
   <details>/<summary> for the dropdown, list of <a> links inside (one per
   upcoming term). Pure HTML+CSS — no JS needed for the open/close.
   2026-05-06 per user request to add filtered class schedule deep-links. */
.bc-pathway-page .pathway-schedule-picker {
    display: inline-block;
    position: relative;
    /* Zero out any UA default margin on <details> so the picker takes
       only the action-row's `gap: 0.75rem` for spacing — same as the
       `<a class="cta">` siblings. 2026-05-06 per user "standardize
       the space between the map class schedule and the other buttons". */
    margin: 0;
    padding: 0;
}
.bc-pathway-page .pathway-schedule-picker-trigger {
    cursor: pointer;
    list-style: none;
    /* Match the height of sibling .cta buttons in the action row.
       <summary> defaults to display:list-item which doesn't honor the
       .cta height: 44px declaration, so explicitly force inline-flex
       + height. 2026-05-06 per user "the map class schedule button
       should be same height as other buttons". */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    box-sizing: border-box;
}
.bc-pathway-page .pathway-schedule-picker-trigger::-webkit-details-marker {
    display: none;
}
.bc-pathway-page .pathway-schedule-picker-trigger::after {
    content: " \25BE";
    font-size: 1em;
    font-weight: 700;
    margin-left: 0.4em;
    display: inline-block;
}
.bc-pathway-page .pathway-schedule-picker[open] .pathway-schedule-picker-trigger::after {
    content: " \25B4";
}
.bc-pathway-page .pathway-schedule-picker-menu {
    position: absolute;
    top: calc(100% + 0.4rem);
    left: 0;
    z-index: 60;
    min-width: 14rem;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    color: var(--pathway-coi-deep, #06281f);
    border: 1.5px solid var(--pathway-coi-deep, #06281f);
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    padding: 0.5rem;
    gap: 0.15rem;
}
.bc-pathway-page .pathway-schedule-picker-prompt {
    margin: 0 0 0.35rem;
    padding: 0 0.5rem;
    font-size: 14px;
    font-weight: 700;
    color: var(--pathway-muted, #4d6259);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
/* Disclaimer line at the bottom of the picker — explains the URL
   intentionally omits GE area filtering. 2026-05-06 per user. */
.bc-pathway-page .pathway-schedule-picker-note {
    margin: 0.4rem 0 0;
    padding: 0.4rem 0.5rem 0;
    border-top: 1px solid var(--pathway-border, #d8e0db);
    font-size: 12px;
    line-height: 1.4;
    color: var(--pathway-muted, #4d6259);
    font-style: italic;
}
.bc-pathway-page .pathway-schedule-picker-note strong {
    color: var(--pathway-coi-deep, #06281f);
    font-weight: 700;
    font-style: normal;
}
.bc-pathway-page .pathway-schedule-picker-option {
    display: block;
    padding: 0.55rem 0.75rem;
    border-radius: 4px;
    color: var(--pathway-coi-deep, #06281f);
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    min-height: 44px;
    line-height: 1.6;
}
.bc-pathway-page .pathway-schedule-picker-option:hover,
.bc-pathway-page .pathway-schedule-picker-option:focus {
    background: var(--pathway-coi-soft, #e8f1ed);
    text-decoration: underline;
}
.bc-pathway-page .pathway-schedule-picker-option:focus-visible {
    outline: 3px solid var(--pathway-coi-deep, #06281f);
    outline-offset: 2px;
}

/* `.cta--small` modifier — same outlined `.cta--link` look but at a
   reduced size for in-context use (per-term "Class Schedules" pill).
   Trimmed padding + smaller font so the term pill sits comfortably
   between the term label and the units chip without crowding on
   narrow viewports. 2026-05-06 per user "make the term class
   schedule buttons use the secondary button color scheme and reduce
   its size a little. it gets cramped on mobile when the unit box
   has a hyphen". */
.bc-pathway-page .cta--small {
    padding: 4px 10px;
    font-size: 12px;
    height: auto;
    min-height: 28px;
    line-height: 1.2;
}
/* When .cta--small is the trigger of a schedule picker, override the
   44px height set on .pathway-schedule-picker-trigger. */
.bc-pathway-page .pathway-schedule-picker-trigger.cta--small {
    height: auto;
    min-height: 28px;
}

/* ----- Share-my-plan subscript (lives in the sticky pathway header) -----
   Sits next to "+ details" as a subscript-style dropdown trigger.
   Styled to match "+ details" — white on dark COI background, no
   border, small caret. Menu pops below with Print / Email options.
   2026-05-06 per user "put share my plan as a kind of subscript on
   the pathway header". */
.bc-pathway-page .pathway-share-subscript {
    display: inline-block;
    position: relative;
    /* margin-left removed 2026-05-06 — share subscript moved out of the
       title block (where it sat inline next to "+ details") into its
       own right-side column at the bottom-right of the header. */
}
.bc-pathway-page .pathway-share-subscript-trigger {
    cursor: pointer;
    list-style: none;
    display: inline-block;
    font-size: 18px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1;
    letter-spacing: 0.02em;
    background: transparent;
    border: 0;
    padding: 0;
}
.bc-pathway-page .pathway-share-subscript-trigger::-webkit-details-marker {
    display: none;
}
.bc-pathway-page .pathway-share-subscript-trigger::after {
    /* Caret bumped from 0.75em → 1em + bold so it reads as a clear
       dropdown affordance. The 0.75em sized it too small to be
       recognizable as a control. 2026-05-06 per user feedback. */
    content: " \25BE";
    font-size: 1em;
    font-weight: 700;
    margin-left: 0.25em;
    display: inline-block;
}
.bc-pathway-page .pathway-share-subscript[open] .pathway-share-subscript-trigger::after {
    content: " \25B4";
}
.bc-pathway-page .pathway-share-subscript-trigger:hover {
    color: #ffffff;
    text-decoration: underline;
}
.bc-pathway-page .pathway-share-subscript-trigger:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}
.bc-pathway-page .pathway-share-subscript-menu {
    position: absolute;
    top: calc(100% + 0.4rem);
    left: 0;
    z-index: 60;
    min-width: 14rem;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    color: var(--pathway-coi-deep, #06281f);
    border: 1.5px solid var(--pathway-coi-deep, #06281f);
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    padding: 0.4rem;
    gap: 0.2rem;
}
.bc-pathway-page .pathway-share-subscript-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.75rem;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--pathway-coi-deep, #06281f);
    font-weight: 600;
    font-size: 18px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    min-height: 44px;
}
.bc-pathway-page .pathway-share-subscript-option:hover {
    background: var(--pathway-coi-soft, #e8f1ed);
}
.bc-pathway-page .pathway-share-subscript-option:focus-visible {
    outline: 3px solid var(--pathway-coi-deep, #06281f);
    outline-offset: 2px;
}

/* ----- Share-my-plan dropdown -----
   The <summary> trigger uses Butte's `.btn .btn-black-alt` for its
   visual style (matches the other secondary actions). Rules below are
   layout-only — no border/background/color overrides. */
.bc-pathway-page .pathway-action-share {
    /* Allow the menu panel to position absolutely below the trigger. */
    display: inline-block;
    position: relative;
    padding: 0;
    border: 0;
    background: transparent;
}

.bc-pathway-page .pathway-action-share-trigger {
    /* Visual styling (background, color, font-weight, padding) comes from
       `.btn .btn-black-alt` on the same element. Rules here only handle
       what the btn classes don't: cursor, list-style strip, dropdown
       indicator. */
    cursor: pointer;
    list-style: none;
}

.bc-pathway-page .pathway-action-share-trigger::-webkit-details-marker {
    display: none;
}

.bc-pathway-page .pathway-action-share-trigger::after {
    content: " \25BE";  /* small down-pointing triangle */
    font-size: 0.75em;
}

.bc-pathway-page .pathway-action-share[open] .pathway-action-share-trigger::after {
    content: " \25B4";  /* small up-pointing triangle */
}

.bc-pathway-page .pathway-action-share-menu {
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 0;
    z-index: 60;
    min-width: 14rem;
    display: flex;
    flex-direction: column;
    background: var(--pathway-surface, #ffffff);
    border: 1.5px solid var(--pathway-coi-deep, #06281f);
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    padding: 0.4rem;
    gap: 0.2rem;
}

.bc-pathway-page .pathway-action-share-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.75rem;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--pathway-coi-deep, #06281f);
    font-weight: 600;
    font-size: 18px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    min-height: 44px;
}

.bc-pathway-page .pathway-action-share-option:hover {
    background: var(--pathway-coi-soft, #e8f1ed);
}

.bc-pathway-page .pathway-action-share-option:focus-visible {
    outline: 3px solid var(--pathway-coi-deep, #06281f);
    outline-offset: 2px;
}

/* ----- Body main column (single column under the sticky header) ----- */

.pathway-body-main {
    display: block;
}

/* ----- Snapshot accordion (collapsed-by-default details panel) ----- */

.bc-pathway-page .pathway-snapshot.pathway-snapshot-accordion {
    background: var(--pathway-surface-alt, #f7f8f4);
    border: 1px solid var(--pathway-border, #d8e0db);
    border-radius: 8px;
    margin: 0 0 1.25rem;
    padding: 0;
}

.pathway-snapshot-accordion[open] {
    background: var(--pathway-coi-soft, #e8f1ed);
}

.pathway-snapshot-accordion summary {
    cursor: pointer;
    list-style: none;
    padding: 0.65rem 1rem;
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    color: var(--pathway-coi-deep, #06281f);
    font-weight: 700;
    border-radius: 8px;
}

.pathway-snapshot-accordion summary::-webkit-details-marker {
    display: none;
}

.pathway-snapshot-accordion summary::before {
    content: "▸";
    display: inline-block;
    flex: 0 0 auto;
    color: var(--pathway-coi-deep, #06281f);
}

@media (prefers-reduced-motion: no-preference) {
    .pathway-snapshot-accordion summary::before {
        transition: transform 150ms ease;
    }
}

.pathway-snapshot-accordion[open] summary::before {
    transform: rotate(90deg);
}

.pathway-snapshot-accordion summary:focus-visible {
    outline: 3px solid var(--pathway-coi-deep, #06281f);
    outline-offset: 2px;
}

.pathway-snapshot-summary-label {
    font-size: 18px;
}

.pathway-snapshot-summary-hint {
    font-size: 18px;
    font-weight: 500;
    color: var(--pathway-muted, #4d6259);
    text-transform: none;
    letter-spacing: normal;
    margin-left: auto;
}

@media (max-width: 480px) {
    .pathway-snapshot-summary-hint {
        display: none;
    }
}

.pathway-snapshot-body {
    padding: 0 1rem 1rem;
}

.pathway-snapshot-accordion dl {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.6rem 1.25rem;
}

.pathway-snapshot-accordion dl > div {
    display: grid;
    gap: 0.1rem;
}

.pathway-snapshot-accordion dt {
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--pathway-muted, #4d6259);
}

.pathway-snapshot-accordion dd {
    margin: 0;
    font-size: 18px;
    color: var(--pathway-ink, #15251f);
}

.pathway-snapshot-coi {
    display: inline-block;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 0.05em;
    color: var(--pathway-coi-on-deep, #ffffff);
    background: var(--pathway-coi-deep, #06281f);
    border-radius: 4px;
    padding: 0.05rem 0.4rem;
    margin-right: 0.3rem;
    text-transform: uppercase;
}

/* ----- Section headings ----- */

.pathway-section {
    margin-top: 2rem;
}

.pathway-section-heading {
    margin-bottom: 0.85rem;
    border-bottom: 1px solid var(--pathway-border, #d8e0db);
    padding-bottom: 0.4rem;
}

.pathway-section-heading h2 {
    margin: 0;
}

.pathway-section-heading .pathway-kicker {
    margin: 0 0 0.1rem;
}

/* ----- Term grid (Semester-by-Semester) ----- */

.pathway-term-grid {
    display: grid;
    /* Min track width 360px (was 260px). Term cards squeezed too narrow
       at 260px when 2 columns fit (e.g., 540-700px viewports), making
       course names wrap awkwardly. 360px → switches to single-column
       earlier and keeps 2-column layouts above ~720px viewport
       where cards have real breathing room. 2026-05-06 per user "the
       term maps cannot squeeze to more than about 90% of the mobile
       view". */
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 1rem;
}

.bc-pathway-page .pathway-term-panel {
    background: var(--pathway-surface, #ffffff);
    border: 1px solid var(--pathway-border, #d8e0db);
    border-top: 3px solid var(--pathway-coi-start, #0b3d2e);
    border-radius: 8px;
    padding: 0.85rem 0.85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

/* Specificity bumped to article.bc-pathway-page to beat the publisher's
   inline <style> snapshot that uses .bc-pathway-page (lower specificity). */
article.bc-pathway-page .pathway-term-label {
    margin: 0;
    color: var(--pathway-coi-deep, #06281f);
    font-size: 20px;
}

.pathway-term-empty {
    margin: 0;
    color: var(--pathway-muted, #4d6259);
    font-size: 18px;
    font-style: italic;
}

/* ----- Per-course mini-cards (inside a term panel) ----- */

.pathway-term-courses {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pathway-course-card {
    /* `position: relative` so children can pin to corners via absolute
       positioning: units → upper-right, "Course details" / "View N options"
       summary → lower-right. Reserved padding on those edges keeps content
       (long titles, notes) from colliding with the pinned elements. */
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
    padding: 0.55rem 4.5rem 2.6rem 0.7rem;
    background: var(--pathway-surface-alt, #f7f8f4);
    border: 1px solid #e1e7e3;
    border-left: 3px solid var(--pathway-coi-start, #0b3d2e);
    border-radius: 5px;
}

/* Cards without a disclosure don't need the extra bottom padding for the
   pinned summary — claw it back so empty space doesn't pad the card. */
.bc-pathway-page .pathway-course-card:not(:has(.pathway-course-detail)):not(:has(.pathway-slot-options)) {
    padding-bottom: 0.55rem;
}

/* Units pinned to the bottom-LEFT of the card so each card reads as a
   3-row block: code (row 1), title (row 2), units + "+ details" (row 3).
   Decoupled from flex flow so the card-head row no longer has to make
   room for it — the title can wrap naturally without pushing the units
   pill off-axis. 2026-05-08 per user "course cards should be 3 rows…
   bottom row units on the left and +details on the right."
   `bottom: 0.05rem` keeps the row flush with the card's bottom edge. */
article.bc-pathway-page .pathway-course-card .pathway-course-units {
    position: absolute;
    top: auto;
    right: auto;
    bottom: 0.05rem;
    left: 0.7rem;
    align-self: auto;
    margin: 0;
}

/* Generic choice cards use a 2-row grid layout (2026-05-08 per user):
   Row 1: choice prose (full width).
   Row 2: units chip (left) + "+ see N choices" summary trigger (right).
   Row 3 (when details is [open]): the option list, spanning full width.

   The `<details>` wrapping summary+fieldset uses ``display: contents`` so
   summary lands in row 2 col 2 and fieldset becomes a grid item in row 3.
   The browser still respects ``[open]`` for show/hide of the fieldset.
   This avoids the earlier bug where the absolute-positioned units chip
   drifted to the bottom of an unfurled article and got buried under the
   option list. */
article.bc-pathway-page .pathway-course-card-generic {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 0.5rem;
    row-gap: 0.4rem;
    align-items: center;
    /* The base ``.pathway-course-card`` rule reserves 4.5rem of
       padding-right + 2.6rem of padding-bottom for the absolute-
       positioned units chip and disclosure summary on real course
       cards. The grid layout for generic choice cards places those
       chips in grid cells instead, so the reserved padding is wasted
       space — and on the right side it visibly squeezes the unfurled
       option list into the left third of the slot. Reclaim it.
       2026-05-08 fix to "extend to close to edge of choice card". */
    padding-right: 0.7rem;
    padding-bottom: 0.55rem;
}
article.bc-pathway-page .pathway-course-card-generic > .pathway-course-card-body {
    grid-column: 1 / -1;
}
article.bc-pathway-page .pathway-course-card-generic > .pathway-course-context {
    grid-column: 1 / -1;
}
article.bc-pathway-page .pathway-course-card-generic > .pathway-course-units {
    /* Override the absolute-positioning rule inherited from the shared
       course-units selector — in the grid layout the chip lives at
       row 2 col 1 (just below the prose, never obscured by the unfurled
       option list). */
    position: static;
    top: auto;
    right: auto;
    align-self: center;
    justify-self: start;
    margin: 0;
}
article.bc-pathway-page .pathway-course-card-generic > .pathway-slot-options {
    /* display:contents promotes the inner <summary> and <fieldset> to
       direct grid items of the article, so they can land in row 2 col 2
       and row 3 spanning full width respectively. The browser still
       hides the fieldset when [open] is absent — display:contents only
       removes the box itself, not its open/close behavior. */
    display: contents;
}
article.bc-pathway-page .pathway-course-card-generic > .pathway-slot-options > summary {
    grid-column: 2;
    justify-self: end;
    align-self: center;
    /* Reset the bottom-right absolute anchoring used in the previous
       layout — the grid placement above does the same job stably. */
    position: static;
    margin: 0;
}
article.bc-pathway-page .pathway-course-card-generic > .pathway-slot-options > .pathway-slot-options-form {
    grid-column: 1 / -1;
    /* The base form rule has ``margin-right: -4.5rem`` and
       ``margin-left: -0.7rem`` to bleed past the legacy padding
       reserved for absolute-positioned chips. The grid layout has
       reclaimed that padding, so reset the margins here — the form
       fills its grid cell edge-to-edge instead of overhanging. */
    margin: 0.4rem 0 0;
    /* Fieldset has a long history of intrinsic-sizing quirks (anonymous
       boxes + min-content defaults). Overriding to flex column with
       explicit 100% width forces it to fill the grid cell so option
       cards inside don't end up "stubby". 2026-05-08 fix. */
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.pathway-course-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    flex: 1 1 auto;
    min-width: 0;
}

/* Course-card text. Specificity 0,2,1 to beat the inline <style>'s 0,2,0.
   Sizes bumped 2026-05-04: course rows were reading too small relative to
   the program header. New scale: code 1.05rem, title 1.15rem, units 1rem. */
article.bc-pathway-page .pathway-course-code {
    font-weight: 700;
    font-size: 18px;
    color: var(--pathway-coi-deep, #06281f);
    letter-spacing: 0.02em;
}

article.bc-pathway-page .pathway-course-title {
    font-size: 20px;
    color: var(--pathway-ink, #15251f);
    line-height: 1.3;
}

article.bc-pathway-page .pathway-course-units {
    flex: 0 0 auto;
    color: var(--pathway-muted, #4d6259);
    font-size: 18px;
    font-weight: 600;
    align-self: center;
    white-space: nowrap;
}

/* ----- Pathway choice groups (details / summary) ----- */

.pathway-choices > .pathway-choice-panel + .pathway-choice-panel {
    margin-top: 0.6rem;
}

.bc-pathway-page .pathway-choice-panel {
    border: 1px solid var(--pathway-border, #d8e0db);
    border-radius: 6px;
    padding: 0.65rem 0.9rem;
    background: var(--pathway-surface, #ffffff);
}

.pathway-choice-panel summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--pathway-coi-deep, #06281f);
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.15rem 0;
    min-height: 24px;
}

.pathway-choice-panel summary::before {
    content: "▸";
    display: inline-block;
    transition: transform 150ms ease;
}

@media (prefers-reduced-motion: reduce) {
    .pathway-choice-panel summary::before { transition: none; }
}

.pathway-choice-panel[open] summary::before {
    transform: rotate(90deg);
}

.pathway-choice-panel summary:focus-visible {
    outline: 3px solid var(--pathway-coi-deep, #06281f);
    outline-offset: 3px;
    border-radius: 4px;
}

.pathway-choice-panel[open] {
    background: var(--pathway-coi-soft, #e8f1ed);
}

.pathway-choice-panel ul {
    margin: 0.5rem 0 0;
    padding-left: 1.25rem;
    display: grid;
    gap: 0.25rem;
}

/* ----- Career connections ----- */

.pathway-career-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.85rem;
}

.bc-pathway-page .pathway-career-panel {
    background: var(--pathway-surface, #ffffff);
    border: 1px solid var(--pathway-border, #d8e0db);
    border-radius: 6px;
    padding: 0.85rem 1rem;
}

.pathway-career-panel h3 {
    margin: 0 0 0.4rem;
    color: var(--pathway-coi-deep, #06281f);
}

.pathway-career-panel ul {
    margin: 0.4rem 0 0;
    padding-left: 1.25rem;
    display: grid;
    gap: 0.2rem;
}

.pathway-career-panel ul li {
    font-size: 18px;
}

.pathway-career-panel em {
    color: var(--pathway-muted, #4d6259);
}

/* ----- Source notes ----- */

.bc-pathway-page .pathway-source-notes {
    margin-top: 2rem;
    padding: 0.85rem 1rem;
    background: var(--pathway-surface-alt, #f7f8f4);
    border-left: 4px solid var(--pathway-coi-start, #0b3d2e);
    border-radius: 4px;
    color: var(--pathway-muted, #4d6259);
    font-size: 18px;
}

.pathway-source-notes h2 {
    font-size: 18px;
    margin: 0 0 0.5rem;
    color: var(--pathway-coi-deep, #06281f);
}

.pathway-source-notes p:last-child {
    margin-bottom: 0;
}

/* ----- Visually-hidden helper for sr-only headings ----- */

.bc-pathway-page .visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ----- Local Job Market section (Adzuna-backed) -----
 * Sits between Career Connections and Source Notes. Each occupation is its
 * own native details accordion: keyboard-operable, AT-announced as a
 * disclosure, no JS dependency. Summary line carries title, SOC code, and
 * count so the closed state is informative on its own (color is never the
 * only signal).
 *
 * WCAG 2.2 AA notes:
 *   - Summary min-height 44px (AAA touch target)
 *   - Pill background contrast meets 4.5:1 against the surface
 *   - Focus indicator on summary AND on the open marker
 */

.bc-pathway-page .pathway-local-market-grid {
    display: grid;
    gap: 0.75rem;
}

.bc-pathway-page .pathway-local-market-occupation {
    background: var(--pathway-surface, #ffffff);
    border: 1px solid var(--pathway-border, #d8e0db);
    border-left: 4px solid var(--pathway-coi-start, #0b3d2e);
    border-radius: 6px;
    padding: 0;
}

.bc-pathway-page .pathway-local-market-occupation > summary {
    cursor: pointer;
    list-style: none;
    padding: 0.85rem 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem 0.85rem;
    color: var(--pathway-coi-deep, #06281f);
    font-weight: 600;
    border-radius: 6px;
    min-height: 44px;
}

.bc-pathway-page .pathway-local-market-occupation > summary::-webkit-details-marker {
    display: none;
}

.bc-pathway-page .pathway-local-market-occupation > summary::before {
    content: "+";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    background: var(--pathway-coi-soft, #e8f1ed);
    color: var(--pathway-coi-deep, #06281f);
    font-weight: 700;
    flex: 0 0 auto;
    line-height: 1;
}

.bc-pathway-page .pathway-local-market-occupation[open] > summary::before {
    content: "\2212";  /* minus sign */
}

.bc-pathway-page .pathway-local-market-occupation > summary:focus-visible {
    outline: 3px solid var(--pathway-coi-deep, #06281f);
    outline-offset: 2px;
}

.bc-pathway-page .pathway-local-market-occ-title {
    font-size: 18px;
    flex: 1 1 auto;
}

.bc-pathway-page .pathway-local-market-occ-soc {
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--pathway-muted, #4d6259);
    font-weight: 600;
    flex: 0 0 auto;
}

.bc-pathway-page .pathway-local-market-occ-count {
    font-size: 18px;
    font-weight: 600;
    color: var(--pathway-coi-deep, #06281f);
    background: var(--pathway-coi-soft, #e8f1ed);
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    flex: 0 0 auto;
}

.bc-pathway-page .pathway-local-market-body {
    padding: 0 1rem 1rem;
    border-top: 1px solid var(--pathway-border, #d8e0db);
    margin-top: 0.25rem;
}

.bc-pathway-page .pathway-local-market-meta {
    margin: 0.85rem 0;
    color: var(--pathway-muted, #4d6259);
    font-size: 18px;
}

.bc-pathway-page .pathway-local-market-subheading {
    font-size: 18px;
    margin: 1rem 0 0.4rem;
    color: var(--pathway-coi-deep, #06281f);
}

.bc-pathway-page .pathway-local-market-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.35rem 0.85rem;
}

.bc-pathway-page .pathway-local-market-list li {
    font-size: 18px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
}

.bc-pathway-page .pathway-local-market-pill {
    background: var(--pathway-surface-alt, #f7f8f4);
    color: var(--pathway-muted, #4d6259);
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    font-size: 18px;
    font-weight: 600;
    flex: 0 0 auto;
}

.bc-pathway-page .pathway-local-market-postings {
    list-style: decimal;
    padding-left: 1.25rem;
    margin: 0.35rem 0 0.85rem;
    display: grid;
    gap: 0.45rem;
}

.bc-pathway-page .pathway-local-market-postings li {
    display: grid;
    gap: 0.1rem;
}

.bc-pathway-page .pathway-local-market-posting-title {
    font-weight: 600;
}

.bc-pathway-page .pathway-local-market-posting-meta {
    color: var(--pathway-muted, #4d6259);
    font-size: 18px;
}

.bc-pathway-page .pathway-local-market-cta {
    margin: 1rem 0 0;
}

.bc-pathway-page .pathway-local-market-cta .pathway-action {
    margin: 0;
}

.bc-pathway-page .pathway-local-market-note {
    color: var(--pathway-muted, #4d6259);
    font-size: 18px;
    margin: 0.85rem 0;
}

.bc-pathway-page .pathway-local-market-disclaimer {
    margin: 1rem 0 0;
    color: var(--pathway-muted, #4d6259);
    font-size: 18px;
    font-style: italic;
}

@media (prefers-reduced-motion: no-preference) {
    .bc-pathway-page .pathway-local-market-occupation[open] > summary::before {
        transition: background-color 120ms ease;
    }
}

/* ----- Rich pathway renderer (multi-emphasis, generic slots, course detail) -----
 * Used when the Acadia payload carries the full pathway/term/course/options
 * structure (real data path). Replaces the simpler legacy term grid rendering.
 *
 * Design notes:
 *   - Generic-slot cards (take-N-from-list) get a gold left-stripe so they
 *     read as "decision points" rather than fixed coursework.
 *   - Real-course cards keep the green stripe and gain a "Course details"
 *     disclosure for description + full prereq/coreq/recommended.
 *   - Course-code references inside prereq text auto-link to sibling cards
 *     via #course-SUBJ-NUM anchors; scroll-margin-top keeps the target
 *     below the sticky header.
 *
 * WCAG 2.2 AA notes:
 *   - All disclosure summaries reach 24px+ (AA) touch height; primary cards
 *     keep 44px (AAA). Color contrast verified for slot-text, slot-badge,
 *     and course-xref combos.
 *   - Prereq cross-links use a 600 weight so the link is identifiable
 *     beyond color.
 */

.bc-pathway-page .pathway-emphasis {
    margin-bottom: 1.5rem;
}

.bc-pathway-page .pathway-emphasis-head {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    margin: 0.5rem 0 0.75rem;
    flex-wrap: wrap;
}

.bc-pathway-page .pathway-emphasis-title {
    margin: 0;
    color: var(--pathway-coi-deep, #06281f);
    font-size: clamp(19px, 17px + 0.4vw, 22px);
}

.bc-pathway-page .pathway-emphasis-units {
    font-size: 18px;
    font-weight: 600;
    color: var(--pathway-coi-deep, #06281f);
    background: var(--pathway-coi-soft, #e8f1ed);
    padding: 0.15rem 0.65rem;
    border-radius: 999px;
}

.bc-pathway-page .pathway-emphasis-header,
.bc-pathway-page .pathway-emphasis-footer {
    margin: 0 0 0.85rem;
    color: var(--pathway-muted, #4d6259);
    font-size: 18px;
    font-style: italic;
}

.bc-pathway-page .pathway-emphasis-footer {
    margin: 1rem 0 0;
}

/* Two-row grid layout (re-applied 2026-05-08 per user). The earlier
   single-row flex didn't give us a stable place for the schedule pill
   when titles wrapped; this layout keeps the row 2 footer compact and
   parks the term label centered alone in row 1. Markup order is
   `h3, schedule_pill, units` — grid-area places them in the right
   visual cells without DOM changes. */
/* Flex-wrap (was a fixed 'units schedule' grid row): label takes its own
   full row; units chip left, Class Schedules pill right. When a term
   column is narrow the pill drops below the chip as a WHOLE unit — the
   chips are nowrap and never break mid-text ("15–17 / units"). 2026-06
   per user: intermediate widths wrapped chip text raggedly. */
.bc-pathway-page .pathway-term-panel-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 0.5rem;
    row-gap: 0.4rem;
    margin: 0 0 0.5rem;
}
.bc-pathway-page .pathway-term-panel-head > .pathway-term-label {
    flex: 1 1 100%;
    margin: 0;
}
.bc-pathway-page .pathway-term-panel-head > .pathway-term-units {
    flex: 0 0 auto;
}
.bc-pathway-page .pathway-term-panel-head > .pathway-schedule-picker {
    flex: 0 0 auto;
    margin-left: auto;
}

.bc-pathway-page .pathway-term-units {
    font-size: 18px;
    font-weight: 600;
    color: var(--pathway-coi-deep, #06281f);
    background: var(--pathway-coi-soft, #e8f1ed);
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    flex: 0 0 auto;
    white-space: nowrap;
}

.bc-pathway-page .pathway-term-notes {
    margin: 0 0 0.5rem;
    color: var(--pathway-muted, #4d6259);
    font-size: 18px;
    font-style: italic;
}

.bc-pathway-page .pathway-course-card-head {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}

.bc-pathway-page .pathway-course-card-real {
    /* Allow #course-SUBJ-NUM jumps to clear the sticky header's bottom edge. */
    scroll-margin-top: 6rem;
}

.bc-pathway-page .pathway-course-card-generic {
    background: #fffaf0;
    border-left-color: #c08a14;
}

.bc-pathway-page .pathway-course-context {
    margin: 0.35rem 0 0;
    color: var(--pathway-muted, #4d6259);
    font-size: 18px;
}

/* Course-code row: course code on the left, optional "Prerequisites"
   pill on the right of the same baseline. Wraps on narrow viewports. */
.bc-pathway-page .pathway-course-code-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* "Prerequisites" chip — inline next to the course code, with a
   CSS-only hover/focus tooltip that reveals the full prereq statement
   from the `data-prereq-text` attribute. 2026-05-08 per user "put the
   'Has Prerequisites' pill on the same line as the course short name…
   and reveal the prerequisite statement on hover". */
.bc-pathway-page .pathway-course-prereq-chip {
    position: relative;
    display: inline-block;
    width: fit-content;
    margin: 0;
    padding: 0.05rem 0.55rem;
    border: 1px solid var(--pathway-coi-deep, #06281f);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: var(--pathway-coi-deep, #06281f);
    background: var(--pathway-coi-soft, #e8f1ed);
    white-space: nowrap;
    cursor: help;
    font-family: inherit;
    line-height: 1.4;
}
.bc-pathway-page .pathway-course-prereq-chip:hover,
.bc-pathway-page .pathway-course-prereq-chip:focus-visible {
    background: var(--pathway-coi-deep, #06281f);
    color: var(--pathway-coi-soft, #e8f1ed);
    outline: 2px solid var(--pathway-coi-deep, #06281f);
    outline-offset: 2px;
}
/* CSS-only tooltip drawn from `data-prereq-text`. Reveals on hover or
   keyboard focus. Positioned above the pill; flips below if there's
   not enough room (browser auto-fallback isn't a thing in pure CSS,
   so we just keep it above and rely on the card not being at viewport
   top — acceptable for the within-card placement). */
.bc-pathway-page .pathway-course-prereq-chip::after {
    content: attr(data-prereq-text);
    position: absolute;
    left: 0;
    bottom: calc(100% + 6px);
    z-index: 50;
    width: max-content;
    max-width: 320px;
    padding: 8px 12px;
    background: #15251f;
    color: #ffffff;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
    border-radius: 4px;
    white-space: normal;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease-out;
}
.bc-pathway-page .pathway-course-prereq-chip:hover::after,
.bc-pathway-page .pathway-course-prereq-chip:focus-visible::after {
    opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
    .bc-pathway-page .pathway-course-prereq-chip::after {
        transition: none;
    }
}

/* Legacy classes — the new card no longer emits these; styles kept so
   already-published pages don't break before they're regenerated. */
.bc-pathway-page .pathway-course-prereq-inline {
    margin: 0.35rem 0 0;
    color: var(--pathway-muted, #4d6259);
    font-size: 18px;
}

.bc-pathway-page .pathway-course-prereq-label {
    font-weight: 700;
    color: var(--pathway-coi-deep, #06281f);
}

.bc-pathway-page .pathway-course-detail {
    margin: 0;
    border-top: none;
    padding-top: 0;
}

/* Standardized "+" disclosure button (2026-05-14). Replaces the older
   "+ details" / "+ see N choices" inline chips. Shared by ALL THREE
   card-detail disclosure types so students learn one affordance:
     .pathway-course-detail    (real-course descriptions / prereqs)
     .pathway-slot-ge-details  (GE area name + blurb)
     .pathway-slot-options     (choice card option list)
   Browser default <details> markers are hidden across vendors using
   list-style:none (Firefox) + ::-webkit-details-marker (Safari/older
   Chromium) + ::marker (modern spec). `display:flex !important`
   overrides default `display:list-item` which is what actually
   produces the disclosure triangle. !important is used because this
   linked stylesheet must beat the inline critical CSS in some
   browsers where rule ordering tips against us. */
.bc-pathway-page .pathway-course-detail > summary,
.bc-pathway-page .pathway-slot-ge-details > summary,
.bc-pathway-page .pathway-slot-options > summary {
    position: absolute;
    bottom: 0.35rem;
    right: 0.5rem;
    width: 26px;
    height: 26px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    list-style: none !important;
    color: var(--pathway-coi-deep, #06281f);
    background: transparent;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    padding: 0;
    margin: 0;
    white-space: nowrap;
    transition: background 0.15s ease-out, color 0.15s ease-out;
}

.bc-pathway-page .pathway-course-detail > summary::-webkit-details-marker,
.bc-pathway-page .pathway-slot-ge-details > summary::-webkit-details-marker,
.bc-pathway-page .pathway-slot-options > summary::-webkit-details-marker {
    display: none !important;
}

.bc-pathway-page .pathway-course-detail > summary::marker,
.bc-pathway-page .pathway-slot-ge-details > summary::marker,
.bc-pathway-page .pathway-slot-options > summary::marker {
    display: none !important;
    content: "" !important;
}

.bc-pathway-page .pathway-course-detail > summary::before,
.bc-pathway-page .pathway-slot-ge-details > summary::before,
.bc-pathway-page .pathway-slot-options > summary::before {
    /* Suppress any legacy ::before disclosure-indicator pseudo-element. */
    content: none;
}

.bc-pathway-page .pathway-course-detail > summary:hover,
.bc-pathway-page .pathway-course-detail > summary:focus-visible,
.bc-pathway-page .pathway-slot-ge-details > summary:hover,
.bc-pathway-page .pathway-slot-ge-details > summary:focus-visible,
.bc-pathway-page .pathway-slot-options > summary:hover,
.bc-pathway-page .pathway-slot-options > summary:focus-visible {
    background: var(--pathway-coi-deep, #06281f);
    color: #ffffff;
    outline: none;
}

.bc-pathway-page .pathway-course-detail > summary:focus-visible,
.bc-pathway-page .pathway-slot-ge-details > summary:focus-visible,
.bc-pathway-page .pathway-slot-options > summary:focus-visible {
    box-shadow: 0 0 0 3px var(--pathway-coi-deep, #06281f), 0 0 0 5px #ffffff;
}

.bc-pathway-page .pathway-course-detail[open] > summary,
.bc-pathway-page .pathway-slot-ge-details[open] > summary,
.bc-pathway-page .pathway-slot-options[open] > summary {
    background: var(--pathway-coi-deep, #06281f);
    color: #ffffff;
}

/* Icon glyph pinned to ABSOLUTE 18px / weight 700 — same metrics as the
   left-gutter select markers — so every "+" circle on the page has
   identical size and stroke weight. (Was 1rem, which resolves against
   the site's html{font-size:10px} and drifted by context.) display:flex
   centers the glyph box inside the 26px circle on both axes. 2026-06 per
   user "standardize the plus circles … centered, same relative weight". */
.bc-pathway-page .pathway-course-detail-summary-icon,
.bc-pathway-page .pathway-slot-ge-summary-icon,
.bc-pathway-page .pathway-slot-options-summary-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    margin: 0;
    font-size: 18px;
    font-weight: 700;
}

/* Swap + → − on open. font-size:0 hides the "+" character; ::before
   injects "−" at the standard 18px. */
.bc-pathway-page .pathway-course-detail[open] > summary .pathway-course-detail-summary-icon,
.bc-pathway-page .pathway-slot-ge-details[open] > summary .pathway-slot-ge-summary-icon,
.bc-pathway-page .pathway-slot-options[open] > summary .pathway-slot-options-summary-icon {
    font-size: 0;
}

.bc-pathway-page .pathway-course-detail[open] > summary .pathway-course-detail-summary-icon::before,
.bc-pathway-page .pathway-slot-ge-details[open] > summary .pathway-slot-ge-summary-icon::before,
.bc-pathway-page .pathway-slot-options[open] > summary .pathway-slot-options-summary-icon::before {
    content: "−";
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
}

/* Standardize the card shape so generic cards (GE areas + choice cards)
   match real-course cards: position:relative for the absolute "+" + bottom
   padding so the button has consistent room. */
.bc-pathway-page .pathway-course-card-generic {
    position: relative;
    padding: 0.55rem 0.7rem 2rem 0.7rem;
}

/* Option cards inside a choice card: drop the inherited 4.5rem right
   padding (which existed for the old inline "+ details" text) so the
   option-card content can extend close to the choice card's inner
   edge. The absolute "+" button still sits in the reserved bottom-
   right (cleared by the 2rem bottom padding). 2026-05-14. */
.bc-pathway-page .pathway-course-card-option {
    padding-right: 0.7rem;
}

/* Hide the visible legend when Select-N is satisfied — chosen option
   card stands on its own. Mirrors the collapse-on-complete rules
   above. 2026-05-14. */
.bc-pathway-page .pathway-course-card-generic:has(.pathway-slot-options-form[data-select-complete="true"]) .pathway-slot-options-legend {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .bc-pathway-page .pathway-course-detail > summary,
    .bc-pathway-page .pathway-slot-ge-details > summary,
    .bc-pathway-page .pathway-slot-options > summary {
        transition: none;
    }
}

/* GE area card body (rendered inside .pathway-slot-ge-details when open) */
.bc-pathway-page .pathway-slot-ge-body {
    background: #f7f8f4;
    border: 1px solid #d8e0db;
    border-radius: 6px;
    padding: 0.6rem 0.85rem;
    margin: 0.5rem 34px 0 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--pathway-ink, #15251f);
}
.bc-pathway-page .pathway-slot-ge-area-name {
    margin: 0 0 0.3rem;
    font-weight: 700;
    color: var(--pathway-coi-deep, #06281f);
}
.bc-pathway-page .pathway-slot-ge-body p {
    margin: 0;
}
.bc-pathway-page .pathway-slot-ge-body p + p {
    margin-top: 0.4rem;
}

/* Choice card legend — was visually-hidden; now visible at the top of
   the disclosure body to surface "Choose N of M choices" since the
   summary trigger no longer carries that text. */
.bc-pathway-page .pathway-slot-options-legend {
    display: block;
    margin: 0 0 0.4rem;
    font-size: 14px;
    font-weight: 600;
    color: var(--pathway-coi-deep, #06281f);
    padding: 0;
}

.bc-pathway-page .pathway-course-detail-body {
    margin: 0.5rem 0 0;
    font-size: 18px;
    line-height: 1.5;
    color: var(--pathway-ink, #15251f);
}

.bc-pathway-page .pathway-course-detail-body p {
    margin: 0 0 0.55rem;
}

.bc-pathway-page .pathway-course-detail-longtitle {
    font-style: italic;
    color: var(--pathway-muted, #4d6259);
}

.bc-pathway-page .pathway-course-detail-prereq,
.bc-pathway-page .pathway-course-detail-coreq,
.bc-pathway-page .pathway-course-detail-recommended {
    color: var(--pathway-muted, #4d6259);
}

/* Recent-offering rollup (bottom of disclosure). Visually grouped with a
   subtle divider so "what + when + where" reads as a single block, not
   three loose paragraphs. */
.bc-pathway-page .pathway-course-detail-offerings-block {
    margin-top: 0.65rem;
    padding-top: 0.55rem;
    border-top: 1px dashed var(--pathway-border, #d8e0db);
    display: grid;
    gap: 0.25rem;
}

.bc-pathway-page .pathway-course-detail-offerings,
.bc-pathway-page .pathway-course-detail-locations {
    margin: 0;
    color: var(--pathway-ink, #15251f);
    font-size: 18px;
}

.bc-pathway-page .pathway-course-detail-offerings strong,
.bc-pathway-page .pathway-course-detail-locations strong {
    color: var(--pathway-coi-deep, #06281f);
}

.bc-pathway-page .pathway-course-xref {
    font-weight: 600;
    color: var(--pathway-coi-deep, #06281f);
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

.bc-pathway-page .pathway-course-xref:focus-visible {
    outline: 2px solid var(--pathway-coi-deep, #06281f);
    outline-offset: 2px;
    border-radius: 3px;
}

.bc-pathway-page .pathway-slot-text {
    margin: 0;
    font-weight: 600;
    color: var(--pathway-coi-deep, #06281f);
    font-size: 18px;
    line-height: 1.35;
}

.bc-pathway-page .pathway-slot-meta {
    margin: 0.25rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    font-size: 18px;
}

.bc-pathway-page .pathway-slot-badge {
    background: #fff3cd;
    color: #714b04;
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.bc-pathway-page .pathway-slot-group {
    color: var(--pathway-muted, #4d6259);
    font-style: italic;
}

.bc-pathway-page .pathway-slot-options {
    margin: 0.55rem 0 0;
}

.bc-pathway-page .pathway-slot-options > summary {
    cursor: pointer;
    list-style: none;
    font-size: 18px;
    font-weight: 600;
    color: var(--pathway-coi-deep, #06281f);
    min-height: 24px;
    padding: 0.2rem 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.bc-pathway-page .pathway-slot-options > summary::-webkit-details-marker {
    display: none;
}

/* Retired 2026-05-06 — the +/− glyph lives inline in the summary label text
   via .pathway-slot-options-summary-icon. Earlier this rule rendered an
   additional yellow chip "+" which appeared next to the inline span "+",
   producing a duplicated "+ + see N choices". Suppressed so the inline icon
   is the single source of truth. */
.bc-pathway-page .pathway-slot-options > summary::before {
    content: none;
}

.bc-pathway-page .pathway-slot-options > summary:focus-visible {
    outline: 3px solid var(--pathway-coi-deep, #06281f);
    outline-offset: 2px;
}

.bc-pathway-page .pathway-slot-option-list {
    margin: 0.4rem 0 0;
    padding-left: 1.4rem;
    display: grid;
    gap: 0.25rem;
    font-size: 18px;
}

.bc-pathway-page .pathway-slot-option-list li {
    /* Vertical padding 0 so the selected-state ::before highlight band
       (top:0/bottom:0 of this li) doesn't extend above/below the card's
       visible edges. Inter-card spacing comes from the OL's `gap`
       instead. 2026-05-17. */
    padding: 0;
    line-height: 1.4;
}

.bc-pathway-page .pathway-option-link {
    font-weight: 600;
    color: var(--pathway-coi-deep, #06281f);
}

.bc-pathway-page .pathway-option-title {
    color: var(--pathway-ink, #15251f);
}

.bc-pathway-page .pathway-option-units {
    color: var(--pathway-muted, #4d6259);
    font-size: 18px;
}

.bc-pathway-page .pathway-option-text {
    color: var(--pathway-ink, #15251f);
}

/* ---------------------------------------------------------------------------
   Slot-option cards (selectable mini-cards inside "View N options")
   ---------------------------------------------------------------------------
   Each option in a "Select one" / "Choose" generic slot is now a full
   mini-course-card with the same capabilities as the main term cards
   (prereq chip, course-detail disclosure with description/offerings/
   locations). Wrapped in a <label> with a hidden radio input — selecting
   an option highlights its card; the page's :checked state survives a
   reload only inside the same browser-tab session (no JS, no localStorage). */

.bc-pathway-page .pathway-slot-options-form {
    margin: 0.4rem 0 0;
    padding: 0;
    /* Indent reserves space for the Select chip in the LEFT gutter.
       Negative left/right margins eat the slot card's left/right padding
       so option cards finish flush with the slot card's outer edges.
       2026-05-14: choice-card right padding changed from 4.5rem to 0.7rem
       in the standardized + button pass; this margin-right updated to
       match, otherwise the form overflows the page → mobile frame shift
       + horizontal scroll. */
    padding-left: 3rem;
    margin-right: -0.7rem;
    margin-left: -0.7rem;
    border: 0;
}

.bc-pathway-page .pathway-slot-option-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

/* Each <li> is the positioning anchor for the Select chip (which sits
   to the LEFT of the option card, in the indent gutter). Vertical
   padding stays 0 so the selected-state ::before highlight band (which
   uses top:0/bottom:0 on this li) matches the card's actual edges and
   doesn't bleed above/below into the inter-card gap. 2026-05-17. */
.bc-pathway-page .pathway-slot-option {
    position: relative;
    margin: 0;
    padding: 0;
    /* Explicit width: 100% forces the LI (a flex item in the OL's
       flex column) to fill cross-axis even when the parent fieldset
       is using default min-width: min-content. 2026-05-08. */
    width: 100%;
    box-sizing: border-box;
}

.bc-pathway-page .pathway-slot-option-label {
    display: block;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
}

/* Belt-and-braces: explicitly force option cards to fill their label
   wrapper. Without this, a few rendering paths (Safari's intrinsic
   sizing for flex containers inside block-level labels) leave the
   article shrink-wrapped to its content width, which manifested as
   "stubby" cards that ended well before the slot's right edge.
   2026-05-08 fix. */
.bc-pathway-page .pathway-course-card-option {
    width: 100%;
    box-sizing: border-box;
}

/* The radio input itself is visually hidden — the whole card is the click
   target — but stays focusable for keyboard users. */
.bc-pathway-page .pathway-slot-option-input {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Mini-card variant for option cards. Padding-right tightened further
   (2026-05-17) from 3.2rem → 0.7rem: the standardized circular "+"
   disclosure button (26px) lives absolutely positioned in the bottom
   2.5rem zone (reserved by padding-bottom), so the horizontal content
   area can run nearly to the card edge. Bottom padding stays at 2.5rem
   to keep the button clear of multi-line content. */
.bc-pathway-page .pathway-course-card-option {
    padding: 0.5rem 0.7rem 2.5rem 0.6rem;
    border-radius: 4px;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

/* "+" / "−" chip in the LEFT indent gutter — vertically centered on
   the option card's geometric center (was offset 1rem above to "anchor
   with the title row"; user feedback 2026-05-17 was that this felt
   loose — wants rock-solid centerline). */
.bc-pathway-page .pathway-slot-option-marker {
    position: absolute;
    left: -2.7rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 1.8rem;
    padding: 0;
    font-size: 18px;
    font-weight: 700;
    border-radius: 999px;
    border: 1.5px solid var(--pathway-coi-deep, #06281f);
    color: var(--pathway-coi-deep, #06281f);
    background: var(--pathway-surface, #ffffff);
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
}
.bc-pathway-page .pathway-slot-option-marker-selected { display: none; }

/* Hover/focus affordance on the whole option card (the label is the click
   target — focus on the radio still surfaces the focus ring on the card). */
.bc-pathway-page .pathway-slot-option-label:hover .pathway-course-card-option {
    border-color: var(--pathway-coi-deep, #06281f);
}
.bc-pathway-page .pathway-slot-option-input:focus-visible + .pathway-course-card-option {
    outline: 3px solid var(--pathway-coi-deep, #06281f);
    outline-offset: 2px;
}

/* SELECTED state — when the radio is :checked, the chosen option becomes
   the visual "chosen course card" for that slot:
     1. Card border-left swaps to a thick COI accent (matches the look of
        a regular course card's left stripe — reads as "this is the course
        you've chosen for this slot")
     2. Card extends with extra left padding so content shifts right of
        the accent stripe and the indent gutter gets a filled COI-soft
        highlight band — clearly marking this as a SELECTION not a default
     3. Chip flips to filled "✓ Selected" against the highlight band
   Browser support: :has() ships in all modern engines as of mid-2023. */
.bc-pathway-page .pathway-slot-option-input:checked + .pathway-course-card-option {
    border: 1px solid #d6dfd9;
    border-left: 4px solid var(--pathway-coi-deep, #06281f);
    background: var(--pathway-coi-soft, #e8f1ed);
}
/* Highlight the indent gutter for the selected LI so the chosen option
   reads as a chunky "selected band" running alongside the card. */
.bc-pathway-page .pathway-slot-option:has(input:checked)::before {
    content: "";
    position: absolute;
    left: -3rem;
    top: 0;
    bottom: 0;
    width: 3rem;
    background: var(--pathway-coi-soft, #e8f1ed);
    border-radius: 4px 0 0 4px;
    pointer-events: none;
}
/* Selected chip: filled COI deep against the soft highlight, sits on top
   of the gutter band. */
.bc-pathway-page .pathway-slot-option:has(input:checked) .pathway-slot-option-marker {
    background: var(--pathway-coi-deep, #06281f);
    color: var(--pathway-coi-on-deep, #ffffff);
    border-color: var(--pathway-coi-deep, #06281f);
}
.bc-pathway-page .pathway-slot-option:has(input:checked) .pathway-slot-option-marker-label {
    display: none;
}
.bc-pathway-page .pathway-slot-option:has(input:checked) .pathway-slot-option-marker-selected {
    display: inline;
}

/* When a slot has a checked option, hide the unchecked ones entirely
   (was opacity:0.55 dim — user wants the chosen card to fully replace
   the Select-one card). :has() scopes the hide to that slot. The
   slot-interaction script's marker-click handler unchecks the radio,
   which lifts this rule and brings the full Select-one back. */
/* The "hide unselected siblings" rule must only fire once the slot's
   Select-N requirement is satisfied. For Select-one slots the JS flips
   `data-select-complete` on the first pick (matching the prior CSS-only
   behavior); for Select-two slots it waits for the second. Without
   this gate, picking option 1 of 2 would already hide option 2. */
.bc-pathway-page .pathway-slot-options-form[data-select-complete="true"] .pathway-slot-option:not(:has(input:checked)) {
    display: none;
}

/* When the slot's Select-N requirement is met, collapse the surrounding
   slot chrome — the chosen option card(s) stand in the slot's spot
   while preserving the indent gutter. Hide the slot's text/badges
   (Select one: + REQUIRED), the units chip (the chosen card has its
   own), the "+ see N choices" disclosure trigger, and any context note.
   2026-05-07 per user "When the selection is made it should replace the
   'select one' card with the course card of the selection".
   2026-05-08 — gated on data-select-complete so multi-pick slots wait
   for the full N before collapsing. The 2026-05-08 markup change moved
   the slot text out of the (now-removed) card-head wrapper into a
   direct ``.pathway-course-card-body`` child of the article — selectors
   updated to match. */
.bc-pathway-page .pathway-course-card-generic:has(.pathway-slot-options-form[data-select-complete="true"]) > .pathway-course-card-body,
.bc-pathway-page .pathway-course-card-generic:has(.pathway-slot-options-form[data-select-complete="true"]) > .pathway-course-context,
.bc-pathway-page .pathway-course-card-generic:has(.pathway-slot-options-form[data-select-complete="true"]) > .pathway-course-units {
    display: none;
}
/* !important required: the standardized "+/−" circle-button rule sets
   `display: flex !important`, which beats a plain display:none — leaving
   a dark "−" blob floating in the half-collapsed slot after the student
   makes their pick. 2026-06 per user "weird coloring when selected". */
.bc-pathway-page .pathway-course-card-generic:has(.pathway-slot-options-form[data-select-complete="true"]) > .pathway-slot-options > summary {
    display: none !important;
}
/* Progress indicator for partially-filled multi-pick slots — shows
   "1 of 2 selected" inline beside the slot text so the student knows
   one more pick is needed. The data-select-checked attribute is set
   by the slot-interaction script. */
.bc-pathway-page .pathway-slot-options-form[data-select-n]:not([data-select-n="1"]):not([data-select-complete="true"])::before {
    content: attr(data-select-checked) " of " attr(data-select-n) " selected — pick " attr(data-select-n) " to continue";
    display: block;
    margin: 0 0 0.4rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    background: var(--pathway-coi-soft, #e8f1ed);
    color: var(--pathway-coi-deep, #06281f);
    font-size: 14px;
    font-weight: 600;
}
/* Hide the progress chip until the user has actually made a pick — the
   `data-select-checked` attribute is added by JS only after a change
   event, so a pristine slot has no count to display. */
.bc-pathway-page .pathway-slot-options-form[data-select-n]:not([data-select-n="1"]):not([data-select-checked])::before {
    display: none;
}
/* Strip the generic-slot wrapper styling (yellow background, accent
   border, padding) when collapsed so only the chosen course card shows
   — the wrapper now exists purely as a positioning anchor for the
   indent gutter and marker chip. */
.bc-pathway-page .pathway-course-card-generic:has(.pathway-slot-options-form[data-select-complete="true"]) {
    background: transparent;
    border-left-color: transparent;
    padding: 0;
}
/* Form keeps its left-indent so the chip stays in the gutter, but
   margin-right zeroes out (no extra slot padding to reach into now). */
.bc-pathway-page .pathway-course-card-generic:has(.pathway-slot-options-form[data-select-complete="true"]) .pathway-slot-options-form {
    margin: 0;
    padding-left: 3rem;
}

/* ---------------------------------------------------------------------------
   Nested group choice cards (e.g. "List A: pick 3 from at least 2 groups")
   ---------------------------------------------------------------------------
   Acadia "Course Block" choice slots can nest sub-groups (Group 1, Group 2,
   …) under a single "List A" parent. The renderer flattens leaf course cards
   into a single fieldset and prefixes each group's runs with a labeled
   section heading so students can see which group each course belongs to.
   2026-05-17. */
.bc-pathway-page .pathway-slot-option-group {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
}
.bc-pathway-page .pathway-slot-option-group:first-child {
    margin-top: 0;
}
.bc-pathway-page .pathway-slot-option-group-label {
    margin: 0 0 0.35rem;
    /* Tuck the label INTO the leftmost gutter that the option cards
       already reserve for the "+" marker (form has padding-left:3rem,
       options sit flush with that). Pulling -3rem aligns the group
       header with the slot card's outer edge. */
    margin-left: -3rem;
    padding: 0.15rem 0.55rem;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--pathway-coi-deep, #06281f);
    background: var(--pathway-coi-soft, #e8f1ed);
    border-left: 4px solid var(--pathway-coi-accent, #1f6f5c);
    border-radius: 2px;
}
/* Sub-list reuses the parent option-list grid (gap, layout) but resets
   its padding so the nested options align with their parent slot's
   option cards rather than indenting twice. */
.bc-pathway-page .pathway-slot-option-sublist {
    padding-left: 0;
}
/* When the slot's select-N is satisfied, hide groups whose options were
   all left unchecked — mirrors the leaf-option hide rule below so the
   collapsed slot only shows groups that contribute to the selection. */
.bc-pathway-page .pathway-slot-options-form[data-select-complete="true"]
    .pathway-slot-option-group:not(:has(input:checked)) {
    display: none;
}

/* ---------------------------------------------------------------------------
   Print stylesheet — the student's "Print my plan" view
   ---------------------------------------------------------------------------
   When the page is printed, hide all the chrome (site shell, headers we
   don't control, action buttons, the disclosure summary itself) and within
   each slot show ONLY the selected option (or all options if nothing was
   chosen). Selected options get a black border so the print is high-
   contrast on plain paper. */
/* Landscape print: the two-column semester map reads far better wide.
   2026-06 per user "perhaps a landscape view will work better". */
@page {
    size: letter landscape;
    margin: 12mm;
}

@media print {
    /* Hide site chrome we can't otherwise scope. The Butte global header,
       footer, and search are body-level elements not under .bc-pathway-page,
       so a viewport-wide pruning is the simplest reliable filter. */
    body > header,
    body > footer,
    .header,
    .footer,
    .footer-acknowledgement,
    .footer-main,
    .back-to-top-bar,
    .pathway-actions,
    .pathway-coi-badge,
    .pathway-page-header-subtitle {
        display: none !important;
    }

    /* Interactive chrome that's meaningless on paper: the share menu
       (it was printing OPEN over the program details — printing is
       triggered FROM it), the per-term Class Schedules pickers, the
       "+/−" disclosure circles (the print-prep script opens all
       disclosures, so the toggles are noise), and the select markers.
       2026-06 print-quality pass. */
    .bc-pathway-page .pathway-share-subscript,
    .bc-pathway-page .pathway-schedule-picker,
    .bc-pathway-page .pathway-course-detail > summary,
    .bc-pathway-page .pathway-slot-ge-details > summary,
    .bc-pathway-page .pathway-slot-options > summary,
    .bc-pathway-page .pathway-slot-option-marker,
    .bc-pathway-page .pathway-kicker-award-caret {
        display: none !important;
    }

    /* Sticky + 100vw-breakout header prints badly (duplicated band /
       clipped edges). Print it as a plain static block. */
    .bc-pathway-page .pathway-page-header {
        position: static !important;
        width: auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* All four terms across one sheet, compacted type. CSS COLUMNS, not
       grid: a print-fragmented grid renders the whole row as one
       monolithic block (it punted past the header leaving page 1 mostly
       blank) and spawns phantom empty pages in WebKit. Columns fragment
       cleanly and balance the four terms side-by-side. 2026-06 per user
       "we should list the 4 terms on one page" / "7 pages mostly blank".
       NOTE: @page landscape is honored by Chromium; Safari ignores it —
       students printing from Safari should pick landscape in the dialog. */
    .bc-pathway-page .pathway-term-grid {
        display: block !important;
        column-count: 4;
        column-gap: 0.35rem;
    }
    .bc-pathway-page .pathway-term-panel {
        display: block !important;
        width: 100%;
        box-sizing: border-box;
        margin: 0 0 0.35rem !important;
        padding: 0.4rem 0.4rem 0.5rem !important;
        break-inside: avoid;
        page-break-inside: avoid;
    }
    .bc-pathway-page .pathway-term-label {
        font-size: 14px !important;
    }
    .bc-pathway-page .pathway-term-units {
        font-size: 11px !important;
        padding: 0.05rem 0.4rem !important;
    }
    .bc-pathway-page .pathway-course-card {
        padding: 0.3rem 0.4rem !important;
        break-inside: avoid;
        page-break-inside: avoid;
    }
    .bc-pathway-page .pathway-course-code,
    .bc-pathway-page .pathway-slot-text {
        font-size: 11px !important;
    }
    .bc-pathway-page .pathway-course-title,
    .bc-pathway-page .pathway-course-units,
    .bc-pathway-page .pathway-course-context,
    .bc-pathway-page .pathway-slot-meta,
    .bc-pathway-page .pathway-course-detail-body,
    .bc-pathway-page .pathway-slot-ge-body,
    .bc-pathway-page .pathway-slot-option-list,
    .bc-pathway-page .pathway-slot-options-legend,
    .bc-pathway-page .pathway-term-notes {
        font-size: 10px !important;
        line-height: 1.3 !important;
    }
    .bc-pathway-page .pathway-career-panel,
    .bc-pathway-page .pathway-local-market-occupation {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /* The print-prep script opens ALL disclosures, but on the planning
       sheet only the CHOICE LISTS matter (otherwise "Select one option"
       prints empty). Course-description / GE-blurb / award-explainer
       bodies would balloon the one-pager — keep them off paper. */
    .bc-pathway-page .pathway-course-detail-body,
    .bc-pathway-page .pathway-slot-ge-body,
    .bc-pathway-page .pathway-kicker-award-body {
        display: none !important;
    }

    /* Open all <details> for print — students need to see the content,
       not the summaries-only state. */
    .bc-pathway-page details {
        display: block;
    }
    .bc-pathway-page details > summary {
        list-style: none;
    }
    .bc-pathway-page details > summary::-webkit-details-marker {
        display: none;
    }
    /* The print is a SCHEDULE-PLANNING artifact: ONLY the semester map
       prints. Everything else — the header band (the kicker repeats the
       title/award), program details, career mappings, local jobs, source
       notes — is screen-reference material that was spreading the print
       across many mostly-blank pages. 2026-06 per user "don't need the
       program details … omit the career mappings and the local jobs" /
       "can we get it to one page?". */
    .bc-pathway-page .pathway-page-header,
    .bc-pathway-page .pathway-page-header-body,
    .bc-pathway-page .pathway-page-header-extras,
    .bc-pathway-page .pathway-snapshot-accordion,
    .bc-pathway-page .bc-pathway-siblings,
    .bc-pathway-page .pathway-section:not(.pathway-map) {
        display: none !important;
    }

    /* In print, when a slot has a selection, hide unchecked options so
       only the chosen course renders. Slots with no selection still show
       all options as a fallback. The second rule does the same for nested
       sub-groups (Group N) so List-A style slots only print the groups
       the student actually picked from. */
    .bc-pathway-page .pathway-slot-options-form:has(input:checked) .pathway-slot-option:not(:has(input:checked)) {
        display: none;
    }
    .bc-pathway-page .pathway-slot-options-form:has(input:checked) .pathway-slot-option-group:not(:has(input:checked)) {
        display: none;
    }

    /* High-contrast borders on selected options — print can't render
       background colors reliably across browsers. */
    .bc-pathway-page .pathway-slot-option-input:checked + .pathway-course-card-option {
        border: 2px solid #000 !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    /* Hide the Select/Selected marker chip in print — selection is
       conveyed by the border + the fact that unchecked siblings are gone. */
    .bc-pathway-page .pathway-slot-option-marker {
        display: none;
    }

    /* Make the sticky page header static for print so it sits at the top
       of the printout and doesn't repeat or float weirdly. */
    .bc-pathway-page .pathway-page-header,
    .bc-pathway-page summary.pathway-page-header {
        position: static !important;
    }

    /* Force light theme so dark backgrounds don't burn ink. */
    .bc-pathway-page,
    .bc-pathway-page * {
        color: #000 !important;
        background: #fff !important;
    }
}

/* ---------------------------------------------------------------------------
   Mobile / narrow-viewport layout (≤ 640px)
   ---------------------------------------------------------------------------
   Cards extend close to the viewport edge instead of sitting in a padded
   article column. Term panels also lose their internal padding and rounded
   corners so courses inside them read edge-to-edge — much more usable on a
   phone where every horizontal pixel counts. */
@media (max-width: 640px) {
    article.bc-pathway-page {
        /* Override the publisher's inline-style 1rem horizontal padding;
           keep a 0.25rem gutter so card borders don't visually fuse with
           the viewport edge. */
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
    }

    .bc-pathway-page .pathway-term-grid {
        /* Single column on mobile (auto-fill at 260px min already does this
           on most phones, but force it for narrow tablets too). */
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .bc-pathway-page .pathway-term-panel {
        padding: 0.75rem 0.4rem 0.85rem;
        border-radius: 4px;
    }

    .bc-pathway-page .pathway-course-card {
        /* Tighter horizontal padding so course titles get more usable room.
           Right padding still reserves space for the units chip; bottom for
           the disclosure summary. */
        padding-left: 0.5rem;
        padding-right: 4rem;
    }

    .bc-pathway-page .pathway-course-card .pathway-course-units {
        /* Bottom-left at the same gutter as the rest of the card body. */
        left: 0.5rem;
        right: auto;
    }
    .bc-pathway-page .pathway-course-card .pathway-course-detail > summary,
    .bc-pathway-page .pathway-course-card .pathway-slot-options > summary {
        right: 0.5rem;
    }

    /* Option cards on mobile: re-assert the 3.2rem right padding so the
       generic mobile `.pathway-course-card { padding-right: 4rem }` rule
       (which was tuned for the term-grid course cards) doesn't widen the
       option card's empty right band back to 4rem. */
    .bc-pathway-page .pathway-course-card-option {
        padding-right: 3.2rem;
    }

    /* Generic choice cards: tighten the right padding now that the
       chip lives inline (no longer absolutely-positioned at top-right
       even outside this @media block). Without this, the card has the
       4rem padding-right above leaving a wide empty gutter. */
    .bc-pathway-page .pathway-course-card-generic {
        padding-right: 0.5rem;
    }

    /* Term head: shrink the schedule picker on narrow viewports so it
       doesn't push too far into the column when its row pairs with
       the units chip. */
    .bc-pathway-page .pathway-term-panel-head .pathway-schedule-picker > summary {
        font-size: 13px;
        padding: 0.15rem 0.5rem;
    }
}