/* ==========================================================================
   MSP — Make a Submission Page · FED assets v11 · 12/10/2026
   Transcribed from the approved design page (MSP PAGE v6, stylesheet v7).
   Prefix: msp-   ·   No inline CSS: every value lives here.
   Sections: 1 tokens · 2 global · 3 layout and components · 4 responsive
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens — the approved values, in one place.
   -------------------------------------------------------------------------- */

:root {
    --msp-font: proxima-nova, "Segoe UI", -apple-system, Helvetica, Arial, sans-serif; /* already loaded in the product; no font file ships */

    --msp-ink: #20262B; /* card titles, strongest text */
    --msp-body: #44403C; /* body copy */
    --msp-muted: #6E6863; /* references, supporting lines, column header.
                                    5.5:1 on white and 4.8:1 on the tinted stub —
                                    #78716C passed on white but only reached 4.2:1
                                    on the tint, where 16 elements sit. */
    --msp-border: #E4E1DC; /* card and cell rules */
    --msp-rule: #A8A29E; /* progress bar divider */
    --msp-surface: #FFFFFF;
    --msp-surface-alt: #F2F0EC; /* card set header, column header, footer */
    --msp-page: #FCFAF6; /* page, and the quiet row background (stylesheet v7) */
    --msp-chip-bg: #ECEAE7; /* Show more / assignee pills (quiet pill, stylesheet v7); hover is the stone layer */
    --msp-badge-ext-granted-bg: #EDEBE7; /* EXTENSION GRANTED badge fill, as the design */
    --msp-card-set-shadow: 0 1px 2px rgba(50, 59, 66, .10); /* card set lift, as the design */

    --msp-action: #066D72; /* every button and pill label, links, selected chips (dark teal, stylesheet v7) */
    --msp-action-hover: #00959C; /* primary button hover only */
    --msp-action-tint: #D7E9EA; /* secondary button hover; selected chip and open Filters fill */
    --msp-hover-layer: rgba(87, 83, 78, .06); /* hover: a 6% stone layer over the element's own ground */
    --msp-chip-ink: #57534E; /* filter chip and Filters label at rest */
    --msp-white: #FFFFFF; /* text and icons on a filled control; the focus ring's gap */
    /* focus (stylesheet v7, "9A"): a 1.5px white gap and a 3px dark teal ring; drawn inset on full-width rows */
    --msp-focus-ring: 0 0 0 1.5px #FFFFFF, 0 0 0 3px #066D72;
    --msp-focus-ring-inset: inset 0 0 0 1.5px #FFFFFF, inset 0 0 0 3px #066D72;
    /* presence: an account signed in now (person card avatar) */
    --msp-halo-presence: 0 0 0 2px #FFFFFF, 0 0 0 4px #E07B1E;
    /* person card */
    /* progress detail panel (MSP PAGE v6) */
    --msp-pop-shadow: 0 12px 28px rgba(50, 59, 66, .16);
    --msp-stage-current: #E07B1E; /* current stage node; line beside an open stage */
    --msp-stage-current-ink: #B85C0F; /* current or reopened stage name */
    --msp-stage-line: #DCD8D3; /* timeline between stages */
    --msp-key-title: #8B8781; /* KEY heading */
    --msp-person-card-shadow: 0 8px 22px rgba(50, 59, 66, .16);
    --msp-person-card-access: #57534E;
    /* site header and footer (compact-site-, shared with RFP) */
    --compact-site-bg: #20262B;
    --compact-site-line: #323B42;
    --compact-site-divider: #4A5157;
    --compact-site-soft-text: #B9C0C5;
    --compact-site-tab-hover-line: rgba(255, 255, 255, .4);
    --compact-site-linkedin-line: rgba(255, 255, 255, .24);
    --msp-avatar-mk: #DB6E13; /* sample: the signed-in account's colour, a data-record value (data-msp-avatar-colour) */
    /* page widths (as RFP v7): fluid container up to 1320px with 32px inside each side; content capped at 1076px */
    --msp-shell: 1320px;
    --msp-shell-pad: 32px;
    --msp-content: 1076px;
    /* breakpoints (Bootstrap 5 defaults), read by msp.js; the media queries repeat the values because CSS cannot use a custom property in one */
    --msp-bp-sm: 576px;
    --msp-bp-md: 768px;
    --msp-bp-lg: 992px;
    --msp-bp-xl: 1200px;
    --msp-bp-xxl: 1400px;
    --msp-quiet-border: #C6C2BD;
    --msp-complete: #06A682; /* success jade — complete segment, panel dot, tick, badge ring */
    --msp-complete-ink: #00795A; /* jade as text: 5.4:1, where #06A682 is only 3.1:1 */
    --msp-extension-ring: #64748B; /* pending extension ring */
    --msp-extension-ink: #475569; /* pending extension clock */
    --msp-extension-label: #3F4A5A; /* pending extension label */
    --msp-outstanding: #C6C2BD; /* outstanding segment */
    --msp-marker: #C0201F; /* active-stage arrow, overdue text */

    --msp-overdue-badge: #DD0707;
    --msp-due-soon: #FE8A00;
    --msp-due-soon-ink: #8F6D00;
    --msp-at-risk: #C2410C;
    --msp-at-risk-bg: #FBE9E8;
    --msp-complete-bg: #D7EDE4;
    --msp-group-request-bg: #CFE8DF;
    --msp-group-request-ink: #0A5C42;
    --msp-group-assessment-bg: #D8E3F4;
    --msp-group-assessment-ink: #1E4A78;
    --msp-group-application-bg: #F4DCE8;
    --msp-group-application-ink: #8E2260;
    --msp-radius-card: 14px;
    --msp-radius-control: 8px;
    --msp-radius-badge: 4px;
    --msp-radius-pill: 9px;
    --msp-stack-indent: 46px; /* avatar + gutter: stacked cells align to the title */
}

/* --------------------------------------------------------------------------
   2. Scoped base
   Everything is scoped to .msp-root so the export cannot reach the rest of
   the developer's page. The design page set these on *, html, body and a;
   moving them inside .msp-root is the one change made for integration safety,
   and it is why the export must be dropped inside an element with that class.
   -------------------------------------------------------------------------- */

.msp-root,
.msp-root *,
.msp-root *::before,
.msp-root *::after {
    box-sizing: border-box;
}

.msp-root {
    margin: 0;
    background: var(--msp-page);
    min-height: 100%;
    font-family: var(--msp-font);
    color: var(--msp-body);
}

    .msp-root a {
        color: var(--msp-action);
    }

        .msp-root a:hover {
            color: var(--msp-action);
            text-decoration-thickness: 2px;
        }

    .msp-root [hidden] {
        display: none !important;
    }

/* --------------------------------------------------------------------------
   2b. Superseded global block
   -------------------------------------------------------------------------- */

/* Bootstrap breakpoints — xs <576 · sm ≥576 · md ≥768 · lg ≥992 · xl ≥1200 */

/* --------------------------------------------------------------------------
   3. Layout and components
   One class per distinct treatment in the design, 152 in total. Names follow
   the part they style: msp-card-*, msp-stub-*, msp-badge*, msp-seg*, msp-pop-*,
   msp-btn-*. A numeric suffix means a second variant of the same part (for
   example msp-badge-3 is the third badge treatment in the design).
   -------------------------------------------------------------------------- */


.msp-example-width {
    width: 100%;
    max-width: var(--msp-content);
}

.msp-x-2 {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 16px;
}

.msp-pop-head {
    display: inline-flex;
    align-items: center;
    font-weight: 800;
    font-size: 11px;
    line-height: 1;
    letter-spacing: .1em;
    background: var(--msp-action);
    color: var(--msp-white);
    border-radius: 5px;
    padding: 6px 9px;
}

.msp-x-3 {
    font-weight: 700;
    font-size: 15px;
    line-height: 1;
    color: var(--msp-action);
}

.msp-x-4 {
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--msp-muted);
    margin-bottom: 20px;
    max-width: 700px;
}

.msp-x-5 {
    background: var(--msp-surface-alt);
    border: 1px solid var(--msp-border);
    border-left: 4px solid var(--msp-action);
    border-radius: 8px;
    padding: 14px 18px;
    font-size: 12.5px;
    line-height: 1.65;
    color: var(--msp-body);
    max-width: 760px;
    margin-bottom: 24px;
}

.msp-x-6 {
    margin-top: 8px;
}

.msp-example-label-gap {
    margin-bottom: 12px;
}

.msp-example-width-2 {
    width: 100%;
    max-width: 1140px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.msp-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 10.5px;
    line-height: 1;
    letter-spacing: .04em;
    background: var(--msp-action);
    color: var(--msp-white);
    border-radius: 4px;
    padding: 5px 7px;
    white-space: nowrap;
    flex: none;
}

.msp-x-7 {
    font-weight: 700;
    font-size: 14px;
    color: var(--msp-action);
}

.msp-note {
    font-size: 12.5px;
    color: var(--msp-muted);
}

.msp-example-gap {
    margin-bottom: 44px;
}

.msp-card-set {
    background: var(--msp-surface);
    border: 1px solid var(--msp-border);
    border-radius: 14px;
    box-shadow: var(--msp-card-set-shadow);
    overflow: hidden;
}

.msp-set-rule {
    height: 4px;
    background: var(--msp-group-request-ink);
}

.msp-stub {
    background: var(--msp-surface-alt);
    padding: 18px 22px 20px;
    border-bottom: 1px solid var(--msp-border);
}

.msp-x-8 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
}

.msp-badge-2 {
    display: inline-flex;
    align-items: center;
    font-weight: 700;
    font-size: 10.5px;
    line-height: 1;
    letter-spacing: .04em;
    background: var(--msp-group-request-bg);
    color: var(--msp-group-request-ink);
    border-radius: 4px;
    padding: 6px 8px;
    white-space: nowrap;
}

.msp-x-9 {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-top: 8px;
}

.msp-stub-title {
    flex: 1;
    min-width: 0;
    font-weight: 700;
    font-size: 26.5px;
    line-height: 1.22;
    color: var(--msp-group-request-ink);
}

.msp-x-10 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    flex: none;
}

.msp-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-weight: 700;
    font-size: 12.5px;
    line-height: 1;
    color: var(--msp-white);
    background: var(--msp-action);
    border: 1.5px solid var(--msp-action);
    border-radius: 8px;
    padding: 9px 16px;
    cursor: pointer;
    white-space: nowrap;
}

.msp-x-11 {
    width: 13px;
    height: 13px;
    flex: none;
}

.msp-due-note {
    font-size: 11px;
    line-height: 1.4;
    color: var(--msp-muted);
    white-space: nowrap;
}

.msp-contents {
    display: contents;
}

.msp-pill {
    display: inline-flex;
    align-items: center;
    font-weight: 600;
    font-size: 10.5px;
    line-height: 1;
    color: var(--msp-action);
    background: var(--msp-chip-bg);
    border-radius: 9px;
    white-space: nowrap;
    padding: 5px 8px;
    margin-left: 4px;
    cursor: pointer;
}

.msp-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    background: var(--msp-surface-alt);
    border-top: 1px solid var(--msp-border);
    padding: 14px 22px;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--msp-muted);
}

.msp-pill-2 {
    display: inline-flex;
    align-items: center;
    font-weight: 600;
    font-size: 10.5px;
    line-height: 1;
    color: var(--msp-action);
    background: var(--msp-chip-bg);
    border-radius: 9px;
    white-space: nowrap;
    padding: 6px 9px;
    cursor: pointer;
}

.msp-x-14 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.msp-x-15 {
    font-size: 12.5px;
    color: var(--msp-muted);
    white-space: nowrap;
}

.msp-badge-status {
    display: inline-flex;
    align-items: center;
    font-weight: 700;
    font-size: 10.5px;
    line-height: 1;
    letter-spacing: .06em;
    background: var(--msp-due-soon);
    color: var(--msp-white);
    border-radius: 4px;
    padding: 7px 9px 5px;
    white-space: nowrap;
    flex: none;
}

.msp-stub-title-2 {
    font-weight: 700;
    font-size: 26.5px;
    line-height: 1.22;
    margin-top: 8px;
    color: var(--msp-group-request-ink);
}

.msp-card-grid {
    display: grid;
    grid-template-columns: minmax(0,2.7fr) minmax(0,1.5fr) minmax(0,1.25fr) 186px;
    gap: 18px;
    align-items: start;
    padding: 9px 22px;
    background: var(--msp-surface-alt);
    border-top: 1px solid var(--msp-border);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--msp-muted);
}

.msp-x-16 {
    text-align: right;
}

.msp-card-grid-2 {
    display: grid;
    grid-template-columns: minmax(0,2.7fr) minmax(0,1.5fr) minmax(0,1.25fr) 186px;
    gap: 18px;
    align-items: start;
    background-image: linear-gradient(var(--msp-due-soon),var(--msp-due-soon));
    background-repeat: no-repeat;
    background-size: 5px calc(100% - 9px);
    background-position: 0 4.5px;
    padding: 16px 22px;
    border-top: 1px solid var(--msp-border);
}

.msp-x-17 {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.msp-avatar {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #0E7490;
    color: var(--msp-white);
    font-weight: 700;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Centred on a collapsed row, and held there when the assignee list
     expands. The identity cell is 57px collapsed, so a centred 34px avatar
     sits 11px down; pinning that offset keeps the avatar's relationship to
     the row heading identical on every card, expanded or not. */
    align-self: flex-start;
    margin-top: 11px;
}

.msp-min0 {
    min-width: 0;
}

/* The card title is the same one block of text from the back end: the front
   end decides what fits. One line at lg and above, two below — and both lines
   are used, so max-height is left off (it cut the second line short of the
   clamp and wasted the room). Whether the clamp paints an ellipsis at
   the cut is unconfirmed, as on the header copy; the full title stays in the
   markup and in the title attribute either way.                           */
.msp-row-title {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--msp-ink);
}

.msp-truncate {
    display: block;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--msp-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.msp-x-18 {
    display: block;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--msp-muted);
    margin-top: 2px;
}

.msp-x-19 {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--msp-body);
    cursor: pointer;
}

.msp-role-ring {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--msp-surface);
    box-shadow: 0 0 0 1.4px var(--msp-group-request-ink);
    flex: none;
}

.msp-dot-box {
    width: 9px;
    height: 9px;
}

.msp-nowrap {
    white-space: nowrap;
    flex: none;
}

.msp-pill-3 {
    display: inline-flex;
    align-items: center;
    font-weight: 600;
    font-size: 10.5px;
    line-height: 1;
    color: var(--msp-action);
    background: var(--msp-chip-bg);
    border-radius: 9px;
    white-space: nowrap;
    flex: none;
    padding: 4px 7px;
}

.msp-block {
    display: block;
}

.msp-x-20 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12.5px;
    color: var(--msp-body);
}

.msp-pill-4 {
    display: inline-flex;
    align-items: center;
    font-weight: 600;
    font-size: 10.5px;
    line-height: 1;
    color: var(--msp-action);
    background: var(--msp-chip-bg);
    border-radius: 9px;
    white-space: nowrap;
    padding: 5px 8px;
    cursor: pointer;
}

.msp-x-21 {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}

.msp-x-22 {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    color: var(--msp-body);
    min-width: 0;
    flex-wrap: nowrap;
}

.msp-x-23 {
    color: var(--msp-muted);
    flex: none;
}

.msp-truncate-2 {
    color: var(--msp-muted);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.msp-role-ring-2 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--msp-surface);
    box-shadow: 0 0 0 1.4px var(--msp-group-assessment-ink);
    flex: none;
}

.msp-role-ring-3 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--msp-surface);
    box-shadow: 0 0 0 1.4px var(--msp-muted);
    flex: none;
}

.msp-pill-5 {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 10.5px;
    line-height: 1;
    color: var(--msp-action);
    background: var(--msp-chip-bg);
    border-radius: 9px;
    padding: 5px 9px;
    white-space: nowrap;
    cursor: pointer;
    margin-top: 2px;
    align-self: flex-start;
}

.msp-x-24 {
    width: 11px;
    height: 11px;
    flex: none;
}

.msp-x-25 {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--msp-ink);
}

.msp-x-26 {
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--msp-muted);
}

.msp-progress {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-top: 2px;
    cursor: pointer;
    border-radius: 4px;
    padding-top: 10px;
}

.msp-seg {
    width: 14px;
    height: 5px;
    border-radius: 2px;
    background: var(--msp-surface);
    box-shadow: inset 0 0 0 1px var(--msp-rule);
    transition: transform .12s ease-out;
}

.msp-here {
    position: relative;
    display: inline-flex;
    flex: none;
}

.msp-x-27 {
    position: absolute;
    left: 50%;
    bottom: 100%;
    margin-bottom: 4px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 4.5px solid transparent;
    border-right: 4.5px solid transparent;
    border-top: 6px solid var(--msp-marker);
}

.msp-due-lg {
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--msp-due-soon-ink);
}

.msp-x-28 {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 4px;
}

.msp-btn-primary-2 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12.5px;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    flex: none;
    padding: 8px 14px;
    color: var(--msp-white);
    background: var(--msp-action);
    border: 1.5px solid var(--msp-action);
}

.msp-x-29 {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    cursor: pointer;
    color: var(--msp-muted);
}

.msp-x-30 {
    width: 16px;
    height: 16px;
}

.msp-seg-done {
    width: 14px;
    height: 5px;
    border-radius: 2px;
    background: var(--msp-complete);
    transition: transform .12s ease-out;
}

.msp-badge-status-2 {
    display: inline-flex;
    align-items: center;
    font-weight: 700;
    font-size: 10.5px;
    line-height: 1;
    letter-spacing: .06em;
    background: var(--msp-overdue-badge);
    color: var(--msp-white);
    border-radius: 4px;
    padding: 7px 9px 5px;
    white-space: nowrap;
    flex: none;
}

.msp-card-grid-3 {
    display: grid;
    grid-template-columns: minmax(0,2.7fr) minmax(0,1.5fr) minmax(0,1.25fr) 186px;
    gap: 18px;
    align-items: start;
    background-image: linear-gradient(var(--msp-overdue-badge),var(--msp-overdue-badge));
    background-repeat: no-repeat;
    background-size: 5px calc(100% - 9px);
    background-position: 0 4.5px;
    padding: 16px 22px;
    border-top: 1px solid var(--msp-border);
}

.msp-due-lg-2 {
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--msp-marker);
}

.msp-x-31 {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    align-items: flex-end;
}

.msp-btn-primary-3 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12.5px;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    flex: none;
    padding: 9px 14px;
    color: var(--msp-white);
    background: var(--msp-action);
    border: 1.5px solid var(--msp-action);
}

.msp-btn-quiet {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12.5px;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    flex: none;
    padding: 9px 14px;
    color: var(--msp-action);
    background: var(--msp-surface);
    border: 1.5px solid var(--msp-action);
}

.msp-x-32 {
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--msp-muted);
    margin-bottom: 20px;
    max-width: 760px;
}

.msp-x-33 {
    background: var(--msp-surface-alt);
    border: 1px solid var(--msp-border);
    border-left: 4px solid var(--msp-action);
    border-radius: 8px;
    padding: 14px 18px;
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--msp-body);
    margin-bottom: 26px;
    max-width: 760px;
}

.msp-x-34 {
    display: block;
    margin-top: 6px;
}

.msp-x-35 {
    margin-bottom: 38px;
}

.msp-card-set-2 {
    border: 1px solid var(--msp-border);
    border-radius: 14px;
    overflow: hidden;
    background: var(--msp-surface);
    box-shadow: var(--msp-card-set-shadow);
}

.msp-set-rule-2 {
    height: 4px;
    background: var(--msp-group-assessment-ink);
}

.msp-stub-2 {
    background: var(--msp-surface-alt);
    border-bottom: 1px solid var(--msp-border);
    padding: 18px 22px 20px;
}

.msp-x-36 {
    display: flex;
    gap: 6px;
}

.msp-badge-3 {
    display: inline-flex;
    align-items: center;
    font-weight: 700;
    font-size: 10.5px;
    line-height: 1;
    letter-spacing: .04em;
    background: var(--msp-group-assessment-bg);
    color: var(--msp-group-assessment-ink);
    border-radius: 4px;
    padding: 6px 8px;
    white-space: nowrap;
}

.msp-stub-title-3 {
    font-weight: 700;
    font-size: 26.5px;
    line-height: 1.22;
    margin-top: 8px;
    color: var(--msp-group-assessment-ink);
}

.msp-pill-6 {
    display: inline-flex;
    align-items: center;
    font-weight: 600;
    font-size: 10.5px;
    line-height: 1;
    color: var(--msp-action);
    background: var(--msp-chip-bg);
    border-radius: 9px;
    padding: 5px 8px;
    margin-left: 4px;
    white-space: nowrap;
    cursor: pointer;
}

.msp-footer-2 {
    background: var(--msp-surface-alt);
    border-top: 1px solid var(--msp-border);
    padding: 12px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.msp-x-37 {
    font-size: 12px;
    line-height: normal;
    color: var(--msp-muted);
}

.msp-pill-7 {
    display: inline-flex;
    align-items: center;
    font-weight: 600;
    font-size: 10.5px;
    line-height: 1;
    color: var(--msp-action);
    background: var(--msp-chip-bg);
    border-radius: 9px;
    padding: 6px 9px;
    white-space: nowrap;
    cursor: pointer;
}

.msp-badge-status-3 {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: 10.5px;
    line-height: 1;
    letter-spacing: .06em;
    background: var(--msp-overdue-badge);
    color: var(--msp-white);
    border-radius: 4px;
    padding: 7px 9px 5px;
    white-space: nowrap;
    flex: none;
    margin-left: auto;
}

.msp-x-38 {
    margin-top: 12px;
}

.msp-filters-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin-top: 12px;
}

.msp-seg-divider {
    position: relative;
    width: 1px;
    height: 11px;
    margin: 0 4px;
    background: var(--msp-rule);
}

.msp-btn-primary-4 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12.5px;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    padding: 9px 14px;
    color: var(--msp-white);
    background: var(--msp-action);
    border: 1.5px solid var(--msp-action);
}

.msp-btn-quiet-2 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12.5px;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    padding: 9px 14px;
    color: var(--msp-action);
    background: var(--msp-surface);
    border: 1.5px solid var(--msp-action);
}

.msp-pill-8 {
    display: inline-flex;
    align-items: center;
    font-weight: 600;
    font-size: 10.5px;
    line-height: 1;
    color: var(--msp-action);
    background: var(--msp-chip-bg);
    border-radius: 9px;
    white-space: nowrap;
    flex: none;
    padding: 4px 8px;
}

.msp-pill-9 {
    display: inline-flex;
    align-items: center;
    font-weight: 600;
    font-size: 10.5px;
    line-height: 1;
    color: var(--msp-action);
    background: var(--msp-chip-bg);
    border-radius: 9px;
    white-space: nowrap;
    flex: none;
    padding: 5px 8px;
    cursor: pointer;
}

.msp-x-39 {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    color: var(--msp-body);
    min-width: 0;
    flex-wrap: nowrap;
    margin-top: 8px;
}

.msp-seg-divider-2 {
    width: 1px;
    height: 11px;
    margin: 0 4px;
    background: var(--msp-rule);
}

.msp-x-40 {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}

.msp-btn-quiet-3 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12.5px;
    border-radius: 8px;
    cursor: pointer;
    padding: 8px 16px;
    color: var(--msp-action);
    background: var(--msp-surface);
    border: 1.5px solid var(--msp-action);
}

.msp-card-grid-4 {
    background-image: linear-gradient(var(--msp-due-soon),var(--msp-due-soon));
    background-repeat: no-repeat;
    background-size: 5px calc(100% - 9px);
    background-position: 0 4.5px;
    display: grid;
    grid-template-columns: minmax(0,2.7fr) minmax(0,1.5fr) minmax(0,1.25fr) 186px;
    gap: 18px;
    align-items: start;
    padding: 16px 22px;
    border-top: 1px solid var(--msp-border);
}

.msp-avatar-2 {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #166534;
    color: var(--msp-white);
    font-weight: 700;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.msp-card-grid-5 {
    display: grid;
    grid-template-columns: minmax(0,2.7fr) minmax(0,1.5fr) minmax(0,1.25fr) 186px;
    gap: 18px;
    align-items: start;
    padding: 16px 22px;
    border-top: 1px solid var(--msp-border);
}

.msp-avatar-3 {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #0b3b6f;
    color: var(--msp-white);
    font-weight: 700;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.msp-due-lg-3 {
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--msp-ink);
}

.msp-avatar-4 {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #475569;
    color: var(--msp-white);
    font-weight: 700;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.msp-x-41 {
    margin-bottom: 5px;
}

.msp-badge-4 {
    display: inline-flex;
    align-items: center;
    font-weight: 700;
    font-size: 10.5px;
    line-height: 1;
    letter-spacing: .06em;
    background: var(--msp-due-soon);
    color: var(--msp-white);
    border-radius: 4px;
    padding: 7px 9px 5px;
    white-space: nowrap;
}

.msp-avatar-5 {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #B45309;
    color: var(--msp-white);
    font-weight: 700;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.msp-card-grid-6 {
    display: grid;
    grid-template-columns: minmax(0,2.7fr) minmax(0,1.5fr) minmax(0,1.25fr) 186px;
    gap: 18px;
    align-items: start;
    background: var(--msp-page);
    padding: 16px 22px;
    border-top: 1px solid var(--msp-border);
}

.msp-avatar-6 {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #854D0E;
    color: var(--msp-white);
    font-weight: 700;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.msp-badge-5 {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: 11px;
    line-height: 1;
    letter-spacing: .04em;
    background: var(--msp-surface);
    color: var(--msp-complete-ink);
    border: 1.5px solid var(--msp-complete);
    border-radius: 4px;
    min-height: 25.2px;
    padding: 4px 9px 4px 7px;
    white-space: nowrap;
}

.msp-x-42 {
    width: 15px;
    height: 15px;
    flex: none;
}

.msp-x-43 {
    display: flex;
    align-items: center;
    gap: 10px;
}

.msp-pill-10 {
    display: inline-flex;
    align-items: center;
    font-weight: 600;
    font-size: 10.5px;
    line-height: 1;
    color: var(--msp-action);
    background: var(--msp-chip-bg);
    border-radius: 9px;
    white-space: nowrap;
    cursor: pointer;
    padding: 5px 8px;
}

.msp-x-44 {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 8px;
}

.msp-x-45 {
    background: var(--msp-surface-alt);
    border: 1px solid var(--msp-border);
    border-left: 4px solid var(--msp-action);
    border-radius: 8px;
    padding: 14px 18px;
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--msp-body);
    margin-bottom: 30px;
    max-width: 760px;
}

.msp-set-rule-3 {
    height: 4px;
    background: var(--msp-group-application-ink);
}

.msp-badge-6 {
    display: inline-flex;
    align-items: center;
    font-weight: 700;
    font-size: 10.5px;
    line-height: 1;
    letter-spacing: .04em;
    background: var(--msp-group-application-bg);
    color: var(--msp-group-application-ink);
    border-radius: 4px;
    padding: 6px 8px;
    white-space: nowrap;
}

.msp-stub-title-4 {
    flex: 1;
    min-width: 0;
    font-weight: 700;
    font-size: 26.5px;
    line-height: 1.22;
    color: var(--msp-group-application-ink);
}

.msp-btn-primary-5 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12.5px;
    line-height: 1;
    color: var(--msp-white);
    background: var(--msp-action);
    border: 1.5px solid var(--msp-action);
    border-radius: 8px;
    padding: 9px 16px;
    cursor: pointer;
    white-space: nowrap;
    flex: none;
}

.msp-x-46 {
    display: flex;
    align-items: flex-start;
    gap: 40px;
}

.msp-btn-quiet-4 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12.5px;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    flex: none;
    padding: 8px 14px;
    color: var(--msp-action);
    background: var(--msp-surface);
    border: 1.5px solid var(--msp-action);
}

.msp-due-lg-4 {
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--msp-muted);
}

.msp-pill-11 {
    display: inline-flex;
    align-items: center;
    font-weight: 600;
    font-size: 10.5px;
    line-height: 1;
    color: var(--msp-action);
    background: var(--msp-chip-bg);
    border-radius: 9px;
    white-space: nowrap;
    gap: 6px;
    padding: 5px 9px;
    cursor: pointer;
    margin-top: 2px;
    align-self: flex-start;
}

.msp-badge-7 {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: 11px;
    line-height: 1;
    letter-spacing: .04em;
    background: var(--msp-surface);
    color: var(--msp-complete-ink);
    border: 1.5px solid var(--msp-complete);
    border-radius: 4px;
    min-height: 25.2px;
    padding: 4px 9px 4px 7px;
    white-space: nowrap;
}

.msp-btn-primary-6 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12.5px;
    line-height: 1;
    color: var(--msp-white);
    background: var(--msp-action);
    border: 1.5px solid var(--msp-action);
    border-radius: 8px;
    padding: 9px 16px;
    cursor: pointer;
    white-space: nowrap;
    gap: 8px;
}

.msp-x-47 {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: none;
}

.msp-x-48 {
    width: 13px;
    height: 13px;
}

/* A pill that sits as a direct child of the card set header becomes a flex
   item once the header stacks below 992px, and would stretch to full width.
   Pin it to its own width — a pill is always as wide as its label.          */
.msp-stub > .msp-pill,
.msp-stub > .msp-pill-6,
.msp-stub > .msp-pill-10 {
    align-self: flex-start;
    flex: none;
    width: fit-content;
}

/* Manage assignment and access always sits on its own row beneath the names,
   never inside a person row — inside it competes with the job title, which
   always sits next to the name.                                             */
.msp-manage-row {
    display: flex;
    margin-top: 6px;
}

/* --- Card set header copy -------------------------------------------------
   The summary arrives from the back end as ONE block. It is written into the
   DOM once, whole, and stays there: collapsing does not remove or shorten any
   of it. Collapsed and expanded differ by a single class on the wrapper, so
   the two states always hold byte-identical text.

   The clamp is a LINE clamp on the block. -webkit-line-clamp resolves across
   nested block children, so it handles whatever shape the back end sends
   (sentences, paragraphs, bullets) and cuts on a line boundary. One line at
   lg and above, two below. Whether the browser paints an ellipsis at the cut
   is UNCONFIRMED — see the note on the rule itself.

   There is deliberately no fade or mask at the trailing edge: it would have
   to be grounded to whatever surface the block sits on, and it paints over
   empty space whenever the text stops short of the edge. Both faults shipped
   in v8. The "+ Show more" control beneath is the cue that there is more.

   The cap is a measure, set at the user's request to read as a column rather
   than run the card's full width. It clears the header CTA — the only thing
   to the copy's right — at any width rather than only at the 1140px
   container. It is deliberately not tied to the card table's action-column
   reserve of 204px: that is a different column in a different row, and
   matching it here wrapped four of the ten lead sentences.
   -------------------------------------------------------------------------- */



/* while clamped the block is a run of lines, so the gaps between its
   children are collapsed — otherwise a child's margin-top is counted inside
   the line budget and the block renders taller than the lines it shows */
.msp-stub-block--clamped > .msp-stub-para,
.msp-stub-block--clamped > .msp-stub-list {
    margin-top: 0;
}

.msp-stub-lead,
.msp-stub-para {
    font-size: 13px;
    line-height: 1.6;
    color: var(--msp-body);
}

.msp-stub-para {
    margin: 14px 0 0;
}
/* the whole margin: a <p> from the back end renders as a <div> does */

.msp-stub-list {
    margin: 12px 0 0;
    padding-left: 20px;
    font-size: 13px;
    line-height: 1.75;
    color: var(--msp-body);
}

.msp-stub-toggle {
    margin-top: 10px;
}

    /* the pill's leading margin belongs to an inline pill, not one on its own row */
    .msp-stub-toggle .msp-pill,
    .msp-stub-toggle .msp-pill-6 {
        margin-left: 0;
    }

/* --- Stage set table ------------------------------------------------------
   One row per progress card heading a stage can show, so the strings are
   constructible: stage number, stage name, assigned group, and the heading and
   subheading the card renders. Square brackets mark the variable parts.
   -------------------------------------------------------------------------- */

.msp-stagetable {
    background: var(--msp-surface);
    border: 1px solid var(--msp-border);
    border-radius: 10px;
    padding: 16px 18px 6px;
    margin-bottom: 20px;
    max-width: 940px;
}

.msp-stagetable-title {
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--msp-action);
    margin-bottom: 10px;
}

.msp-stagetable-grid {
    border-collapse: collapse;
    width: 100%;
}





.msp-stagetable-nowrap {
    white-space: nowrap;
}


/* --- Spec block ------------------------------------------------------------
   The business specification, transcribed from the design page. Part of the
   deliverable: it carries the rules a developer cannot read off the rendering.
   -------------------------------------------------------------------------- */

.msp-spec {
    width: 100%;
    max-width: 1140px;
}

.msp-spec-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 16px;
}

.msp-spec-tag {
    display: inline-flex;
    align-items: center;
    font-weight: 800;
    font-size: 11px;
    line-height: 1;
    letter-spacing: .1em;
    background: var(--msp-action);
    color: var(--msp-white);
    border-radius: 5px;
    padding: 6px 9px;
}

.msp-spec-title {
    margin: 0;
    font-weight: 700;
    font-size: 17px;
    color: var(--msp-action);
}

.msp-spec-body {
    background: var(--msp-surface);
    border: 1px solid var(--msp-border);
    border-radius: 14px;
    padding: 24px 26px;
    max-width: 1000px;
    font-size: 13px;
    line-height: 1.65;
    color: var(--msp-body);
}

.msp-spec-intro {
    margin: 0 0 18px;
    font-size: 13px;
    line-height: 1.65;
    color: var(--msp-body);
}

.msp-spec-h {
    margin: 0;
    font-weight: 700;
    font-size: 13px;
    color: var(--msp-ink);
}

.msp-spec-list {
    margin: 8px 0 18px;
    padding-left: 20px;
}

.msp-spec-list--last {
    margin-bottom: 0;
}

/* View is the one outline CTA that stays neutral: it means there is nothing
   to do, so it should not read as an action alongside Resume or Start. */
.msp-btn-quiet--view {
    border-color: var(--msp-quiet-border);
}

/* The extension note is always red, on every row including completed ones.
   It is not a warning about the date — it records that the submission needed
   more time than the original window allowed, which stays worth seeing after
   the work is done. */
.msp-ext-note {
    color: var(--msp-marker);
}

/* --- Extension badges -----------------------------------------------------
   Pending is dashed because the decision is provisional; granted drops to the
   quiet grey tint because once the date has moved the extension is a record
   rather than work. Both sit in the state family: 11px, 25.2px, 15px mark.
   -------------------------------------------------------------------------- */

.msp-badge-ext-pending {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: 11px;
    line-height: 1;
    letter-spacing: .04em;
    background: var(--msp-surface);
    color: var(--msp-extension-label);
    border: 1.5px dashed var(--msp-extension-ring);
    border-radius: 4px;
    min-height: 25.2px;
    padding: 4px 9px 4px 7px;
    white-space: nowrap;
}

.msp-badge-ext-granted {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: 11px;
    line-height: 1;
    letter-spacing: .04em;
    background: var(--msp-badge-ext-granted-bg);
    color: #57534E;
    border: 1.5px solid var(--msp-quiet-border);
    border-radius: 4px;
    min-height: 25.2px;
    padding: 4px 9px 4px 7px;
    white-space: nowrap;
}

/* OFF TRACK takes the header status treatment, like AT RISK */
.msp-badge-off-track {
    display: inline-flex;
    align-items: center;
    font-weight: 700;
    font-size: 10.5px;
    line-height: 1;
    letter-spacing: .06em;
    background: var(--msp-overdue-badge);
    color: var(--msp-white);
    border-radius: 4px;
    padding: 7px 9px 5px;
    white-space: nowrap;
}

/* the badge stacks above the due line */
.msp-badge-above {
    margin-bottom: 5px;
}

/* --- Hover states --------------------------------------------------------
   Authored in the design file as `style-hover` attributes, which are a
   Design Component runtime feature. This export has no such runtime, so they
   are declared here as ordinary :hover rules — the transition on .msp-seg and
   the --msp-chip-bg token were already in place for them.
   -------------------------------------------------------------------------- */

/* (v10 lifted segments on hover; MSP PAGE v6 does not) */

.msp-x-29:hover {
    background: var(--msp-hover-layer);
}

/* --- Progress detail panel ------------------------------------------------
   Rows are classes, not inline styles. A shaded run reads as one rounded
   block: the run's first and last rows carry the corners.
   -------------------------------------------------------------------------- */

.msp-pop-title {
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--msp-ink);
}

.msp-pop-sub {
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--msp-muted);
    margin-bottom: 10px;
}

/* v11: the panel lists each stage on a timeline (as the RFP side menu): an 18px
   node on a 2px line, the stage name in tracked caps, its due or completed
   date (with the red marker on the stage that has the next due date), then
   its milestone pages with a 9px dot. Round marks are SVG backgrounds so they
   stay round at any zoom; their colours are written in the data URIs
   (#06A682 jade, #E07B1E current orange, #C6C2BD grey, #A8A29E milestone ring).
   The panel's content is server-rendered per card ([data-msp-pop-content]);
   msp.js copies it into the one fixed panel, above the key. */

.msp-pop-stage {
    position: relative;
    padding: 6px 8px 6px 34px;
}

/* the line runs in two halves, above the node (to the previous stage) and
   below it (to the next); orange between open stages and beside an open
   stage's pages, grey otherwise. The node centre sits 15px below the block's top. */
.msp-pop-stage--line-above::before,
.msp-pop-stage--line-below::after {
    content: "";
    position: absolute;
    left: 16px;
    width: 2px;
    background: var(--msp-stage-line);
}

.msp-pop-stage--line-above::before {
    top: 0;
    height: 15px;
}

.msp-pop-stage--line-below::after {
    top: 15px;
    bottom: 0;
}
/* the last stage: the line stops 11px short of the block's bottom, at the last page row's centre */
.msp-pop-stage--line-end::after {
    bottom: 11px;
}

.msp-pop-stage--line-above-open::before,
.msp-pop-stage--line-below-open::after {
    background: var(--msp-stage-current);
}

.msp-pop-node {
    position: absolute;
    z-index: 1;
    left: 8px;
    top: 6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    box-shadow: 0 0 0 3px var(--msp-surface);
}

.msp-pop-stage--done .msp-pop-node {
    background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'18'%20height%3D'18'%20viewBox%3D'0%200%2018%2018'%3E%3Ccircle%20cx%3D'9'%20cy%3D'9'%20r%3D'9'%20fill%3D'%2306A682'%2F%3E%3C%2Fsvg%3E") center / 100% 100% no-repeat;
}

.msp-pop-stage--active .msp-pop-node {
    background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'18'%20height%3D'18'%20viewBox%3D'0%200%2018%2018'%3E%3Ccircle%20cx%3D'9'%20cy%3D'9'%20r%3D'9'%20fill%3D'%23E07B1E'%2F%3E%3C%2Fsvg%3E") center / 100% 100% no-repeat;
}

.msp-pop-stage--reopened .msp-pop-node {
    background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'18'%20height%3D'18'%20viewBox%3D'0%200%2018%2018'%3E%3Ccircle%20cx%3D'9'%20cy%3D'9'%20r%3D'7.5'%20fill%3D'%23FFFFFF'%20stroke%3D'%23E07B1E'%20stroke-width%3D'3'%2F%3E%3C%2Fsvg%3E") center / 100% 100% no-repeat;
}

.msp-pop-stage--todo .msp-pop-node {
    background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'18'%20height%3D'18'%20viewBox%3D'0%200%2018%2018'%3E%3Ccircle%20cx%3D'9'%20cy%3D'9'%20r%3D'8'%20fill%3D'%23FFFFFF'%20stroke%3D'%23C6C2BD'%20stroke-width%3D'2'%2F%3E%3C%2Fsvg%3E") center / 100% 100% no-repeat;
}

.msp-pop-stage-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 18px;
}

.msp-pop-stage-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--msp-muted);
}

.msp-pop-stage--done .msp-pop-stage-name {
    color: var(--msp-action);
}

.msp-pop-stage--active .msp-pop-stage-name,
.msp-pop-stage--reopened .msp-pop-stage-name {
    color: var(--msp-stage-current-ink);
}

.msp-pop-stage-when {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: none;
}

.msp-pop-marker {
    flex: none;
    display: block;
    width: 7px;
    height: 9px;
    fill: var(--msp-marker);
}

.msp-pop-stage-due {
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--msp-muted);
    white-space: nowrap;
}

.msp-pop-page {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
}

.msp-pop-page-dot {
    flex: none;
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.msp-pop-page--met .msp-pop-page-dot {
    background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'9'%20height%3D'9'%20viewBox%3D'0%200%209%209'%3E%3Ccircle%20cx%3D'4.5'%20cy%3D'4.5'%20r%3D'4.5'%20fill%3D'%2306A682'%2F%3E%3C%2Fsvg%3E") center / 100% 100% no-repeat;
}

.msp-pop-page--to-meet .msp-pop-page-dot {
    background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'9'%20height%3D'9'%20viewBox%3D'0%200%209%209'%3E%3Ccircle%20cx%3D'4.5'%20cy%3D'4.5'%20r%3D'3.75'%20fill%3D'%23FFFFFF'%20stroke%3D'%23A8A29E'%20stroke-width%3D'1.5'%2F%3E%3C%2Fsvg%3E") center / 100% 100% no-repeat;
}

.msp-pop-page-label {
    flex: 1;
    min-width: 0;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--msp-ink);
}

.msp-pop-page-meta {
    flex: none;
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--msp-muted);
}

/* the key: once, at the foot of the panel */
.msp-pop-key {
    margin-top: 10px;
    padding: 10px 12px;
    background: var(--msp-page);
    border: 1px solid var(--msp-border);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    font-size: 11px;
    line-height: 1.3;
    color: var(--msp-muted);
}

.msp-pop-key-title {
    font-weight: 800;
    font-size: 10px;
    line-height: 1;
    letter-spacing: .1em;
    color: var(--msp-key-title);
}

.msp-pop-key-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0 14px;
}

.msp-pop-key-col {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.msp-pop-key-col--milestones {
    padding-left: 14px;
    border-left: 1px solid var(--msp-border);
}

.msp-pop-key-head {
    font-weight: 700;
    font-size: 10.5px;
    line-height: 1;
    color: var(--msp-chip-ink);
    padding-bottom: 1px;
}

.msp-pop-key-item {
    display: flex;
    align-items: center;
    gap: 7px;
}

.msp-pop-key-label {
    min-width: 0;
}

.msp-pop-key-mark {
    flex: none;
    display: block;
    width: 14px;
    height: 14px;
}

.msp-pop-key-mark--current {
    background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'14'%20height%3D'14'%20viewBox%3D'0%200%2014%2014'%3E%3Ccircle%20cx%3D'7'%20cy%3D'7'%20r%3D'7'%20fill%3D'%23E07B1E'%2F%3E%3C%2Fsvg%3E") center / 100% 100% no-repeat;
}

.msp-pop-key-mark--completed {
    background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'14'%20height%3D'14'%20viewBox%3D'0%200%2014%2014'%3E%3Ccircle%20cx%3D'7'%20cy%3D'7'%20r%3D'7'%20fill%3D'%2306A682'%2F%3E%3C%2Fsvg%3E") center / 100% 100% no-repeat;
}

.msp-pop-key-mark--reopened {
    background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'14'%20height%3D'14'%20viewBox%3D'0%200%2014%2014'%3E%3Ccircle%20cx%3D'7'%20cy%3D'7'%20r%3D'5.75'%20fill%3D'%23FFFFFF'%20stroke%3D'%23E07B1E'%20stroke-width%3D'2.5'%2F%3E%3C%2Fsvg%3E") center / 100% 100% no-repeat;
}

.msp-pop-key-mark--next-due {
    background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'14'%20height%3D'14'%20viewBox%3D'0%200%2014%2014'%3E%3Cpath%20d%3D'M4%203%20L10%207%20L4%2011%20Z'%20fill%3D'%23C0201F'%2F%3E%3C%2Fsvg%3E") center / 100% 100% no-repeat;
}

.msp-pop-key-mark--to-meet {
    background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'14'%20height%3D'14'%20viewBox%3D'0%200%2014%2014'%3E%3Ccircle%20cx%3D'7'%20cy%3D'7'%20r%3D'3.75'%20fill%3D'%23FFFFFF'%20stroke%3D'%23A8A29E'%20stroke-width%3D'1.5'%2F%3E%3C%2Fsvg%3E") center / 100% 100% no-repeat;
}

.msp-pop-key-mark--met {
    background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'14'%20height%3D'14'%20viewBox%3D'0%200%2014%2014'%3E%3Ccircle%20cx%3D'7'%20cy%3D'7'%20r%3D'4.5'%20fill%3D'%2306A682'%2F%3E%3C%2Fsvg%3E") center / 100% 100% no-repeat;
}

/* --- Controls keep their own width ----------------------------------------
   A control is as wide as its label plus its padding. Several sit in column
   flex containers, where a stretch item would otherwise fill the container;
   a definite width stops that without disturbing controls that sit in a row.
   The two intentional full-width cases below 992px — the card CTA and the
   card set header CTA — are set in section 5 and excluded here.
   -------------------------------------------------------------------------- */

.msp-btn-primary,
.msp-pill,
.msp-pill-2,
.msp-x-19,
.msp-pill-4,
.msp-pill-5,
.msp-btn-primary-2,
.msp-btn-primary-3,
.msp-btn-quiet,
.msp-pill-6,
.msp-pill-7,
.msp-btn-primary-4,
.msp-btn-quiet-2,
.msp-pill-9,
.msp-btn-quiet-3,
.msp-pill-10,
.msp-btn-primary-5,
.msp-btn-quiet-4,
.msp-pill-11,
.msp-btn-primary-6,
.msp-chip {
    width: fit-content;
    max-width: 100%;
}

/* …except inside a stacked pair, where the design sizes both buttons to the
   wider of the two labels. That is the flex column's default cross-axis
   stretch; the guard above was cancelling it. */
.msp-x-31 > .msp-card-cta {
    width: auto;
    align-self: flex-end; /* share the right edge with the row above */
}

/* --------------------------------------------------------------------------
   4. Interactive parts
   -------------------------------------------------------------------------- */



.msp-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: .01em;
    font-kerning: none;
    font-variant-numeric: tabular-nums;
    color: var(--msp-chip-ink);
    background: var(--msp-surface);
    border: 1.5px solid var(--msp-quiet-border);
    border-radius: 6px;
    padding: 7px 10px 5px;
    cursor: pointer;
    transition: background-color .15s ease-out;
}

    .msp-chip[aria-pressed="true"] {
        font-weight: 700;
        color: var(--msp-action);
        background: var(--msp-action-tint);
        border-color: var(--msp-action);
    }

    .msp-chip[data-msp-filter="overdue"] {
        color: var(--msp-marker);
        border-color: var(--msp-marker);
    }

        .msp-chip[data-msp-filter="overdue"][aria-pressed="true"] {
            color: var(--msp-white);
            background: var(--msp-marker);
        }

    .msp-chip[data-msp-filter-toggle] {
        gap: 7px;
        font-size: 11px;
        font-weight: 600;
        padding: 8px 11px 6px;
    }

        .msp-chip[data-msp-filter-toggle][aria-expanded="true"] {
            color: var(--msp-action);
            background: var(--msp-action-tint);
            border-color: var(--msp-action);
        }

.msp-root [data-msp-toggle],
.msp-root [data-msp-progress] {
    cursor: pointer;
}

    .msp-root [data-msp-toggle]:focus-visible,
    .msp-root [data-msp-progress]:focus-visible,
    .msp-chip:focus-visible,
    .msp-card-cta[role="button"]:focus-visible,
    .msp-stub-cta:focus-visible,
    .msp-x-29:focus-visible {
        outline: none;
        box-shadow: var(--msp-focus-ring);
    }

/* Progress detail panel. Positioned by msp.js inside .msp-root, which is the
   panel's containing block — keep that element position:relative. */
.msp-pop {
    /* fixed, so the script writes only left/top in viewport coordinates */
    position: fixed;
    /* never taller than the viewport: the fallback below needs to be able to
     shrink the panel rather than place it over the bar it describes */
    max-height: calc(100vh - 16px);
    overflow-y: auto;
    z-index: 60;
    width: 348px;
    max-width: calc(100vw - 24px);
    box-sizing: border-box;
    padding: 14px 16px;
    background: var(--msp-surface);
    border: 1px solid var(--msp-border);
    border-radius: 12px;
    box-shadow: var(--msp-pop-shadow);
    /* the panel can be capped in a short viewport, so it has to be reachable:
     the pointer must be able to enter it and scroll. msp.js keeps it open
     while the pointer is inside. */
    pointer-events: auto;
}

@media print {
    .msp-pop, .msp-filters, .msp-filters-toggle {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .msp-seg, .msp-seg-done, .msp-chip {
        transition: none;
    }
}




/* --------------------------------------------------------------------------
   9. New in v9
   Blocks that appear in the design page but had no class in v8. Shipped names
   are untouched: 129 of this page's 155 style blocks resolved to a v8 class,
   and only the 26 below are new.
   -------------------------------------------------------------------------- */

.msp-root-layout {
    align-items: center;
    background: var(--msp-page);
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 48px 24px 24px;
    position: relative;
    width: 100%;
}

.msp-spec-title-2 {
    color: var(--msp-action);
    font-size: 17px;
    font-weight: 700;
    flex: none;
    white-space: nowrap;
}

.msp-spec-intro-2 {
    color: var(--msp-body);
    font-size: 13px;
    line-height: 1.65;
    margin-bottom: 18px;
}



.msp-stagetable-th {
    border-bottom: 1px solid var(--msp-border);
    color: var(--msp-muted);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .08em;
    padding-right: 0;
    padding: 0 14px 7px 0;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.msp-stagetable-num {
    border-bottom: 1px solid var(--msp-chip-bg);
    color: var(--msp-action);
    color: var(--msp-body);
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.45;
    padding: 8px 14px 8px 0;
    vertical-align: top;
    white-space: nowrap;
}

.msp-stagetable-name {
    border-bottom: 1px solid var(--msp-chip-bg);
    color: var(--msp-body);
    color: var(--msp-ink);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.45;
    padding: 8px 14px 8px 0;
    vertical-align: top;
    white-space: nowrap;
}

.msp-stagetable-td {
    border-bottom: 1px solid var(--msp-chip-bg);
    color: var(--msp-body);
    font-size: 12.5px;
    line-height: 1.45;
    padding: 8px 14px 8px 0;
    vertical-align: top;
    white-space: nowrap;
}

.msp-stagetable-last {
    border-bottom: 1px solid var(--msp-chip-bg);
    color: var(--msp-body);
    font-size: 12.5px;
    line-height: 1.45;
    padding-right: 0;
    padding: 8px 14px 8px 0;
    vertical-align: top;
}

.msp-stagetable-alt {
    background: var(--msp-group-application-bg);
    border-radius: 3px;
    color: var(--msp-group-application-ink);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .06em;
    margin-left: 7px;
    padding: 3px 5px;
    text-transform: uppercase;
    white-space: nowrap;
}

.msp-stub-para-2 {
    color: var(--msp-body);
    font-size: 13px;
    line-height: 1.6;
    margin-top: 14px;
}

.msp-stub-toggle-2 {
    margin-top: 10px;
}

.msp-row-title-2 {
    color: var(--msp-ink);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
}

.msp-dot-ring {
    align-items: center;
    background: var(--msp-surface);
    border-radius: 50%;
    box-shadow: 0 0 0 1.4px var(--msp-muted);
    display: inline-flex;
    flex: none;
    height: 15px;
    justify-content: center;
    width: 15px;
}

.msp-btn-quiet-5 {
    align-items: center;
    background: var(--msp-surface);
    border-radius: 8px;
    border: 1.5px solid var(--msp-quiet-border);
    color: var(--msp-action);
    cursor: pointer;
    display: inline-flex;
    font-size: 12.5px;
    font-weight: 700;
    justify-content: center;
    padding: 8px 16px;
}

.msp-due-note-late {
    color: var(--msp-marker);
    font-size: 12.5px;
    line-height: 1.4;
}









.msp-btn-quiet-6 {
    align-items: center;
    background: var(--msp-surface);
    border-radius: 8px;
    border: 1.5px solid var(--msp-quiet-border);
    color: var(--msp-action);
    cursor: pointer;
    display: inline-flex;
    flex: none;
    font-size: 12.5px;
    font-weight: 700;
    justify-content: center;
    padding: 8px 14px;
    white-space: nowrap;
}


.msp-hover-2:hover {
    background: var(--msp-hover-layer);
}


/* --------------------------------------------------------------------------
   10. Base and breakpoints — transcribed verbatim from the design page's own
   helmet block, which is authoritative for these values.
   -------------------------------------------------------------------------- */

/* Bootstrap breakpoints — xs <576 · sm ≥576 · md ≥768 · lg ≥992 · xl ≥1200 */
.msp-card {
    align-items: flex-start
}
/* Line clamp, not a height clamp: it cuts on a line boundary. No fade — it
   has to be grounded to whatever surface the block sits on, and it paints
   over empty space whenever the text stops short of the edge. The margin
   reset is needed because a line clamp counts lines, not the gaps between
   block children. */
.msp-stub-block--clamped {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden
}

    .msp-stub-block--clamped > * {
        margin-top: 0 !important
    }

.msp-row-clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden
}

.msp-stub-copy {
    max-width: calc(100% - 240px)
}

@media (max-width:991.98px) {
    .msp-stub-block--clamped {
        -webkit-line-clamp: 2
    }

    .msp-row-clamp {
        -webkit-line-clamp: 2
    }

    .msp-stub-copy {
        max-width: 100% !important
    }

    .msp-colhead {
        display: none !important
    }

    .msp-stub-badges {
        align-items: flex-start !important;
        flex-wrap: nowrap !important
    }

        .msp-stub-badges:has(.msp-stub-meta) {
            padding-bottom: 22px
        }

    .msp-stub-meta {
        position: relative;
        flex: none !important;
        display: block !important
    }

        .msp-stub-meta > span:first-child {
            position: absolute !important;
            top: 100%;
            right: 0;
            margin-top: 5px;
            white-space: nowrap
        }

    .msp-card {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        padding: 16px !important;
        align-items: stretch
    }

        .msp-card > *:nth-child(2), .msp-card > *:nth-child(3) {
            margin: 10px 46px 0 !important;
            padding-top: 10px !important;
            border-top: 1px solid var(--msp-border) !important
        }

        .msp-card > *:nth-child(4) {
            margin: 12px 46px 0 !important;
            text-align: left !important;
            justify-content: flex-start !important
        }

    .msp-card-cta {
        flex: 1 !important
    }

        .msp-card-cta > span {
            width: 100% !important
        }

    .msp-stub {
        display: flex !important;
        flex-direction: column !important
    }

    .msp-stub-head {
        display: contents !important
    }

    .msp-stub-title {
        font-size: 19px !important;
        margin-top: 8px !important;
        width: 100%
    }

    .msp-stub-head > .msp-stub-cta, .msp-stub-cta-wrap {
        order: 99 !important;
        margin-top: 12px !important
    }

    .msp-filters {
        order: 100 !important
    }

    .msp-filters-toggle {
        display: inline-flex !important;
        align-self: flex-start !important;
        order: 100 !important
    }

    .msp-filters.msp-filters-closed {
        display: none !important
    }

    .msp-stub-cta, .msp-stub-cta-wrap {
        width: 100% !important;
        flex: none !important
    }

    .msp-stub-cta {
        justify-content: center !important
    }

    .msp-footer {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center
    }
}



/* --- Collapsed Filters control -------------------------------------------
   Below lg the chip row collapses behind this. Values transcribed from the
   design's own rfiltBtn. One deliberate difference from the design page: it
   sets display:block, which fills the header; the control-width rule in the
   export instructions names this control, so it is inline-flex here.
   -------------------------------------------------------------------------- */

.msp-filters-wrap {
    display: contents;
}

.msp-filters-toggle {
    display: none; /* shown only below lg, by the rule at the foot */
    align-items: center;
    gap: 7px;
    font-weight: 600;
    font-size: 11px;
    line-height: 1;
    letter-spacing: .01em;
    border-radius: 6px;
    padding: 8px 11px 6px;
    margin-top: 12px;
    cursor: pointer;
    color: var(--msp-chip-ink);
    background: var(--msp-surface);
    border: 1.5px solid var(--msp-quiet-border);
}

    .msp-filters-toggle[aria-expanded="true"] {
        color: var(--msp-action);
        background: var(--msp-action-tint);
        border-color: var(--msp-action);
    }



/* The copy block's first line holds the same position in both states, so
   expanding reveals more beneath it rather than shifting what is already read.
   The clamped state zeroed every child's top margin; zeroing only the first
   child, in both states, is what keeps the top edge still. */
.msp-stub-block > :first-child {
    margin-top: 0;
}

/* --- Card set header CTA: its own column, not part of the text's flow -------
   The header is a flex row holding the title and the CTA column. The CTA column
   is taller than the title (button plus its caption), so the row took the CTA's
   height and pushed the summary text below it — 29px of gap where a set without
   a CTA has 8px. They are different columns, so the CTA must not set the height
   of anything in the text column.

   At lg and above the CTA column is lifted out of flow and pinned to the
   header's top right, level with where flex put it. Below lg the design stacks
   it full width under the title, so it stays in flow there.
   -------------------------------------------------------------------------- */

@media (min-width: 992px) {
    .msp-stub {
        position: relative;
    }

    .msp-stub-cta-wrap,
    .msp-stub-head > .msp-stub-cta {
        position: absolute;
        top: 48px;
        right: 22px;
        margin: 0;
    }

    /* Out of flow, the CTA no longer reserves its column, so a long card set
     title would print underneath it. The title keeps that width clear:
     161px for the widest CTA plus the header's 20px gap. */
    .msp-stub:has(.msp-stub-cta) .msp-stub-title {
        padding-right: 181px;
    }
}


/* --- Action cell: aligned with the avatar ---------------------------------
   The avatar is centred as a collapsed row would centre it — 11px down in a
   57px identity cell — and holds that when the assignee list expands. The CTA
   and kebab take the same reference, so the action column reads level with the
   row's identity on every card, expanded or not.

   The 34px min-height makes the shorter 32px buttons share the taller ones'
   centre line, so one offset serves every row.
   -------------------------------------------------------------------------- */

.msp-card-action {
    align-items: flex-start;
    padding-top: 11px;
}

    /* Where the action cell holds the stacked pair it is the tallest thing in the
   row and therefore sets the row's height, so it takes the card's own padding
   on both sides rather than the avatar's offset — equal space above and below.
   The offset above is for the rows where the identity cell is taller. */
    .msp-card-action:has(.msp-x-31) {
        padding-top: 0;
    }

    .msp-card-action > * {
        min-height: 34px;
    }

    .msp-card-action > [title="More actions"] {
        align-items: center;
    }

/* --- The row's centre line ------------------------------------------------
   A collapsed row is 57px tall, so its centre sits 28px below the content's
   top edge. Every cell reads against that one line: the avatar and the CTA
   reach it with their 11px offset (11 + 34/2 = 28), and the progress and
   response-due cells reach it by centring inside a 57px box.

   The box is a min-height, not a height, so a cell that grows — the identity
   cell when the assignee list expands — grows downward from the line rather
   than moving it. Applied at lg and above only; below that the card stacks
   and there is no shared line to hold.
   -------------------------------------------------------------------------- */

@media (min-width: 992px) {
    .msp-card > :nth-child(2),
    .msp-card > :nth-child(3) {
        display: flex;
        flex-direction: column;
        justify-content: center;
        /* flex defaults align-items to stretch, which would pull a badge out to
       the cell's full width — these children keep their own width */
        align-items: flex-start;
        min-height: 57px;
    }
}


/* --------------------------------------------------------------------------
   11. New in v11 — stylesheet v7 states, page widths, site header and
   footer, person card. Transcribed from MSP PAGE v6.
   -------------------------------------------------------------------------- */

/* buttons: hovers ease out over 0.15s (stylesheet v7) */
.msp-btn-primary, .msp-btn-primary-2, .msp-btn-primary-3, .msp-btn-primary-4, .msp-btn-primary-5, .msp-btn-primary-6,
.msp-btn-quiet, .msp-btn-quiet-2, .msp-btn-quiet-3, .msp-btn-quiet-4, .msp-btn-quiet-5, .msp-btn-quiet-6,
.msp-pill, .msp-pill-2, .msp-pill-3, .msp-pill-4, .msp-pill-5, .msp-pill-6, .msp-pill-7, .msp-pill-8, .msp-pill-9, .msp-pill-10, .msp-pill-11 {
    transition: background-color .15s ease-out, border-color .15s ease-out;
}

    /* primary: bright teal on hover */
    .msp-btn-primary:hover, .msp-btn-primary-2:hover, .msp-btn-primary-3:hover,
    .msp-btn-primary-4:hover, .msp-btn-primary-5:hover, .msp-btn-primary-6:hover {
        background: var(--msp-action-hover);
        border-color: var(--msp-action-hover);
    }

    /* secondary (teal edge): teal tint on hover */
    .msp-btn-quiet:hover, .msp-btn-quiet-2:hover, .msp-btn-quiet-3:hover, .msp-btn-quiet-4:hover {
        background: var(--msp-action-tint);
    }

    /* tertiary (grey edge, View): teal tint and a teal edge on hover */
    .msp-btn-quiet-5:hover, .msp-btn-quiet-6:hover {
        background: var(--msp-action-tint);
        border-color: var(--msp-action);
    }

    /* quiet pills: the stone layer over their fill; the +N pill takes it when its assignee row is hovered */
    .msp-pill:hover, .msp-pill-2:hover, .msp-pill-4:hover, .msp-pill-5:hover, .msp-pill-6:hover,
    .msp-pill-7:hover, .msp-pill-9:hover, .msp-pill-10:hover, .msp-pill-11:hover,
    .msp-root [data-msp-toggle]:hover > .msp-pill-3,
    .msp-root [data-msp-toggle]:hover > .msp-pill-8 {
        background-image: linear-gradient(var(--msp-hover-layer), var(--msp-hover-layer));
    }

/* chips: the stone layer on hover; a hidden bold copy of the label (data-label)
   reserves the selected width, so selecting never resizes the chip or moves its neighbours */
.msp-chip:hover {
    background-image: linear-gradient(var(--msp-hover-layer), var(--msp-hover-layer));
}

.msp-chip[data-label] {
    flex-direction: column;
    justify-content: center;
    gap: 0;
}

    .msp-chip[data-label]::after {
        content: attr(data-label);
        font-weight: 700;
        height: 0;
        visibility: hidden;
        overflow: hidden;
        user-select: none;
        pointer-events: none;
    }

/* focus (stylesheet v7, 9A): every control except the site header and footer */
.msp-root button:focus-visible,
.msp-root a:focus-visible,
.msp-root [role="button"]:focus-visible,
.msp-root [tabindex]:focus-visible {
    outline: none;
    box-shadow: var(--msp-focus-ring);
}

/* full-width rows (menu items, options) draw the ring inside their edges, so a clipped container never cuts it off */
.msp-root [role="menuitem"]:focus-visible,
.msp-root [role="menuitemcheckbox"]:focus-visible,
.msp-root [role="option"]:focus-visible {
    box-shadow: var(--msp-focus-ring-inset);
}

/* buttons are reset at zero specificity, so a <button> carries only its own class rules */
:where(.msp-root) button {
    font: inherit;
    color: inherit;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    text-align: inherit;
    -webkit-appearance: none;
    appearance: none;
}

/* ---------- page widths ----------
   As RFP v7: the header and footer sit in a fluid container up to 1320px with
   32px inside each side; the page heading and card sets are capped at 1076px,
   centred under it. Below that they fill the width less the side padding. */

.msp-content-w {
    width: 100%;
    max-width: var(--msp-content);
    position: relative;
}

/* card sets: 40px between every card set, within and between sections */
.msp-set-wrap {
    margin-bottom: 40px;
}

    .msp-set-wrap:last-child {
        margin-bottom: 0;
    }

/* page heading */
.msp-page-header {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.msp-page-title {
    margin: 0;
    font-weight: 700;
    font-size: 28px;
    line-height: 1.2;
    color: var(--msp-action);
}

.msp-page-intro {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--msp-body);
    text-wrap: pretty;
}

@media (min-width: 768px) {
    .msp-root-layout {
        padding-left: 32px;
        padding-right: 32px;
    }
}

/* ---------- site header (compact-site-, shared with RFP) ---------- */

.compact-site-header {
    background: var(--compact-site-bg);
    overflow-x: hidden;
    width: 100%; /* width: 100%: the header band spans the window */
}

/* width: 100%: the header content container spans the header band */
.compact-site-header-wrap {
    width: 100%;
    max-width: var(--msp-shell);
    margin: 0 auto;
    padding: 0 var(--msp-shell-pad);
}

.compact-site-header-top {
    height: 104px;
    display: flex;
    align-items: center;
    gap: 22px;
}

.compact-site-header-home {
    display: flex;
    flex: none;
}

.compact-site-header-logo {
    height: 72px;
    width: auto;
    flex: none;
    display: block;
}

.compact-site-header-divider {
    width: 1px;
    height: 44px;
    background: var(--compact-site-divider);
    flex: none;
}

.compact-site-header-platform-name {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 0 1 auto;
    min-width: 0;
    position: relative;
    top: 11px;
}

.compact-site-header-platform-title {
    font-weight: 700;
    font-size: 20px;
    line-height: 1;
    color: var(--msp-white);
    white-space: nowrap;
}

.compact-site-header-platform-tagline {
    white-space: nowrap;
    font-size: 11.5px;
    line-height: 1;
    color: var(--compact-site-soft-text);
}

.msp-root .compact-site-header-user {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: none;
    cursor: pointer;
    position: relative;
    top: 11px;
    background: none;
    border: 0;
    padding: 0;
    text-align: left;
}

.compact-site-header-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--msp-avatar-colour, var(--msp-avatar-mk));
    color: var(--msp-white);
    font-weight: 700;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.compact-site-header-user-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: left;
}

.compact-site-header-user-name {
    font-weight: 600;
    font-size: 13px;
    line-height: 1.1;
    color: var(--compact-site-soft-text);
    white-space: nowrap;
    transition: color .3s;
}

.compact-site-header-user-org {
    font-size: 11px;
    line-height: 1.2;
    color: var(--compact-site-soft-text);
    white-space: nowrap;
    display: block;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .3s;
}

.compact-site-header-user-caret {
    font-size: 11px;
    color: var(--compact-site-soft-text);
    transition: color .3s;
}

.compact-site-header-user:hover .compact-site-header-user-name,
.compact-site-header-user:focus-visible .compact-site-header-user-name,
.compact-site-header-user:hover .compact-site-header-user-org,
.compact-site-header-user:focus-visible .compact-site-header-user-org,
.compact-site-header-user:hover .compact-site-header-user-caret,
.compact-site-header-user:focus-visible .compact-site-header-user-caret {
    color: var(--msp-white);
}

.compact-site-header-nav {
    display: flex;
    align-items: center;
    gap: 30px;
    overflow-x: auto;
    border-top: 1px solid var(--compact-site-line);
    scrollbar-width: none;
}

    .compact-site-header-nav::-webkit-scrollbar {
        display: none;
    }

.msp-root .compact-site-header-nav-tab {
    display: inline-flex;
    font-size: 13.5px;
    line-height: 1;
    color: var(--compact-site-soft-text);
    font-weight: 500;
    white-space: nowrap;
    padding: 22px 0 8px;
    margin-bottom: 11px;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: color .3s, border-color .3s;
}

    .msp-root .compact-site-header-nav-tab:hover,
    .msp-root .compact-site-header-nav-tab:focus-visible {
        color: var(--msp-white);
        border-bottom-color: var(--compact-site-tab-hover-line);
    }

.msp-root .compact-site-header-nav-tab--current,
.msp-root .compact-site-header-nav-tab--current:hover,
.msp-root .compact-site-header-nav-tab--current:focus-visible {
    color: var(--msp-white);
    font-weight: 700;
    border-bottom-color: var(--msp-white);
}

/* ---------- site footer (compact-site-, shared with RFP) ---------- */

.compact-site-footer {
    background: var(--compact-site-bg);
    width: 100%; /* width: 100%: the footer band spans the window */
}

/* width: 100%: the footer content container spans the footer band */
.compact-site-footer-wrap {
    width: 100%;
    max-width: var(--msp-shell);
    margin: 0 auto;
    padding: 30px var(--msp-shell-pad) 26px;
}

.compact-site-footer-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px 32px;
    flex-wrap: wrap;
}

.compact-site-footer-logo {
    height: 62px;
    width: auto;
    flex: none;
    display: block;
    margin: -5px 0;
}

.compact-site-footer-links {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    min-width: 0;
}

.compact-site-footer-links-primary {
    display: flex;
    align-items: center;
    gap: 12px 26px;
    flex-wrap: wrap;
    justify-content: flex-end;
    font-weight: 700;
    font-size: 15px;
    line-height: 1.3;
}

.compact-site-footer-links-secondary {
    display: flex;
    align-items: center;
    gap: 10px 26px;
    flex-wrap: wrap;
    justify-content: flex-end;
    padding-top: 12px;
    border-top: 1px solid var(--compact-site-divider);
    font-size: 12px;
    line-height: 1.3;
}

.msp-root .compact-site-footer-link {
    color: var(--msp-white);
    text-decoration: none;
    text-underline-offset: 3px;
    white-space: nowrap;
}

    .msp-root .compact-site-footer-link:hover,
    .msp-root .compact-site-footer-link:focus-visible {
        color: var(--msp-white);
        text-decoration: underline;
    }

.msp-root .compact-site-footer-link--secondary {
    color: var(--compact-site-soft-text);
    transition: color .3s;
}

    .msp-root .compact-site-footer-link--secondary:hover,
    .msp-root .compact-site-footer-link--secondary:focus-visible {
        color: var(--msp-white);
        text-decoration: none;
    }

.compact-site-footer-rule {
    height: 1px;
    background: var(--compact-site-divider);
    margin: 26px 0 22px;
}

.compact-site-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px 32px;
    flex-wrap: wrap;
}

.compact-site-footer-social {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}

.msp-root .compact-site-footer-linkedin {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--compact-site-linkedin-line);
    background: transparent;
    color: var(--msp-white);
    flex: none;
    transition: border-color .3s;
}

    .msp-root .compact-site-footer-linkedin:hover,
    .msp-root .compact-site-footer-linkedin:focus-visible {
        border-color: var(--msp-white);
    }

.compact-site-footer-linkedin-icon {
    width: 20px;
    height: 20px;
    display: block;
}

.compact-site-footer-copyright {
    margin-left: 6px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--compact-site-soft-text);
}

.compact-site-footer-govt-logo {
    height: 48px;
    width: auto;
    max-width: 100%;
    flex: none;
    display: block;
    margin: -4px 0;
}

.compact-site-footer-govt-logo--wordmark {
    display: none;
    height: 34px;
    margin: -2px 0;
}

/* header and footer links follow the website: no focus ring */
.msp-root .compact-site-header :focus-visible,
.msp-root .compact-site-footer :focus-visible {
    outline: none;
    box-shadow: none;
}

/* below md: the header wraps to two rows; the footer becomes one centred column */
@media (max-width: 767.98px) {
    .compact-site-header-wrap {
        padding: 0 16px;
    }

    .compact-site-header-top {
        height: auto;
        flex-wrap: wrap;
        gap: 0 14px;
        padding: 14px 0 12px;
    }

    .compact-site-header-home {
        margin-right: 100%;
    }

    .compact-site-header-logo {
        height: 48px;
    }

    .compact-site-header-divider {
        display: none;
    }

    .compact-site-header-platform-name {
        order: 3;
        flex: 1 1 0;
        top: 0;
        margin-top: 12px;
    }

    .compact-site-header-platform-title {
        font-size: 16px;
    }

    .compact-site-header-platform-tagline {
        display: none;
    }

    .msp-root .compact-site-header-user {
        order: 4;
        top: 0;
        margin-top: 12px;
    }

    .compact-site-header-user-text {
        display: none;
    }

    .compact-site-header-nav {
        gap: 22px;
    }

    .msp-root .compact-site-header-nav-tab {
        padding: 14px 0 8px;
        margin-bottom: 8px;
        font-size: 13px;
    }

    .compact-site-footer-wrap {
        padding: 28px 16px 24px;
        text-align: center;
    }

    .compact-site-footer-top {
        flex-direction: column;
        align-items: center;
        gap: 22px;
    }
    /* width: 100%: the footer links row spans the footer */
    .compact-site-footer-links {
        align-items: stretch;
        width: 100%;
    }

    .compact-site-footer-links-primary,
    .compact-site-footer-links-secondary {
        justify-content: center;
    }

    .compact-site-footer-rule {
        margin: 22px 0 20px;
    }

    .compact-site-footer-bottom {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .compact-site-footer-social {
        display: contents;
    }

    .msp-root .compact-site-footer-linkedin {
        order: 1;
    }

    .compact-site-footer-govt-logo--expanded {
        display: none;
    }

    .compact-site-footer-govt-logo--wordmark {
        display: block;
        order: 2;
    }

    .compact-site-footer-copyright {
        order: 3;
        margin-left: 0;
    }
}

@media (max-width: 575.98px) {
    .compact-site-header-nav {
        gap: 12px;
    }
}

/* ---------- person card ----------
   Opens on hover, focus or tap of an assignee's name or role icon. The server
   renders each card's content hidden beside its trigger
   ([data-msp-person-card-content]); msp.js shows a copy in the one fixed
   panel (#msp-person-card) and places it. Same pattern as the RFP user card. */

.msp-person-card {
    position: fixed;
    z-index: 400;
    width: min(320px, calc(100vw - 32px));
    padding: 14px 16px;
    background: var(--msp-surface);
    border: 1px solid var(--msp-border);
    border-radius: 8px;
    box-shadow: var(--msp-person-card-shadow);
    pointer-events: none;
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.msp-person-card-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--msp-avatar-colour, var(--msp-chip-ink));
    color: var(--msp-white);
    font-weight: 700;
    font-size: 11px;
}

    /* signed in now: the presence halo */
    .msp-person-card-avatar.is-here {
        box-shadow: var(--msp-halo-presence);
    }

/* a light divider between the avatar and the text block */
.msp-person-card-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding-left: 14px;
    border-left: 1px solid var(--msp-border);
}

.msp-person-card-name {
    font-weight: 700;
    font-size: 14px;
    line-height: 1.3;
    color: var(--msp-ink);
    overflow-wrap: anywhere;
}

.msp-person-card-position {
    font-weight: 600;
    font-size: 13px;
    line-height: 1.5;
    color: var(--msp-body);
    overflow-wrap: anywhere;
    text-wrap: pretty;
}

.msp-person-card-org {
    font-weight: 400;
    font-size: 13px;
    line-height: 1.5;
    color: var(--msp-muted);
    overflow-wrap: anywhere;
    text-wrap: pretty;
}

.msp-person-card-role {
    align-self: flex-start;
    margin-top: 6px;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--msp-surface-alt);
    border: 1px solid var(--msp-border);
    font-weight: 700;
    font-size: 11px;
    line-height: 1.2;
    color: var(--msp-body);
}

.msp-person-card-access {
    margin-top: 4px;
    font-weight: 400;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--msp-person-card-access);
}

@media print {
    .msp-person-card {
        display: none;
    }
}

/* sample page only: the body of index.html. The product's own layout supplies its body. */
.msp-page {
    margin: 0;
    background: var(--msp-page);
}