/* /Components/Pages/Actions/Actions.razor.rz.scp.css */
/*
 * The approvals page's own styles.
 *
 * APPLIED, NOT DESIGNED. Crolle's own palette and type (the sign-in pages' tokens), laid out as one readable column:
 * the approvals waiting on a person, each one explaining itself. A Claude Design pass for this page is requested in
 * docs/Design/approvals/REQUEST.md; when it is approved, its numbers replace these.
 *
 * EVERY VALUE THAT COMES FROM A PERSON OR A RECORD carries `overflow-wrap: anywhere`, so a long reference, a pasted
 * note or a letter's address can never push the page sideways.
 */

.approvals-page[b-3pci8i7b8q] {
    --paper: #f4f3ef;
    --card: #ffffff;
    --ink: #0b0d10;
    --muted: #5f646c;
    --line: #dcdad4;
    --line-strong: #9d9e9b;
    --accent: #007a66;
    --accent-deep: #005e50;
    --accent-soft: #e6f2ee;
    --now: #fdf6e9;
    --danger: #a22b32;
    --danger-soft: #f8e9ea;
    --focus: #00a88a;

    min-width: 320px;
    min-height: 100dvh;
    color: var(--ink);
    background: var(--paper);
    font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

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

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

.approvals-page a:focus-visible[b-3pci8i7b8q],
.approvals-page button:focus-visible[b-3pci8i7b8q],
.approvals-page input:focus-visible[b-3pci8i7b8q],
.approvals-page textarea:focus-visible[b-3pci8i7b8q],
.skip-link:focus-visible[b-3pci8i7b8q] {
    outline: 3px solid var(--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 bar ─────────────────────────────────────────────────────────────────────────────────────────────────── */
.approvals-bar[b-3pci8i7b8q] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 18px max(16px, calc((100vw - 1120px) / 2));
    color: #f2f1ec;
    background: #0b0d10;
}

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

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

.approvals-who[b-3pci8i7b8q] {
    margin: 0;
    font-size: 0.85rem;
    color: #b9bcbb;
    overflow-wrap: anywhere;
    text-align: right;
}

/* ── the column ──────────────────────────────────────────────────────────────────────────────────────────────── */
.approvals-body[b-3pci8i7b8q] {
    max-width: 1152px;
    margin: 0 auto;
    padding: 36px 16px 64px;
}

.approvals-heading[b-3pci8i7b8q] {
    margin: 0 0 8px;
    font-size: 1.75rem;
    line-height: 1.2;
    font-weight: 650;
    letter-spacing: -0.01em;
}

.approvals-intro[b-3pci8i7b8q] {
    margin: 0 0 24px;
    max-width: 68ch;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--muted);
}

.approvals-empty[b-3pci8i7b8q] {
    margin: 32px 0 8px;
    font-size: 1.15rem;
    font-weight: 600;
}

.approvals-alert[b-3pci8i7b8q] {
    margin: 0 0 16px;
    padding: 12px 14px;
    border-left: 4px solid var(--danger);
    background: var(--danger-soft);
    font-size: 0.95rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.approvals-link[b-3pci8i7b8q] {
    color: var(--accent-deep);
    text-decoration: underline;
    text-underline-offset: 3px;
    overflow-wrap: anywhere;
}

.approvals-help[b-3pci8i7b8q] {
    flex-basis: 100%;
    margin: 4px 0 0;
    font-size: 0.85rem;
    color: var(--muted);
}

/* ── finding one in a long list ──────────────────────────────────────────────────────────────────────────────── */
.approvals-find[b-3pci8i7b8q] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin: 0 0 24px;
}

.approvals-find label[b-3pci8i7b8q] {
    font-weight: 600;
}

.approvals-find input[b-3pci8i7b8q] {
    flex: 1 1 240px;
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid var(--line-strong);
    border-radius: 4px;
    background: var(--card);
}

/* ── one approval ────────────────────────────────────────────────────────────────────────────────────────────── */
/* The record on the left, the answer on the right: the answer is held in view while a long record scrolls past it,
   so the person never has to scroll away from what they are reading to find where to answer. */
.approval[b-3pci8i7b8q] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 0 32px;
    margin: 0 0 16px;
    padding: 20px 24px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--card);
}

.approval > input[type="hidden"][b-3pci8i7b8q] {
    display: none;
}

.approval-main[b-3pci8i7b8q] {
    min-width: 0;
}

.approval-decide[b-3pci8i7b8q] {
    align-self: start;
    position: sticky;
    top: 16px;
    padding: 4px 0 0 24px;
    border-left: 1px solid var(--line);
}

.approval-send[b-3pci8i7b8q] {
    width: 100%;
    margin-top: 12px;
}

.approval-opened[b-3pci8i7b8q] {
    border-color: var(--accent);
    box-shadow: inset 4px 0 0 var(--accent);
}

.approval-hidden[b-3pci8i7b8q] {
    display: none;
}

/* The form's default button: there for Enter in a text box, out of sight and out of the tab order. */
.approvals-default-send[b-3pci8i7b8q] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
    padding: 0;
}

.approval-origin[b-3pci8i7b8q] {
    margin: -4px 0 12px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent-deep);
}

.approval-head[b-3pci8i7b8q] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 24px;
}

.approval-title[b-3pci8i7b8q] {
    flex: 1 1 320px;
    margin: 0;
    font-size: 1.2rem;
    line-height: 1.35;
    font-weight: 650;
    overflow-wrap: anywhere;
}

.approval-worth[b-3pci8i7b8q] {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.approval-meta[b-3pci8i7b8q] {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 12px;
    margin: 8px 0 16px;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--muted);
    overflow-wrap: anywhere;
}

.approval-due[b-3pci8i7b8q] {
    color: var(--ink);
    font-weight: 600;
}

/* the record's own facts, as its module published them */
.approval-facts[b-3pci8i7b8q] {
    margin: 0 0 16px;
    border-top: 1px solid var(--line);
}

.approval-fact[b-3pci8i7b8q] {
    display: grid;
    grid-template-columns: minmax(120px, 34%) 1fr;
    gap: 4px 16px;
    padding: 9px 0;
    border-bottom: 1px solid var(--line);
    font-size: 0.95rem;
    line-height: 1.45;
}

.approval-fact dt[b-3pci8i7b8q] {
    color: var(--muted);
}

.approval-fact dd[b-3pci8i7b8q] {
    margin: 0;
    overflow-wrap: anywhere;
}

/* who signs it */
.approval-more[b-3pci8i7b8q] {
    margin: 0 0 16px;
    font-size: 0.92rem;
}

.approval-chain[b-3pci8i7b8q] {
    margin: 0 0 16px;
}

.approval-chain-title[b-3pci8i7b8q] {
    margin: 0 0 8px;
    font-size: 0.95rem;
    font-weight: 650;
}

.approval-chain-list[b-3pci8i7b8q] {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--line);
    border-radius: 4px;
}

.approval-chain-step[b-3pci8i7b8q] {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    gap: 4px 12px;
    padding: 10px 12px;
    border-top: 1px solid var(--line);
    font-size: 0.92rem;
    line-height: 1.45;
}

.approval-chain-step:first-child[b-3pci8i7b8q] {
    border-top: 0;
}

.approval-chain-now[b-3pci8i7b8q] {
    background: var(--now);
}

.approval-chain-order[b-3pci8i7b8q] {
    font-weight: 700;
    color: var(--muted);
}

.approval-chain-who[b-3pci8i7b8q],
.approval-chain-state[b-3pci8i7b8q] {
    display: flex;
    flex-direction: column;
    overflow-wrap: anywhere;
}

.approval-chain-who q[b-3pci8i7b8q] {
    color: #3f3d38;
}

.approval-chain-state[b-3pci8i7b8q] {
    text-align: right;
}

.approval-chain-state span[b-3pci8i7b8q],
.approval-chain-who span[b-3pci8i7b8q] {
    color: var(--muted);
}

/* the answer */
.approval-choice[b-3pci8i7b8q] {
    display: grid;
    gap: 8px;
    margin: 0 0 12px;
    padding: 0;
    border: 0;
}

.approval-choice legend[b-3pci8i7b8q] {
    margin-bottom: 8px;
    padding: 0;
    font-weight: 650;
}

.approval-radio[b-3pci8i7b8q] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--line-strong);
    border-radius: 4px;
    cursor: pointer;
}

.approval-radio:has(input:checked)[b-3pci8i7b8q] {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.approval-radio input[b-3pci8i7b8q] {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--accent);
}

.approval-radio label[b-3pci8i7b8q] {
    cursor: pointer;
}

.approval-field[b-3pci8i7b8q] {
    display: grid;
    gap: 6px;
    margin: 0 0 4px;
    font-size: 0.92rem;
}

.approval-field textarea[b-3pci8i7b8q],
.approval-field input[b-3pci8i7b8q] {
    width: 100%;
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid var(--line-strong);
    border-radius: 4px;
    background: var(--card);
    color: var(--ink);
    resize: vertical;
    overflow-wrap: anywhere;
}

/* ── sending ─────────────────────────────────────────────────────────────────────────────────────────────────── */
.approvals-send[b-3pci8i7b8q] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    margin-top: 24px;
    padding: 16px 0 0;
    border-top: 1px solid var(--line-strong);
}

.approvals-count[b-3pci8i7b8q] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.approvals-button[b-3pci8i7b8q],
.approvals-button-quiet[b-3pci8i7b8q] {
    min-height: 44px;
    padding: 0 28px;
    border-radius: 4px;
    font-weight: 650;
    cursor: pointer;
}

.approvals-button[b-3pci8i7b8q] {
    border: 1px solid var(--accent);
    color: #fff;
    background: var(--accent);
}

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

.approvals-button-quiet[b-3pci8i7b8q] {
    padding: 0 18px;
    border: 1px solid var(--line-strong);
    color: var(--ink);
    background: var(--card);
}

@media (max-width: 900px) {
    .approval[b-3pci8i7b8q] {
        grid-template-columns: minmax(0, 1fr);
    }

    .approval-decide[b-3pci8i7b8q] {
        position: static;
        padding: 16px 0 0;
        border-left: 0;
        border-top: 1px solid var(--line);
    }

    .approval-choice[b-3pci8i7b8q] {
        display: flex;
        flex-wrap: wrap;
    }
}

@media (max-width: 600px) {
    .approvals-body[b-3pci8i7b8q] {
        padding-top: 24px;
    }

    .approval[b-3pci8i7b8q] {
        padding: 16px;
    }

    .approval-fact[b-3pci8i7b8q] {
        grid-template-columns: 1fr;
    }

    .approval-chain-step[b-3pci8i7b8q] {
        grid-template-columns: 24px 1fr;
    }

    .approval-chain-state[b-3pci8i7b8q] {
        grid-column: 2;
        text-align: left;
    }

    .approvals-button[b-3pci8i7b8q] {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .skip-link[b-3pci8i7b8q] {
        transition: none;
    }
}
/* /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; }
}
/* /Components/Pages/Vendor/VendorRfq.razor.rz.scp.css */
/* ==================================================================================================
 * THE RFQ SCREEN'S OWN FRAME — and nothing else.
 *
 * WHY THIS SHEET IS SMALL. A component's .razor.css is scoped to the elements THAT component renders, and
 * VendorRfq.razor renders very little on its own: the frame, the title block and the five cells
 * above the bill. Everything else on this screen — the bill, the sidebar, the notices, the refusal panel — is
 * rendered by VendorRfqBill, VendorRfqSidebar, VendorRfqState and VendorRfqNoQuote, whose markup does not carry
 * this component's scope attribute. Rules for those four CANNOT live here, so they live in the shared
 * wwwroot/css/vendor-portal.css beside the rest of the vendor portal's styling, which is where every vendor page
 * gets its styling (no other vendor page has a .razor.css at all).
 *
 * THE TOP BAR IS NOT HERE EITHER. It is the vendor's one bar, VendorAppBar, styled in the shared sheet, the same on
 * every signed-in vendor page.
 *
 * THE NUMBERS ARE THE DESIGN'S, and DIRECTION IS LOGICAL, exactly as in the shared sheet.
 * ================================================================================================== */
.vp-rfq[b-jhn3njb1j5] {
    position: relative;
}

.vp-rfq-page[b-jhn3njb1j5] {
    flex-grow: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 32px 20px;
}

.vp-rfq-head[b-jhn3njb1j5] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vp-rfq-crumb[b-jhn3njb1j5] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--app-muted);
}

.vp-rfq-crumb a[b-jhn3njb1j5] {
    color: inherit;
    text-decoration: none;
}

.vp-rfq-crumb a:hover[b-jhn3njb1j5] {
    color: var(--app-ink);
    text-decoration: underline;
}

.vp-rfq-sep[b-jhn3njb1j5] {
    color: #b9b4a8;
}

.vp-rfq-titlerow[b-jhn3njb1j5] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.vp-rfq-title[b-jhn3njb1j5] {
    margin: 0;
    font-family: var(--app-serif);
    font-size: 26px;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.25;
}

.vp-rfq-chip[b-jhn3njb1j5] {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 9px;
    border-radius: 11px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.vp-rfq-chip-blue[b-jhn3njb1j5] {
    background: #e5ebf1;
    color: #2f4f68;
}

.vp-rfq-chip-amber[b-jhn3njb1j5] {
    background: #f6ebd8;
    color: #6e4c0e;
}

.vp-rfq-chip-green[b-jhn3njb1j5] {
    background: #e4efe7;
    color: #215b41;
}

.vp-rfq-chip-grey[b-jhn3njb1j5] {
    background: #eeece6;
    color: #55534d;
}

.vp-rfq-chip-red[b-jhn3njb1j5] {
    background: #f7e7e4;
    color: #8c2e24;
}

/* THE COMPANY'S FILES ON THE REQUEST: the design's row under the meta, its literal numbers. */
.vp-rfq-drawings[b-jhn3njb1j5] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 10px;
    border-top: 1px solid #e3dfd4;
}

.vp-rfq-drawings-label[b-jhn3njb1j5] {
    font-size: 12px;
    font-weight: 600;
}

.vp-rfq-drawings-count[b-jhn3njb1j5] {
    font-size: 12px;
    color: #63615b;
}

.vp-rfq-drawing[b-jhn3njb1j5] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 10px;
    border: 1px solid #d5d0c3;
    border-radius: 13px;
    background: #ffffff;
    color: #141413;
    font-size: 12px;
    text-decoration: none;
}

.vp-rfq-drawing span[aria-hidden="true"][b-jhn3njb1j5] {
    color: #2f5d50;
}

.vp-rfq-drawing:focus-visible[b-jhn3njb1j5],
.vp-rfq-drawings-all:focus-visible[b-jhn3njb1j5] {
    outline: 2px solid #2f5d50;
    outline-offset: 2px;
}

.vp-rfq-drawings-all[b-jhn3njb1j5] {
    margin-inline-start: auto;
    font-size: 12.5px;
    font-weight: 600;
    color: #2f5d50;
}

.vp-rfq-meta[b-jhn3njb1j5] {
    margin: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1.5fr) minmax(0, 1.1fr) minmax(0, 0.8fr) minmax(0, 1.3fr);
    gap: 24px;
    align-items: start;
}

.vp-rfq-meta-cell[b-jhn3njb1j5] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.vp-rfq-meta-cell dt[b-jhn3njb1j5] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6b6862;
}

.vp-rfq-meta-cell dd[b-jhn3njb1j5] {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.vp-rfq-meta-count[b-jhn3njb1j5] {
    margin-top: 1px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* THE DEADLINE THIS VENDOR WAS FIRST GIVEN, struck through after the time left: the design's changed state. */
.vp-rfq-was[b-jhn3njb1j5] {
    font-size: 12px;
    color: #63615b;
    text-decoration: line-through;
    white-space: nowrap;
}

/* ---------------------------------------------------------------- the desk frame (DECISIONS.md items 22 and 23)
   THE FRAME IS THE WINDOW, as the design's own frame is 900px tall with the bill and the sidebar scrolling inside it.
   Without a bounded height the bill and the sidebar grew to their content, the sidebar never scrolled, and "Submit
   quote" and the attachments sat below the fold at every real window size (owner, 30 September 2026). The page scrolls
   inside the frame only when the window is too short for the head and 360px of bill; the phone keeps its own frame
   (vendor-rfq-phone.css), whose foot bar needs the document to scroll.

   THE HEAD IS COMPACT (owner, 30 September 2026: it "takes a lot of height, make it more compact and in one row"): the
   crumb, then the title with the facts beside it, each fact written as a label and its value on one line and the
   countdown beside the deadline. On a narrower window the facts wrap under the title as one row. The package is the
   title, so its cell is not repeated here; the phone lists all five. */
@media (min-width: 701px) {
    .vp-rfq[b-jhn3njb1j5] {
        height: 100vh;
        height: 100dvh;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    .vp-rfq-page[b-jhn3njb1j5] {
        overflow-y: auto;
    }

    .vp-rfq-body[b-jhn3njb1j5] {
        min-height: 360px;
    }

    .vp-rfq-head[b-jhn3njb1j5] {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 6px 24px;
    }

    .vp-rfq-crumb[b-jhn3njb1j5] {
        flex: 1 1 100%;
    }

    .vp-rfq-titlerow[b-jhn3njb1j5] {
        min-width: 0;
    }

    .vp-rfq-title[b-jhn3njb1j5] {
        font-size: 22px;
    }

    .vp-rfq-meta[b-jhn3njb1j5] {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 4px 20px;
    }

    .vp-rfq-meta-cell[b-jhn3njb1j5] {
        flex-direction: row;
        align-items: baseline;
        gap: 6px;
    }

    .vp-rfq-meta-package[b-jhn3njb1j5] {
        display: none;
    }

    .vp-rfq-meta-count[b-jhn3njb1j5] {
        margin: 0;
    }
}

/* The design's phone frame stacks the five cells and writes their labels as ordinary words, not small caps. */
@media (max-width: 700px) {
    .vp-rfq-page[b-jhn3njb1j5] {
        gap: 10px;
        padding: 12px 16px 14px;
    }

    .vp-rfq-title[b-jhn3njb1j5] {
        font-size: 21px;
    }

    /* The way back to the list is the design's 36px target on a phone, not the height of its words. */
    .vp-rfq-crumb a[b-jhn3njb1j5] {
        display: inline-flex;
        align-items: center;
        min-height: 36px;
    }

    .vp-rfq-meta[b-jhn3njb1j5] {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 6px 12px;
    }

    .vp-rfq-meta-cell[b-jhn3njb1j5] {
        display: grid;
        grid-template-columns: subgrid;
        grid-column: 1 / -1;
    }

    .vp-rfq-meta-cell dt[b-jhn3njb1j5] {
        font-size: 12.5px;
        font-weight: 400;
        letter-spacing: 0;
        text-transform: none;
        color: var(--app-muted);
    }

    /* The design's phone frame draws the chips alone; the time left still says the deadline moved. */
    .vp-rfq-was[b-jhn3njb1j5] {
        display: none;
    }

    /* The phone's drawings box: the count and "Download all", 44px tall, without a chip per file. */
    .vp-rfq-drawings[b-jhn3njb1j5] {
        justify-content: space-between;
        min-height: 44px;
        padding: 0 12px;
        border: 1px solid #d5d0c3;
        border-radius: 8px;
        background: #ffffff;
        font-size: 13px;
    }

    .vp-rfq-drawing[b-jhn3njb1j5] {
        display: none;
    }

    .vp-rfq-drawings-all[b-jhn3njb1j5] {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        font-size: 13px;
    }
}
/* /Components/Pages/Vendor/VendorShell.razor.rz.scp.css */
/* A PAGE THAT LAYS TWO BLOCKS SIDE BY SIDE GETS THE ROOM FOR THEM ON A WIDE WINDOW (owner, 30 September 2026: "why
   user have to scroll when we have horizontal empty spaces"; DECISIONS.md item 25). These rules reach only the two
   classes PairedColumn adds, so every other page keeps the design's panel and column.

   From 1400px the column may grow past the design's 600px, up to 1040px, so each half is wide enough to read. From
   1700px the window already has that room inside the design's padding (190px at the start, 96px at the end). Between
   1400px and 1700px it does not, so the padding starts at 56px and grows with the window until it meets the design's
   numbers at 1700px. The footer's walk back into the padding (the design's -94px) grows with it, so the footer keeps
   the design's line at every width. Growing rather than switching keeps the column from narrowing as the window
   widens. */
@media (min-width: 1400px) and (max-width: 1699px) {
    .vp-panel-paired[b-ikjy2pcxsi] {
        padding-left: calc(56px + (100vw - 1400px) * 134 / 300);
        padding-right: calc(56px + (100vw - 1400px) * 40 / 300);
    }

    .vp-panel-paired .vp-foot[b-ikjy2pcxsi] {
        margin-inline-start: calc((100vw - 1400px) * -94 / 300);
    }
}

@media (min-width: 1400px) {
    .vp-col-paired[b-ikjy2pcxsi] {
        max-width: 1040px;
    }
}
/* /Components/Pages/Vendor/VendorSignUpReview.razor.rz.scp.css */
/* THE REVIEW STEP IN TWO HALVES ON A WIDE WINDOW (owner, 30 September 2026: "why user have to scroll when we have
   horizontal empty spaces"; DECISIONS.md item 25). From 1400px the card of what the vendor entered is the left half,
   and the terms, the two ticks and the buttons are the right half, so "Create account" is on the first screen. The
   card may run on below it; it is a reading, and each section keeps its own Edit. Below 1400px the block follows the
   card in the design's one column. VendorShell gives the column its width (PairedColumn). */
.vp-review-aside[b-pmbncw06rn] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

@media (min-width: 1400px) {
    .vp-grid[b-pmbncw06rn] {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: start;
    }

    .vp-review[b-pmbncw06rn] {
        grid-column: 1;
    }

    .vp-review-aside[b-pmbncw06rn] {
        grid-column: 2;
    }
}