/* =====================================================================
   RFP — Report Form Page · FED assets v6 · side-menu navigation (timeline)
   Prefixes: compact-site-header- site header · compact-site-footer- page footer · rfp- everything else.
   Font: proxima-nova, referenced by name only (already in the product).
   Load this sheet AFTER Bootstrap: the markup carries Bootstrap's
   container-xl on the header containers, and the rules below restate
   every value those containers need so the page also renders with no
   other stylesheet present.
   Breakpoints are Bootstrap's: 576 / 768 / 992 / 1200 / 1400. They are
   defined here only; rfp.js reads them from the --rfp-bp-* properties.
   ===================================================================== */

:root {
    /* type */
    --rfp-font: proxima-nova, "Segoe UI", -apple-system, Helvetica, Arial, sans-serif;
    /* ink */
    --rfp-ink: #20262B;
    --rfp-ink-soft: #44403C;
    --rfp-ink-slate: #323B42;
    --rfp-muted: #57534E;
    --rfp-subtle: #6E6863;
    --rfp-column-label: #6E6863;
    --rfp-faint: #8B8781;
    --rfp-placeholder: #A8A29E;
    --rfp-white: #FFFFFF;
    /* brand and state colours */
    --rfp-teal-deep: #0B5A5E;
    --rfp-teal-hover: #007C82;
    --rfp-teal-mid: #2E9DA3;
    --rfp-teal-token: #007C82;
    --rfp-teal-token-bg: #E6F4F4;
    --rfp-teal-token-line: #BEE1E2;
    --rfp-teal-note-line: #BEE1E2;
    --rfp-grip-edge: rgba(32, 38, 43, .35); /* resize grip edge on hover and focus (colour review v6) */
    --rfp-teal-grip: var(--rfp-grip-edge); /* v4 name, kept as an alias for one version */
    --rfp-navy: #1E4A78;
    --rfp-navy-tint: #D8E3F4;
    --rfp-orange: #E07B1E;
    --rfp-orange-ink: #B85C0F;
    --rfp-orange-tint: #FBE9D3; /* current fill: "you are here" (current page, current version) */
    --rfp-orange-bar-track: #F3D6B8;
    --rfp-orange-sublink: #F0C9A0;
    --rfp-orange-halo: rgba(224, 123, 30, .55);
    --rfp-page-bar-bg: #FBF3EA;
    --rfp-page-bar-hover: #FBE9D3;
    --rfp-page-bar-rule: #F3D6B8;
    --rfp-jade: #06A682;
    --rfp-dot-grey: #C6C2BD;
    --rfp-red: #C0201F;
    --rfp-restricted: #B3261E;
    --rfp-amber: #8F6D00;
    --rfp-purple: #33005A;
    --rfp-purple-hover: #5E2B8C;
    --rfp-purple-tint: #EEE5F5;
    --rfp-purple-select: #F3EEF7;
    --rfp-purple-ring: #7B4BA6;
    --rfp-destructive: #B3261E;
    --rfp-destructive-tint: #FBE9E8;
    --rfp-link: #138F97;
    /* display type (the type rule and the protective marking) */
    --rfp-type-assessment: #1E4A78;
    --rfp-type-request: #0A5C42;
    --rfp-type-application: #8E2260;
    /* admin strips: seeding, preview, moderating */
    --rfp-admin-seeding: #12C26B;
    --rfp-admin-preview: #FF7A00;
    --rfp-admin-moderating: #FF2D2D;
    --rfp-required: #C0201F;
    /* surfaces */
    --rfp-page: #FCFAF6;
    --rfp-band: #F2F0EC;
    --rfp-rail: #F6F5F2;
    --rfp-timeline: #DCD8D3;
    --rfp-dot-edge: #A8A29E;
    --rfp-hover: #EDEBE7; /* disabled fills only; hover is --rfp-hover-layer */
    /* states are layers over the ground: hover is 6% stone over whatever the element sits on */
    --rfp-hover-layer: linear-gradient(rgba(87, 83, 78, .06), rgba(87, 83, 78, .06));
    --rfp-locked-field: #EDEBE7;
    /* lines */
    --rfp-line: #E4E1DC;
    --rfp-line-soft: #E4E1DC;
    --rfp-line-strong: #DCD8D3;
    --rfp-line-faint: #EDEBE7;
    --rfp-line-hair: #F2F0EC;
    --rfp-field-line: #C6C2BD;
    --rfp-checkbox-line: #B8B2AB;
    --rfp-divider-mark: #A8A29E;
    /* site header and footer (compact-site-) */
    --compact-site-bg: #20262B;
    --compact-site-line: #323B42;
    --compact-site-divider: #4A5157;
    --compact-site-soft-text: #B9C0C5;
    /* shadows */
    --rfp-shadow-band: 0 1px 3px rgba(50, 59, 66, .10);
    --rfp-shadow-menu: 0 6px 18px rgba(50, 59, 66, .16);
    --rfp-shadow-popup: 0 12px 28px rgba(50, 59, 66, .16);
    --rfp-shadow-sheet: 0 2px 8px rgba(50, 59, 66, .10);
    --rfp-shadow-drawer: 0 10px 28px rgba(50, 59, 66, .16);
    --rfp-shadow-peek: 6px 0 22px rgba(50, 59, 66, .16);
    --rfp-scrim: rgba(32, 38, 43, .45);
    --rfp-halo-current: 0 0 0 2px #FFFFFF, 0 0 0 3.5px #E07B1E;
    --rfp-halo-presence: 0 0 0 2px #FFFFFF, 0 0 0 4px #E07B1E;
    --rfp-shadow-strip: 0 2px 8px rgba(0, 0, 0, .25);
    --rfp-shadow-admin-menu: 0 12px 30px rgba(50, 59, 66, .16);
    --rfp-shadow-dialog: 0 20px 50px rgba(32, 38, 43, .3);
    --rfp-shadow-info: 0 8px 22px rgba(50, 59, 66, .16);
    --rfp-dialog-scrim: rgba(32, 38, 43, .45);
    /* focus: no teal ring; the hover colour plus a soft ink shadow */
    --rfp-focus-shadow: 0 0 0 3px rgba(32, 38, 43, .18), 0 2px 8px rgba(32, 38, 43, .22);
    --rfp-focus-halo: 0 0 0 3px rgba(32, 38, 43, .18);
    --rfp-focus-inset: inset 0 0 0 3px rgba(32, 38, 43, .18);
    --compact-site-tab-hover-line: rgba(255, 255, 255, .4);
    --compact-site-tab-gap: 30px;
    --compact-site-linkedin-line: rgba(255, 255, 255, .24);
    /* layout */
    --rfp-shell: 1140px;
    --rfp-shell-pad: 32px;
    --rfp-breadcrumb-bar-h: 40px;
    --rfp-rail-w: 288px;
    --rfp-stub-w: 56px;
    --rfp-column-head-h: 31.4px;
    --rfp-user-menu-w: 280px;
    --rfp-form-menu-w: 300px;
    --rfp-admin-strip-w: 476px;
    --rfp-admin-bar-strip-w: 404px;
    --rfp-marking-info-w: 440px;
    /* breakpoints: the only place they are defined (rfp.js reads these) */
    --rfp-bp-sm: 576px;
    --rfp-bp-md: 768px;
    --rfp-bp-lg: 992px;
    --rfp-bp-xl: 1200px;
    --rfp-bp-xxl: 1400px;
}

/* .rfp-page-html, .rfp-page-body: merged into its later rule (v4) */

.rfp-page-body {
    margin: 0;
    background: var(--rfp-page);
    font-family: var(--rfp-font);
    color: var(--rfp-ink);
}

.rfp-app,
.rfp-app *,
.rfp-app *::before,
.rfp-app *::after {
    box-sizing: border-box;
}

/* .rfp-app: merged into its later rule (v4) */

/* resets use :where() so any class rule below beats them */
:where(.rfp-app) a {
    color: var(--rfp-teal-deep);
}

    :where(.rfp-app) a:hover,
    :where(.rfp-app) a:focus-visible {
        color: var(--rfp-teal-hover);
    }

/* buttons are reset here so a <button> carries only its own class rules */
:where(.rfp-app) button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    margin: 0;
    padding: 0;
    text-align: inherit;
}

:where(.rfp-app) svg {
    display: block;
}

/* slim scrollbars on the page, the app and everything in it: 12px track, 6px thumb, transparent rail, 8x5 arrows */
@supports not selector(::-webkit-scrollbar) {
    .rfp-page-html,
    .rfp-app,
    .rfp-app * {
        scrollbar-width: thin;
        scrollbar-color: var(--rfp-dot-grey) transparent;
    }
}

.rfp-page-html::-webkit-scrollbar, .rfp-app::-webkit-scrollbar, .rfp-app ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

.rfp-page-html::-webkit-scrollbar-track, .rfp-app::-webkit-scrollbar-track, .rfp-app ::-webkit-scrollbar-track {
    background: transparent;
}

.rfp-page-html::-webkit-scrollbar-thumb, .rfp-app::-webkit-scrollbar-thumb, .rfp-app ::-webkit-scrollbar-thumb {
    background: var(--rfp-dot-grey);
    border-radius: 6px;
    border: 3px solid transparent;
    background-clip: content-box;
}

    .rfp-page-html::-webkit-scrollbar-thumb:hover, .rfp-app::-webkit-scrollbar-thumb:hover, .rfp-app ::-webkit-scrollbar-thumb:hover {
        background: var(--rfp-placeholder);
        background-clip: content-box;
    }

.rfp-page-html::-webkit-scrollbar-corner, .rfp-app::-webkit-scrollbar-corner, .rfp-app ::-webkit-scrollbar-corner {
    background: transparent;
}

.rfp-page-html::-webkit-scrollbar-button, .rfp-app::-webkit-scrollbar-button, .rfp-app ::-webkit-scrollbar-button {
    background-repeat: no-repeat;
    background-position: center;
    background-size: 8px 5px;
    display: block;
    height: 12px;
}

    .rfp-page-html::-webkit-scrollbar-button:horizontal, .rfp-app::-webkit-scrollbar-button:horizontal, .rfp-app ::-webkit-scrollbar-button:horizontal {
        background-size: 5px 8px;
        width: 12px;
    }

    .rfp-page-html::-webkit-scrollbar-button:vertical:start:decrement, .rfp-app::-webkit-scrollbar-button:vertical:start:decrement, .rfp-app ::-webkit-scrollbar-button:vertical:start:decrement {
        background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%208%205%22%3E%3Cpath%20d%3D%22M4%200%208%205H0z%22%20fill%3D%22%23C6C2BD%22%2F%3E%3C%2Fsvg%3E");
    }

    .rfp-page-html::-webkit-scrollbar-button:vertical:end:increment, .rfp-app::-webkit-scrollbar-button:vertical:end:increment, .rfp-app ::-webkit-scrollbar-button:vertical:end:increment {
        background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%208%205%22%3E%3Cpath%20d%3D%22M4%205%200%200h8z%22%20fill%3D%22%23C6C2BD%22%2F%3E%3C%2Fsvg%3E");
    }

    .rfp-page-html::-webkit-scrollbar-button:horizontal:start:decrement, .rfp-app::-webkit-scrollbar-button:horizontal:start:decrement, .rfp-app ::-webkit-scrollbar-button:horizontal:start:decrement {
        background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%205%208%22%3E%3Cpath%20d%3D%22M0%204%205%200v8z%22%20fill%3D%22%23C6C2BD%22%2F%3E%3C%2Fsvg%3E");
    }

    .rfp-page-html::-webkit-scrollbar-button:horizontal:end:increment, .rfp-app::-webkit-scrollbar-button:horizontal:end:increment, .rfp-app ::-webkit-scrollbar-button:horizontal:end:increment {
        background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%205%208%22%3E%3Cpath%20d%3D%22M5%204%200%208V0z%22%20fill%3D%22%23C6C2BD%22%2F%3E%3C%2Fsvg%3E");
    }

    .rfp-page-html::-webkit-scrollbar-button:vertical:start:increment, .rfp-app::-webkit-scrollbar-button:vertical:start:increment, .rfp-app ::-webkit-scrollbar-button:vertical:start:increment,
    .rfp-page-html::-webkit-scrollbar-button:vertical:end:decrement, .rfp-app::-webkit-scrollbar-button:vertical:end:decrement, .rfp-app ::-webkit-scrollbar-button:vertical:end:decrement,
    .rfp-page-html::-webkit-scrollbar-button:horizontal:start:increment, .rfp-app::-webkit-scrollbar-button:horizontal:start:increment, .rfp-app ::-webkit-scrollbar-button:horizontal:start:increment,
    .rfp-page-html::-webkit-scrollbar-button:horizontal:end:decrement, .rfp-app::-webkit-scrollbar-button:horizontal:end:decrement, .rfp-app ::-webkit-scrollbar-button:horizontal:end:decrement {
        display: none;
    }

/* visible keyboard focus on every control: the hover colour (each control's
   own :focus-visible rule) plus a soft ink shadow. No teal ring. The site
   header, the breadcrumb bar and the site footer follow the website instead
   (see "header and footer links follow the website"). */
.rfp-app button:focus-visible,
.rfp-app a:focus-visible,
.rfp-app [tabindex]:focus-visible {
    outline: none;
    box-shadow: var(--rfp-focus-shadow);
}

/* =====================================================================
   Site header (compact-site-header-)
   ===================================================================== */

.compact-site-header {
    flex: none;
    z-index: 60;
    background: var(--compact-site-bg);
    overflow-x: hidden;
}

.compact-site-header-full {
    background: var(--compact-site-bg);
}

/* width: 100%: the header content container spans the header band */

.compact-site-header-wrap {
    width: 100%;
    max-width: var(--rfp-shell);
    margin: 0 auto;
    padding: 0 var(--rfp-shell-pad);
}

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

.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(--rfp-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);
}

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

.compact-site-header-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--rfp-avatar-colour, var(--rfp-avatar-mk));
    color: var(--rfp-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-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;
    }

.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;
}

.rfp-app .compact-site-header-nav-tab,
.rfp-app .compact-site-header-nav-tab:hover {
    color: var(--compact-site-soft-text);
    text-decoration: none;
}

    .rfp-app .compact-site-header-nav-tab:hover {
        color: var(--rfp-white);
        border-bottom-color: var(--compact-site-tab-hover-line);
    }

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

/* folded site header: one 44px bar */

/* breadcrumb (type badge) — sits in the form header, named compact-site-header- by decision */
.rfp-breadcrumb {
    display: flex;
    width: fit-content;
    max-width: 100%;
    align-items: center;
    gap: 7px;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    font-weight: 700;
    font-size: 10.5px;
    line-height: 1;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--rfp-navy);
    background: var(--rfp-navy-tint);
    border-radius: 4px;
    padding: 7px 8px 5px;
    margin-bottom: 9px;
}

.rfp-breadcrumb-sep {
    display: flex;
    flex: none;
    width: 11px;
    height: 11px;
}

.rfp-breadcrumb-current {
    display: contents;
}

.rfp-breadcrumb-current-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--rfp-navy);
    opacity: .7;
}

/* .rfp-form-header: merged into its later rule (v4) */

/* display-type rule: clipped to the header content width, same as the
   RESTRICTED rule below it. Assessment = navy. */
.rfp-type-rule-wrap {
    max-width: var(--rfp-shell);
    margin: 0 auto;
    padding: 6px var(--rfp-shell-pad) 0;
}

.rfp-type-rule {
    height: 4px;
    background: var(--rfp-type-colour);
}

/* width: 100%: the form header container spans its band */

.rfp-form-header-inner {
    width: 100%;
    max-width: var(--rfp-shell);
    margin: 0 auto;
    padding: 10px var(--rfp-shell-pad) 12px;
}

.rfp-titlerow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    min-width: 0;
    position: relative;
}

.rfp-org-mark {
    width: 52px;
    height: 52px;
    border-radius: 8px;
    background: var(--rfp-white);
    border: 1px solid var(--rfp-line);
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rfp-org-mark-img {
    width: 22px;
    height: 22px;
}

.rfp-titleblock {
    flex: 1 1 200px;
    min-width: 0;
}

.rfp-title {
    display: block;
    margin: 0;
    font-weight: 700;
    font-size: clamp(19px, 2.2vw + 9px, 26.5px);
    line-height: 1.22;
    color: var(--rfp-navy);
    text-wrap: balance;
}

.rfp-subtitle {
    display: block;
    font-size: 13px;
    line-height: 1.4;
    color: var(--rfp-muted);
    margin-top: 4px;
}

.rfp-autosave {
    margin-left: auto;
    align-self: flex-end;
    flex: none;
    display: flex;
    align-items: center;
    gap: 4px;
    position: relative;
    margin-bottom: -6px;
}

.rfp-autosave-text {
    font-size: 11px;
    line-height: 1.3;
    color: var(--rfp-subtle);
    white-space: nowrap;
}

.rfp-form-options {
    position: relative;
    flex: none;
}

.rfp-form-options-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: -6px -8px -6px 0;
    border-radius: 8px;
    color: var(--rfp-muted);
    cursor: pointer;
}

.rfp-app .rfp-form-options-button[aria-expanded="true"] {
    background: var(--rfp-line-soft);
}

.rfp-form-options-icon {
    width: 15px;
    height: 15px;
}

.rfp-form-menu {
    position: fixed;
    z-index: 80;
    width: var(--rfp-form-menu-w);
    overflow-y: auto;
    overscroll-behavior: contain;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    padding: 6px 0;
    background: var(--rfp-white);
    border: 1px solid var(--rfp-line-strong);
    border-radius: 8px;
    box-shadow: var(--rfp-shadow-menu);
}

    .rfp-form-menu[hidden] {
        display: none;
    }

.rfp-form-menu-heading {
    display: block;
    font-weight: 800;
    font-size: 10px;
    line-height: 1;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--rfp-faint);
    padding: 10px 16px 6px;
}

.rfp-form-menu-divider {
    display: block;
    height: 1px;
    background: var(--rfp-line);
    margin: 6px 16px;
}

/* width: 100%: menu rows span the menu so the hover layer runs edge to edge */

.rfp-form-menu-version {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 16px;
    cursor: pointer;
    width: 100%;
}

    .rfp-form-menu-version:hover,
    .rfp-form-menu-version:focus-visible {
        background-image: var(--rfp-hover-layer);
    }

.rfp-form-menu-version--current {
    margin: 0;
    padding: 8px 16px 8px 13px;
    background: var(--rfp-orange-tint);
    border-left: 3px solid var(--rfp-orange);
    cursor: default;
}

    .rfp-form-menu-version--current:hover,
    .rfp-form-menu-version--current:focus-visible {
        background: var(--rfp-orange-tint);
    }

.rfp-form-menu-version-text {
    flex: 1;
    min-width: 0;
}

.rfp-form-menu-version-title {
    display: block;
    font-weight: 600;
    font-size: 12.5px;
    line-height: 1.35;
    color: var(--rfp-ink);
}

.rfp-form-menu-version--current .rfp-form-menu-version-title {
    font-weight: 700;
    color: var(--rfp-orange-ink);
}

.rfp-form-menu-version-meta {
    display: block;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--rfp-subtle);
    margin-top: 1px;
}

.rfp-form-menu-version--current .rfp-form-menu-version-meta {
    color: var(--rfp-ink-soft);
}

.rfp-form-menu-version-lock {
    flex: none;
    font-weight: 700;
    font-size: 10px;
    line-height: 1;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--rfp-subtle);
    margin-top: 3px;
    white-space: nowrap;
}

/* width: 100%: menu rows span the menu so the hover layer runs edge to edge */

.rfp-form-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    font-weight: 600;
    font-size: 12.5px;
    line-height: 1.3;
    color: var(--rfp-ink);
    cursor: pointer;
    width: 100%;
}

    .rfp-form-menu-item:hover,
    .rfp-form-menu-item:focus-visible {
        background-image: var(--rfp-hover-layer);
    }

/* protective marking */
.rfp-marking {
    position: relative;
    height: 16px;
    margin-top: 10px;
}

.rfp-marking-rule {
    position: absolute;
    left: 0;
    right: 0;
    top: 7px;
    height: 2px;
    background: var(--rfp-type-colour);
}

.rfp-marking-label {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: fit-content;
    top: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    background: var(--rfp-band);
    color: var(--rfp-type-colour);
}

.rfp-marking-icon {
    width: 11px;
    height: 11px;
    flex: none;
}

.rfp-marking-text {
    font-weight: 800;
    font-size: 10px;
    line-height: 16px;
    letter-spacing: .14em;
    white-space: nowrap;
}

/* .rfp-control-band: merged into its later rule (v4) */

.rfp-control-band-inner {
    width: 100%;
    max-width: var(--rfp-shell);
    margin: 0 auto;
    padding: 5px var(--rfp-shell-pad) 5px;
}

.rfp-collab-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 18px;
    flex-wrap: wrap;
    position: relative;
    min-height: 36px;
}

.rfp-presence {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
}

.rfp-presence-avatars {
    display: flex;
    align-items: center;
    gap: 6px;
}

.rfp-presence-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
    line-height: 1.3;
    color: var(--rfp-subtle);
    white-space: nowrap;
}

/* avatar: 25px in the band, 26px in the nav (--nav) */
.rfp-avatar {
    position: relative;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    color: var(--rfp-white);
    font-weight: 700;
    font-size: 10px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    transition: box-shadow .15s ease-out;
    background: var(--rfp-avatar-colour);
}

.rfp-avatar--nav {
    width: 26px;
    height: 26px;
    font-size: 9.5px;
}

/* on the current page with you: orange presence halo */
.rfp-avatar.is-here {
    box-shadow: var(--rfp-halo-presence);
}

/* role badge: eye = view, pencil = edit, star = you */
.rfp-avatar-badge {
    position: absolute;
    right: -6px;
    bottom: -6px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--rfp-white);
    box-shadow: 0 0 0 1.4px var(--rfp-avatar-colour);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--rfp-avatar-colour);
}

.rfp-avatar--nav .rfp-avatar-badge {
    bottom: -5px;
    right: -6px;
}

.rfp-avatar-badge-icon {
    width: 9px;
    height: 9px;
}

.rfp-avatar-badge-icon--edit-nav {
    width: 8px;
    height: 8px;
}

/* progress heading: centred in the row at lg+, its own line below lg */
.rfp-progress-heading {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    /* room for the divider (taller than the chips) and the red marker above it */
    gap: 14px;
    pointer-events: none;
}

.rfp-progress-heading-text {
    font-size: 11.5px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--rfp-muted);
    white-space: nowrap;
}

.rfp-progress-chips {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 6px 4px;
    margin: -6px -4px;
    pointer-events: auto;
    cursor: default;
    border-radius: 4px;
}

.rfp-progress-chip-wrap {
    position: relative;
    display: block;
}

.rfp-progress-chip-wrap--divider {
    margin: 0 4px;
}

.rfp-progress-chip {
    width: 14px;
    height: 5px;
    border-radius: 2px;
    display: block;
    transition: none;
    background: var(--rfp-dot-grey);
}

.rfp-progress-chip--met {
    background: var(--rfp-jade);
}

.rfp-progress-divider {
    width: 1px;
    height: 11px;
    display: block;
    background: var(--rfp-divider-mark);
}

/* red marker above the current position */
.rfp-progress-marker {
    position: absolute;
    left: 50%;
    bottom: 100%;
    margin-bottom: 3px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 4.5px solid transparent;
    border-right: 4.5px solid transparent;
    border-top: 6px solid var(--rfp-red);
}

/* progress popup — anchored under the chips */

/* a milestone page row: indented, with a 2px grey spine */

/* the section the submission is in: one shaded block */

/* Show: Form / Report / My notes — radios */
.rfp-view-switch {
    display: flex;
    align-items: center;
    gap: 18px;
}

.rfp-view-switch-label {
    font-size: 12px;
    line-height: 1;
    color: var(--rfp-subtle);
    white-space: nowrap;
}

.rfp-view-switch-option {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 600;
    font-size: 12px;
    line-height: 1;
    color: var(--rfp-muted);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.rfp-view-switch-radio {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    /* the ring is an inset shadow, not a border: a border is rounded to device
     pixels on its own, which pushes the dot off centre at some zoom levels */
    box-shadow: inset 0 0 0 2px var(--rfp-ring-colour, var(--rfp-dot-grey));
    background: var(--rfp-white);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.rfp-view-switch-radio-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: transparent;
}

.rfp-view-switch-option[aria-checked="true"] {
    color: var(--rfp-ink);
}

    .rfp-view-switch-option[aria-checked="true"] .rfp-view-switch-radio {
        --rfp-ring-colour: var(--rfp-dot-grey);
    }

    .rfp-view-switch-option[aria-checked="true"] .rfp-view-switch-radio-dot {
        background: var(--rfp-orange);
    }

/* Form is mandatory at md+: greyed, fixed on */
.rfp-view-switch-option--form.is-locked {
    color: var(--rfp-placeholder);
    cursor: default;
}

    .rfp-view-switch-option--form.is-locked .rfp-view-switch-radio {
        --rfp-ring-colour: var(--rfp-dot-grey);
        background: var(--rfp-locked-field);
    }

    .rfp-view-switch-option--form.is-locked .rfp-view-switch-radio-dot {
        background: var(--rfp-placeholder);
    }

/* =====================================================================
   Mobile page bar (< 576px) — opens the navigation drawer
   ===================================================================== */

.rfp-page-bar {
    display: none;
    position: relative;
    align-items: center;
    gap: 12px;
    padding: 13px 16px 15px;
    background: var(--rfp-page-bar-bg);
    cursor: pointer;
    width: 100%;
}

    .rfp-page-bar:hover,
    .rfp-page-bar:focus-visible {
        background: var(--rfp-page-bar-hover);
    }

.rfp-page-bar-where {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 6px;
    row-gap: 5px;
}

.rfp-page-bar-stage-group {
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-right: 4px;
}

.rfp-page-bar-stage {
    font-weight: 700;
    font-size: 14px;
    line-height: 1.2;
    color: var(--rfp-muted);
    white-space: nowrap;
}


.rfp-page-bar-title-group {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.rfp-page-bar-title {
    min-width: 0;
    font-weight: 600;
    font-size: 13.5px;
    line-height: 1.2;
    color: var(--rfp-orange-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rfp-page-bar-pct {
    flex: none;
    font-weight: 600;
    font-size: 12px;
    line-height: 1.2;
    color: var(--rfp-orange-ink);
    white-space: nowrap;
}

.rfp-page-bar-meta {
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

.rfp-page-bar-pos {
    font-size: 11.5px;
    line-height: 1.3;
    color: var(--rfp-muted);
    white-space: nowrap;
}

.rfp-page-bar-chevron {
    width: 14px;
    height: 14px;
    flex: none;
    transition: transform .16s ease-out;
}

.rfp-page-bar[aria-expanded="true"] .rfp-page-bar-chevron {
    transform: rotate(180deg);
}

.rfp-page-bar-track {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--rfp-page-bar-rule);
    pointer-events: none;
}

/* width is the current page's completion, written by the script */
.rfp-page-bar-fill {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    background: var(--rfp-orange);
    pointer-events: none;
}

/* =====================================================================
   Column header row and workspace — one track set.
   The tracks are CSS grid, not Bootstrap columns: the form and panel
   widths are user-resizable, so the script rewrites grid-template-columns
   (a runtime value) when a panel opens or a grip is dragged.
   Defaults below are the no-panel layout at each breakpoint.
   ===================================================================== */

.rfp-column-strip,
.rfp-workspace {
    width: 100%;
    margin: 0 auto;
    display: grid;
    justify-content: center;
    grid-template-columns: minmax(0, 1fr);
}

/* .rfp-column-strip: merged into its later rule (v4) */

/* .rfp-workspace: merged into its later rule (v4) */

/* closes the columns off above the footer, same line as the column header */


/* sm–md: 56px stub + form (header width 1076 = 1140 - 2 x 32) */
@media (min-width: 576px) {
    .rfp-column-strip,
    .rfp-workspace {
        max-width: 1076px;
        grid-template-columns: var(--rfp-stub-w) minmax(0, 1020px);
    }
}

/* lg+: 288px rail + form, together the header's content width */
@media (min-width: 992px) {
    .rfp-column-strip,
    .rfp-workspace {
        grid-template-columns: var(--rfp-rail-w) minmax(0, 788px);
    }
}

.rfp-column-strip-column {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    height: var(--rfp-column-head-h);
    padding: 0 22px;
}

.rfp-column-strip-column--rail {
    border-left: 1px solid var(--rfp-line);
    border-right: 1px solid var(--rfp-line);
}

.rfp-column-strip-column--form {
    border-right: 1px solid var(--rfp-line);
}

.rfp-column-strip-column--pane {
    display: none;
    gap: 9px;
    padding: 0 12px 0 22px;
}

.rfp-column-strip-label {
    font-weight: 700;
    font-size: 12px;
    line-height: 1;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--rfp-column-label);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: none;
}

.rfp-column-strip-column--pane .rfp-column-strip-label {
    flex: 1;
    min-width: 0;
}

.rfp-column-strip-icon {
    width: 14px;
    height: 14px;
    flex: none;
}

.rfp-rail-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    color: var(--rfp-teal-deep);
    cursor: pointer;
    flex: none;
}

.rfp-rail-toggle-icon {
    width: 15px;
    height: 15px;
}

.rfp-report-download {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 10px;
    margin-right: 4px;
    border: 1.5px solid var(--rfp-field-line);
    border-radius: 6px;
    background: var(--rfp-white);
    color: var(--rfp-ink);
    font-weight: 600;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    flex: none;
    white-space: nowrap;
}

.rfp-app .rfp-report-download {
    border: 1.5px solid var(--rfp-field-line);
    background: var(--rfp-white);
}

    .rfp-app .rfp-report-download:hover,
    .rfp-app .rfp-report-download:focus-visible {
        border-color: var(--rfp-purple);
        color: var(--rfp-purple);
    }

.rfp-report-download-icon {
    width: 13px;
    height: 13px;
    flex: none;
}

.rfp-panel-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    color: var(--rfp-muted);
    cursor: pointer;
    flex: none;
}

.rfp-app .rfp-panel-close:hover,
.rfp-app .rfp-panel-close:focus-visible {
    background: var(--rfp-line-soft);
}

.rfp-panel-close-icon {
    width: 13px;
    height: 13px;
}

/* =====================================================================
   Navigation rail
   ===================================================================== */

.rfp-rail {
    min-width: 0;
    display: flex;
    min-height: 0;
}

/* padding-bottom grows by the footer's height while the footer is hidden,
   so reaching the end of the rail brings the footer up (script) */
.rfp-rail-scroll {
    flex: 1;
    min-width: 0;
    padding: 16px 0 26px;
    background: var(--rfp-rail);
    overflow: auto;
    overscroll-behavior: contain;
    border-left: 1px solid var(--rfp-line-soft);
    border-right: 1px solid var(--rfp-line-soft);
}

.rfp-rail-drawer-head {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: -16px 0 12px;
    padding: 3px 8px 3px 18px;
    background: var(--rfp-band);
    border-bottom: 1px solid var(--rfp-line);
}

.rfp-rail-drawer-title {
    font-weight: 700;
    font-size: 12px;
    line-height: 1.2;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--rfp-column-label);
}

.rfp-rail-drawer-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    color: var(--rfp-muted);
    cursor: pointer;
}

.rfp-app .rfp-rail-drawer-close:hover,
.rfp-app .rfp-rail-drawer-close:focus-visible {
    background: var(--rfp-line);
}

.rfp-rail-drawer-close-icon {
    width: 15px;
    height: 15px;
}

.rfp-rail-stage-head {
    padding: 0 18px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.rfp-rail-stage-name {
    font-weight: 800;
    font-size: 10px;
    line-height: 1;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--rfp-faint);
}

.rfp-rail-stage-name--current-stage {
    color: var(--rfp-teal-deep);
}

.rfp-rail-stage-due {
    font-weight: 600;
    font-size: 11.5px;
    line-height: 1;
    color: var(--rfp-ink);
}

/* due colours, as MSP */
.rfp-due--soon {
    color: var(--rfp-amber);
}

.rfp-due--overdue {
    color: var(--rfp-red);
}

.rfp-rail-stage-dueline {
    padding: 0 18px 10px;
    margin-top: -5px;
    font-size: 11px;
    line-height: 1.3;
    color: var(--rfp-subtle);
    text-align: left;
}

.rfp-rail-assignees {
    padding: 0 18px 12px;
    display: flex;
    justify-content: flex-end;
    gap: 14px;
}

/* milestone dots — 9px */
.rfp-nav-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: none;
    background: transparent;
}

.rfp-nav-dot--met {
    background: var(--rfp-jade);
}

.rfp-nav-dot--due {
    background: var(--rfp-dot-grey);
}

/* the page you are on: its own dot (orange if no milestone) + orange ring */
.rfp-nav-dot--current {
    box-shadow: var(--rfp-halo-current);
}

    .rfp-nav-dot--current.rfp-nav-dot--none {
        background: var(--rfp-orange);
    }

/* one nav page: the row (rest) and the open block (current) are the same
   element; .is-current swaps the treatment */
.rfp-nav-page-row {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 18px;
    cursor: pointer;
    width: 100%;
}

    .rfp-nav-page-row:hover,
    .rfp-nav-page-row:focus-visible {
        background-image: var(--rfp-hover-layer);
    }

.rfp-nav-page-title {
    display: flex;
    gap: 5px;
    font-weight: 500;
    font-size: 13px;
    line-height: 1.3;
    color: var(--rfp-ink-slate);
}

.rfp-nav-page-num {
    flex: none;
}

.rfp-nav-page-pct {
    margin-left: auto;
    font-weight: 600;
    font-size: 10.5px;
    line-height: 1;
    color: var(--rfp-subtle);
}

.rfp-nav-page-detail {
    display: none;
}

.rfp-nav-page.is-current {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 11px 18px 11px 15px;
    background: var(--rfp-orange-tint);
    border-left: 3px solid var(--rfp-orange);
}

    .rfp-nav-page.is-current .rfp-nav-page-row {
        display: none;
    }

    .rfp-nav-page.is-current .rfp-nav-page-detail {
        display: block;
        flex: 1;
        min-width: 0;
    }

.rfp-nav-page-current-dot {
    display: none;
    margin-top: 4px;
}

.rfp-nav-page.is-current .rfp-nav-page-current-dot {
    display: block;
}

.rfp-nav-page-current-title {
    display: flex;
    gap: 5px;
    font-weight: 700;
    font-size: 13px;
    line-height: 1.3;
    color: var(--rfp-orange-ink);
}

.rfp-nav-page-progress {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 7px;
    min-width: 0;
}

.rfp-nav-page-progress-track {
    flex: 1;
    min-width: 0;
    height: 5px;
    border-radius: 3px;
    background: var(--rfp-orange-bar-track);
    overflow: hidden;
}

/* width is the page's completion, written by the script */
.rfp-nav-page-progress-fill {
    display: block;
    height: 100%;
    background: var(--rfp-orange);
    border-radius: 3px;
}

.rfp-nav-page-progress-pct {
    flex: none;
    font-weight: 700;
    font-size: 10.5px;
    line-height: 1;
    color: var(--rfp-orange-ink);
}

.rfp-nav-sublinks {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-top: 10px;
    padding-left: 12px;
}

.rfp-nav-sublink {
    display: block;
    padding: 4px 0 4px 12px;
    margin-left: -12px;
    border-left: 2px solid var(--rfp-orange-sublink);
    font-size: 12px;
    line-height: 1.35;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rfp-app .rfp-nav-sublink {
    color: var(--rfp-ink-slate);
    text-decoration: none;
}

    .rfp-app .rfp-nav-sublink:hover,
    .rfp-app .rfp-nav-sublink:focus-visible {
        color: var(--rfp-ink);
        text-decoration: underline;
    }

/* review stage rows (10–12) */
.rfp-nav-stage-row {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 18px 10px 18px;
    cursor: pointer;
    border-left: 3px solid transparent;
    margin-left: -3px;
    width: calc(100% + 3px);
}

    .rfp-nav-stage-row:hover,
    .rfp-nav-stage-row:focus-visible {
        background-image: var(--rfp-hover-layer);
    }

.rfp-nav-stage-label {
    display: flex;
    gap: 5px;
    font-weight: 500;
    font-size: 13px;
    line-height: 1.3;
    color: var(--rfp-subtle);
}

/* editable (role assigned and the stage has opened): dark slate */
.rfp-nav-stage.is-editable .rfp-nav-stage-label {
    color: var(--rfp-ink-slate);
}

.rfp-nav-stage-assignee {
    margin-left: auto;
}

.rfp-nav-stage-subs {
    display: none;
    background: var(--rfp-orange-tint);
    border-left: 3px solid var(--rfp-orange);
    padding-top: 2px;
}

    .rfp-nav-stage-subs .rfp-nav-sublinks {
        margin: -2px 18px 10px 38px;
    }

/* width: 100%: the current stage row spans the menu, like page rows */

.rfp-nav-stage.is-current .rfp-nav-stage-row {
    padding-left: 15px;
    border-left-color: var(--rfp-orange);
    margin-left: 0;
    width: 100%;
    background: var(--rfp-orange-tint);
}

.rfp-nav-stage.is-current .rfp-nav-stage-label {
    font-weight: 700;
    color: var(--rfp-orange-ink);
}

.rfp-nav-stage.is-current .rfp-nav-stage-subs {
    display: block;
}

.rfp-nav-stage-num {
    flex: none;
}

/* key */
.rfp-nav-key {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin: 28px 18px 20px;
    padding: 12px 14px 13px;
    background: var(--rfp-page);
    border: 1px solid var(--rfp-line-soft);
    border-radius: 8px;
    font-size: 11px;
    line-height: 1.3;
    color: var(--rfp-subtle);
}

.rfp-nav-key-title {
    display: block;
    font-weight: 800;
    font-size: 10px;
    line-height: 1;
    letter-spacing: .1em;
    color: var(--rfp-faint);
    margin-bottom: 3px;
}

.rfp-nav-key-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rfp-nav-key-swatch {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.rfp-nav-key-swatch--met {
    background: var(--rfp-jade);
}

.rfp-nav-key-swatch--due {
    background: var(--rfp-dot-grey);
}

.rfp-nav-key-note {
    display: block;
    margin-top: 5px;
    padding-top: 9px;
    border-top: 1px solid var(--rfp-line-faint);
    color: var(--rfp-subtle);
}

/* ---------- folded rail: the 56px stub (sm–md, or when hidden at lg+) ---------- */

.rfp-rail-stub {
    display: none;
    min-width: 0;
    min-height: 0;
}

.rfp-rail-stub-inner {
    flex: 1;
    min-width: 0;
    background: var(--rfp-rail);
    border-left: 1px solid var(--rfp-line-soft);
    border-right: 1px solid var(--rfp-line-soft);
    padding: 20px 10px 26px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    overflow: hidden;
    cursor: pointer;
}

.rfp-rail-stub-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    overflow-x: hidden;
    scrollbar-width: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 6px;
}

.rfp-rail-stub-label {
    flex: none;
    writing-mode: vertical-rl;
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}

.rfp-rail-stub-stage {
    font-weight: 800;
    font-size: 10px;
    line-height: 1;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--rfp-faint);
}

.rfp-rail-stub-title {
    font-weight: 700;
    font-size: 12px;
    line-height: 1;
    color: var(--rfp-orange-ink);
}

/* upright percentage */
.rfp-rail-stub-pct {
    font-weight: 600;
    font-size: 11px;
    line-height: 1;
    color: var(--rfp-orange-ink);
    writing-mode: horizontal-tb;
    white-space: nowrap;
    margin-top: 6px;
}

.rfp-rail-stub-pos {
    flex: none;
    font-weight: 700;
    font-size: 10.5px;
    line-height: 1;
    letter-spacing: .04em;
    color: var(--rfp-faint);
}

/* layout states (set by the script from the width and the open panel):
   is-rail-stub — the stub replaces the rail column
   is-rail-drawer — phone: the page bar replaces both */
@media (min-width: 576px) and (max-width: 991.98px) {
    .rfp-rail {
        display: none;
    }

    .rfp-rail-stub {
        display: flex;
    }

    .rfp-column-strip-label--rail {
        display: none;
    }
}

.rfp-app.is-rail-stub .rfp-rail {
    display: none;
}

.rfp-app.is-rail-stub .rfp-rail-stub {
    display: flex;
}

.rfp-app.is-rail-stub .rfp-column-strip-label--rail {
    display: none;
}

/* hovering the stub peeks the full rail over the form (position: script) */
.rfp-app.is-rail-peek .rfp-rail {
    display: flex;
    position: fixed;
    bottom: 0;
    z-index: 55;
    width: var(--rfp-rail-w);
    box-shadow: var(--rfp-shadow-peek);
}

@media (max-width: 575.98px) {
    .rfp-rail {
        display: none;
    }

    .rfp-rail-stub {
        display: none;
    }

    .rfp-column-strip-column--rail {
        display: none;
    }

    .rfp-page-bar {
        display: flex;
    }

    .rfp-rail-drawer-head {
        display: flex;
    }
}

/* phone drawer: drops from under the column header row (top: script) */
/* phones: the page list is full screen */
.rfp-app.is-drawer-open .rfp-rail {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    max-height: none;
    z-index: 70;
    background: var(--rfp-rail);
}

/* the title and close button stay in view while the list scrolls */
.rfp-app.is-drawer-open .rfp-rail-drawer-head {
    position: sticky;
    top: -16px;
    z-index: 2;
    background: var(--rfp-band);
}

.rfp-page-html.rfp-drawer-lock,
.rfp-page-html.rfp-drawer-lock .rfp-page-body {
    overflow: hidden;
}

.rfp-app.is-drawer-open .rfp-rail-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-left: 0;
    border-right: 0;
}

.rfp-rail-scrim {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 64;
    background: var(--rfp-scrim);
}

.rfp-app.is-drawer-open .rfp-rail-scrim {
    display: block;
}

/* .rfp-form-column: merged into its later rule (v4) */

.rfp-form-resize {
    position: absolute;
    top: 0;
    right: 0;
    width: 4px;
    height: 100%;
    cursor: col-resize;
    z-index: 25;
    background: transparent;
}

.rfp-form-resize-edge,
.rfp-panel-resize-edge {
    position: absolute;
    top: 0;
    width: 3px;
    height: 100%;
    background: transparent;
    transition: background .12s ease-out;
    pointer-events: none;
}

.rfp-form-resize-edge {
    right: 0;
}

.rfp-form-resize:hover .rfp-form-resize-edge,
.rfp-form-resize:focus-visible .rfp-form-resize-edge {
    background: var(--rfp-grip-edge);
}

/* .rfp-form-scroll: merged into its later rule (v4) */

.rfp-form-body {
    width: 100%;
    padding: 30px 32px 60px;
}

.rfp-form-page[hidden] {
    display: none;
}

.rfp-form-page-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
}

.rfp-form-page-title {
    margin: 0;
    font-weight: 700;
    font-size: 28px;
    line-height: 1.2;
    color: var(--rfp-teal-deep);
}

/* form reference (e.g. SAMPLE123): top right beside the page title; on
   phones it sits on its own line above the title, still right-aligned, so a
   long title keeps the full width */
.rfp-form-reference {
    font-weight: 600;
    font-size: 12.5px;
    line-height: 1;
    color: var(--rfp-teal-mid);
    white-space: nowrap;
}

.rfp-page-rule {
    height: 1px;
    background: var(--rfp-line-soft);
    margin: 18px 0 26px;
}

.rfp-section-heading {
    margin: 0;
    font-weight: 700;
    font-size: 17px;
    line-height: 1.3;
    color: var(--rfp-teal-deep);
}

.rfp-section-heading--spaced {
    margin-top: 32px;
}

.rfp-section-rule {
    height: 1px;
    background: var(--rfp-line-hair);
    margin: 10px 0 14px;
}

.rfp-section-rule--contacts {
    margin-bottom: 18px;
}

.rfp-para {
    margin: 0 0 12px;
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--rfp-ink);
    text-wrap: pretty;
}

.rfp-para--last {
    margin-bottom: 0;
}

.rfp-para--guidance {
    color: var(--rfp-subtle);
    font-style: italic;
}

.rfp-definitions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rfp-definition {
    padding: 14px 16px;
    background: var(--rfp-page);
    border: 1px solid var(--rfp-line-soft);
    border-radius: 8px;
}

.rfp-definition-term {
    font-weight: 700;
    font-size: 13.5px;
    line-height: 1.3;
}

.rfp-definition-text {
    font-size: 13px;
    line-height: 1.6;
    color: var(--rfp-ink-soft);
    margin-top: 5px;
}

.rfp-contacts {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.rfp-contact-card {
    padding: 18px 20px;
    background: var(--rfp-page);
    border: 1px solid var(--rfp-line-soft);
    border-radius: 8px;
}

.rfp-contact-question {
    display: block;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.4;
}

.rfp-required {
    color: var(--rfp-required);
}

/* width: 100%: text fields fill the question card, as designed */

.rfp-input {
    display: block;
    width: 100%;
    height: 40px;
    background: var(--rfp-white);
    border: 1px solid var(--rfp-field-line);
    border-radius: 6px;
    padding: 0 12px;
    font-family: inherit;
    font-size: 13px;
    color: var(--rfp-ink);
}

    .rfp-input:focus {
        outline: none;
        border-color: var(--rfp-ink);
        box-shadow: var(--rfp-focus-halo);
    }

.rfp-input--sro {
    max-width: 420px;
    margin-top: 10px;
}

.rfp-input-pair {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.rfp-input-field {
    display: block;
    flex: 1;
    min-width: 220px;
}

.rfp-input-caption {
    display: block;
    font-size: 12px;
    line-height: 1;
    color: var(--rfp-subtle);
    margin-bottom: 7px;
}

.rfp-checkbox-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
}

.rfp-checkbox {
    appearance: none;
    width: 18px;
    height: 18px;
    flex: none;
    margin: 0;
    background: var(--rfp-white);
    border: 1.5px solid var(--rfp-checkbox-line);
    border-radius: 4px;
    cursor: pointer;
}

    .rfp-checkbox:checked {
        background: var(--rfp-purple);
        border-color: var(--rfp-purple);
    }

.rfp-checkbox-label {
    font-size: 13px;
    line-height: 1.4;
}

/* stage access note: teal when you can edit, grey when view only */
.rfp-access-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 26px;
    padding: 14px 16px;
    border-radius: 8px;
    background: var(--rfp-rail);
    border: 1px solid var(--rfp-line);
}

.rfp-access-note--edit {
    background: var(--rfp-teal-token-bg);
    border: 1px solid var(--rfp-teal-note-line);
}

.rfp-access-icon {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-weight: 800;
    font-size: 12px;
    line-height: 1;
    background: var(--rfp-line);
    color: var(--rfp-muted);
}

.rfp-access-note--edit .rfp-access-icon {
    background: var(--rfp-teal-deep);
    color: var(--rfp-white);
}

.rfp-access-text {
    flex: 1;
    min-width: 0;
}

.rfp-access-title {
    display: block;
    font-weight: 700;
    font-size: 13px;
    line-height: 1.35;
    color: var(--rfp-ink);
}

.rfp-access-body {
    display: block;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--rfp-ink-soft);
    margin-top: 2px;
}

.rfp-form-section {
    margin-bottom: 30px;
}

.rfp-question-card {
    margin-top: 14px;
    background: var(--rfp-page);
    border: 1px solid var(--rfp-line);
    border-radius: 8px;
    padding: 16px 18px;
}

.rfp-question {
    font-weight: 700;
    font-size: 13px;
    line-height: 1.35;
    color: var(--rfp-ink);
}

.rfp-question-hint {
    font-size: 12px;
    line-height: 1.5;
    color: var(--rfp-muted);
    margin-top: 4px;
}

.rfp-answer-label {
    display: block;
    font-weight: 600;
    font-size: 12px;
    line-height: 1.3;
    color: var(--rfp-ink-soft);
    margin-top: 12px;
}

/* width: 100%: answer boxes fill the question card, as designed */

.rfp-answer {
    display: block;
    width: 100%;
    margin-top: 6px;
    min-height: 84px;
    background: var(--rfp-white);
    border: 1.5px solid var(--rfp-field-line);
    border-radius: 6px;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.5;
    color: var(--rfp-ink);
    resize: vertical;
}

    .rfp-answer:focus {
        outline: none;
        border-color: var(--rfp-ink);
        box-shadow: var(--rfp-focus-halo);
    }

.rfp-answer--readonly {
    background: var(--rfp-rail);
}

.rfp-form-footer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 16px 20px;
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid var(--rfp-line-hair);
}

.rfp-form-position {
    font-size: 12px;
    line-height: 1.4;
    color: var(--rfp-subtle);
}

.rfp-form-footer-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

/* .rfp-form-footer-button: merged into its later rule (v4) */

.rfp-app .rfp-form-footer-button {
    background: var(--rfp-white);
    border: 1.5px solid var(--rfp-field-line);
    padding: 9px 16px;
}

.rfp-app .rfp-form-footer-button--primary {
    color: var(--rfp-white);
    background: var(--rfp-purple);
    border-color: var(--rfp-purple);
}

.rfp-form-footer-button[hidden] {
    display: none;
}

/* height = the footer's height while it is hidden, 0 once it shows (script) */

/* =====================================================================
   Panels — Assessment report · My notes
   ===================================================================== */

.rfp-report-panel,
.rfp-notes-panel {
    display: none;
    min-width: 0;
    min-height: 0;
    background: var(--rfp-rail);
    border-left: 1px solid var(--rfp-line-soft);
    position: relative;
}

.rfp-app.has-panel-report .rfp-report-panel {
    display: flex;
}

.rfp-app.has-panel-notes .rfp-notes-panel {
    display: flex;
}

.rfp-app.has-panel-report .rfp-column-strip-column--pane,
.rfp-app.has-panel-notes .rfp-column-strip-column--pane {
    display: flex;
}

.rfp-column-strip-report {
    display: none;
}

.rfp-app.has-panel-report .rfp-column-strip-report {
    display: inline-flex;
}

/* below md the form is not mandatory: a panel replaces it */
.rfp-app.is-form-hidden .rfp-form-column,
.rfp-app.is-form-hidden .rfp-column-strip-column--form {
    display: none;
}

.rfp-panel-resize {
    position: absolute;
    top: 0;
    left: -4px;
    width: 8px;
    height: 100%;
    cursor: col-resize;
    z-index: 25;
    background: transparent;
}

.rfp-panel-resize-edge {
    left: 3px;
}

.rfp-panel-resize:hover .rfp-panel-resize-edge,
.rfp-panel-resize:focus-visible .rfp-panel-resize-edge {
    background: var(--rfp-grip-edge);
}

.rfp-report-scroll {
    flex: 1;
    min-width: 0;
    overflow: auto;
    overscroll-behavior: contain;
    padding: 20px 20px 30px;
}

/* the three A4 sheets are scaled to the panel as one stack; the box height
   and the scale are written by the script from the panel width */
.rfp-report-stack-box {
    width: 100%;
    overflow: hidden;
}

.rfp-report-stack {
    width: 794px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    transform-origin: top left;
}

.rfp-report-sheet {
    background: var(--rfp-white);
    border: 1px solid var(--rfp-line-strong);
    box-shadow: var(--rfp-shadow-sheet);
    padding: 48px 44px 60px;
    width: 794px;
    height: 1123px;
    flex: none;
    position: relative;
}

.rfp-report-sheet-title {
    font-weight: 800;
    font-size: 15px;
    line-height: 1;
    letter-spacing: .1em;
    color: var(--rfp-subtle);
}

.rfp-report-sheet-title--continued {
    font-size: 13px;
}

.rfp-report-draft {
    position: absolute;
    top: 44px;
    right: 44px;
    display: inline-flex;
    align-items: center;
    font-weight: 800;
    font-size: 13px;
    line-height: 1;
    letter-spacing: .16em;
    color: var(--rfp-orange-ink);
    border: 1.5px solid var(--rfp-orange);
    border-radius: 4px;
    padding: 6px 10px;
}

.rfp-report-table {
    margin-top: 18px;
    border: 1px solid var(--rfp-line-strong);
}

.rfp-report-table--first {
    margin-top: 26px;
}

.rfp-report-table-row {
    display: flex;
    border-bottom: 1px solid var(--rfp-line-strong);
}

    .rfp-report-table-row:last-child {
        border-bottom: 0;
    }

.rfp-report-table-key {
    width: 200px;
    flex: none;
    padding: 16px 18px;
    font-size: 17px;
    line-height: 1.4;
    border-right: 1px solid var(--rfp-line-strong);
}

.rfp-report-table-value {
    flex: 1;
    padding: 16px 18px;
}

.rfp-report-table-value--stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
}

/* where a form answer lands in the report */
.rfp-report-field {
    display: inline-block;
    font-size: 16px;
    line-height: 1.5;
    font-style: italic;
    color: var(--rfp-teal-token);
    background: var(--rfp-teal-token-bg);
    border: 1px solid var(--rfp-teal-token-line);
    border-radius: 4px;
    padding: 3px 7px;
}

.rfp-report-heading {
    margin-top: 36px;
    font-weight: 700;
    font-size: 22px;
    line-height: 1.3;
    color: var(--rfp-teal-mid);
}

.rfp-report-heading--first {
    margin-top: 38px;
}

.rfp-report-para {
    margin: 14px 0 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--rfp-ink);
}

.rfp-report-sheet-footer {
    position: absolute;
    left: 44px;
    right: 44px;
    bottom: 28px;
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    line-height: 1;
    color: var(--rfp-faint);
    border-top: 1px solid var(--rfp-line-soft);
    padding-top: 10px;
}

.rfp-report-note {
    margin-top: 12px;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--rfp-subtle);
}

.rfp-notes-scroll {
    flex: 1;
    min-width: 0;
    overflow: auto;
    overscroll-behavior: contain;
    padding: 20px 20px 30px;
    /* same ground as the report: the panel's grey shows through */
}

.rfp-notes-sheet {
    background: var(--rfp-white);
    border: 1px solid var(--rfp-line-strong);
    border-radius: 2px;
    box-shadow: var(--rfp-shadow-sheet);
    padding: 40px 40px 60px;
    min-height: calc(100% - 2px);
    outline: none;
    cursor: text;
}

    .rfp-notes-sheet:focus {
        border-color: var(--rfp-ink);
        box-shadow: var(--rfp-focus-halo);
    }

/* page headings are locked (contenteditable=false) */
.rfp-notes-page-heading {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.25;
    color: var(--rfp-teal-deep);
    margin-top: 34px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--rfp-teal-deep);
    user-select: none;
    cursor: default;
}

.rfp-notes-page-heading--first {
    margin-top: 0;
}

.rfp-notes-page-num {
    flex: none;
    color: var(--rfp-faint);
}

.rfp-notes-section-heading {
    font-weight: 700;
    font-size: 11px;
    line-height: 1.35;
    letter-spacing: .02em;
    color: var(--rfp-teal-deep);
    margin-top: 22px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--rfp-line);
    user-select: none;
    cursor: default;
}

.rfp-notes-section-heading--first {
    margin-top: 18px;
}

.rfp-notes-entry {
    font-size: 12.5px;
    line-height: 1.75;
    color: var(--rfp-ink-soft);
    margin-top: 9px;
    min-height: 1.75em;
}

    /* an empty entry shows its prompt from the attribute, so no prompt text
   is ever stored in the notes */
    .rfp-notes-entry:empty::before {
        content: attr(data-rfp-placeholder);
        color: var(--rfp-placeholder);
    }

.rfp-notes-tail {
    height: calc(100vh - 260px);
    min-height: 320px;
}

/* =====================================================================
   Page footer (compact-site-footer-) — fixed, hidden until a column reaches its end
   ===================================================================== */

/* the site footer sits at the end of the page, 24px under the columns */
.compact-site-footer {
    background: var(--compact-site-bg);
    margin-top: 24px;
}

/* width: 100%: the footer content container spans the footer band */

.compact-site-footer-wrap {
    width: 100%;
    max-width: var(--rfp-shell);
    margin: 0 auto;
    padding: 30px var(--rfp-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;
}

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

    .rfp-app .compact-site-footer-link:hover,
    .rfp-app .compact-site-footer-link:focus-visible {
        color: var(--rfp-white);
        text-decoration: underline;
        outline: none;
    }

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

    .rfp-app .compact-site-footer-link--secondary:hover,
    .rfp-app .compact-site-footer-link--secondary:focus-visible {
        color: var(--rfp-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;
}

.rfp-app .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(--rfp-white);
    flex: none;
    transition: border-color .3s;
}

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

.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;
}

/* =====================================================================
   Breakpoints (Bootstrap)
   ===================================================================== */

/* < md: progress takes its own line under the avatars and view switch */
@media (max-width: 767.98px) {
    .rfp-collab-row {
        min-height: 0;
    }

    .rfp-progress-heading {
        position: static;
        transform: none;
        order: 99;
        flex: 0 0 100%;
        padding-top: 12px;
        margin-top: -6px;
        border-top: 1px solid var(--rfp-line-soft);
    }
}

/* md–lg: progress stays inline; the two labels give way to make room */
@media (min-width: 768px) and (max-width: 991.98px) {
    .rfp-presence-label,
    .rfp-view-switch-label {
        display: none;
    }
}

/* < lg */
@media (max-width: 991.98px) {
    /* full-width exception 1 of 1 in this bundle: the footer CTA row fills
     the form width below lg, primary on its own line first */
    .rfp-form-footer-actions {
        flex: 1 1 100%;
    }

    .rfp-app .rfp-form-footer-button {
        flex: 1 1 auto;
        padding-top: 11px;
        padding-bottom: 11px;
    }

    .rfp-app .rfp-form-footer-button--primary {
        flex-basis: 100%;
        order: -1;
    }
}

/* < md */
@media (max-width: 767.98px) {
    .rfp-form-header-inner {
        padding: 10px 16px 12px;
    }
    /* below md the presence halo needs room above it: 12px, as on phones */
    .rfp-control-band-inner {
        padding: 12px 16px 5px;
    }


    .compact-site-header-wrap {
        padding: 0 16px;
    }

    .compact-site-header-top {
        height: auto;
        flex-wrap: wrap;
        gap: 0 14px;
        padding: 14px 0 12px;
    }
    /* the logo link takes the whole first line; the platform name and the
     user button wrap onto the line below it */
    .compact-site-header-home {
        flex: 0 0 auto;
        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;
    }

    .compact-site-header-user {
        order: 4;
        top: 0;
        align-self: center;
        margin-top: 12px;
    }

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

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

    .rfp-app .compact-site-header-nav-tab {
        padding: 14px 0 8px;
        margin-bottom: 8px;
        font-size: 13px;
    }
    /* the tabs' margin is 8px here (11px above md): the strip keeps the design's 16px of black above it */
    .rfp-app .rfp-admin--header {
        margin-top: 8px;
    }

    .rfp-autosave {
        flex: 0 0 100%;
        justify-content: flex-end;
        margin-top: -4px;
        margin-bottom: -2px;
        gap: 0;
    }

        .rfp-autosave .rfp-form-options {
            margin-left: -6px;
        }

    .rfp-autosave-text {
        font-size: 10.5px;
    }

    .rfp-form-options-icon {
        width: 14px;
        height: 14px;
    }

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

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

/* < sm */
@media (max-width: 575.98px) {
    .rfp-presence {
        flex: 1 1 100%;
        justify-content: center;
        position: relative;
        padding-top: 12px;
        margin-top: -18px;
        margin-bottom: 0;
        order: 2;
    }

    .rfp-presence-label {
        position: absolute;
        left: 0;
        /* centred on the avatars, not the 12px padding above them */
        top: calc(50% + 6px);
        transform: translateY(-50%);
        max-width: calc(50% - 60px);
    }

    .rfp-view-switch {
        flex: 1 1 100%;
        min-width: 0;
        justify-content: center;
        position: relative;
        order: 1;
        padding-bottom: 12px;
        border-bottom: 1px solid var(--rfp-line-soft);
    }

    .rfp-progress-heading {
        order: 3;
    }

    .rfp-view-switch-label {
        position: absolute;
        left: 0;
        /* centred on the radios, not the 12px padding below them */
        top: calc(50% - 6px);
        transform: translateY(-50%);
    }

    .rfp-breadcrumb-drop,
    .rfp-breadcrumb-current {
        display: none;
    }


    /* marking: the classification always shows; the endorsement gives way */
    .rfp-marking-sep,
    .rfp-marking-endorsement {
        display: none;
    }
}

/* =====================================================================
   Page scroll and pinning
   The page scrolls as one document; the form has no scrollbar of its own.
   From 576px up: the collaboration band sticks 40px from the top, the
   breadcrumb bar fades in above it (rfp.js adds .is-scrolled the moment the
   band sticks), the column strip pins under the band, and the rail, stub and
   panel stick under the strip. rfp.js writes --rfp-strip-top,
   --rfp-sticky-top and --rfp-sticky-h. Phones pin nothing.
   ===================================================================== */

.rfp-page-html,
.rfp-page-body {
    height: auto;
    overflow: visible;
    overscroll-behavior: auto;
}

/* .rfp-app: merged into its later rule (v4) */

.rfp-control-band {
    background: var(--rfp-page);
    border-top: 1px solid var(--rfp-line-soft);
    position: sticky;
    top: var(--rfp-breadcrumb-bar-h);
    z-index: 50;
    border-bottom: 1px solid var(--rfp-line);
    box-shadow: var(--rfp-shadow-band);
}

.rfp-column-strip {
    background: var(--rfp-band);
    border-top: 1px solid var(--rfp-line);
    border-bottom: 1px solid var(--rfp-line);
    position: sticky;
    top: var(--rfp-strip-top, 0px);
    z-index: 30;
}

/* the columns: grey behind the rail and panel runs the full height of the
   form; a 1px line closes them 24px above the site footer */
.rfp-workspace {
    min-height: 240px;
    flex: 1 0 auto;
    overflow: visible;
    align-items: start;
    background: var(--rfp-rail);
    box-shadow: inset 1px 0 var(--rfp-line-soft), inset -1px 0 var(--rfp-line-soft);
    border-bottom: 1px solid var(--rfp-line);
}

.rfp-form-column {
    min-width: 0;
    min-height: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--rfp-line-soft);
    background: var(--rfp-white);
    align-self: stretch;
    box-shadow: -1px 0 var(--rfp-line-soft);
}

.rfp-form-scroll {
    overflow-anchor: none;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    overflow-x: hidden;
    scrollbar-gutter: stable;
    background: var(--rfp-white);
    flex: none;
    overflow: visible;
}

.rfp-app:not(.is-drawer-open):not(.is-rail-peek) .rfp-rail,
.rfp-rail-stub,
.rfp-report-panel,
.rfp-notes-panel {
    position: sticky;
    top: var(--rfp-sticky-top, 0px);
    height: var(--rfp-sticky-h, calc(100vh - var(--rfp-sticky-top, 0px)));
    align-self: start;
}

/* breadcrumb bar: the page's header once scrolled */
.rfp-breadcrumb-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 61;
    background: var(--compact-site-bg);
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease-out;
}

.rfp-app.is-scrolled .rfp-breadcrumb-bar {
    opacity: 1;
    pointer-events: auto;
}

/* width: 100%: the bar content container spans the breadcrumb bar */

.rfp-breadcrumb-bar-inner {
    width: 100%;
    max-width: var(--rfp-shell);
    margin: 0 auto;
    height: var(--rfp-breadcrumb-bar-h);
    padding: 0 var(--rfp-shell-pad);
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.rfp-breadcrumb-bar-trail {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    overflow: hidden;
    font-weight: 700;
    font-size: 11px;
    line-height: 1;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--rfp-white);
    white-space: nowrap;
}

.rfp-breadcrumb-bar-sep {
    color: #7C858C;
}

.rfp-breadcrumb-bar-current {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rfp-breadcrumb-bar-user {
    margin-left: auto;
    flex: none;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    line-height: 1;
    color: var(--rfp-white);
    white-space: nowrap;
    cursor: pointer;
    padding-left: 16px;
}

.rfp-breadcrumb-bar-caret {
    font-size: 11px;
    color: var(--compact-site-soft-text);
}

/* the trail gives way by measurement, not by breakpoint (rfp.js, fitTrail):
   Make a submission, then Assessment, then the process */
@media (max-width: 767.98px) {
    .rfp-breadcrumb-bar-inner {
        padding: 0 16px;
    }

    .rfp-type-rule-wrap {
        padding: 6px 16px 0;
    }
}

/* phones: nothing pins; the header, band, strip and panel scroll with the
   page, so the footer is always reachable */
@media (max-width: 575.98px) {
    .rfp-breadcrumb-bar {
        display: none;
    }

    .rfp-breadcrumb-bar-process {
        display: none;
    }

    .rfp-control-band,
    .rfp-column-strip {
        position: static;
    }

    .rfp-report-panel,
    .rfp-notes-panel {
        position: static;
        height: auto;
    }
}

/* xxl (Bootstrap 5 default, ≥ 1400px): 1320px container. A departure from
   the v19 table, which stops at xl — see README. */
@media (min-width: 1400px) {
    :root {
        --rfp-shell: 1320px;
    }
}

/* the form menu opens over the pinned collaboration band */
.rfp-form-header {
    flex: none;
    z-index: 50;
    background: var(--rfp-band);
    border-bottom: 1px solid var(--rfp-line);
    box-shadow: var(--rfp-shadow-band);
    position: relative;
}

.rfp-app.is-form-menu-open .rfp-form-header {
    z-index: 55;
}

@media (max-width: 575.98px) {
    .rfp-form-page-head {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 8px;
    }

    .rfp-form-reference {
        align-self: flex-end;
    }
}

/* site footer below md: one centred column — logo, primary links,
   secondary links, then LinkedIn and copyright, then the Government mark */
@media (max-width: 767.98px) {
    .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-links-primary {
        gap: 12px 24px;
    }

    .compact-site-footer-links-secondary {
        gap: 10px 22px;
    }

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

    .compact-site-footer-bottom {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
    /* LinkedIn, then the Government mark, then the copyright last */
    .compact-site-footer-social {
        display: contents;
    }

    .rfp-app .compact-site-footer-linkedin {
        order: 1;
    }

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

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

/* breadcrumb bar: the initiative title, then the form ID in brackets. The ID
   wraps onto a hidden second line when there is no room, so it drops out
   whole; only then does the title shorten with an ellipsis. */
.rfp-breadcrumb-bar-current-group {
    flex: 0 1 auto;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 6px;
    height: 11px;
    overflow: hidden;
}

    .rfp-breadcrumb-bar-current-group .rfp-breadcrumb-bar-current {
        flex: 0 1 auto;
    }

.rfp-breadcrumb-bar-form-id {
    flex: none;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--compact-site-soft-text);
}

/* below 768px one view shows at a time. When Report or My notes replaces the
   form, the panel flows in the page like the form does: the page scroll is
   the panel's scroll, and the footer follows its end. */
@media (max-width: 767.98px) {
    .rfp-app.is-form-hidden .rfp-report-panel,
    .rfp-app.is-form-hidden .rfp-notes-panel {
        position: static;
        height: auto;
        align-self: stretch;
    }
    /* width: 100%: below md a panel replaces the form and fills its column */
    .rfp-app.is-form-hidden [data-rfp-report-scroll],
    .rfp-app.is-form-hidden [data-rfp-notes-scroll] {
        /* the panel is a row: keep the scroll area to the panel's width */
        flex: 1 1 auto;
        min-width: 0;
        width: 100%;
        height: auto;
        max-height: none;
        overflow: visible;
    }
}

@media (max-width: 767.98px) {
    /* the notes sheet sizes to its content when it flows in the page */
    .rfp-app.is-form-hidden .rfp-notes-sheet {
        min-height: 0;
    }
}

/* collaboration row: everyone currently active carries the orange halo,
   whichever page they are on. In the rail, the halo still marks only
   people on the page you are viewing (.is-here). */
.rfp-presence .rfp-avatar {
    box-shadow: var(--rfp-halo-presence);
}

/* =====================================================================
   v4 additions
   ===================================================================== */

/* hidden means hidden: a class that sets display never beats [hidden] */
.rfp-app [hidden] {
    display: none !important;
}

/* display type colours the type rule and the protective marking */
.rfp-app {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    font-family: var(--rfp-font);
    color: var(--rfp-ink);
    background: var(--rfp-page);
    height: auto;
    min-height: 100vh;
    overflow: visible;
    --rfp-type-colour: var(--rfp-type-assessment);
}

    .rfp-app[data-rfp-display-type="request"] {
        --rfp-type-colour: var(--rfp-type-request);
    }

    .rfp-app[data-rfp-display-type="application"] {
        --rfp-type-colour: var(--rfp-type-application);
    }

    /* measured drops (breadcrumb chip and breadcrumb bar) */
    .rfp-app .is-breadcrumb-dropped {
        display: none;
    }

/* site header: logo links home; the user button brightens like the tabs */
.compact-site-header-home {
    display: flex;
    flex: none;
}

.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(--rfp-white);
}

/* header and footer links follow the website: no focus shadow */
.rfp-app .compact-site-header :focus-visible,
.rfp-app .rfp-breadcrumb-bar :focus-visible,
.rfp-app .compact-site-footer :focus-visible {
    box-shadow: none;
}

.rfp-app .compact-site-header-nav-tab:focus-visible {
    outline: none;
    color: var(--rfp-white);
    border-bottom-color: var(--compact-site-tab-hover-line);
}

.rfp-app .compact-site-header-nav-tab--current:focus-visible {
    border-bottom-color: var(--rfp-white);
}

.rfp-app .compact-site-header-user:focus-visible,
.rfp-app .compact-site-header-home:focus-visible {
    outline: none;
}

.rfp-app .compact-site-footer-linkedin:hover,
.rfp-app .compact-site-footer-linkedin:focus-visible {
    border-color: var(--rfp-white);
    outline: none;
}

/* breadcrumb links (blue chip and black bar): underline on hover and focus */
.rfp-app .rfp-breadcrumb-link {
    color: inherit;
    text-decoration: none;
    text-underline-offset: 2px;
}

    .rfp-app .rfp-breadcrumb-link:hover,
    .rfp-app .rfp-breadcrumb-link:focus-visible {
        color: inherit;
        text-decoration: underline;
        text-decoration-thickness: 1px;
        outline: none;
    }

@media (max-width: 1199.98px) {
    .rfp-breadcrumb {
        padding: 6px 8px;
    }
}

/* ---------- menus: account menu, form menu, admin menu ----------
   All three are fixed to the window and placed by rfp.js from the
   trigger's rectangle, so no container can clip or scroll them. */
.rfp-user-menu {
    position: fixed;
    z-index: 1000;
    width: var(--rfp-user-menu-w);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    padding: 6px 0;
    background: var(--rfp-white);
    border: 1px solid var(--rfp-line-strong);
    border-radius: 8px;
    box-shadow: var(--rfp-shadow-menu);
}

.rfp-user-menu-heading {
    display: block;
    font-weight: 800;
    font-size: 10px;
    line-height: 1;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--rfp-faint);
    padding: 10px 16px 6px;
}

.rfp-user-menu-divider {
    display: block;
    height: 1px;
    margin: 6px 16px;
    background: var(--rfp-line);
}

/* width: 100%: menu rows span the menu so the hover layer runs edge to edge */

.rfp-user-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    text-align: left;
    padding: 8px 16px;
    font-weight: 600;
    font-size: 12.5px;
    line-height: 1.3;
    color: var(--rfp-ink);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease-out;
}

.rfp-app .rfp-user-menu-item:hover,
.rfp-app .rfp-user-menu-item:focus-visible {
    background-image: var(--rfp-hover-layer);
    outline: none;
}

.rfp-user-menu-item-icon {
    width: 13px;
    height: 13px;
    flex: none;
}

.rfp-app .rfp-form-menu-version:focus-visible,
.rfp-app .rfp-form-menu-item:focus-visible {
    background-image: var(--rfp-hover-layer);
    outline: none;
}

/* the form ⋮ icon thickens on hover instead of filling */
.rfp-form-options-icon circle {
    transition: r .15s ease-out;
}

.rfp-form-options-button:hover .rfp-form-options-icon circle,
.rfp-form-options-button:focus-visible .rfp-form-options-icon circle {
    r: 2.6px;
}

/* ---------- protective marking guidance (the ?) ---------- */
.rfp-marking-info {
    position: relative;
    display: flex;
    flex: none;
}

.rfp-marking-info-button {
    flex: none;
    width: 14px;
    height: 14px;
    margin-left: 3px;
    padding: 0;
    border-radius: 50%;
    display: block;
    cursor: pointer;
}

.rfp-marking-info-icon {
    display: block;
    width: 14px;
    height: 14px;
    overflow: visible;
}

.rfp-marking-info-disc {
    fill: var(--rfp-type-colour);
}

.rfp-marking-info-glyph {
    fill: none;
    stroke: var(--rfp-white);
    stroke-width: 1.5;
    stroke-linecap: round;
}

.rfp-marking-info-point {
    fill: var(--rfp-white);
}

/* fixed, placed under the ? by rfp.js; the 8px top padding is a hover
   bridge so the pointer can move from the ? into the panel */
.rfp-marking-info-panel {
    position: fixed;
    z-index: 90;
    padding-top: 8px;
    display: block;
}

.rfp-marking-info-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(var(--rfp-marking-info-w), calc(100vw - 32px));
    padding: 16px 18px;
    background: var(--rfp-white);
    border: 1px solid var(--rfp-line);
    border-radius: 8px;
    box-shadow: var(--rfp-shadow-info);
    color: var(--rfp-ink);
    text-align: left;
    white-space: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 1.5;
    letter-spacing: 0;
    text-transform: none;
}

.rfp-marking-info-title {
    font-weight: 700;
    font-size: 14px;
    line-height: 1.3;
    color: var(--rfp-ink);
}

.rfp-marking-info-text {
    margin: 0;
}

.rfp-marking-info-list {
    margin: 0;
    padding-left: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rfp-marking-info-item {
    display: list-item;
    list-style: disc;
}

.rfp-app .rfp-marking-info-link {
    color: var(--rfp-link);
    text-decoration: underline;
}

    .rfp-app .rfp-marking-info-link:hover,
    .rfp-app .rfp-marking-info-link:focus-visible {
        color: var(--rfp-teal-deep);
    }

.rfp-marking-info-link--email {
    font-weight: 700;
}

/* ---------- admin strips (seeding, moderating, preview) ----------
   The server sets data-rfp-admin-mode on .rfp-app; rfp.js shows the
   matching strip and sets hidden on the others. Corners nest:
   header strip 10px − 4px padding = 6px buttons;
   bar strip 7px − 3px padding = 4px buttons. */
.rfp-admin {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
}

.rfp-admin--header {
    margin-left: auto;
    flex: none;
    align-self: center;
    margin-top: 2px;
}

.rfp-admin--bar {
    margin-left: auto;
    padding-left: 16px;
    flex: none;
}

    .rfp-admin--bar:not([hidden]) + .rfp-breadcrumb-bar-user {
        margin-left: 0;
    }

.rfp-admin-work {
    display: flex;
    align-items: center;
    width: var(--rfp-admin-strip-w);
    gap: 4px;
    padding: 4px;
    border-radius: 10px;
    background: var(--rfp-admin-colour);
    box-shadow: var(--rfp-shadow-strip);
}

    .rfp-admin-work[data-rfp-admin-mode="seeding"] {
        --rfp-admin-colour: var(--rfp-admin-seeding);
    }

    .rfp-admin-work[data-rfp-admin-mode="moderating"] {
        --rfp-admin-colour: var(--rfp-admin-moderating);
    }

    .rfp-admin-work[data-rfp-admin-mode="preview"] {
        --rfp-admin-colour: var(--rfp-admin-preview);
    }

.rfp-admin-work-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 0;
    overflow: hidden;
    width: 136px;
    padding: 0 8px;
    font-weight: 700;
    font-size: 12.5px;
    line-height: 1;
    letter-spacing: .06em;
    color: var(--rfp-white);
    white-space: nowrap;
}

.rfp-admin-work--preview .rfp-admin-work-label {
    flex: 1 1 auto;
    width: auto;
    min-width: 136px;
    padding: 0 4px;
}

.rfp-admin-work-label-text {
    flex: none;
}

.rfp-admin-viewing-as {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0;
}

.rfp-admin-work-icon {
    width: 12px;
    height: 12px;
    flex: none;
}

.rfp-admin-work-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 14px;
    border: 1.5px solid var(--rfp-field-line);
    border-radius: 6px;
    background: var(--rfp-white);
    color: var(--rfp-purple);
    font-weight: 700;
    font-size: 12.5px;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease-out, border-color .15s ease-out;
}

.rfp-app .rfp-admin-work-button:hover,
.rfp-app .rfp-admin-work-button[aria-expanded="true"],
.rfp-app .rfp-admin-work-button:focus-visible {
    background: var(--rfp-purple-tint);
    border-color: var(--rfp-purple);
}

/* the first button after the label takes the spare colour before it */
.rfp-admin-work-label + .rfp-admin-work-button {
    margin-left: auto;
}

.rfp-admin-work-more {
    width: 32px;
    align-self: stretch;
    padding: 0;
}

.rfp-admin-work-more-icon {
    width: 16px;
    height: 16px;
}

.rfp-admin-preview-more {
    display: none;
}

.rfp-admin--bar .rfp-admin-work {
    width: var(--rfp-admin-bar-strip-w);
    gap: 3px;
    padding: 3px;
    border-radius: 7px;
}

.rfp-admin--bar .rfp-admin-work-label {
    width: 116px;
    font-size: 11px;
}

.rfp-admin--bar .rfp-admin-work--preview .rfp-admin-work-label {
    width: auto;
    min-width: 116px;
}

.rfp-admin--bar .rfp-admin-work-button {
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 11px;
}

.rfp-admin--bar .rfp-admin-work-more {
    width: 26px;
    padding: 0;
}

.rfp-admin--bar .rfp-admin-work-icon {
    width: 11px;
    height: 11px;
}

/* admin ⋮ menu */
.rfp-admin-work-menu {
    position: fixed;
    z-index: 120;
    min-width: 200px;
    padding: 6px;
    background: var(--rfp-white);
    border: 1px solid var(--rfp-line);
    border-radius: 8px;
    box-shadow: var(--rfp-shadow-admin-menu);
}

/* width: 100%: menu rows span the menu so the hover layer runs edge to edge */

.rfp-admin-work-menu-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 9px 12px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 13px;
    color: var(--rfp-ink);
    cursor: pointer;
}

.rfp-app .rfp-admin-work-menu-item:hover,
.rfp-app .rfp-admin-work-menu-item:focus-visible {
    background-image: var(--rfp-hover-layer);
    outline: none;
}

.rfp-app .rfp-admin-work-menu-complete {
    font-weight: 700;
    color: var(--rfp-purple);
}

    .rfp-app .rfp-admin-work-menu-complete:hover,
    .rfp-app .rfp-admin-work-menu-complete:focus-visible {
        background: var(--rfp-purple-select);
    }

.rfp-app .rfp-admin-work-menu-discard {
    color: var(--rfp-destructive);
}

    .rfp-app .rfp-admin-work-menu-discard:hover,
    .rfp-app .rfp-admin-work-menu-discard:focus-visible {
        background: var(--rfp-destructive-tint);
    }

/* Save and close and the sign-off only move into ⋮ on smaller screens */
.rfp-admin-work-menu-close,
.rfp-admin-work-menu-complete {
    display: none;
}

/* preview options panel */
.rfp-preview-menu {
    position: fixed;
    z-index: 120;
    width: min(460px, calc(100vw - 32px));
    padding: 16px 18px;
    background: var(--rfp-white);
    border: 1px solid var(--rfp-line);
    border-radius: 10px;
    box-shadow: var(--rfp-shadow-admin-menu);
    display: flex;
    flex-direction: column;
    gap: 14px;
    letter-spacing: 0;
}

.rfp-preview-group {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.rfp-preview-group-label {
    padding: 0;
    font-weight: 800;
    font-size: 10.5px;
    line-height: 1.2;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--rfp-column-label);
}

.rfp-preview-options {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.rfp-preview-option {
    display: inline-flex;
    padding: 6px 11px;
    border-radius: 6px;
    border: 1.5px solid var(--rfp-field-line);
    background: var(--rfp-white);
    color: var(--rfp-muted);
    font-weight: 500;
    font-size: 12.5px;
    line-height: 1.2;
    cursor: pointer;
    white-space: nowrap;
}

.rfp-app .rfp-preview-option:hover,
.rfp-app .rfp-preview-option:focus-visible {
    background: var(--rfp-purple-select);
}

.rfp-app .rfp-preview-option[aria-checked="true"] {
    background: var(--rfp-purple-select);
    border-color: var(--rfp-purple);
    color: var(--rfp-purple);
    font-weight: 700;
}

/* confirm dialogs (Complete, Discard) */
.rfp-admin-dialog {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: var(--rfp-dialog-scrim);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.rfp-admin-dialog-box {
    width: min(440px, 100%);
    background: var(--rfp-white);
    border-radius: 12px;
    box-shadow: var(--rfp-shadow-dialog);
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.rfp-admin-dialog-title {
    margin: 0;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.3;
    color: var(--rfp-ink);
}

.rfp-admin-dialog-body {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--rfp-ink-slate);
}

.rfp-admin-dialog-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--rfp-ink);
    cursor: pointer;
}

.rfp-admin-dialog-checkbox {
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    flex: none;
    accent-color: var(--rfp-purple);
}

.rfp-admin-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 4px;
}

.rfp-admin-dialog-button {
    display: inline-flex;
    padding: 9px 16px;
    border-radius: 8px;
    border: 1.5px solid var(--rfp-field-line);
    background: var(--rfp-white);
    color: var(--rfp-purple);
    font-weight: 700;
    font-size: 12.5px;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease-out, border-color .15s ease-out;
}

.rfp-app .rfp-admin-dialog-button:hover,
.rfp-app .rfp-admin-dialog-button:focus-visible {
    background: var(--rfp-purple-tint);
    border-color: var(--rfp-purple);
}

.rfp-app .rfp-admin-dialog-button--primary {
    background: var(--rfp-purple);
    border-color: var(--rfp-purple);
    color: var(--rfp-white);
}

    .rfp-app .rfp-admin-dialog-button--primary:hover,
    .rfp-app .rfp-admin-dialog-button--primary:focus-visible {
        background: var(--rfp-purple-hover);
        border-color: var(--rfp-purple-hover);
    }

    .rfp-app .rfp-admin-dialog-button--primary:disabled {
        background: var(--rfp-hover);
        border-color: var(--rfp-hover);
        color: var(--rfp-placeholder);
        cursor: not-allowed;
    }

.rfp-app .rfp-admin-dialog-button--destructive,
.rfp-app .rfp-admin-dialog-button--destructive:hover,
.rfp-app .rfp-admin-dialog-button--destructive:focus-visible {
    background: var(--rfp-destructive);
    border-color: var(--rfp-destructive);
    color: var(--rfp-white);
}

/* buttons: hovers ease out over 0.15s, no press nudge */
.rfp-form-footer-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12.5px;
    line-height: 1;
    color: var(--rfp-purple);
    background: var(--rfp-white);
    border: 1.5px solid var(--rfp-field-line);
    border-radius: 8px;
    padding: 9px 16px;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .15s ease-out, border-color .15s ease-out;
}

.rfp-app .rfp-form-footer-button:hover,
.rfp-app .rfp-form-footer-button:focus-visible {
    background: var(--rfp-purple-tint);
    border-color: var(--rfp-purple);
}

.rfp-app .rfp-form-footer-button--primary:hover,
.rfp-app .rfp-form-footer-button--primary:focus-visible {
    background: var(--rfp-purple-hover);
    border-color: var(--rfp-purple-hover);
}

/* folded rail: only the stage the submission is in reads teal */
.rfp-app .rfp-rail-stub-stage.is-active-stage {
    color: var(--rfp-orange-ink);
}

/* < lg: the header strip takes its own line under the tabs */
@media (max-width: 991.98px) {
    /* the tabs stay on one line (as in v3, where the row scrolls sideways if it
     must); only the strip drops to its own line, spanning the row */
    .rfp-app:not([data-rfp-admin-mode="none"]) .compact-site-header-nav {
        display: grid;
        grid-template-columns: repeat(3, max-content) minmax(0, 1fr);
        column-gap: 0;
        row-gap: 0;
        justify-content: start;
        container-type: inline-size;
    }
    /* the tabs keep their 11px margin; with the 2px top margin that leaves
     13px of black above the strip, and 14px below it, as the design renders */
    /* the tabs are spaced by margin here, so no gap is left after the last one */
    .rfp-app:not([data-rfp-admin-mode="none"]) .compact-site-header-nav-tab + .compact-site-header-nav-tab {
        margin-left: var(--compact-site-tab-gap);
    }
    /* the strip is the width of the row it sits in (100cqw of the nav), not of
     the tabs, and stays put if the tabs have to scroll sideways */
    .rfp-admin--header {
        margin-left: 0;
        grid-column: 1 / -1;
        width: 100cqw;
        position: sticky;
        left: 0;
        padding: 0 0 14px;
    }
        /* full width 1 of 2 in v4: on its own line the strip spans the row */
        .rfp-admin--header .rfp-admin-work {
            width: 100%;
        }

        .rfp-admin--header .rfp-admin-work-label,
        .rfp-admin--header .rfp-admin-work--preview .rfp-admin-work-label {
            flex: 1 1 auto;
            width: auto;
            justify-content: flex-start;
            padding-left: 12px;
        }

            .rfp-admin--header .rfp-admin-work-label + .rfp-admin-work-button {
                margin-left: 0;
            }

    .rfp-admin--bar .rfp-admin-work-close {
        display: none;
    }

    .rfp-admin-work-menu-close {
        display: block;
    }
}

/* phones: Save and close stays; the sign-off and Dataset definition move into ⋮ */
@media (max-width: 575.98px) {
    /* the three tabs close up so the row fits from 341px wide (a 358px window
     less its scrollbar) instead of running off the edge; the design's 22px
     gap needs 361px */
    .rfp-app .compact-site-header-nav {
        column-gap: 12px;
        --compact-site-tab-gap: 12px;
    }

    .rfp-admin--header .rfp-admin-work-complete,
    .rfp-admin--header .rfp-admin-dataset {
        display: none;
    }

    .rfp-admin-work-menu-close {
        display: none;
    }

    .rfp-admin-work-menu-complete {
        display: block;
    }
    /* full width 2 of 2 in v4: the strip fills the row */
    .rfp-admin--header .rfp-admin-work-close,
    .rfp-admin--header .rfp-admin-preview-options {
        flex: 0 1 auto;
        min-width: 0;
    }

    .rfp-admin--header .rfp-admin-preview-more {
        display: inline-flex;
    }
}

/* =====================================================================
   Side menu: a timeline (v5; updated v6)
   One grey line runs down the menu; each stage has a node on it. The
   server marks the stage the submission is in with .is-active-stage
   (orange node and name) and stages before it with .is-done (jade node).
   Everything starts 38px in, right of the line. The menu ground is
   --rfp-rail (#F6F5F2); stage headings are unshaded.
   ===================================================================== */
/* stages after the first start 30px below the one before (a 22px gap and 8px above the heading block) */
.rfp-rail-stage {
    position: relative;
    padding-top: 30px;
}

    .rfp-rail-stage:first-of-type {
        padding-top: 0;
    }

    .rfp-rail-stage::before {
        content: "";
        position: absolute;
        left: 16px;
        top: 0;
        bottom: 0;
        width: 2px;
        background: var(--rfp-timeline);
        z-index: 2;
        pointer-events: none;
    }

    .rfp-rail-stage:first-of-type::before {
        top: 9px;
    }

    /* the heading block (name, countdown, due line) has 10px above and 8px below it */
    .rfp-rail-stage .rfp-rail-stage-head {
        position: relative;
        padding: 10px 18px 8px 38px;
    }

.rfp-rail-stage-node {
    position: absolute;
    z-index: 3;
    left: 8px;
    top: 6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    box-sizing: border-box;
    background: var(--rfp-white);
    border: 2px solid var(--rfp-dot-grey);
    box-shadow: 0 0 0 3px var(--rfp-rail);
}

.rfp-rail-stage.is-done .rfp-rail-stage-node {
    background: var(--rfp-jade);
    border-color: var(--rfp-jade);
}

.rfp-rail-stage.is-active-stage .rfp-rail-stage-node {
    background: var(--rfp-orange);
    border-color: var(--rfp-orange);
}

/* stage names: the column label's weight, tracking and grey (as "ASSESSMENT FORM"), at 11px */
.rfp-rail-stage .rfp-rail-stage-name {
    font-size: 11px;
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--rfp-column-label);
}

.rfp-rail-stage.is-active-stage .rfp-rail-stage-name {
    color: var(--rfp-orange-ink);
}
/* a completed stage (the submission has moved past it): jade node, and its name in the form page heading's teal */
.rfp-rail-stage.is-done .rfp-rail-stage-name {
    color: var(--rfp-teal-deep);
}

.rfp-rail-stage .rfp-rail-stage-due {
    white-space: nowrap;
}

.rfp-rail-stage .rfp-rail-stage-dueline {
    padding: 0 18px 10px 38px;
    margin-top: -3px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}
    /* the countdown shares the due line: right-aligned, heavier than the date, in the due colour; the stage name gets the full row */
    /* grey from 14 days out (the due line's grey, so it sits lighter than the stage name); amber within 7 days; red overdue */
    .rfp-rail-stage .rfp-rail-stage-dueline .rfp-rail-stage-due {
        flex: none;
        font-size: 11px;
        line-height: 1.3;
        color: var(--rfp-subtle);
    }

    .rfp-rail-stage .rfp-rail-stage-dueline .rfp-due--soon {
        color: var(--rfp-amber);
    }

    .rfp-rail-stage .rfp-rail-stage-dueline .rfp-due--overdue {
        color: var(--rfp-red);
    }

.rfp-rail-stage .rfp-rail-stage-due:empty {
    display: none;
}

/* people on each stage: one row (submit and edit rights, at most four),
   +N for the rest. The whole row is the button. */
.rfp-rail-people {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 18px 10px 38px;
    text-align: left;
    cursor: pointer;
    transition: background-color .15s ease-out;
}

.rfp-app .rfp-rail-people:hover,
.rfp-app .rfp-rail-people:focus-visible {
    background-image: var(--rfp-hover-layer);
}

.rfp-rail-people-avatars {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
}

.rfp-rail-people-more {
    flex: none;
    font-weight: 700;
    font-size: 12px;
    line-height: 26px;
    color: var(--rfp-ink-soft);
    white-space: nowrap;
    text-underline-offset: 2px;
    transition: color .15s ease-out;
}

.rfp-app .rfp-rail-people:hover .rfp-rail-people-more,
.rfp-app .rfp-rail-people:focus-visible .rfp-rail-people-more {
    color: var(--rfp-ink);
    text-decoration: underline;
}
/* the chevron sits centred in a 22px slot at the row's end, as in the design */
.rfp-rail-people-chev {
    flex: none;
    box-sizing: content-box;
    width: 13px;
    height: 13px;
    padding: 0 4.5px;
    margin-left: auto;
    color: var(--rfp-subtle);
    transition: transform .15s ease-out, color .15s ease-out;
}

.rfp-app .rfp-rail-people:hover .rfp-rail-people-chev,
.rfp-app .rfp-rail-people:focus-visible .rfp-rail-people-chev {
    color: var(--rfp-ink);
}

.rfp-rail-people[aria-expanded="true"] .rfp-rail-people-chev {
    transform: rotate(180deg);
}

.rfp-rail-people-label,
.rfp-rail-pages-label {
    font-weight: 800;
    font-size: 10px;
    line-height: 26px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--rfp-faint);
    white-space: nowrap;
}

.rfp-rail-pages-label {
    display: block;
    padding: 6px 18px 0 38px;
}

/* the open list sits on the page ground between hairlines, across the full
   width and under the timeline line. The list's own ground starts 4px down,
   where it overlaps the row, so the row's hover layer still shows. */
.rfp-rail-people-list {
    display: flex;
    flex-direction: column;
    margin: -4px 0 0;
    padding: 0 18px 10px 38px;
    text-align: left;
}

.rfp-rail-stage.is-open .rfp-rail-people {
    background-color: var(--rfp-page);
    box-shadow: inset 0 1px 0 var(--rfp-line);
}

.rfp-rail-stage.is-open .rfp-rail-people-list {
    background: linear-gradient(var(--rfp-page), var(--rfp-page)) 0 4px / 100% calc(100% - 4px) no-repeat;
    box-shadow: inset 0 -1px 0 var(--rfp-line);
}
/* keyboard focus on the row: the hover layer plus an inset halo */
.rfp-app .rfp-rail-people:focus-visible {
    background-image: var(--rfp-hover-layer);
    outline: none;
    box-shadow: var(--rfp-focus-inset);
}

.rfp-rail-person {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
}

.rfp-rail-person-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--rfp-avatar-colour);
    color: var(--rfp-white);
    font-weight: 700;
    font-size: 9px;
    line-height: 1;
    cursor: default;
}

    .rfp-rail-person-avatar.is-here {
        box-shadow: var(--rfp-halo-presence);
    }

.rfp-rail-person-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rfp-rail-person-name {
    font-weight: 600;
    font-size: 12.5px;
    line-height: 1.2;
    color: var(--rfp-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rfp-rail-person-role {
    font-size: 11px;
    line-height: 1.3;
    color: var(--rfp-subtle);
    text-wrap: pretty;
}

.rfp-rail-person-access {
    flex: none;
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 600;
    font-size: 11px;
    line-height: 1;
    color: var(--rfp-ink-soft);
    white-space: nowrap;
}

.rfp-rail-person-icon {
    width: 12px;
    height: 12px;
    flex: none;
}

/* pages: 38px in, semibold (the weight of people's names); the hover layer
   runs the full width, under the timeline line */
.rfp-rail-stage .rfp-nav-page-row,
.rfp-rail-stage .rfp-nav-stage-row {
    padding: 10px 18px 10px 38px;
    margin-left: 0;
    width: 100%;
    border-left: 0;
}

.rfp-rail-stage .rfp-nav-page-title,
.rfp-rail-stage .rfp-nav-stage-label {
    font-weight: 600;
    color: var(--rfp-ink-slate);
}

/* page numbers form one column, right-aligned: the title's weight, tabular figures, and
   20px wide, enough for "12." in tabular figures, so every title (and its wrapped lines) starts at
   the same place from 1 to 12 */
.rfp-rail .rfp-nav-page-num,
.rfp-rail .rfp-nav-stage-num {
    flex: none;
    min-width: 20px;
    text-align: right;
    font-weight: inherit;
    font-variant-numeric: tabular-nums;
}
/* the dot sits 3px before the number column: pages 1 to 9 read about 12px
   from the dot (the design's spacing), 10 to 12 about 4px */
.rfp-rail-stage .rfp-nav-page-row,
.rfp-rail-stage .rfp-nav-stage-row,
.rfp-rail-stage .rfp-nav-page.is-current {
    column-gap: 3px;
}
/* numbers sit right in their column, 4px before the title */
.rfp-rail .rfp-nav-page-title,
.rfp-rail .rfp-nav-stage-label,
.rfp-rail .rfp-nav-page-current-title {
    gap: 4px;
}

/* current page: the current fill (#FBE9D3), full width; its title is
   orange in the active stage, grey outside it */
.rfp-rail-stage .rfp-nav-page.is-current {
    padding: 11px 18px 11px 38px;
    background: var(--rfp-orange-tint);
    border-left: 0;
}

.rfp-rail-stage .rfp-nav-stage.is-current .rfp-nav-stage-row {
    padding-left: 38px;
    background: var(--rfp-orange-tint);
    border-left: 0;
}

.rfp-rail-stage .rfp-nav-stage-subs {
    background: var(--rfp-orange-tint);
    border-left: 0;
}

.rfp-rail-stage:not(.is-active-stage) .rfp-nav-page-current-title,
.rfp-rail-stage:not(.is-active-stage) .rfp-nav-page-progress-pct,
.rfp-rail-stage:not(.is-active-stage) .rfp-nav-stage.is-current .rfp-nav-stage-label {
    color: var(--rfp-subtle);
}

/* page dots: jade met; white with an edge still to meet; grey not relevant */
.rfp-rail .rfp-nav-dot {
    box-sizing: border-box;
}

.rfp-rail .rfp-nav-dot--due {
    background: var(--rfp-white);
    border: 1.5px solid var(--rfp-dot-edge);
}

.rfp-rail .rfp-nav-dot--none {
    background: var(--rfp-dot-grey);
    border: 1px solid var(--rfp-dot-edge);
}

.rfp-rail .rfp-nav-dot--current.rfp-nav-dot--none {
    background: var(--rfp-dot-grey);
}

.rfp-nav-key .rfp-nav-key-swatch--due {
    box-sizing: border-box;
    background: var(--rfp-white);
    border: 1.5px solid var(--rfp-dot-edge);
}

.rfp-nav-key .rfp-nav-key-swatch--none {
    box-sizing: border-box;
    background: var(--rfp-dot-grey);
    border: 1px solid var(--rfp-dot-edge);
}

/* progress chips: outstanding chips are white with an edge, like the dots */
.rfp-progress-chips .rfp-progress-chip {
    background: var(--rfp-white);
    box-shadow: inset 0 0 0 1px var(--rfp-dot-edge);
}

.rfp-progress-chips .rfp-progress-chip--met {
    background: var(--rfp-jade);
    box-shadow: none;
}

/* the 2px rule above the key, 16px either side */
.rfp-rail-divider {
    height: 2px;
    background: var(--rfp-timeline);
    margin: 16px 18px 0;
}

    .rfp-rail-divider + .rfp-nav-key {
        margin-top: 16px;
    }

/* collaboration row: 12px in from the container edges on both sides */
.rfp-control-band .rfp-collab-row {
    padding-left: 12px;
    padding-right: 12px;
}

/* the rail toggle's chevron points the way the rail will move */
.rfp-rail-toggle[aria-expanded="false"] .rfp-rail-toggle-icon {
    transform: rotate(180deg);
}

/* column strip over an open panel: its label and Download follow the panel */
.rfp-column-strip-label--notes {
    display: none;
}

.rfp-app.has-panel-notes .rfp-column-strip-label--report {
    display: none;
}

.rfp-app.has-panel-notes .rfp-column-strip-label--notes {
    display: block;
}

.rfp-column-strip-notes {
    display: none;
}

.rfp-app.has-panel-notes .rfp-column-strip-notes {
    display: inline-flex;
}

/* popups are capped to the room they have (script) and scroll inside it */
.rfp-preview-menu,
.rfp-marking-info-panel,
.rfp-admin-work-menu,
.rfp-tip {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* =====================================================================
   User card (v6): opens on hover, focus or tap of an avatar in the
   presence row, a stage people row or an assigned list. The card's
   content is rendered by the server inside each avatar
   ([data-rfp-tip-content], hidden); the script shows a copy of it here.
   The 8px top padding matches the ? panel's gap under its trigger.
   ===================================================================== */
.rfp-tip {
    position: fixed;
    z-index: 95;
    padding-top: 8px;
    pointer-events: none;
}

    .rfp-tip .rfp-tip-card {
        width: min(320px, calc(100vw - 32px));
        max-width: none;
        padding: 14px 16px;
    }

.rfp-tip-person {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.rfp-tip-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--rfp-avatar-colour);
    color: var(--rfp-white);
    font-weight: 700;
    font-size: 11px;
    line-height: 1;
}

    .rfp-tip-avatar.is-here {
        box-shadow: var(--rfp-halo-presence);
    }
/* the text block takes the card's width; its lines never shrink to overlap */
.rfp-tip-person-text > * {
    flex: none;
}
/* a light divider between the avatar and the text block */
.rfp-tip-person-text {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding-left: 14px;
    border-left: 1px solid var(--rfp-line);
}

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

.rfp-tip-position {
    font-weight: 600;
    font-size: 13px;
    line-height: 1.5;
    color: var(--rfp-ink-soft);
    overflow-wrap: anywhere;
    text-wrap: pretty;
}

.rfp-tip-org {
    font-weight: 400;
    font-size: 13px;
    line-height: 1.5;
    color: var(--rfp-subtle);
    overflow-wrap: anywhere;
    text-wrap: pretty;
}

.rfp-tip-role {
    display: inline-flex;
    align-self: flex-start;
    max-width: 100%;
    margin-top: 6px;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--rfp-band);
    border: 1px solid var(--rfp-line);
    font-weight: 700;
    font-size: 11px;
    line-height: 1.2;
    color: var(--rfp-ink-soft);
}

/* =====================================================================
   Breadcrumb bar: what gives way so the initiative name stays whole (v6)
   In order: 1 Make a submission, 2 the display type, 3 the admin strip
   compacts, 4 Dataset definition moves into the strip's ⋮, 5 the process.
   The script adds .is-breadcrumb-dropped level by level, measuring after each.
   ===================================================================== */
/* level 3: the strip takes its content's width, and the "(viewing as)" note goes */
.rfp-app .rfp-admin--bar .rfp-admin-work.is-breadcrumb-dropped {
    display: flex;
    width: auto;
}

.rfp-admin--bar .rfp-admin-work.is-breadcrumb-dropped .rfp-admin-work-label,
.rfp-admin--bar .rfp-admin-work--preview.is-breadcrumb-dropped .rfp-admin-work-label {
    width: auto;
    min-width: 0;
    padding: 0 8px;
}

.rfp-admin--bar .rfp-admin-work.is-breadcrumb-dropped .rfp-admin-viewing-as {
    display: none;
}
/* level 4: Dataset definition leaves the strip; the ⋮ (which lists it) takes its place */
.rfp-app .rfp-admin--bar .rfp-admin-dataset.is-breadcrumb-dropped + .rfp-admin-preview-more {
    display: inline-flex;
}