/* /Components/Pages/Actions/Actions.razor.rz.scp.css */
/*
 * The actions page's own styles.
 *
 * APPLIED, NOT DESIGNED. This is the decision page's stylesheet taken whole - which is the activation page's stylesheet,
 * the same auth shell, palette and type - because Blazor CSS isolation scopes a page's stylesheet to that page, and this
 * is the same kind of page: a person signed in to Crolle doing one thing. The rules at the end lay out what only this
 * page has (a queue of obligations, one choice and one note per obligation, one submission over all of them) with the
 * same values. A Claude Design pass for this page is still owed.
 *
 * EVERY VALUE THAT COMES FROM A PERSON carries `overflow-wrap: anywhere` here rather than at the element, so a long
 * reference or a pasted note can never push the page sideways.
 */

.auth-page[b-3pci8i7b8q] {
    --auth-paper: #f4f3ef;
    --auth-ink: #0b0d10;
    --auth-muted: #5f646c;
    --auth-line: #c9c8c3;
    --auth-line-strong: #9d9e9b;
    --auth-accent: #007a66;
    --auth-accent-deep: #005e50;
    --auth-danger: #a22b32;
    --auth-white: #fff;
    --auth-focus: #00a88a;

    min-width: 320px;
    min-height: 100dvh;
    display: grid;
    grid-template-columns: minmax(360px, 43%) minmax(0, 57%);
    overflow-x: hidden;
    color: var(--auth-ink);
    background: var(--auth-paper);
    font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.auth-page *[b-3pci8i7b8q],
.auth-page *[b-3pci8i7b8q]::before,
.auth-page *[b-3pci8i7b8q]::after {
    box-sizing: border-box;
}

.auth-page button[b-3pci8i7b8q],
.auth-page input[b-3pci8i7b8q],
.auth-page select[b-3pci8i7b8q],
.auth-page textarea[b-3pci8i7b8q],
.auth-page a[b-3pci8i7b8q] {
    color: inherit;
    font: inherit;
}

.auth-page a:focus-visible[b-3pci8i7b8q],
.auth-page button:focus-visible[b-3pci8i7b8q],
.auth-page input:focus-visible[b-3pci8i7b8q],
.auth-page select:focus-visible[b-3pci8i7b8q],
.auth-page textarea:focus-visible[b-3pci8i7b8q],
.auth-page summary:focus-visible[b-3pci8i7b8q],
.skip-link:focus-visible[b-3pci8i7b8q] {
    outline: 3px solid var(--auth-focus);
    outline-offset: 3px;
}

.skip-link[b-3pci8i7b8q] {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 20;
    padding: 10px 14px;
    color: #fff;
    background: #0b0d10;
    transform: translateY(-160%);
    transition: transform 160ms ease;
}

.skip-link:focus[b-3pci8i7b8q] {
    transform: translateY(0);
}

/* ── the brand side ─────────────────────────────────────────────────────────────────────────────────────────── */
.brand-panel[b-3pci8i7b8q] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 48px;
    padding: 48px 44px;
    color: #f2f1ec;
    background: linear-gradient(160deg, #10151a 0%, #0b0d10 60%, #0d1512 100%);
}

.brand-wordmark[b-3pci8i7b8q] {
    font-family: 'IBM Plex Sans', Arial, sans-serif;
    font-size: 25px;
    line-height: 1;
    font-weight: 650;
    letter-spacing: -0.076em;
    font-synthesis: none;
    text-decoration: none;
}

.brand-wordmark-dot[b-3pci8i7b8q] {
    color: #ed895e;
}

.brand-lockup[b-3pci8i7b8q] {
    display: grid;
    gap: 14px;
}

.eyebrow[b-3pci8i7b8q] {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #8fb9ae;
}

.brand-title[b-3pci8i7b8q] {
    margin: 0;
    font-size: clamp(1.75rem, 3.2vw, 2.5rem);
    font-weight: 600;
    line-height: 1.15;
    text-wrap: balance;
}

.brand-copy[b-3pci8i7b8q] {
    margin: 0;
    max-width: 46ch;
    font-size: 0.975rem;
    line-height: 1.6;
    color: #b9bcbb;
}

.signin-footer[b-3pci8i7b8q] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    align-items: baseline;
    font-size: 0.8rem;
    color: #8b8f8e;
    margin: 0;
}

/* ── the form side ──────────────────────────────────────────────────────────────────────────────────────────── */
.signin-panel[b-3pci8i7b8q] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 40px;
}

.signin-card[b-3pci8i7b8q] {
    width: 100%;
    max-width: 27rem;
    display: grid;
    gap: 20px;
}

.signin-title[b-3pci8i7b8q] {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.2;
}

.signin-subtitle[b-3pci8i7b8q] {
    margin: 0;
    font-size: 0.925rem;
    line-height: 1.55;
    color: var(--auth-muted);
}

.signin-error[b-3pci8i7b8q],
.signin-note[b-3pci8i7b8q] {
    margin: 0;
    padding: 12px 14px;
    font-size: 0.875rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
    border-left: 3px solid var(--auth-danger);
    background: var(--auth-white);
}

.signin-note[b-3pci8i7b8q] {
    border-left-color: var(--auth-line-strong);
    color: var(--auth-muted);
}

.signin-link[b-3pci8i7b8q] {
    color: var(--auth-accent-deep);
    font-weight: 600;
}

.field[b-3pci8i7b8q] {
    display: grid;
    gap: 6px;
}

.field label[b-3pci8i7b8q] {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.field input[b-3pci8i7b8q],
.field select[b-3pci8i7b8q],
.field textarea[b-3pci8i7b8q] {
    width: 100%;
    padding: 11px 13px;
    color: var(--auth-ink);
    background: var(--auth-white);
    border: 1px solid var(--auth-line);
    border-radius: 2px;
    transition: border-color 120ms ease;
}

.field textarea[b-3pci8i7b8q] {
    font-size: 0.9rem;
    line-height: 1.5;
    resize: vertical;
    overflow-wrap: anywhere;
}

.field input:hover[b-3pci8i7b8q],
.field select:hover[b-3pci8i7b8q],
.field textarea:hover[b-3pci8i7b8q] {
    border-color: #a9a8a3;
}

.field input:focus[b-3pci8i7b8q],
.field select:focus[b-3pci8i7b8q],
.field textarea:focus[b-3pci8i7b8q] {
    border-color: var(--auth-accent);
    outline-offset: 2px;
}

.field input[aria-invalid="true"][b-3pci8i7b8q],
.field textarea[aria-invalid="true"][b-3pci8i7b8q] {
    border-color: var(--auth-danger);
}

.submit-button[b-3pci8i7b8q] {
    margin-top: 4px;
    padding: 12px 16px;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--auth-white);
    background: var(--auth-accent);
    border: 0;
    border-radius: 2px;
    cursor: pointer;
    transition: background-color 120ms ease;
}

.submit-button:hover[b-3pci8i7b8q] {
    background: var(--auth-accent-deep);
}

.submit-button:disabled[b-3pci8i7b8q] {
    cursor: default;
    background: #7fa39b;
}

.access-note[b-3pci8i7b8q] {
    margin: 0;
    padding-top: 4px;
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--auth-muted);
    border-top: 1px solid var(--auth-line);
}

/* ── narrow screens: the brand panel becomes a header, the queue takes the width ─────────────────────────────── */
@media (max-width: 980px) {
    .auth-page[b-3pci8i7b8q] {
        grid-template-columns: minmax(0, 1fr);
    }

    .brand-panel[b-3pci8i7b8q] {
        gap: 28px;
        padding: 32px 28px;
    }

    .signin-footer[b-3pci8i7b8q] {
        display: none;
    }
}

@media (max-width: 720px) {
    .brand-panel[b-3pci8i7b8q] {
        padding: 24px 20px;
    }

    .brand-title[b-3pci8i7b8q] {
        font-size: 1.5rem;
    }

    .brand-copy[b-3pci8i7b8q] {
        font-size: 0.9rem;
    }

    .signin-panel[b-3pci8i7b8q] {
        padding: 28px 20px 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth-page *[b-3pci8i7b8q],
    .auth-page *[b-3pci8i7b8q]::before,
    .auth-page *[b-3pci8i7b8q]::after {
        transition-duration: 0.01ms !important;
    }
}

/* ── table fundamentals, reused by both tables on this page ──────────────────────────────────────────────────── */
.decision-table-scroll[b-3pci8i7b8q] {
    max-width: 100%;
    overflow-x: auto;
    background: var(--auth-white);
    border: 1px solid var(--auth-line);
    border-radius: 2px;
}

.decision-table-scroll:focus-visible[b-3pci8i7b8q] {
    outline: 3px solid var(--auth-focus);
    outline-offset: 3px;
}

.decision-table[b-3pci8i7b8q] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    line-height: 1.45;
}

.decision-table caption[b-3pci8i7b8q] {
    padding: 10px 12px;
    font-size: 0.8125rem;
    text-align: start;
    color: var(--auth-muted);
    border-bottom: 1px solid var(--auth-line);
}

.decision-table th[b-3pci8i7b8q],
.decision-table td[b-3pci8i7b8q] {
    padding: 8px 12px;
    text-align: start;
    vertical-align: top;
    border-bottom: 1px solid var(--auth-line);
    overflow-wrap: anywhere;
}

.decision-table thead th[b-3pci8i7b8q] {
    position: sticky;
    top: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--auth-muted);
    white-space: nowrap;
    background: var(--auth-paper);
    border-bottom: 1px solid var(--auth-line-strong);
}

.decision-table tbody th[b-3pci8i7b8q] {
    font-weight: 600;
}

/* ── the queue: a wide page, because a queue is a workspace and not a card ───────────────────────────────────── */
.auth-page.actions-wide[b-3pci8i7b8q] {
    grid-template-columns: minmax(220px, 20%) minmax(0, 80%);
}

.actions-wide .brand-panel[b-3pci8i7b8q] {
    gap: 28px;
    padding: 32px 26px;
}

.actions-wide .brand-title[b-3pci8i7b8q] {
    font-size: 1.35rem;
}

.actions-wide .brand-copy[b-3pci8i7b8q] {
    font-size: 0.85rem;
}

.actions-wide .signin-panel[b-3pci8i7b8q] {
    align-items: flex-start;
    justify-content: flex-start;
    padding: 36px 32px;
}

.actions-wide .signin-card[b-3pci8i7b8q] {
    max-width: none;
}

.action-section-title[b-3pci8i7b8q] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.action-receipt[b-3pci8i7b8q] {
    display: grid;
    gap: 12px;
    padding: 14px 16px;
    background: var(--auth-white);
    border: 1px solid var(--auth-line-strong);
    border-radius: 2px;
}

/* THE ANSWER'S OWN STATEMENT OF HOW WIDE IT IS, at the top of the queue and never folded away: without it a queue
   that was read for one source only reads exactly like a complete one. */
.action-coverage[b-3pci8i7b8q] {
    margin: 0;
    padding: 12px 14px;
    font-size: 0.875rem;
    line-height: 1.55;
    overflow-wrap: anywhere;
    color: var(--auth-muted);
    background: var(--auth-white);
    border-left: 3px solid var(--auth-accent);
}

/* Something the person has to read before choosing: a choice whose item moved, an item with no review version, a
   note still owed. Each one is a sentence, never a colour that has to be interpreted. */
.action-flagged[b-3pci8i7b8q] {
    margin: 0;
    padding: 12px 14px;
    font-size: 0.875rem;
    line-height: 1.55;
    overflow-wrap: anywhere;
    background: var(--auth-white);
    border-left: 3px solid var(--auth-danger);
}

.action-filter[b-3pci8i7b8q] {
    display: grid;
    gap: 10px;
    padding: 14px 16px;
    background: var(--auth-white);
    border: 1px solid var(--auth-line);
    border-radius: 2px;
}

.action-filter-row[b-3pci8i7b8q] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: end;
}

.action-filter-row .field[b-3pci8i7b8q] {
    flex: 1 1 14rem;
}

.action-filter-buttons[b-3pci8i7b8q] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.action-small-button[b-3pci8i7b8q] {
    margin-top: 0;
    padding: 11px 14px;
    font-size: 0.875rem;
}

.action-clear[b-3pci8i7b8q] {
    color: var(--auth-accent-deep);
    font-size: 0.8125rem;
    font-weight: 600;
}

.action-count[b-3pci8i7b8q] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--auth-muted);
}

.action-summary[b-3pci8i7b8q] {
    display: grid;
    gap: 10px;
    padding: 14px 16px;
    background: var(--auth-white);
    border: 1px solid var(--auth-line-strong);
    border-radius: 2px;
}

.action-summary-line[b-3pci8i7b8q] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
}

.action-help[b-3pci8i7b8q],
.action-note[b-3pci8i7b8q] {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.55;
    overflow-wrap: anywhere;
    color: var(--auth-muted);
}

.action-form[b-3pci8i7b8q] {
    display: grid;
    gap: 16px;
}

/* ONE CARD PER OBLIGATION, so a person can see where one item ends and the next begins without a ruler. */
.action-item[b-3pci8i7b8q] {
    display: grid;
    gap: 12px;
    padding: 16px 18px;
    background: var(--auth-white);
    border: 1px solid var(--auth-line);
    border-radius: 2px;
}

/* A FILTERED-OUT ITEM IS HIDDEN, NEVER OMITTED. It still submits: the form's Units indices must stay contiguous from
   zero, and a filter changes what is seen, never what is decided. */
.action-offscreen[b-3pci8i7b8q] {
    display: none;
}

.action-title[b-3pci8i7b8q] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.action-meta[b-3pci8i7b8q] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin: 0;
    font-size: 0.8125rem;
    color: var(--auth-muted);
}

.action-meta-item[b-3pci8i7b8q],
.action-code[b-3pci8i7b8q] {
    overflow-wrap: anywhere;
}

.action-code[b-3pci8i7b8q] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8125rem;
}

.action-tag[b-3pci8i7b8q] {
    padding: 2px 8px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--auth-accent-deep);
    background: #e6f1ef;
    border-radius: 999px;
}

.action-summary-text[b-3pci8i7b8q] {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.55;
    overflow-wrap: anywhere;
    color: var(--auth-ink);
}

.action-detail[b-3pci8i7b8q] {
    display: grid;
    gap: 10px;
    padding: 12px 14px;
    background: var(--auth-paper);
    border-left: 3px solid var(--auth-line-strong);
}

.action-choice[b-3pci8i7b8q] {
    margin: 0;
    padding: 10px 14px 12px;
    border: 1px solid var(--auth-line);
    border-radius: 2px;
}

.action-choice legend[b-3pci8i7b8q] {
    padding: 0 6px;
    font-size: 0.8125rem;
    font-weight: 600;
}

.action-radio[b-3pci8i7b8q] {
    display: flex;
    gap: 8px;
    align-items: baseline;
    padding: 4px 0;
}

.action-radio label[b-3pci8i7b8q] {
    font-size: 0.9rem;
}

.action-submit-row[b-3pci8i7b8q] {
    display: grid;
    gap: 8px;
    padding: 16px 18px;
    background: var(--auth-white);
    border: 1px solid var(--auth-line-strong);
    border-radius: 2px;
}

.action-submit-row .submit-button[b-3pci8i7b8q] {
    justify-self: start;
    min-width: 14rem;
}

@media (max-width: 980px) {
    .auth-page.actions-wide[b-3pci8i7b8q] {
        grid-template-columns: minmax(0, 1fr);
    }

    .actions-wide .signin-panel[b-3pci8i7b8q] {
        padding: 24px 16px 40px;
    }
}
/* /Components/Pages/Activate/Activate.razor.rz.scp.css */
/*
 * The activation page's own styles.
 *
 * WHY THIS FILE EXISTS. The page was written reusing the sign-in page's class names, which live in Login.razor.css —
 * and Blazor CSS isolation SCOPES that file to Login.razor, so none of those rules could ever reach this page. It
 * rendered unstyled, and four of the class names it used (signin-card, signin-subtitle, signin-error, signin-note) were
 * not defined anywhere at all. The browser gate is what surfaced it.
 *
 * DELIBERATELY NOT a copy of Login.razor.css, and deliberately not a refactor of it. Login is an accepted visual
 * surface and moving its rules into a global sheet to serve a second page would put it at risk for a styling concern.
 * So this is a compact stylesheet for the markup THIS page has, declaring the same palette so the two agree by using
 * the same values rather than by sharing a file. The shared auth shell is worth extracting into one component the day
 * the sign-in surface is next opened; doing it inside a credential corrective is not that day.
 */

.auth-page[b-ldzpajf5fp] {
    --auth-paper: #f4f3ef;
    --auth-ink: #0b0d10;
    --auth-muted: #5f646c;
    --auth-line: #c9c8c3;
    --auth-line-strong: #9d9e9b;
    --auth-accent: #007a66;
    --auth-accent-deep: #005e50;
    --auth-danger: #a22b32;
    --auth-white: #fff;
    --auth-focus: #00a88a;

    min-width: 320px;
    min-height: 100dvh;
    display: grid;
    grid-template-columns: minmax(360px, 43%) minmax(0, 57%);
    overflow-x: hidden;
    color: var(--auth-ink);
    background: var(--auth-paper);
    font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.auth-page *[b-ldzpajf5fp],
.auth-page *[b-ldzpajf5fp]::before,
.auth-page *[b-ldzpajf5fp]::after {
    box-sizing: border-box;
}

/* THE SHELL'S OWN DEFAULTS LIVE IN ONE PLACE — wwwroot/css/auth-surface.css: `font: inherit` for every form control,
   and the shell's ink for inputs and links. A BUTTON states its own colour — see `.submit-button` below. */

.auth-page a:focus-visible[b-ldzpajf5fp],
.auth-page button:focus-visible[b-ldzpajf5fp],
.auth-page input:focus-visible[b-ldzpajf5fp],
.skip-link:focus-visible[b-ldzpajf5fp] {
    outline: 3px solid var(--auth-focus);
    outline-offset: 3px;
}

.skip-link[b-ldzpajf5fp] {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 20;
    padding: 10px 14px;
    color: #fff;
    background: #0b0d10;
    transform: translateY(-160%);
    transition: transform 160ms ease;
}

.skip-link:focus[b-ldzpajf5fp] {
    transform: translateY(0);
}

/* ── the brand side ─────────────────────────────────────────────────────────────────────────────────────────── */
.brand-panel[b-ldzpajf5fp] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 48px;
    padding: 48px 44px;
    color: #f2f1ec;
    background: linear-gradient(160deg, #10151a 0%, #0b0d10 60%, #0d1512 100%);
}

.brand-wordmark[b-ldzpajf5fp] {
    /* THE WORDMARK, as the website and the welcome email set it: IBM Plex Sans, weight 650, tight negative tracking,
       and the orange full stop. The email states it as -3.2px at 42px; written as a ratio here so it holds at any
       size. IBM Plex is already self-hosted for every page, so this costs no request. */
    font-family: 'IBM Plex Sans', Arial, sans-serif;
    font-size: 25px;
    line-height: 1;
    font-weight: 650;
    letter-spacing: -0.076em;
    font-synthesis: none;
    text-decoration: none;
}

.brand-wordmark-dot[b-ldzpajf5fp] {
    color: #ed895e;
}

.brand-message[b-ldzpajf5fp] {
    display: grid;
    gap: 14px;
}

.eyebrow[b-ldzpajf5fp] {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #8fb9ae;
}

.brand-title[b-ldzpajf5fp] {
    margin: 0;
    font-size: clamp(1.75rem, 3.2vw, 2.5rem);
    font-weight: 600;
    line-height: 1.15;
    text-wrap: balance;
}

.brand-copy[b-ldzpajf5fp] {
    margin: 0;
    max-width: 46ch;
    font-size: 0.975rem;
    line-height: 1.6;
    color: #b9bcbb;
}

.signin-footer[b-ldzpajf5fp] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    align-items: baseline;
    font-size: 0.8rem;
    color: #8b8f8e;
}

.signin-footer p[b-ldzpajf5fp] {
    margin: 0;
}

/* ── the form side ──────────────────────────────────────────────────────────────────────────────────────────── */
.signin-panel[b-ldzpajf5fp] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 40px;
}

.signin-card[b-ldzpajf5fp] {
    width: 100%;
    max-width: 27rem;
    display: grid;
    gap: 20px;
}

.signin-title[b-ldzpajf5fp] {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.2;
}

.signin-subtitle[b-ldzpajf5fp] {
    margin: 0;
    font-size: 0.925rem;
    line-height: 1.55;
    color: var(--auth-muted);
}

.signin-error[b-ldzpajf5fp],
.signin-note[b-ldzpajf5fp] {
    margin: 0;
    padding: 12px 14px;
    font-size: 0.875rem;
    line-height: 1.5;
    border-left: 3px solid var(--auth-danger);
    background: var(--auth-white);
}

.signin-note[b-ldzpajf5fp] {
    border-left-color: var(--auth-line-strong);
    color: var(--auth-muted);
}

.signin-form[b-ldzpajf5fp] {
    display: grid;
    gap: 16px;
}

.field[b-ldzpajf5fp] {
    display: grid;
    gap: 6px;
}

.field label[b-ldzpajf5fp] {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.field input[b-ldzpajf5fp] {
    width: 100%;
    padding: 11px 13px;
    color: var(--auth-ink);
    background: var(--auth-white);
    border: 1px solid var(--auth-line);
    border-radius: 2px;
    transition: border-color 120ms ease;
}

.field input[b-ldzpajf5fp]::placeholder {
    color: #9a9ea3;
}

.field input:hover[b-ldzpajf5fp] {
    border-color: #a9a8a3;
}

.field input:focus[b-ldzpajf5fp] {
    border-color: var(--auth-accent);
    outline-offset: 2px;
}

.submit-button[b-ldzpajf5fp] {
    margin-top: 4px;
    padding: 12px 16px;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--auth-white);
    background: var(--auth-accent);
    border: 0;
    border-radius: 2px;
    cursor: pointer;
    transition: background-color 120ms ease;
}

.submit-button:hover[b-ldzpajf5fp] {
    background: var(--auth-accent-deep);
}

.submit-button:disabled[b-ldzpajf5fp] {
    cursor: default;
    background: #7fa39b;
}

.access-note[b-ldzpajf5fp] {
    margin: 0;
    padding-top: 4px;
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--auth-muted);
    border-top: 1px solid var(--auth-line);
}

.access-note strong[b-ldzpajf5fp] {
    display: block;
    color: var(--auth-ink);
}

/* ── narrow screens: the brand panel becomes a header, the form takes the width ──────────────────────────────── */
@media (max-width: 980px) {
    .auth-page[b-ldzpajf5fp] {
        grid-template-columns: minmax(0, 1fr);
    }

    .brand-panel[b-ldzpajf5fp] {
        gap: 28px;
        padding: 32px 28px;
    }

    .signin-footer[b-ldzpajf5fp] {
        display: none;
    }
}

@media (max-width: 720px) {
    .brand-panel[b-ldzpajf5fp] {
        padding: 24px 20px;
    }

    .brand-title[b-ldzpajf5fp] {
        font-size: 1.5rem;
    }

    .brand-copy[b-ldzpajf5fp] {
        font-size: 0.9rem;
    }

    .signin-panel[b-ldzpajf5fp] {
        padding: 28px 20px 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth-page *[b-ldzpajf5fp],
    .auth-page *[b-ldzpajf5fp]::before,
    .auth-page *[b-ldzpajf5fp]::after {
        transition-duration: 0.01ms !important;
    }
}
/* /Components/Pages/Consent/Consent.razor.rz.scp.css */
/*
 * The consent page's own styles: who is asking, where the answer goes, and the two answers.
 *
 * The auth shell this page stands on is NOT here any more. It lives once, for this page and the decision page
 * together, in wwwroot/css/decision-surface.css - the two carried 555 identical lines each, made by copying one
 * from the other, so a change to one page silently did not reach the other.
 *
 * A Claude Design pass for this page is still owed.
 */

/* ── the consent page's own: who is asking, where the answer goes, and the two answers ───────────────────────── */

.consent-ask[b-bei6n51ass] {
    margin: 0 0 4px;
    font-size: 1.05rem;
    line-height: 1.5;
}

.consent-warning[b-bei6n51ass] {
    margin: 14px 0 0;
    padding: 12px 14px;
    border-left: 3px solid var(--auth-danger);
    color: var(--auth-ink);
    background: #fdf3f3;
    font-size: 0.95rem;
    line-height: 1.45;
}

.consent-site[b-bei6n51ass] {
    font-weight: 600;
    word-break: break-word;
}

.consent-actions[b-bei6n51ass] {
    display: flex;
    gap: 12px;
    align-items: stretch;
    margin-top: 18px;
}

.consent-actions .submit-button[b-bei6n51ass],
.consent-actions .decline-button[b-bei6n51ass] {
    flex: 1 1 0;
    margin: 0;
}
/* /Components/Pages/Domains/Domains.razor.rz.scp.css */
/*
 * Domains's own styles.
 *
 * WHY THIS FILE EXISTS, and it is the activation page's story again: the page reuses the sign-in page's class names,
 * which live in Login.razor.css — and Blazor CSS isolation SCOPES that file to Login.razor, so none of its rules can
 * reach another page. Without this the page renders as unstyled HTML.
 *
 * It is the SAME sheet the activation page carries, declared per page for the reason that file states: Login is an
 * accepted visual surface, and this product's auth pages should share one shell the day somebody extracts it rather
 * than each new page putting Login's rules at risk.
 */

.auth-page[b-s1gpfgfxbt] {
    --auth-paper: #f4f3ef;
    --auth-ink: #0b0d10;
    --auth-muted: #5f646c;
    --auth-line: #c9c8c3;
    --auth-line-strong: #9d9e9b;
    --auth-accent: #007a66;
    --auth-accent-deep: #005e50;
    --auth-danger: #a22b32;
    --auth-white: #fff;
    --auth-focus: #00a88a;

    min-width: 320px;
    min-height: 100dvh;
    display: grid;
    grid-template-columns: minmax(360px, 43%) minmax(0, 57%);
    overflow-x: hidden;
    color: var(--auth-ink);
    background: var(--auth-paper);
    font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.auth-page *[b-s1gpfgfxbt],
.auth-page *[b-s1gpfgfxbt]::before,
.auth-page *[b-s1gpfgfxbt]::after {
    box-sizing: border-box;
}

/* THE SHELL'S OWN DEFAULTS LIVE IN ONE PLACE — wwwroot/css/auth-surface.css: `font: inherit` for every form control,
   and the shell's ink for inputs and links. A BUTTON states its own colour — see `.submit-button` below. */

.auth-page a:focus-visible[b-s1gpfgfxbt],
.auth-page button:focus-visible[b-s1gpfgfxbt],
.auth-page input:focus-visible[b-s1gpfgfxbt],
.skip-link:focus-visible[b-s1gpfgfxbt] {
    outline: 3px solid var(--auth-focus);
    outline-offset: 3px;
}

.skip-link[b-s1gpfgfxbt] {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 20;
    padding: 10px 14px;
    color: #fff;
    background: #0b0d10;
    transform: translateY(-160%);
    transition: transform 160ms ease;
}

.skip-link:focus[b-s1gpfgfxbt] {
    transform: translateY(0);
}

/* ── the brand side ─────────────────────────────────────────────────────────────────────────────────────────── */
.brand-panel[b-s1gpfgfxbt] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 48px;
    padding: 48px 44px;
    color: #f2f1ec;
    background: linear-gradient(160deg, #10151a 0%, #0b0d10 60%, #0d1512 100%);
}

.brand-wordmark[b-s1gpfgfxbt] {
    /* THE WORDMARK, as the website and the welcome email set it: IBM Plex Sans, weight 650, tight negative tracking,
       and the orange full stop. The email states it as -3.2px at 42px; written as a ratio here so it holds at any
       size. IBM Plex is already self-hosted for every page, so this costs no request. */
    font-family: 'IBM Plex Sans', Arial, sans-serif;
    font-size: 25px;
    line-height: 1;
    font-weight: 650;
    letter-spacing: -0.076em;
    font-synthesis: none;
    text-decoration: none;
}

.brand-wordmark-dot[b-s1gpfgfxbt] {
    color: #ed895e;
}

.brand-message[b-s1gpfgfxbt] {
    display: grid;
    gap: 14px;
}

.eyebrow[b-s1gpfgfxbt] {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #8fb9ae;
}

.brand-title[b-s1gpfgfxbt] {
    margin: 0;
    font-size: clamp(1.75rem, 3.2vw, 2.5rem);
    font-weight: 600;
    line-height: 1.15;
    text-wrap: balance;
}

.brand-copy[b-s1gpfgfxbt] {
    margin: 0;
    max-width: 46ch;
    font-size: 0.975rem;
    line-height: 1.6;
    color: #b9bcbb;
}

.signin-footer[b-s1gpfgfxbt] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    align-items: baseline;
    font-size: 0.8rem;
    color: #8b8f8e;
}

.signin-footer p[b-s1gpfgfxbt] {
    margin: 0;
}

/* ── the form side ──────────────────────────────────────────────────────────────────────────────────────────── */
.signin-panel[b-s1gpfgfxbt] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 40px;
}

.signin-card[b-s1gpfgfxbt] {
    width: 100%;
    max-width: 27rem;
    display: grid;
    gap: 20px;
}

.signin-title[b-s1gpfgfxbt] {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.2;
}

.signin-subtitle[b-s1gpfgfxbt] {
    margin: 0;
    font-size: 0.925rem;
    line-height: 1.55;
    color: var(--auth-muted);
}

.signin-error[b-s1gpfgfxbt],
.signin-note[b-s1gpfgfxbt] {
    margin: 0;
    padding: 12px 14px;
    font-size: 0.875rem;
    line-height: 1.5;
    border-left: 3px solid var(--auth-danger);
    background: var(--auth-white);
}

.signin-note[b-s1gpfgfxbt] {
    border-left-color: var(--auth-line-strong);
    color: var(--auth-muted);
}

.signin-form[b-s1gpfgfxbt] {
    display: grid;
    gap: 16px;
}

.field[b-s1gpfgfxbt] {
    display: grid;
    gap: 6px;
}

.field label[b-s1gpfgfxbt] {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.field input[b-s1gpfgfxbt] {
    width: 100%;
    padding: 11px 13px;
    color: var(--auth-ink);
    background: var(--auth-white);
    border: 1px solid var(--auth-line);
    border-radius: 2px;
    transition: border-color 120ms ease;
}

.field input[b-s1gpfgfxbt]::placeholder {
    color: #9a9ea3;
}

.field input:hover[b-s1gpfgfxbt] {
    border-color: #a9a8a3;
}

.field input:focus[b-s1gpfgfxbt] {
    border-color: var(--auth-accent);
    outline-offset: 2px;
}

.submit-button[b-s1gpfgfxbt] {
    margin-top: 4px;
    padding: 12px 16px;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--auth-white);
    background: var(--auth-accent);
    border: 0;
    border-radius: 2px;
    cursor: pointer;
    transition: background-color 120ms ease;
}

.submit-button:hover[b-s1gpfgfxbt] {
    background: var(--auth-accent-deep);
}

.submit-button:disabled[b-s1gpfgfxbt] {
    cursor: default;
    background: #7fa39b;
}

.access-note[b-s1gpfgfxbt] {
    margin: 0;
    padding-top: 4px;
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--auth-muted);
    border-top: 1px solid var(--auth-line);
}

.access-note strong[b-s1gpfgfxbt] {
    display: block;
    color: var(--auth-ink);
}

/* ── narrow screens: the brand panel becomes a header, the form takes the width ──────────────────────────────── */
@media (max-width: 980px) {
    .auth-page[b-s1gpfgfxbt] {
        grid-template-columns: minmax(0, 1fr);
    }

    .brand-panel[b-s1gpfgfxbt] {
        gap: 28px;
        padding: 32px 28px;
    }

    .signin-footer[b-s1gpfgfxbt] {
        display: none;
    }
}

@media (max-width: 720px) {
    .brand-panel[b-s1gpfgfxbt] {
        padding: 24px 20px;
    }

    .brand-title[b-s1gpfgfxbt] {
        font-size: 1.5rem;
    }

    .brand-copy[b-s1gpfgfxbt] {
        font-size: 0.9rem;
    }

    .signin-panel[b-s1gpfgfxbt] {
        padding: 28px 20px 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth-page *[b-s1gpfgfxbt],
    .auth-page *[b-s1gpfgfxbt]::before,
    .auth-page *[b-s1gpfgfxbt]::after {
        transition-duration: 0.01ms !important;
    }
}

/* ── the domains list ────────────────────────────────────────────────────────────────────────────────────────────
 * The only markup this page carries that no other auth page has: what the company holds, and what each one is
 * waiting for. Same palette and same type as everything above, declared here because a state a person has to act on
 * has to be readable — "proved", "waiting for the code", "the code expired" are three different situations, and the
 * colour is what tells them apart at a glance.
 */
.domain-list[b-s1gpfgfxbt] {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    border-top: 1px solid var(--auth-line);
}

.domain-row[b-s1gpfgfxbt] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--auth-line);
}

.domain-name[b-s1gpfgfxbt] {
    font-weight: 600;
    letter-spacing: -0.01em;
}

.domain-state[b-s1gpfgfxbt] {
    font-size: 13px;
    line-height: 20px;
    color: var(--auth-muted);
}

.domain-proved[b-s1gpfgfxbt] {
    color: var(--auth-accent-deep);
}

.domain-waiting[b-s1gpfgfxbt] {
    color: var(--auth-ink);
}

.domain-stale[b-s1gpfgfxbt] {
    color: var(--auth-danger);
}
/* /Components/Pages/Error/Error.razor.rz.scp.css */
.error-title[b-nwhe8ui33k] { color: #b32121; }
/* /Components/Pages/Forgot/Forgot.razor.rz.scp.css */
/*
 * Forgot's own styles.
 *
 * WHY THIS FILE EXISTS, and it is the activation page's story again: the page reuses the sign-in page's class names,
 * which live in Login.razor.css — and Blazor CSS isolation SCOPES that file to Login.razor, so none of its rules can
 * reach another page. Without this the page renders as unstyled HTML.
 *
 * It is the SAME sheet the activation page carries, declared per page for the reason that file states: Login is an
 * accepted visual surface, and this product's auth pages should share one shell the day somebody extracts it rather
 * than each new page putting Login's rules at risk.
 */

.auth-page[b-io844o6lyd] {
    --auth-paper: #f4f3ef;
    --auth-ink: #0b0d10;
    --auth-muted: #5f646c;
    --auth-line: #c9c8c3;
    --auth-line-strong: #9d9e9b;
    --auth-accent: #007a66;
    --auth-accent-deep: #005e50;
    --auth-danger: #a22b32;
    --auth-white: #fff;
    --auth-focus: #00a88a;

    min-width: 320px;
    min-height: 100dvh;
    display: grid;
    grid-template-columns: minmax(360px, 43%) minmax(0, 57%);
    overflow-x: hidden;
    color: var(--auth-ink);
    background: var(--auth-paper);
    font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.auth-page *[b-io844o6lyd],
.auth-page *[b-io844o6lyd]::before,
.auth-page *[b-io844o6lyd]::after {
    box-sizing: border-box;
}

/* THE SHELL'S OWN DEFAULTS LIVE IN ONE PLACE — wwwroot/css/auth-surface.css: `font: inherit` for every form control,
   and the shell's ink for inputs and links. A BUTTON states its own colour — see `.submit-button` below. */

.auth-page a:focus-visible[b-io844o6lyd],
.auth-page button:focus-visible[b-io844o6lyd],
.auth-page input:focus-visible[b-io844o6lyd],
.skip-link:focus-visible[b-io844o6lyd] {
    outline: 3px solid var(--auth-focus);
    outline-offset: 3px;
}

.skip-link[b-io844o6lyd] {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 20;
    padding: 10px 14px;
    color: #fff;
    background: #0b0d10;
    transform: translateY(-160%);
    transition: transform 160ms ease;
}

.skip-link:focus[b-io844o6lyd] {
    transform: translateY(0);
}

/* ── the brand side ─────────────────────────────────────────────────────────────────────────────────────────── */
.brand-panel[b-io844o6lyd] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 48px;
    padding: 48px 44px;
    color: #f2f1ec;
    background: linear-gradient(160deg, #10151a 0%, #0b0d10 60%, #0d1512 100%);
}

.brand-wordmark[b-io844o6lyd] {
    /* THE WORDMARK, as the website and the welcome email set it: IBM Plex Sans, weight 650, tight negative tracking,
       and the orange full stop. The email states it as -3.2px at 42px; written as a ratio here so it holds at any
       size. IBM Plex is already self-hosted for every page, so this costs no request. */
    font-family: 'IBM Plex Sans', Arial, sans-serif;
    font-size: 25px;
    line-height: 1;
    font-weight: 650;
    letter-spacing: -0.076em;
    font-synthesis: none;
    text-decoration: none;
}

.brand-wordmark-dot[b-io844o6lyd] {
    color: #ed895e;
}

.brand-message[b-io844o6lyd] {
    display: grid;
    gap: 14px;
}

.eyebrow[b-io844o6lyd] {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #8fb9ae;
}

.brand-title[b-io844o6lyd] {
    margin: 0;
    font-size: clamp(1.75rem, 3.2vw, 2.5rem);
    font-weight: 600;
    line-height: 1.15;
    text-wrap: balance;
}

.brand-copy[b-io844o6lyd] {
    margin: 0;
    max-width: 46ch;
    font-size: 0.975rem;
    line-height: 1.6;
    color: #b9bcbb;
}

.signin-footer[b-io844o6lyd] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    align-items: baseline;
    font-size: 0.8rem;
    color: #8b8f8e;
}

.signin-footer p[b-io844o6lyd] {
    margin: 0;
}

/* ── the form side ──────────────────────────────────────────────────────────────────────────────────────────── */
.signin-panel[b-io844o6lyd] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 40px;
}

.signin-card[b-io844o6lyd] {
    width: 100%;
    max-width: 27rem;
    display: grid;
    gap: 20px;
}

.signin-title[b-io844o6lyd] {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.2;
}

.signin-subtitle[b-io844o6lyd] {
    margin: 0;
    font-size: 0.925rem;
    line-height: 1.55;
    color: var(--auth-muted);
}

.signin-error[b-io844o6lyd],
.signin-note[b-io844o6lyd] {
    margin: 0;
    padding: 12px 14px;
    font-size: 0.875rem;
    line-height: 1.5;
    border-left: 3px solid var(--auth-danger);
    background: var(--auth-white);
}

.signin-note[b-io844o6lyd] {
    border-left-color: var(--auth-line-strong);
    color: var(--auth-muted);
}

.signin-form[b-io844o6lyd] {
    display: grid;
    gap: 16px;
}

.field[b-io844o6lyd] {
    display: grid;
    gap: 6px;
}

.field label[b-io844o6lyd] {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.field input[b-io844o6lyd] {
    width: 100%;
    padding: 11px 13px;
    color: var(--auth-ink);
    background: var(--auth-white);
    border: 1px solid var(--auth-line);
    border-radius: 2px;
    transition: border-color 120ms ease;
}

.field input[b-io844o6lyd]::placeholder {
    color: #9a9ea3;
}

.field input:hover[b-io844o6lyd] {
    border-color: #a9a8a3;
}

.field input:focus[b-io844o6lyd] {
    border-color: var(--auth-accent);
    outline-offset: 2px;
}

.submit-button[b-io844o6lyd] {
    margin-top: 4px;
    padding: 12px 16px;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--auth-white);
    background: var(--auth-accent);
    border: 0;
    border-radius: 2px;
    cursor: pointer;
    transition: background-color 120ms ease;
}

.submit-button:hover[b-io844o6lyd] {
    background: var(--auth-accent-deep);
}

.submit-button:disabled[b-io844o6lyd] {
    cursor: default;
    background: #7fa39b;
}

.access-note[b-io844o6lyd] {
    margin: 0;
    padding-top: 4px;
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--auth-muted);
    border-top: 1px solid var(--auth-line);
}

.access-note strong[b-io844o6lyd] {
    display: block;
    color: var(--auth-ink);
}

/* ── narrow screens: the brand panel becomes a header, the form takes the width ──────────────────────────────── */
@media (max-width: 980px) {
    .auth-page[b-io844o6lyd] {
        grid-template-columns: minmax(0, 1fr);
    }

    .brand-panel[b-io844o6lyd] {
        gap: 28px;
        padding: 32px 28px;
    }

    .signin-footer[b-io844o6lyd] {
        display: none;
    }
}

@media (max-width: 720px) {
    .brand-panel[b-io844o6lyd] {
        padding: 24px 20px;
    }

    .brand-title[b-io844o6lyd] {
        font-size: 1.5rem;
    }

    .brand-copy[b-io844o6lyd] {
        font-size: 0.9rem;
    }

    .signin-panel[b-io844o6lyd] {
        padding: 28px 20px 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth-page *[b-io844o6lyd],
    .auth-page *[b-io844o6lyd]::before,
    .auth-page *[b-io844o6lyd]::after {
        transition-duration: 0.01ms !important;
    }
}
/* /Components/Pages/Login/Login.razor.rz.scp.css */
.auth-page[b-7ltsea0ygl] {
    --auth-paper: #f4f3ef;
    --auth-paper-strong: #ebeae5;
    --auth-ink: #0b0d10;
    --auth-muted: #5f646c;
    --auth-line: #c9c8c3;
    --auth-line-strong: #9d9e9b;
    --auth-accent: #007a66;
    --auth-accent-deep: #005e50;
    --auth-danger: #a22b32;
    /* AN ADMINISTRATOR'S APPROVAL OF CROLLE, AND ITS FAILURE — the approved sign-in design's own banner numbers
       (docs/Design/vendor-portal/Sign In.dc.html, the `banner` tones: green #DDEFE9/#A9D6C7/#0B4F40, red
       #F7E7E4/#E1B9B1/#6E231B). They are the design's, not this page's, on purpose: the two consent states were
       being drawn as plain grey text and as the sign-in refusal respectively, and neither is what the design says an
       outcome looks like. The rest of this page's palette is untouched — the one look belongs to the sign-in family's
       own design pass. */
    --auth-notice-granted-surface: #ddefe9;
    --auth-notice-granted-line: #a9d6c7;
    --auth-notice-granted-ink: #0b4f40;
    --auth-notice-refused-surface: #f7e7e4;
    --auth-notice-refused-line: #e1b9b1;
    --auth-notice-refused-ink: #6e231b;
    --auth-white: #fff;
    --auth-focus: #00a88a;
    min-width: 320px;
    min-height: 100dvh;
    display: grid;
    grid-template-columns: minmax(360px, 43%) minmax(0, 57%);
    overflow-x: hidden;
    color: var(--auth-ink);
    background: var(--auth-paper);
    font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-synthesis: none;
    letter-spacing: 0;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

.auth-page *[b-7ltsea0ygl],
.auth-page *[b-7ltsea0ygl]::before,
.auth-page *[b-7ltsea0ygl]::after {
    box-sizing: border-box;
}

/* THE SHELL'S OWN DEFAULTS LIVE IN ONE PLACE — wwwroot/css/auth-surface.css: `font: inherit` for every form control,
   and the shell's ink for inputs and links. A BUTTON IS NOT IN THAT LIST, and that is the fix: this file's own
   `.submit-button { color: var(--auth-white); background: var(--auth-ink) }` was being overruled by a copy of
   `color: inherit` that outranks it, so the word "Sign in" was #0b0d10 on #0b0d10. */

.auth-page button[b-7ltsea0ygl],
.auth-page a[b-7ltsea0ygl] {
    touch-action: manipulation;
}

.auth-page a:focus-visible[b-7ltsea0ygl],
.auth-page button:focus-visible[b-7ltsea0ygl],
.auth-page input:focus-visible[b-7ltsea0ygl],
.skip-link:focus-visible[b-7ltsea0ygl] {
    outline: 3px solid var(--auth-focus, #00a88a);
    outline-offset: 3px;
}

.skip-link[b-7ltsea0ygl] {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 20;
    padding: 10px 14px;
    color: #fff;
    background: #0b0d10;
    transform: translateY(-160%);
    transition: transform 160ms ease;
}

.skip-link:focus[b-7ltsea0ygl] {
    transform: translateY(0);
}

.brand-panel[b-7ltsea0ygl] {
    position: relative;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    padding: clamp(28px, 4vw, 64px);
    color: var(--auth-white);
    background: var(--auth-accent);
    isolation: isolate;
}

.brand-panel[b-7ltsea0ygl]::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    opacity: .28;
    background:
        linear-gradient(90deg, transparent calc(25% - .5px), rgb(255 255 255 / 24%) 25%, transparent calc(25% + .5px)),
        linear-gradient(90deg, transparent calc(50% - .5px), rgb(255 255 255 / 24%) 50%, transparent calc(50% + .5px)),
        linear-gradient(90deg, transparent calc(75% - .5px), rgb(255 255 255 / 24%) 75%, transparent calc(75% + .5px)),
        linear-gradient(0deg, transparent calc(33.333% - .5px), rgb(255 255 255 / 20%) 33.333%, transparent calc(33.333% + .5px)),
        linear-gradient(0deg, transparent calc(66.666% - .5px), rgb(255 255 255 / 20%) 66.666%, transparent calc(66.666% + .5px));
}

.brand-panel[b-7ltsea0ygl]::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -20%;
    left: -45%;
    width: 126%;
    aspect-ratio: 1;
    border: 1px solid rgb(255 255 255 / 40%);
    border-radius: 50%;
    animation: auth-orbit-b-7ltsea0ygl 18s linear infinite;
}

.brand-wordmark[b-7ltsea0ygl] {
    width: max-content;
    color: var(--auth-white);
    /* THE WORDMARK, as the website and the welcome email set it: IBM Plex Sans, weight 650, tight negative tracking,
       and the orange full stop. The email states it as -3.2px at 42px; written as a ratio here so it holds at any
       size. IBM Plex is already self-hosted for every page, so this costs no request. */
    font-family: 'IBM Plex Sans', Arial, sans-serif;
    font-size: 25px;
    line-height: 1;
    font-weight: 650;
    letter-spacing: -0.076em;
    font-synthesis: none;
    text-decoration: none;
}

.brand-wordmark-dot[b-7ltsea0ygl] {
    color: #ed895e;
}

.brand-message[b-7ltsea0ygl] {
    max-width: 640px;
    padding-block: 88px;
}

.eyebrow[b-7ltsea0ygl],
.signin-kicker[b-7ltsea0ygl] {
    font-family: "Space Mono", Consolas, monospace;
    font-size: 11px;
    line-height: 1.5;
    font-weight: 700;
    text-transform: uppercase;
}

.eyebrow[b-7ltsea0ygl] {
    margin: 0 0 24px;
}

.brand-title[b-7ltsea0ygl] {
    max-width: 650px;
    margin: 0;
    font-size: clamp(48px, 5vw, 84px);
    line-height: .94;
    font-weight: 760;
    text-wrap: balance;
}

.brand-copy[b-7ltsea0ygl] {
    max-width: 580px;
    margin: 32px 0 0;
    font-size: clamp(17px, 1.5vw, 21px);
    line-height: 1.45;
    color: rgb(255 255 255 / 86%);
}

.access-principles[b-7ltsea0ygl] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid rgb(255 255 255 / 45%);
}

.access-principles div[b-7ltsea0ygl] {
    min-width: 0;
    padding: 18px 16px 0 0;
}

.access-principles div + div[b-7ltsea0ygl] {
    padding-left: 16px;
    border-left: 1px solid rgb(255 255 255 / 32%);
}

.access-principles small[b-7ltsea0ygl],
.access-principles strong[b-7ltsea0ygl] {
    display: block;
}

.access-principles small[b-7ltsea0ygl] {
    margin-bottom: 6px;
    font-family: "Space Mono", Consolas, monospace;
    font-size: 10px;
    line-height: 1.4;
    text-transform: uppercase;
    color: rgb(255 255 255 / 68%);
}

.access-principles strong[b-7ltsea0ygl] {
    font-size: 13px;
    line-height: 1.4;
    font-weight: 650;
}

.signin-panel[b-7ltsea0ygl] {
    min-height: 100dvh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    padding: clamp(24px, 3.5vw, 56px) clamp(24px, 7vw, 112px);
    background: var(--auth-paper);
}

.signin-top[b-7ltsea0ygl] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.back-link[b-7ltsea0ygl] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #41464d;
    text-decoration: none;
    font-size: 13px;
    font-weight: 620;
}

.back-link span[b-7ltsea0ygl] {
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    border: 1px solid var(--auth-ink);
    border-radius: 50%;
    transition: color 180ms ease, background 180ms ease, transform 180ms ease;
}

.back-link:hover[b-7ltsea0ygl] {
    color: var(--auth-ink);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.back-link:hover span[b-7ltsea0ygl] {
    color: var(--auth-white);
    background: var(--auth-ink);
    transform: translateX(-2px);
}

.signin-main[b-7ltsea0ygl] {
    width: min(100%, 440px);
    align-self: center;
    justify-self: center;
    padding-block: 64px;
}

.signin-heading[b-7ltsea0ygl] {
    margin-bottom: 34px;
}

.signin-kicker[b-7ltsea0ygl] {
    margin: 0 0 14px;
    color: var(--auth-accent);
}

.signin-title[b-7ltsea0ygl] {
    margin: 0;
    font-size: clamp(40px, 4vw, 60px);
    line-height: .98;
    font-weight: 760;
}

.signin-intro[b-7ltsea0ygl] {
    margin: 18px 0 0;
    color: var(--auth-muted);
    font-size: 16px;
    line-height: 1.5;
}

/* WHAT AN ADMINISTRATOR'S APPROVAL CAME TO, DRAWN THE WAY THE DESIGN DRAWS AN OUTCOME: a tinted box with its own
   border and ink, green when it worked and red when it did not. It was plain grey text when it worked and the
   sign-in refusal's own notice when it did not, so the one state an administrator most needs to recognise — "the
   approval went through" — had no shape at all on the page.

   EVERY NUMBER BELOW IS THE DESIGN'S OWN, not this page's: the banner at
   docs/Design/vendor-portal/Sign In.dc.html, box `display:flex; flex-direction:column; gap:4px; padding:14px 16px;
   border-radius:4px; border:1px solid <line>; background:<surface>; color:<ink>`, and its leading line at
   `font-size:14px; font-weight:700; line-height:1.4`. The design draws a whole sentence in that bold leading line
   ("That email and password don't match."), which is exactly what each of these two sentences is. The margin is the
   only thing the design does not state: it lays banners out in a flex column, and this page spaces its blocks. */
.auth-notice[b-7ltsea0ygl] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0 0 18px;
    padding: 14px 16px;
    border: 1px solid;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
}

.auth-notice--granted[b-7ltsea0ygl] {
    color: var(--auth-notice-granted-ink);
    border-color: var(--auth-notice-granted-line);
    background: var(--auth-notice-granted-surface);
}

.auth-notice--refused[b-7ltsea0ygl] {
    color: var(--auth-notice-refused-ink);
    border-color: var(--auth-notice-refused-line);
    background: var(--auth-notice-refused-surface);
}

.auth-error[b-7ltsea0ygl] {
    margin: 0 0 18px;
    padding: 12px 14px;
    color: var(--auth-danger);
    border-left: 3px solid var(--auth-danger);
    background: rgb(162 43 50 / 7%);
    font-size: 14px;
    line-height: 1.45;
}

.microsoft-button[b-7ltsea0ygl],
.submit-button[b-7ltsea0ygl] {
    width: 100%;
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 660;
    text-decoration: none;
    transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease;
}

.microsoft-button[b-7ltsea0ygl] {
    color: var(--auth-ink);
    background: var(--auth-white);
    border: 1px solid var(--auth-line-strong);
}

.microsoft-button:hover[b-7ltsea0ygl] {
    border-color: var(--auth-ink);
    background: #fafafa;
}

.microsoft-button[data-loading="true"][b-7ltsea0ygl] {
    cursor: wait;
    opacity: .68;
}

.microsoft-logo[b-7ltsea0ygl] {
    width: 18px;
    height: 18px;
    flex: none;
}

.divider[b-7ltsea0ygl] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 24px 0;
    color: var(--auth-muted);
    font-size: 12px;
    line-height: 1.4;
}

.divider[b-7ltsea0ygl]::before,
.divider[b-7ltsea0ygl]::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--auth-line);
}

.signin-form[b-7ltsea0ygl] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* The identity-shape switch. Logical properties throughout (inline-start/end, not left/right) so the control
   reverses correctly under RTL along with the rest of the page. */
.mode-switch[b-7ltsea0ygl] {
    margin: 0;
    padding: 0;
    border: 0;
    min-inline-size: 0;
}

.mode-switch legend[b-7ltsea0ygl] {
    padding: 0;
    margin-block-end: 8px;
    color: #34383e;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 650;
}

.segmented[b-7ltsea0ygl] {
    display: flex;
    padding: 3px;
    gap: 3px;
    background: var(--auth-line);
    border-radius: 4px;
}

/* The radio itself is the accessible control; it is taken out of the visual flow but never out of the accessibility
   tree, so arrow keys, grouping and selected state all still work. Not display:none, which would remove it. */
.segmented input[type="radio"][b-7ltsea0ygl] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.segmented label[b-7ltsea0ygl] {
    flex: 1;
    display: grid;
    place-items: center;
    /* 44px, not 40: the mobile gate measured a 160×40 tap target, under the 44px touch guideline. */
    min-height: 44px;
    padding: 0 12px;
    border-radius: 3px;
    color: #4c5158;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.3;
    text-align: center;
    cursor: pointer;
    transition: background-color 160ms ease, color 160ms ease;
}

.segmented input[type="radio"]:checked + label[b-7ltsea0ygl] {
    color: var(--auth-ink);
    background: var(--auth-white);
    box-shadow: 0 1px 2px rgba(16, 18, 20, 0.14);
}

.segmented input[type="radio"]:focus-visible + label[b-7ltsea0ygl] {
    outline: 2px solid var(--auth-accent);
    outline-offset: 2px;
}

.segmented label:hover[b-7ltsea0ygl] {
    color: var(--auth-ink);
}

@media (prefers-reduced-motion: reduce) {
    .segmented label[b-7ltsea0ygl] {
        transition: none;
    }
}

.field[b-7ltsea0ygl] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* A hidden shape must stay hidden: .field sets display:flex, which would otherwise beat the hidden attribute. */
.field[hidden][b-7ltsea0ygl] {
    display: none;
}

.field label[b-7ltsea0ygl] {
    color: #34383e;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 650;
}

.password-wrap[b-7ltsea0ygl] {
    position: relative;
}

.field input[b-7ltsea0ygl] {
    width: 100%;
    height: 52px;
    padding: 0 14px;
    color: var(--auth-ink);
    background: var(--auth-white);
    border: 1px solid var(--auth-line-strong);
    border-radius: 4px;
    font-size: 16px;
    line-height: 1;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.password-wrap input[b-7ltsea0ygl] {
    padding-right: 52px;
}

.field input[b-7ltsea0ygl]::placeholder {
    color: #8b8f94;
    opacity: 1;
}

.field input:hover[b-7ltsea0ygl] {
    border-color: #777b80;
}

.field input:focus[b-7ltsea0ygl] {
    border-color: var(--auth-accent);
    box-shadow: 0 0 0 1px var(--auth-accent);
    outline: none;
}

.field input[aria-invalid="true"][b-7ltsea0ygl] {
    border-color: var(--auth-danger);
}

.toggle-password[b-7ltsea0ygl] {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    padding: 0;
    color: #4c5158;
    background: transparent;
    border: 0;
    border-radius: 3px;
    cursor: pointer;
}

.toggle-password:hover[b-7ltsea0ygl] {
    color: var(--auth-ink);
    background: var(--auth-paper-strong);
}

.toggle-password svg[b-7ltsea0ygl] {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.caps-lock[b-7ltsea0ygl] {
    display: none;
    margin: -2px 0 0;
    color: var(--auth-muted);
    font-size: 12px;
    line-height: 1.4;
}

.caps-lock[data-visible="true"][b-7ltsea0ygl] {
    display: block;
}

.submit-button[b-7ltsea0ygl] {
    margin-top: 4px;
    color: var(--auth-white);
    background: var(--auth-ink);
    border: 1px solid var(--auth-ink);
}

.submit-button:hover[b-7ltsea0ygl] {
    color: var(--auth-white);
    background: var(--auth-accent-deep);
    border-color: var(--auth-accent-deep);
}

.submit-button:active[b-7ltsea0ygl] {
    transform: translateY(1px);
}

.submit-button:disabled[b-7ltsea0ygl] {
    cursor: wait;
    opacity: .68;
}

.access-note[b-7ltsea0ygl] {
    margin: 22px 0 0;
    padding-top: 18px;
    color: var(--auth-muted);
    border-top: 1px solid var(--auth-line);
    font-size: 13px;
    line-height: 1.5;
}

.access-note strong[b-7ltsea0ygl] {
    color: #34383e;
    font-weight: 650;
}

.signin-footer[b-7ltsea0ygl] {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    color: var(--auth-muted);
    font-size: 12px;
}

.signin-footer p[b-7ltsea0ygl] {
    margin: 0;
}

@keyframes auth-orbit-b-7ltsea0ygl {
    to { transform: rotate(360deg); }
}

@media (max-width: 980px) {
    .auth-page[b-7ltsea0ygl] {
        grid-template-columns: minmax(300px, 38%) minmax(0, 62%);
    }

    .brand-panel[b-7ltsea0ygl] {
        padding: 32px;
    }

    .brand-title[b-7ltsea0ygl] {
        font-size: clamp(44px, 6vw, 64px);
    }

    .access-principles[b-7ltsea0ygl] {
        grid-template-columns: 1fr;
    }

    .access-principles div[b-7ltsea0ygl] {
        padding: 10px 0;
    }

    .access-principles div + div[b-7ltsea0ygl] {
        padding-left: 0;
        border-top: 1px solid rgb(255 255 255 / 24%);
        border-left: 0;
    }
}

@media (max-width: 720px) {
    .auth-page[b-7ltsea0ygl] {
        display: block;
    }

    .brand-panel[b-7ltsea0ygl] {
        min-height: 220px;
        display: block;
        padding: 24px;
    }

    .brand-panel[b-7ltsea0ygl]::before {
        top: -180%;
        left: 28%;
        width: 90%;
    }

    .brand-message[b-7ltsea0ygl] {
        padding: 48px 0 6px;
    }

    .eyebrow[b-7ltsea0ygl] {
        margin-bottom: 12px;
    }

    .brand-title[b-7ltsea0ygl] {
        max-width: 500px;
        font-size: clamp(34px, 10vw, 50px);
        line-height: .98;
    }

    .brand-copy[b-7ltsea0ygl],
    .access-principles[b-7ltsea0ygl] {
        display: none;
    }

    .signin-panel[b-7ltsea0ygl] {
        min-height: calc(100dvh - 220px);
        padding: 20px 24px 24px;
    }

    .signin-top[b-7ltsea0ygl] {
        justify-content: flex-start;
    }

    .signin-main[b-7ltsea0ygl] {
        width: 100%;
        padding-block: 52px;
    }

    .signin-title[b-7ltsea0ygl] {
        font-size: 42px;
    }

    .signin-footer[b-7ltsea0ygl] {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }
}

@media (max-width: 390px) {
    .brand-panel[b-7ltsea0ygl],
    .signin-panel[b-7ltsea0ygl] {
        padding-inline: 18px;
    }

    .signin-main[b-7ltsea0ygl] {
        padding-block: 42px;
    }

    .signin-heading[b-7ltsea0ygl] {
        margin-bottom: 28px;
    }

    .signin-title[b-7ltsea0ygl] {
        font-size: 38px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth-page *[b-7ltsea0ygl],
    .auth-page *[b-7ltsea0ygl]::before,
    .auth-page *[b-7ltsea0ygl]::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
    }
}
/* /Components/Pages/Reset/Reset.razor.rz.scp.css */
/*
 * Reset's own styles.
 *
 * WHY THIS FILE EXISTS, and it is the activation page's story again: the page reuses the sign-in page's class names,
 * which live in Login.razor.css — and Blazor CSS isolation SCOPES that file to Login.razor, so none of its rules can
 * reach another page. Without this the page renders as unstyled HTML.
 *
 * It is the SAME sheet the activation page carries, declared per page for the reason that file states: Login is an
 * accepted visual surface, and this product's auth pages should share one shell the day somebody extracts it rather
 * than each new page putting Login's rules at risk.
 */

.auth-page[b-tvei64n619] {
    --auth-paper: #f4f3ef;
    --auth-ink: #0b0d10;
    --auth-muted: #5f646c;
    --auth-line: #c9c8c3;
    --auth-line-strong: #9d9e9b;
    --auth-accent: #007a66;
    --auth-accent-deep: #005e50;
    --auth-danger: #a22b32;
    --auth-white: #fff;
    --auth-focus: #00a88a;

    min-width: 320px;
    min-height: 100dvh;
    display: grid;
    grid-template-columns: minmax(360px, 43%) minmax(0, 57%);
    overflow-x: hidden;
    color: var(--auth-ink);
    background: var(--auth-paper);
    font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.auth-page *[b-tvei64n619],
.auth-page *[b-tvei64n619]::before,
.auth-page *[b-tvei64n619]::after {
    box-sizing: border-box;
}

/* THE SHELL'S OWN DEFAULTS LIVE IN ONE PLACE — wwwroot/css/auth-surface.css: `font: inherit` for every form control,
   and the shell's ink for inputs and links. A BUTTON states its own colour — see `.submit-button` below. */

.auth-page a:focus-visible[b-tvei64n619],
.auth-page button:focus-visible[b-tvei64n619],
.auth-page input:focus-visible[b-tvei64n619],
.skip-link:focus-visible[b-tvei64n619] {
    outline: 3px solid var(--auth-focus);
    outline-offset: 3px;
}

.skip-link[b-tvei64n619] {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 20;
    padding: 10px 14px;
    color: #fff;
    background: #0b0d10;
    transform: translateY(-160%);
    transition: transform 160ms ease;
}

.skip-link:focus[b-tvei64n619] {
    transform: translateY(0);
}

/* ── the brand side ─────────────────────────────────────────────────────────────────────────────────────────── */
.brand-panel[b-tvei64n619] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 48px;
    padding: 48px 44px;
    color: #f2f1ec;
    background: linear-gradient(160deg, #10151a 0%, #0b0d10 60%, #0d1512 100%);
}

.brand-wordmark[b-tvei64n619] {
    /* THE WORDMARK, as the website and the welcome email set it: IBM Plex Sans, weight 650, tight negative tracking,
       and the orange full stop. The email states it as -3.2px at 42px; written as a ratio here so it holds at any
       size. IBM Plex is already self-hosted for every page, so this costs no request. */
    font-family: 'IBM Plex Sans', Arial, sans-serif;
    font-size: 25px;
    line-height: 1;
    font-weight: 650;
    letter-spacing: -0.076em;
    font-synthesis: none;
    text-decoration: none;
}

.brand-wordmark-dot[b-tvei64n619] {
    color: #ed895e;
}

.brand-message[b-tvei64n619] {
    display: grid;
    gap: 14px;
}

.eyebrow[b-tvei64n619] {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #8fb9ae;
}

.brand-title[b-tvei64n619] {
    margin: 0;
    font-size: clamp(1.75rem, 3.2vw, 2.5rem);
    font-weight: 600;
    line-height: 1.15;
    text-wrap: balance;
}

.brand-copy[b-tvei64n619] {
    margin: 0;
    max-width: 46ch;
    font-size: 0.975rem;
    line-height: 1.6;
    color: #b9bcbb;
}

.signin-footer[b-tvei64n619] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    align-items: baseline;
    font-size: 0.8rem;
    color: #8b8f8e;
}

.signin-footer p[b-tvei64n619] {
    margin: 0;
}

/* ── the form side ──────────────────────────────────────────────────────────────────────────────────────────── */
.signin-panel[b-tvei64n619] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 40px;
}

.signin-card[b-tvei64n619] {
    width: 100%;
    max-width: 27rem;
    display: grid;
    gap: 20px;
}

.signin-title[b-tvei64n619] {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.2;
}

.signin-subtitle[b-tvei64n619] {
    margin: 0;
    font-size: 0.925rem;
    line-height: 1.55;
    color: var(--auth-muted);
}

.signin-error[b-tvei64n619],
.signin-note[b-tvei64n619] {
    margin: 0;
    padding: 12px 14px;
    font-size: 0.875rem;
    line-height: 1.5;
    border-left: 3px solid var(--auth-danger);
    background: var(--auth-white);
}

.signin-note[b-tvei64n619] {
    border-left-color: var(--auth-line-strong);
    color: var(--auth-muted);
}

.signin-form[b-tvei64n619] {
    display: grid;
    gap: 16px;
}

.field[b-tvei64n619] {
    display: grid;
    gap: 6px;
}

.field label[b-tvei64n619] {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.field input[b-tvei64n619] {
    width: 100%;
    padding: 11px 13px;
    color: var(--auth-ink);
    background: var(--auth-white);
    border: 1px solid var(--auth-line);
    border-radius: 2px;
    transition: border-color 120ms ease;
}

.field input[b-tvei64n619]::placeholder {
    color: #9a9ea3;
}

.field input:hover[b-tvei64n619] {
    border-color: #a9a8a3;
}

.field input:focus[b-tvei64n619] {
    border-color: var(--auth-accent);
    outline-offset: 2px;
}

.submit-button[b-tvei64n619] {
    margin-top: 4px;
    padding: 12px 16px;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--auth-white);
    background: var(--auth-accent);
    border: 0;
    border-radius: 2px;
    cursor: pointer;
    transition: background-color 120ms ease;
}

.submit-button:hover[b-tvei64n619] {
    background: var(--auth-accent-deep);
}

.submit-button:disabled[b-tvei64n619] {
    cursor: default;
    background: #7fa39b;
}

.access-note[b-tvei64n619] {
    margin: 0;
    padding-top: 4px;
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--auth-muted);
    border-top: 1px solid var(--auth-line);
}

.access-note strong[b-tvei64n619] {
    display: block;
    color: var(--auth-ink);
}

/* ── narrow screens: the brand panel becomes a header, the form takes the width ──────────────────────────────── */
@media (max-width: 980px) {
    .auth-page[b-tvei64n619] {
        grid-template-columns: minmax(0, 1fr);
    }

    .brand-panel[b-tvei64n619] {
        gap: 28px;
        padding: 32px 28px;
    }

    .signin-footer[b-tvei64n619] {
        display: none;
    }
}

@media (max-width: 720px) {
    .brand-panel[b-tvei64n619] {
        padding: 24px 20px;
    }

    .brand-title[b-tvei64n619] {
        font-size: 1.5rem;
    }

    .brand-copy[b-tvei64n619] {
        font-size: 0.9rem;
    }

    .signin-panel[b-tvei64n619] {
        padding: 28px 20px 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth-page *[b-tvei64n619],
    .auth-page *[b-tvei64n619]::before,
    .auth-page *[b-tvei64n619]::after {
        transition-duration: 0.01ms !important;
    }
}
/* /Components/Pages/Team/TeamHome.razor.rz.scp.css */
/* ============================================================================
   THE REGISTER — the approved mockup, applied by the number, and ONLY what belongs to this page.

   Every value here is the mockup's own (docs/Audite/prompts/portal-mockup/*.dc.html): the six column
   widths, the 54px row's own inner gaps, the state chips, the folded row. The design is Claude Design's;
   this stylesheet applies it. Where a number departs from the mockup, the reason is written beside it.

   WHAT MOVED, 26 September 2026. The bar, the page frame, the table frame, the panel, the fields and the
   buttons are the portal's, not the register's — the vendor bank's words page is the portal's second page
   and needs every one of them. They now live in ONE place, wwwroot/css/team-portal.css, which App.razor
   links; a Blazor scoped stylesheet reaches its own component only, so two portal pages could not share
   them from here. Nothing this file still holds is used by the words page, and nothing the words page
   holds is used here.

   TWO DEPARTURES, both stated, and both about the register alone:
   1. The mockup draws the register as a CSS grid of divs. It is a real <table> here, for the screen reader
      and for `scope="row"`; the six columns keep the mockup's own widths, and table-layout is fixed so the
      Actions column can never be pushed off the window — which is what the owner saw on 24 September.
   2. The mockup's panel is absolutely positioned inside a 900px-tall canvas. In the shared stylesheet it
      is fixed to the viewport, 452px wide and starting 52px down (the bar's own height), so it behaves the
      same at any window height.
   ============================================================================ */

/* ── The register's own six columns ────────────────────────────────────────── */

.tp-col-company[b-hqlqzm9avf] { width: 300px; }
.tp-col-access[b-hqlqzm9avf] { width: 130px; }
.tp-col-admin[b-hqlqzm9avf] { width: 230px; }
.tp-col-created[b-hqlqzm9avf] { width: 96px; }
.tp-col-actions[b-hqlqzm9avf] { width: 312px; }

/* EACH MIDDLE CELL KEEPS THE MOCKUP'S OWN INNER GAP, and no left padding of its own: the row's 18px ends and the
   header's 38px are the only outer gaps the mockup draws. */
.tp-table thead th:nth-child(2)[b-hqlqzm9avf],
.tp-table thead th:nth-child(3)[b-hqlqzm9avf],
.tp-table thead th:nth-child(4)[b-hqlqzm9avf],
.tp-table thead th:nth-child(5)[b-hqlqzm9avf] { padding-right: 12px; }

.tp-table tbody th:not(:first-child)[b-hqlqzm9avf],
.tp-table tbody td:not(:first-child):not(:last-child)[b-hqlqzm9avf] { padding-right: 12px; }

.tp-table tbody td:nth-child(5)[b-hqlqzm9avf] { padding-right: 16px; }

.tp-cell-company[b-hqlqzm9avf] { padding-right: 12px; }

.tp-ws-name[b-hqlqzm9avf] {
    display: block;
    font-size: 13px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tp-ws-code[b-hqlqzm9avf] {
    display: block;
    font-size: 11px;
    color: var(--faint);
    letter-spacing: 0.02em;
}

.tp-cell-last[b-hqlqzm9avf] { padding-right: 16px; }

/* A FAILED EMAIL IS A MARK, NEVER A SENTENCE: the whole of it is the mark's title. */
.tp-mark[b-hqlqzm9avf] {
    display: inline-flex;
    align-items: center;
    height: 18px;
    margin-top: 2px;
    padding: 0 7px;
    border-radius: 9px;
    background: var(--warned-bg);
    color: var(--warned-ink);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* ── What a workspace's access is, as the register's own chip (21px) ───────── */

.tp-state[b-hqlqzm9avf] {
    display: inline-flex;
    align-items: center;
    height: 21px;
    padding: 0 9px;
    border-radius: 11px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.tp-state-active[b-hqlqzm9avf] { background: var(--live-bg); color: var(--live-ink); }
.tp-state-warned[b-hqlqzm9avf] { background: var(--warned-bg); color: var(--warned-ink); }
.tp-state-suspended[b-hqlqzm9avf] { background: var(--stopped-bg); color: var(--stopped-ink); }
.tp-state-closed[b-hqlqzm9avf] { background: var(--closed-bg); color: var(--closed-ink); }
.tp-state-ours[b-hqlqzm9avf] { background: var(--ours-bg); color: var(--ours-ink); }

/* ── The chips that narrow the register, and its own Find box ──────────────── */

.tp-filters[b-hqlqzm9avf] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }

.tp-chip[b-hqlqzm9avf] {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 12px;
    border: 1px solid var(--btn-border);
    border-radius: 14px;
    background: var(--paper);
    color: #3f3d38;
    font-size: 12px;
    text-decoration: none;
    white-space: nowrap;
}

.tp-chip:hover[b-hqlqzm9avf] { border-color: var(--ink); }

.tp-chip-on[b-hqlqzm9avf] { border-color: var(--ink); background: var(--ink); color: var(--ground); }

.tp-chip:focus-visible[b-hqlqzm9avf] { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── The closed rows folded under one row that says how many ───────────────── */

/* THE FOLDED ROW IS A ROW, AT THE TABLE'S OWN HEIGHT. It carried 44px, and that number never once reached the page:
   while this stylesheet also held the table's base rule, `tbody td` out-specified `.tp-fold td` and the row drew at
   54px. With the base rule in the shared stylesheet the 44px would start winning — and the approved board draws no
   folded row at all (its fold is the right-hand half of the 40px foot strip), so there is no design number to keep
   and the register goes back to exactly what the owner has seen. Named in the report with the before and after
   screenshots: this is the one visible thing the shared-surface move changed on this page, and it is now nothing. */
/* ONE HEADING PER GROUP OF OURS — the read returns more than one kind of our own workspace, and the heading, taken
   from the kind's own words, is the only thing that tells them apart. It borrows the folded row's rhythm (a row that
   spans the table) and the muted ink the register already writes its secondary lines in, so it adds no new vocabulary
   to the screen. */
.tp-group th[b-hqlqzm9avf] {
    padding: 22px 0 8px;
    color: var(--muted);
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.tp-fold td[b-hqlqzm9avf] {
    background: var(--sunken);
    font-size: 12px;
    color: var(--muted);
}

.tp-fold a[b-hqlqzm9avf] { margin-left: 8px; color: var(--link); }
.tp-fold a:hover[b-hqlqzm9avf] { color: var(--link-hover); }

/* ── Narrower than the mockup's canvas ─────────────────────────────────────── */

/* NARROWER THAN THE MOCKUP'S CANVAS, WIDER THAN A PHONE. The mockup's own widths are drawn for 1440: at about 1,024
   they add up to more than the window and the Actions column is pushed off it, which is the fault the owner's
   screenshot showed at 1440 in reverse. The proportions are kept and the numbers come down enough to fit. */
@media (max-width: 1200px) {
    .tp-col-company[b-hqlqzm9avf] { width: 220px; }
    .tp-col-access[b-hqlqzm9avf] { width: 108px; }
    .tp-col-admin[b-hqlqzm9avf] { width: 176px; }
    .tp-col-created[b-hqlqzm9avf] { width: 88px; }
    .tp-col-actions[b-hqlqzm9avf] { width: 292px; }
    .tp-table thead th:first-child[b-hqlqzm9avf],
    .tp-table tbody th:first-child[b-hqlqzm9avf],
    .tp-table tbody td:first-child[b-hqlqzm9avf] { padding-left: 14px; }
    .tp-table thead th:last-child[b-hqlqzm9avf],
    .tp-table tbody td:last-child[b-hqlqzm9avf] { padding-right: 14px; }
}

@media (max-width: 900px) {
    .tp-col-company[b-hqlqzm9avf] { width: 220px; }
    .tp-col-access[b-hqlqzm9avf] { width: 110px; }
    .tp-col-admin[b-hqlqzm9avf] { width: 200px; }
    .tp-col-created[b-hqlqzm9avf] { width: 92px; }
    .tp-col-actions[b-hqlqzm9avf] { width: 300px; }
    .tp-grid[b-hqlqzm9avf] { overflow-x: auto; }
    .tp-table[b-hqlqzm9avf] { min-width: 1100px; }
}
/* /Components/Pages/Team/TeamWords.razor.rz.scp.css */
/* ============================================================================
   THE VENDOR BANK'S SHARED WORDS — the approved design, applied by the number, and ONLY what belongs to this page.

   Every value here is the design's own
   (docs/Design/vendore portal/Vendor portal design request latestes/Vendor Words.dc.html): the 30px tab pills with
   their 15px radius, the 22px chips, the 130/150/170/200/240/280px columns, the 50/62/54px rows, the amber row that
   is being acted on, the green row that is current. The design is Claude Design's; this stylesheet applies it. Where a
   number or a sentence departs from the design, the reason is written beside it.

   WHAT IS NOT HERE: the bar, the page frame, the card, the table frame, the panel, the fields and the buttons — the
   portal's own, shared with the register through wwwroot/css/team-portal.css, which App.razor links.

   TWO DEPARTURES, both stated:
   1. The design draws each row as a CSS grid of divs. It is a real <table> here, for the screen reader and for
      `scope="row"`, as the register's rows are; the columns keep the design's own widths and table-layout is fixed so
      the Actions column can never be pushed off the window.
   2. THE CHANGING-PAPERS PANEL DOES NOT PREVIEW THE CHANGE LIVE. The design shows the effect box updating as boxes are
      ticked, which needs a page that talks back to the server; the portal is served as plain pages whose acts are
      forms. What the panel says instead is the same fact, once, for every paper the type holds TODAY — "843 of the 912
      do not hold it yet" — read from the API rather than worked out here. Turning the portal interactive is the
      owner's decision and not this page's.
   ============================================================================ */

/* ── The five tabs: 30px pills, 15px radius, the count beside the name ─────── */

.vw-tabs[b-2i6ymywiv1] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }

.vw-tab[b-2i6ymywiv1] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 30px;
    padding: 0 12px;
    border: 1px solid var(--btn-border);
    border-radius: 15px;
    background: var(--paper);
    color: #3f3d38;
    font-size: 12.5px;
    text-decoration: none;
    white-space: nowrap;
}

.vw-tab:hover[b-2i6ymywiv1] { border-color: var(--ink); }

.vw-tab-on[b-2i6ymywiv1] {
    border-color: var(--ink);
    background: var(--ink);
    color: var(--ground);
    font-weight: 500;
}

.vw-tab-n[b-2i6ymywiv1] { font-variant-numeric: tabular-nums; color: var(--muted); }
.vw-tab-on .vw-tab-n[b-2i6ymywiv1] { color: var(--btn-border); }

.vw-tab:focus-visible[b-2i6ymywiv1] { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── The words table: 280/240/130/150/…/200, 50px rows ────────────────────── */

.vw-col-word[b-2i6ymywiv1] { width: 280px; }
.vw-col-arabic[b-2i6ymywiv1] { width: 240px; }
.vw-col-state[b-2i6ymywiv1] { width: 130px; }
.vw-col-vendors[b-2i6ymywiv1] { width: 150px; }
.vw-col-acts[b-2i6ymywiv1] { width: 200px; }

.vw-words tbody th[b-2i6ymywiv1],
.vw-words tbody td[b-2i6ymywiv1] { height: 50px; }

.vw-word[b-2i6ymywiv1] { font-size: 13px; font-weight: 500; overflow-wrap: anywhere; }

.vw-arabic[b-2i6ymywiv1] {
    display: block;
    font-size: 13px;
    font-family: 'Segoe UI', Tahoma, 'Noto Sans Arabic', sans-serif;
    color: #3f3d38;
    padding-inline-end: 12px;
}

/* A WORD NOBODY HAS PUT IN ARABIC SAYS SO, rather than showing an empty cell that reads as a fault. */
.vw-arabic-none[b-2i6ymywiv1] { color: var(--faint); font-style: italic; font-family: inherit; }

.vw-when[b-2i6ymywiv1] {
    display: block;
    font-size: 12px;
    color: var(--muted);
    padding-inline-end: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vw-sub[b-2i6ymywiv1] { display: block; font-size: 11.5px; color: var(--muted); }

.vw-cell-vendors[b-2i6ymywiv1] {
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    text-align: end;
    padding-inline-end: 28px;
}

/* THE DESIGN'S OWN EMPHASIS: a count past a thousand is set heavier, so the words the whole platform uses are the
   ones that read as heavy on the page. `vw-heavy`, NOT `vw-big` — the latter is the panel's big-number card, and the
   collision drew a bordered box around a figure in a table cell until the screenshot was looked at. */
.vw-cell-vendors .vw-heavy[b-2i6ymywiv1] { font-weight: 600; }

/* ── The chips: 22px, and the design's four tones ─────────────────────────── */

.vw-chip[b-2i6ymywiv1] {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 9px;
    border-radius: 11px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}

.vw-chip-on[b-2i6ymywiv1] { background: var(--live-bg); color: var(--live-ink); }
.vw-chip-off[b-2i6ymywiv1] { background: var(--closed-bg); color: #55534d; }
.vw-chip-blue[b-2i6ymywiv1] { background: #e5ebf1; color: #2f4f68; }
.vw-chip-plain[b-2i6ymywiv1] { background: #f3f1eb; color: #3f3d38; }

/* ── A row that is being decided about, and the version that is current ───── */

.vw-row-on[b-2i6ymywiv1] { background: #fdf6e9; box-shadow: inset 3px 0 0 #c28a2c; }
.vw-words tbody tr.vw-row-on:hover[b-2i6ymywiv1] { background: #fdf6e9; }

.vw-terms-current td[b-2i6ymywiv1],
.vw-terms-current th[b-2i6ymywiv1] { background: #f2f8f4; }
.vw-terms-current th[b-2i6ymywiv1] { box-shadow: inset 3px 0 0 #215b41; }
.vw-terms tbody tr.vw-terms-current:hover td[b-2i6ymywiv1],
.vw-terms tbody tr.vw-terms-current:hover th[b-2i6ymywiv1] { background: #f2f8f4; }

/* ── The papers table: 230/140/…/150, 62px rows ───────────────────────────── */

.vw-col-type[b-2i6ymywiv1] { width: 230px; }
.vw-col-typevendors[b-2i6ymywiv1] { width: 140px; }
.vw-col-typeact[b-2i6ymywiv1] { width: 150px; }

.vw-papers tbody th[b-2i6ymywiv1],
.vw-papers tbody td[b-2i6ymywiv1] { height: 62px; }

.vw-cell-type[b-2i6ymywiv1] { padding-inline-end: 12px; }

.vw-papers-list[b-2i6ymywiv1] { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 0; }

/* ── The terms table: …/170/150/200/150/150, 54px rows ────────────────────── */

.vw-col-published[b-2i6ymywiv1] { width: 170px; }
.vw-col-terms-state[b-2i6ymywiv1] { width: 150px; }
.vw-col-by[b-2i6ymywiv1] { width: 200px; }
.vw-col-length[b-2i6ymywiv1] { width: 150px; }
.vw-col-terms-act[b-2i6ymywiv1] { width: 150px; }

.vw-terms tbody th[b-2i6ymywiv1],
.vw-terms tbody td[b-2i6ymywiv1] { height: 54px; }

.vw-num[b-2i6ymywiv1] { font-size: 12.5px; color: #3f3d38; font-variant-numeric: tabular-nums; }

.vw-cell-word[b-2i6ymywiv1] { padding-inline-end: 12px; }

/* ── A panel's own parts: the big number, the tone boxes, the facts list ──── */

/* THE DESIGN'S BIG NUMBER — "1,046 vendors have Concrete. They all keep it." — which is the sentence an operator has
   to read before retiring a word. */
.vw-big[b-2i6ymywiv1] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--sunken);
}

.vw-big-number[b-2i6ymywiv1] {
    font-family: var(--serif);
    font-size: 30px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.vw-big-copy[b-2i6ymywiv1] { font-size: 13px; line-height: 1.45; color: #3f3d38; }

.vw-box[b-2i6ymywiv1] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px solid;
}

.vw-box-title[b-2i6ymywiv1] { font-size: 12.5px; font-weight: 600; }
.vw-box-copy[b-2i6ymywiv1] { font-size: 12.5px; line-height: 1.55; }

.vw-box-amber[b-2i6ymywiv1] { background: #f6ebd8; border-color: #e7d2ac; color: #4a340a; }
.vw-box-blue[b-2i6ymywiv1] { background: #e5ebf1; border-color: #c9d5e1; color: #1f3a50; }

/* The facts the confirmation puts in front of him before he publishes: what replaces what, and who is asked. */
.vw-facts[b-2i6ymywiv1] {
    margin: 0;
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    gap: 10px 14px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.45;
}

.vw-facts dt[b-2i6ymywiv1] { color: var(--muted); }
.vw-facts dd[b-2i6ymywiv1] { margin: 0; }

/* ── The papers checklist ─────────────────────────────────────────────────── */

.vw-checks[b-2i6ymywiv1] { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 2px; }

.vw-checks-legend[b-2i6ymywiv1] { font-size: 12px; font-weight: 600; color: #3f3d38; margin-bottom: 8px; }

.vw-check[b-2i6ymywiv1] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 36px;
    padding: 0 10px;
    border-radius: 7px;
    cursor: pointer;
}

.vw-check input[b-2i6ymywiv1] { margin: 0; width: 16px; height: 16px; accent-color: var(--ink); flex-shrink: 0; }

.vw-check-label[b-2i6ymywiv1] { flex: 1; font-size: 13px; }

.vw-check-sub[b-2i6ymywiv1] { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

.vw-check-taken[b-2i6ymywiv1] { background: #fdf6e9; }

/* A RETIRED KIND CANNOT BE GIVEN TO A TYPE, and the row says why rather than letting him tick it and be refused. */
.vw-check-off[b-2i6ymywiv1] { color: var(--muted); cursor: not-allowed; }
.vw-check-off .vw-check-sub[b-2i6ymywiv1] { color: #8a5a12; font-weight: 600; }

/* ── One version's own words, read-only ───────────────────────────────────── */

.vw-terms-body[b-2i6ymywiv1] {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: #3f3d38;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* ── Narrower than the design's 1440 canvas ───────────────────────────────── */

@media (max-width: 1200px) {
    .vw-col-word[b-2i6ymywiv1] { width: 220px; }
    .vw-col-arabic[b-2i6ymywiv1] { width: 190px; }
    .vw-col-state[b-2i6ymywiv1] { width: 110px; }
    .vw-col-vendors[b-2i6ymywiv1] { width: 130px; }
    .vw-col-acts[b-2i6ymywiv1] { width: 190px; }
    .vw-col-type[b-2i6ymywiv1] { width: 200px; }
    .vw-col-typevendors[b-2i6ymywiv1] { width: 120px; }
    .vw-col-typeact[b-2i6ymywiv1] { width: 140px; }
    .vw-col-published[b-2i6ymywiv1] { width: 140px; }
    .vw-col-terms-state[b-2i6ymywiv1] { width: 120px; }
    .vw-col-by[b-2i6ymywiv1] { width: 160px; }
    .vw-col-length[b-2i6ymywiv1] { width: 130px; }
    .vw-col-terms-act[b-2i6ymywiv1] { width: 140px; }
    .vw-cell-vendors[b-2i6ymywiv1] { padding-inline-end: 18px; }
}

@media (max-width: 900px) {
    .tp-grid[b-2i6ymywiv1] { overflow-x: auto; }
    .vw-words[b-2i6ymywiv1] { min-width: 1040px; }
    .vw-papers[b-2i6ymywiv1] { min-width: 880px; }
    .vw-terms[b-2i6ymywiv1] { min-width: 1000px; }
}