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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.auth-page button[b-ldzpajf5fp],
.auth-page input[b-ldzpajf5fp],
.auth-page a[b-ldzpajf5fp] {
    color: inherit;
    font: inherit;
}

.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/Decide/Decide.razor.rz.scp.css */
/*
 * The decision page's own styles.
 *
 * APPLIED, NOT DESIGNED. This is the activation page's stylesheet taken whole - the same auth shell, palette and type -
 * because Blazor CSS isolation scopes a page's stylesheet to that page, and the decision page is the same kind of page: a
 * person signed in to Crolle doing one thing. The rules added at the end lay out what only this page has (the sealed
 * change, a list's entries, the two answers) with the same values. A Claude Design pass for this page is still owed.
 */

.auth-page[b-uvzyzuuhos] {
    --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-uvzyzuuhos],
.auth-page *[b-uvzyzuuhos]::before,
.auth-page *[b-uvzyzuuhos]::after {
    box-sizing: border-box;
}

.auth-page button[b-uvzyzuuhos],
.auth-page input[b-uvzyzuuhos],
.auth-page a[b-uvzyzuuhos] {
    color: inherit;
    font: inherit;
}

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

.skip-link[b-uvzyzuuhos] {
    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-uvzyzuuhos] {
    transform: translateY(0);
}

/* ── the brand side ─────────────────────────────────────────────────────────────────────────────────────────── */
.brand-panel[b-uvzyzuuhos] {
    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-uvzyzuuhos] {
    /* 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-uvzyzuuhos] {
    color: #ed895e;
}

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

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

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

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

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

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

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

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

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

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

.signin-error[b-uvzyzuuhos],
.signin-note[b-uvzyzuuhos] {
    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-uvzyzuuhos] {
    border-left-color: var(--auth-line-strong);
    color: var(--auth-muted);
}

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

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

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

.field input[b-uvzyzuuhos] {
    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-uvzyzuuhos]::placeholder {
    color: #9a9ea3;
}

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

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

.submit-button[b-uvzyzuuhos] {
    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-uvzyzuuhos] {
    background: var(--auth-accent-deep);
}

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

.access-note[b-uvzyzuuhos] {
    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-uvzyzuuhos] {
    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-uvzyzuuhos] {
        grid-template-columns: minmax(0, 1fr);
    }

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

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

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

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

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

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

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

/* ── what only the decision page has ────────────────────────────────────────────────────────────────────────── */
.decision-card[b-uvzyzuuhos] {
    max-width: 40rem;
}

.decision-text[b-uvzyzuuhos] {
    margin: 0;
    padding: 14px 16px;
    font-size: 0.95rem;
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    background: var(--auth-white);
    border: 1px solid var(--auth-line);
    border-radius: 2px;
}

.decision-rows[b-uvzyzuuhos] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    background: var(--auth-white);
}

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

.decision-rows th[b-uvzyzuuhos] {
    width: 38%;
    font-weight: 600;
    color: var(--auth-muted);
}

.decision-facts[b-uvzyzuuhos] {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 6px 16px;
    margin: 0;
    font-size: 0.875rem;
}

.decision-facts dt[b-uvzyzuuhos] {
    font-weight: 600;
    color: var(--auth-muted);
}

.decision-facts dd[b-uvzyzuuhos] {
    margin: 0;
    overflow-wrap: anywhere;
}

.decision-entries[b-uvzyzuuhos] {
    display: grid;
    gap: 8px;
    margin: 0;
    padding-inline-start: 1.4rem;
    font-size: 0.9rem;
    line-height: 1.5;
}

.decision-entry-ref[b-uvzyzuuhos] {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--auth-muted);
    overflow-wrap: anywhere;
}

.decision-entry-text[b-uvzyzuuhos] {
    display: block;
    overflow-wrap: anywhere;
}

.decision-entry-plan[b-uvzyzuuhos] {
    display: block;
    font-size: 0.8125rem;
    color: var(--auth-muted);
}

.decision-actions[b-uvzyzuuhos] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.decision-actions .submit-button[b-uvzyzuuhos],
.decline-button[b-uvzyzuuhos] {
    flex: 1 1 10rem;
    margin-top: 0;
}

.decline-button[b-uvzyzuuhos] {
    padding: 12px 16px;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--auth-danger);
    background: var(--auth-white);
    border: 1px solid var(--auth-danger);
    border-radius: 2px;
    cursor: pointer;
    transition: background-color 120ms ease;
}

.decline-button:hover[b-uvzyzuuhos] {
    background: #f7eaeb;
}

/* ── a change as its table: the working space goes to the table ───────────────────────────────────────────────── */
.auth-page.decision-wide[b-uvzyzuuhos] {
    grid-template-columns: minmax(220px, 20%) minmax(0, 80%);
}

.decision-wide .brand-panel[b-uvzyzuuhos] {
    gap: 28px;
    padding: 32px 26px;
}

.decision-wide .brand-title[b-uvzyzuuhos] {
    font-size: 1.35rem;
}

.decision-wide .brand-copy[b-uvzyzuuhos] {
    font-size: 0.85rem;
}

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

.decision-wide .decision-card[b-uvzyzuuhos] {
    max-width: none;
}

.decision-summary[b-uvzyzuuhos] {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
}

.decision-table-scroll[b-uvzyzuuhos] {
    max-width: 100%;
    overflow-x: auto;
    background: var(--auth-white);
    border: 1px solid var(--auth-line);
    border-radius: 2px;
}

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

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

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

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

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

.decision-record th[b-uvzyzuuhos] {
    width: 32%;
    color: var(--auth-muted);
}

.decision-row-action[b-uvzyzuuhos],
.decision-outcome[b-uvzyzuuhos] {
    display: block;
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--auth-muted);
}

.decision-row-context[b-uvzyzuuhos] {
    margin-top: 4px;
    font-size: 0.8125rem;
}

.decision-row-context dt[b-uvzyzuuhos],
.decision-row-context dd[b-uvzyzuuhos] {
    font-weight: 400;
}

.decision-ref[b-uvzyzuuhos] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8125rem;
}

.decision-field[b-uvzyzuuhos] {
    color: var(--auth-muted);
    white-space: nowrap;
}

.decision-muted[b-uvzyzuuhos] {
    color: var(--auth-muted);
}

.decision-blank[b-uvzyzuuhos] {
    font-style: italic;
    color: var(--auth-muted);
}

.decision-items[b-uvzyzuuhos] {
    margin: 4px 0 0;
    padding-inline-start: 1.1rem;
}

.decision-row-details td[b-uvzyzuuhos] {
    padding-top: 0;
}

.decision-details summary[b-uvzyzuuhos] {
    cursor: pointer;
    font-size: 0.8125rem;
    color: var(--auth-accent-deep);
}

.decision-details .decision-facts[b-uvzyzuuhos] {
    margin-top: 6px;
    font-size: 0.8125rem;
}

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

    .decision-wide .signin-panel[b-uvzyzuuhos] {
        padding: 24px 16px 40px;
    }
}
/* /Components/Pages/Error/Error.razor.rz.scp.css */
.error-title[b-nwhe8ui33k] { color: #b32121; }
/* /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;
    --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;
}

.auth-page button[b-7ltsea0ygl],
.auth-page input[b-7ltsea0ygl],
.auth-page a[b-7ltsea0ygl] {
    color: inherit;
    font: inherit;
}

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

.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/Team/TeamHome.razor.rz.scp.css */
/* ============================================================================
   CROLLLE'S TEAM PORTAL — the design tokens are the LIVE SITE'S OWN, copied from
   crolle.ai's stylesheet (:root), so the page and the website read as one product:
   the same ink, the same warm paper, the same terracotta accent, the same IBM Plex,
   the same square corners and hairline rules. Nothing here is a second palette.

   It is an OPERATIONAL surface, not a presentation: no hero, no marketing copy —
   a form, a register, and the facts an operator acts on.
   ============================================================================ */

.tp-root[b-hqlqzm9avf] {
    --ink: #141b20;
    --ink-deep: #10161a;
    --paper: #f5f5f1;
    --white: #fff;
    --text: #f6f7f5;
    --muted: #aeb9c0;
    --muted-ink: #5b6267;
    --accent: #ed895e;
    --accent-ink: #a84620;
    --line: rgba(255, 255, 255, 0.15);
    --line-dark: rgba(24, 33, 40, 0.15);
    --gutter: clamp(24px, 4.5vw, 80px);
    --max: 1440px;
    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    --danger-ink: #8c2f18;

    min-height: 100dvh;
    background: var(--paper);
    color: var(--ink);
    font-family: 'IBM Plex Sans', 'Plex', Arial, sans-serif;
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
}

.tp-root *[b-hqlqzm9avf],
.tp-root *[b-hqlqzm9avf]::before,
.tp-root *[b-hqlqzm9avf]::after { box-sizing: border-box; }

.tp-shell[b-hqlqzm9avf] {
    width: min(var(--max), calc(100% - 2 * var(--gutter)));
    margin-inline: auto;
}

.tp-narrow[b-hqlqzm9avf] { max-width: 760px; }

.tp-visually-hidden[b-hqlqzm9avf] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.tp-skip[b-hqlqzm9avf] {
    position: fixed;
    left: 16px;
    top: 12px;
    z-index: 100;
    padding: 12px 18px;
    background: var(--paper);
    color: var(--ink);
    transform: translateY(-180%);
}

.tp-skip:focus[b-hqlqzm9avf] { transform: none; }

/* ── Header: the site's own header, carrying the portal's name ── */

.tp-header[b-hqlqzm9avf] {
    background: var(--ink);
    color: var(--text);
    border-bottom: 1px solid var(--line);
}

.tp-header-inner[b-hqlqzm9avf] {
    display: flex;
    align-items: center;
    gap: 24px;
    min-height: 84px;
    flex-wrap: wrap;
    padding-block: 12px;
}

.tp-wordmark[b-hqlqzm9avf] {
    font-size: 34px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: -2.4px;
    color: var(--text);
    text-decoration: none;
}

.tp-wordmark span[b-hqlqzm9avf] { color: var(--accent); }

.tp-descriptor[b-hqlqzm9avf],
.tp-section[b-hqlqzm9avf] {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    letter-spacing: 1px;
    color: var(--muted);
}

.tp-section[b-hqlqzm9avf] {
    color: var(--accent);
    border-left: 1px solid var(--line);
    padding-left: 22px;
}

.tp-who[b-hqlqzm9avf] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 22px;
    font-size: 14px;
}

.tp-who-name[b-hqlqzm9avf] { color: var(--text); }

.tp-who-out[b-hqlqzm9avf] {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    letter-spacing: 0.8px;
    color: var(--muted);
    text-decoration: none;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

.tp-who-out:hover[b-hqlqzm9avf] { color: var(--accent); }

/* ── Main ── */

.tp-main[b-hqlqzm9avf] { padding-block: clamp(32px, 5vw, 72px) clamp(48px, 8vw, 110px); }

.tp-eyebrow[b-hqlqzm9avf] {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    letter-spacing: 1.3px;
    color: var(--accent-ink);
    margin: 0 0 18px;
}

.tp-title[b-hqlqzm9avf],
.tp-h2[b-hqlqzm9avf] {
    font-weight: 450;
    letter-spacing: -0.04em;
    line-height: 1.08;
    margin: 0;
}

.tp-title[b-hqlqzm9avf] { font-size: clamp(32px, 4vw, 56px); max-width: 22ch; }
.tp-h2[b-hqlqzm9avf] { font-size: clamp(26px, 2.6vw, 38px); }

.tp-copy[b-hqlqzm9avf] {
    font-size: 16px;
    line-height: 1.65;
    color: var(--muted-ink);
    margin: 20px 0 0;
    max-width: 62ch;
}

.tp-small[b-hqlqzm9avf] { font-size: 15px; }

.tp-signin .tp-button[b-hqlqzm9avf] { margin-top: 34px; }

/* ── Blocks ── */

.tp-block[b-hqlqzm9avf] {
    padding-top: 44px;
    margin-top: 44px;
    border-top: 1px solid var(--line-dark);
}

.tp-block:first-of-type[b-hqlqzm9avf] { border-top: 0; margin-top: 0; padding-top: 0; }

.tp-block-head[b-hqlqzm9avf] { margin-bottom: 30px; }

/* ── The one button in the site's own hand: square, quiet paper, accent on hover ── */

.tp-button[b-hqlqzm9avf] {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 42px;
    min-height: 54px;
    padding: 16px 22px;
    border: 0;
    background: var(--ink);
    color: var(--paper);
    font: inherit;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.tp-button:hover[b-hqlqzm9avf] { background: var(--accent); color: var(--ink); }

.tp-button-quiet[b-hqlqzm9avf] { background: var(--paper); color: var(--ink); border: 1px solid var(--ink); }
.tp-button-quiet:hover[b-hqlqzm9avf] { background: var(--accent); border-color: var(--accent); }

.tp-button-stop[b-hqlqzm9avf] { background: var(--danger-ink); color: var(--white); }
.tp-button-stop:hover[b-hqlqzm9avf] { background: var(--accent-ink); color: var(--white); }

.tp-link-button[b-hqlqzm9avf] {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    font-size: 14px;
    color: var(--accent-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    min-height: 44px;
}

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

/* ── Forms ── */

.tp-form[b-hqlqzm9avf] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 26px 30px;
    align-items: start;
    max-width: 940px;
}

.tp-form .tp-button[b-hqlqzm9avf] { grid-column: 1 / -1; justify-self: start; margin-top: 6px; }

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

.tp-form label[b-hqlqzm9avf],
.tp-inline-form label[b-hqlqzm9avf] {
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
}

.tp-form input[b-hqlqzm9avf],
.tp-inline-form input[b-hqlqzm9avf],
.tp-form textarea[b-hqlqzm9avf],
.tp-act textarea[b-hqlqzm9avf] {
    font: inherit;
    font-size: 15px;
    color: var(--ink);
    background: var(--white);
    border: 1px solid var(--line-dark);
    border-radius: 0;
    padding: 13px 14px;
    min-height: 50px;
    width: 100%;
}

.tp-act textarea[b-hqlqzm9avf] { min-height: 76px; resize: vertical; }

.tp-form input:focus-visible[b-hqlqzm9avf],
.tp-inline-form input:focus-visible[b-hqlqzm9avf],
.tp-form textarea:focus-visible[b-hqlqzm9avf],
.tp-act textarea:focus-visible[b-hqlqzm9avf],
.tp-button:focus-visible[b-hqlqzm9avf],
.tp-who-out:focus-visible[b-hqlqzm9avf] {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.tp-hint[b-hqlqzm9avf] {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    line-height: 1.65;
    color: var(--muted-ink);
    margin: 0;
}

.tp-inline-form[b-hqlqzm9avf] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px 18px;
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid var(--line-dark);
}

.tp-inline-form input[b-hqlqzm9avf] { width: auto; min-width: 260px; flex: 0 1 320px; }

/* ── The register ── */

.tp-table-wrap[b-hqlqzm9avf] { overflow-x: auto; }

.tp-table[b-hqlqzm9avf] {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

.tp-caption[b-hqlqzm9avf] {
    text-align: left;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    letter-spacing: 0.6px;
    color: var(--muted-ink);
    padding-bottom: 12px;
}

.tp-table th[b-hqlqzm9avf],
.tp-table td[b-hqlqzm9avf] {
    text-align: left;
    vertical-align: top;
    padding: 16px 18px 16px 0;
    border-top: 1px solid var(--line-dark);
    font-weight: 400;
}

.tp-table thead th[b-hqlqzm9avf] {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    letter-spacing: 0.8px;
    color: var(--muted-ink);
    border-top: 0;
    border-bottom: 1px solid var(--line-dark);
    white-space: nowrap;
}

.tp-ws-name[b-hqlqzm9avf] {
    display: block;
    font-size: 17px;
    font-weight: 500;
    letter-spacing: -0.01em;
}

.tp-ws-code[b-hqlqzm9avf] {
    display: block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    letter-spacing: 0.4px;
    color: var(--accent-ink);
    margin-top: 5px;
}

.tp-when[b-hqlqzm9avf] { display: block; }

.tp-who-made[b-hqlqzm9avf] {
    display: block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    line-height: 1.6;
    color: var(--muted-ink);
    margin-top: 5px;
    max-width: 34ch;
}

.tp-state[b-hqlqzm9avf] {
    display: inline-block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    letter-spacing: 0.6px;
    padding: 5px 9px;
    background: rgba(24, 33, 40, 0.07);
    color: var(--ink);
    white-space: nowrap;
}

.tp-state-active[b-hqlqzm9avf] { background: rgba(24, 33, 40, 0.07); }
.tp-state-warned[b-hqlqzm9avf] { background: rgba(237, 137, 94, 0.22); color: var(--accent-ink); }
.tp-state-suspended[b-hqlqzm9avf] { background: var(--danger-ink); color: var(--white); }

.tp-row-removed[b-hqlqzm9avf] { opacity: 0.62; }
.tp-row-removed .tp-ws-code[b-hqlqzm9avf] { color: var(--muted-ink); text-decoration: line-through; }

/* ── Acting on one workspace, disclosed in place — no script, so it works with none ── */

.tp-act summary[b-hqlqzm9avf] {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    letter-spacing: 0.8px;
    color: var(--accent-ink);
    cursor: pointer;
    min-height: 44px;
    display: flex;
    align-items: center;
    list-style: none;
}

.tp-act summary[b-hqlqzm9avf]::-webkit-details-marker { display: none; }
.tp-act summary[b-hqlqzm9avf]::before { content: '+ '; }
.tp-act[open] summary[b-hqlqzm9avf]::before { content: '– '; }

.tp-act-body[b-hqlqzm9avf] {
    min-width: 320px;
    max-width: 420px;
    padding: 18px;
    background: var(--white);
    border: 1px solid var(--line-dark);
}

.tp-act-body form[b-hqlqzm9avf] { display: flex; flex-direction: column; gap: 8px; }
.tp-act-body form + form[b-hqlqzm9avf] { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line-dark); }
.tp-act-body label[b-hqlqzm9avf] { font-size: 14px; font-weight: 500; }
.tp-act-body .tp-button[b-hqlqzm9avf] { margin-top: 8px; justify-content: center; gap: 12px; }

/* ── What the last post came to ── */

.tp-alert[b-hqlqzm9avf] {
    padding: 16px 20px;
    margin: 0 0 34px;
    font-size: 15px;
    line-height: 1.6;
    border-left: 2px solid var(--accent-ink);
    background: var(--white);
}

.tp-alert-problem[b-hqlqzm9avf] { border-left-color: var(--danger-ink); color: var(--danger-ink); }
.tp-alert-done[b-hqlqzm9avf] { border-left-color: var(--accent-ink); color: var(--ink); }

.tp-refusal[b-hqlqzm9avf] { color: var(--danger-ink); }

@media (max-width: 700px) {
    .tp-descriptor[b-hqlqzm9avf] { display: none; }
    .tp-who[b-hqlqzm9avf] { width: 100%; margin-left: 0; justify-content: space-between; }
    .tp-act-body[b-hqlqzm9avf] { min-width: 0; }
    .tp-inline-form input[b-hqlqzm9avf] { min-width: 0; flex: 1 1 100%; }
}