@import '_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.bundle.scp.css';

/* /Components/ApplicationSteps.razor.rz.scp.css */
/* ============================================================
   Step intro card — the "what this page is about" header shared
   by every application step (the welcome hero, generalised).
   Campus gradient + watermark step numeral tie it to the strip's
   numbered dots and the dashboard greeting band.
   ============================================================ */

.step-header[b-4vmba3yxpg] {
    position: sticky;
    top: 0;
    z-index: 20;
    margin-bottom: 22px;
    background: var(--colorNeutralBackground1);
    border-radius: 16px 16px 0 0;
}

.step-intro[b-4vmba3yxpg] {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    padding: 20px 22px;
    margin: 0;
    color: #fff;
    background-image: linear-gradient(135deg,
        var(--applyBrandHeroStart) 0%,
        var(--applyBrandHeroMid) 55%,
        var(--applyBrandHeroEnd) 100%);
}

.step-intro-meta[b-4vmba3yxpg] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 11px;
}

.step-intro-eyebrow[b-4vmba3yxpg] {
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
}

.step-intro-chip[b-4vmba3yxpg] {
    color: rgba(255, 255, 255, 0.85);
    font-weight: 600;
}

/* "Apprenticeship" badge — same slot as the campus/year chip, given a
   pill so it reads as a distinct tag rather than more metadata text. */
.step-intro-chip-type[b-4vmba3yxpg] {
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: .04em;
}

.step-intro-status[b-4vmba3yxpg] {
    margin-left: auto;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    font-weight: 700;
}

.step-intro-status.submitted[b-4vmba3yxpg] {
    background: var(--colorStatusSuccessBackground3, #107c10);
}

.step-intro h1[b-4vmba3yxpg] {
    position: relative;
    z-index: 1;
    margin: 0;
    font-size: 24px;
    line-height: 1.15;
}

.step-intro p[b-4vmba3yxpg] {
    position: relative;
    z-index: 1;
    margin: 6px 0 0;
    font-size: 13.5px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.88);
    max-width: 52ch;
}

.step-intro-guidance[b-4vmba3yxpg] {
    position: relative;
    z-index: 1;
    margin-top: 8px;
}

.step-intro-content[b-4vmba3yxpg] {
    position: relative;
    z-index: 1;
    min-height: 100px;
}

/* Keep the page identity as a quiet label while the field takes top billing. */
.step-intro[data-has-field-guidance] h1[b-4vmba3yxpg] {
    font-size: 13px;
    line-height: 1.35;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
}

.step-intro-guidance strong[b-4vmba3yxpg] {
    display: block;
    font-size: 24px;
    line-height: 1.15;
    font-weight: 700;
}

.step-intro-guidance p[b-4vmba3yxpg] {
    max-width: 65ch;
    margin-top: 4px;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

/* Watermark step numeral — sequence is real information in this flow. */
.step-intro-num[b-4vmba3yxpg] {
    position: absolute;
    right: 10px;
    bottom: -18px;
    font-size: 96px;
    font-weight: 700;
    line-height: 1;
    color: rgba(255, 255, 255, 0.09);
    user-select: none;
    pointer-events: none;
}

@media (max-width: 768px) {
    .step-header[b-4vmba3yxpg] {
        /* The Fluent content area scrolls below the app header. Keep this
           introduction at its top, with the form flowing underneath it. */
        top: -16px; /* include the content area's top gutter */
        margin: -16px -16px 16px;
        border-radius: 0 0 12px 12px;
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
    }

    .step-intro[b-4vmba3yxpg] {
        margin: 0;
        padding: 12px 16px;
        border-radius: 0 0 12px 12px;
    }

    .step-intro h1[b-4vmba3yxpg],
    .step-intro-guidance strong[b-4vmba3yxpg] {
        font-size: 20px;
        line-height: 1.2;
    }

    .step-intro p[b-4vmba3yxpg] {
        margin-top: 4px;
        font-size: 13px;
        line-height: 1.35;
        max-width: none;
    }

    .step-intro-meta[b-4vmba3yxpg],
    .step-intro-num[b-4vmba3yxpg] {
        display: none;
    }

    .step-intro-guidance[b-4vmba3yxpg] {
        margin-top: 6px;
    }

    .step-intro-content[b-4vmba3yxpg] {
        /* Size to the title and current guidance, including when focus changes. */
        min-height: 0;
    }
}
/* /Components/ContactCards.razor.rz.scp.css */
.contact-cards[b-p6b7qb5wje] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contact-cards-heading h2[b-p6b7qb5wje],
.contact-cards-heading p[b-p6b7qb5wje] {
    margin: 0;
}

.contact-cards-heading p[b-p6b7qb5wje] {
    margin-top: 4px;
    color: var(--colorNeutralForeground2);
}

.eyebrow-text[b-p6b7qb5wje] {
    display: block;
    margin-bottom: 4px;
    color: var(--colorBrandForeground1);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.contact-cards-grid[b-p6b7qb5wje] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--apply-card-gutter, 18px);
}

@media (max-width: 760px) {
    .contact-cards-grid[b-p6b7qb5wje] {
        grid-template-columns: 1fr;
    }
}
/* /Components/DeclarationNotices.razor.rz.scp.css */
.declaration-notice[b-z15uck57am] {
    min-width: 0;
    font-size: 13px;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.declaration-notice h2[b-z15uck57am] {
    margin: 0 0 12px;
    font-size: 16px;
}

.declaration-notice p[b-z15uck57am] {
    margin: 0 0 12px;
    font-size: inherit;
    line-height: inherit;
}

.declaration-notice p:last-child[b-z15uck57am] { margin-bottom: 0; }
.declaration-notice ul[b-z15uck57am] { margin: 0; padding-left: 20px; }
.declaration-notice li + li[b-z15uck57am] { margin-top: 10px; }
.declaration-notice a[b-z15uck57am] {
    color: var(--colorBrandForegroundLink);
    text-decoration: underline;
    text-underline-offset: 2px;
}
/* /Components/EaseFeedbackDialog.razor.rz.scp.css */
/* ============================================================
   Post-submit ease survey — five sentiment faces + comment
   ============================================================ */

.ease-scale[b-37axxbz2nh] {
    border: 0;
    margin: 0 0 18px;
    padding: 0;
    min-width: 0;
}

.ease-scale legend[b-37axxbz2nh] {
    padding: 0;
    margin-bottom: 14px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--colorNeutralForeground1);
}

.ease-options[b-37axxbz2nh] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

.ease-option[b-37axxbz2nh] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 4px 10px;
    border: 2px solid var(--colorNeutralStroke2);
    border-radius: 12px;
    background: var(--colorNeutralBackground1);
    color: var(--ease-color);
    cursor: pointer;
    text-align: center;
    transition: border-color .12s ease, background .12s ease, transform .12s ease;
}

/* Diverging scale: blue (easy) <-> orange/red (difficult), gray neutral midpoint.
   Checked for colour-blind separation; green/red failed (orange and red merged).
   Same steps as Apply.Admin's feedback report. */
.ease-1[b-37axxbz2nh] { --ease-color: #0f6cbd; }
.ease-2[b-37axxbz2nh] { --ease-color: #62abf5; }
.ease-3[b-37axxbz2nh] { --ease-color: #8a8886; }
.ease-4[b-37axxbz2nh] { --ease-color: #f7630c; }
.ease-5[b-37axxbz2nh] { --ease-color: #c50f1f; }

body[data-theme="dark"] .ease-1[b-37axxbz2nh] { --ease-color: #62abf5; }
body[data-theme="dark"] .ease-2[b-37axxbz2nh] { --ease-color: #2378d0; }
body[data-theme="dark"] .ease-3[b-37axxbz2nh] { --ease-color: #a19f9d; }
body[data-theme="dark"] .ease-4[b-37axxbz2nh] { --ease-color: #f98845; }
body[data-theme="dark"] .ease-5[b-37axxbz2nh] { --ease-color: #dc3545; }

/* The radio stays in the accessibility tree and keyboard order; the tile is its label.
   FluentIcon inlines fill: currentColor, so faces take the tile's --ease-color. */
.ease-option input[b-37axxbz2nh] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.ease-option span[b-37axxbz2nh] {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--colorNeutralForeground1);
}

.ease-option:hover[b-37axxbz2nh] {
    border-color: var(--ease-color);
    transform: translateY(-1px);
}

.ease-option.selected[b-37axxbz2nh] {
    border-color: var(--ease-color);
    background: color-mix(in srgb, var(--ease-color) 12%, var(--colorNeutralBackground1));
}

.ease-option:has(input:focus-visible)[b-37axxbz2nh] {
    outline: 2px solid var(--colorStrokeFocus2, var(--colorBrandStroke1));
    outline-offset: 2px;
}

.ease-option:has(input:disabled)[b-37axxbz2nh] {
    cursor: default;
}

.ease-comment-label[b-37axxbz2nh] {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    color: var(--colorNeutralForeground1);
}

.ease-comment-label span[b-37axxbz2nh] {
    font-weight: 400;
    color: var(--colorNeutralForeground3);
}

.ease-comment[b-37axxbz2nh] {
    display: block;
    box-sizing: border-box;
    width: 100%;
    resize: vertical;
    padding: 10px 12px;
    border: 1px solid var(--colorNeutralStroke1);
    border-radius: var(--borderRadiusMedium);
    background: var(--colorNeutralBackground1);
    color: var(--colorNeutralForeground1);
    font: inherit;
    font-size: 16px;
    line-height: 1.45;
}

.ease-comment:focus-visible[b-37axxbz2nh] {
    outline: 2px solid var(--colorBrandStroke1);
    outline-offset: 2px;
}

.ease-error[b-37axxbz2nh] {
    margin: 10px 0 0;
    font-weight: 600;
    color: var(--colorPaletteRedForeground1, #d13438);
}

@media (max-width: 480px) {
    .ease-options[b-37axxbz2nh] {
        gap: 6px;
    }

    .ease-option[b-37axxbz2nh] {
        padding: 10px 2px 8px;
    }

    .ease-option span[b-37axxbz2nh] {
        font-size: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ease-option[b-37axxbz2nh] {
        transition: none;
    }

    .ease-option:hover[b-37axxbz2nh] {
        transform: none;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* Slide-in navigation drawer, available at every screen size */

.brand-link[b-ue7t2x2t1d] {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    /* Never let flexbox crush the lockup — the logo would overflow the
       shrunken anchor and slide under the buttons to its right. */
    flex-shrink: 0;
    color: inherit;
    text-decoration: none;
}

/* The logo SVGs are cropped to the wordmark (~3.5:1), so size by height and
   let the width follow — a square box would shrink them to a sliver again. */
.campus-logo[b-ue7t2x2t1d] {
    display: block;
    height: 40px;
    width: auto;
}

.portal-name[b-ue7t2x2t1d] {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .01em;
    white-space: nowrap;
    opacity: .92;
    border-left: 1px solid color-mix(in srgb, currentColor 30%, transparent);
    padding-left: 14px;
}

.campus-switch[b-ue7t2x2t1d] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 8px;
    background: var(--colorNeutralBackground2);
}

.campus-switch-option[b-ue7t2x2t1d] {
    appearance: none;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--colorNeutralForeground2);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 10px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}

    .campus-switch-option:hover[b-ue7t2x2t1d] {
        color: var(--colorBrandForeground1);
        background: var(--colorBrandBackground2);
    }

    .campus-switch-option.active[b-ue7t2x2t1d] {
        background: var(--colorBrandBackground);
        color: var(--colorNeutralForegroundOnBrand);
        box-shadow: var(--shadow2);
    }

.drawer[b-ue7t2x2t1d] {
    position: fixed;
    top: 0;
    left: 0;
    height: 100dvh;
    width: 280px;
    max-width: 85vw;
    background: var(--colorNeutralBackground1);
    box-shadow: var(--shadow16);
    transform: translateX(-100%);
    transition: transform .2s ease;
    z-index: 1001;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

    .drawer.open[b-ue7t2x2t1d] {
        transform: translateX(0);
    }

.drawer-header[b-ue7t2x2t1d] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px 10px 16px;
    border-bottom: 1px solid var(--colorNeutralStroke2);
    font-weight: 600;
}

.drawer-overlay[b-ue7t2x2t1d] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .4);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease;
    z-index: 1000;
}

    .drawer-overlay.open[b-ue7t2x2t1d] {
        opacity: 1;
        visibility: visible;
    }

.drawer-footer[b-ue7t2x2t1d] {
    margin-top: auto;
    padding: 10px 12px;
    border-top: 1px solid var(--colorNeutralStroke2);
}

.drawer-theme-toggle[b-ue7t2x2t1d] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--colorNeutralForeground1);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .12s ease;
}

    .drawer-theme-toggle:hover[b-ue7t2x2t1d] {
        background: var(--colorNeutralBackground2);
    }

/* Mobile header declutter: the campus switch lives in Settings, and the
   light/dark toggle moves to the bottom of the drawer. Aligned to 768px so it
   matches the mobile-shell breakpoint (no 701–768px hybrid band). */
@media (max-width: 768px) {
    .campus-logo[b-ue7t2x2t1d] {
        height: 34px;
    }

    .portal-name[b-ue7t2x2t1d] {
        display: none;
    }

    .campus-switch[b-ue7t2x2t1d] {
        display: none;
    }
    /* .header-theme-toggle is hidden from app.css — it sits on a Fluent child
       component, out of reach of this file's CSS isolation. */
}

/* Narrow phones: hamburger + wordmark + two labelled buttons + autosave chip
   don't fit, so the auth buttons drop to icon-only (aria-labels carry the
   names). The spans are slotted light DOM inside this file, so this scoped
   rule reaches them; the matching fluent-button min-width override lives in
   app.css because CSS isolation can't target a child component's host. */
@media (max-width: 480px) {
    .auth-btn-label[b-ue7t2x2t1d] {
        display: none;
    }
}
/* /Components/Layout/MobileStepStrip.razor.rz.scp.css */
/* Apply.Web/Components/Layout/MobileStepStrip.razor.css */
.step-strip[b-5keykv2r5b] { display: none; }

@media (max-width: 768px) {
    .step-strip[b-5keykv2r5b] {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1099;
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        align-items: center;
        gap: 2px;
        box-sizing: border-box;
        height: calc(56px + env(safe-area-inset-bottom, 0px));
        padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
        /* A single theme surface keeps completed steps from forming a pale
           block in dark mode. Dots and badges carry the progress state. */
        background: var(--colorNeutralBackground1);
        touch-action: pan-y pinch-zoom;
        border-top: 1px solid var(--colorNeutralStroke2);
        box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.05);
    }
}

.step[b-5keykv2r5b] {
    min-width: 0;
    min-height: 44px;
    padding: 0 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border: 0;
    background: none;
    font-size: 10px;
    font-weight: 600;
    color: var(--colorNeutralForeground3);
    cursor: pointer;
}

.step:disabled[b-5keykv2r5b] { cursor: default; }

.dot[b-5keykv2r5b] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    border: 1.5px solid var(--colorNeutralStroke1);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    color: var(--colorNeutralForeground3);
    background: var(--colorNeutralBackground1);
}

.step-label[b-5keykv2r5b] {
    max-width: 100%;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.step.done[b-5keykv2r5b] { color: var(--colorNeutralForeground2); }
.step.done .dot[b-5keykv2r5b] {
    background: var(--colorBrandBackground);
    border-color: var(--colorBrandBackground);
    color: #fff;
}

.step.current[b-5keykv2r5b] { color: var(--colorBrandForeground1); }
.step.current .dot[b-5keykv2r5b] {
    border-color: var(--colorBrandForeground1);
    color: var(--colorBrandForeground1);
    box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 20%, transparent);
}

.step.locked[b-5keykv2r5b] { opacity: 0.5; }

/* Green count badge on the Courses step. */
.count-badge[b-5keykv2r5b] {
    position: absolute;
    top: -6px;
    right: -8px;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--colorPaletteGreenBackground3, #0e700e);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
}
/* /Components/Layout/MobileTabBar.razor.rz.scp.css */
/* Mobile bottom tab bar - the "app shell" navigation.
   Hidden on desktop; revealed at the same <=768px breakpoint where the
   header controls collapse. */

.mobile-tabbar[b-2ugc29hwfh] {
    display: none;
}

@media (max-width: 768px) {
    .mobile-tabbar[b-2ugc29hwfh] {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1100;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 2px;
        padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
        background: var(--colorNeutralBackground1);
        border-top: 1px solid var(--colorNeutralStroke2);
        box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.06);
    }
}

.tab[b-2ugc29hwfh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 48px;
    padding: 6px 0;
    border-radius: 12px;
    text-decoration: none;
    color: var(--colorNeutralForeground3);
    font-size: 10.5px;
    font-weight: 600;
    transition: color .15s ease, background-color .15s ease;
}

.tab.active[b-2ugc29hwfh] {
    color: var(--colorBrandForeground1);
}

.tab:active[b-2ugc29hwfh] {
    background: var(--colorNeutralBackground2);
}

/* Icons follow the link colour so active/inactive states read clearly. */
.tab[b-2ugc29hwfh]  svg {
    fill: currentColor;
}

.tab-ico[b-2ugc29hwfh] {
    position: relative;
    display: inline-flex;
}

.tab-label[b-2ugc29hwfh] {
    max-width: 100%;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tab-badge[b-2ugc29hwfh] {
    position: absolute;
    top: -5px;
    right: -9px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--colorPaletteRedBackground3, #c50f1f);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}
/* /Components/Layout/NotificationBell.razor.rz.scp.css */
.notification-content[b-nyxhzba7o1] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    line-height: 1.45;
    min-width: 0;
    width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    padding-block: 6px;
}

.notification-message[b-nyxhzba7o1] {
    white-space: pre-wrap;
    font-size: var(--fontSizeBase200);
    color: var(--colorNeutralForeground2);
}

.notification-bell[b-nyxhzba7o1] { display: contents; }

/* Fluent's menu list defaults to a 300px cap. Size the actual popover. */
.notification-bell[b-nyxhzba7o1]  .notification-menu-list {
    width: min(560px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    min-width: 0;
    box-sizing: border-box;
    position-area: block-end span-inline-start;
    position-try-fallbacks: flip-inline, flip-block;
    max-height: min(640px, calc(100dvh - 96px));
    overflow-y: auto;
    overflow-x: hidden;
}

/* With one icon column, this Fluent release puts content in a fixed 20px
   second column. Give that column the remaining width for readable wrapping. */
.notification-bell[b-nyxhzba7o1]  fluent-menu-item {
    grid-template-columns: 20px minmax(0, 1fr);
    height: auto;
    min-height: 32px;
    white-space: normal;
    overflow-wrap: anywhere;
}
/* /Components/Layout/ToastHost.razor.rz.scp.css */
/* Apply.Web/Components/Layout/ToastHost.razor.css
   Toasts drop in from the top — the bottom of a mobile viewport is already
   crowded with the step strip and tab bar. */
.toast-host[b-pnb9fev3p7] {
    position: fixed;
    left: 0;
    right: 0;
    top: calc(64px + env(safe-area-inset-top, 0px));
    z-index: 1200;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    pointer-events: none;
    padding: 0 12px;
}

.toast[b-pnb9fev3p7] {
    max-width: 360px;
    padding: 10px 16px;
    border-radius: 10px;
    background: var(--colorNeutralForeground1);
    color: var(--colorNeutralBackground1);
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
}

/* Success cue (e.g. "Added — {course}"): filled green, white text. */
.toast-success[b-pnb9fev3p7] {
    background: var(--colorStatusSuccessBackground3, #107c10);
    color: #fff;
}

@media (prefers-reduced-motion: no-preference) {
    .toast[b-pnb9fev3p7] {
        animation: toast-drop-b-pnb9fev3p7 .22s ease both;
    }

    @keyframes toast-drop-b-pnb9fev3p7 {
        from {
            opacity: 0;
            transform: translateY(-14px);
        }
    }
}
/* /Components/ManagedField.razor.rz.scp.css */
.managed-field[b-gvenlpz0l7] { display: contents; }
.managed-help-hidden[b-gvenlpz0l7] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.managed-help-inline[b-gvenlpz0l7] { display: block; margin: 6px 0 12px; font-size: .9rem; color: var(--colorNeutralForeground2); white-space: pre-line; overflow-wrap: anywhere; }
.managed-help-inline .managed-help-heading[b-gvenlpz0l7] { display: none; }
.managed-help-inline:has([data-field-help-text]:empty)[b-gvenlpz0l7] { display: none; }
/* /Components/PageImageCard.razor.rz.scp.css */
.pic-aside[b-vb6eh4fbgr] {
    position: sticky;
    top: 0;
    align-self: start;
}

.pic-photo[b-vb6eh4fbgr] {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shadow28);
    isolation: isolate;
}

.pic-slide[b-vb6eh4fbgr] {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.2s ease;
}

.pic-slide.is-active[b-vb6eh4fbgr] {
    opacity: 1;
}

.pic-slide img[b-vb6eh4fbgr] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

/* Brand-tinted wash that deepens toward the caption. --pic-shade (0–1) and
   --pic-reach (0–100%) are set per photo; .7 / 72% reproduce the original wash.
   Keep in sync with Apply.Admin/Components/Marketing/SlotEditor.razor.css. */
.pic-slide[b-vb6eh4fbgr]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        transparent calc(100% - var(--pic-reach, 72%)),
        rgba(var(--applyHeroTintRgb, 1, 57, 70), var(--pic-shade, .7)) calc(100% - var(--pic-reach, 72%) * .39),
        rgba(var(--applyHeroTintRgb, 1, 57, 70), min(1, calc(var(--pic-shade, .7) * 1.3143))) 100%);
}

.pic-toggle[b-vb6eh4fbgr] {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .45);
    color: #fff;
    cursor: pointer;
    display: grid;
    place-items: center;
}

.pic-toggle:hover[b-vb6eh4fbgr] {
    background: rgba(0, 0, 0, .6);
}

.pic-toggle[hidden][b-vb6eh4fbgr] {
    display: none;
}

.pic-toggle:focus-visible[b-vb6eh4fbgr] {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Pause = two bars; play = triangle. */
.pic-icon[b-vb6eh4fbgr] {
    width: 10px;
    height: 12px;
    border-left: 3px solid currentColor;
    border-right: 3px solid currentColor;
    box-sizing: border-box;
}

.pic-toggle[aria-pressed="true"] .pic-icon[b-vb6eh4fbgr] {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 0 6px 10px;
    border-color: transparent transparent transparent currentColor;
}

@media (prefers-reduced-motion: reduce) {
    .pic-slide[b-vb6eh4fbgr] {
        transition: none;
    }
}

.pic-caption[b-vb6eh4fbgr] {
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 22px;
    z-index: 2;
    color: #fff;
}

.pic-caption h2[b-vb6eh4fbgr] {
    margin: 0;
    font-size: 22px;
    line-height: 1.2;
    font-weight: 700;
    text-shadow: 0 1px 14px rgba(0, 0, 0, 0.35);
}

.pic-caption p[b-vb6eh4fbgr] {
    margin: 8px 0 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35);
}

/* Small reassurance card tucked under the photo */
.pic-aside-note[b-vb6eh4fbgr] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    padding: 13px 16px;
    border-radius: 14px;
    background: var(--colorBrandBackground2);
    color: var(--colorBrandForeground1);
    font-size: 13px;
    line-height: 1.4;
}

.pic-aside-note .dot[b-vb6eh4fbgr] {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--colorStatusSuccessForeground1, #0e700e);
    box-shadow: 0 0 0 4px var(--colorStatusSuccessBackground1, #f1faf1);
}

@media (max-width: 1024px) {
    .pic-aside[b-vb6eh4fbgr] {
        display: none;
    }
}
/* /Components/Pages/CourseChoices.razor.rz.scp.css */
.referral-suggestion[b-kjlfvs0ve9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    margin-bottom: 16px;
    border: 1px solid var(--colorBrandStroke2);
    border-radius: 8px;
    background: var(--colorBrandBackground2);
}

.referral-suggestion p[b-kjlfvs0ve9] {
    margin: 0;
}

.referral-suggestion-actions[b-kjlfvs0ve9] {
    display: flex;
    gap: 8px;
}
/* /Components/Pages/Dashboard.razor.rz.scp.css */
.dashboard[b-zalh8accu7] {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
}

.dashboard-main[b-zalh8accu7] {
    display: flex;
    flex-direction: column;
    gap: 28px;
    min-width: 0;
}

/* Contact admissions: full-width row beneath the main + picture-card columns. */
.dashboard-contact[b-zalh8accu7] {
    grid-column: 1 / -1;
    min-width: 0;
}

.dashboard-alert[b-zalh8accu7] {
    grid-column: 1 / -1;
    min-width: 0;
}

/* ---------- Greeting band ---------- */
.greeting[b-zalh8accu7] {
    border-radius: 16px;
    padding: 40px 36px;
    background-image: linear-gradient(135deg,
        var(--applyBrandHeroStart) 0%,
        var(--applyBrandHeroMid) 55%,
        var(--applyBrandHeroEnd) 100%);
    color: #fff;
    animation: fade-rise-b-zalh8accu7 .5s ease both;
}

.eyebrow[b-zalh8accu7] {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    margin-bottom: 16px;
}

.greeting h1[b-zalh8accu7] {
    font-size: clamp(28px, 4vw, 40px);
    line-height: 1.1;
    margin: 0 0 8px;
    font-weight: 700;
}

.greeting-sub[b-zalh8accu7] {
    margin: 0;
    font-size: 16px;
    opacity: .92;
}

/* ---------- Applications ---------- */
.apps[b-zalh8accu7] {
    animation: fade-rise-b-zalh8accu7 .5s ease both;
    animation-delay: .08s;
}

.apps-head[b-zalh8accu7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.apps-head h2[b-zalh8accu7] {
    margin: 0;
    font-size: 24px;
}

.apps-head-actions[b-zalh8accu7] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* "Apprenticeship" badge on a summary card, next to the campus name. */
.app-type-chip[b-zalh8accu7] {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    vertical-align: middle;
    background: var(--colorBrandBackground2);
    color: var(--colorBrandForeground1);
}

.apps-grid[b-zalh8accu7] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}

/* Same faint brand diagonal wash the course tiles carry, layered over the
   .tile surface so the dashboard and the picker read as one system. */
.app-card[b-zalh8accu7] {
    background-image: linear-gradient(160deg,
        color-mix(in srgb, var(--colorBrandBackground) 5%, transparent) 0%,
        transparent 60%);
}

.app-card-top[b-zalh8accu7] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.app-card h3[b-zalh8accu7] {
    margin: 0;
}

.app-meta[b-zalh8accu7] {
    color: var(--colorNeutralForeground3);
    font-size: 13px;
    margin: 2px 0 0;
}

.app-continue[b-zalh8accu7] {
    align-self: flex-start;
}

.app-card-actions[b-zalh8accu7] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 14px;
}

.app-delete[b-zalh8accu7] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 40px;
    padding: 6px 4px;
    border: 0;
    background: transparent;
    color: var(--colorStatusDangerForeground1, #b10e1c);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.app-delete:disabled[b-zalh8accu7] {
    cursor: wait;
    opacity: .65;
}

.app-delete:hover:not(:disabled)[b-zalh8accu7] {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.empty[b-zalh8accu7] {
    align-items: flex-start;
    gap: 10px;
}

/* First-visit route cards: College / Apprenticeship side by side. */
.start-grid[b-zalh8accu7] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}

.start-grid .empty p[b-zalh8accu7] {
    flex: 1 1 auto;
    margin: 0;
}

/* ---------- Status pills ---------- */
.pill[b-zalh8accu7] {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
    background: var(--colorNeutralBackground2);
    color: var(--colorNeutralForeground2);
}

.pill-draft[b-zalh8accu7] {
    background: var(--colorPaletteBlueBackground2, #dbebf7);
    color: var(--colorPaletteBlueForeground2, #004377);
}

.pill-submitted[b-zalh8accu7] {
    background: var(--colorStatusSuccessBackground1, #f1faf1);
    color: var(--colorStatusSuccessForeground1, #0e700e);
}

/* Chosen course (first preference + count of the rest) */
.app-course[b-zalh8accu7] {
    margin: 10px 0 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--colorNeutralForeground1);
    line-height: 1.35;
}

.app-course-more[b-zalh8accu7] {
    margin-left: 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--colorBrandForeground1);
    background: var(--colorBrandBackground2);
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
}

/* ---------- Progress bar ---------- */
.progress[b-zalh8accu7] {
    height: 8px;
    border-radius: 999px;
    background: var(--colorNeutralBackground2);
    overflow: hidden;
    margin-top: 14px;
}

.progress-fill[b-zalh8accu7] {
    height: 100%;
    border-radius: 999px;
    background: var(--applyBrandBackground);
    transition: width .3s ease;
}

.progress-label[b-zalh8accu7] {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--colorNeutralForeground2);
}

@media (min-width: 1025px) {
    .dashboard[b-zalh8accu7] {
        grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
        align-items: start;
    }
}

@keyframes fade-rise-b-zalh8accu7 {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

@media (max-width: 600px) {
    .greeting[b-zalh8accu7] {
        padding: 32px 22px;
    }
}

.docs-cta[b-zalh8accu7] {
    display: flex;
    align-items: center;
    gap: 16px;
    /* Clear visual break after the applications section (adds to the
       .dashboard-main column gap). */
    margin-top: 40px;
}

.docs-cta-text[b-zalh8accu7] {
    flex: 1;
    min-width: 0;
}

.docs-cta-text p[b-zalh8accu7] {
    margin: 4px 0 0;
    color: var(--colorNeutralForeground3);
}

/* Respect reduced-motion: no entrance animations or growing bars. */
@media (prefers-reduced-motion: reduce) {
    .greeting[b-zalh8accu7],
    .apps[b-zalh8accu7] {
        animation: none;
    }

    .progress-fill[b-zalh8accu7] {
        transition: none;
    }
}

.next-event[b-zalh8accu7] { min-width: 0; padding: 24px; overflow-wrap: anywhere; }
.next-event h2[b-zalh8accu7] { margin: 0 0 16px; }
.next-event h3[b-zalh8accu7] { margin: 0 0 8px; }
.next-event-when[b-zalh8accu7] { font-weight: 600; color: var(--colorBrandForeground1); }
.next-event-description[b-zalh8accu7] { white-space: pre-wrap; }
.next-event-timezone[b-zalh8accu7] { font-size: var(--fontSizeBase200); color: var(--colorNeutralForeground3); }
/* /Components/Pages/Declaration.razor.rz.scp.css */
/* ============================================================
   Declaration — section checklist, confirm card, submitted state
   ============================================================ */

/* ---------- Checklist ---------- */
.decl-checklist h2[b-r1o8oc2u77] {
    margin: 0;
    font-size: 18px;
}

.decl-checklist-sub[b-r1o8oc2u77] {
    margin: 0 0 8px;
}

.decl-row[b-r1o8oc2u77] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--colorNeutralForeground1);
    transition: background .12s ease;
}

.decl-row:hover[b-r1o8oc2u77] {
    background: var(--colorNeutralBackground2);
}

.decl-dot[b-r1o8oc2u77] {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid var(--colorNeutralStroke1);
    font-size: 13px;
    font-weight: 700;
    color: transparent;
}

.decl-row.done .decl-dot[b-r1o8oc2u77] {
    background: var(--colorStatusSuccessBackground3, #107c10);
    border-color: var(--colorStatusSuccessBackground3, #107c10);
    color: #fff;
}

.decl-name[b-r1o8oc2u77] {
    flex: 1 1 auto;
    font-weight: 600;
    font-size: 14.5px;
}

.decl-state[b-r1o8oc2u77] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--colorNeutralBackground3, #ededed);
    color: var(--colorNeutralForeground2);
}

.decl-row.done .decl-state[b-r1o8oc2u77] {
    background: var(--colorStatusSuccessBackground1, #f1faf1);
    color: var(--colorStatusSuccessForeground1, #0e700e);
}

/* ---------- Personal statement ---------- */
.decl-statement label[b-r1o8oc2u77] {
    display: block;
    font-size: 18px;
    font-weight: 700;
}

.decl-statement label span[b-r1o8oc2u77] {
    font-size: 14px;
    font-weight: 400;
    color: var(--colorNeutralForeground3);
}

.decl-statement p[b-r1o8oc2u77] {
    margin: 10px 0;
    color: var(--colorNeutralForeground2);
    line-height: 1.5;
}

.decl-statement textarea[b-r1o8oc2u77] {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-height: 220px;
    resize: vertical;
    padding: 12px;
    border: 1px solid var(--colorNeutralStroke1);
    border-radius: var(--borderRadiusMedium);
    background: var(--colorNeutralBackground1);
    color: var(--colorNeutralForeground1);
    font: inherit;
    font-size: 16px;
    line-height: 1.5;
}

.decl-statement textarea:focus-visible[b-r1o8oc2u77] {
    outline: 2px solid var(--colorBrandStroke1);
    outline-offset: 2px;
}

#personal-statement-save-note[b-r1o8oc2u77] {
    margin-bottom: 0;
    font-size: 13px;
}

/* ---------- Confirm card ---------- */
.decl-confirm[b-r1o8oc2u77] {
    margin-top: 0;
}

.decl-accept[b-r1o8oc2u77] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    font-size: 14.5px;
    line-height: 1.45;
}

.decl-accept input[b-r1o8oc2u77] {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    accent-color: var(--colorStatusSuccessBackground3, #107c10);
}

/* ---------- Submitted state ---------- */
.decl-done[b-r1o8oc2u77] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 34px 22px 28px;
    border-radius: 16px;
    background: var(--colorStatusSuccessBackground1, #f1faf1);
    border: 1px solid var(--colorStatusSuccessBorder1, #9fd89f);
}

.decl-done-badge[b-r1o8oc2u77] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--colorStatusSuccessBackground3, #107c10);
    color: #fff;
    font-size: 26px;
    font-weight: 700;
    box-shadow: 0 6px 20px rgba(16, 124, 16, 0.28);
}

.decl-done h2[b-r1o8oc2u77] {
    margin: 6px 0 0;
    font-size: 24px;
}

.decl-done p[b-r1o8oc2u77] {
    margin: 0;
    max-width: 46ch;
    color: var(--colorNeutralForeground2);
    line-height: 1.5;
}

.decl-done .decl-feedback-thanks[b-r1o8oc2u77] {
    margin-top: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--colorStatusSuccessForeground1, #0e700e);
}

.decl-next-grid[b-r1o8oc2u77] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 14px;
}

@media (max-width: 620px) {
    .decl-next-grid[b-r1o8oc2u77] {
        grid-template-columns: 1fr;
    }
}

.decl-next-steps[b-r1o8oc2u77] {
    margin: 4px 0 0;
    padding-left: 20px;
    display: grid;
    gap: 10px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--colorNeutralForeground2);
}

.decl-contact-link[b-r1o8oc2u77] {
    margin-top: auto;
    font-weight: 600;
    color: var(--colorBrandForegroundLink);
    text-decoration: underline;
    text-underline-offset: 2px;
}
/* /Components/Pages/Documents.razor.rz.scp.css */
/* .tile, .btn, .btn-brand, .native-select are global (wwwroot/app.css).
   .greeting, .eyebrow, .greeting-sub, .empty, and .pill are Dashboard.razor.css
   isolated rules that don't reach this page's markup, so the minimal visual
   rules are copied here rather than globalizing Dashboard's styles. */

.greeting[b-v3hs1ddtlu] {
    border-radius: 16px;
    padding: 40px 36px;
    background-image: linear-gradient(135deg,
        var(--applyBrandHeroStart) 0%,
        var(--applyBrandHeroMid) 55%,
        var(--applyBrandHeroEnd) 100%);
    color: #fff;
}

.eyebrow[b-v3hs1ddtlu] {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    margin-bottom: 16px;
}

.greeting h1[b-v3hs1ddtlu] {
    font-size: clamp(28px, 4vw, 40px);
    line-height: 1.1;
    margin: 0 0 8px;
    font-weight: 700;
}

.greeting-sub[b-v3hs1ddtlu] {
    margin: 0;
    font-size: 16px;
    opacity: .92;
}

.empty[b-v3hs1ddtlu] {
    align-items: flex-start;
    gap: 10px;
}

.pill[b-v3hs1ddtlu] {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
    background: var(--colorNeutralBackground2);
    color: var(--colorNeutralForeground2);
}

.doc-upload[b-v3hs1ddtlu] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 32px;
}

.doc-list[b-v3hs1ddtlu] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.doc-row[b-v3hs1ddtlu] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.doc-row-main[b-v3hs1ddtlu] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.doc-meta[b-v3hs1ddtlu] {
    color: var(--colorNeutralForeground3);
    font-size: 13px;
}

.pill-verified[b-v3hs1ddtlu] {
    background: var(--colorStatusSuccessBackground2);
    color: var(--colorStatusSuccessForeground2);
}

.doc-errors[b-v3hs1ddtlu] {
    color: var(--colorStatusDangerForeground1);
}
/* /Components/Pages/EqualityMonitoring.razor.rz.scp.css */
/* .tile, .native-select, .workflow-list are global (wwwroot/app.css). */

.hint[b-634stlzao5] {
    margin: 0;
    color: var(--colorNeutralForeground2);
    font-size: 13px;
}

.disability-grid[b-634stlzao5] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px 16px;
}

.life-circumstances[b-634stlzao5] {
    display: grid;
    gap: 24px;
}

.life-circumstance[b-634stlzao5] {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.circumstance-description[b-634stlzao5] {
    margin: 0;
    color: var(--colorNeutralForeground2);
    font-size: 14px;
    line-height: 1.5;
}

@media (min-width: 640px) {
    .disability-grid[b-634stlzao5] {
        grid-template-columns: 1fr 1fr;
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* ---------- Under construction ----------
   Temporary stand-in while the landing page markup is commented out
   (see Home.razor, 2026-08-26). Delete this block when it is restored. */
.construction[b-7nkpau9k4z] {
    max-width: 720px;
    margin: 48px auto 0;
    padding: 56px 40px;
    border-radius: 16px;
    text-align: center;
    color: #fff;
    background: linear-gradient(135deg, var(--applyBrandHeroStart) 0%, var(--applyBrandHeroMid) 55%, var(--applyBrandHeroEnd) 100%);
}

.construction-icon[b-7nkpau9k4z] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 999px;
    background: #fff;
    margin-bottom: 24px;
}

.construction h1[b-7nkpau9k4z] {
    font-size: clamp(28px, 4vw, 40px);
    line-height: 1.1;
    margin: 0 0 12px;
    font-weight: 700;
}

.construction .lead[b-7nkpau9k4z] {
    font-size: 18px;
    line-height: 1.5;
    opacity: .92;
    margin: 0 0 28px;
}

.construction .notice[b-7nkpau9k4z] {
    display: inline-block;
    margin: 0;
    padding: 12px 18px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.14);
    font-size: 15px;
    line-height: 1.4;
}

.landing[b-7nkpau9k4z] {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 56px;
}

/* ---------- Hero ---------- */
.hero[b-7nkpau9k4z] {
    position: relative;
    border-radius: 16px;
    padding: 64px 48px;
    /* A lighter campus tint lets the photo show through, with the strongest
       shading behind the text and a clearer view toward the right edge. */
    background-image:
        linear-gradient(90deg,
            rgba(var(--applyHeroTintRgb), .80) 0%,
            rgba(var(--applyHeroTintRgb), .58) 52%,
            rgba(var(--applyHeroTintRgb), .18) 100%),
        var(--applyHeroImage),
        linear-gradient(135deg, var(--applyBrandHeroStart) 0%, var(--applyBrandHeroMid) 55%, var(--applyBrandHeroEnd) 100%);
    background-position: center, var(--applyHeroImagePosition), center;
    background-size: cover, cover, cover;
    color: #fff;
    overflow: hidden;
}

    .hero[b-7nkpau9k4z]::after {
        content: none;
    }

.hero-content[b-7nkpau9k4z] {
    position: relative;
    max-width: 640px;
}

.eyebrow[b-7nkpau9k4z] {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    margin-bottom: 20px;
}

.hero h1[b-7nkpau9k4z] {
    font-size: clamp(32px, 5vw, 52px);
    line-height: 1.08;
    margin: 0 0 16px;
    font-weight: 700;
}

.hero .lead[b-7nkpau9k4z] {
    font-size: 18px;
    line-height: 1.5;
    margin: 0 0 28px;
}

.hero h1[b-7nkpau9k4z],
.hero .lead[b-7nkpau9k4z] {
    text-shadow: 0 1px 3px rgba(0, 0, 0, .65);
}

.hero-actions[b-7nkpau9k4z] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* On wide screens, the photo can open up further beyond the text column. */
@media (min-width: 1200px) {
    .hero[b-7nkpau9k4z] {
        background-image:
            linear-gradient(90deg,
                rgba(var(--applyHeroTintRgb), .72) 0%,
                rgba(var(--applyHeroTintRgb), .60) 40%,
                rgba(var(--applyHeroTintRgb), .45) 63%,
                rgba(var(--applyHeroTintRgb), .08) 88%,
                rgba(var(--applyHeroTintRgb), 0) 100%),
            var(--applyHeroImage),
            linear-gradient(135deg, var(--applyBrandHeroStart) 0%, var(--applyBrandHeroMid) 55%, var(--applyBrandHeroEnd) 100%);
    }
}

/* ---------- Stats ---------- */
.stats[b-7nkpau9k4z] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.stat[b-7nkpau9k4z] {
    flex: 1 1 160px;
    text-align: center;
    padding: 20px;
    border-radius: 12px;
    background: var(--colorNeutralBackground2);
}

.stat-num[b-7nkpau9k4z] {
    display: block;
    font-size: 34px;
    font-weight: 700;
    color: var(--colorBrandForeground1);
}

.stat-label[b-7nkpau9k4z] {
    color: var(--colorNeutralForeground2);
    font-size: 14px;
}

/* ---------- Section headings ---------- */
section > h2[b-7nkpau9k4z] {
    font-size: 26px;
    margin: 0 0 6px;
}

.section-sub[b-7nkpau9k4z] {
    color: var(--colorNeutralForeground2);
    margin: 0 0 20px;
}

/* ---------- CTA banner ---------- */
.cta-banner[b-7nkpau9k4z] {
    border-radius: 16px;
    padding: 48px;
    background: linear-gradient(135deg, var(--applyBrandHeroStart), var(--applyBrandHeroEnd));
    color: #fff;
    text-align: center;
}

    .cta-banner h2[b-7nkpau9k4z] {
        margin: 0 0 8px;
        font-size: 28px;
    }

    .cta-banner p[b-7nkpau9k4z] {
        margin: 0 0 24px;
        opacity: .92;
    }

@media (max-width: 600px) {
    .construction[b-7nkpau9k4z] {
        padding: 40px 24px;
    }

    .hero[b-7nkpau9k4z] {
        padding: 40px 24px;
    }

    .cta-banner[b-7nkpau9k4z] {
        padding: 36px 22px;
    }
}
/* /Components/Pages/KeyDates.razor.rz.scp.css */
.calendar-page[b-wxi56p1ej2] { max-width: 960px; }
.calendar-events[b-wxi56p1ej2] { display: grid; gap: 20px; margin-top: 24px; }
.calendar-event[b-wxi56p1ej2] { min-width: 0; padding: 24px; overflow-wrap: anywhere; scroll-margin-top: 24px; }
.calendar-event h2[b-wxi56p1ej2] { margin: 8px 0 12px; }
.event-type[b-wxi56p1ej2] { color: var(--colorBrandForeground1); font-weight: 600; margin: 0; }
.event-when[b-wxi56p1ej2] { font-weight: 600; }
.event-context[b-wxi56p1ej2] { color: var(--colorNeutralForeground3); }
.event-description[b-wxi56p1ej2] { white-space: pre-wrap; }
/* /Components/Pages/Notifications.razor.rz.scp.css */
.notif-page[b-nvm7xzed0y] {
    max-width: 720px;
}

.notif-head .eyebrow[b-nvm7xzed0y] {
    color: var(--colorBrandForeground1);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.notif-head h1[b-nvm7xzed0y] {
    margin: 4px 0 6px;
}

.notif-list[b-nvm7xzed0y] {
    list-style: none;
    margin: 24px 0 0;
    padding: 0;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 14px;
    overflow: hidden;
    background: var(--colorNeutralBackground1);
}

.notif-item[b-nvm7xzed0y] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-top: 1px solid var(--colorNeutralStroke2);
}

.notif-item:first-child[b-nvm7xzed0y] {
    border-top: 0;
}

.notif-icon[b-nvm7xzed0y] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--colorBrandBackground2);
}

.notif-body[b-nvm7xzed0y] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.notif-title[b-nvm7xzed0y] {
    font-weight: 600;
    color: var(--colorNeutralForeground1);
}

.notif-when[b-nvm7xzed0y] {
    font-size: 12.5px;
    color: var(--colorNeutralForeground3);
}

.notif-empty[b-nvm7xzed0y] {
    margin-top: 24px;
    align-items: center;
    text-align: center;
    gap: 8px;
}

.notif-empty h3[b-nvm7xzed0y] {
    margin: 6px 0 0;
}

.notif-new[b-nvm7xzed0y] {
    display: inline-block;
    margin-inline-start: 8px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: var(--fontSizeBase200);
    font-weight: 600;
    color: var(--colorNeutralForegroundOnBrand);
    background: var(--colorBrandBackground);
}

.notif-text[b-nvm7xzed0y] {
    color: var(--colorNeutralForeground2);
}
/* /Components/Pages/PersonalDetails.razor.rz.scp.css */
/* ============================================================
   Personal details - "warm campus split"
   Desktop: form (left) + sticky campus photo rail (right).
   Field-level valid / invalid affordances built on the Fluent
   status tokens so they adapt to light/dark + campus theme.
   ============================================================ */

.pd-page[b-7bm1v45oo6] {
    max-width: 1180px;
    height: 100%;
}

/* ---------- Two-column shell ---------- */
.pd-layout[b-7bm1v45oo6] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    grid-template-rows: minmax(0, 1fr);
    gap: 44px;
    align-items: start;
    height: 100%;
    min-height: 0;
}

.pd-main[b-7bm1v45oo6] {
    min-width: 0;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.pd-main[b-7bm1v45oo6]  .step-header {
    position: static;
    flex: 0 0 auto;
    /* Long guidance and short landscape windows must leave room for fields. */
    max-height: 45%;
    overflow-y: auto;
}

.pd-layout[b-7bm1v45oo6]  .pic-aside {
    max-height: 100%;
    overflow-y: auto;
}

/* Keep the card edge still; only the form inside it scrolls. */
.pd-form-card[b-7bm1v45oo6] {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    overflow: hidden;
    background: var(--colorNeutralBackground1);
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 16px;
    box-shadow: var(--shadow4);
}

.pd-form-card[b-7bm1v45oo6]  .pd-form-scroll {
    width: 100%;
    min-width: 0;
    min-height: 0;
    overflow: auto;
    overscroll-behavior-y: contain;
    scroll-padding-block: 16px;
}

/* ---------- The form panel ---------- */
.pd-form[b-7bm1v45oo6] {
    min-width: 0;
    margin: 0;
    border: 0;
    padding: 30px 32px 28px;
}

.pd-form-card .pd-summary[b-7bm1v45oo6] {
    margin: 16px 16px 0;
}

.pd-section + .pd-section[b-7bm1v45oo6] {
    margin-top: 30px;
    padding-top: 26px;
    border-top: 1px solid var(--colorNeutralStroke2);
}

.pd-section-title[b-7bm1v45oo6] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0 0 18px;
    /* Proper heading size — the old 12px eyebrow read as a caption, and
       Source Sans 3's smaller caps made it worse. Keeps the uppercase
       brand treatment at a size that carries the section structure. */
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--colorBrandForeground1);
}

.pd-section-title small[b-7bm1v45oo6] {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--colorNeutralForeground3);
}

/* ---------- Field grid ---------- */
.field-grid[b-7bm1v45oo6] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 22px;
}

.field-grid .span-2[b-7bm1v45oo6] {
    grid-column: 1 / -1;
}

.address-mode[b-7bm1v45oo6] {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    margin-bottom: 16px;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 9px;
    background: var(--colorNeutralBackground2);
}

.address-mode button[b-7bm1v45oo6] {
    min-height: 36px;
    padding: 0 14px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--colorNeutralForeground2);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.address-mode button.active[b-7bm1v45oo6] {
    background: var(--colorBrandBackground);
    color: var(--colorNeutralForegroundOnBrand);
}

.address-lookup[b-7bm1v45oo6] {
    padding: 16px;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 12px;
    background: var(--colorNeutralBackground2);
}

.address-lookup > label[b-7bm1v45oo6] {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 700;
}

.address-lookup-row[b-7bm1v45oo6] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
}

.address-lookup-note[b-7bm1v45oo6] {
    margin: 10px 0 0;
    color: var(--colorNeutralForeground2);
    font-size: 13px;
}

.address-results[b-7bm1v45oo6] {
    margin-top: 12px;
}

.address-results label[b-7bm1v45oo6] {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--colorNeutralForeground1);
}

.address-results select[b-7bm1v45oo6] {
    width: 100%;
}

.address-manual-link[b-7bm1v45oo6] {
    margin-top: 10px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--colorBrandForegroundLink);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.address-fields[b-7bm1v45oo6] {
    margin-top: 18px;
}

@media (max-width: 620px) {
    .field-grid[b-7bm1v45oo6] {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Title + its aside wrap awkwardly side-by-side at phone widths — stack them. */
    .pd-section-title[b-7bm1v45oo6] {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    .address-mode[b-7bm1v45oo6] {
        display: flex;
    }

    .address-mode button[b-7bm1v45oo6] {
        flex: 1 1 0;
    }

    .address-lookup-row[b-7bm1v45oo6] {
        grid-template-columns: 1fr;
    }
}

/* Individual field, the valid/invalid rails and the "Looks good" flag live in
   PersonalDetailField.razor.css - they style that component's own markup, so
   CSS isolation only applies them when scoped to that component. */

/* ---------- Error summary banner (post-submit) ---------- */
.pd-summary[b-7bm1v45oo6] {
    display: flex;
    gap: 12px;
    margin: 0 0 22px;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid var(--colorStatusDangerBorder2, #eeb4b4);
    background: var(--colorStatusDangerBackground1, #fdf3f4);
    color: var(--colorStatusDangerForeground1, #b10e1c);
}

.pd-summary .pd-summary-icon[b-7bm1v45oo6] {
    font-size: 18px;
    line-height: 1.3;
}

.pd-summary strong[b-7bm1v45oo6] {
    display: block;
    font-size: 14px;
}

.pd-summary p[b-7bm1v45oo6] {
    margin: 2px 0 0;
    font-size: 13px;
    color: var(--colorNeutralForeground2);
}

/* ---------- Action row ---------- */
.pd-actions[b-7bm1v45oo6] {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin: 0 32px 28px;
}

.pd-save-state[b-7bm1v45oo6] {
    margin-right: auto;
    font-size: 13.5px;
}

.pd-save-state .ok[b-7bm1v45oo6] {
    color: var(--colorStatusSuccessForeground1, #0e700e);
    font-weight: 600;
}

.pd-save-state .saving[b-7bm1v45oo6] {
    color: var(--colorNeutralForeground3);
}

.pd-save-state .err[b-7bm1v45oo6] {
    color: var(--colorStatusDangerForeground1, #b10e1c);
}

/* ---------- Responsive: drop the rail below desktop ---------- */
@media (max-width: 1024px) {
    .pd-layout[b-7bm1v45oo6] {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }
}

@media (max-width: 768px) {
    .pd-form[b-7bm1v45oo6] {
        padding: 22px 18px;
    }

    .pd-actions[b-7bm1v45oo6] {
        margin: 0 18px 22px;
    }
}

/* ---------- Entrance ---------- */
@media (prefers-reduced-motion: no-preference) {
    .pd-form-card[b-7bm1v45oo6] {
        /* Release the entrance transform once the form is in place. */
        animation: pd-rise-b-7bm1v45oo6 .5s ease backwards;
    }

    @keyframes pd-rise-b-7bm1v45oo6 {
        from {
            opacity: 0;
            transform: translateY(10px);
        }
    }
}
/* /Components/Pages/Settings.razor.rz.scp.css */
.settings-page[b-xb0sijwhig] {
    max-width: 720px;
}

.settings-head .eyebrow[b-xb0sijwhig] {
    color: var(--colorBrandForeground1);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.settings-head h1[b-xb0sijwhig] {
    margin: 4px 0 6px;
}

.settings-card[b-xb0sijwhig] {
    margin-top: 24px;
    background: var(--colorNeutralBackground1);
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 14px;
    padding: 8px 22px;
    box-shadow: var(--shadow4);
}

.settings-title[b-xb0sijwhig] {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--colorBrandForeground1);
    margin: 16px 0 4px;
}

.settings-row[b-xb0sijwhig] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 18px 0;
    border-top: 1px solid var(--colorNeutralStroke2);
}

.settings-title + .settings-row[b-xb0sijwhig] {
    border-top: 0;
}

.settings-label[b-xb0sijwhig] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.settings-label-main[b-xb0sijwhig] {
    font-weight: 600;
    color: var(--colorNeutralForeground1);
}

.settings-label-sub[b-xb0sijwhig] {
    font-size: 13px;
    color: var(--colorNeutralForeground3);
}

/* Segmented control (shared by campus + mode pickers) */
.seg[b-xb0sijwhig] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 9px;
    background: var(--colorNeutralBackground2);
}

.seg-option[b-xb0sijwhig] {
    appearance: none;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--colorNeutralForeground2);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 14px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

/* Touch pointers get a full 44px target height. */
@media (pointer: coarse) {
    .seg-option[b-xb0sijwhig] {
        min-height: 44px;
    }
}

.seg-option:hover[b-xb0sijwhig] {
    color: var(--colorBrandForeground1);
    background: var(--colorBrandBackground2);
}

.seg-option.active[b-xb0sijwhig] {
    background: var(--colorBrandBackground);
    color: var(--colorNeutralForegroundOnBrand);
    box-shadow: var(--shadow2);
}

.seg-option.active:hover[b-xb0sijwhig] {
    color: var(--colorNeutralForegroundOnBrand);
}

.seg-option[b-xb0sijwhig]  svg {
    fill: currentColor;
}
/* /Components/PersonalDetailField.razor.rz.scp.css */
/* Field-level styling for one personal-details field. These rules live with
   the component that owns the markup so Blazor CSS isolation actually applies
   them (when they lived on the parent page, the scope attribute never reached
   this child's elements and every "Looks good" flag showed permanently). */

.field[b-j34rmq0o5a] {
    /* Contain the visually hidden description inside the scrolling form. */
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.field.span-2[b-j34rmq0o5a] {
    grid-column: 1 / -1;
}

/* A stable description for aria-describedby and the header's focus guidance.
   The page header provides the visible copy on desktop and mobile. */
.contextual-field-help[b-j34rmq0o5a] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.field-head[b-j34rmq0o5a] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 7px;
    min-height: 18px;
}

.field-label[b-j34rmq0o5a] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--colorNeutralForeground1);
}

.req[b-j34rmq0o5a] {
    margin-left: 4px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--colorNeutralForeground3);
}

/* "Looks good" flag - hidden until the field is the valid, just-edited one */
.field-flag[b-j34rmq0o5a] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--colorStatusSuccessForeground1, #0e700e);
    opacity: 0;
    transform: translateY(2px);
    transition: opacity .2s ease, transform .2s ease;
}

.field-flag[b-j34rmq0o5a]::before {
    content: "\2713"; /* checkmark */
    font-size: 12px;
}

/* Keep controls flush with their labels. The validation rail sits in the
   gutter rather than reserving space inside every input wrapper. */
.field-control[b-j34rmq0o5a] {
    position: relative;
    border-radius: 8px;
    transition: background-color .18s ease;
}

.field-control[b-j34rmq0o5a]::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: -10px;
    width: 3px;
    border-radius: 3px;
    background: transparent;
    pointer-events: none;
    transition: background-color .18s ease;
}

.field-control[b-j34rmq0o5a]  fluent-text-input,
.field-control[b-j34rmq0o5a]  .native-select,
.field-control[b-j34rmq0o5a]  fluent-date-picker {
    width: 100%;
}

/* Neutralise the global 1px valid/invalid outlines inside our fields -
   the rail + flag carry the state instead. */
.field-control[b-j34rmq0o5a]  .valid.modified:not([type=checkbox]),
.field-control[b-j34rmq0o5a]  .invalid {
    outline: none;
}

/* ---- Valid state ---- */
.field--valid .field-flag[b-j34rmq0o5a] {
    opacity: 1;
    transform: none;
}

.field--valid .field-control[b-j34rmq0o5a] {
    background: var(--colorStatusSuccessBackground1, #f1faf1);
}

.field--valid .field-control[b-j34rmq0o5a]::before {
    background: var(--colorStatusSuccessBorder1, #6cbb6c);
}

/* ---- Invalid state ---- */
.field--invalid .field-label[b-j34rmq0o5a] {
    color: var(--colorStatusDangerForeground1, #b10e1c);
}

.field--invalid .field-control[b-j34rmq0o5a] {
    background: var(--colorStatusDangerBackground1, #fdf3f4);
}

.field--invalid .field-control[b-j34rmq0o5a]::before {
    background: var(--colorStatusDangerBorder1, #d6453d);
}

/* Validation messages are rendered into the @Errors slot, so reach them
   through ::deep. */
.field[b-j34rmq0o5a]  .field-error {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 7px 0 0;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--colorStatusDangerForeground1, #b10e1c);
}

.field[b-j34rmq0o5a]  .field-error::before {
    content: "\26A0"; /* warning triangle */
    font-size: 12.5px;
    line-height: 1.4;
}