/* Dashboard shell -- design-token driven, same convention as platform-shell.css and
   registration.css: no hardcoded brand colors/fonts/spacing. */

.npca-v2-dashboard h2 {
    font-family: var(--font-heading, system-ui, sans-serif);
    color: var(--match-ink, #272F3D);
}

.npca-v2-user-identity__email {
    color: var(--brand-secondary, #76BC21);
    margin: 4px 0;
}

/* Role badge -- a small colored pill naming a user's role, using that role's accent color set
   inline per instance (property owner blue / capital provider green / contractor orange).
   Fact-found design language from the live /match/ landing page, 2026-07-04 -- shared here
   (rather than in onboarding.css) so both the dashboard and the onboarding wizard can use it,
   since dashboard.css is enqueued on both. */
.npca-v2-role-badge {
    display: inline-block;
    padding: 4px 14px;
    margin: 4px 0;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.9em;
    color: #fff;
    background: var(--npca-v2-role-color, var(--brand-primary, #2E7D32));
}

.npca-v2-next-action__label {
    font-weight: 700;
    font-size: 1.1em;
}

/* Portal header (2026-07-05) -- see templates/components/portal-header.php. Replaces the old
   brand-header + user-identity-card combo on the dashboard specifically: the MGB site header
   already sits directly above this page, so repeating its logo read as redundant, and the old
   stacked "Welcome" card (h2 + email + role badge, each on its own line inside a full
   .npca-v2-status-card) took up far more vertical space than an app toolbar should. A thin bottom
   border separates it from the portal nav/content below instead of another bordered/shadowed
   card, so it reads as a toolbar, not a repeated content panel.

   2026-07-05, refined the same evening: the role badge originally sat in its own row directly
   under the wordmark; since both were left-aligned, they visually stacked together and read as
   off-balance. Restructured into one row -- wordmark / "Welcome, Name" / role+email+Logout -- as
   three grid columns, using grid (not flex + space-between) so the center column is genuinely
   centered regardless of how wide either side is. */
.npca-v2-portal-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--match-border, #E2E8EE);
}

.npca-v2-portal-header__left {
    justify-self: start;
}

.npca-v2-portal-header__welcome {
    justify-self: center;
    font-weight: 700;
    font-size: 1.05em;
    white-space: nowrap;
}

.npca-v2-portal-header__identity {
    justify-self: end;
    display: flex;
    align-items: center;
    font-size: 0.9em;
    white-space: nowrap;
}

.npca-v2-portal-header__role {
    margin: 0;
}

.npca-v2-portal-header__email {
    color: var(--match-ink, #272F3D);
    opacity: 0.75;
}

.npca-v2-portal-header__sep {
    margin: 0 8px;
    opacity: 0.4;
}

.npca-v2-portal-header__identity a {
    color: var(--brand-secondary, #76BC21);
    font-weight: 600;
    text-decoration: none;
}

.npca-v2-portal-header__identity a:hover {
    text-decoration: underline;
}

@media (max-width: 720px) {
    .npca-v2-portal-header {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        gap: 8px;
    }

    .npca-v2-portal-header__left {
        justify-self: center;
    }

    .npca-v2-portal-header__identity {
        white-space: normal;
        flex-wrap: wrap;
        justify-content: center;
    }
}

.npca-v2-muted {
    color: #777;
    font-style: italic;
}

.npca-v2-logout {
    text-align: right;
}

.npca-v2-logout a {
    color: var(--brand-secondary, #76BC21);
    text-decoration: none;
    font-weight: 600;
}

.npca-v2-logout a:hover {
    text-decoration: underline;
}

/* Portal nav (2026-07-05) -- the logged-in dashboard's persistent menu; see
   templates/components/portal-nav.php. A left-hand sidebar (not another row of pills like the
   onboarding stepper) so the dashboard reads as an app with sections, not a continuation of the
   wizard. Stacks to a horizontal row on narrow viewports rather than disappearing. */
.npca-v2-portal {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    margin-top: 8px;
}

.npca-v2-portal-nav {
    flex: 0 0 220px;
}

.npca-v2-portal-content {
    flex: 1;
    min-width: 0;
}

.npca-v2-portal-nav__list {
    list-style: none;
    margin: 0;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: #fff;
    border: 2px solid var(--match-border, #E2E8EE);
    border-radius: var(--radius-card, 14px);
}

/* 2026-07-05: wraps the item's <a> alongside its optional expand toggle (see
   npca-v2-portal-nav__toggle below) -- the <a>'s own nav/hover/active styling is unchanged, it
   just no longer has to also be the row's flex container now that a sibling button can sit next
   to it. */
.npca-v2-portal-nav__row {
    display: flex;
    align-items: stretch;
    gap: 4px;
}

.npca-v2-portal-nav__item a {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px;
    border-radius: calc(var(--radius-card, 14px) / 2);
    text-decoration: none;
    color: var(--match-ink, #272F3D);
    font-weight: 600;
}

.npca-v2-portal-nav__item a:hover {
    background: var(--match-surface-tint, #F3F9F5);
}

/* Expand/collapse toggle for a nav item's subfolders (e.g. Documents -> "NPCA Legal & Program
   Documents", C-PACE Academy). v0.17.5 (2026-07-11): replaced the square/rectangle plus-minus
   button per Nathan's explicit "visually weak, remove the box look" feedback -- now a plain solid
   CSS triangle (border-trick, not a font/emoji glyph, so it renders identically everywhere),
   colored with the audience's own role color. Collapsed = pointing right (sideways/inward);
   expanded = rotated 90deg to point down. No background/border on the button itself anymore --
   just the triangle glyph, sized for a comfortable click target without looking like a box. */
.npca-v2-portal-nav__toggle {
    flex: 0 0 auto;
    width: 24px;
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.npca-v2-portal-nav__toggle span {
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 0 5px 7px;
    border-color: transparent transparent transparent var(--npca-v2-role-color, var(--brand-primary, #2E7D32));
    transition: transform 0.15s ease;
}

.npca-v2-portal-nav__toggle:hover span {
    opacity: 0.7;
}

.npca-v2-portal-nav__toggle[aria-expanded="true"] span {
    transform: rotate(90deg);
}

.npca-v2-portal-nav__children {
    list-style: none;
    margin: 4px 0 0;
    padding: 0 0 0 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* 2026-07-05 bug fix: the plain `display: flex` rule above is an AUTHOR stylesheet rule, which
   beats the browser's own [hidden] { display: none } UA-stylesheet default regardless of
   specificity (author styles always win over UA styles, by CSS cascade origin, not just
   specificity) -- so setting the [hidden] attribute via portal-nav.js was having NO visual effect
   at all; the list stayed visibly flex-displayed either way. This explicit [hidden] override
   restores the native collapse behavior the toggle button depends on. */
.npca-v2-portal-nav__children[hidden] {
    display: none;
}

.npca-v2-portal-nav__children a {
    display: block;
    padding: 8px 14px;
    border-radius: calc(var(--radius-card, 14px) / 2);
    text-decoration: none;
    color: var(--match-ink, #272F3D);
    font-weight: 500;
    font-size: 0.92em;
}

.npca-v2-portal-nav__children a:hover {
    background: var(--match-surface-tint, #F3F9F5);
}

/* 2026-07-05 visual QA fix: without this, the child link rendered as an oversized duplicate of
   the parent "Documents" button -- .npca-v2-portal-nav__item.is-active a (below) is a descendant
   selector, so it was matching the nested subfolder <a> too, at higher specificity than the plain
   .npca-v2-portal-nav__children a rule above. This explicitly overrides the bleed-through so the
   subfolder always renders as a small nested link, never as a second full-size active button,
   regardless of whether its parent item is active. */
.npca-v2-portal-nav__item.is-active .npca-v2-portal-nav__children a {
    background: transparent;
    color: var(--match-ink, #272F3D);
    font-weight: 500;
    font-size: 0.92em;
    padding: 8px 14px;
}

.npca-v2-portal-nav__item.is-active .npca-v2-portal-nav__children a:hover {
    background: var(--match-surface-tint, #F3F9F5);
}

/* Active item takes the current user's own role color (--npca-v2-role-color, set on the <nav>
   itself -- see portal-nav.php), same accent already used for their role badge, so the portal
   feels personalized rather than a generic gray-on-white admin menu. */
.npca-v2-portal-nav__item.is-active a {
    background: var(--npca-v2-role-color, var(--brand-primary, #2E7D32));
    color: #fff;
}

.npca-v2-portal-nav__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(39, 47, 61, 0.12);
    color: var(--match-ink, #272F3D);
    font-size: 0.8em;
    font-weight: 700;
}

.npca-v2-portal-nav__item.is-active .npca-v2-portal-nav__badge {
    background: rgba(255, 255, 255, 0.3);
    color: #fff;
}

.npca-v2-portal-nav__item--logout {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--match-border, #E2E8EE);
}

.npca-v2-portal-nav__item--logout a {
    color: #8A1F17;
}

.npca-v2-portal-pane p:last-child {
    margin-bottom: 0;
}

@media (max-width: 720px) {
    .npca-v2-portal {
        flex-direction: column;
    }

    .npca-v2-portal-nav {
        flex: 0 0 auto;
        width: 100%;
    }

    .npca-v2-portal-nav__list {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .npca-v2-portal-nav__item--logout {
        margin-top: 0;
        padding-top: 0;
        border-top: none;
    }
}

/* Onboarding form -- reuses registration.css's .npca-v2-field/.npca-v2-field-row/.npca-v2-button
   rules (both stylesheets are enqueued together on the onboarding shortcode); only the
   onboarding-specific additions live here. */

.npca-v2-onboarding-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.npca-v2-onboarding-form > button {
    margin-right: 8px;
}

.npca-v2-button--secondary {
    background: transparent;
    color: var(--brand-primary, #2E7D32);
    border: 2px solid var(--brand-primary, #2E7D32);
}

.npca-v2-form-notice {
    background: rgba(46, 125, 50, 0.1);
    color: var(--brand-primary, #2E7D32);
    border: 1px solid rgba(46, 125, 50, 0.3);
    border-radius: var(--radius-card, 16px);
    padding: 12px 16px;
}

/* Portal footer (2026-07-05) -- see templates/components/portal-footer.php. Replaces the plain
   support-contact.php footer, which rendered directly under the (often shorter) portal-nav
   sidebar column with no visual structure of its own -- per Nathan's feedback that it "felt
   random and unfinished." A top border + centered layout gives it the same intentional footer
   treatment as the rest of the app, and is also where the engineering credit lives, per his
   direction that it belongs in the app footer, not the main MGB site footer. */
.npca-v2-portal-footer {
    margin-top: 32px;
    padding-top: 16px;
    border-top: 1px solid var(--match-border, #E2E8EE);
    text-align: center;
}

.npca-v2-portal-footer__support {
    margin: 0 0 8px;
    font-size: 0.9em;
    color: var(--match-ink, #272F3D);
    opacity: 0.75;
}

.npca-v2-portal-footer__support-label {
    font-weight: 600;
    margin-right: 6px;
}

.npca-v2-portal-footer__support a {
    color: var(--brand-secondary, #76BC21);
    text-decoration: none;
}

.npca-v2-portal-footer__support a:hover {
    text-decoration: underline;
}

.npca-v2-portal-footer__credit {
    margin: 0;
    font-size: 0.8em;
    color: var(--match-ink, #272F3D);
    opacity: 0.5;
}

.npca-v2-portal-footer__credit a {
    color: inherit;
    text-decoration: underline;
}

/* My Projects tab (2026-07-08) -- see templates/dashboard-tabs/tab-projects.php. Each project
   renders as a card, not a table row, matching the card-based visual language already established
   for the rest of the portal (.npca-v2-status-card) rather than introducing a new table pattern. */
.npca-v2-projects-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.npca-v2-project-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.npca-v2-project-card {
    background: #fff;
    border: 2px solid var(--match-border, #E2E8EE);
    border-radius: var(--radius-card, 14px);
    padding: 16px 20px;
}

.npca-v2-project-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.npca-v2-project-card__header h3 {
    margin: 0;
}

.npca-v2-project-card__facts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px 16px;
    margin: 12px 0;
}

.npca-v2-project-card__facts dt {
    font-size: 0.8em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--match-ink, #272F3D);
    opacity: 0.6;
}

.npca-v2-project-card__facts dd {
    margin: 2px 0 0;
}

/* Project Address eligibility indicator (2026-07-09, review fix #3) -- see
   assets/js/project-address.js. Same "colored left border on a soft card" language as
   .npca-v2-status-card--ready/--attention (onboarding.css) rather than a new visual pattern; the
   non-participating state is deliberately informational/amber, not alarming red, since it is
   explicitly not a rejection -- the user can still submit and staff will follow up. */
.npca-v2-eligibility-indicator {
    margin-top: 10px;
    padding: 10px 14px;
    border-radius: calc(var(--radius-card, 14px) / 2);
    font-size: 0.9em;
}

.npca-v2-eligibility-indicator p {
    margin: 4px 0 0;
}

.npca-v2-eligibility-indicator--eligible {
    background: rgba(46, 125, 50, 0.1);
    border-left: 4px solid var(--brand-primary, #2E7D32);
    color: var(--brand-primary, #2E7D32);
}

.npca-v2-eligibility-indicator--non-participating {
    background: rgba(179, 130, 15, 0.12);
    border-left: 4px solid #B3820F;
    color: #7A5A0A;
}

/* C-PACE Academy — deliberate symmetric/centered layout (v0.17.9), superseding the "avoid a
   centered landing page" direction that drove v0.17.2 through v0.17.7. Nathan's explicit new
   priority: make the card "feel symmetrical, centered, compact, and evenly spaced" -- not fighting
   the card's centered tendency anymore, but making it deliberate and consistent instead of
   accidental. One shared inner column width (--npca-v2-academy-col) is applied to every major
   block -- Course Library CTA, Required Training section, Enrolled Courses, Completed Courses --
   so they read as symmetric sibling blocks of identical width, each centered within the card via
   `margin-inline: auto`, each with an identical divider (border-top spans exactly the block's own
   width, so all four dividers are visually the same width). Every section gets this divider now,
   including Course Library (previously suppressed as "the first element") -- consistency across
   all sections, not an exception for whichever one happens to render first.
   All declarations still use `!important`, per the same standing rationale documented in v0.17.7:
   this plugin's stylesheet loads before the active theme/page-builder's, so equal-specificity
   rules must be forced to survive that load-order tie regardless of which direction (left or
   centered) this file is asking for.

   v0.17.10: v0.17.9's rules only reset padding-top/margin-top/text-align on each block, which left
   room for theme-inherited padding-bottom, min-height, or button margins to still create uneven
   dead space on some sides but not others. This pass makes .npca-v2-academy itself a flex column
   (gap: 0, so spacing comes from one source -- each block's own margin-top -- not gap plus margin
   stacking together), gives every block a full box-model reset (margin/padding on every side, plus
   box-sizing: border-box and min-height: 0), and explicitly overrides align-self on Academy CTA
   buttons (see .npca-v2-academy .npca-v2-button below) -- the shared .npca-v2-button base class
   sets align-self: flex-start, which otherwise wins over this flex column's align-items: center
   for that one item regardless of specificity, leaving every CTA button pinned left while its
   description text centered around it. */
.npca-v2-academy {
    --npca-v2-academy-col: 520px;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0 !important;
    padding: 12px 18px !important;
    text-align: center !important;
}

.npca-v2-academy > h2 {
    margin: 0 0 8px !important;
    padding: 0 !important;
    font-size: 1.05em;
    line-height: 1.2 !important;
    text-align: center !important;
}

.npca-v2-academy-cta,
.npca-v2-academy-section {
    box-sizing: border-box !important;
    width: min(100%, var(--npca-v2-academy-col)) !important;
    max-width: var(--npca-v2-academy-col) !important;
    min-height: 0 !important;
    margin: 8px auto 0 !important;
    padding: 7px 0 0 !important;
    border-top: 1px solid var(--match-border, #E2E8EE) !important;
    text-align: center !important;
}

.npca-v2-academy-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start !important;
    gap: 3px !important;
}

/* v0.17.11: the same "make it a flex column with an explicit gap" fix that made .npca-v2-academy
   itself immune to residual theme spacing (v0.17.10) never got applied ONE LEVEL DEEPER, inside
   each individual section -- .npca-v2-academy-section was still a plain block element, so its own
   heading-to-content gap (Required Training's h3 to its CTA, Enrolled/Completed Courses' h3 to
   their list/empty-state line) still relied on margin-collapsing block flow, which is exactly the
   kind of layout residual theme/page-builder CSS can still distort. Making the section itself a
   flex column with one explicit gap value means that spacing no longer depends on any child's own
   margin surviving the cascade -- structural immunity, same rationale as v0.17.7's flexbox fix. */
.npca-v2-academy-section {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
}

.npca-v2-academy .npca-v2-button {
    /* The shared .npca-v2-button base class (registration.css) sets align-self: flex-start, which
       otherwise wins over this flex column's align-items: center regardless of specificity --
       align-self on an item always overrides the parent's align-items for that item. Without this
       override, every Academy CTA button would stay pinned to the left edge while its
       description text centers around it, reintroducing exactly the asymmetry this pass removes. */
    align-self: center !important;
    margin: 0 !important;
}

/* Required Training's three interactive CTA states sit INSIDE a .npca-v2-academy-section, which
   already supplies the section-level divider/spacing above -- this modifier cancels the CTA's own
   divider/margin so Required Training doesn't get two stacked dividers (one for the section, one
   for the CTA within it), keeping the "6px to 8px inside a section" rhythm distinct from the
   "10px to 12px between sections" rhythm. */
.npca-v2-academy-cta--nested {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border-top: none !important;
}

.npca-v2-academy-section h3 {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0.88em;
    line-height: 1.2 !important;
    font-weight: 700;
    text-align: center !important;
}

.npca-v2-academy-cta .npca-v2-muted,
.npca-v2-academy-section > p.npca-v2-muted {
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0.86em;
    line-height: 1.32 !important;
}

.npca-v2-required-training-cta__title {
    display: block;
    font-weight: 600;
    margin: 0 0 2px !important;
    text-align: center !important;
}

/* The course-row LIST itself stays left-aligned internally (title left, badges/status/button
   right, per its own established flex-row layout) -- centering is a section-column-width concern,
   not something that should reach into and re-align individual data rows. Without this, `text-align:
   center` on the ancestor .npca-v2-academy-section would otherwise inherit down into every course
   row's title/badge text. `align-self: stretch` is also required here (v0.17.11): now that
   .npca-v2-academy-section is a flex column with align-items: center, a flex item with no explicit
   align-self shrinks to fit its own content width and centers -- which is exactly what we want for
   the CTA/empty-state line, but would make this list only as wide as its longest row instead of
   the full 520px column, breaking its own internal justify-content: space-between (title far left,
   badges/button far right) layout, which expects the FULL column width to spread across. */
.npca-v2-academy-section .npca-v2-legal-doc-list,
.npca-v2-academy-section .npca-v2-legal-doc-list li {
    text-align: left !important;
}

.npca-v2-academy-section .npca-v2-legal-doc-list {
    align-self: stretch !important;
    width: 100%;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Course rows (v0.17.4) need a progress bar on its own line below the title/badges/button row --
   overrides the shared .npca-v2-legal-doc-list li flex-row rule (onboarding.css) to a plain block
   for this specific row type only; Documents' rows (no progress bar) are untouched since they
   don't carry this class. */
.npca-v2-academy .npca-v2-legal-doc-list li.npca-v2-course-row {
    display: block;
    min-height: 0 !important;
    padding: 4px 0 !important;
    margin: 0 !important;
}

.npca-v2-course-row__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

/* Small inline progress bar, used in Required Training/Enrolled/Completed rows and nowhere else
   yet -- first use of this pattern in the codebase (v0.17.4). Deliberately plain: a 2-div fill
   bar with a real ARIA progressbar role, no animation. Fill color follows the same
   --npca-v2-role-color custom property the readiness stepper and portal nav already use, so it
   automatically matches the viewing user's audience without a second color system. */
.npca-v2-progress-bar {
    display: block;
    width: 100%;
    max-width: 160px;
    height: 6px;
    border-radius: 999px;
    background: var(--match-border, #E2E8EE);
    overflow: hidden;
    margin: 4px 0;
}

.npca-v2-progress-bar__fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--npca-v2-role-color, var(--brand-primary, #2E7D32));
}

/* Role-specific readiness stepper (v0.17.4, 2026-07-11) -- see
   templates/components/access-stepper.php. Replaces the v0.17.2/0.17.3 flat-badge version with a
   connected circular stepper, per Nathan's explicit UI direction. DISPLAY/STATUS ONLY: reflects
   WordPress email verification + onboarding state, (Contractor only) a live LearnDash read, and
   (Property Owner only) the existing project.list n8n call already used by tab-projects.php -- it
   is deliberately NOT wired to any Postgres eligibility state and must never be treated as Match
   gate enforcement (see the component's own docblock).
   Visual model is COMPLETE / INCOMPLETE per step, not PAST / CURRENT / LOCKED -- completion order
   does not matter for this product, so there is no positional "current" or "locked" state; only
   the connector between two steps visually reflects whether the step before it is done. */
.npca-v2-readiness-stepper {
    margin-bottom: 14px;
    padding: 12px 14px 8px;
    border-radius: var(--radius-card, 14px);
    background: #fff;
    border: 2px solid var(--match-border, #E2E8EE);
}

.npca-v2-readiness-stepper__title {
    margin: 0 0 12px;
    font-family: var(--font-heading, system-ui, sans-serif);
    font-size: 1em;
    font-weight: 700;
    color: var(--match-ink, #272F3D);
}

.npca-v2-readiness-stepper__track {
    display: flex;
    align-items: flex-start;
}

.npca-v2-readiness-stepper__node-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 auto;
    width: 88px;
}

.npca-v2-readiness-stepper__node {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 0.8em;
    font-weight: 700;
    flex-shrink: 0;
}

.npca-v2-readiness-stepper__node.is-complete {
    background: var(--npca-v2-role-color, var(--brand-primary, #2E7D32));
    color: #fff;
}

.npca-v2-readiness-stepper__node.is-incomplete {
    background: #fff;
    color: var(--match-ink, #272F3D);
    border: 2px solid var(--match-border, #E2E8EE);
}

.npca-v2-readiness-stepper__connector {
    flex: 1 1 24px;
    height: 2px;
    margin-top: 13px;
    min-width: 16px;
}

.npca-v2-readiness-stepper__connector.is-complete {
    background: var(--npca-v2-role-color, var(--brand-primary, #2E7D32));
}

.npca-v2-readiness-stepper__connector.is-incomplete {
    background: var(--match-border, #E2E8EE);
}

.npca-v2-readiness-stepper__label {
    margin-top: 6px;
    font-size: 0.72em;
    text-align: center;
    color: var(--match-ink, #272F3D);
    line-height: 1.3;
}

@media (max-width: 720px) {
    .npca-v2-readiness-stepper__track {
        overflow-x: auto;
        padding-bottom: 4px;
    }

    .npca-v2-readiness-stepper__node-wrap {
        width: 72px;
    }
}