/* /Components/Layout/AuthLayout.razor.rz.scp.css */
/* Login shell: cool-grey ground, centered content, navy brand footer. */
.auth-shell[b-j0o3luurkj] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--bg);
}

.auth-shell__main[b-j0o3luurkj] {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

.auth-shell__footer[b-j0o3luurkj] {
    background: var(--header-bg);
    padding: 13px 32px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.auth-shell__tag[b-j0o3luurkj] {
    color: var(--header-muted);
    font-size: 12px;
    letter-spacing: 0.08em;
    font-weight: 600;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* Navacord shell: sticky navy header (TopHeader), a full-width main column, navy footer.
   The former left rail is gone — the header carries the nav. */
.app-shell[b-qnf4hf3216] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--bg);
}

main[b-qnf4hf3216] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--surface);
}

.staging-notice[b-qnf4hf3216] {
    margin: 0;
    padding: 12px 24px;
    background: var(--header-bg);
    color: var(--header-ink);
    font-size: 13px;
}

.app-footer[b-qnf4hf3216] {
    background: var(--header-bg);
    padding: 13px 32px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.app-footer__tag[b-qnf4hf3216] {
    color: var(--header-muted);
    font-size: 12px;
    letter-spacing: 0.08em;
    font-weight: 600;
}

#blazor-error-ui[b-qnf4hf3216] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-qnf4hf3216] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/PageFaultBoundary.razor.rz.scp.css */
/* The page-body fault state (QUAL-02). Square like the rest of the kit; no overflow clip. */
.page-fault[b-v3lixt0umt] {
    box-sizing: border-box;
    width: min(560px, calc(100% - 32px)); /* a 16px gutter on phones */
    margin: 48px auto;
    padding: 20px 24px;
    background: var(--red-soft);
    border: 1px solid var(--red-border);
    border-left: 4px solid var(--red);
}

.page-fault__text[b-v3lixt0umt] {
    margin: 0 0 16px;
    color: var(--ink);
    font-size: 15px;
    font-weight: 600;
}
/* /Components/Layout/PortalHostBoundary.razor.rz.scp.css */
.portal-fault[b-3hjt9jd9b1] {
    box-sizing: border-box;
    width: min(560px, calc(100% - 32px));
    position: fixed;
    inset-inline-end: 16px;
    bottom: 16px;
    z-index: 1100;
    max-height: calc(100dvh - 32px);
    overflow: auto;
    margin: 0;
    padding: 20px 24px;
    background: var(--red-soft);
    border: 1px solid var(--red-border);
    border-left: 4px solid var(--red);
    color: var(--ink);
}

.portal-fault p[b-3hjt9jd9b1] {
    margin: 0 0 16px;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-1g4qr396vo],
.components-reconnect-repeated-attempt-visible[b-1g4qr396vo],
.components-reconnect-failed-visible[b-1g4qr396vo],
.components-pause-visible[b-1g4qr396vo],
.components-resume-failed-visible[b-1g4qr396vo],
.components-rejoining-animation[b-1g4qr396vo] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-1g4qr396vo],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-1g4qr396vo],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-1g4qr396vo],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-1g4qr396vo],
#components-reconnect-modal.components-reconnect-retrying[b-1g4qr396vo],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-1g4qr396vo],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-1g4qr396vo],
#components-reconnect-modal.components-reconnect-failed[b-1g4qr396vo],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-1g4qr396vo] {
    display: block;
}


#components-reconnect-modal[b-1g4qr396vo] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-1g4qr396vo 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-1g4qr396vo 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-1g4qr396vo 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-1g4qr396vo]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-1g4qr396vo 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-1g4qr396vo {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-1g4qr396vo {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-1g4qr396vo {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-1g4qr396vo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-1g4qr396vo] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-1g4qr396vo] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-1g4qr396vo] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-1g4qr396vo] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-1g4qr396vo] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-1g4qr396vo] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-1g4qr396vo 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-1g4qr396vo] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-1g4qr396vo {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Layout/RequestLandingLayout.razor.rz.scp.css */
.request-landing-layout[b-oxyplyx2t7] {
    position: fixed;
    inset: 0;
    height: 100dvh;
    width: 100%;
    min-height: 0;
    overflow: clip;
    background: var(--bg);
}

.request-landing-layout--staging[b-oxyplyx2t7] {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
}

.staging-notice[b-oxyplyx2t7] {
    margin: 0;
    padding: 12px 24px;
    background: var(--header-bg);
    color: var(--header-ink);
    font-size: 13px;
}

.staging-content[b-oxyplyx2t7] {
    min-height: 0;
}

/* The notice owns a row: keep the existing bounded form inside the remaining viewport. */
.staging-content[b-oxyplyx2t7]  .request-landing {
    height: 100%;
}
/* /Components/Layout/TopHeader.razor.rz.scp.css */
/* Navacord top bar — navy ground, lime accents (kit: header h62, nav underline inset
   0 -3px lime, lime CTA). Sticky so the queue's group headers can stick right below it. */
.top-hdr[b-5xq04cxnik] {
    background: var(--header-bg);
    height: 62px;
    display: flex;
    align-items: center;
    gap: 30px;
    padding: 0 0 0 32px;
    position: sticky;
    top: 0;
    z-index: 20;
}

.top-hdr__brand[b-5xq04cxnik] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
    text-decoration: none;
}
.top-hdr__brand:hover[b-5xq04cxnik] { text-decoration: none; }

/* The wordmark asset (wwwroot/logo.png) is the white NAVACORD lettering + lime leaf on
   transparency — it only reads on the navy shell, never on a light ground. */
.top-hdr__logo[b-5xq04cxnik] {
    display: block;
    height: 32px;
    width: auto;
    flex: 0 0 auto;
}

.top-hdr__nav[b-5xq04cxnik] {
    display: flex;
    align-items: stretch;
    align-self: stretch;
    font-size: 14px;
    min-width: 0;
    overflow-x: auto;
}

.top-hdr__item[b-5xq04cxnik] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    color: var(--header-muted);
    font-weight: 400;
    text-decoration: none;
    white-space: nowrap;
}
.top-hdr__item:hover[b-5xq04cxnik] { color: var(--header-ink); text-decoration: none; }

.top-hdr__item--on[b-5xq04cxnik] {
    color: var(--header-ink);
    font-weight: 600;
    box-shadow: inset 0 -3px 0 var(--lime);
}

.top-hdr__count[b-5xq04cxnik] {
    background: var(--lime);
    color: var(--lime-ink);
    font-size: 11.5px;
    font-weight: 700;
    padding: 1px 7px;
}

.top-hdr__right[b-5xq04cxnik] {
    margin-left: auto;
    display: flex;
    align-items: center;
    align-self: stretch;
    gap: 14px;
    padding-right: 16px;
}

/* ---- account disclosure; demo accounts also retain their persona switcher -------- */
.top-hdr__persona[b-5xq04cxnik] { position: relative; display: flex; align-items: center; }

.top-hdr__persona-btn[b-5xq04cxnik] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: none;
    border: none;
    padding: 8px 10px;
    color: var(--header-ink);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}
.top-hdr__persona-btn:hover[b-5xq04cxnik] { background: rgba(255, 255, 255, 0.08); }

.top-hdr__persona-name[b-5xq04cxnik] { white-space: nowrap; }

.top-hdr__persona-caret[b-5xq04cxnik] { font-size: 10px; color: var(--header-muted); }

.persona-menu__backdrop[b-5xq04cxnik] { position: fixed; inset: 0; z-index: 1; }

.persona-menu[b-5xq04cxnik] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 2;
    min-width: 280px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    box-shadow: var(--shadow-pop);
    padding: 4px 0 6px;
    display: flex;
    flex-direction: column;
}
.account-menu--regular[b-5xq04cxnik] { min-width: 220px; }
/* The panel is a light surface inside the .on-dark header scope — take the focus ring
   back from lime (invisible-ish on white) to the standard brand teal. */
.persona-menu:focus-visible[b-5xq04cxnik],
.persona-menu :where(button, a):focus-visible[b-5xq04cxnik] { outline-color: var(--brand); }

.account-menu__personas[b-5xq04cxnik] {
    border-bottom: 1px solid var(--hairline);
    margin-bottom: 4px;
    padding-bottom: 4px;
}
.account-menu__personas .persona-menu__label[b-5xq04cxnik] { display: block; }
.account-menu__signout[b-5xq04cxnik] { margin: 0; }
.account-menu__action[b-5xq04cxnik] {
    display: block;
    width: 100%;
    padding: 10px 14px;
    border: 0;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: 14px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.account-menu__action:hover[b-5xq04cxnik] { background: var(--bg); color: var(--ink); text-decoration: none; }

.persona-menu__label[b-5xq04cxnik] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--faint);
    padding: 10px 14px 6px;
}

.persona-menu__item[b-5xq04cxnik] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 14px;
    background: none;
    border: none;
    text-align: left;
    font: inherit;
    font-size: 14px;
    color: var(--ink);
    cursor: pointer;
}
.persona-menu__item:hover[b-5xq04cxnik] { background: var(--bg); }

.persona-menu__text[b-5xq04cxnik] { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.persona-menu__name[b-5xq04cxnik] { font-weight: 600; white-space: nowrap; }

.persona-menu__sub[b-5xq04cxnik] {
    font-size: 12px;
    color: var(--faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.persona-menu__check[b-5xq04cxnik] { color: var(--brand); font-weight: 700; flex: 0 0 auto; }

/* Demo-auth identity (replaces the persona select when the login fronts the app). */
.top-hdr__whoami[b-5xq04cxnik] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.top-hdr__who-name[b-5xq04cxnik] {
    color: var(--header-ink);
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

.top-hdr__signout-btn[b-5xq04cxnik] {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: var(--header-muted);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    padding: 6px 12px;
    cursor: pointer;
}
.top-hdr__signout-btn:hover[b-5xq04cxnik] { color: var(--header-ink); border-color: var(--header-ink); }

/* The CTA is a normal-height button, vertically centered in the bar (the right container
   carries the 16px edge gap it used to sit flush against). */
.top-hdr__new[b-5xq04cxnik] {
    background: var(--lime);
    color: var(--lime-ink);
    display: inline-flex;
    align-items: center;
    align-self: center;
    padding: 12px 26px;
    font-size: 15.5px;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-decoration: none;
    flex: 0 0 auto;
}
.top-hdr__new:hover[b-5xq04cxnik] { opacity: 0.9; text-decoration: none; color: var(--lime-ink); }

/* ---- mobile: hamburger + slide-out drawer (≤860px) ------------------------------
   The inline nav and identity controls move into a right-edge drawer. The closed state
   hides via transform/opacity + DELAYED visibility so the slide can play both ways —
   never overflow (trap 2: a clip would erase the panel, and OverlayPaintingTests
   hit-tests actual paint). */

.top-hdr__burger[b-5xq04cxnik] {
    display: none; /* mobile only — the media query flips this on */
    background: none;
    border: 0;
    padding: 0;
    width: 44px;   /* touch target */
    height: 44px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
    flex: 0 0 auto;
}

.top-hdr__burger-bar[b-5xq04cxnik] {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--header-ink);
    transition: transform 0.18s ease, opacity 0.18s ease;
}

/* open → the bars morph into an X */
.top-hdr__burger[aria-expanded="true"] .top-hdr__burger-bar:nth-child(1)[b-5xq04cxnik] { transform: translateY(7px) rotate(45deg); }
.top-hdr__burger[aria-expanded="true"] .top-hdr__burger-bar:nth-child(2)[b-5xq04cxnik] { opacity: 0; }
.top-hdr__burger[aria-expanded="true"] .top-hdr__burger-bar:nth-child(3)[b-5xq04cxnik] { transform: translateY(-7px) rotate(-45deg); }

.mob-nav[b-5xq04cxnik] { display: none; } /* desktop: the drawer does not exist */

@media (max-width: 860px) {
    .top-hdr[b-5xq04cxnik] { gap: 14px; padding-left: 16px; }
    .top-hdr__logo[b-5xq04cxnik] { height: 26px; }
    .top-hdr__new[b-5xq04cxnik] { padding: 9px 16px; font-size: 14px; }
    .top-hdr__nav[b-5xq04cxnik],
    .top-hdr__persona[b-5xq04cxnik] { display: none; } /* all live in the drawer instead */
    .top-hdr__burger[b-5xq04cxnik] { display: inline-flex; }

    .mob-nav[b-5xq04cxnik] { display: block; }

    .mob-nav__backdrop[b-5xq04cxnik] {
        position: fixed;
        inset: 0;
        background: var(--backdrop);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s ease, visibility 0s linear 0.2s;
        z-index: 80; /* above the page + compose dock (60), below the skip link (100) */
    }
    .mob-nav--open .mob-nav__backdrop[b-5xq04cxnik] {
        opacity: 1;
        visibility: visible;
        transition: opacity 0.2s ease;
    }

    .mob-nav__panel[b-5xq04cxnik] {
        position: fixed;
        top: 0;
        right: 0;
        height: 100vh;
        height: 100dvh;
        width: min(320px, 86vw);
        background: var(--header-bg);
        display: flex;
        flex-direction: column;
        transform: translateX(102%);
        visibility: hidden;
        transition: transform 0.22s ease, visibility 0s linear 0.22s;
        z-index: 90;
        box-shadow: var(--shadow-pop); /* floating layer — one of the allowed shadows */
        outline: none;
    }
    .mob-nav--open .mob-nav__panel[b-5xq04cxnik] {
        transform: translateX(0);
        visibility: visible;
        transition: transform 0.22s ease;
    }

    .mob-nav__head[b-5xq04cxnik] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 62px; /* mirrors the bar so the brand mark lines up */
        padding: 0 10px 0 20px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
        flex: 0 0 auto;
    }

    .mob-nav__logo[b-5xq04cxnik] {
        display: block;
        height: 22px;
        width: auto;
    }

    .mob-nav__close[b-5xq04cxnik] {
        background: none;
        border: 0;
        width: 44px;
        height: 44px;
        color: var(--header-ink);
        font-size: 20px;
        line-height: 1;
        cursor: pointer;
    }

    .mob-nav__list[b-5xq04cxnik] {
        display: flex;
        flex-direction: column;
        padding: 10px 0;
        overflow-y: auto;
    }

    .mob-nav__item[b-5xq04cxnik] {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 13px 20px;
        color: var(--header-muted);
        font-size: 15px;
        text-decoration: none;
    }
    .mob-nav__item:hover[b-5xq04cxnik] { color: var(--header-ink); text-decoration: none; }

    /* Account link in the drawer foot — not a nav destination, so it sits apart from the list. */
    .mob-nav__settings[b-5xq04cxnik] {
        display: block;
        padding: 10px 0;
        color: var(--header-muted);
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
    }
    .mob-nav__settings:hover[b-5xq04cxnik] { color: var(--header-ink); }

    .mob-nav__item--on[b-5xq04cxnik] {
        color: var(--header-ink);
        font-weight: 600;
        box-shadow: inset 3px 0 0 var(--lime); /* the bar's lime underline, turned vertical */
    }

    .mob-nav__foot[b-5xq04cxnik] {
        margin-top: auto;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        flex-shrink: 0;
        gap: 12px;
        padding: 16px 20px calc(16px + env(safe-area-inset-bottom));
        border-top: 1px solid rgba(255, 255, 255, 0.12);
    }

    /* The drawer lays the personas out flat on the navy panel — recolor the shared
       .persona-menu__* rows for the dark ground. */
    .mob-nav__personas[b-5xq04cxnik] { display: flex; flex-direction: column; grid-column: 1 / -1; min-width: 0; }

    .mob-nav__personas .persona-menu__label[b-5xq04cxnik] { color: var(--header-muted); padding: 0 0 8px; }

    .mob-nav__personas .persona-menu__item[b-5xq04cxnik] { color: var(--header-ink); padding: 9px 0; }
    .mob-nav__personas .persona-menu__item:hover[b-5xq04cxnik] { background: rgba(255, 255, 255, 0.08); }

    .mob-nav__personas .persona-menu__sub[b-5xq04cxnik] { color: var(--header-muted); }
    .mob-nav__personas .persona-menu__check[b-5xq04cxnik] { color: var(--lime); }

    .mob-nav__who[b-5xq04cxnik] {
        grid-column: 1 / -1;
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
    }

    .mob-nav__who-text[b-5xq04cxnik] { display: flex; flex-direction: column; min-width: 0; }

    .mob-nav__who-name[b-5xq04cxnik] {
        color: var(--header-ink);
        font-size: 13.5px;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mob-nav__who-role[b-5xq04cxnik] {
        color: var(--header-muted);
        font-size: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mob-nav__signout[b-5xq04cxnik] { flex: 0 0 auto; }
}

/* Keep the full French CTA and the 44px menu control reachable at 320px without shrinking text or the logo. */
@media (max-width: 380px) {
    .top-hdr[b-5xq04cxnik] { gap: 6px; padding-left: 8px; }
    .top-hdr__right[b-5xq04cxnik] { gap: 6px; padding-right: 8px; }
    .top-hdr__new[b-5xq04cxnik] { padding-inline: 6px; }
}

@media (prefers-reduced-motion: reduce) {
    .top-hdr__burger-bar[b-5xq04cxnik],
    .mob-nav__backdrop[b-5xq04cxnik],
    .mob-nav__panel[b-5xq04cxnik] { transition: none; }
}

/* A quiet highlight for the shared brand assets, using the shell palette. */
.staff-pack-nav[b-5xq04cxnik] { border: 0; background: transparent; font: inherit; cursor: pointer; color: var(--header-ink); text-align: left; }
.staff-pack-nav span[b-5xq04cxnik] { padding: 7px 10px; background: linear-gradient(110deg, color-mix(in srgb, var(--header-muted) 18%, transparent), color-mix(in srgb, var(--lime) 12%, transparent)); }
.staff-pack-nav:hover span[b-5xq04cxnik] { background: linear-gradient(110deg, color-mix(in srgb, var(--header-muted) 28%, transparent), color-mix(in srgb, var(--lime) 20%, transparent)); }
.staff-pack-nav:focus-visible[b-5xq04cxnik] { outline: 2px solid var(--lime); outline-offset: -3px; }
/* /Components/Pages/CompleteProfile.razor.rz.scp.css */
.profile-card[b-baxddvj5kz] {
    flex: 1 1 0;
    min-height: 0;
    min-width: 0;
    width: 100%;
    padding: 32px 32px calc(160px + env(safe-area-inset-bottom));
    background: var(--surface);
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-padding-block-end: calc(160px + env(safe-area-inset-bottom));
}
.profile-card > form[b-baxddvj5kz] { max-width: 36rem; display: grid; gap: 18px; }
.profile-card > p[b-baxddvj5kz] { max-width: 56ch; margin-block: 18px; }
.profile-card h1[b-baxddvj5kz] { max-width: 24ch; }

.profile-card h1[b-baxddvj5kz] { margin: 0; color: var(--navy); font-size: 26px; }.profile-card > p[b-baxddvj5kz] { margin: 0; color: var(--muted); line-height: 1.45; }.profile-card label[b-baxddvj5kz] { display: grid; gap: 6px; color: var(--navy); font-size: 13px; font-weight: 700; }
.profile-card input[b-baxddvj5kz], .profile-card select[b-baxddvj5kz] { padding: 11px; border: 1px solid var(--hairline-strong); font: inherit; background: var(--surface); }.profile-card input[readonly][b-baxddvj5kz] { background: var(--surface-2); color: var(--muted); }.profile-card__error[b-baxddvj5kz] { color: var(--red-text) !important; }.profile-card__context[b-baxddvj5kz], .profile-card__uploads[b-baxddvj5kz] { font-size: 13px; }
.profile-card__actions[b-baxddvj5kz] { position: fixed; z-index: 2; right: max(16px, env(safe-area-inset-right)); bottom: calc(56px + env(safe-area-inset-bottom)); display: flex; max-width: calc(68vw - 32px); flex-wrap: wrap; justify-content: flex-end; gap: 10px; padding: 12px; background: var(--surface); border: 1px solid var(--hairline); }
.profile-card input[b-baxddvj5kz], .profile-card select[b-baxddvj5kz] { scroll-margin-bottom: calc(88px + env(safe-area-inset-bottom)); }

@media (max-width: 860px) {
    .profile-card[b-baxddvj5kz] { padding: 24px 20px calc(180px + env(safe-area-inset-bottom)); scroll-padding-block-end: calc(180px + env(safe-area-inset-bottom)); }
    .profile-card__actions[b-baxddvj5kz] { max-width: calc(100vw - 24px); right: max(12px, env(safe-area-inset-right)); bottom: calc(48px + env(safe-area-inset-bottom)); padding: 10px; }
    .profile-card__actions .btn--cta[b-baxddvj5kz] { flex: 1 0 100%; }
}

.profile-card > p[b-baxddvj5kz] { margin-block: 18px; }

.profile-card__ready[b-baxddvj5kz] { animation: profile-reveal-b-baxddvj5kz 180ms ease-out; }
@keyframes profile-reveal-b-baxddvj5kz { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .profile-card__ready[b-baxddvj5kz] { animation: none; } }
/* /Components/Pages/Dashboard.razor.rz.scp.css */
/* Queue (Dashboard) — NAVACORD direction. Shared pieces (.page, .page__greeting, .section-label,
   .mono, .btn*, .stage*, .tag*, .edge-mark*, .persona-select, .link-button, .skeleton*) live in
   mrt.css; this file owns only queue-specific structure.

   Groups, not tabs: each bucket ("Requires your action", "Due this week", "Upcoming & in
   review", "Completed") is a bordered card with a tinted header strip that sticks under the
   navy shell bar. Rows stay a real <table> per group — the kit mocks them as div grids, but
   this is tabular data, and a table gives header semantics for free. Fixed layout + <colgroup>
   keeps the columns lined up across the separate tables. */

/* ---- Header ---- */
/* overflow:hidden is JUSTIFIED here (research-log 2026-08-21 rule): the decor SVG deliberately
   bleeds past the hero's right edge and must clip at it; nothing focusable renders inside. */
.q-head[b-o7surxyqi6] {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    overflow: hidden;
    padding-top: 2px;
}

.q-head__lead[b-o7surxyqi6] { min-width: 0; position: relative; }

.q-head__decor[b-o7surxyqi6] {
    position: absolute;
    top: 0;
    right: 0;
    width: 420px;
    height: 180px;
    pointer-events: none;
}

.q-head__decor svg[b-o7surxyqi6] { position: absolute; top: 0; right: 0; }

.q-eyebrow[b-o7surxyqi6] { margin-bottom: 6px; }

/* ---- Metric strip (quick filters) ---- */
.metrics[b-o7surxyqi6] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
    margin-top: 22px;
}

/* The Archived cell joins only while archived rows exist — the strip stays 4-up otherwise. */
.metrics--5[b-o7surxyqi6] { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.kpi[b-o7surxyqi6] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    background: transparent;
    border: none;
    font-family: inherit;
    padding: 15px 20px 16px;
    cursor: pointer;
}

.kpi + .kpi[b-o7surxyqi6] { border-left: 1px solid var(--hairline); }

.kpi--on[b-o7surxyqi6] {
    background: var(--lime-tint);
    box-shadow: inset 0 -3px 0 var(--lime);
}

.kpi__label[b-o7surxyqi6] {
    font-size: 11px;
    letter-spacing: .08em;
    color: var(--muted);
    font-weight: 600;
}

.kpi__value[b-o7surxyqi6] {
    font-family: var(--font-sans);
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
    color: var(--navy);
    font-variant-numeric: tabular-nums;
    margin-top: 8px;
}

.kpi__value--teal[b-o7surxyqi6] { color: var(--brand); }

.kpi__note[b-o7surxyqi6] {
    font-size: 12.5px;
    color: var(--faint);
    margin-top: 7px;
}

@media (max-width: 640px) {
    .metrics[b-o7surxyqi6],
    .metrics--5[b-o7surxyqi6] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .kpi:nth-child(odd)[b-o7surxyqi6] { border-left: none; }
    .kpi:nth-child(n+3)[b-o7surxyqi6] { border-top: 1px solid var(--hairline); }
}

/* ---- Toolbar (grouping note + scope + row count + filter) ---- */
.q-toolbar[b-o7surxyqi6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--hairline);
    margin-top: 4px;
    padding: 12px 0 11px;
}

.q-toolbar__mode[b-o7surxyqi6] {
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--faint);
}

.q-toolbar__right[b-o7surxyqi6] {
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    min-width: 0;
    max-width: 100%;
    gap: 14px;
}

.q-count[b-o7surxyqi6] {
    font-size: 12px;
    color: var(--faint);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Scope chip: shown only when the nav rail deep-linked into a narrower view. */
.q-scope[b-o7surxyqi6] {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    max-width: 100%;
    gap: 8px;
    padding: 5px 6px 5px 11px;
    border: 1px solid var(--hairline-strong);
    border-radius: var(--radius);
    background: var(--surface);
    font-size: 12.5px;
    color: var(--muted);
    white-space: normal;
}

.q-scope__clear[b-o7surxyqi6] {
    background: none;
    border: none;
    padding: 0 5px;
    font: inherit;
    font-size: 12.5px;
    color: var(--brand-text);
    cursor: pointer;
}

.q-scope__clear:hover[b-o7surxyqi6] { text-decoration: underline; }

/* The filter trigger + popover render from FilterPopover.razor — their styles live in
   FilterPopover.razor.css (scoped CSS only applies to the component that renders it). */

/* ---- Group card ---- */
/* No overflow:hidden here any more: corners are square (nothing to tidy) and the clip would
   break the sticky group header below. */
.qgroup[b-o7surxyqi6] {
    margin-top: 18px;
    background: var(--surface);
    border: 1px solid var(--hairline);
}

/* The header strip sticks just under the navy shell bar while its group scrolls. */
.qgroup__head[b-o7surxyqi6] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 18px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--hairline);
    position: sticky;
    top: 62px;
    z-index: 5;
}

/* Let a mobile keyboard-focused request clear its variable-height group header. */
@media (max-width: 640px) {
    [data-mrt-dashboard-queue] .qgroup:has(.req__title:focus-visible) .qgroup__head[b-o7surxyqi6] {
        position: static;
    }
}

.qgroup__dot[b-o7surxyqi6] {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--slate);
}

.qgroup__label[b-o7surxyqi6] {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--ink);
    margin: 0;
}

.qgroup__count[b-o7surxyqi6] {
    font-size: 12px;
    color: var(--faint);
    font-variant-numeric: tabular-nums;
}

.qgroup__note[b-o7surxyqi6] {
    font-size: 12.5px;
    color: var(--faint);
    margin-left: 4px;
}

/* Per-bucket accent. Only "Needs you" tints its whole header — it is the one section that means
   the reader has to do something. */
.qgroup__head--needs-you[b-o7surxyqi6] {
    background: var(--lime-band);
    border-bottom-color: #e3ecc4;
}

.qgroup__head--needs-you .qgroup__dot[b-o7surxyqi6] { background: var(--lime); }
.qgroup__head--needs-you .qgroup__label[b-o7surxyqi6] { color: var(--lime-text); }
.qgroup__head--needs-you .qgroup__note[b-o7surxyqi6] { color: var(--lime-text); }

.qgroup__head--week .qgroup__dot[b-o7surxyqi6] { background: var(--steel-decor); }
.qgroup__head--later .qgroup__dot[b-o7surxyqi6] { background: var(--slate); }
.qgroup__head--done .qgroup__dot[b-o7surxyqi6] { background: var(--delivered); }
.qgroup__head--archived .qgroup__dot[b-o7surxyqi6] { background: var(--hairline-strong); }

/* ---- Table ---- */
.table-scroll[b-o7surxyqi6] {
    overflow-x: auto;
}

/* Live-update cue: ONLY the rows that actually changed pulse once (background flash, since a <tr>
   can't take a box-shadow reliably). Cells animate so a tinted row's own background shows through
   as it fades. The rest of the list is untouched — no whole-table flash. */
@keyframes q-row-pulse-b-o7surxyqi6 {
    from { background-color: var(--brand-soft); }
    to { background-color: transparent; }
}

.req-table tbody tr.row--pulse > td[b-o7surxyqi6] {
    animation: q-row-pulse-b-o7surxyqi6 1.6s ease-out 1;
}

@media (prefers-reduced-motion: reduce) {
    .req-table tbody tr.row--pulse > td[b-o7surxyqi6] { animation: none; }
}

.req-table[b-o7surxyqi6] {
    width: 100%;
    min-width: 860px;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 14px;
}

.req-table caption[b-o7surxyqi6] { text-align: left; }

/* Column widths, mirroring the kit's grid template (2.4fr / 168 / 1fr / 100 / 84). The request
   column is a PERCENTAGE, not `auto`: with auto it swallowed every spare pixel on a wide screen
   and left a canyon between the title and the stage. */
.col--request[b-o7surxyqi6] { width: 44%; }
.col--stage[b-o7surxyqi6] { width: 168px; }
.col--owner[b-o7surxyqi6] { width: 22%; }
.col--due[b-o7surxyqi6] { width: 118px; }
.col--updated[b-o7surxyqi6] { width: 108px; }

.req-table tbody td[b-o7surxyqi6] {
    padding: 15px 16px;
    border-top: 1px solid var(--list-hairline);
    vertical-align: top;
    color: var(--muted);
}

.req-table tbody tr:first-child td[b-o7surxyqi6] { border-top: none; }

.req-table tbody tr:hover td[b-o7surxyqi6] { background: var(--surface-2); }

.req-table tbody tr.row--tint td[b-o7surxyqi6] { background: var(--lime-tint); }

.req-table tbody tr.is-closed td[b-o7surxyqi6] { color: var(--faint); }

.cell-request[b-o7surxyqi6] {
    position: relative;
    padding-left: 22px !important;
}

.cell-num[b-o7surxyqi6] {
    color: var(--muted);
    white-space: nowrap;
    text-align: right;
    font-size: 13px;
}

/* Emphasise the "Updated" date on rows with unseen activity. */
.cell-updated[b-o7surxyqi6] {
    color: var(--brand-text);
    font-weight: 500;
}

/* "Update" badge: soft-teal pill (distinct from the solid Action-required/Your-review tags).
   Uses the shared .tag base from mrt.css for sizing. Not lime — lime is blocked-on-user only. */
.tag--update[b-o7surxyqi6] {
    background: var(--brand-soft);
    color: var(--brand-text);
}

.req__top[b-o7surxyqi6] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.req__ref[b-o7surxyqi6] {
    font-size: 11.5px;
    color: var(--muted);
    font-weight: 600;
    white-space: nowrap;
}

/* Sub-task progress chip on the request row ("3/5" + checklist glyph). */
.req__subs[b-o7surxyqi6] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--faint);
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}

.req__title[b-o7surxyqi6] {
    display: inline-block;
    color: var(--ink);
    font-size: 14.5px;
    font-weight: 600;
    text-decoration: none;
}

.req__title:hover[b-o7surxyqi6] {
    color: var(--brand-text);
    text-decoration: underline;
}

.req__sub[b-o7surxyqi6] {
    font-size: 12.5px;
    color: var(--faint);
    margin-top: 3px;
}

.req__owner-empty[b-o7surxyqi6] {
    color: var(--faint);
    font-style: italic;
}

/* Owner cell: profile-circle avatar (photo over initials) + name, with a personal
   "Waiting on you" cue when the request needs the requester. */
.owner[b-o7surxyqi6] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

/* The owner/collaborator circles are rendered by the Avatar component, so they need ::deep —
   a plain selector would compile to .owner__avatar[b-dashboard] and match nothing. The "+N"
   disc IS rendered here, but ::deep still covers it (the compiled form is an ancestor match),
   so one rule set serves both. */
[b-o7surxyqi6] .owner__avatar {
    position: relative;
    overflow: hidden;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--brand);
    color: var(--brand-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.02em;
}

[b-o7surxyqi6] .owner__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* Avatar stack: owner in front, collaborators tucked behind (2px surface ring). */
.owner-stack[b-o7surxyqi6] {
    display: flex;
    flex-shrink: 0;
}

.owner-stack[b-o7surxyqi6]  .owner__avatar {
    position: relative;
    z-index: 3;
    border: 2px solid var(--surface);
    margin: -2px 0 -2px -2px;
}

.owner-stack[b-o7surxyqi6]  .owner__avatar--stacked {
    z-index: 2;
    margin-left: -10px;
}

.owner-stack[b-o7surxyqi6]  .owner__avatar--stacked + .owner__avatar--stacked { z-index: 1; }

[b-o7surxyqi6] .owner__avatar--more {
    background: var(--surface-2);
    color: var(--muted);
    font-size: 10px;
}

.owner__more[b-o7surxyqi6] {
    font-size: 11.5px;
    color: var(--faint);
}

.owner__meta[b-o7surxyqi6] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.owner__name[b-o7surxyqi6] {
    font-size: 13.5px;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.owner__waiting[b-o7surxyqi6] {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--lime-text);
}

.q-none[b-o7surxyqi6] {
    margin-top: 28px;
    padding: 28px 16px;
    text-align: center;
    color: var(--faint);
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
}
/* /Components/Pages/LibraryPage.razor.rz.scp.css */
/* Library — a launcher, not a browser: one square, bordered tile per Templafy section, in the
   same geometry the dashboard's cards use. Tokens from theme.css; no border-radius and no
   overflow clip (a clip would crop the focus ring these tiles depend on). */

.lib-section[b-bac0yvydan] { margin: 30px 0 0; }

.lib-links[b-bac0yvydan] {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}

.lib-link[b-bac0yvydan] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--hairline);
    background: var(--surface);
    color: var(--navy);
    text-decoration: none;
}
.lib-link:hover[b-bac0yvydan] { border-color: var(--brand); text-decoration: none; }
.lib-link:hover .lib-link__out[b-bac0yvydan] { color: var(--brand-text); }

.lib-link__icon[b-bac0yvydan] {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--teal-soft);
    color: var(--brand-text);
}
.lib-link__icon--soon[b-bac0yvydan] { background: var(--steel-soft); color: var(--steel); }

.lib-link__label[b-bac0yvydan] { font-size: 14.5px; font-weight: 700; min-width: 0; }

/* The new-tab arrow. Screen readers get the wording instead — see the hidden span. */
.lib-link__out[b-bac0yvydan] { margin-left: auto; flex: 0 0 auto; color: var(--faint); }

/* ---- the not-yet row ---------------------------------------------------- */
.lib-soon[b-bac0yvydan] {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 12px;
    max-width: 680px;
    padding: 14px 16px;
    /* dashed edge + the "Coming soon" wording: two signals, so colour is never the only one */
    border: 1px dashed var(--hairline-strong);
    background: var(--surface-2);
}
.lib-soon__body[b-bac0yvydan] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lib-soon__label[b-bac0yvydan] { font-size: 14.5px; font-weight: 700; color: var(--muted); }
.lib-soon__blurb[b-bac0yvydan] { font-size: 12.5px; color: var(--faint); }
.lib-soon__flag[b-bac0yvydan] {
    margin-left: auto;
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--steel);
    background: var(--surface);
    border: 1px solid var(--hairline-strong);
    padding: 5px 10px;
}
/* /Components/Pages/LoginPage.razor.rz.scp.css */
/* Demo sign-in card — square, bordered white card on the grey ground, navy lockup, lime CTA,
   and the disabled "Sign in with Microsoft" roadmap cue. */
.login-card[b-ewetfyrvv3] {
    width: 400px;
    max-width: 100%;
    background: var(--surface);
    border: 1px solid var(--hairline);
    padding: 34px 34px 30px;
}

/* Full-bleed navy masthead: negative margins cancel the card padding so the band (and the
   logo inside it) runs the card's full width. */
.login-brand[b-ewetfyrvv3] {
    background: var(--navy);
    margin: -34px -34px 26px;
    padding: 28px 34px;
}

.login-brand__logo[b-ewetfyrvv3] {
    display: block;
    width: 100%;
    height: auto;
}

.login-title[b-ewetfyrvv3] {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--navy);
}

.login-sub[b-ewetfyrvv3] {
    margin: 7px 0 0;
    font-size: 13.5px;
    color: var(--muted);
    text-wrap: pretty;
}

.login-form[b-ewetfyrvv3] { margin-top: 22px; display: flex; flex-direction: column; gap: 14px; }

.login-error[b-ewetfyrvv3] {
    margin: 0;
    padding: 9px 12px;
    background: color-mix(in srgb, #b32121 8%, var(--surface));
    border-left: 3px solid #b32121;
    color: var(--ink);
    font-size: 13px;
}

.login-field[b-ewetfyrvv3] { display: block; }

.login-field__label[b-ewetfyrvv3] {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 6px;
}

.login-field__input[b-ewetfyrvv3] {
    width: 100%;
    border: 1px solid var(--hairline-strong);
    background: var(--surface);
    padding: 11px 13px;
    font: inherit;
    font-size: 14px;
    color: var(--ink);
}

.login-submit[b-ewetfyrvv3] { width: 100%; margin-top: 4px; }

.login-divider[b-ewetfyrvv3] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0 14px;
    color: var(--faint);
    font-size: 12px;
}
.login-divider[b-ewetfyrvv3]::before,
.login-divider[b-ewetfyrvv3]::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--hairline);
}

/* The roadmap cue: looks like the real button, reads as "coming", is not interactive. */
.login-sso[b-ewetfyrvv3] {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1.5px solid var(--hairline);
    background: var(--surface-2);
    color: var(--faint);
    padding: 11px 14px;
    font-size: 14px;
    font-weight: 600;
}

.login-sso__logo[b-ewetfyrvv3] { opacity: 0.55; flex: 0 0 auto; }

.login-sso__soon[b-ewetfyrvv3] {
    margin-left: auto;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--steel);
    background: var(--steel-soft);
    padding: 2px 8px;
    flex: 0 0 auto;
}

.login-note[b-ewetfyrvv3] {
    margin: 12px 0 0;
    font-size: 12px;
    color: var(--faint);
    line-height: 1.5;
    text-wrap: pretty;
}
/* /Components/Pages/NewRequest.razor.rz.scp.css */
/* /Components/Pages/Reporting.razor.rz.scp.css */
/* Admin dashboard ("Team performance", design `Admin Dashboard - Navacord.dc.html`,
   2026-08-25). Scoped to Reporting.razor: page header + controls, the 4-cell KPI strip,
   the chart/pipeline grid, and the ops list. The chart/pipeline/breakdown cards style
   THEMSELVES (scoped-CSS rule — styles live with the component that renders the markup).
   Square + flat: 1px rules and background tints only, no radius, no shadow. Tokens only.
   NOTE: .kpi-cell, not .kpi — the requester Dashboard owns `.kpi` with different rules. */

.rpt-eyebrow[b-6unhindf62] {
    font-size: 12px;
    letter-spacing: .08em;
    color: var(--faint);
    margin: 0 0 6px;
}

.rpt-head[b-6unhindf62] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.rpt-head__titles[b-6unhindf62] {
    min-width: 0;
}

/* --- controls row ----------------------------------------------------------- */
.rpt-view[b-6unhindf62] {
    margin: 4px 0 18px;
}

.rpt-controls[b-6unhindf62] {
    display: flex;
    align-items: stretch;
    gap: 10px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.rpt-select[b-6unhindf62] {
    display: block;
    background: var(--surface);
    border: 1.5px solid var(--hairline-strong);
    padding: 5px 12px 4px;
    cursor: pointer;
}

.rpt-select__label[b-6unhindf62] {
    display: block;
    font-size: 10px;
    color: var(--faint);
    letter-spacing: .05em;
    font-weight: 600;
    text-transform: uppercase;
}

.rpt-select select[b-6unhindf62] {
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--navy);
    padding: 0;
    margin: 0;
    min-width: 110px;
    cursor: pointer;
}

@media (max-width: 640px) {
    .rpt-view[b-6unhindf62]  .seg,
    .rpt-controls[b-6unhindf62]  .seg {
        flex-wrap: wrap;
        min-width: 0;
        max-width: 100%;
    }

    .rpt-view[b-6unhindf62]  .seg__btn,
    .rpt-controls[b-6unhindf62]  .seg__btn {
        white-space: normal;
        min-width: 0;
        max-width: 100%;
    }

    .rpt-select[b-6unhindf62],
    .rpt-select select[b-6unhindf62] {
        min-width: 0;
        max-width: 100%;
    }
}

/* --- KPI strip --------------------------------------------------------------
   Cells separated by 1px rules: hairline background + 1px grid gap keeps the rules
   continuous when the grid wraps. */
.kpi-strip[b-6unhindf62] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1px;
    background: var(--hairline);
    border: 1px solid var(--hairline);
    margin-top: 22px;
}

.kpi-cell[b-6unhindf62] {
    background: var(--surface);
    padding: 18px 20px 20px;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* someone is waiting on a broker — the one emphasised cell */
.kpi-cell--flag[b-6unhindf62] {
    box-shadow: inset 3px 0 0 var(--lime);
}

.kpi-cell__label[b-6unhindf62] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--faint);
}

.kpi-cell__value[b-6unhindf62] {
    font-size: 27px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
    color: var(--navy);
    margin-top: 6px;
}

.kpi-cell__unit[b-6unhindf62] {
    font-size: 13px;
    color: var(--faint);
    font-weight: 600;
    margin-left: 6px;
}

.kpi-cell__meta[b-6unhindf62] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.kpi-cell__vs[b-6unhindf62] {
    font-size: 12px;
    color: var(--faint);
}

.delta[b-6unhindf62] {
    font-size: 12px;
    font-weight: 700;
    padding: 1px 7px;
    border: 1px solid transparent;
    font-variant-numeric: tabular-nums;
}

.delta--good[b-6unhindf62] {
    background: var(--lime-band);
    color: var(--lime-text);
    border-color: var(--lime-border);
}

.delta--bad[b-6unhindf62] {
    background: var(--red-soft);
    color: var(--red-text);
    border-color: var(--red-border);
}

/* --- chart + pipeline grid --------------------------------------------------- */
.rpt-grid[b-6unhindf62] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    gap: 22px;
    margin: 22px 0;
    align-items: stretch;
}

@media (max-width: 960px) {
    .rpt-grid[b-6unhindf62] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* --- section headings ------------------------------------------------------- */
.rpt-section-h[b-6unhindf62] {
    margin: 32px 0 0;
}

/* --- "Needs a manager today" — flat ruled rows ------------------------------- */
.ops[b-6unhindf62] {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    border-top: 1px solid var(--hairline);
}

.ops__row[b-6unhindf62] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 11px 2px;
    border-bottom: 1px solid var(--list-hairline);
}

.ops__main[b-6unhindf62] {
    min-width: 0;
}

.ops__ref[b-6unhindf62] {
    color: var(--ink);
}

.ops__title[b-6unhindf62] {
    color: var(--muted);
}

.ops__reason[b-6unhindf62] {
    flex: none;
    color: var(--navy);
    font-weight: 500;
    font-size: 13px;
    text-align: right;
}
/* /Components/Pages/RequestDetailPage.razor.rz.scp.css */
/* Detail page — NAVACORD direction (scoped). The page runs FULL BLEED: `.page`'s usual gutter is
   dropped here and each section carries its own 32px padding, so the header rule, the attention
   band and the tinted right rail all reach the window edge the way the kit draws them.

   This file owns ONLY what the PAGE itself renders: the sticky header, the two-column body grid,
   the conversation section chrome, the band action areas (passed as ChildContent, so they compile
   into this page's render tree), and the error banner. Everything the page delegates to a
   component is styled beside that component — Blazor scopes CSS to whichever component RENDERS
   the element, so a rule left here for moved markup silently does nothing:
     AttentionBand.razor.css    .band*, .band-files*
     ActivityTimeline.razor.css .timeline*
     ConversationThread.razor.css .thread-*, .mention*, .reaction-*
     MessageComposer.razor.css  .compose*, .mention-pick*
     RequestSidebar.razor.css   .detail-side*, .side-*, .field*, .contact*
     RequestFiles.razor.css     .file-card, .file-row*, .file__note
     LinkifiedText.razor.css    .text-link
   The shared section chrome (.detail-block*) lives in mrt.css: THREE components render sections
   with it (the timeline, the conversation block below, and the files grid), so a scoped copy in
   any one of them would only ever style that component's third.                                 */

/* Full bleed: sections own their gutters (see the file header). The page carries NO bottom
   padding — the main column owns it instead, so the tinted right rail (stretched to the grid's
   height) reaches the bottom of the content rather than stopping 56px short of it. A flex
   column so the body grid can take the full height MainLayout's pinned mode hands down. */
.message-pending-files[b-6i4rvu5e7x] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--hairline); border-bottom: 0; background: var(--surface); color: var(--muted); font-size: 12px; }
.message-pending-files > span:first-child[b-6i4rvu5e7x] { flex-basis: 100%; }
.message-pending-file[b-6i4rvu5e7x] { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 8px; border: 1px solid var(--hairline); color: var(--ink); }
.message-pending-file > span[b-6i4rvu5e7x] { overflow-wrap: anywhere; min-width: 0; }
.message-pending-file[b-6i4rvu5e7x]  .file-ico { flex-shrink: 0; }
.message-pending-file button[b-6i4rvu5e7x] { flex-shrink: 0; min-width: 28px; min-height: 28px; border: 0; background: transparent; color: var(--brand); cursor: pointer; font: inherit; font-size: 18px; }
.message-pending-file button:focus-visible[b-6i4rvu5e7x] { outline: 2px solid var(--brand); outline-offset: 2px; }

.page[b-6i4rvu5e7x] {
    padding: 0;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* --- Sticky header (breadcrumb + title + status + due note; follows scroll) --- */
.detail-head[b-6i4rvu5e7x] {
    position: sticky;
    top: 62px; /* below the navy shell bar */
    z-index: 5;
    background: var(--surface);
    padding: 22px 32px 18px;
    border-bottom: 1px solid var(--hairline);
}

.detail-head__crumb[b-6i4rvu5e7x] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--faint);
}

/* Kit's square back button: 26px, hairline border, CSS-drawn chevron. */
.detail-head__chev[b-6i4rvu5e7x] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    background: var(--surface);
    border: 1.5px solid var(--hairline-strong);
    color: var(--navy);
}

.detail-head__chev:hover[b-6i4rvu5e7x] { border-color: var(--navy); }

.detail-head__chev-mark[b-6i4rvu5e7x] {
    display: block;
    width: 7px;
    height: 7px;
    margin-left: 2px;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
}

.detail-head__back[b-6i4rvu5e7x] {
    color: var(--brand);
    font-weight: 600;
    text-decoration: none;
}

.detail-head__back:hover[b-6i4rvu5e7x] { text-decoration: underline; }

.detail-head__sep[b-6i4rvu5e7x] { color: var(--hairline-strong); }

.detail-head__row[b-6i4rvu5e7x] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-top: 10px;
}

/* S34: Mark complete lives at the head's right edge; confirm is a two-step inline swap. */
.detail-head__actions[b-6i4rvu5e7x] {
    flex-shrink: 1;
    min-width: 0;
    max-width: 100%;
    display: flex;
    gap: 8px;
}

.complete-confirm[b-6i4rvu5e7x] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.complete-confirm__hint[b-6i4rvu5e7x] {
    font-size: 12px;
    color: var(--faint);
}

.detail-head__lead[b-6i4rvu5e7x] { min-width: 0; }

.detail-head__title[b-6i4rvu5e7x] {
    font-size: 27px;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.2;
    margin: 0;
    max-width: 56ch;
    text-wrap: pretty;
    color: var(--navy);
}

.detail-head__meta[b-6i4rvu5e7x] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 11px;
    flex-wrap: wrap;
}

.detail-head__note[b-6i4rvu5e7x] {
    font-size: 13px;
    color: var(--muted);
}

/* --- Band action areas: ChildContent of <AttentionBand>, so they render HERE --- */
/* Answer / ask-for-changes input — a clean white box (textarea + footer share one border),
   matching the conversation compose box; not a bottom-rule-only field. */
/* No `overflow: hidden` here either: the textarea and footer are transparent, so a clip buys
   nothing, and an ancestor's overflow DOES clip a descendant's focus outline (an element's own
   outline escapes its own overflow, but not its parent's). */
.band-box[b-6i4rvu5e7x] {
    margin-top: 16px;
    background: var(--surface);
    border: 1px solid var(--hairline-strong);
    border-radius: var(--radius);
    /* Full band width, like the page composer — a 68ch cap left the box looking stranded
       on the full-bleed band (user, 2026-08-25). */
    max-width: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Same active treatment as the page composer: dark-teal selected border while typing. */
.band-box:focus-within[b-6i4rvu5e7x] {
    border-color: var(--brand);
    box-shadow: 0 0 0 1px var(--brand);
}

.band-box__input[b-6i4rvu5e7x] {
    display: block;
    width: 100%;
    min-height: 6.5rem;
    padding: 13px 14px;
    background: transparent;
    border: none;
    color: var(--ink);
    font: inherit;
    line-height: 1.5;
    resize: vertical;
}

.band-box__foot[b-6i4rvu5e7x] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    border-top: 1px solid var(--hairline);
    padding: 8px;
}

.band__actions[b-6i4rvu5e7x] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 16px;
}

/* BbButton renders its own scope; translated labels need natural height when wrapped. */
.band-box__foot[b-6i4rvu5e7x]  button,
.band__actions[b-6i4rvu5e7x]  button {
    height: auto;
    min-height: 2.5rem;
    max-width: 100%;
}

/* --- Two-column body --- */
/* The rail rises to the shell bar: the title header lives INSIDE the left column, so the
   aside's tint runs from just under the navy menu to the bottom (kit: aside sticky top:62,
   height calc(100vh - 62px), flex-basis 320px). */
.detail-body[b-6i4rvu5e7x] {
    display: grid;
    /* fixed 320px rail (kit literal); the main column (1fr) takes the remaining width. No
       gap — the rail's own border-left is the separator. */
    grid-template-columns: minmax(0, 1fr) 320px;
    /* stretch (not start): the rail's grid cell matches the main column's height so the
       sticky aside inside it has the full run to pin against */
    align-items: stretch;
    /* fill the shell's main column: on a short request the rail's tint still reaches the
       bottom of the viewport */
    flex: 1 1 auto;
    min-height: 0;
}

/* NO internal scroll container here: the document scrolls the main column and its dock.
   An `overflow` on .detail-main would re-create the clipped-overlay bug —
   OverlayPaintingTests names the ancestor if anyone tries. */

.detail-main[b-6i4rvu5e7x] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding-bottom: 28px;
}

/* --- Page-level composer dock (2026-08-25) ----------------------------------------------- */
/* Last child of .page, sticky against the DOCUMENT scroll (this route has no overflow
   ancestor — see the header note above), so the reply line rides the viewport bottom for
   the whole scroll, on every viewport size. The sticky lives on the DOCK, not on .compose:
   a sticky child of a short wrapper would have no run to travel. NO overflow anywhere
   (trap 2) — the @-mention drop-up escapes the dock upward by design. */
.compose-dock[b-6i4rvu5e7x] {
    position: sticky;
    bottom: 0;
    z-index: 15;
    padding: 0 32px 10px;
    /* Align with the main column — the 320px rail keeps its own ground to the right. */
    margin-right: 320px;
    /* Solid ground: scrolled thread content must not peek through the side gutters or the
       10px strip under the box. Same colour as the main column, so invisible at rest. */
    background: var(--surface);
}

/* The fade above the dock: content scrolling under the composer dissolves into the page
   ground instead of hitting the box's hard top line. A pseudo-element — NEVER an overflow
   clip (trap 2) — sitting below the drop-up (z-index 20) and inert to the pointer.
   Anchored at exactly 100%: any overlap into the dock paints the gradient's solid bottom
   edge OVER the compose box's 1px top border and visibly erases it. */
.compose-dock[b-6i4rvu5e7x]::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 28px;
    background: linear-gradient(to top, var(--surface) 15%, transparent);
    pointer-events: none;
}

/* Include the page-level dock in the rail's sticky containing grid. Otherwise the rail
   reaches the body grid's bottom early and slides upward by the composer's height.
   The neutral body wrapper keeps its DOM structure; it creates no clipping/scroll box. */
@media (min-width: 981px) {
    .page:has(> .detail-body)[b-6i4rvu5e7x] {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 320px;
        grid-template-rows: 1fr auto;
    }

    .detail-body[b-6i4rvu5e7x] { display: contents; }
    .detail-main[b-6i4rvu5e7x] { grid-column: 1; grid-row: 1; }
    .compose-dock[b-6i4rvu5e7x] { grid-column: 1; grid-row: 2; margin-right: 0; }
}

@media (max-width: 980px) {
    .compose-dock[b-6i4rvu5e7x] {
        margin-right: 0;
    }
}

.thread-empty[b-6i4rvu5e7x] {
    font-size: 13px;
    color: var(--muted);
    padding: 8px 0 2px;
}

.thread-head[b-6i4rvu5e7x] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}

.thread-head__count[b-6i4rvu5e7x] { font-size: 12px; color: var(--faint); font-weight: 600; }

/* "Showing comments about X" — the per-item filter banner (LOGIC-17). */
.thread-scope[b-6i4rvu5e7x] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    background: var(--lime-band);
    border: 1px solid var(--lime-border);
    padding: 8px 12px;
    font-size: 13px;
    color: var(--navy);
}
.thread-scope .link-button[b-6i4rvu5e7x] { margin-left: auto; flex: 0 0 auto; }

/* --- Completion celebration (decorative; announced via aria-live) ------------------------ */
.celebrate[b-6i4rvu5e7x] {
    position: fixed;
    inset: 0;
    z-index: 60;
    pointer-events: none;
    overflow: hidden; /* justified: skewed bars fly past both window edges by design */
}

.celebrate__card[b-6i4rvu5e7x] {
    position: absolute;
    left: 50%;
    top: 38%;
    transform: translate(-50%, -50%);
    background: var(--navy);
    color: #fff;
    padding: 18px 26px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: var(--shadow-pop);
    animation: celebrate-pop-b-6i4rvu5e7x 2s ease forwards;
}

.celebrate__badge[b-6i4rvu5e7x] {
    width: 38px;
    height: 38px;
    background: var(--lime);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.celebrate__tick[b-6i4rvu5e7x] {
    stroke-dasharray: 26;
    stroke-dashoffset: 26;
    animation: celebrate-check-b-6i4rvu5e7x 0.45s 0.3s ease forwards;
}

.celebrate__title[b-6i4rvu5e7x] { font-size: 16.5px; font-weight: 700; }
.celebrate__sub[b-6i4rvu5e7x] { font-size: 12.5px; color: var(--header-muted); }

.celebrate__bar[b-6i4rvu5e7x] {
    position: absolute;
    top: 32%;
    left: 0;
    display: block;
    background: var(--lime);
    transform: skewX(-12deg);
    opacity: 0;
    animation: celebrate-fly-b-6i4rvu5e7x 1.35s cubic-bezier(0.35, 0.05, 0.35, 1) forwards;
}
.celebrate__bar--0[b-6i4rvu5e7x] { width: 18px; height: 48px; animation-delay: 0.08s; }
.celebrate__bar--1[b-6i4rvu5e7x] { width: 16px; height: 42px; background: var(--brand); animation-delay: 0.16s; }
.celebrate__bar--2[b-6i4rvu5e7x] { width: 14px; height: 36px; background: var(--navy); animation-delay: 0.23s; }
.celebrate__bar--3[b-6i4rvu5e7x] { width: 12px; height: 30px; background: var(--steel-decor); animation-delay: 0.31s; }
.celebrate__bar--4[b-6i4rvu5e7x] { width: 10px; height: 24px; animation-delay: 0.38s; }
.celebrate__bar--5[b-6i4rvu5e7x] { width: 6px; height: 18px; background: var(--brand); animation-delay: 0.46s; }

@keyframes celebrate-pop-b-6i4rvu5e7x {
    0% { opacity: 0; transform: translate(-50%, -42%) scale(0.8); }
    10% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
    17% { transform: translate(-50%, -50%) scale(1); }
    80% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -56%) scale(0.97); }
}

@keyframes celebrate-check-b-6i4rvu5e7x { to { stroke-dashoffset: 0; } }

@keyframes celebrate-fly-b-6i4rvu5e7x {
    0% { transform: translate(-18vw, 6vh) rotate(-10deg) skewX(-12deg); opacity: 0; }
    8% { opacity: 1; }
    48% { transform: translate(48vw, -5vh) rotate(3deg) skewX(-12deg); }
    92% { opacity: 1; }
    100% { transform: translate(116vw, 1vh) rotate(12deg) skewX(-12deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .celebrate__bar[b-6i4rvu5e7x] { display: none; }
    .celebrate__card[b-6i4rvu5e7x] { animation: celebrate-still-b-6i4rvu5e7x 2s linear forwards; }
    .celebrate__tick[b-6i4rvu5e7x] { animation: none; stroke-dashoffset: 0; }
    @keyframes celebrate-still-b-6i4rvu5e7x { 0%, 90% { opacity: 1; } 100% { opacity: 0; } }
}

/* S35b: an Asana write failure surfaces as a banner instead of crashing the circuit. */
.action-error[b-6i4rvu5e7x] {
    margin: 16px 32px 0;
    padding: 10px 14px;
    background: color-mix(in srgb, #b32121 8%, var(--surface));
    border-left: 3px solid #b32121;
    border-radius: 0 var(--radius) var(--radius) 0;
    color: var(--ink);
    font-size: 13.5px;
}

/* --- Responsive: stack below the rail breakpoint (the rail's own rules are in
       RequestSidebar.razor.css) --- */
@media (max-width: 980px) {
    .detail-body[b-6i4rvu5e7x] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* A wrapped title and expanded composer can consume a short single-column viewport.
   Let the title scroll away so warnings and content remain readable above the dock. */
@media (max-width: 980px) and (max-height: 700px) {
    .detail-head[b-6i4rvu5e7x] {
        position: static;
    }
}
/* /Components/Pages/RequestLanding.razor.rz.scp.css */
.landing-unavailable[b-tx5yp8gz9k] {
    width: min(100%, 42rem);
    padding: 32px;
    background: var(--surface);
    border: 1px solid var(--hairline);
}

.landing-unavailable h1[b-tx5yp8gz9k] {
    margin: 0;
    color: var(--navy);
}

.landing-unavailable p[b-tx5yp8gz9k] {
    margin: 8px 0 0;
    color: var(--muted);
}

/* /Components/Pages/Settings.razor.rz.scp.css */
.settings[b-m7d1xbl7fi] { max-width: 760px; }

.settings__eyebrow[b-m7d1xbl7fi] { margin: 0 0 8px; }

.settings__card[b-m7d1xbl7fi] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
    padding: 22px 24px;
    background: var(--surface);
    border: 1px solid var(--hairline);
}

.settings__note[b-m7d1xbl7fi] { margin: 0; font-size: 13px; color: var(--muted); }

.settings__actions[b-m7d1xbl7fi] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.settings__error[b-m7d1xbl7fi] {
    flex: 1 1 16rem;
    margin: 0;
    font-size: 13px;
    color: var(--amber-text);
}
/* /Components/Pages/SignIn.razor.rz.scp.css */
.portal-card[b-ushshpwzmf] {
    flex: 1 1 0;
    min-height: 0;
    min-width: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 32px;
    background: var(--surface);
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-padding-block-end: calc(160px + env(safe-area-inset-bottom));
}
/* The fields line up with the full-width action below them; prose keeps its own reading width. */
.portal-card > form[b-ushshpwzmf] { display: flex; flex-direction: column; flex: 1 0 auto; gap: 18px; }
.portal-card > p[b-ushshpwzmf] { max-width: 56ch; margin-block: 18px; }
.portal-card h1[b-ushshpwzmf] { max-width: 24ch; }

.portal-card h1[b-ushshpwzmf] { margin: 0; color: var(--navy); font-size: 28px; line-height: 1.15; }.portal-card p[b-ushshpwzmf] { margin: 0; color: var(--muted); line-height: 1.45; }
/* Which of the two steps this is — the flow is short, so say so instead of implying it. */
.portal-card__step[b-ushshpwzmf] { margin-bottom: 8px !important; color: var(--faint) !important; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.portal-card label[b-ushshpwzmf] { display: grid; gap: 6px; color: var(--navy); font-size: 13px; font-weight: 700; }.portal-card input[b-ushshpwzmf] { min-height: 52px; padding: 12px 14px; border: 1px solid var(--hairline-strong); font: inherit; font-size: 16px; }
.portal-card__code[b-ushshpwzmf] { letter-spacing: .32em; font-size: 20px; }.portal-card__error[b-ushshpwzmf] { color: var(--red-text) !important; }.portal-card__message[b-ushshpwzmf] { color: var(--teal) !important; }.portal-card__hint[b-ushshpwzmf] { font-size: 13px; }

/* Size from the actual form column, including its responsive width and scrollbar.
   Normal flow keeps the action below the fields on short screens and at the bottom
   when there is space, without a viewport-width assumption or covering inputs. */
.portal-card__actions[b-ushshpwzmf] { display: flex; width: 100%; margin-top: auto; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 10px; padding-top: 18px; background: var(--surface); }
.portal-card__actions .btn--cta[b-ushshpwzmf] { flex: 1 0 100%; min-height: 52px; font-size: 16px; font-weight: 600; }
.portal-card input[b-ushshpwzmf] { scroll-margin-bottom: calc(88px + env(safe-area-inset-bottom)); }

@media (max-width: 860px) {
    .portal-card[b-ushshpwzmf] { padding: 24px 20px max(20px, env(safe-area-inset-bottom)); scroll-padding-block-end: 20px; }
    .portal-card__actions .btn--cta[b-ushshpwzmf] { flex: 1 0 100%; }
}

.portal-card > p[b-ushshpwzmf] { margin-block: 18px; }

.portal-card[b-ushshpwzmf]  .portal-spinner { margin-block: 18px; }
/* /Components/Shared/ActivityTimeline.razor.rz.scp.css */
/* Activity timeline (the "What's happened" rail). Moved here with the markup when the timeline
   came out of RequestDetailPage — scoped CSS only applies to the component that renders it. */

.timeline[b-meyjt30udr] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.timeline__item[b-meyjt30udr] {
    display: flex;
    gap: 14px;
    padding-bottom: 18px;
}

.timeline__item:last-child[b-meyjt30udr] { padding-bottom: 0; }

.timeline__rail[b-meyjt30udr] {
    position: relative;
    display: flex;
    justify-content: center;
    width: 10px;
    flex-shrink: 0;
}

/* connecting rule down the rail */
.timeline__item:not(:last-child) .timeline__rail[b-meyjt30udr]::after {
    content: "";
    position: absolute;
    top: 14px;
    bottom: -18px;
    left: 50%;
    width: 1px;
    background: var(--hairline);
    transform: translateX(-50%);
}

.timeline__dot[b-meyjt30udr] {
    position: relative;
    z-index: 1;
    width: 9px;
    height: 9px;
    margin-top: 4px;
    border-radius: 50%;
    background: var(--steel);
}

.timeline__dot--grey[b-meyjt30udr] { background: var(--slate); }
.timeline__dot--blue[b-meyjt30udr] { background: var(--steel); }
.timeline__dot--green[b-meyjt30udr] { background: var(--delivered); }
.timeline__dot--danger[b-meyjt30udr] { background: var(--amber); }
.timeline__dot--hollow[b-meyjt30udr] {
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--hairline-strong);
}

.timeline__body[b-meyjt30udr] { min-width: 0; }

.timeline__title[b-meyjt30udr] {
    font-size: 14px;
    color: var(--ink);
    line-height: 1.4;
}

.timeline__time[b-meyjt30udr] {
    font-size: 12px;
    color: var(--faint);
    margin-top: 2px;
}

.timeline__item--gap .timeline__body[b-meyjt30udr] { padding-top: 1px; }

/* The <section class="detail-block"> wrapper this component renders is styled by the shared
   .detail-block rules in mrt.css — three components render that section, so the chrome can't
   live in any one scoped stylesheet. */
/* /Components/Shared/AttachmentCard.razor.rz.scp.css */
.attachment-card[b-v6ujbohv8e] { width: 310px; max-width: 100%; min-width: 0; box-sizing: border-box; padding: 12px; border: 1px solid var(--hairline); background: var(--surface); }
.attachment-card__link[b-v6ujbohv8e] { display: flex; align-items: flex-start; gap: 12px; color: var(--ink); text-decoration: none; min-width: 0; }
.attachment-card__link:hover .file-row__name[b-v6ujbohv8e] { text-decoration: underline; text-underline-offset: 3px; }
.attachment-card__tile[b-v6ujbohv8e] { display: flex; align-items: center; justify-content: center; flex: 0 0 56px; width: 56px; height: 68px; background: var(--surface-2); color: var(--faint); }
.attachment-card__tile[b-v6ujbohv8e]  .file-ico { width: 28px; height: 28px; }
.attachment-card__thumb[b-v6ujbohv8e] { display: block; width: 100%; height: 100%; object-fit: contain; }
.attachment-card__text[b-v6ujbohv8e] { display: flex; flex: 1; flex-direction: column; gap: 5px; min-width: 0; }
.file-row__name[b-v6ujbohv8e] { color: var(--ink); font-size: 14px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.file-row__meta[b-v6ujbohv8e], .file-row__date[b-v6ujbohv8e] { font-size: 12px; line-height: 1.4; color: var(--muted); overflow-wrap: anywhere; }
.file-row__actions[b-v6ujbohv8e] { display: flex; flex-wrap: wrap; column-gap: 16px; margin-left: 68px; margin-top: 3px; }
.file-row__actions a[b-v6ujbohv8e], .file-row__actions button[b-v6ujbohv8e] { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 0; color: var(--brand); font: inherit; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.file-row__actions button[b-v6ujbohv8e] { border: 0; background: transparent; cursor: pointer; }
.attachment-card__link:focus-visible[b-v6ujbohv8e], .file-row__actions a:focus-visible[b-v6ujbohv8e], .file-row__actions button:focus-visible[b-v6ujbohv8e] { outline: 2px solid var(--brand); outline-offset: 3px; }
@media (max-width: 440px) {
    .attachment-card[b-v6ujbohv8e] { padding: 10px; }
    .attachment-card__tile[b-v6ujbohv8e] { flex-basis: 42px; width: 42px; height: 56px; }
    .file-row__actions[b-v6ujbohv8e] { margin-left: 54px; }
}
@media (pointer: coarse) { .file-row__actions a[b-v6ujbohv8e], .file-row__actions button[b-v6ujbohv8e] { min-height: 44px; } }
/* /Components/Shared/AttachmentPreview.razor.rz.scp.css */
.file-preview[b-cbqmm7dyis] { width: min(1000px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); margin: auto; padding: 0; border: 0; border-radius: 0; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-pop); }
.file-preview[b-cbqmm7dyis]::backdrop { background: var(--backdrop); backdrop-filter: blur(3px); }
.file-preview__head[b-cbqmm7dyis], .file-preview__foot[b-cbqmm7dyis] { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 16px 20px; }
.file-preview__head[b-cbqmm7dyis] { border-bottom: 1px solid var(--hairline); }
.file-preview__head h2[b-cbqmm7dyis] { margin: 0; font-size: 17px; overflow-wrap: anywhere; flex: 1; min-width: 0; }
.file-preview__head button[b-cbqmm7dyis] { min-height: 36px; border: 1px solid var(--hairline); padding: 6px 12px; background: var(--surface); color: var(--ink); cursor: pointer; font: inherit; }
.file-preview__head button:focus-visible[b-cbqmm7dyis], .file-preview__foot a:focus-visible[b-cbqmm7dyis] { outline: 2px solid var(--brand); outline-offset: 3px; }
.file-preview__body[b-cbqmm7dyis] { min-height: 120px; padding: 12px 20px; text-align: center; }
.file-preview__body img[b-cbqmm7dyis] { max-width: 100%; max-height: 65dvh; object-fit: contain; }
.file-preview__body iframe[b-cbqmm7dyis] { width: 100%; height: 65dvh; border: 0; background: var(--surface-2); }
.file-preview__body [hidden][b-cbqmm7dyis] { display: none; }
.file-preview__foot[b-cbqmm7dyis] { border-top: 1px solid var(--hairline); color: var(--muted); font-size: 12px; }
.file-preview__foot a[b-cbqmm7dyis] { color: var(--brand); padding: 8px; font-size: 14px; }

/* /Components/Shared/AttentionBand.razor.rz.scp.css */
/* Attention band (Ready-for-review teal / Needs-input lime). Moved here with the markup when
   the band came out of RequestDetailPage: Blazor scopes CSS to the component that RENDERS the
   element, so these rules only work living beside the band itself. The action area
   (.band-box*, .band__actions) is ChildContent — compiled into the PAGE's render tree — so
   those rules stay in RequestDetailPage.razor.css. */

/* Full bleed, like every other section on the detail page: the band carries the 40px page
   gutter itself so its tint and its 4px rule run to the window edge. */
.band[b-lnhbdamvr9] {
    margin: 0;
    padding: 22px 40px 24px;
}

.band--lime[b-lnhbdamvr9] {
    background: var(--lime-band);
    border-left: 4px solid var(--lime);
}

.band--teal[b-lnhbdamvr9] {
    background: var(--brand-soft);
    border-left: 4px solid var(--brand);
}

/* Archived (the backing Asana task was removed) — quiet, not alarming. */
.band--steel[b-lnhbdamvr9] {
    background: var(--steel-soft);
    border-left: 4px solid var(--steel-decor);
}

.band--steel .band__eyebrow[b-lnhbdamvr9] { color: var(--steel); }

/* Who asked, when, and which sub task it's about — shown only for a real message. */
.band-asker[b-lnhbdamvr9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font-size: 13px;
    color: var(--muted);
}

.band-asker__name[b-lnhbdamvr9] { font-weight: 600; color: var(--ink); }

.band-asker__when[b-lnhbdamvr9] { color: var(--faint); }

.band-asker__topic[b-lnhbdamvr9] {
    background: var(--surface);
    border: 1px solid var(--hairline-strong);
    color: var(--steel);
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 600;
    padding: 2px 8px;
    cursor: pointer;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    text-align: left;
}

.band-asker__topic:hover[b-lnhbdamvr9] { border-color: var(--steel); }

/* "They're writing up the details" — the flip landed before its comment; three quiet
   pulsing dots signal "in motion" (static under reduced motion). */
.band-pending[b-lnhbdamvr9] {
    display: flex;
    align-items: baseline;
    gap: 5px;
    margin: 10px 0 0;
    font-size: 13px;
    color: var(--muted);
}

.band-pending__dots[b-lnhbdamvr9] { display: inline-flex; gap: 3px; }

.band-pending__dots i[b-lnhbdamvr9] {
    width: 4px;
    height: 4px;
    background: var(--steel-decor);
    animation: band-pending-pulse-b-lnhbdamvr9 1.4s ease-in-out infinite;
}

.band-pending__dots i:nth-child(2)[b-lnhbdamvr9] { animation-delay: 0.2s; }
.band-pending__dots i:nth-child(3)[b-lnhbdamvr9] { animation-delay: 0.4s; }

@keyframes band-pending-pulse-b-lnhbdamvr9 {
    0%, 100% { opacity: 0.25; }
    40% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .band-pending__dots i[b-lnhbdamvr9] { animation: none; opacity: 0.7; }
}

/* "Their last message" — an older message shown as labeled CONTEXT under the fallback
   line (silent card move), quoted on a surface card so it never reads as the ask. */
.band-context[b-lnhbdamvr9] {
    margin-top: 14px;
    max-width: 68ch;
    background: var(--surface);
    border: 1px solid var(--hairline-strong);
    border-left: 3px solid var(--hairline-strong);
    padding: 10px 14px 12px;
}

.band-context__label[b-lnhbdamvr9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 12px;
    color: var(--faint);
    font-weight: 600;
}

.band-context__name[b-lnhbdamvr9] { color: var(--muted); }

.band-context__body[b-lnhbdamvr9] {
    margin: 7px 0 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink);
}

/* ::deep — the avatar disc + img are rendered by the Avatar child component. */
[b-lnhbdamvr9] .band-asker .avatar-disc,
[b-lnhbdamvr9] .band-context__label .avatar-disc { position: relative; }

[b-lnhbdamvr9] .band-asker__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.band__eyebrow[b-lnhbdamvr9] {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0;
}

.band--lime .band__eyebrow[b-lnhbdamvr9] { color: var(--navy); }
.band--teal .band__eyebrow[b-lnhbdamvr9] { color: var(--brand-text); }

.band__question[b-lnhbdamvr9] {
    font-size: 19px;
    font-weight: 400;
    line-height: 1.4;
    margin: 9px 0 0;
    max-width: 60ch;
    text-wrap: pretty;
    color: var(--ink);
}

/* Draft previews in the approval band (S24): browser-scaled thumbnails, click = full view. */
.band-files[b-lnhbdamvr9] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.band-files__thumb[b-lnhbdamvr9] {
    display: block;
    border: 1px solid var(--hairline-strong);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 3px;
}

.band-files__thumb img[b-lnhbdamvr9] {
    display: block;
    max-height: 120px;
    max-width: 220px;
    object-fit: contain;
}

.band-files__chip[b-lnhbdamvr9] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--surface);
    border: 1px solid var(--hairline-strong);
    border-radius: var(--radius);
    color: var(--brand-text);
    font-size: 13px;
    text-decoration: none;
}

.band-files__chip:hover[b-lnhbdamvr9] { text-decoration: underline; }

/* ::deep — the glyph is rendered by FileTypeIcon, a CHILD component, so it never carries this
   component's scope attribute. (The pre-split rule silently did nothing for the same reason.) */
.band-files__chip[b-lnhbdamvr9]  .file-ico { margin-left: 5px; }
/* /Components/Shared/ConversationThread.razor.rz.scp.css */
/* Conversation thread — messages, mention chips, per-comment files, reaction chips, the "New"
   marker. Moved here with the markup when the thread came out of RequestDetailPage: Blazor
   scopes CSS to the component that RENDERS the element, so these only work beside the thread.
   Rules reaching into Avatar / FileTypeIcon (child components) need ::deep. */

.thread-fold[b-982k273z93] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 4px 0 14px;
}

.thread-fold__rule[b-982k273z93] {
    flex: 1;
    height: 1px;
    background: var(--hairline);
}

.thread-fold__btn[b-982k273z93] {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-size: 12px;
    letter-spacing: 0.02em;
    color: var(--brand-text);
    cursor: pointer;
}

.thread-fold__btn:hover[b-982k273z93] { text-decoration: underline; }

/* Comment layout: avatar rail left, content column (name / body / foot) indented beside it —
   the body aligns under the author's name, not under the avatar. */
.thread-msg[b-982k273z93] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 0;
    border-top: 1px solid var(--list-hairline);
}

.thread-msg:first-child[b-982k273z93] { border-top: none; }

/* S30: a change request nests under the review comment it answers — indented past the
   parent's avatar with a connector rail, no top hairline, so it reads as one exchange. */
.thread-msg.thread-msg--reply[b-982k273z93] {
    margin-left: 36px;
    padding: 4px 0 12px 12px;
    border-top: none;
    border-left: 2px solid var(--list-hairline);
}

.thread-msg__content[b-982k273z93] {
    min-width: 0;
    flex: 1;
}

/* Avatars are circular (matches the dashboard's owner avatars — softer than squares).
   ::deep: the element is rendered by the Avatar component, not by this one. */
[b-982k273z93] .thread-avatar {
    position: relative;
    overflow: hidden;
    width: 26px;
    height: 26px;
    margin-top: 1px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--brand);
    color: var(--brand-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 500;
}

[b-982k273z93] .thread-avatar__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.thread-msg__author[b-982k273z93] {
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* "re: {sub task}" — the per-item topic chip (LOGIC-17). */
.thread-topic[b-982k273z93] {
    background: var(--bg);
    border: 1px solid var(--hairline);
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}
.thread-topic:hover[b-982k273z93] { border-color: var(--steel); color: var(--steel); }

.thread-msg__body[b-982k273z93] {
    font-size: 14px;
    color: var(--ink);
    line-height: 1.45;
    white-space: pre-wrap;
}

/* @-mention pill: teal tint, tiny circular avatar, a little air on both sides so it never
   glues to the surrounding words. Rendered inline here, so no ::deep needed. */
.mention[b-982k273z93] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0 3px;
    padding: 1px 8px 1px 2px;
    border-radius: var(--radius-pill);
    background: var(--brand-soft);
    color: var(--brand-text);
    font-weight: 500;
    white-space: nowrap;
}

.mention__avatar[b-982k273z93] {
    position: relative;
    overflow: hidden;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--brand);
    color: var(--brand-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    font-weight: 500;
}

.mention__img[b-982k273z93] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* Files that arrived WITH a comment (matched by time proximity — Asana has no hard link). */
.thread-files[b-982k273z93] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

/* Emoji reactions synced from Asana, attached to the comment they were left on. */
.thread-msg__reactions[b-982k273z93] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.reaction-chip[b-982k273z93] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 9px;
    border-radius: 999px;
    background: var(--surface-2);
    border: 1px solid var(--hairline);
    font: inherit;
    font-size: 12.5px;
    color: inherit;
    cursor: pointer;
}

.reaction-chip:hover[b-982k273z93] { border-color: var(--brand); }

/* S33: your own portal reaction — click any chip to join/leave it. */
.reaction-chip--mine[b-982k273z93] {
    background: var(--brand-soft);
    border-color: var(--brand);
}

.reaction-chip__count[b-982k273z93] {
    font-size: 11.5px;
    color: var(--muted);
    font-weight: 500;
}

/* Smiley in the message footer opens the quick-pick row. */
.reaction-add[b-982k273z93] {
    display: inline-flex;
    align-items: center;
    background: none;
    border: none;
    padding: 1px 2px;
    color: var(--faint);
    cursor: pointer;
}

.reaction-add:hover[b-982k273z93] { color: var(--brand-text); }

.reaction-pick[b-982k273z93] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 4px;
    background: var(--surface);
    border: 1px solid var(--hairline-strong);
    border-radius: 999px;
}

.reaction-pick__item[b-982k273z93] {
    background: none;
    border: none;
    padding: 2px 5px;
    font-size: 15px;
    line-height: 1;
    border-radius: 999px;
    cursor: pointer;
}

.reaction-pick__item:hover[b-982k273z93] { background: var(--brand-soft); }

.thread-msg__foot[b-982k273z93] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--faint);
    margin-top: 4px;
}

.thread-tag[b-982k273z93] {
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--muted);
}

/* Sticky "new since your last visit" marker on inbound marketing messages — teal band matching
   .band--teal, so a fresh reply still stands out after the arrival pulse fades and the reader
   scrolls. Clears itself on the next visit via LastViewedAt. */
.thread-msg--new[b-982k273z93] {
    background: var(--brand-soft);
    border-left: 3px solid var(--brand);
    border-top: none;
    padding-left: 14px;
    padding-right: 14px;
}

.thread-tag--new[b-982k273z93] {
    background: var(--brand);
    color: var(--brand-ink);
}
/* /Components/Shared/DirectSupport.razor.rz.scp.css */
.direct-support[b-sde0munoos] { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--hairline-strong); }
.support-eyebrow[b-sde0munoos] { display: block; font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--brand); }
.direct-support h3[b-sde0munoos] { margin: 8px 0 10px; font: 700 22px/1.2 var(--font-display); color: var(--navy); }
.direct-support p[b-sde0munoos] { margin: 0 0 16px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.support-trigger[b-sde0munoos] { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; width: 100%; padding: 12px 14px; font: 600 14px/1.3 var(--font-sans); color: var(--navy); background: var(--surface); border: 1px solid var(--hairline-strong); cursor: pointer; }
.support-trigger:hover[b-sde0munoos] { background: var(--brand-soft); border-color: var(--brand); }
.support-trigger span[b-sde0munoos], .support-compose span[b-sde0munoos] { font-size: 21px; }
.support-trigger:focus-visible[b-sde0munoos], .support-compose:focus-visible[b-sde0munoos] { outline: 3px solid var(--brand); outline-offset: 3px; }
.support-dialog[b-sde0munoos] { position: fixed; inset: 0; width: min(590px, calc(100vw - 32px)); max-width: none; margin: auto; max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: 0; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-pop); overflow-y: auto; scroll-padding-block: 8px; overscroll-behavior: contain; }
.support-dialog[b-sde0munoos]::backdrop { background: var(--backdrop); backdrop-filter: blur(4px); }
.support-heading[b-sde0munoos] { display: flex; align-items: flex-start; gap: 24px; justify-content: space-between; padding: 28px 30px; background: var(--navy); }
.support-heading .support-eyebrow[b-sde0munoos] { color: var(--header-muted); }
.support-heading h2[b-sde0munoos] { margin: 9px 0 0; font: 700 30px/1.15 var(--font-display); color: var(--header-ink); }
.support-close[b-sde0munoos] { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--header-muted); background: transparent; color: var(--header-ink); font-size: 28px; cursor: pointer; }
.support-close:focus-visible[b-sde0munoos] { outline: 3px solid var(--lime); outline-offset: 3px; }
.support-body[b-sde0munoos] { padding: 28px 30px; }
.support-body > p:first-child[b-sde0munoos] { margin: 0 0 22px; font-size: 16px; line-height: 1.6; }
.support-context[b-sde0munoos] { margin: 0 0 24px; padding: 16px 18px; background: var(--panel); border-left: 2px solid var(--brand); }
.support-context dt[b-sde0munoos], .support-email > span[b-sde0munoos] { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.support-context dd[b-sde0munoos] { margin: 0; color: var(--navy); font-weight: 600; }
.support-context dd span[b-sde0munoos] { display: block; font-size: 14px; color: var(--muted); font-weight: 400; margin-top: 4px; }
.support-email strong[b-sde0munoos] { display: block; color: var(--navy); font-size: 18px; overflow-wrap: anywhere; }
.support-demo[b-sde0munoos] { margin: 12px 0 20px; font-size: 12px; line-height: 1.5; color: var(--muted); }
.support-compose[b-sde0munoos] { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: fit-content; min-height: 46px; margin-top: 20px; padding: 12px 18px; font-size: 14px; font-weight: 600; color: var(--header-ink); background: var(--navy); text-decoration: none; }
.support-compose:hover[b-sde0munoos] { background: var(--brand); color: var(--header-ink); }
.support-note[b-sde0munoos] { margin: 16px 0 0; font-size: 12px; line-height: 1.6; color: var(--muted); }
@media (max-width: 520px) {
    .support-heading[b-sde0munoos], .support-body[b-sde0munoos] { padding: 22px; }
    .support-heading h2[b-sde0munoos] { font-size: 26px; }
    .direct-support[b-sde0munoos] { margin-top: 20px; padding-top: 18px; }
}

.support-field-label[b-sde0munoos] { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 600; }
.support-message[b-sde0munoos] { width: 100%; padding: 12px; border: 1px solid var(--hairline-strong); background: var(--surface); color: var(--ink); font: 14px/1.5 var(--font-sans); resize: vertical; }
.support-message:focus-visible[b-sde0munoos] { outline: 2px solid var(--brand); outline-offset: 2px; }
button.support-compose[b-sde0munoos] { border: 0; cursor: pointer; font-family: var(--font-sans); }
button.support-compose:disabled[b-sde0munoos] { opacity: .65; cursor: wait; }
.support-error[b-sde0munoos] { color: var(--red); font-size: 14px; }
.support-result[b-sde0munoos] { padding: 20px; background: var(--brand-soft); }
.support-result h3[b-sde0munoos] { margin: 0 0 12px; color: var(--navy); }
.support-result p[b-sde0munoos] { font-size: 14px; line-height: 1.5; }
.support-result strong[b-sde0munoos] { overflow-wrap: anywhere; font-size: 12px; }
.support-input[b-sde0munoos] { width: 100%; min-height: 44px; padding: 12px; border: 1px solid var(--hairline-strong); background: var(--surface); color: var(--ink); font: 16px/1.5 var(--font-sans); }
.support-input:focus-visible[b-sde0munoos] { outline: 2px solid var(--brand); outline-offset: 2px; }
.support-code-label[b-sde0munoos] { margin-top: 18px; }
.support-code[b-sde0munoos] { letter-spacing: .25em; }
.support-back[b-sde0munoos] { display: inline-block; margin: 16px 16px 0 0; padding: 8px 0; background: transparent; border: 0; color: var(--brand); font: 600 14px/1.4 var(--font-sans); text-decoration: underline; cursor: pointer; }
.support-back:disabled[b-sde0munoos] { color: var(--muted); cursor: default; }
.support-back:focus-visible[b-sde0munoos] { outline: 2px solid var(--brand); outline-offset: 2px; }
/* /Components/Shared/FilterPopover.razor.rz.scp.css */
/* Dashboard stage/date filter — trigger, scrim and popover. Moved here with the markup when
   the filter came out of Dashboard: scoped CSS follows the component that renders the element. */

.filter[b-vw9h2jfbm6] {
    position: relative;
}

/* Click-catch behind the open dropdown: an outside click (or Esc, handled in code) closes it.
   Sits above the page but below .filter-pop (z-index 20). */
.filter-scrim[b-vw9h2jfbm6] {
    position: fixed;
    inset: 0;
    z-index: 15;
}

.filter__btn[b-vw9h2jfbm6] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--surface);
    border: 1px solid var(--hairline-strong);
    color: var(--ink);
    font: inherit;
    font-size: 13.5px;
    border-radius: var(--radius);
    padding: 9px 12px;
    cursor: pointer;
    transition: background .12s;
}

.filter__btn:hover[b-vw9h2jfbm6] {
    background: var(--surface-2);
}

/* Filters applied: the trigger takes the brand outline and ink so the narrowed queue always has
   a visible cause (the lime dot repeats it non-chromatically). */
.filter__btn.is-active[b-vw9h2jfbm6] {
    border-color: var(--brand);
    color: var(--brand-text);
}

.filter__glyph rect[b-vw9h2jfbm6] {
    fill: currentColor;
}

.filter__dot[b-vw9h2jfbm6] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--lime);
}

.filter-pop[b-vw9h2jfbm6] {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 20;
    width: 268px;
    background: var(--surface);
    border: 1px solid var(--hairline-strong);
    border-radius: var(--radius);
    box-shadow: var(--shadow-pop);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.filter-pop__field[b-vw9h2jfbm6] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.filter-pop__field .persona-select[b-vw9h2jfbm6] {
    width: 100%;
}

.filter-pop__actions[b-vw9h2jfbm6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid var(--hairline);
    padding-top: 14px;
}
/* /Components/Shared/IntakeHealth.razor.rz.scp.css */
.intake-table-wrap[b-lxt6gmqizh] { overflow-x: auto; margin: 1rem 0 2rem; }
table[b-lxt6gmqizh] { border-collapse: collapse; width: 100%; text-align: left; }
th[b-lxt6gmqizh], td[b-lxt6gmqizh] { padding: .8rem; border-bottom: 1px solid var(--border); vertical-align: top; }
thead th[b-lxt6gmqizh] { font-weight: 600; }
th[scope="row"][b-lxt6gmqizh] { min-width: 12rem; }
/* /Components/Shared/LeadTimeSettings.razor.rz.scp.css */
/* Admin lead-time editor (Build Spec section 4). Flat, square, hairline-ruled like the rest of
   the admin dashboard; an overridden row carries the lime tint so changes from the spec read at
   a glance. */
.lt[b-tyr4xclvst] { display: flex; flex-direction: column; gap: 18px; }

.lt__intro .page__sub[b-tyr4xclvst] { max-width: 78ch; margin-top: 6px; }

.lt__summary[b-tyr4xclvst] {
    margin: 0;
    font-size: 13.5px;
    color: var(--muted);
}

/* Horizontal scroll on narrow screens only; the 2px padding keeps cell focus rings inside the
   scroll box (a scroll container clips descendants' outlines — trap 2). */
.lt-group[b-tyr4xclvst] {
    position: relative; /* Keep absolute accessible labels inside this scroll container. */
    background: var(--surface);
    border: 1px solid var(--hairline);
    overflow-x: auto;
    padding: 2px;
}

.lt-group__h[b-tyr4xclvst] {
    margin: 0;
    padding: 14px 16px 10px;
    font-size: 15px;
    font-weight: 700;
    color: var(--navy);
}

/* Fixed layout with shared column widths, so every type's table lines up with the next. */
.lt-table[b-tyr4xclvst] {
    width: 100%;
    min-width: 860px;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 13.5px;
}

.lt-table th:nth-child(1)[b-tyr4xclvst] { width: 23%; }
.lt-table th:nth-child(2)[b-tyr4xclvst] { width: 14%; }
.lt-table th:nth-child(3)[b-tyr4xclvst] { width: 13%; }
.lt-table th:nth-child(4)[b-tyr4xclvst] { width: 21%; }
.lt-table th:nth-child(5)[b-tyr4xclvst] { width: 12%; }
.lt-table th:nth-child(6)[b-tyr4xclvst] { width: 17%; }

.lt-table thead th[b-tyr4xclvst] {
    padding: 8px 16px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--faint);
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
}

.lt-table td[b-tyr4xclvst],
.lt-table tbody th[b-tyr4xclvst] {
    padding: 10px 16px;
    vertical-align: middle;
    border-bottom: 1px solid var(--list-hairline);
    text-align: left;
}

.lt-table tbody tr:last-child td[b-tyr4xclvst],
.lt-table tbody tr:last-child th[b-tyr4xclvst] { border-bottom: none; }

.lt-row--over[b-tyr4xclvst] { background: var(--lime-tint); }

.lt-name[b-tyr4xclvst] { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }

.lt-chip[b-tyr4xclvst] {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--steel);
    background: var(--steel-soft);
}

.lt-who[b-tyr4xclvst] {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    font-weight: 400;
    color: var(--lime-text);
}

.lt-default[b-tyr4xclvst] { color: var(--muted); white-space: normal; }

.lt-usage[b-tyr4xclvst] { color: var(--muted); font-size: 12.5px; }

.lt-days[b-tyr4xclvst] {
    display: inline-flex;
    flex-wrap: wrap;
    max-width: 100%;
    align-items: center;
    gap: 6px;
    color: var(--muted);
}

.lt-days input[b-tyr4xclvst] {
    width: 72px;
    min-width: 0;
    max-width: 100%;
    height: 36px;
    padding: 6px 8px;
    font: inherit;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--hairline-strong);
    border-radius: var(--radius);
}

.lt-table select[b-tyr4xclvst] {
    min-width: 0;
    max-width: 100%;
    height: 36px;
    padding: 6px 8px;
    font: inherit;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--hairline-strong);
    border-radius: var(--radius);
}

.lt-days input:focus-visible[b-tyr4xclvst],
.lt-table select:focus-visible[b-tyr4xclvst] {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
}

.lt-actions[b-tyr4xclvst] {
    white-space: normal;
    text-align: right;
}

/* Translated actions stay inside their cell without clipping text or focus outlines. */
.lt-actions button[b-tyr4xclvst] {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}

.lt-actions .btn[b-tyr4xclvst] { margin: 0 0 8px; }

.lt-confirmation[b-tyr4xclvst] {
    font-size: 12.5px;
    color: var(--lime-text);
    white-space: normal;
    overflow-wrap: anywhere;
}

.lt-confirmation:not(:empty)[b-tyr4xclvst] { margin-top: 8px; }
.lt-confirmation strong[b-tyr4xclvst],
.lt-confirmation span[b-tyr4xclvst] { display: block; }

.lt-error[b-tyr4xclvst] {
    display: block;
    margin-bottom: 6px;
    font-size: 12.5px;
    color: var(--amber-text);
    white-space: normal;
}
/* /Components/Shared/LinkifiedText.razor.rz.scp.css */
/* S29: URLs in comments and band headings render as real links — shortened label, full URL
   in the tooltip. break-all keeps a long label from overflowing the column on mobile.
   Lives here because LinkifiedText renders the anchor, wherever it is used. */

.text-link[b-5h9aqfjzmz] {
    color: var(--brand-text);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 2px;
    word-break: break-all;
}

.text-link:hover[b-5h9aqfjzmz] { text-decoration-thickness: 2px; }
/* /Components/Shared/MessageComposer.razor.rz.scp.css */
/* Compose box + @-mention drop-up. Moved here with the markup when the composer came out of
   RequestDetailPage — scoped CSS follows the component that renders the element. */

/* A clean white box (textarea + footer share one 1px border), not a grey fill.

   Docked composer (2026-08-25): the box lives in the page's .compose-dock — the LAST child
   of .page, sticky at the viewport bottom for the whole document scroll (the dock, in
   RequestDetailPage.razor.css, owns position/gutters/fade; a sticky on THIS box inside the
   short dock would have no run to travel). At rest it is ONE line; focusing it adds
   .compose--open (Blazor) and the topic bar, the tall textarea and the footer unfold
   smoothly. It folds back only when focus leaves the whole box with nothing drafted (the
   JS focus watcher + FocusLeftAsync).

   NEVER put `overflow` on this box OR any part of it — not even for the fold animation.
   The @-mention picker below is a DROP-UP: it is positioned `bottom: 100%` of
   .compose__box, so it renders entirely OUTSIDE .compose and any ancestor clip erases it —
   silently, and before z-index is ever consulted (OverlayPaintingTests names the culprit).
   A clip would also swallow the Send button's focus ring. The folded rows therefore hide
   behind max-height + opacity + END-DELAYED visibility instead of a clip. */
.compose[b-n1p9blcpcr] {
    background: var(--surface);
    border: 1px solid var(--hairline-strong);
    border-radius: var(--radius);
    box-shadow: 0 -12px 28px -18px rgb(0 40 63 / 0.35);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Active (clicked into / typing): the kit's dark-teal selected border — the 1px ring
   doubles it to a clear 2px edge. Keyed to focus, not .compose--open, so a parked draft
   settles back to the quiet hairline when focus leaves. */
.compose:focus-within[b-n1p9blcpcr] {
    border-color: var(--brand);
    box-shadow: 0 0 0 1px var(--brand),
                0 -12px 28px -18px rgb(0 40 63 / 0.35);
}

.compose__box[b-n1p9blcpcr] { position: relative; }

/* "Talking about" topic bar — sits above the box on the section-2 ground. Folded shut
   (zero height, invisible, out of the tab order) until the composer opens. */
.compose__topic[b-n1p9blcpcr] {
    display: flex;
    align-items: center;
    gap: 10px;
    max-height: 0;
    padding: 0 14px;
    opacity: 0;
    visibility: hidden;
    border-bottom: 1px solid transparent;
    background: var(--bg);
    transition: max-height 0.28s cubic-bezier(0.33, 0, 0.2, 1),
                padding 0.28s cubic-bezier(0.33, 0, 0.2, 1),
                opacity 0.18s ease,
                border-color 0.28s ease,
                visibility 0s 0.28s;
}

.compose--open .compose__topic[b-n1p9blcpcr] {
    max-height: 48px;
    padding: 8px 14px;
    opacity: 1;
    visibility: visible;
    border-bottom-color: var(--list-hairline);
    transition: max-height 0.28s cubic-bezier(0.33, 0, 0.2, 1),
                padding 0.28s cubic-bezier(0.33, 0, 0.2, 1),
                opacity 0.22s ease 0.06s,
                border-color 0.28s ease,
                visibility 0s;
}

.compose__topic-label[b-n1p9blcpcr] {
    font-size: 12px;
    color: var(--muted);
    font-weight: 600;
    flex: 0 0 auto;
}

.compose__topic-select[b-n1p9blcpcr] {
    border: 1px solid var(--hairline-strong);
    background: var(--surface);
    font-family: inherit;
    font-size: 12.5px;
    color: var(--navy);
    padding: 4px 8px;
    cursor: pointer;
    min-width: 0;
    max-width: 320px;
}

/* One line at rest (12px padding + one 1.5 line ≈ 46px); the open height matches the old
   7rem box. Fixed heights so the transition has two ends; resize is off because a manual
   drag would pin an inline height and break the fold. */
.compose__input[b-n1p9blcpcr] {
    display: block;
    width: 100%;
    height: 46px;
    padding: 12px 16px;
    background: transparent;
    border: none;
    color: var(--ink);
    font: inherit;
    line-height: 1.5;
    resize: none;
    transition: height 0.28s cubic-bezier(0.33, 0, 0.2, 1);
}

.compose--open .compose__input[b-n1p9blcpcr] { height: 118px; }

.compose__input[b-n1p9blcpcr]::placeholder { color: var(--faint); }

/* Footer folds exactly like the topic bar — Send is unreachable (visibility) while shut. */
.compose__foot[b-n1p9blcpcr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    border-top: 1px solid transparent;
    padding-left: 16px;
    transition: max-height 0.28s cubic-bezier(0.33, 0, 0.2, 1),
                opacity 0.18s ease,
                border-color 0.28s ease,
                visibility 0s 0.28s;
}

.compose--open .compose__foot[b-n1p9blcpcr] {
    /* Wrapped hints set the height; this ceiling only keeps the fold animatable. */
    max-height: 12rem;
    opacity: 1;
    visibility: visible;
    border-top-color: var(--hairline);
    transition: max-height 0.28s cubic-bezier(0.33, 0, 0.2, 1),
                opacity 0.22s ease 0.06s,
                border-color 0.28s ease,
                visibility 0s;
}

.compose__hint[b-n1p9blcpcr] {
    font-size: 12px;
    color: var(--faint);
}

/* --- @-mention picker: drop-up above the compose textarea --------------------------------- */
.mention-pick[b-n1p9blcpcr] {
    position: absolute;
    left: 12px;
    bottom: 100%;
    margin-bottom: 6px;
    min-width: 260px;
    background: var(--surface);
    border: 1px solid var(--hairline-strong);
    border-radius: var(--radius);
    box-shadow: var(--shadow-pop);
    z-index: 20;
    padding: 4px;
}

.mention-pick__item[b-n1p9blcpcr] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 7px 10px;
    background: none;
    border: none;
    font: inherit;
    font-size: 13.5px;
    color: var(--ink);
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-align: left;
}

.mention-pick__item:hover[b-n1p9blcpcr],
.mention-pick__item.is-active[b-n1p9blcpcr] { background: var(--brand-soft); }

/* ::deep — the candidate avatar is rendered by the Avatar child component. */
[b-n1p9blcpcr] .mention-pick__avatar {
    position: relative;
    overflow: hidden;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--brand);
    color: var(--brand-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 500;
}

[b-n1p9blcpcr] .mention-pick__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.mention-pick[b-n1p9blcpcr] { max-width: calc(100% - 24px); min-width: min(260px, calc(100% - 24px)); }
.mention-pick__identity[b-n1p9blcpcr] { min-width: 0; overflow-wrap: anywhere; }
.mention-pick__item:disabled[b-n1p9blcpcr] { cursor: not-allowed; color: var(--muted); }
.compose__recipients[b-n1p9blcpcr], .compose__review[b-n1p9blcpcr] { padding: 8px 16px; margin: 0; font-size: 14px; color: var(--muted); }
.compose__recipients[b-n1p9blcpcr] { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.compose__recipient[b-n1p9blcpcr] { overflow-wrap: anywhere; }
.compose__review[b-n1p9blcpcr] { color: var(--ink); }
.compose__actions[b-n1p9blcpcr] { display: flex; align-items: center; gap: 8px; padding: 0 12px; }
.compose__history[b-n1p9blcpcr] { padding: 8px 4px; border: 0; background: transparent; color: var(--brand); font: inherit; font-size: 14px; cursor: pointer; }
.compose__history:disabled[b-n1p9blcpcr] { color: var(--muted); cursor: default; }
@media (max-width: 600px) { .compose__foot[b-n1p9blcpcr] { flex-wrap: wrap; } .compose__actions[b-n1p9blcpcr] { margin-left: auto; } }
/* /Components/Shared/NotificationChoice.razor.rz.scp.css */
.notify[b-682c4gz3ki] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: none;
    min-width: 0;
}

.notify__legend[b-682c4gz3ki] {
    margin: 0 0 6px;
    padding: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
}

.notify__opt[b-682c4gz3ki] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 14px;
    background: var(--surface);
    border: 1px solid var(--hairline-strong);
    border-radius: var(--radius);
    cursor: pointer;
}

.notify__opt:hover[b-682c4gz3ki] { background: var(--surface-2); }

.notify__opt--on[b-682c4gz3ki],
.notify__opt--on:hover[b-682c4gz3ki] {
    border-color: var(--brand);
    background: var(--brand-soft);
    box-shadow: inset 0 0 0 1px var(--brand);
}

.notify__opt input[b-682c4gz3ki] {
    width: 16px;
    height: 16px;
    margin: 2px 0 0;
    flex: 0 0 auto;
    accent-color: var(--brand);
}

.notify__text[b-682c4gz3ki] { display: flex; flex-direction: column; gap: 2px; }

.notify__title[b-682c4gz3ki] { font-size: 14px; font-weight: 600; color: var(--navy); }

.notify__detail[b-682c4gz3ki] { font-size: 13px; line-height: 1.45; color: var(--muted); }

.notify:disabled .notify__opt[b-682c4gz3ki] { cursor: default; opacity: .7; }
/* /Components/Shared/PortalHandoff.razor.rz.scp.css */
.portal-handoff[b-isry4th7s7] { max-width: 36rem; padding-top: 4px; }
.portal-handoff__check[b-isry4th7s7] { width: 32px; height: 32px; color: var(--brand); margin-bottom: 16px; }
.portal-handoff h1[b-isry4th7s7] { margin: 0; color: var(--navy); font-size: 26px; line-height: 1.25; }
.portal-handoff p[b-isry4th7s7] { margin: 18px 0 0; color: var(--muted); line-height: 1.45; }
.portal-handoff .portal-handoff__hint[b-isry4th7s7] { margin-top: 10px; font-size: 13px; }
/* /Components/Shared/PortalSpinner.razor.rz.scp.css */
.portal-spinner[b-crup8gil7t] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    color: var(--muted);
}

.portal-spinner__wheel[b-crup8gil7t] {
    flex: none;
    width: 20px;
    height: 20px;
    border: 3px solid var(--hairline-strong);
    border-top-color: var(--lime);
    border-radius: 50%;
    animation: portal-spin-b-crup8gil7t .8s linear infinite;
}

.portal-spinner--centered[b-crup8gil7t] {
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    min-height: 240px;
    padding: 32px 16px;
    text-align: center;
    color: var(--navy);
    font-weight: 600;
}

.portal-spinner--centered .portal-spinner__wheel[b-crup8gil7t] {
    width: 44px;
    height: 44px;
    border-width: 4px;
}

@keyframes portal-spin-b-crup8gil7t { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .portal-spinner__wheel[b-crup8gil7t] { animation-duration: 2.4s; } }
/* /Components/Shared/ReportingBreakdownCard.razor.rz.scp.css */
/* Breakdown card — square + flat table with on-time pills and decorative sparklines. */

.bd-card[b-c2zuovyqe3] {
    /* 62px sticky shell plus focus-ring clearance at both viewport edges. */
    --reporting-focus-clearance: 70px 8px;
    background: var(--surface);
    border: 1px solid var(--hairline);
}

.bd-card__head[b-c2zuovyqe3] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--list-hairline);
    flex-wrap: wrap;
    justify-content: space-between;
}

.bd-card__title[b-c2zuovyqe3] {
    font-size: 15px;
    font-weight: 700;
    color: var(--navy);
}

.bd-card__scroll[b-c2zuovyqe3] {
    overflow-x: auto;
}

.bd-table[b-c2zuovyqe3] {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    font-size: 13.5px;
}

.bd-table thead th[b-c2zuovyqe3] {
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--faint);
    padding: 10px 20px;
    border-bottom: 1px solid var(--list-hairline);
}

.bd-table tbody td[b-c2zuovyqe3] {
    padding: 13px 20px;
    border-bottom: 1px solid var(--list-hairline);
    color: var(--muted);
    vertical-align: middle;
}

.bd-table tbody tr:hover td[b-c2zuovyqe3] {
    background: var(--surface-2);
}

.bd-table th:nth-child(n+2)[b-c2zuovyqe3],
.bd-table td:nth-child(n+2)[b-c2zuovyqe3] {
    text-align: right;
}

.bd-table__name[b-c2zuovyqe3] {
    font-weight: 600;
    color: var(--navy);
}

.bd-table__num[b-c2zuovyqe3] {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.bd-table__trend svg[b-c2zuovyqe3] {
    display: inline-block;
    vertical-align: middle;
}

.bd-table__empty[b-c2zuovyqe3] {
    text-align: center;
    padding: 28px 20px;
}

.bd-spark[b-c2zuovyqe3] {
    stroke: var(--brand);
    stroke-width: 1.6;
    fill: none;
    stroke-linejoin: round;
}

.bd-pill[b-c2zuovyqe3] {
    display: inline-block;
    font-weight: 700;
    font-size: 12.5px;
    padding: 1px 7px;
    border: 1px solid transparent;
    font-variant-numeric: tabular-nums;
}

.bd-pill--good[b-c2zuovyqe3] {
    background: var(--lime-band);
    color: var(--lime-text);
    border-color: var(--lime-border);
}

.bd-pill--bad[b-c2zuovyqe3] {
    background: var(--red-soft);
    color: var(--red-text);
    border-color: var(--red-border);
}

.bd-card__foot[b-c2zuovyqe3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 20px;
    font-size: 12.5px;
    color: var(--faint);
    flex-wrap: wrap;
}

/* Native Tab/Shift+Tab scrolling must leave the complete focus outline visible. */
.bd-card[b-c2zuovyqe3]  .seg__btn,
.bd-card .link-button[b-c2zuovyqe3] {
    scroll-margin-block: var(--reporting-focus-clearance);
}
/* /Components/Shared/ReportingPipelineCard.razor.rz.scp.css */
/* Pipeline snapshot card — square + flat; steel bars, lime for requester-blocked stages. */

.pipe-card[b-q8xfsjmjpl] {
    background: var(--surface);
    border: 1px solid var(--hairline);
    padding: 16px 20px 20px;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pipe-card__title[b-q8xfsjmjpl] {
    font-size: 15px;
    font-weight: 700;
    color: var(--navy);
}

.pipe-card__sub[b-q8xfsjmjpl] {
    font-size: 12.5px;
    color: var(--faint);
    margin-top: 2px;
}

.pipe-card__rows[b-q8xfsjmjpl] {
    display: flex;
    flex-direction: column;
    gap: 13px;
    margin-top: 18px;
    flex: 1;
    justify-content: center;
}

.pipe-row__head[b-q8xfsjmjpl] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 13px;
}

.pipe-row__label[b-q8xfsjmjpl] {
    font-weight: 600;
    color: var(--ink);
}

.pipe-row__count[b-q8xfsjmjpl] {
    margin-left: auto;
    font-weight: 700;
    color: var(--navy);
}

.pipe-row__track[b-q8xfsjmjpl] {
    height: 8px;
    background: var(--surface-2);
    margin-top: 5px;
}

.pipe-row__bar[b-q8xfsjmjpl] {
    height: 8px;
    background: var(--steel-decor);
}

.pipe-row__bar--hot[b-q8xfsjmjpl] {
    background: var(--lime);
}

.pipe-card__note[b-q8xfsjmjpl] {
    border-top: 1px solid var(--list-hairline);
    margin-top: 16px;
    padding-top: 12px;
    font-size: 12.5px;
    color: var(--muted);
}
/* /Components/Shared/ReportingTrendChart.razor.rz.scp.css */
/* Trend chart card — square + flat; tokens only. The card must NOT clip (no overflow:hidden):
   the hover tooltip escapes upward on purpose (trap 2 / OverlayPaintingTests class). */

.chart-card[b-jaeeewkoe9] {
    /* 62px sticky shell plus focus-ring clearance at both viewport edges. */
    --reporting-focus-clearance: 70px 8px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.chart-card__head[b-jaeeewkoe9] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 20px 0;
    flex-wrap: wrap;
}

.chart-card__titles[b-jaeeewkoe9] {
    min-width: 0;
    margin-right: auto;
}

.chart-card__title[b-jaeeewkoe9] {
    font-size: 15px;
    font-weight: 700;
    color: var(--navy);
}

.chart-card__sub[b-jaeeewkoe9] {
    font-size: 12.5px;
    color: var(--faint);
    margin-top: 2px;
}

.chart-card__legend[b-jaeeewkoe9] {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 10px 20px 0;
    flex-wrap: wrap;
}

.legend[b-jaeeewkoe9] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    color: var(--muted);
    font-weight: 600;
}

.legend__line[b-jaeeewkoe9] {
    width: 14px;
    height: 3px;
    display: inline-block;
}

.legend__line--brand[b-jaeeewkoe9] { background: var(--brand); }
.legend__line--lime[b-jaeeewkoe9] { background: var(--lime); }

.legend__line--target[b-jaeeewkoe9] {
    height: 0;
    border-top: 2px dashed var(--placeholder);
    background: none;
}

.chart-card__empty[b-jaeeewkoe9] {
    padding: 40px 20px;
    color: var(--muted);
    font-size: 13.5px;
}

.chart-card__plot[b-jaeeewkoe9] {
    position: relative;
    padding: 8px 20px 0 20px;
    flex: 1;
}

.chart-card__plot svg[b-jaeeewkoe9] {
    display: block;
    width: 100%;
    height: 280px;
}

.grid-line[b-jaeeewkoe9] { stroke: var(--hairline); stroke-width: 1; }
.line--brand[b-jaeeewkoe9] { stroke: var(--brand); stroke-width: 2.2; fill: none; stroke-linejoin: round; }
.line--lime[b-jaeeewkoe9] { stroke: var(--lime); stroke-width: 2.2; fill: none; stroke-linejoin: round; }
.line--target[b-jaeeewkoe9] { stroke: var(--placeholder); stroke-width: 1.5; stroke-dasharray: 6 5; fill: none; }
.area--brand[b-jaeeewkoe9] { fill: var(--brand); fill-opacity: 0.07; }
.hover-line[b-jaeeewkoe9] { stroke: var(--hairline-strong); stroke-width: 1; }

/* y tick labels ride OVER the svg's left padding (HTML, so they don't stretch with
   preserveAspectRatio:none) */
.y-tick[b-jaeeewkoe9] {
    position: absolute;
    left: 22px;
    transform: translateY(-50%);
    font-size: 11px;
    color: var(--faint);
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

.chart-card__xlabels[b-jaeeewkoe9] {
    display: flex;
    justify-content: space-between;
    padding: 6px 20px 0 68px;
    font-size: 11.5px;
    color: var(--faint);
}

/* hover tooltip — floating layer: the ONE sanctioned shadow */
.chart-tip[b-jaeeewkoe9] {
    position: absolute;
    top: 18px;
    transform: translateX(10px);
    background: var(--navy);
    color: var(--bg);
    padding: 10px 14px;
    min-width: 150px;
    z-index: 5;
    pointer-events: none;
    box-shadow: var(--shadow-pop);
}

.chart-tip--left[b-jaeeewkoe9] { transform: translateX(calc(-100% - 10px)); }
.chart-tip--right[b-jaeeewkoe9] { transform: translateX(10px); }

.chart-tip__week[b-jaeeewkoe9] {
    font-size: 11px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--header-muted);
    font-weight: 700;
}

.chart-tip__row[b-jaeeewkoe9] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 5px;
    font-size: 12.5px;
}

.chart-tip__dot[b-jaeeewkoe9] {
    width: 8px;
    height: 8px;
    display: inline-block;
    flex: 0 0 auto;
}

.chart-tip__dot--brand[b-jaeeewkoe9] { background: var(--brand); }
.chart-tip__dot--lime[b-jaeeewkoe9] { background: var(--lime); }
.chart-tip__dot--target[b-jaeeewkoe9] { background: var(--placeholder); }

.chart-tip__label[b-jaeeewkoe9] { opacity: 0.85; }

.chart-tip__value[b-jaeeewkoe9] {
    margin-left: auto;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* keyboard / screen-reader alternative */
.chart-card__disclose[b-jaeeewkoe9] {
    align-self: flex-start;
    margin: 10px 20px 16px;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--brand-text);
    cursor: pointer;
}

.chart-card__disclose:hover[b-jaeeewkoe9] {
    text-decoration: underline;
}

.chart-card__scroll[b-jaeeewkoe9] {
    overflow-x: auto;
    margin: 0 20px 18px;
}

.chart-table[b-jaeeewkoe9] {
    width: 100%;
    min-width: 360px;
    border-collapse: collapse;
    font-size: 13px;
}

.chart-table thead th[b-jaeeewkoe9] {
    text-align: left;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--faint);
    padding: 0 12px 7px 0;
    border-bottom: 1px solid var(--hairline);
}

.chart-table tbody td[b-jaeeewkoe9] {
    padding: 7px 12px 7px 0;
    border-bottom: 1px solid var(--list-hairline);
    color: var(--muted);
}

.chart-table th:nth-child(n+2)[b-jaeeewkoe9],
.chart-table td:nth-child(n+2)[b-jaeeewkoe9] {
    text-align: right;
}

.chart-table__num[b-jaeeewkoe9] {
    font-variant-numeric: tabular-nums;
}

/* Native Tab/Shift+Tab scrolling must leave the complete focus outline visible. */
.chart-card[b-jaeeewkoe9]  .seg__btn,
.chart-card__disclose[b-jaeeewkoe9] {
    scroll-margin-block: var(--reporting-focus-clearance);
}
/* /Components/Shared/RequestAttachmentPicker.razor.rz.scp.css */
.attachment-dock-actions[b-c86agb22rt] { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding: 10px 14px; border: 1px solid var(--hairline); border-bottom: 0; background: var(--surface); color: var(--muted); font-size: 12px; }
.attachment-dock-picker[b-c86agb22rt] { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 6px 12px; background: var(--lime); color: var(--lime-ink); border: 1px solid var(--lime); font-size: 13px; font-weight: 600; cursor: pointer; }
.attachment-dock-picker:has(input:focus-visible)[b-c86agb22rt] { outline: 2px solid var(--brand); outline-offset: 3px; }
.attachment-dock-picker[aria-disabled="true"][b-c86agb22rt] { opacity: .6; cursor: wait; }
.attachment-dock-status[b-c86agb22rt] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex-basis: 100%; overflow-wrap: anywhere; color: var(--ink); }
.attachment-dock-status progress[b-c86agb22rt] { width: 140px; accent-color: var(--brand); }
.attachment-dock-status button[b-c86agb22rt] { padding: 6px; border: 0; background: transparent; color: var(--brand); text-decoration: underline; cursor: pointer; font: inherit; }
.attachment-dock-status button:focus-visible[b-c86agb22rt] { outline: 2px solid var(--brand); outline-offset: 2px; }
.attachment-dock-error[b-c86agb22rt] { flex-basis: 100%; color: var(--red-text); overflow-wrap: anywhere; }
/* /Components/Shared/RequestFiles.razor.rz.scp.css */
/* The summary remains visible; list and secondary upload control stay within the disclosure. */
.files-head[b-tzlje40v5r] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.files-attach[b-tzlje40v5r] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 14px;
    border: 1px solid var(--hairline-strong);
    background: var(--surface);
    color: var(--ink);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.files-attach:hover[b-tzlje40v5r] { border-color: var(--navy); }
.files-attach:has(input:focus-visible)[b-tzlje40v5r] { outline: 2px solid var(--brand); outline-offset: 3px; }
.files-attach[aria-disabled="true"][b-tzlje40v5r] { opacity: .6; cursor: wait; }

.files-progress[b-tzlje40v5r] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    font-size: 14px;
}
.files-progress progress[b-tzlje40v5r] { width: 100px; accent-color: var(--brand); }
.files-progress p[b-tzlje40v5r] { margin: 0; overflow-wrap: anywhere; }
.files-cancel[b-tzlje40v5r] { border: 0; background: transparent; color: var(--brand); text-decoration: underline; cursor: pointer; padding: 10px 4px; font: inherit; }
.files-error[b-tzlje40v5r] { color: var(--red-text); font-size: 14px; overflow-wrap: anywhere; }
.files-empty[b-tzlje40v5r] { color: var(--muted); margin: 18px 0 0; font-size: 14px; }


.files-head[b-tzlje40v5r] { cursor: pointer; min-height: 44px; list-style: none; }
.files-head[b-tzlje40v5r]::-webkit-details-marker { display: none; }
.files-head .detail-block__label[b-tzlje40v5r] { margin: 0; }
.files-count[b-tzlje40v5r] { display: inline-block; margin-left: 8px; padding: 3px 7px; background: var(--surface-2); color: var(--muted); font-size: 11px; }
.files-toggle[b-tzlje40v5r] { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); }
.files-hide[b-tzlje40v5r] { display: none; }
.files-disclosure[open] .files-hide[b-tzlje40v5r] { display: inline; }
.files-disclosure[open] .files-show[b-tzlje40v5r] { display: none; }
.files-disclosure[open] .files-toggle svg[b-tzlje40v5r] { transform: rotate(180deg); }
.files-head:hover .files-toggle[b-tzlje40v5r] { color: var(--brand); }
.files-head:focus-visible[b-tzlje40v5r], .files-cancel:focus-visible[b-tzlje40v5r] { outline: 2px solid var(--brand); outline-offset: 3px; }
.files-content[b-tzlje40v5r] { padding-top: 12px; }
.file-card[b-tzlje40v5r] { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.file__note[b-tzlje40v5r] { font-size: 12px; color: var(--faint); margin: 12px 0 0; }
/* /Components/Shared/RequestForm.razor.rz.scp.css */
/* New request form — NAVACORD direction: cool-grey ground, flat 1px rules, square, teal
   #00646b. Build Spec Option B (2026-10-01): two steps, type tiles → sub-type chips, lead-time
   warning, Advanced disclosure, and a rail that shows what to expect / a live summary.
   Shared classes (.page, .section-label, .mono, .link-button, .persona-select,
   .visually-hidden) come from mrt.css; tokens from theme.css. */

/* ---- Stepper (What you need → Timing & send): kit's numbered circles with lime ✓. Sits BELOW
   each step's heading block (kit order); the step content follows with its own margin. ---- */
.stepper[b-bkrhupqvtd] {
    display: flex;
    align-items: center;
    margin-top: 22px;
}

.stepper__step[b-bkrhupqvtd] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-right: 18px;
    margin-right: 18px;
    border-right: 1px solid var(--hairline);
}

.stepper__step:last-child[b-bkrhupqvtd] { border-right: none; }

.stepper__num[b-bkrhupqvtd] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11.5px;
    font-weight: 700;
    background: var(--disabled-bg);
    color: var(--faint);
}

.stepper__num--on[b-bkrhupqvtd] { background: var(--navy); color: #fff; }
.stepper__num--done[b-bkrhupqvtd] { background: var(--lime); color: var(--lime-ink); }

.stepper__label[b-bkrhupqvtd] { font-size: 13px; font-weight: 600; color: var(--faint); }
.stepper__label--on[b-bkrhupqvtd] { font-weight: 700; color: var(--navy); }

@media (max-width: 350px) {
    .stepper[b-bkrhupqvtd] { align-items: flex-start; gap: 6px; }
    .stepper__step[b-bkrhupqvtd] { min-width: 0; gap: 4px; padding: 0 5px; }
    .stepper__label[b-bkrhupqvtd] { font-size: 11px; line-height: 1.2; overflow-wrap: anywhere; }
}

.eyebrow[b-bkrhupqvtd] {
    margin: 0 0 8px;
}

/* ---- Details step: full-bleed two-column (the detail page's pattern). The page drops its
   gutter, the form column owns its padding, the title+steps head is STICKY under the 62px
   navy bar, and the assistant rail runs from the bar to the bottom of the viewport. ---- */
.page[b-bkrhupqvtd] { background: var(--bg); }

.page--rail[b-bkrhupqvtd] { padding: 0; }

.form-col[b-bkrhupqvtd] {
    min-width: 0;
    padding: 0 40px 56px 32px;
}

.form-col .form-fields[b-bkrhupqvtd] { margin-top: 24px; }

/* Anonymous landing mode keeps the form actions in reach without letting them cover a field.
   The form itself owns this scroll boundary; no ancestor clips focus rings or Blueprint overlays. */
.request-form--docked .form-layout[b-bkrhupqvtd],
.request-form--docked .form-col[b-bkrhupqvtd] {
    height: 100%;
    min-height: 0;
}

.request-form--docked .form-col[b-bkrhupqvtd] {
    display: flex;
    flex-direction: column;
}

.request-form--docked .form-col[b-bkrhupqvtd]  form,
.request-form--docked .form-col > .form-fields[b-bkrhupqvtd] {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-padding-bottom: 88px;
}

.request-form--docked .form-actions--bar[b-bkrhupqvtd] {
    position: sticky;
    bottom: 0;
}

/* Sticky title + steps: pinned just under the navy shell bar; bleeds across the form
   column's own gutters so the underline runs edge to edge of the column. Every step (bar
   the confirmation) shares this header inside .form-col. */
.form-head[b-bkrhupqvtd] {
    position: sticky;
    top: 62px;
    z-index: 5;
    background: var(--bg);
    margin: 0 -40px 0 -32px;
    padding: 22px 40px 16px 32px;
    border-bottom: 1px solid var(--hairline);
}

/* The heading echoes the typed subject — one ellipsized line, so the pinned head keeps a
   constant height no matter how long the subject gets. (A text clip, not an overlay clip:
   nothing escapes an h1.) */
.form-head .page__greeting[b-bkrhupqvtd] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Office + picked location share the sub line — lift .page__sub's 64ch cap so the location
   echo doesn't wrap and grow the pinned head. */
.form-head .page__sub[b-bkrhupqvtd] {
    max-width: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- Details step parts: who's asking → the work → what to produce → context. Each part
   is a titled block separated by a hairline, so the long step reads as chapters instead of
   one run of fields. ---- */
.fpart[b-bkrhupqvtd] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    padding: 20px 24px 22px;
}

.fpart__title[b-bkrhupqvtd] {
    margin: 0;
    padding: 0;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--navy);
}

/* ---- Step 2: two-column layout (form + assistant) ---- */
.form-layout[b-bkrhupqvtd] {
    display: grid;
    /* responsive: the rail column grows with the viewport (clamped so it never gets sparse) and
       is flush to the right edge; the form column (1fr) takes the remaining free width. No block
       cap and no fixed rail → no dead gap on the right on wide screens. No gap — the form
       column's right padding and the rail's border-left do the separating. */
    grid-template-columns: minmax(0, 1fr) clamp(360px, 26vw, 520px);
    align-items: stretch;
}

.form-fields[b-bkrhupqvtd] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    /* fluid: fill the left column (which the max-width above keeps to a readable ~780px) */
    min-width: 0;
}

.form-row[b-bkrhupqvtd] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px;
}

.form-row--full[b-bkrhupqvtd] {
    grid-template-columns: minmax(0, 1fr);
}

/* Native selects (goal, line of business, brokerage, location) fill their field block. */
.form-select[b-bkrhupqvtd] {
    width: 100%;
}


/* ---- Type tiles (tier 1): every option the same size in strict columns, a name plus one
   example line. Single choice: the radio is visually hidden and the tile carries the ring. ---- */
.type-tiles[b-bkrhupqvtd] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 14px;
}

.type-tile[b-bkrhupqvtd] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 74px;
    padding: 12px 14px;
    background: var(--surface);
    border: 1px solid var(--hairline-strong);
    border-radius: var(--radius);
    cursor: pointer;
    transition: background .12s, border-color .12s, box-shadow .12s;
}

.type-tile:hover[b-bkrhupqvtd] { background: var(--surface-2); }

.type-tile--on[b-bkrhupqvtd],
.type-tile--on:hover[b-bkrhupqvtd] {
    border-color: var(--brand);
    background: var(--brand-soft);
    box-shadow: inset 0 0 0 1px var(--brand);
}

.type-tile:has(input:focus-visible)[b-bkrhupqvtd] {
    outline: 2px solid var(--brand);
    outline-offset: 1px;
}

.type-tile__name[b-bkrhupqvtd] {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--navy);
}

.type-tile__eg[b-bkrhupqvtd] {
    font-size: 12.5px;
    line-height: 1.35;
    color: var(--muted);
}

.type-tile--on .type-tile__eg[b-bkrhupqvtd] { color: var(--ink); }

/* "Something else": a quiet text link under the grid, not a thirteenth tile. It is still a radio
   in the same group, so the label carries the focus ring and the hit area stays at least 48px tall. */
.else-link[b-bkrhupqvtd] {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 6px;
    min-height: 48px;
    margin-top: 6px;
    padding: 4px 2px;
    font-size: 15px;
    color: var(--muted);
    cursor: pointer;
}

.else-link__action[b-bkrhupqvtd] {
    color: var(--brand-text);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.else-link:hover .else-link__action[b-bkrhupqvtd] { color: var(--brand-hover); }

.else-link--on[b-bkrhupqvtd] { color: var(--navy); }
.else-link--on svg[b-bkrhupqvtd] { color: var(--brand); }
.else-link--on .else-link__action[b-bkrhupqvtd] { text-decoration: none; color: var(--navy); }

.else-link:has(input:focus-visible)[b-bkrhupqvtd] {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* Give the newly revealed choices a distinct, quiet surface. */
.kind[b-bkrhupqvtd] {
    background: var(--panel);
    display: flex;
    flex-direction: column;
    gap: 16px;
    border-top: 1px solid var(--hairline);
    padding: 18px;
}

.kind__q[b-bkrhupqvtd] {
    margin: 0 0 10px;
    padding: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
}

/* One label language for every field on the form (the old form mixed UPPERCASE native labels
   with Blueprint's sentence case). */
.field-label[b-bkrhupqvtd] {
    display: block;
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
}

.form-fields[b-bkrhupqvtd]  [data-slot="form-label"],
.form-fields[b-bkrhupqvtd]  label[data-slot="label"] {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
}

.chips[b-bkrhupqvtd] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.chip[b-bkrhupqvtd] {
    display: inline-flex;
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--hairline-strong);
    border-radius: var(--radius);
    color: var(--ink);
    font-size: 12.5px;
    font-weight: 450;
    padding: 6px 12px;
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
}

.chip:hover[b-bkrhupqvtd] {
    background: var(--surface-2);
}

.chip--on[b-bkrhupqvtd],
.chip--on:hover[b-bkrhupqvtd] {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--brand-ink);
}

.chip:has(input:focus-visible)[b-bkrhupqvtd] {
    outline: 2px solid var(--brand);
    outline-offset: 1px;
}

/* ---- Lead-time warning (Build Spec section 6): informative, never blocking. The tint family
   is the app's "needs your attention" accent, boxed rather than edge-marked. ---- */
.lead-warn[b-bkrhupqvtd] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: 0;
    max-width: 72ch;
    background: var(--lime-band);
    border: 1px solid var(--lime-border);
    padding: 12px 14px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--navy);
}

.lead-warn svg[b-bkrhupqvtd] { flex: 0 0 auto; margin-top: 2px; }

/* ---- Details part: internal-use checkbox, prefill note, attach, Advanced disclosure ---- */
.check[b-bkrhupqvtd] {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    align-self: center;
    font-size: 14px;
    color: var(--ink);
    cursor: pointer;
}

.check input[b-bkrhupqvtd] { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--brand); flex: 0 0 auto; }

.check small[b-bkrhupqvtd] {
    display: block;
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--muted);
}

.prefill-hint[b-bkrhupqvtd] { margin-top: -6px; }

.attach[b-bkrhupqvtd] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.attach .field-hint[b-bkrhupqvtd] { margin: 0; }

.attach__btn[b-bkrhupqvtd] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 16px;
    background: var(--surface);
    border: 1px solid var(--hairline-strong);
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
}

.attach__btn:hover[b-bkrhupqvtd] { background: var(--surface-2); }

.attach__btn:has(input:focus-visible)[b-bkrhupqvtd] {
    outline: 2px solid var(--brand);
    outline-offset: 1px;
}

.adv[b-bkrhupqvtd] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 12px 0 0;
    border: none;
    border-top: 1px solid var(--hairline);
    background: none;
    font: inherit;
    text-align: left;
    color: var(--brand-text);
    cursor: pointer;
}

.adv:focus-visible[b-bkrhupqvtd] { outline: 2px solid var(--brand); outline-offset: 2px; }

.adv__chev[b-bkrhupqvtd] { transition: transform .15s; }
.adv__chev--open[b-bkrhupqvtd] { transform: rotate(90deg); }

.adv__title[b-bkrhupqvtd] { font-size: 14px; font-weight: 600; }

.adv__sub[b-bkrhupqvtd] { font-size: 13px; color: var(--muted); }

.adv-panel[b-bkrhupqvtd] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: var(--panel);
    border: 1px solid var(--hairline);
    padding: 18px 18px 20px;
}

.form-actions[b-bkrhupqvtd] {
    display: flex;
    /* Back and the primary action stay right; Start over is separated at the left. */
    justify-content: flex-end;
    gap: 12px;
    margin-top: 6px;
    flex-wrap: wrap;
}

/* The step navigation docks to the bottom of the viewport and the form scrolls under it —
   Back/Continue are never out of reach. Sticky (not fixed): on a short step it simply sits
   in flow, and at the end of a long scroll it rests at its natural spot. Bleeds across the
   page gutter so scrolling content never peeks past its edges. */
.form-actions--bar[b-bkrhupqvtd] {
    position: sticky;
    bottom: 0;
    z-index: 5;
    background: var(--surface);
    border-top: 1px solid var(--hairline);
    margin: 6px -32px 0;
    padding: 12px 32px;
}

.form-actions--bar .start-over[b-bkrhupqvtd] {
    margin-inline-end: auto;
    min-height: 44px;
    padding: 10px 4px;
    border: 0;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 14px;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.form-actions--bar .start-over:hover:not(:disabled)[b-bkrhupqvtd] { color: var(--navy); }
.form-actions--bar .start-over:focus-visible[b-bkrhupqvtd] { outline: 2px solid var(--brand); outline-offset: 2px; }
.form-actions--bar .start-over:disabled[b-bkrhupqvtd] { opacity: .5; cursor: default; }

/* Step errors render inside the bar (never above it, where the sticky bar would cover them):
   left of the buttons on wide screens, their own line above the buttons when wrapped. The
   compound selector outranks .field-error's own top margin regardless of rule order. */
.form-actions--bar .form-actions__error[b-bkrhupqvtd] {
    flex: 1 1 100%;
    align-self: center;
    margin: 0;
}

/* The submit spinner takes the error's place in the bar; ::deep because the markup belongs to
   PortalSpinner (Blazor scopes CSS to the component that renders the element). */
.form-actions--bar[b-bkrhupqvtd]  .portal-spinner {
    flex: 1 1 100%;
    align-self: center;
}

/* Details step: the form column's gutters are asymmetric (40px right, 32px left). */
.form-col .form-actions--bar[b-bkrhupqvtd] {
    margin: 6px -40px 0 -32px;
    padding: 12px 40px 12px 32px;
}

/* One field language for EVERY control on the form (Blueprint slots and native
   selects alike): white surface + 1px hairline border — the old --surface-2 grey fill read
   as disabled. Best-effort targeting of Blueprint's rendered slots via ::deep — the
   components themselves are kept for validation/a11y. Never touches radios/checkboxes. */
.form-fields[b-bkrhupqvtd]  input:not([type="checkbox"]):not([type="radio"]),
.form-fields[b-bkrhupqvtd]  textarea,
.form-fields[b-bkrhupqvtd]  select,
.form-fields[b-bkrhupqvtd]  [data-slot="input"],
.form-fields[b-bkrhupqvtd]  [data-slot="textarea"],
.form-fields[b-bkrhupqvtd]  [data-slot="select-trigger"],
.form-fields[b-bkrhupqvtd]  [data-slot="date-picker-input"],
.form-fields[b-bkrhupqvtd]  [data-slot="date-picker-trigger"],
.form-fields[b-bkrhupqvtd]  [data-slot="field-content"] > button {
    background: var(--surface);
    border: 1px solid var(--hairline-strong);
    border-radius: var(--radius);
    box-shadow: none;
    transition: border-color .12s, box-shadow .12s;
}

/* Click/focus: brand border + a light-brand halo. Replaces the global hard outline on
   these controls with a STRONGER indicator (color-change border + 3px halo), never with
   less — the "focus ring stays" guard rail is about visibility, not the exact ring. */
.form-fields[b-bkrhupqvtd]  input:not([type="checkbox"]):not([type="radio"]):focus-visible,
.form-fields[b-bkrhupqvtd]  textarea:focus-visible,
.form-fields[b-bkrhupqvtd]  select:focus-visible,
.form-fields[b-bkrhupqvtd]  [data-slot="input"]:focus-visible,
.form-fields[b-bkrhupqvtd]  [data-slot="textarea"]:focus-visible,
.form-fields[b-bkrhupqvtd]  [data-slot="select-trigger"]:focus-visible,
.form-fields[b-bkrhupqvtd]  [data-slot="date-picker-input"]:focus-visible,
.form-fields[b-bkrhupqvtd]  [data-slot="date-picker-trigger"]:focus-visible,
.form-fields[b-bkrhupqvtd]  [data-slot="field-content"] > button:focus-visible {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
}

/* Native selects + the read-only name input match Blueprint's field metrics (h-10 / px-3 /
   14px) instead of the compact .persona-select padding they'd otherwise inherit. */
.form-fields .form-select[b-bkrhupqvtd] {
    height: 40px;
    padding: 8px 12px;
    font-size: 14px;
}

.form-fields .form-select:disabled[b-bkrhupqvtd] {
    background: var(--disabled-bg);
    color: var(--muted);
    opacity: 1;
    cursor: not-allowed;
}

/* Keep validation text in the app's established error ink (matches StatusInk(Error)). */
.form-fields[b-bkrhupqvtd]  .validation-errors,
.form-fields[b-bkrhupqvtd]  .validation-message,
.form-fields[b-bkrhupqvtd]  [data-slot="form-message"] {
    color: var(--amber-text);
}

/* ---- Language pills (one choice, 1px gap, selected fills teal) ---- */
.pillset[b-bkrhupqvtd] {
    border: none;
    padding: 0;
    margin: 0;
    min-width: 0;
}

.pillset legend[b-bkrhupqvtd] {
    padding: 0;
    margin: 0 0 8px;
}

.pills[b-bkrhupqvtd] {
    display: inline-flex;
    gap: 1px;
    background: var(--hairline-strong);
    border: 1px solid var(--hairline-strong);
    border-radius: var(--radius);
    max-width: 100%;
}

/* The pills are filled and run to the group's edge, so their corners have to be tidied. Done by
   rounding the end pills rather than with `overflow: hidden` on the group — an ancestor's
   overflow clips a descendant's focus outline, and .pill's focus ring is the ONLY focus
   indicator these radios have (the inputs themselves are visually hidden). */
.pill:first-child[b-bkrhupqvtd] { border-radius: calc(var(--radius) - 1px) 0 0 calc(var(--radius) - 1px); }
.pill:last-child[b-bkrhupqvtd] { border-radius: 0 calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0; }

.pill[b-bkrhupqvtd] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    color: var(--ink);
    font-size: 13px;
    font-weight: 450;
    padding: 8px 16px;
    cursor: pointer;
    transition: background .12s, color .12s;
}

.pill:hover[b-bkrhupqvtd] {
    background: var(--surface-2);
}

.pill--on[b-bkrhupqvtd],
.pill--on:hover[b-bkrhupqvtd] {
    background: var(--brand);
    color: var(--brand-ink);
}

.pill:has(input:focus-visible)[b-bkrhupqvtd] {
    outline: 2px solid var(--brand);
    outline-offset: 1px;
}

/* ---- Attachments ---- */
.field-block__label[b-bkrhupqvtd] {
    display: block;
    margin-bottom: 8px;
}

.field-hint[b-bkrhupqvtd] {
    font-size: 12px;
    color: var(--faint);
    margin: 8px 0 0;
}

.file-list[b-bkrhupqvtd] {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    border-radius: var(--radius);
    overflow: hidden;
}

.file-list li[b-bkrhupqvtd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    padding: 9px 12px;
    background: var(--surface-2);
}

.file-size[b-bkrhupqvtd] {
    color: var(--faint);
    font-family: var(--font-mono);
}

.field-error[b-bkrhupqvtd] {
    color: var(--amber-text);
    font-size: 13px;
    margin: 10px 0 0;
}

/* ---- Assistant: the pinned right rail (same pattern as the detail page's .detail-side).
   Starts flush under the 62px navy bar, runs the viewport height, never moves, and scrolls
   INTERNALLY if the nudge list outgrows it. MainLayout drops the navy footer on /new
   (FooterlessRoute) so the document scroll ends at the grid's bottom and the pin never
   breaks. The tabindex/label for the scroll region live on the <aside> (WCAG 2.1.1 is
   satisfied by its focusable content). ---- */
.assistant[b-bkrhupqvtd] {
    background: var(--panel);
    border-left: 1px solid var(--hairline);
    padding: 0 32px 0 24px;
    min-width: 0;
    position: sticky;
    top: 62px;
    height: calc(100vh - 62px);
    overflow: auto;
    scrollbar-width: thin;
    align-self: flex-start;
}

.assistant__inner[b-bkrhupqvtd] {
    padding: 34px 0 24px;
}

.assistant__note[b-bkrhupqvtd] {
    font-size: 12.5px;
    color: var(--muted);
    margin: 6px 0 18px;
}

.assistant__still[b-bkrhupqvtd] {
    margin: 0 0 8px;
}

/* ---- The declaration: the last thing above the send bar ---- */
.attest[b-bkrhupqvtd] {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 0;
    padding: 14px 16px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    font-size: 13.5px;
    color: var(--ink);
    cursor: pointer;
}

.attest input[b-bkrhupqvtd] { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--brand); flex: 0 0 auto; }

/* The one commit on the form takes the kit's lime CTA (the header's "New Request" colour);
   Continue keeps the teal primary. ::deep — BbButton renders the element. */
.form-actions--bar[b-bkrhupqvtd]  .btn-send {
    background: var(--lime);
    border-color: var(--lime);
    color: var(--lime-ink);
    font-weight: 700;
}

.form-actions--bar[b-bkrhupqvtd]  .btn-send:hover { background: var(--lime); opacity: .9; }

/* ---- Rail, step 1: what to expect ---- */
.expect[b-bkrhupqvtd] {
    background: var(--surface);
    border: 1px solid var(--hairline);
    padding: 18px 18px 16px;
    margin: 0 0 26px;
}

.expect__what[b-bkrhupqvtd] { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--muted); }

.expect__big[b-bkrhupqvtd] {
    margin: 8px 0 6px;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -.015em;
    line-height: 1.1;
    color: var(--navy);
}

.expect__big--soft[b-bkrhupqvtd] { font-size: 22px; }

.expect__sub[b-bkrhupqvtd] { margin: 0; font-size: 13px; line-height: 1.45; color: var(--muted); }

.expect__tier[b-bkrhupqvtd] {
    display: inline-block;
    margin-top: 12px;
    padding: 3px 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--steel);
    background: var(--steel-soft);
}

.tpl-links[b-bkrhupqvtd] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--hairline);
    border: 1px solid var(--hairline);
}

.tpl-links a[b-bkrhupqvtd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 44px;
    padding: 0 14px;
    background: var(--surface);
    color: var(--navy);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
}

.tpl-links a:hover[b-bkrhupqvtd] { background: var(--surface-2); text-decoration: none; }
.tpl-links svg[b-bkrhupqvtd] { color: var(--brand); }

/* ---- Rail, step 2: the live summary that replaced the review step ---- */
.summary[b-bkrhupqvtd] {
    margin: 0 0 14px;
    background: var(--surface);
    border: 1px solid var(--hairline);
}

.summary > div[b-bkrhupqvtd] {
    padding: 12px 16px;
    border-bottom: 1px solid var(--list-hairline);
}

.summary > div:last-child[b-bkrhupqvtd] { border-bottom: none; }

.summary dt[b-bkrhupqvtd] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin: 0 0 3px;
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--faint);
}

.summary dt .link-button[b-bkrhupqvtd] { font-size: 12.5px; letter-spacing: 0; text-transform: none; }

.summary dd[b-bkrhupqvtd] { margin: 0; font-size: 14px; line-height: 1.4; color: var(--ink); overflow-wrap: anywhere; }

.summary dd span[b-bkrhupqvtd] { display: block; font-size: 12.5px; color: var(--muted); }

.summary dd .summary__flag[b-bkrhupqvtd] { color: var(--lime-text); font-weight: 600; }

/* ---- Confirmation (flat, left-aligned) ---- */
.confirm[b-bkrhupqvtd] {
    max-width: 560px;
}

.confirm__badge[b-bkrhupqvtd] {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--brand);
    color: var(--brand-ink);
    font-size: 18px;
    margin-bottom: 14px;
}

.panel[b-bkrhupqvtd] {
    background: var(--panel);
    border: 1px solid var(--hairline);
    padding: 18px 20px;
    margin: 20px 0;
}

.panel__title[b-bkrhupqvtd] {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
}

.panel ul[b-bkrhupqvtd] {
    margin: 0;
    padding-left: 18px;
    font-size: 13.5px;
    color: var(--muted);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ---- Responsive: collapse below the rail breakpoint ---- */
@media (max-width: 860px) {
    .form-layout[b-bkrhupqvtd] {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .form-col[b-bkrhupqvtd] {
        padding: 0 20px 40px;
    }

    .form-head[b-bkrhupqvtd] {
        margin: 0 -20px;
        padding: 18px 20px 14px;
    }

    .form-col .form-actions--bar[b-bkrhupqvtd] {
        margin: 6px -20px 0;
        padding: 12px 20px;
    }

    /* stacked: the assistant becomes a normal bordered card in the flow — no pin, no
       viewport height, no internal scroll */
    .assistant[b-bkrhupqvtd] {
        margin: 0 20px;
        border: 1px solid var(--hairline);
        padding: 0 20px;
        position: static;
        height: auto;
        overflow: visible;
    }

    .assistant__inner[b-bkrhupqvtd] {
        padding: 20px 0;
    }

    .form-row[b-bkrhupqvtd] {
        grid-template-columns: minmax(0, 1fr);
    }

    .type-tiles[b-bkrhupqvtd] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fpart[b-bkrhupqvtd] {
        padding: 16px 16px 18px;
    }

}

@media (prefers-reduced-motion: reduce) {
    .type-tile[b-bkrhupqvtd],
    .chip[b-bkrhupqvtd],
    .pill[b-bkrhupqvtd],
    .adv__chev[b-bkrhupqvtd] {
        transition: none;
    }
}

/* The public form uses the same timing content beside the selection on smaller screens. */
.expect-inline[b-bkrhupqvtd] { display: none; }
@media (max-width: 1099px) {
    .expect-inline[b-bkrhupqvtd] {
        display: block;
        margin: 0 6px;
        padding: 16px 18px;
        background: var(--panel);
        border: 1px solid var(--hairline);
    }
    .expect-inline .expect__big[b-bkrhupqvtd] { font-size: 25px; }
    .expect-inline .assistant__note[b-bkrhupqvtd] { margin-bottom: 10px; }
    .expect-inline .expect[b-bkrhupqvtd] { margin: 10px 0 12px; padding: 0; border: 0; background: transparent; }
    .expect-inline:has(.expect) > .assistant__note[b-bkrhupqvtd] { display: none; }
}

.assistant:focus-visible[b-bkrhupqvtd] { outline: 3px solid var(--lime); outline-offset: -3px; }
/* /Components/Shared/RequestLandingShell.razor.rz.scp.css */
.request-landing[b-jybqihzjio] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100dvh; min-height: 0; background: var(--bg); }
.landing-top[b-jybqihzjio] { display: flex; align-items: center; gap: 22px; padding: 18px 4%; background: var(--navy); color: var(--header-ink); }
.landing-top img[b-jybqihzjio] { display: block; width: 158px; height: auto; }
.landing-product[b-jybqihzjio] { padding-left: 22px; border-left: 1px solid var(--header-muted); font-size: 14px; color: var(--header-muted); }
.landing-track[b-jybqihzjio] { margin-left: auto; padding: 10px 15px; border: 1px solid var(--header-muted); color: var(--header-ink); font-size: 14px; text-decoration: none; }
.landing-top a:focus-visible[b-jybqihzjio] { outline: 3px solid var(--lime); outline-offset: 3px; }
.landing-columns[b-jybqihzjio] { display: grid; grid-template-columns: minmax(0, .32fr) minmax(0, .68fr); min-height: 0; }
.request-landing__hero[b-jybqihzjio] { padding: 42px 11% 28px; background: var(--navy-deep); color: var(--header-ink); min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.request-landing__hero h1[b-jybqihzjio] { margin: 0; color: var(--header-ink); font-family: var(--font-display); font-weight: 700; font-size: clamp(36px, 3vw, 46px); width: min-content; line-height: 1.14; letter-spacing: -.015em; max-width: none; }
.request-landing__hero-copy p[b-jybqihzjio] { max-width: 27ch; margin: 22px 0 0; color: var(--header-muted); font-size: 17px; line-height: 1.5; }
.landing-guide[b-jybqihzjio] { margin-top: 34px; padding-top: 24px; border-top: 1px solid color-mix(in srgb, var(--header-muted) 35%, transparent); }
.landing-guide h2[b-jybqihzjio] { color: var(--header-ink); font-size: 15px; margin: 0 0 20px; }
.landing-guide ol[b-jybqihzjio] { display: grid; gap: 22px; margin: 0; padding-left: 24px; color: var(--header-muted); font-size: 14px; }
.landing-guide li[b-jybqihzjio] { padding-left: 6px; }
.landing-guide li[b-jybqihzjio]::marker { color: var(--lime); font-weight: 700; }
.landing-guide strong[b-jybqihzjio] { display: block; color: var(--header-ink); font-weight: 600; margin-bottom: 3px; }
.request-landing__note[b-jybqihzjio] { margin: 30px 0 0; max-width: 36ch; font-size: 12px; line-height: 1.5; color: var(--header-muted); }
.request-landing__form[b-jybqihzjio] { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: clip; background: var(--bg); }
.landing-footer[b-jybqihzjio] { display: flex; justify-content: space-between; gap: 12px; background: var(--navy); color: var(--header-muted); padding: 14px 4%; font-size: 11px; letter-spacing: .06em; }
.request-landing__form[b-jybqihzjio]  .form-layout {
    grid-template-columns: minmax(0, 1fr);
    height: 100%;
    min-height: 0;
}

.request-landing__form[b-jybqihzjio]  .assistant {
    display: none;
}

.request-landing__form[b-jybqihzjio]  .request-form--docked.page,
.request-landing__form[b-jybqihzjio]  .request-form--docked .form-col {
    height: 100%;
    min-height: 0;
    overflow: clip;
}

.request-landing__form[b-jybqihzjio]  .request-form--docked.page {
    flex: 1 1 0;
}

.request-landing__form[b-jybqihzjio]  .request-form--docked .form-head {
    top: 0;
}

.request-landing__form[b-jybqihzjio]  .request-form--docked .form-col {
    padding-bottom: 0;
}

/* Negative full-page gutter margins create horizontal overflow inside a bounded scroller. */
.request-landing__form[b-jybqihzjio]  .request-form--docked .form-actions--bar {
    margin-inline: 0;
    padding-inline: 0;
}

/* EditForm renders its native form from a child component, so it does not receive
   RequestForm's CSS-isolation attribute. Anchor this rule from the landing's own scoped
   root: flex-basis zero lets the form take the remaining column height and own overflow. */
.request-landing__form[b-jybqihzjio]  .request-form--docked .form-col > form {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-padding-bottom: 88px;
}


.request-landing__form[b-jybqihzjio]  .form-head .eyebrow { display: none; }
.request-landing__form[b-jybqihzjio]  .form-head .page__greeting { font-size: 27px; font-weight: 600; }
.request-landing__form[b-jybqihzjio]  .stepper { align-items: stretch; gap: 16px; }
.request-landing__form[b-jybqihzjio]  .stepper__step { flex: 1; gap: 5px; padding: 0 0 12px; margin: 0; border-right: 0; border-bottom: 2px solid var(--hairline); }
.request-landing__form[b-jybqihzjio]  .stepper__step[aria-current="step"] { border-bottom-color: var(--navy); }
.request-landing__form[b-jybqihzjio]  .stepper__num { width: auto; height: auto; border-radius: 0; background: transparent; color: var(--faint); }
.request-landing__form[b-jybqihzjio]  .stepper__num--on { color: var(--navy); }
@media (max-width: 860px) {
    .landing-columns[b-jybqihzjio] { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
    .landing-top[b-jybqihzjio] { padding: 12px 6%; gap: 12px; }
    .landing-top img[b-jybqihzjio] { width: 124px; }
    .landing-product[b-jybqihzjio] { display: none; }
    .landing-track[b-jybqihzjio] { font-size: 12px; padding: 10px; }
    .request-landing__hero[b-jybqihzjio] { padding: 20px 6%; }
    .request-landing__hero h1[b-jybqihzjio] { font-size: 30px; max-width: none; }
    .request-landing__hero h1 br[b-jybqihzjio] { display: none; }
    .request-landing__hero-copy p[b-jybqihzjio] { font-size: 14px; max-width: 44ch; margin-top: 12px; }
    .landing-guide[b-jybqihzjio], .request-landing__note[b-jybqihzjio] { display: none; }
    .landing-footer[b-jybqihzjio] { padding: 10px 6%; font-size: 9px; }
    .request-landing__form[b-jybqihzjio]  .stepper { gap: 8px; }
    .request-landing__form[b-jybqihzjio]  .stepper__label { font-size: 11px; }
}
@media (max-width: 860px) and (max-height: 700px) {
    .request-landing__hero[b-jybqihzjio] { padding-block: 14px; }
    .request-landing__hero-copy[b-jybqihzjio] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 12px; }
    .request-landing__hero h1[b-jybqihzjio] { font-size: 26px; }
    .request-landing__hero-copy p[b-jybqihzjio] { display: none; }
}

/* Match the approved comp's flat form surface and lime primary action. */
.request-landing__hero:focus-visible[b-jybqihzjio] { outline: 3px solid var(--lime); outline-offset: -5px; }
.landing-guide ol[b-jybqihzjio] { list-style: decimal; }
.request-landing__form[b-jybqihzjio],
.request-landing__form[b-jybqihzjio]  .page,
.request-landing__form[b-jybqihzjio]  .form-head { background: var(--surface); }
.request-landing__form[b-jybqihzjio]  .fpart { border: 0; padding: 12px 6px 18px; }
.request-landing__form[b-jybqihzjio]  .fpart__title { font-size: 16px; font-weight: 600; text-transform: none; letter-spacing: normal; }
.request-landing__form[b-jybqihzjio]  .form-actions--bar button:not(.border-input) { --primary: var(--lime); --primary-foreground: var(--lime-ink); }

/* Keep the primary next-step action comfortable to see and activate. */
.request-landing__form[b-jybqihzjio]  .form-actions--bar button {
    min-height: 48px;
    min-width: 132px;
    padding: 12px 24px;
    font-size: 16px;
    line-height: 1.25;
}

.request-landing__form[b-jybqihzjio]  .form-actions--bar button.start-over {
    min-width: 0;
    padding-inline: 4px;
    font-size: 14px;
    background: transparent;
}

/* Reserve room for the restored timing / review rail on desktop. The form and rail
   each own their scrolling, keeping lead times visible while the brief is filled. */
@media (min-width: 1100px) {
    .landing-columns[b-jybqihzjio] { grid-template-columns: minmax(220px, .2fr) minmax(0, .8fr); }
    .request-landing__hero[b-jybqihzjio] { padding: 32px 24px; }
    .request-landing__hero h1[b-jybqihzjio] { font-size: clamp(34px, 2.8vw, 42px); }
    .request-landing__form[b-jybqihzjio]  .form-layout {
        grid-template-columns: minmax(0, 1fr) clamp(230px, 18vw, 300px);
    }
    .request-landing__form[b-jybqihzjio]  .assistant {
        display: block;
        position: static;
        top: auto;
        height: 100%;
        min-height: 0;
        margin: 0;
        padding: 0 20px;
        overflow-y: auto;
    }
    .request-landing__form[b-jybqihzjio]  .assistant__inner { padding-top: 24px; }
    .request-landing__form[b-jybqihzjio]  .expect__big { font-size: 30px; }
}
/* /Components/Shared/RequestSidebar.razor.rz.scp.css */
/* Detail-page right rail: "Where it is", properties, marketing contact, collaborators. Navacord
   direction — the cool-grey full-height column separated by a single hairline, with the property
   list STACKED (label over value) rather than label-left/value-right: the values here are long
   enough that the two-column form kept wrapping. Avatar rules use ::deep (the Avatar child
   renders those spans). */

/* The rail IS the viewport-height panel (kit: sticky top:62, height calc(100vh - 62px),
   own overflow) — it pins just under the navy shell bar and scrolls independently of the
   (taller) main column. It is therefore the scrollable region; the tabindex/label live on
   the <aside> itself (WCAG 2.1.1). */
.detail-side[b-c9zpegf4mr] {
    background: var(--panel);
    border-left: 1px solid var(--hairline);
    padding: 34px 24px 36px;
    min-width: 0;
    position: sticky;
    top: 62px;
    height: calc(100vh - 62px);
    overflow: auto;
    scrollbar-width: thin;
    align-self: flex-start;
}

.detail-side__inner[b-c9zpegf4mr] {
    padding-bottom: 8px;
}

/* The detail page's desktop grid includes both the content and composer rows. */
@media (min-width: 981px) {
    .detail-side[b-c9zpegf4mr] { grid-column: 2; grid-row: 1 / span 2; }
}

.side-section + .side-section[b-c9zpegf4mr] { margin-top: 26px; }

/* "Where it is" — current stage + a 1-in-6 progress rule (kit aside). */
.where[b-c9zpegf4mr] { margin-top: 10px; }

.where__row[b-c9zpegf4mr] { display: flex; align-items: center; gap: 8px; }

.where__dot[b-c9zpegf4mr] { width: 9px; height: 9px; flex: 0 0 auto; display: inline-block; }

.where__label[b-c9zpegf4mr] { font-size: 13.5px; font-weight: 600; color: var(--ink); }

.where__bar[b-c9zpegf4mr] { height: 2px; background: var(--hairline-strong); margin-top: 10px; }

.where__bar-fill[b-c9zpegf4mr] { height: 2px; transition: width 300ms ease; }
@media (prefers-reduced-motion: reduce) { .where__bar-fill[b-c9zpegf4mr] { transition: none; } }

.where__next[b-c9zpegf4mr] { margin-top: 6px; font-size: 11.5px; color: var(--faint); }

/* Marketing contact sits in a white card on the tinted rail — the one thing here a reader
   might want to act on. */
.side-section--card[b-c9zpegf4mr] {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    padding: 16px;
}

/* Properties list */
.field-list[b-c9zpegf4mr] { margin: 4px 0 0; }

.field[b-c9zpegf4mr] {
    padding: 12px 0 11px;
    border-bottom: 1px solid var(--hairline);
}

.field:last-child[b-c9zpegf4mr] { border-bottom: none; }

.field__label[b-c9zpegf4mr] {
    font-size: 11.5px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--faint);
    margin: 0;
}

.field__value[b-c9zpegf4mr] {
    font-size: 13.5px;
    color: var(--ink);
    margin: 3px 0 0;
}

/* Marketing contact */
.contact[b-c9zpegf4mr] {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 11px;
}

[b-c9zpegf4mr] .avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--brand);
    color: var(--brand-ink);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.02em;
    overflow: hidden;
}

[b-c9zpegf4mr] .avatar__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.contact__name[b-c9zpegf4mr] {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ink);
}

.contact__note[b-c9zpegf4mr] {
    font-size: 12px;
    color: var(--faint);
    margin: 2px 0 0;
}

.contact__note--empty[b-c9zpegf4mr] { margin-top: 11px; }

/* Collaborators under the owner ("Also on this request") */
.side-people[b-c9zpegf4mr] {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--hairline);
}

.side-people__label[b-c9zpegf4mr] {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--faint);
    margin-bottom: 8px;
}

.side-person[b-c9zpegf4mr] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
}

[b-c9zpegf4mr] .side-person__avatar {
    position: relative;
    overflow: hidden;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--brand);
    color: var(--brand-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 500;
}

[b-c9zpegf4mr] .side-person__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.side-person__name[b-c9zpegf4mr] {
    font-size: 13px;
    color: var(--ink);
}

/* --- Responsive: the page stacks the grid; the rail drops its sticky behaviour --- */
@media (max-width: 980px) {
    /* stacked: no sticky rail, let the content flow inline */
    .detail-side[b-c9zpegf4mr] {
        border-left: none;
        border-top: 1px solid var(--hairline);
        padding: 24px 32px 32px;
        position: static;
        height: auto;
        overflow: visible;
    }
}
/* /Components/Shared/SegmentedControl.razor.rz.scp.css */
/* Square, flat, 1.5px control border (the kit's control-border weight). Active segment is
   navy with the page-ground ink so both palettes stay legible. Tokens only. */

.seg[b-j2jweq3rqd] {
    display: inline-flex;
    border: 1.5px solid var(--hairline-strong);
    background: var(--surface);
}

.seg__btn[b-j2jweq3rqd] {
    border: none;
    background: var(--surface);
    color: var(--muted);
    padding: 8px 14px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.seg__btn:hover[b-j2jweq3rqd] {
    color: var(--navy);
}

.seg__btn--on[b-j2jweq3rqd],
.seg__btn--on:hover[b-j2jweq3rqd] {
    background: var(--navy);
    color: var(--bg);
}
/* /Components/Shared/StaffPack.razor.rz.scp.css */
/* Quiet, angled linework echoes the Navacord mark without competing with the form. */
.staff-pack-promo[b-qsex6e9vy4] {
    position: relative;
    margin-top: 28px;
    padding: 24px 18px 18px;
    background-color: var(--navy);
    background-image:
        linear-gradient(90deg, var(--navy) 15%, transparent 100%),
        repeating-linear-gradient(112deg, transparent 0 25px, color-mix(in srgb, var(--header-muted) 14%, transparent) 25px 26px, transparent 26px 50px);
    color: var(--header-ink);
    border: 1px solid color-mix(in srgb, var(--header-muted) 30%, transparent);
}
.staff-pack-promo[b-qsex6e9vy4]::before { content: ""; position: absolute; top: -1px; left: 18px; width: 42px; height: 3px; background: var(--lime); }
.staff-pack-promo .staff-pack-eyebrow[b-qsex6e9vy4] { color: var(--lime); }
.staff-pack-eyebrow[b-qsex6e9vy4] { display: block; font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.staff-pack-promo h2[b-qsex6e9vy4] { color: var(--header-ink); margin: 10px 0 8px; font: 700 27px/1.1 var(--font-display); letter-spacing: -.025em; }
.staff-pack-promo p[b-qsex6e9vy4] { color: var(--header-muted); margin: 0 0 18px; font-size: 14px; line-height: 1.5; }
.staff-pack-open[b-qsex6e9vy4], .staff-pack-library[b-qsex6e9vy4] { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 46px; padding: 12px; background: var(--navy); color: var(--header-ink); font-size: 13px; font-weight: 600; line-height: 1.3; text-align: left; text-decoration: none; border: 0; cursor: pointer; }
.staff-pack-open:hover[b-qsex6e9vy4], .staff-pack-library:hover[b-qsex6e9vy4] { background: var(--navy-deep); }
.staff-pack-open span[b-qsex6e9vy4], .staff-pack-library > span[aria-hidden][b-qsex6e9vy4] { font-size: 22px; }
.staff-pack-open[b-qsex6e9vy4] { background: var(--navy-deep); border: 1px solid color-mix(in srgb, var(--header-muted) 50%, transparent); }
.staff-pack-open:hover[b-qsex6e9vy4] { background: var(--navy); border-color: var(--header-ink); }
.staff-pack-open span[b-qsex6e9vy4] { color: var(--lime); }
.staff-pack-open:focus-visible[b-qsex6e9vy4] { outline: 3px solid var(--lime); outline-offset: 3px; }
.staff-pack-dialog[b-qsex6e9vy4] { width: min(700px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); margin: auto; padding: 0; border: 0; border-radius: 0; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-pop); overflow-y: auto; overscroll-behavior: contain; }
.staff-pack-dialog[b-qsex6e9vy4]::backdrop { background: var(--backdrop); backdrop-filter: blur(4px); }
.staff-pack-heading[b-qsex6e9vy4] { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 28px 32px; background: var(--navy); color: var(--header-ink); border-top: 7px solid var(--lime); }
.staff-pack-heading .staff-pack-eyebrow[b-qsex6e9vy4] { color: var(--lime); }
.staff-pack-heading h2[b-qsex6e9vy4] { margin: 8px 0 0; font: 700 38px/1.1 var(--font-display); color: var(--header-ink); letter-spacing: -.025em; }
.staff-pack-close[b-qsex6e9vy4] { display: grid; place-items: center; width: 44px; height: 44px; font-size: 30px; line-height: 1; background: transparent; border: 1px solid var(--header-muted); color: var(--header-ink); cursor: pointer; }
.staff-pack-close:focus-visible[b-qsex6e9vy4] { outline: 3px solid var(--lime); outline-offset: 3px; }
.staff-pack-body[b-qsex6e9vy4] { padding: 28px 32px 32px; }
#staff-pack-intro[b-qsex6e9vy4] { margin: 0 0 26px; font-size: 18px; line-height: 1.5; color: var(--navy); }
.staff-pack-included[b-qsex6e9vy4] { margin: 0 0 14px; font-size: 14px; color: var(--muted); }
.staff-pack-assets[b-qsex6e9vy4] { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 0; padding: 1px; background: var(--hairline-strong); list-style: none; }
.staff-pack-assets li[b-qsex6e9vy4] { background: var(--bg); }
.staff-pack-asset[b-qsex6e9vy4] { position: relative; display: block; height: 100%; padding: 22px; color: inherit; text-decoration: none; }
.staff-pack-asset[href]:hover[b-qsex6e9vy4] { background: var(--brand-soft); }
.staff-pack-asset[href]:hover h4[b-qsex6e9vy4] { text-decoration: underline; text-underline-offset: 3px; }
.staff-pack-asset:focus-visible[b-qsex6e9vy4] { outline: 3px solid var(--brand); outline-offset: -3px; background: var(--brand-soft); }
.staff-pack-asset-arrow[b-qsex6e9vy4] { position: absolute; top: 20px; right: 20px; color: var(--brand); font-size: 22px; }
.staff-pack-assets svg[b-qsex6e9vy4] { width: 30px; height: 30px; color: var(--brand); margin-bottom: 16px; }
.staff-pack-assets h4[b-qsex6e9vy4] { font-size: 17px; color: var(--navy); margin: 0 0 7px; }
.staff-pack-assets p[b-qsex6e9vy4] { font-size: 14px; line-height: 1.5; color: var(--muted); margin: 0; }
.staff-pack-downloads[b-qsex6e9vy4] { margin-top: 24px; }
.staff-pack-downloads p[b-qsex6e9vy4] { margin: 0 0 16px; font-size: 14px; color: var(--muted); }
.staff-pack-library[b-qsex6e9vy4] { background: var(--lime); color: var(--lime-ink); width: fit-content; min-width: 210px; padding-inline: 18px; font-size: 14px; }
.staff-pack-library:hover[b-qsex6e9vy4] { background: var(--navy); color: var(--header-ink); }
.staff-pack-library:focus-visible[b-qsex6e9vy4] { outline: 3px solid var(--navy); outline-offset: 3px; }
@media (max-width: 860px) {
    .staff-pack-promo[b-qsex6e9vy4] { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; margin-top: 14px; padding: 12px;  }
    .staff-pack-promo .staff-pack-eyebrow[b-qsex6e9vy4], .staff-pack-promo p[b-qsex6e9vy4] { display: none; }
    .staff-pack-promo h2[b-qsex6e9vy4] { margin: 0; font-size: 20px; }
    .staff-pack-open[b-qsex6e9vy4] { max-width: 170px; font-size: 12px; padding: 10px; }
}
@media (max-width: 520px) {
    .staff-pack-heading[b-qsex6e9vy4] { padding: 22px; }
    .staff-pack-heading h2[b-qsex6e9vy4] { font-size: 30px; }
    .staff-pack-body[b-qsex6e9vy4] { padding: 22px; }
    .staff-pack-assets[b-qsex6e9vy4] { grid-template-columns: 1fr; }
    .staff-pack-asset[b-qsex6e9vy4] { padding: 18px; }
    .staff-pack-assets svg[b-qsex6e9vy4] { float: left; margin: 0 16px 20px 0; }
    .staff-pack-assets p[b-qsex6e9vy4] { clear: both; }
}
@media (max-width: 860px) and (max-height: 700px) {
    .staff-pack-promo[b-qsex6e9vy4] { display: block; margin: 0; padding: 0; background: none; border: 0; }
    .staff-pack-promo[b-qsex6e9vy4]::before, .staff-pack-promo h2[b-qsex6e9vy4] { display: none; }
    .staff-pack-open[b-qsex6e9vy4] { max-width: none; }
}

.staff-pack-asset[aria-disabled="true"][b-qsex6e9vy4] { cursor: not-allowed; }
.staff-pack-asset[aria-disabled="true"]:hover[b-qsex6e9vy4] { background: var(--hairline); }
.staff-pack-asset[aria-disabled="true"]:hover h4[b-qsex6e9vy4],
.staff-pack-asset[aria-disabled="true"]:hover svg[b-qsex6e9vy4] { color: var(--muted); }
.staff-pack-coming-soon[b-qsex6e9vy4] { display: inline-block; margin-top: 12px; font-size: 12px; font-weight: 600; color: var(--muted); }
/* /Components/Shared/SubtaskList.razor.rz.scp.css */
/* Sub Tasks section (Navacord kit): collapsible label row, lime progress bar, parent row,
   indented item rows on a 2px rail. Square, hairline-separated, no shadows. NOTE: no
   overflow:hidden anywhere here — descendants' focus rings must escape (research-log
   2026-08-21). */
.subtasks__head[b-19pxepy6ki] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
}

.subtasks__head-lead[b-19pxepy6ki] { display: inline-flex; align-items: center; gap: 9px; }

.subtasks__title[b-19pxepy6ki] { margin: 0; }

.subtasks__chev[b-19pxepy6ki] {
    width: 6px;
    height: 6px;
    border-right: 1.5px solid var(--muted);
    border-bottom: 1.5px solid var(--muted);
    transform: rotate(-45deg);
    display: block;
    transition: transform 160ms ease;
}
.subtasks__chev--open[b-19pxepy6ki] { transform: rotate(45deg) translateY(-1px); }
@media (prefers-reduced-motion: reduce) { .subtasks__chev[b-19pxepy6ki] { transition: none; } }

.subtasks__count[b-19pxepy6ki] { font-size: 12px; color: var(--faint); font-weight: 600; }

.subtasks__bar[b-19pxepy6ki] { height: 4px; background: var(--hairline); margin-top: 12px; }
.subtasks__bar-fill[b-19pxepy6ki] { height: 4px; background: var(--lime); transition: width 300ms ease; }
@media (prefers-reduced-motion: reduce) { .subtasks__bar-fill[b-19pxepy6ki] { transition: none; } }

.subtasks__parent[b-19pxepy6ki] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0 11px;
    border-bottom: 1px solid var(--list-hairline);
    margin-top: 8px;
}

.subtasks__parent-name[b-19pxepy6ki] {
    font-size: 14px;
    font-weight: 700;
    color: var(--navy);
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.subtasks__parent-stage[b-19pxepy6ki] {
    margin-left: auto;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--faint);
    flex: 0 0 auto;
}

.subtasks__box[b-19pxepy6ki] {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    background: var(--surface);
    color: #fff;
    border: 1.5px solid var(--hairline-strong);
}
.subtasks__box--done[b-19pxepy6ki] { background: var(--brand); border-color: var(--brand); }

.subtasks__note-line[b-19pxepy6ki] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 9px 0 3px;
    font-size: 12.5px;
    color: var(--muted);
}

.subtasks__tick[b-19pxepy6ki] { color: var(--lime-text); font-size: 12px; flex: 0 0 auto; }

.subtasks__list[b-19pxepy6ki] {
    list-style: none;
    margin: 0 0 0 9px;
    padding: 0 0 0 16px;
    border-left: 2px solid var(--hairline);
}

.subtask-row[b-19pxepy6ki] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 8px;
    margin: 0 -8px;
    border-bottom: 1px solid var(--list-hairline);
    background: transparent;
    transition: background 300ms ease;
}
.subtask-row--hl[b-19pxepy6ki] { background: var(--lime-band); }
@media (prefers-reduced-motion: reduce) { .subtask-row[b-19pxepy6ki] { transition: none; } }

.subtask-row__check[b-19pxepy6ki] {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    background: var(--surface);
    color: #fff;
    border: 1.5px solid var(--hairline-strong);
    padding: 0;
}
button.subtask-row__check[b-19pxepy6ki] { cursor: pointer; }
button.subtask-row__check:disabled[b-19pxepy6ki] { cursor: wait; }
.subtask-row__check--done[b-19pxepy6ki] { background: var(--brand); border-color: var(--brand); }

.subtask-row__name[b-19pxepy6ki] {
    font-size: 14px;
    color: var(--ink);
    flex: 0 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.subtask-row__name--done[b-19pxepy6ki] {
    color: var(--faint);
    text-decoration: line-through;
    text-decoration-color: var(--hairline-strong);
}

.subtask-row__msgs[b-19pxepy6ki] {
    background: var(--surface);
    border: 1px solid var(--hairline);
    color: var(--steel);
    font-size: 11.5px;
    font-weight: 600;
    padding: 2px 8px;
    cursor: pointer;
    font-family: inherit;
    flex: 0 0 auto;
}
.subtask-row__msgs:hover[b-19pxepy6ki] { border-color: var(--steel); }

.subtask-row__ask[b-19pxepy6ki] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 22px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    color: var(--brand);
    cursor: pointer;
    padding: 0;
    flex: 0 0 auto;
    opacity: 0.55;
    transition: opacity 120ms ease;
}
.subtask-row__ask:hover[b-19pxepy6ki] { opacity: 1; border-color: var(--brand); }
.subtask-row__ask:focus-visible[b-19pxepy6ki] { opacity: 1; }
.subtask-row__ask:disabled[b-19pxepy6ki] { cursor: wait; opacity: 0.35; }

/* Remove is the one destructive row tool — same quiet chrome, danger ink on hover. */
.subtask-row__ask--danger[b-19pxepy6ki] { color: var(--muted); }
.subtask-row__ask--danger:hover[b-19pxepy6ki] { color: #b32121; border-color: #b32121; }

/* Inline rename (replaces the name span; Enter saves, Esc cancels). */
.subtask-row__edit[b-19pxepy6ki] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
}
.subtask-row__edit .subtasks__add-input[b-19pxepy6ki] { flex: 1; }

/* Two-step remove confirm — inline, no browser dialog (same pattern as Mark complete). */
.subtask-row__confirm[b-19pxepy6ki] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--muted);
    flex: 0 0 auto;
}
.subtask-row__confirm .link-button--danger[b-19pxepy6ki] { color: #b32121; }

.subtask-row__who[b-19pxepy6ki] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    width: 230px;
    min-width: 0;
}

.subtasks__empty[b-19pxepy6ki] {
    margin: 10px 0 2px;
    font-size: 13px;
    color: var(--muted);
}

/* ---- add-your-own to-do (LOGIC-18) ------------------------------------- */
.subtasks__add[b-19pxepy6ki] {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}
.subtasks__add-input[b-19pxepy6ki] {
    flex: 1;
    min-width: 0;
    font: inherit;
    font-size: 13px;
    padding: 7px 10px;
    border: 1px solid var(--hairline-strong);
    border-radius: var(--radius-sm);
    background: var(--card, #fff);
    color: var(--ink);
}
.subtasks__add-input[b-19pxepy6ki]::placeholder { color: var(--faint); }
.subtasks__add-btn[b-19pxepy6ki] {
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    padding: 7px 14px;
    border: 1px solid var(--hairline-strong);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--brand);
    cursor: pointer;
}
.subtasks__add-btn:hover:not(:disabled)[b-19pxepy6ki] { border-color: var(--brand); }
.subtasks__add-btn:disabled[b-19pxepy6ki] { opacity: .45; cursor: default; }

/* ::deep: disc + img are rendered by the Avatar component, not by this one (the CSS
   scoping trap) — without it the img never gets its overlay positioning and the initials
   peek out beside the photo. */
[b-19pxepy6ki] .subtask-row__who .avatar-disc { position: relative; }
[b-19pxepy6ki] .subtask-row__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.subtask-row__owner[b-19pxepy6ki] {
    font-size: 12.5px;
    color: var(--muted);
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.subtask-row__owner--none[b-19pxepy6ki] { color: var(--faint); }

.subtask-row__when[b-19pxepy6ki] {
    font-size: 12px;
    color: var(--faint);
    font-weight: 600;
    width: 56px;
    text-align: right;
    flex: 0 0 auto;
}

.subtasks__note[b-19pxepy6ki] { margin: 12px 0 0; font-size: 12px; color: var(--faint); }

@media (max-width: 860px) {
    .subtask-row[b-19pxepy6ki] { flex-wrap: wrap; }
    .subtask-row__who[b-19pxepy6ki] { width: auto; max-width: calc(100% - 32px); margin-left: 32px; }
}